upcoming: [UIE-10251] - Empty message for SwitchAccountDrawer child accounts table

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))

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}

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 (
         <Box display="flex" justifyContent="center">
@@ -53,11 +49,7 @@ export const ChildAccountList = React.memo(
       );
     }
 
-    if (
-      !isIAMDelegationEnabled &&
-      childAccounts &&
-      childAccounts.length === 0
-    ) {
+    if (childAccounts && childAccounts.length === 0) {
       return (
         <Notice variant="info">
           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 (
-        <Notice variant="info">
-          You don&apos;t have access to other accounts. You must be added to a
-          delegation by your account administrator to have access to other
-          accounts.
-        </Notice>
-      );
-    }
-
     const renderChildAccounts = childAccounts?.map((childAccount, idx) => {
       const euuid = childAccount.euuid;
       return (

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(
+      <ChildAccountsTable {...props} />
+    );
+
+    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(
+      <ChildAccountsTable
+        {...props}
+        childAccounts={firstPageAccounts}
+        totalResults={childAccountsWithMoreThan25.length}
+      />
+    );
+
+    expect(getByTestId('child-accounts-table-pagination')).toBeVisible();
+  });
+
+  it('should display an empty state when no child accounts are found', async () => {
+    const { getByText } = renderWithTheme(
+      <ChildAccountsTable {...props} childAccounts={[]} />
+    );
+
+    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();
+  });
+});

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 (
+      <Notice variant="info">
+        You don&apos;t have access to other accounts. You must be added to a
+        delegation by an account administrator to have access to other accounts.
+      </Notice>
+    );
+  }
+
   return (
     <>
-      <Table aria-label="List of Child Accounts">
+      <Table
+        aria-label="List of Child Accounts"
+        data-testid="child-accounts-table"
+      >
         <TableBody>
           {childAccounts?.map((childAccount, idx) => (
             <TableRow key={childAccount.euuid}>
@@ -111,6 +129,7 @@ export const ChildAccountsTable = (props: ChildAccountsTableProps) => {
       {totalResults > MIN_PAGE_SIZE && (
         <Pagination
           count={totalResults}
+          data-testid="child-accounts-table-pagination"
           itemsLabel="Accounts: "
           onPageChange={(e: CustomEvent<number>) =>
             handlePageChange(Number(e.detail))