upcoming: [M3-7475] - Add Switch Account button to Account Landing pa…

…ge (#10052) * Add Switch Account button to Account Landing page * Added changeset: Add Switch Account button to Account Landing page for parent and proxy users * Fix potential failure in test, adjust styling for edge case * Improve button styling for mobile, thanks Jaalah * Undo changes in SwitchAccountDrawer * Fix failing e2es, remove dupe data-qa * Display the drawer for the correct user types * Improve variable name and maintain consistency * Address feedback: improve button spacing between mobile breakpoints
linode · Jan 17, 2024 · 6561b4a · 6561b4a
1 parent 3d67736
commit 6561b4a
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 9 deletions.
diff --git a/packages/manager/.changeset/pr-10052-upcoming-features-1704993330964.md b/packages/manager/.changeset/pr-10052-upcoming-features-1704993330964.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Switch Account button to Account Landing page for parent and proxy users ([#10052](https://github.com/linode/manager/pull/10052))
diff --git a/packages/manager/src/components/LandingHeader/LandingHeader.tsx b/packages/manager/src/components/LandingHeader/LandingHeader.tsx
@@ -61,15 +61,17 @@ export const LandingHeader = ({
   const labelTitle = title?.toString();
 
   const xsDown = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
+  const customXsDownBreakpoint = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down(636)
+  );
+  const customSmMdBetweenBreakpoint = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.between(636, 'md')
+  );
 
   const docsAnalyticsLabel = analyticsLabel
     ? analyticsLabel
     : `${title} Landing`;
 
-  const sxButton = {
-    marginLeft: theme.spacing(1),
-  };
-
   return (
     <Grid
       alignItems="center"
@@ -91,7 +93,21 @@ export const LandingHeader = ({
       </Grid>
       {!shouldHideDocsAndCreateButtons && (
         <Grid>
-          <Grid alignItems="center" container justifyContent="flex-end">
+          <Grid
+            sx={{
+              flex: '1 1 auto',
+              marginLeft: customSmMdBetweenBreakpoint
+                ? theme.spacing(2)
+                : customXsDownBreakpoint
+                ? theme.spacing(1)
+                : undefined,
+            }}
+            alignItems="center"
+            display="flex"
+            flexWrap={xsDown ? 'wrap' : 'nowrap'}
+            gap={3}
+            justifyContent="flex-end"
+          >
             {betaFeedbackLink && (
               <span
                 style={{
@@ -124,7 +140,6 @@ export const LandingHeader = ({
                     loading={loading}
                     onClick={onButtonClick}
                     onKeyPress={onButtonKeyPress}
-                    sx={sxButton}
                     {...buttonDataAttrs}
                   >
                     {createButtonText ?? `Create ${entity}`}
@@ -139,6 +154,7 @@ export const LandingHeader = ({
   );
 };
 
-const Actions = styled('div')(({ theme }) => ({
-  marginLeft: `${theme.spacing(2)}`,
+const Actions = styled('div')(() => ({
+  display: 'flex',
+  justifyContent: 'flex-end',
 }));
diff --git a/packages/manager/src/features/Account/AccountLanding.tsx b/packages/manager/src/features/Account/AccountLanding.tsx
@@ -11,10 +11,14 @@ import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
+import { useFlags } from 'src/hooks/useFlags';
 import { useAccount } from 'src/queries/account';
-import { useGrants } from 'src/queries/profile';
+import { useAccountUser } from 'src/queries/accountUsers';
+import { useGrants, useProfile } from 'src/queries/profile';
 
 import AccountLogins from './AccountLogins';
+import { SwitchAccountButton } from './SwitchAccountButton';
+import { SwitchAccountDrawer } from './SwitchAccountDrawer';
 
 const Billing = React.lazy(() =>
   import('src/features/Billing/BillingDetail').then((module) => ({
@@ -43,6 +47,11 @@ const AccountLanding = () => {
   const location = useLocation();
   const { data: account } = useAccount();
   const { data: grants } = useGrants();
+  const { data: profile } = useProfile();
+  const { data: user } = useAccountUser(profile?.username ?? '');
+
+  const flags = useFlags();
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState<boolean>(false);
 
   const accountAccessGrant = grants?.global?.account_access;
   const readOnlyAccountAccess = accountAccessGrant === 'read_only';
@@ -107,6 +116,9 @@ const AccountLanding = () => {
   let idx = 0;
 
   const isBillingTabSelected = location.pathname.match(/billing/);
+  const canSwitchBetweenParentOrProxyAccount =
+    flags.parentChildAccountAccess &&
+    (user?.user_type === 'parent' || user?.user_type === 'proxy');
 
   const landingHeaderProps: LandingHeaderProps = {
     breadcrumbProps: {
@@ -125,6 +137,9 @@ const AccountLanding = () => {
         history.replace('/account/billing/make-payment');
     }
     landingHeaderProps.disabledCreateButton = readOnlyAccountAccess;
+    landingHeaderProps.extraActions = canSwitchBetweenParentOrProxyAccount ? (
+      <SwitchAccountButton onClick={() => setIsDrawerOpen(true)} />
+    ) : undefined;
   }
 
   return (
@@ -158,6 +173,11 @@ const AccountLanding = () => {
           </TabPanels>
         </React.Suspense>
       </Tabs>
+      <SwitchAccountDrawer
+        onClose={() => setIsDrawerOpen(false)}
+        open={isDrawerOpen}
+        username={user?.username ?? ''}
+      />
     </React.Fragment>
   );
 };

diff --git a/packages/manager/src/features/Account/SwitchAccountDrawer.test.tsx b/packages/manager/src/features/Account/SwitchAccountDrawer.test.tsx
@@ -55,6 +55,9 @@ describe('SwitchAccountDrawer', () => {
 
   it('should display a list of child accounts', async () => {
     server.use(
+      rest.get('*/account/users/*', (req, res, ctx) => {
+        return res(ctx.json(accountUserFactory.build({ user_type: 'parent' })));
+      }),
       rest.get('*/account/child-accounts', (req, res, ctx) => {
         return res(
           ctx.json(