fix: [UIE-9987] - IAM Parent/Child - Various fixes to Parent Account Flow (#13278)

* Enhanced SwitchAccount drawer

* tests

* e2e failur

* Added changeset: IAM Parent/Child - Various fixes to Parent Account Flow

Author: abailly-akamai

packages/manager/.changeset/pr-13278-upcoming-features-1768403349987.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+IAM Parent/Child - Various fixes to Parent Account Flow ([#13278](https://github.com/linode/manager/pull/13278))

packages/manager/src/features/Account/SwitchAccountButton.test.tsx

@@ -1,21 +1,13 @@
-import { screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { SwitchAccountButton } from 'src/features/Account/SwitchAccountButton';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 const queryMocks = vi.hoisted(() => ({
-  userPermissions: vi.fn(() => ({
-    data: {
-      create_child_account_token: true,
-    },
-  })),
   useFlags: vi.fn().mockReturnValue({}),
 }));
-vi.mock('src/features/IAM/hooks/usePermissions', () => ({
-  usePermissions: queryMocks.userPermissions,
-}));
 
 vi.mock('src/hooks/useFlags', () => {
   const actual = vi.importActual('src/hooks/useFlags');
@@ -54,38 +46,6 @@ describe('SwitchAccountButton', () => {
     expect(button).toBeEnabled();
   });
 
-  test('disables the button when user does not have create_child_account_token permission', async () => {
-    queryMocks.userPermissions.mockReturnValue({
-      data: {
-        create_child_account_token: false,
-      },
-    });
-
-    queryMocks.useFlags.mockReturnValue({
-      iamDelegation: { enabled: true },
-    });
-
-    renderWithTheme(<SwitchAccountButton />);
-
-    const button = screen.getByRole('button', { name: /switch account/i });
-    expect(button).toBeDisabled();
-
-    // Check that the tooltip is properly configured
-    expect(button).toHaveAttribute('aria-describedby', 'button-tooltip');
-
-    // Hover over the button to show the tooltip
-    await userEvent.hover(button);
-
-    // Wait for tooltip to appear and check its content
-    await waitFor(() => {
-      screen.getByRole('tooltip');
-    });
-
-    expect(
-      screen.getByText('You do not have permission to switch accounts.')
-    ).toBeVisible();
-  });
-
   test('enables the button when iamDelegation flag is off', async () => {
     queryMocks.useFlags.mockReturnValue({
       iamDelegation: { enabled: false },

packages/manager/src/features/Account/SwitchAccountButton.tsx

@@ -3,23 +3,11 @@ import * as React from 'react';
 
 import SwapIcon from 'src/assets/icons/swapSmall.svg';
 
-import { useIsIAMDelegationEnabled } from '../IAM/hooks/useIsIAMEnabled';
-import { usePermissions } from '../IAM/hooks/usePermissions';
-
 import type { ButtonProps } from '@linode/ui';
 
 export const SwitchAccountButton = (props: ButtonProps) => {
-  const { isIAMDelegationEnabled } = useIsIAMDelegationEnabled();
-
-  const { data: permissions } = usePermissions('account', [
-    'create_child_account_token',
-  ]);
-
   return (
     <Button
-      disabled={
-        isIAMDelegationEnabled ? !permissions.create_child_account_token : false
-      }
       startIcon={<SwapIcon data-testid="swap-icon" />}
       sx={(theme) => ({
         '& .MuiButton-startIcon svg path': {
@@ -28,11 +16,6 @@ export const SwitchAccountButton = (props: ButtonProps) => {
         font: theme.tokens.alias.Typography.Label.Semibold.S,
         marginTop: theme.tokens.spacing.S4,
       })}
-      tooltipText={
-        isIAMDelegationEnabled && !permissions.create_child_account_token
-          ? 'You do not have permission to switch accounts.'
-          : undefined
-      }
       {...props}
     >
       Switch Account

packages/manager/src/features/Account/SwitchAccountDrawer.test.tsx

@@ -2,18 +2,45 @@ import { profileFactory } from '@linode/utilities';
 import { fireEvent, waitFor } from '@testing-library/react';
 import * as React from 'react';
 
-import { http, HttpResponse, server } from 'src/mocks/testServer';
+import { accountFactory } from 'src/factories';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { SwitchAccountDrawer } from './SwitchAccountDrawer';
 
+const queryMocks = vi.hoisted(() => ({
+  useProfile: vi.fn().mockReturnValue({}),
+  useAllListMyDelegatedChildAccountsQuery: vi.fn().mockReturnValue({}),
+}));
+
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useProfile: queryMocks.useProfile,
+    useAllListMyDelegatedChildAccountsQuery:
+      queryMocks.useAllListMyDelegatedChildAccountsQuery,
+  };
+});
+
 const props = {
   onClose: vi.fn(),
   open: true,
   userType: undefined,
 };
 
 describe('SwitchAccountDrawer', () => {
+  beforeEach(() => {
+    queryMocks.useProfile.mockReturnValue({});
+    queryMocks.useAllListMyDelegatedChildAccountsQuery.mockReturnValue({
+      data: accountFactory.buildList(5, {
+        company: 'Test Account 1',
+        euuid: '123',
+      }),
+      isLoading: false,
+      isRefetching: false,
+    });
+  });
+
   it('should have a title', () => {
     const { getByText } = renderWithTheme(<SwitchAccountDrawer {...props} />);
     expect(getByText('Switch Account')).toBeInTheDocument();
@@ -36,11 +63,9 @@ describe('SwitchAccountDrawer', () => {
   });
 
   it('should include a link to switch back to the parent account if the active user is a proxy user', async () => {
-    server.use(
-      http.get('*/profile', () => {
-        return HttpResponse.json(profileFactory.build({ user_type: 'proxy' }));
-      })
-    );
+    queryMocks.useProfile.mockReturnValue({
+      data: profileFactory.build({ user_type: 'proxy' }),
+    });
 
     const { findByLabelText, getByText } = renderWithTheme(
       <SwitchAccountDrawer {...props} userType="proxy" />

packages/manager/src/features/Account/SwitchAccountDrawer.tsx

@@ -1,17 +1,22 @@
+import {
+  useAllListMyDelegatedChildAccountsQuery,
+  useChildAccountsInfiniteQuery,
+} from '@linode/queries';
 import { Drawer, LinkButton, Notice, Typography } from '@linode/ui';
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import { PARENT_USER_SESSION_EXPIRED } from 'src/features/Account/constants';
 import { useParentChildAuthentication } from 'src/features/Account/SwitchAccounts/useParentChildAuthentication';
 import { setTokenInLocalStorage } from 'src/features/Account/SwitchAccounts/utils';
+import { useIsIAMDelegationEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
 import { sendSwitchToParentAccountEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { getStorage, setStorage, storage } from 'src/utilities/storage';
 
 import { ChildAccountList } from './SwitchAccounts/ChildAccountList';
 import { updateParentTokenInLocalStorage } from './SwitchAccounts/utils';
 
-import type { APIError, UserType } from '@linode/api-v4';
+import type { APIError, Filter, UserType } from '@linode/api-v4';
 
 interface Props {
   onClose: () => void;
@@ -33,8 +38,8 @@ export const SwitchAccountDrawer = (props: Props) => {
   const [isParentTokenError, setIsParentTokenError] = React.useState<
     APIError[]
   >([]);
-  const [query, setQuery] = React.useState<string>('');
-
+  const [searchQuery, setSearchQuery] = React.useState<string>('');
+  const { isIAMDelegationEnabled } = useIsIAMDelegationEnabled();
   const isProxyUser = userType === 'proxy';
   const currentParentTokenWithBearer =
     getStorage('authentication/parent_token/token') ?? '';
@@ -50,6 +55,48 @@ export const SwitchAccountDrawer = (props: Props) => {
 
   const createTokenErrorReason = createTokenError?.[0]?.reason;
 
+  const filter: Filter = {
+    ['+order']: 'asc',
+    ['+order_by']: 'company',
+    ...(searchQuery && { company: { '+contains': searchQuery } }),
+  };
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isError: childAccountInfiniteError,
+    isFetchingNextPage,
+    isInitialLoading,
+    isRefetching,
+    refetch: refetchChildAccounts,
+  } = useChildAccountsInfiniteQuery(
+    {
+      filter,
+      headers:
+        userType === 'proxy'
+          ? {
+              Authorization: currentTokenWithBearer,
+            }
+          : undefined,
+    },
+    isIAMDelegationEnabled === false
+  );
+  const {
+    data: allChildAccounts,
+    error: allChildAccountsError,
+    isLoading: allChildAccountsLoading,
+    isRefetching: allChildAccountsIsRefetching,
+    refetch: refetchAllChildAccounts,
+  } = useAllListMyDelegatedChildAccountsQuery({
+    params: {},
+    enabled: isIAMDelegationEnabled,
+  });
+
+  const refetchFn = isIAMDelegationEnabled
+    ? refetchAllChildAccounts
+    : refetchChildAccounts;
+
   const handleSwitchToChildAccount = React.useCallback(
     async ({
       currentTokenWithBearer,
@@ -120,8 +167,30 @@ export const SwitchAccountDrawer = (props: Props) => {
     location.reload();
   }, [onClose, revokeToken, validateParentToken, updateCurrentToken]);
 
+  const [isSwitchingChildAccounts, setIsSwitchingChildAccounts] =
+    useState<boolean>(false);
+
+  const handleClose = () => {
+    setIsSwitchingChildAccounts(false);
+    onClose();
+  };
+
+  const childAccounts = useMemo(() => {
+    if (isIAMDelegationEnabled) {
+      if (searchQuery && allChildAccounts) {
+        // Client-side filter: match company field with searchQuery (case-insensitive, contains)
+        const normalizedQuery = searchQuery.toLowerCase();
+        return allChildAccounts.filter((account) =>
+          account.company?.toLowerCase().includes(normalizedQuery)
+        );
+      }
+      return allChildAccounts;
+    }
+    return data?.pages.flatMap((page) => page.data);
+  }, [isIAMDelegationEnabled, searchQuery, allChildAccounts, data]);
+
   return (
-    <Drawer onClose={onClose} open={open} title="Switch Account">
+    <Drawer onClose={handleClose} open={open} title="Switch Account">
       {createTokenErrorReason && (
         <Notice text={createTokenErrorReason} variant="error" />
       )}
@@ -130,7 +199,7 @@ export const SwitchAccountDrawer = (props: Props) => {
       )}
       <Typography
         sx={(theme) => ({
-          margin: `${theme.spacing(3)} 0`,
+          margin: `${theme.spacingFunction(24)} 0`,
         })}
       >
         Select an account to view and manage its settings and configurations
@@ -151,24 +220,65 @@ export const SwitchAccountDrawer = (props: Props) => {
         )}
         .
       </Typography>
-      <DebouncedSearchTextField
-        clearable
-        debounceTime={250}
-        hideLabel
-        label="Search"
-        onSearch={setQuery}
-        placeholder="Search"
-        sx={{ marginBottom: 3 }}
-        value={query}
-      />
+      {isIAMDelegationEnabled &&
+        allChildAccounts &&
+        allChildAccounts.length !== 0 && (
+          <>
+            <DebouncedSearchTextField
+              clearable
+              debounceTime={250}
+              hideLabel
+              label="Search"
+              onSearch={setSearchQuery}
+              placeholder="Search"
+              sx={{ marginBottom: 3 }}
+              value={searchQuery}
+            />
+            {searchQuery && childAccounts && childAccounts.length === 0 && (
+              <Typography sx={{ fontStyle: 'italic' }}>
+                No search results
+              </Typography>
+            )}
+          </>
+        )}
+      {!isIAMDelegationEnabled && (
+        <DebouncedSearchTextField
+          clearable
+          debounceTime={250}
+          hideLabel
+          label="Search"
+          onSearch={setSearchQuery}
+          placeholder="Search"
+          sx={{ marginBottom: 3 }}
+          value={searchQuery}
+        />
+      )}
       <ChildAccountList
+        childAccounts={childAccounts}
         currentTokenWithBearer={
           isProxyUser ? currentParentTokenWithBearer : currentTokenWithBearer
         }
-        isLoading={isSubmitting}
+        errors={{
+          childAccountInfiniteError,
+          allChildAccountsError,
+        }}
+        fetchNextPage={fetchNextPage}
+        filter={filter}
+        hasNextPage={hasNextPage}
+        isFetchingNextPage={isFetchingNextPage}
+        isLoading={
+          isInitialLoading ||
+          isSubmitting ||
+          isSwitchingChildAccounts ||
+          isRefetching ||
+          allChildAccountsLoading ||
+          allChildAccountsIsRefetching
+        }
+        isSwitchingChildAccounts={isSwitchingChildAccounts}
         onClose={onClose}
         onSwitchAccount={handleSwitchToChildAccount}
-        searchQuery={query}
+        refetchFn={refetchFn}
+        setIsSwitchingChildAccounts={setIsSwitchingChildAccounts}
         userType={userType}
       />
     </Drawer>