feat: [UIE-9423] - IAM Parent/Child: permissions switch account

packages/manager/.changeset/pr-13075-added-1762776269124.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+IAM Parent/Child: permissions switch account ([#13075](https://github.com/linode/manager/pull/13075))

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

@@ -24,6 +24,7 @@ import { useTabs } from 'src/hooks/useTabs';
 import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnalytics';
 
 import { PlatformMaintenanceBanner } from '../../components/PlatformMaintenanceBanner/PlatformMaintenanceBanner';
+import { useIsIAMDelegationEnabled } from '../IAM/hooks/useIsIAMEnabled';
 import { usePermissions } from '../IAM/hooks/usePermissions';
 import { SwitchAccountButton } from './SwitchAccountButton';
 import { SwitchAccountDrawer } from './SwitchAccountDrawer';
@@ -60,6 +61,8 @@ export const AccountLanding = () => {
     globalGrantType: 'child_account_access',
   });
 
+  const { isIAMDelegationEnabled } = useIsIAMDelegationEnabled();
+
   const { isParentTokenExpired } = useIsParentTokenExpired({ isProxyUser });
 
   const { tabs, handleTabChange, tabIndex, getTabIndex } = useTabs([
@@ -124,8 +127,9 @@ export const AccountLanding = () => {
   };
 
   const isBillingTabSelected = getTabIndex('/account/billing') === tabIndex;
-  const canSwitchBetweenParentOrProxyAccount =
-    (!isChildAccountAccessRestricted && isParentUser) || isProxyUser;
+  const canSwitchBetweenParentOrProxyAccount = isIAMDelegationEnabled
+    ? isParentUser
+    : (!isChildAccountAccessRestricted && isParentUser) || isProxyUser;
 
   const landingHeaderProps: LandingHeaderProps = {
     breadcrumbProps: {

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

@@ -1,10 +1,30 @@
-import { screen } from '@testing-library/react';
+import { screen, waitFor } 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');
+  return {
+    ...actual,
+    useFlags: queryMocks.useFlags,
+  };
+});
+
 describe('SwitchAccountButton', () => {
   test('renders Switch Account button with SwapIcon', () => {
     renderWithTheme(<SwitchAccountButton />);
@@ -22,4 +42,59 @@ describe('SwitchAccountButton', () => {
 
     expect(onClickMock).toHaveBeenCalledTimes(1);
   });
+
+  test('enables the button when user has create_child_account_token permission', () => {
+    queryMocks.useFlags.mockReturnValue({
+      iamDelegation: { enabled: true },
+    });
+
+    renderWithTheme(<SwitchAccountButton />);
+
+    const button = screen.getByRole('button', { name: /switch account/i });
+    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 },
+    });
+
+    renderWithTheme(<SwitchAccountButton />);
+
+    const button = screen.getByRole('button', { name: /switch account/i });
+    expect(button).toBeEnabled();
+    expect(button).not.toHaveAttribute('aria-describedby', 'button-tooltip');
+  });
 });

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

@@ -3,11 +3,23 @@ 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': {
@@ -16,6 +28,11 @@ 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/Billing/BillingLanding/BillingLanding.tsx

@@ -8,6 +8,7 @@ import { MaintenanceBannerV2 } from 'src/components/MaintenanceBanner/Maintenanc
 import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
 import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/useIsParentTokenExpired';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
+import { useIsIAMDelegationEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
 import { useFlags } from 'src/hooks/useFlags';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnalytics';
@@ -45,6 +46,8 @@ export const BillingLanding = () => {
     globalGrantType: 'child_account_access',
   });
 
+  const { isIAMDelegationEnabled } = useIsIAMDelegationEnabled();
+
   const { isParentTokenExpired } = useIsParentTokenExpired({ isProxyUser });
 
   const isReadOnly = !permissions.make_billing_payment || isChildUser;
@@ -56,8 +59,9 @@ export const BillingLanding = () => {
     return <Navigate replace to="/account/billing" />;
   }
 
-  const canSwitchBetweenParentOrProxyAccount =
-    (!isChildAccountAccessRestricted && isParentUser) || isProxyUser;
+  const canSwitchBetweenParentOrProxyAccount = isIAMDelegationEnabled
+    ? isParentUser
+    : (!isChildAccountAccessRestricted && isParentUser) || isProxyUser;
 
   const handleAccountSwitch = () => {
     if (isParentTokenExpired) {

packages/manager/src/features/TopMenu/UserMenu/UserMenuPopover.tsx

@@ -10,7 +10,10 @@ import { Link } from 'src/components/Link';
 import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
 import { SwitchAccountButton } from 'src/features/Account/SwitchAccountButton';
 import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/useIsParentTokenExpired';
-import { useIsIAMEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
+import {
+  useIsIAMDelegationEnabled,
+  useIsIAMEnabled,
+} from 'src/features/IAM/hooks/useIsIAMEnabled';
 import { useFlags } from 'src/hooks/useFlags';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnalytics';
@@ -46,11 +49,14 @@ export const UserMenuPopover = (props: UserMenuPopoverProps) => {
     globalGrantType: 'child_account_access',
   });
 
+  const { isIAMDelegationEnabled } = useIsIAMDelegationEnabled();
+
   const isProxyUser = profile?.user_type === 'proxy';
 
-  const canSwitchBetweenParentOrProxyAccount =
-    (profile?.user_type === 'parent' && !isChildAccountAccessRestricted) ||
-    profile?.user_type === 'proxy';
+  const canSwitchBetweenParentOrProxyAccount = isIAMDelegationEnabled
+    ? profile?.user_type === 'parent'
+    : (profile?.user_type === 'parent' && !isChildAccountAccessRestricted) ||
+      profile?.user_type === 'proxy';
 
   const open = Boolean(anchorEl);
   const id = open ? 'user-menu-popover' : undefined;