add ChildAccountsTable component for IAM

mpolotsk-akamai · mpolotsk-akamai · commit 872f9235f3dc · 2026-02-04T15:54:22.000+01:00
diff --git a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx
@@ -2,9 +2,18 @@ import {
   useChildAccountsInfiniteQuery,
   useMyDelegatedChildAccountsQuery,
 } from '@linode/queries';
-import { Drawer, LinkButton, Notice, Typography } from '@linode/ui';
+import {
+  Button,
+  Drawer,
+  LinkButton,
+  Notice,
+  Stack,
+  Typography,
+  useTheme,
+} from '@linode/ui';
 import React, { useMemo, useState } from 'react';
 
+import ErrorStateCloud from 'src/assets/icons/error-state-cloud.svg';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import { PARENT_USER_SESSION_EXPIRED } from 'src/features/Account/constants';
 import { useParentChildAuthentication } from 'src/features/Account/SwitchAccounts/useParentChildAuthentication';
@@ -35,11 +44,14 @@ interface HandleSwitchToChildAccountProps {
 
 export const SwitchAccountDrawer = (props: Props) => {
   const { onClose, open, userType } = props;
+  const theme = useTheme();
   const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
   const [isParentTokenError, setIsParentTokenError] = React.useState<
     APIError[]
   >([]);
   const [searchQuery, setSearchQuery] = React.useState<string>('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
   const { isIAMDelegationEnabled } = useIsIAMDelegationEnabled();
   const isParentUserType = userType === 'parent';
   const isProxyUserType = userType === 'proxy';
@@ -92,15 +104,14 @@ export const SwitchAccountDrawer = (props: Props) => {
     isRefetching: allChildAccountsIsRefetching,
     refetch: refetchAllChildAccounts,
   } = useMyDelegatedChildAccountsQuery({
-    params: {},
+    params: {
+      page,
+      page_size: pageSize,
+    },
     filter,
     enabled: isIAMDelegationEnabled && isParentUserType,
   });
 
-  const refetchFn = isIAMDelegationEnabled
-    ? refetchAllChildAccounts
-    : refetchChildAccounts;
-
   const handleSwitchToChildAccount = React.useCallback(
     async ({
       currentTokenWithBearer,
@@ -190,6 +201,17 @@ export const SwitchAccountDrawer = (props: Props) => {
   const [isSwitchingChildAccounts, setIsSwitchingChildAccounts] =
     useState<boolean>(false);
 
+  const isLoading =
+    isInitialLoading ||
+    isSubmitting ||
+    isSwitchingChildAccounts ||
+    isRefetching ||
+    allChildAccountsLoading ||
+    allChildAccountsIsRefetching;
+
+  const refetchFn = isIAMDelegationEnabled
+    ? refetchAllChildAccounts
+    : refetchChildAccounts;
   const handleClose = () => {
     setIsSwitchingChildAccounts(false);
     setSearchQuery('');
@@ -203,6 +225,15 @@ export const SwitchAccountDrawer = (props: Props) => {
     return data?.pages.flatMap((page) => page.data);
   }, [isIAMDelegationEnabled, allChildAccounts, data]);
 
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handlePageSizeChange = (newPageSize: number) => {
+    setPageSize(newPageSize);
+    setPage(1); // Reset to first page when page size changes
+  };
+
   return (
     <Drawer onClose={handleClose} open={open} title="Switch Account">
       {createTokenErrorReason && (
@@ -234,50 +265,67 @@ export const SwitchAccountDrawer = (props: Props) => {
         )}
         .
       </Typography>
-      {isIAMDelegationEnabled && allChildAccounts && (
+
+      {(childAccountInfiniteError || allChildAccountsError) && (
+        <Stack alignItems="center" gap={1} justifyContent="center">
+          <ErrorStateCloud />
+          <Typography>Unable to load data.</Typography>
+          <Typography>
+            Try again or contact support if the issue persists.
+          </Typography>
+          <Button
+            buttonType="primary"
+            onClick={() => refetchFn()}
+            sx={(theme) => ({
+              marginTop: theme.spacingFunction(16),
+            })}
+          >
+            Try again
+          </Button>
+        </Stack>
+      )}
+      {!(childAccountInfiniteError || allChildAccountsError) && (
         <>
           <DebouncedSearchTextField
             clearable
             debounceTime={250}
             hideLabel
-            key={`iam-search-${searchQuery}`}
+            key={`switch-search-${searchQuery}`}
             label="Search"
             onSearch={setSearchQuery}
             placeholder="Search"
-            sx={{ marginBottom: 2 }}
+            sx={{ marginBottom: theme.spacingFunction(12) }}
             value={searchQuery}
           />
-          {searchQuery && childAccounts && childAccounts.length === 0 && (
-            <Typography sx={{ fontStyle: 'italic' }}>
-              No search results
-            </Typography>
-          )}
+          {searchQuery &&
+            childAccounts &&
+            childAccounts.length === 0 &&
+            !isLoading && (
+              <Typography
+                sx={{
+                  fontStyle: 'italic',
+                  marginTop: theme.spacingFunction(6),
+                }}
+              >
+                No search results
+              </Typography>
+            )}
         </>
       )}
       {isIAMDelegationEnabled && (
         <ChildAccountsTable
           childAccounts={childAccounts}
           currentTokenWithBearer={currentTokenWithBearer}
-          errors={{
-            childAccountInfiniteError,
-            allChildAccountsError: allChildAccountsError?.[0]
-              ? new Error(allChildAccountsError[0].reason)
-              : null,
-          }}
-          filter={filter}
-          isLoading={
-            isInitialLoading ||
-            isSubmitting ||
-            isSwitchingChildAccounts ||
-            isRefetching ||
-            allChildAccountsLoading ||
-            allChildAccountsIsRefetching
-          }
+          isLoading={isLoading}
           isSwitchingChildAccounts={isSwitchingChildAccounts}
           onClose={onClose}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
           onSwitchAccount={handleSwitchToChildAccount}
-          refetchFn={refetchFn}
+          page={page}
+          pageSize={pageSize}
           setIsSwitchingChildAccounts={setIsSwitchingChildAccounts}
+          totalResults={allChildAccounts?.results || 0}
           userType={userType}
         />
       )}
@@ -299,14 +347,7 @@ export const SwitchAccountDrawer = (props: Props) => {
           filter={filter}
           hasNextPage={hasNextPage}
           isFetchingNextPage={isFetchingNextPage}
-          isLoading={
-            isInitialLoading ||
-            isSubmitting ||
-            isSwitchingChildAccounts ||
-            isRefetching ||
-            allChildAccountsLoading ||
-            allChildAccountsIsRefetching
-          }
+          isLoading={isLoading}
           isSwitchingChildAccounts={isSwitchingChildAccounts}
           onClose={onClose}
           onSwitchAccount={handleSwitchToChildAccount}
diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx
@@ -1,16 +1,7 @@
-import {
-  Box,
-  Button,
-  CircleProgress,
-  LinkButton,
-  Notice,
-  Stack,
-  Typography,
-} from '@linode/ui';
+import { Box, CircleProgress, LinkButton, Notice, Stack } from '@linode/ui';
 import React from 'react';
 import { Waypoint } from 'react-waypoint';
 
-import ErrorStateCloud from 'src/assets/icons/error-state-cloud.svg';
 import { useIsIAMDelegationEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
 
 import type { ChildAccount, Filter, UserType } from '@linode/api-v4';
@@ -52,39 +43,12 @@ export const ChildAccountList = React.memo(
     onClose,
     onSwitchAccount,
     userType,
-    refetchFn,
-    errors,
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
   }: ChildAccountListProps) => {
     const { isIAMDelegationEnabled } = useIsIAMDelegationEnabled();
 
-    const hasError = isIAMDelegationEnabled
-      ? errors.allChildAccountsError
-      : errors.childAccountInfiniteError;
-
-    if (hasError) {
-      return (
-        <Stack alignItems="center" gap={1} justifyContent="center">
-          <ErrorStateCloud />
-          <Typography>Unable to load data.</Typography>
-          <Typography>
-            Try again or contact support if the issue persists.
-          </Typography>
-          <Button
-            buttonType="primary"
-            onClick={() => refetchFn()}
-            sx={(theme) => ({
-              marginTop: theme.spacingFunction(16),
-            })}
-          >
-            Try again
-          </Button>
-        </Stack>
-      );
-    }
-
     if (isLoading) {
       return (
         <Box display="flex" justifyContent="center">
diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx
@@ -1,4 +1,5 @@
-import { LinkButton } from '@linode/ui';
+import { Box, CircleProgress, LinkButton, useTheme } from '@linode/ui';
+import { Pagination } from 'akamai-cds-react-components';
 import {
   Table,
   TableBody,
@@ -7,22 +8,16 @@ import {
 } from 'akamai-cds-react-components/Table';
 import React from 'react';
 
-import { TableRowError } from 'src/components/TableRowError/TableRowError';
-import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
-
-import type { Account, Filter, UserType } from '@linode/api-v4';
+import type { Account, UserType } from '@linode/api-v4';
 
 interface ChildAccountsTableProps {
   childAccounts?: Account[];
   currentTokenWithBearer?: string;
-  errors: {
-    allChildAccountsError: Error | null;
-    childAccountInfiniteError: boolean;
-  };
-  filter: Filter;
   isLoading: boolean;
   isSwitchingChildAccounts: boolean;
   onClose: () => void;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
   onSwitchAccount: ({
     currentTokenWithBearer,
     euuid,
@@ -36,51 +31,44 @@ interface ChildAccountsTableProps {
     onClose: (e: React.SyntheticEvent<HTMLElement>) => void;
     userType: undefined | UserType;
   }) => void;
-  refetchFn: () => void;
+  page: number;
+  pageSize: number;
   setIsSwitchingChildAccounts: (value: boolean) => void;
+  totalResults: number;
   userType: undefined | UserType;
 }
 
 export const ChildAccountsTable = (props: ChildAccountsTableProps) => {
   const {
     childAccounts,
     currentTokenWithBearer,
-    errors,
     isLoading,
     isSwitchingChildAccounts,
     onClose,
     onSwitchAccount,
     setIsSwitchingChildAccounts,
     userType,
+    page,
+    pageSize,
+    totalResults,
+    onPageChange,
+    onPageSizeChange,
   } = props;
 
-  // const [page, setPage] = useState(1);
-  // const [pageSize, setPageSize] = useState(25);
-
-  // const handlePageChange = (newPage: number) => {
-  //   setPage(newPage);
-  // };
-
-  // const handlePageSizeChange = (newPageSize: number) => {
-  //   setPageSize(newPageSize);
-  //   setPage(1); // Reset to first page when page size changes
-  // };
+  const theme = useTheme();
+  const handlePageChange = (newPage: number) => {
+    onPageChange(newPage);
+  };
 
-  // const startIndex = (page - 1) * pageSize;
-  // const endIndex = startIndex + pageSize;
-  // const paginatedAccounts = childAccounts?.slice(startIndex, endIndex) || [];
-  // const totalCount = childAccounts?.length || 0;
+  const handlePageSizeChange = (newPageSize: number) => {
+    onPageSizeChange(newPageSize);
+  };
 
   if (isLoading) {
-    return <TableRowLoading columns={2} />;
-  }
-
-  if (errors.allChildAccountsError) {
     return (
-      <TableRowError
-        colSpan={2}
-        message={errors.allChildAccountsError.message}
-      />
+      <Box display="flex" justifyContent="center">
+        <CircleProgress size="md" />
+      </Box>
     );
   }
 
@@ -112,18 +100,21 @@ export const ChildAccountsTable = (props: ChildAccountsTableProps) => {
           ))}
         </TableBody>
       </Table>
-      {/* {totalCount > pageSize && (
+      {totalResults > pageSize && (
         <Pagination
-          count={totalCount}
-          onPageChange={(_, newPage) => handlePageChange(newPage)}
-          onRowsPerPageChange={(event) =>
-            handlePageSizeChange(parseInt(event.target.value, 10))
+          count={totalResults}
+          onPageChange={(e: CustomEvent<number>) =>
+            handlePageChange(Number(e.detail))
           }
+          onPageSizeChange={(
+            e: CustomEvent<{ page: number; pageSize: number }>
+          ) => handlePageSizeChange(Number(e.detail.pageSize))}
           page={page}
-          rowsPerPage={pageSize}
-          rowsPerPageOptions={[25, 50, 100]}
+          pageSize={pageSize}
+          pageSizes={[25, 50, 75, 100]}
+          style={{ marginTop: theme.spacingFunction(12) }}
         />
-      )} */}
+      )}
     </>
   );
 };
