diff --git a/packages/manager/.changeset/pr-13412-upcoming-features-1771427444510.md b/packages/manager/.changeset/pr-13412-upcoming-features-1771427444510.md new file mode 100644 index 00000000000..81c5cb1f276 --- /dev/null +++ b/packages/manager/.changeset/pr-13412-upcoming-features-1771427444510.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Empty message for `SwitchAccountDrawer` child accounts table ([#13412](https://github.com/linode/manager/pull/13412)) diff --git a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx index d18e6f105f1..f6b63918268 100644 --- a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx +++ b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx @@ -297,6 +297,7 @@ export const SwitchAccountDrawer = (props: Props) => { ? currentParentTokenWithBearer : currentTokenWithBearer } + filter={filter} isLoading={isLoading} isSwitchingChildAccounts={isSwitchingChildAccounts} onClose={onClose} diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx index 5b93722145e..067748156a5 100644 --- a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx +++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx @@ -2,8 +2,6 @@ import { Box, CircleProgress, LinkButton, Notice, Stack } from '@linode/ui'; import React from 'react'; import { Waypoint } from 'react-waypoint'; -import { useIsIAMDelegationEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled'; - import type { ChildAccount, Filter, UserType } from '@linode/api-v4'; export interface ChildAccountListProps { @@ -43,8 +41,6 @@ export const ChildAccountList = React.memo( fetchNextPage, isFetchingNextPage, }: ChildAccountListProps) => { - const { isIAMDelegationEnabled } = useIsIAMDelegationEnabled(); - if (isLoading) { return ( @@ -53,11 +49,7 @@ export const ChildAccountList = React.memo( ); } - if ( - !isIAMDelegationEnabled && - childAccounts && - childAccounts.length === 0 - ) { + if (childAccounts && childAccounts.length === 0) { return ( There are no child accounts @@ -69,21 +61,6 @@ export const ChildAccountList = React.memo( ); } - if ( - isIAMDelegationEnabled && - childAccounts && - childAccounts.length === 0 && - !Object.prototype.hasOwnProperty.call(filter, 'company') - ) { - return ( - - You don't have access to other accounts. You must be added to a - delegation by your account administrator to have access to other - accounts. - - ); - } - const renderChildAccounts = childAccounts?.map((childAccount, idx) => { const euuid = childAccount.euuid; return ( diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.test.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.test.tsx new file mode 100644 index 00000000000..b7a4ec14655 --- /dev/null +++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.test.tsx @@ -0,0 +1,80 @@ +import React from 'react'; + +import { accountFactory } from 'src/factories'; +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { ChildAccountsTable } from './ChildAccountsTable'; + +import type { ChildAccountsTableProps } from './ChildAccountsTable'; + +const childAccounts = accountFactory.buildList(5).map((account, i) => ({ + ...account, + company: `Child Account ${i}`, +})); + +const childAccountsWithMoreThan25 = accountFactory + .buildList(30) + .map((account, i) => ({ + ...account, + company: `Child Account ${i}`, + })); + +const props: ChildAccountsTableProps = { + childAccounts, + currentTokenWithBearer: 'Bearer 123', + onSwitchAccount: vi.fn(), + page: 1, + pageSize: 25, + setIsSwitchingChildAccounts: vi.fn(), + totalResults: 0, + userType: undefined, + filter: {}, + isLoading: false, + isSwitchingChildAccounts: false, + onClose: vi.fn(), + onPageChange: vi.fn(), + onPageSizeChange: vi.fn(), +}; + +describe('ChildAccountsTable', () => { + it('should display a list of child accounts', async () => { + const { getByTestId, getAllByText } = renderWithTheme( + + ); + + expect(getByTestId('child-accounts-table')).toHaveAttribute( + 'aria-label', + 'List of Child Accounts' + ); + + childAccounts.forEach((account) => { + expect(getAllByText(account.company)).toHaveLength(1); + }); + }); + + it('should display pagination when there are more than 25 child accounts', async () => { + const firstPageAccounts = childAccountsWithMoreThan25.slice(0, 25); + + const { getByTestId } = renderWithTheme( + + ); + + expect(getByTestId('child-accounts-table-pagination')).toBeVisible(); + }); + + it('should display an empty state when no child accounts are found', async () => { + const { getByText } = renderWithTheme( + + ); + + expect( + getByText( + /You don't have access to other accounts. You must be added to a delegation by an account administrator to have access to other accounts./ + ) + ).toBeInTheDocument(); + }); +}); diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx index 1f4c316003d..31cd956fb29 100644 --- a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx +++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx @@ -1,4 +1,4 @@ -import { Box, CircleProgress, LinkButton, useTheme } from '@linode/ui'; +import { Box, CircleProgress, LinkButton, Notice, useTheme } from '@linode/ui'; import { Pagination } from 'akamai-cds-react-components/Pagination'; import { Table, @@ -10,11 +10,12 @@ import React from 'react'; import { MIN_PAGE_SIZE } from 'src/components/PaginationFooter/PaginationFooter.constants'; -import type { Account, UserType } from '@linode/api-v4'; +import type { Account, Filter, UserType } from '@linode/api-v4'; -interface ChildAccountsTableProps { +export interface ChildAccountsTableProps { childAccounts?: Account[]; currentTokenWithBearer?: string; + filter: Filter; isLoading: boolean; isSwitchingChildAccounts: boolean; onClose: () => void; @@ -42,6 +43,7 @@ interface ChildAccountsTableProps { export const ChildAccountsTable = (props: ChildAccountsTableProps) => { const { + filter, childAccounts, currentTokenWithBearer, isLoading, @@ -74,9 +76,25 @@ export const ChildAccountsTable = (props: ChildAccountsTableProps) => { ); } + if ( + childAccounts && + childAccounts.length === 0 && + !Object.prototype.hasOwnProperty.call(filter, 'company') + ) { + return ( + + You don't have access to other accounts. You must be added to a + delegation by an account administrator to have access to other accounts. + + ); + } + return ( <> - +
{childAccounts?.map((childAccount, idx) => ( @@ -111,6 +129,7 @@ export const ChildAccountsTable = (props: ChildAccountsTableProps) => { {totalResults > MIN_PAGE_SIZE && ( ) => handlePageChange(Number(e.detail))