From 22eb02506c1ddcb0d1e7e0f8eb8032833b021981 Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com>
Date: Tue, 13 Feb 2024 10:31:11 -0500
Subject: [PATCH] upcoming: [M3-7716] - Add session expiry confirmation dialog
 for proxy users (#10152)

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
---
 ...r-10152-upcoming-features-1707246537679.md |   5 +
 packages/manager/src/MainContent.tsx          | 189 +++++++++---------
 .../LandingHeader/LandingHeader.tsx           |   1 +
 .../context/switchAccountSessionContext.ts    |   7 +
 .../manager/src/context/useDialogContext.ts   |  41 +++-
 .../src/features/Account/AccountLanding.tsx   |  17 +-
 .../features/Account/SwitchAccountDrawer.tsx  |   6 +-
 .../SwitchAccountSessionDialog.test.tsx       |  63 ++++++
 .../SwitchAccountSessionDialog.tsx            |  38 ++++
 .../useParentTokenManagement.test.tsx         |  67 +++++++
 .../useParentTokenManagement.tsx              |  21 ++
 .../manager/src/features/Account/constants.ts |   4 +
 .../manager/src/features/Account/utils.ts     |  59 ++++--
 .../GlobalNotifications.tsx                   |  17 +-
 .../features/TopMenu/UserMenu/UserMenu.tsx    |  16 +-
 .../src/hooks/useIsResourceRestricted.ts      |   3 +-
 16 files changed, 434 insertions(+), 120 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10152-upcoming-features-1707246537679.md
 create mode 100644 packages/manager/src/context/switchAccountSessionContext.ts
 create mode 100644 packages/manager/src/features/Account/SwitchAccounts/SwitchAccountSessionDialog.test.tsx
 create mode 100644 packages/manager/src/features/Account/SwitchAccounts/SwitchAccountSessionDialog.tsx
 create mode 100644 packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.test.tsx
 create mode 100644 packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.tsx

diff --git a/packages/manager/.changeset/pr-10152-upcoming-features-1707246537679.md b/packages/manager/.changeset/pr-10152-upcoming-features-1707246537679.md
new file mode 100644
index 00000000000..884f698a2f8
--- /dev/null
+++ b/packages/manager/.changeset/pr-10152-upcoming-features-1707246537679.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add session expiry confirmation dialog for proxy to parent user account switching ([#10152](https://github.com/linode/manager/pull/10152))
diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
index 5d11ba2b26d..0d762133050 100644
--- a/packages/manager/src/MainContent.tsx
+++ b/packages/manager/src/MainContent.tsx
@@ -29,6 +29,7 @@ import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 
 import { ENABLE_MAINTENANCE_MODE } from './constants';
 import { complianceUpdateContext } from './context/complianceUpdateContext';
+import { switchAccountSessionContext } from './context/switchAccountSessionContext';
 import { FlagSet } from './featureFlags';
 import { useIsACLBEnabled } from './features/LoadBalancers/utils';
 import { useGlobalErrors } from './hooks/useGlobalErrors';
@@ -192,6 +193,11 @@ export const MainContent = () => {
   const ComplianceUpdateProvider = complianceUpdateContext.Provider;
   const complianceUpdateContextValue = useDialogContext();
 
+  const SwitchAccountSessionProvider = switchAccountSessionContext.Provider;
+  const switchAccountSessionContextValue = useDialogContext({
+    isOpen: false,
+  });
+
   const [menuIsOpen, toggleMenu] = React.useState<boolean>(false);
   const {
     _isManagedAccount,
@@ -294,100 +300,105 @@ export const MainContent = () => {
    */
   return (
     <div className={classes.appFrame}>
-      <ComplianceUpdateProvider value={complianceUpdateContextValue}>
-        <NotificationProvider value={contextValue}>
-          <>
-            {shouldDisplayMainContentBanner ? (
-              <MainContentBanner
-                bannerKey={flags.mainContentBanner?.key ?? ''}
-                bannerText={flags.mainContentBanner?.text ?? ''}
-                linkText={flags.mainContentBanner?.link?.text ?? ''}
-                onClose={() => setBannerDismissed(true)}
-                url={flags.mainContentBanner?.link?.url ?? ''}
-              />
-            ) : null}
-            <SideMenu
-              closeMenu={() => toggleMenu(false)}
-              collapse={desktopMenuIsOpen || false}
-              open={menuIsOpen}
-            />
-            <div
-              className={cx(classes.content, {
-                [classes.fullWidthContent]:
-                  desktopMenuIsOpen ||
-                  (desktopMenuIsOpen && desktopMenuIsOpen === true),
-              })}
-            >
-              <TopMenu
-                desktopMenuToggle={desktopMenuToggle}
-                isSideMenuOpen={!desktopMenuIsOpen}
-                openSideMenu={() => toggleMenu(true)}
-                username={username}
+      <SwitchAccountSessionProvider value={switchAccountSessionContextValue}>
+        <ComplianceUpdateProvider value={complianceUpdateContextValue}>
+          <NotificationProvider value={contextValue}>
+            <>
+              {shouldDisplayMainContentBanner ? (
+                <MainContentBanner
+                  bannerKey={flags.mainContentBanner?.key ?? ''}
+                  bannerText={flags.mainContentBanner?.text ?? ''}
+                  linkText={flags.mainContentBanner?.link?.text ?? ''}
+                  onClose={() => setBannerDismissed(true)}
+                  url={flags.mainContentBanner?.link?.url ?? ''}
+                />
+              ) : null}
+              <SideMenu
+                closeMenu={() => toggleMenu(false)}
+                collapse={desktopMenuIsOpen || false}
+                open={menuIsOpen}
               />
-              <main
-                className={classes.cmrWrapper}
-                id="main-content"
-                role="main"
+              <div
+                className={cx(classes.content, {
+                  [classes.fullWidthContent]:
+                    desktopMenuIsOpen ||
+                    (desktopMenuIsOpen && desktopMenuIsOpen === true),
+                })}
               >
-                <Grid className={classes.grid} container spacing={0}>
-                  <Grid className={cx(classes.switchWrapper, 'p0')}>
-                    <GlobalNotifications />
-                    <React.Suspense fallback={<SuspenseLoader />}>
-                      <Switch>
-                        <Route component={LinodesRoutes} path="/linodes" />
-                        <Route
-                          component={PlacementGroups}
-                          path="/placement-groups"
-                        />
-                        <Route component={Volumes} path="/volumes" />
-                        <Redirect path="/volumes*" to="/volumes" />
-                        {isACLBEnabled && (
+                <TopMenu
+                  desktopMenuToggle={desktopMenuToggle}
+                  isSideMenuOpen={!desktopMenuIsOpen}
+                  openSideMenu={() => toggleMenu(true)}
+                  username={username}
+                />
+                <main
+                  className={classes.cmrWrapper}
+                  id="main-content"
+                  role="main"
+                >
+                  <Grid className={classes.grid} container spacing={0}>
+                    <Grid className={cx(classes.switchWrapper, 'p0')}>
+                      <GlobalNotifications />
+                      <React.Suspense fallback={<SuspenseLoader />}>
+                        <Switch>
+                          <Route component={LinodesRoutes} path="/linodes" />
+                          <Route
+                            component={PlacementGroups}
+                            path="/placement-groups"
+                          />
+                          <Route component={Volumes} path="/volumes" />
+                          <Redirect path="/volumes*" to="/volumes" />
+                          {isACLBEnabled && (
+                            <Route
+                              component={LoadBalancers}
+                              path="/loadbalancer*"
+                            />
+                          )}
+                          <Route
+                            component={NodeBalancers}
+                            path="/nodebalancers"
+                          />
+                          <Route component={Domains} path="/domains" />
+                          <Route component={Managed} path="/managed" />
+                          <Route component={Longview} path="/longview" />
+                          <Route component={Images} path="/images" />
+                          <Route
+                            component={StackScripts}
+                            path="/stackscripts"
+                          />
                           <Route
-                            component={LoadBalancers}
-                            path="/loadbalancer*"
+                            component={ObjectStorage}
+                            path="/object-storage"
                           />
-                        )}
-                        <Route
-                          component={NodeBalancers}
-                          path="/nodebalancers"
-                        />
-                        <Route component={Domains} path="/domains" />
-                        <Route component={Managed} path="/managed" />
-                        <Route component={Longview} path="/longview" />
-                        <Route component={Images} path="/images" />
-                        <Route component={StackScripts} path="/stackscripts" />
-                        <Route
-                          component={ObjectStorage}
-                          path="/object-storage"
-                        />
-                        <Route component={Kubernetes} path="/kubernetes" />
-                        <Route component={Account} path="/account" />
-                        <Route component={Profile} path="/profile" />
-                        <Route component={Help} path="/support" />
-                        <Route component={SearchLanding} path="/search" />
-                        <Route component={EventsLanding} path="/events" />
-                        <Route component={Firewalls} path="/firewalls" />
-                        {showDatabases && (
-                          <Route component={Databases} path="/databases" />
-                        )}
-                        {flags.selfServeBetas && (
-                          <Route component={BetaRoutes} path="/betas" />
-                        )}
-                        {showVPCs && <Route component={VPC} path="/vpcs" />}
-                        <Redirect exact from="/" to={defaultRoot} />
-                        {/** We don't want to break any bookmarks. This can probably be removed eventually. */}
-                        <Redirect from="/dashboard" to={defaultRoot} />
-                        <Route component={NotFound} />
-                      </Switch>
-                    </React.Suspense>
+                          <Route component={Kubernetes} path="/kubernetes" />
+                          <Route component={Account} path="/account" />
+                          <Route component={Profile} path="/profile" />
+                          <Route component={Help} path="/support" />
+                          <Route component={SearchLanding} path="/search" />
+                          <Route component={EventsLanding} path="/events" />
+                          <Route component={Firewalls} path="/firewalls" />
+                          {showDatabases && (
+                            <Route component={Databases} path="/databases" />
+                          )}
+                          {flags.selfServeBetas && (
+                            <Route component={BetaRoutes} path="/betas" />
+                          )}
+                          {showVPCs && <Route component={VPC} path="/vpcs" />}
+                          <Redirect exact from="/" to={defaultRoot} />
+                          {/** We don't want to break any bookmarks. This can probably be removed eventually. */}
+                          <Redirect from="/dashboard" to={defaultRoot} />
+                          <Route component={NotFound} />
+                        </Switch>
+                      </React.Suspense>
+                    </Grid>
                   </Grid>
-                </Grid>
-              </main>
-            </div>
-          </>
-        </NotificationProvider>
-        <Footer desktopMenuIsOpen={desktopMenuIsOpen} />
-      </ComplianceUpdateProvider>
+                </main>
+              </div>
+            </>
+          </NotificationProvider>
+          <Footer desktopMenuIsOpen={desktopMenuIsOpen} />
+        </ComplianceUpdateProvider>
+      </SwitchAccountSessionProvider>
     </div>
   );
 };
diff --git a/packages/manager/src/components/LandingHeader/LandingHeader.tsx b/packages/manager/src/components/LandingHeader/LandingHeader.tsx
index 05881941fb4..ce83c1c7754 100644
--- a/packages/manager/src/components/LandingHeader/LandingHeader.tsx
+++ b/packages/manager/src/components/LandingHeader/LandingHeader.tsx
@@ -156,5 +156,6 @@ export const LandingHeader = ({
 
 const Actions = styled('div')(() => ({
   display: 'flex',
+  gap: '24px',
   justifyContent: 'flex-end',
 }));
diff --git a/packages/manager/src/context/switchAccountSessionContext.ts b/packages/manager/src/context/switchAccountSessionContext.ts
new file mode 100644
index 00000000000..986067ae6bc
--- /dev/null
+++ b/packages/manager/src/context/switchAccountSessionContext.ts
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import { DialogContextProps, defaultContext } from './useDialogContext';
+
+export const switchAccountSessionContext = React.createContext<DialogContextProps>(
+  defaultContext
+);
diff --git a/packages/manager/src/context/useDialogContext.ts b/packages/manager/src/context/useDialogContext.ts
index 9dc2bb3e41f..a831f6f2ba8 100644
--- a/packages/manager/src/context/useDialogContext.ts
+++ b/packages/manager/src/context/useDialogContext.ts
@@ -1,26 +1,51 @@
-import { createContext, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export interface DialogContextProps {
+  [key: string]:
+    | (() => void)
+    | ((newState: UseDialogContextOptions) => void)
+    | boolean;
   close: () => void;
   isOpen: boolean;
   open: () => void;
+  updateState: (newState: UseDialogContextOptions) => void;
 }
 
-export const defaultContext = {
+export type UseDialogContextOptions = {
+  [key: string]: boolean;
+};
+
+export const defaultContext: DialogContextProps = {
   close: () => void 0,
   isOpen: false,
   open: () => void 0,
+  updateState: () => void 0,
 };
 
-export const dialogContext = createContext<DialogContextProps>(defaultContext);
+export const useDialogContext = (
+  initialState: UseDialogContextOptions = {}
+): DialogContextProps => {
+  const [state, setState] = useState({ ...defaultContext, ...initialState });
+
+  // TODO: We no longer need the open and close functions after we update other references
+  const open = useCallback(
+    () => setState((prevState) => ({ ...prevState, isOpen: true })),
+    []
+  );
+  const close = useCallback(
+    () => setState((prevState) => ({ ...prevState, isOpen: false })),
+    []
+  );
+  const updateState = useCallback(
+    (newState: UseDialogContextOptions) =>
+      setState((prevState) => ({ ...prevState, ...newState })),
+    []
+  );
 
-export const useDialogContext = (): DialogContextProps => {
-  const [isOpen, setIsOpen] = useState(false);
-  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
-  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
   return {
+    ...state,
     close,
-    isOpen,
     open,
+    updateState,
   };
 };
diff --git a/packages/manager/src/features/Account/AccountLanding.tsx b/packages/manager/src/features/Account/AccountLanding.tsx
index 7764941e854..56f49f06fcf 100644
--- a/packages/manager/src/features/Account/AccountLanding.tsx
+++ b/packages/manager/src/features/Account/AccountLanding.tsx
@@ -11,6 +11,8 @@ 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 { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
+import { useParentTokenManagement } from 'src/features/Account/SwitchAccounts/useParentTokenManagement';
 import { useFlags } from 'src/hooks/useFlags';
 import { useAccount } from 'src/queries/account';
 import { useGrants, useProfile } from 'src/queries/profile';
@@ -50,6 +52,7 @@ const AccountLanding = () => {
 
   const flags = useFlags();
   const [isDrawerOpen, setIsDrawerOpen] = React.useState<boolean>(false);
+  const sessionContext = React.useContext(switchAccountSessionContext);
 
   const accountAccessGrant = grants?.global?.account_access;
   const readOnlyAccountAccess = accountAccessGrant === 'read_only';
@@ -57,6 +60,8 @@ const AccountLanding = () => {
   const isProxyUser = profile?.user_type === 'proxy';
   const isParentUser = profile?.user_type === 'parent';
 
+  const { isParentTokenExpired } = useParentTokenManagement({ isProxyUser });
+
   const tabs = [
     {
       routeName: '/account/billing',
@@ -90,6 +95,16 @@ const AccountLanding = () => {
     '/account/billing/edit',
   ];
 
+  const handleAccountSwitch = () => {
+    if (isParentTokenExpired) {
+      return sessionContext.updateState({
+        isOpen: true,
+      });
+    }
+
+    setIsDrawerOpen(true);
+  };
+
   const getDefaultTabIndex = () => {
     const tabChoice = tabs.findIndex((tab) =>
       Boolean(matchPath(tab.routeName, { path: location.pathname }))
@@ -137,7 +152,7 @@ const AccountLanding = () => {
     }
     landingHeaderProps.disabledCreateButton = readOnlyAccountAccess;
     landingHeaderProps.extraActions = canSwitchBetweenParentOrProxyAccount ? (
-      <SwitchAccountButton onClick={() => setIsDrawerOpen(true)} />
+      <SwitchAccountButton onClick={handleAccountSwitch} />
     ) : undefined;
   }
 
diff --git a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx
index 87e8f3ce37f..33ad7f6eeea 100644
--- a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx
+++ b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx
@@ -6,6 +6,7 @@ import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 import { Drawer } from 'src/components/Drawer';
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
+import { PARENT_SESSION_EXPIRED } from 'src/features/Account/constants';
 import {
   isParentTokenValid,
   setTokenInLocalStorage,
@@ -153,11 +154,10 @@ export const SwitchAccountDrawer = (props: Props) => {
   );
 
   const handleSwitchToParentAccount = React.useCallback(() => {
-    if (!isParentTokenValid({ isProxyUser })) {
+    if (!isParentTokenValid()) {
       const expiredTokenError: APIError = {
         field: 'token',
-        reason:
-          'The reseller account token has expired. You must log back into the account manually.',
+        reason: PARENT_SESSION_EXPIRED,
       };
 
       setIsParentTokenError([expiredTokenError]);
diff --git a/packages/manager/src/features/Account/SwitchAccounts/SwitchAccountSessionDialog.test.tsx b/packages/manager/src/features/Account/SwitchAccounts/SwitchAccountSessionDialog.test.tsx
new file mode 100644
index 00000000000..0da8f9e727b
--- /dev/null
+++ b/packages/manager/src/features/Account/SwitchAccounts/SwitchAccountSessionDialog.test.tsx
@@ -0,0 +1,63 @@
+import { fireEvent } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import { SwitchAccountSessionDialog } from 'src/features/Account/SwitchAccounts/SwitchAccountSessionDialog';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+const mockHistory = {
+  push: vi.fn(),
+  replace: vi.fn(),
+};
+
+// Mock useHistory
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<any>('react-router-dom');
+  return {
+    ...actual,
+    useHistory: vi.fn(() => mockHistory),
+  };
+});
+
+describe('SwitchAccountSessionDialog', () => {
+  it('renders correctly when isOpen is true', () => {
+    const onCloseMock = vi.fn();
+    const { getByText } = renderWithTheme(
+      <MemoryRouter>
+        <SwitchAccountSessionDialog isOpen={true} onClose={onCloseMock} />
+      </MemoryRouter>
+    );
+
+    expect(getByText('Session expired')).toBeInTheDocument();
+    expect(
+      getByText(
+        'Log in again to switch accounts or close this window to continue working on the current account.'
+      )
+    ).toBeInTheDocument();
+    expect(getByText('Log in')).toBeInTheDocument();
+    expect(getByText('Close')).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    const onCloseMock = vi.fn();
+    const { getByText } = renderWithTheme(
+      <MemoryRouter>
+        <SwitchAccountSessionDialog isOpen={true} onClose={onCloseMock} />
+      </MemoryRouter>
+    );
+
+    fireEvent.click(getByText('Close'));
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+
+  it('calls history.push("/logout") when Log in button is clicked', () => {
+    const { getByText } = renderWithTheme(
+      <MemoryRouter>
+        <SwitchAccountSessionDialog isOpen={true} onClose={vi.fn()} />
+      </MemoryRouter>
+    );
+
+    fireEvent.click(getByText('Log in'));
+    expect(mockHistory.push).toHaveBeenCalledWith('/logout');
+  });
+});
diff --git a/packages/manager/src/features/Account/SwitchAccounts/SwitchAccountSessionDialog.tsx b/packages/manager/src/features/Account/SwitchAccounts/SwitchAccountSessionDialog.tsx
new file mode 100644
index 00000000000..c4c4dfdaaa4
--- /dev/null
+++ b/packages/manager/src/features/Account/SwitchAccounts/SwitchAccountSessionDialog.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
+import { Typography } from 'src/components/Typography';
+
+export const SwitchAccountSessionDialog = React.memo(
+  ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
+    const history = useHistory();
+
+    const actions = (
+      <ActionsPanel
+        primaryButtonProps={{
+          label: 'Log in',
+          onClick: () => history.push('/logout'),
+        }}
+        secondaryButtonProps={{ label: 'Close', onClick: onClose }}
+      />
+    );
+
+    return (
+      <ConfirmationDialog
+        actions={actions}
+        data-testid="switch-account-session-dialog"
+        maxWidth="xs"
+        onClose={onClose}
+        open={isOpen}
+        title="Session expired"
+      >
+        <Typography>
+          Log in again to switch accounts or close this window to continue
+          working on the current account.
+        </Typography>
+      </ConfirmationDialog>
+    );
+  }
+);
diff --git a/packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.test.tsx b/packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.test.tsx
new file mode 100644
index 00000000000..0715e3d02d5
--- /dev/null
+++ b/packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.test.tsx
@@ -0,0 +1,67 @@
+import { renderHook } from '@testing-library/react-hooks';
+import * as React from 'react';
+
+import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
+import { useParentTokenManagement } from 'src/features/Account/SwitchAccounts/useParentTokenManagement';
+
+const queryMocks = vi.hoisted(() => ({
+  isParentTokenValid: vi.fn().mockReturnValue({}),
+}));
+
+vi.mock('src/features/Account/utils', async () => {
+  const actual = await vi.importActual('src/features/Account/utils');
+  return {
+    ...actual,
+    isParentTokenValid: queryMocks.isParentTokenValid,
+  };
+});
+
+const mockUpdateState = vi.fn();
+
+const wrapper = ({ children }: any) => (
+  <switchAccountSessionContext.Provider
+    value={{
+      close: vi.fn(),
+      isOpen: false,
+      open: vi.fn(),
+      updateState: mockUpdateState,
+    }}
+  >
+    {children}
+  </switchAccountSessionContext.Provider>
+);
+
+describe('useParentTokenManagement', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should not mark parent token as expired if it is valid', async () => {
+    queryMocks.isParentTokenValid.mockReturnValue(true);
+    const { result } = renderHook(
+      () => useParentTokenManagement({ isProxyUser: true }),
+      { wrapper }
+    );
+
+    expect(result.current.isParentTokenExpired).toBe(false);
+  });
+
+  it('should mark parent token as expired if it is invalid', async () => {
+    queryMocks.isParentTokenValid.mockReturnValue(false);
+    const { result } = renderHook(
+      () => useParentTokenManagement({ isProxyUser: true }),
+      { wrapper }
+    );
+
+    expect(result.current.isParentTokenExpired).toBe(true);
+  });
+
+  it('should not update the session context when isParentTokenExpired is false', async () => {
+    queryMocks.isParentTokenValid.mockReturnValue(true);
+    renderHook(() => useParentTokenManagement({ isProxyUser: true }), {
+      wrapper,
+    });
+
+    expect(mockUpdateState).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.tsx b/packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.tsx
new file mode 100644
index 00000000000..292e3bf0f58
--- /dev/null
+++ b/packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { isParentTokenValid } from 'src/features/Account/utils';
+
+// Checks and reacts to the expiration status of parent tokens.
+export const useParentTokenManagement = ({
+  isProxyUser,
+}: {
+  isProxyUser: boolean;
+}) => {
+  const [isParentTokenExpired, setIsParentTokenExpired] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isProxyUser) {
+      const isExpired = !isParentTokenValid();
+      setIsParentTokenExpired(isExpired);
+    }
+  }, [isProxyUser]);
+
+  return { isParentTokenExpired };
+};
diff --git a/packages/manager/src/features/Account/constants.ts b/packages/manager/src/features/Account/constants.ts
index 1ee5f799f61..0bb075f38d4 100644
--- a/packages/manager/src/features/Account/constants.ts
+++ b/packages/manager/src/features/Account/constants.ts
@@ -18,3 +18,7 @@ export const PARENT_PROXY_USER_CLOSE_ACCOUNT_TOOLTIP_TEXT =
   'Remove indirect customers before closing the account.';
 export const CHILD_USER_CLOSE_ACCOUNT_TOOLTIP_TEXT =
   'Contact your business partner to close your account.';
+
+// TODO: Parent/Child: Requires updated copy...
+export const PARENT_SESSION_EXPIRED =
+  'Session expired. Please log in again to your business partner account.';
diff --git a/packages/manager/src/features/Account/utils.ts b/packages/manager/src/features/Account/utils.ts
index a1cae8c084d..de9b38a4699 100644
--- a/packages/manager/src/features/Account/utils.ts
+++ b/packages/manager/src/features/Account/utils.ts
@@ -2,6 +2,7 @@ import { getStorage, setStorage } from 'src/utilities/storage';
 
 import type {
   GlobalGrantTypes,
+  GrantLevel,
   Grants,
   Profile,
   Token,
@@ -17,6 +18,26 @@ interface GetRestrictedResourceText {
   resourceType: GrantTypeMap;
 }
 
+interface GrantsProfileSchema {
+  grants: Grants | undefined;
+  profile: Profile | undefined;
+}
+
+interface AccountAccessGrant extends GrantsProfileSchema {
+  globalGrantType: 'account_access';
+  permittedGrantLevel: GrantLevel;
+}
+
+interface NonAccountAccessGrant extends GrantsProfileSchema {
+  globalGrantType: Exclude<GlobalGrantTypes, 'account_access'>;
+  permittedGrantLevel?: GrantLevel;
+}
+
+// Discriminating union to determine the type of global grant
+export type RestrictedGlobalGrantType =
+  | AccountAccessGrant
+  | NonAccountAccessGrant;
+
 /**
  * Get a resource restricted message based on action and resource type.
  */
@@ -46,16 +67,33 @@ export const getAccessRestrictedText = (
   } to request the necessary permission.`;
 };
 
+/**
+ * Determine whether the user has restricted access to a specific resource.
+ *
+ * @example
+ * // If account access does not equal 'read_write', the user has restricted access.
+ * isRestrictedGlobalGrantType({
+ *   globalGrantType: 'account_access',
+ *   permittedGrantLevel: 'read_write',
+ *   grants,
+ *   profile
+ * });
+ * // Returns: true
+ */
 export const isRestrictedGlobalGrantType = ({
   globalGrantType,
   grants,
+  permittedGrantLevel,
   profile,
-}: {
-  globalGrantType: GlobalGrantTypes;
-  grants: Grants | undefined;
-  profile: Profile | undefined;
-}): boolean => {
-  return Boolean(profile?.restricted) && !grants?.global[globalGrantType];
+}: RestrictedGlobalGrantType): boolean => {
+  if (globalGrantType !== 'account_access') {
+    return Boolean(profile?.restricted) && !grants?.global[globalGrantType];
+  }
+
+  return (
+    Boolean(profile?.restricted) &&
+    grants?.global[globalGrantType] !== permittedGrantLevel
+  );
 };
 
 // TODO: Parent/Child: FOR MSW ONLY, REMOVE WHEN API IS READY
@@ -67,18 +105,13 @@ export const isRestrictedGlobalGrantType = ({
 /**
  * Determine whether the tokens used for switchable accounts are still valid.
  */
-export const isParentTokenValid = ({
-  isProxyUser,
-}: {
-  isProxyUser: boolean;
-}) => {
+export const isParentTokenValid = (): boolean => {
   const now = new Date().toISOString();
 
   // From a proxy user, check whether parent token is still valid before switching.
   if (
-    isProxyUser &&
     now >
-      new Date(getStorage('authentication/parent_token/expire')).toISOString()
+    new Date(getStorage('authentication/parent_token/expire')).toISOString()
 
     // TODO: Parent/Child: FOR MSW ONLY, REMOVE WHEN API IS READY
     // ================================================================
diff --git a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx b/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
index 0359ace3f8d..80440e8e92b 100644
--- a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
+++ b/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
@@ -2,6 +2,8 @@ import { isEmpty } from 'ramda';
 import * as React from 'react';
 
 import AbuseTicketBanner from 'src/components/AbuseTicketBanner';
+import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
+import { SwitchAccountSessionDialog } from 'src/features/Account/SwitchAccounts/SwitchAccountSessionDialog';
 import { useDismissibleNotifications } from 'src/hooks/useDismissibleNotifications';
 import { useFlags } from 'src/hooks/useFlags';
 import { useProfile } from 'src/queries/profile';
@@ -18,10 +20,13 @@ import { VerificationDetailsBanner } from './VerificationDetailsBanner';
 export const GlobalNotifications = () => {
   const flags = useFlags();
   const { data: profile } = useProfile();
-  const isChildAccount =
+  const sessionContext = React.useContext(switchAccountSessionContext);
+  const isChildUser =
     Boolean(flags.parentChildAccountAccess) && profile?.user_type === 'child';
+  const isProxyUser =
+    Boolean(flags.parentChildAccountAccess) && profile?.user_type === 'proxy';
   const { data: securityQuestions } = useSecurityQuestions({
-    enabled: isChildAccount,
+    enabled: isChildUser,
   });
   const suppliedMaintenances = flags.apiMaintenance?.maintenances; // The data (ID, and sometimes the title and body) we supply regarding maintenance events in LD.
 
@@ -50,8 +55,14 @@ export const GlobalNotifications = () => {
       <RegionStatusBanner />
       <AbuseTicketBanner />
       <ComplianceBanner />
+      {isProxyUser && (
+        <SwitchAccountSessionDialog
+          isOpen={Boolean(sessionContext.isOpen)}
+          onClose={() => sessionContext.updateState({ isOpen: false })}
+        />
+      )}
       <ComplianceUpdateModal />
-      {isChildAccount && !isVerified && (
+      {isChildUser && !isVerified && (
         <VerificationDetailsBanner
           hasSecurityQuestions={hasSecurityQuestions}
           hasVerifiedPhoneNumber={hasVerifiedPhoneNumber}
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index 2228190c9f6..30908821028 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -16,8 +16,10 @@ import { Link } from 'src/components/Link';
 import { Stack } from 'src/components/Stack';
 import { Tooltip } from 'src/components/Tooltip';
 import { Typography } from 'src/components/Typography';
+import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
 import { SwitchAccountButton } from 'src/features/Account/SwitchAccountButton';
 import { SwitchAccountDrawer } from 'src/features/Account/SwitchAccountDrawer';
+import { useParentTokenManagement } from 'src/features/Account/SwitchAccounts/useParentTokenManagement';
 import { useFlags } from 'src/hooks/useFlags';
 import { useAccount } from 'src/queries/account';
 import { useGrants, useProfile } from 'src/queries/profile';
@@ -58,6 +60,7 @@ export const UserMenu = React.memo(() => {
   const { data: grants } = useGrants();
   const { enqueueSnackbar } = useSnackbar();
   const flags = useFlags();
+  const sessionContext = React.useContext(switchAccountSessionContext);
 
   const hasGrant = (grant: GlobalGrantTypes) =>
     grants?.global?.[grant] ?? false;
@@ -77,6 +80,7 @@ export const UserMenu = React.memo(() => {
       account?.company) ??
     '';
   const showCompanyName = hasParentChildAccountAccess && companyName;
+  const { isParentTokenExpired } = useParentTokenManagement({ isProxyUser });
 
   // Used for fetching parent profile and account data by making a request with the parent's token.
   const proxyHeaders =
@@ -177,6 +181,16 @@ export const UserMenu = React.memo(() => {
     );
   };
 
+  const handleAccountSwitch = () => {
+    if (isParentTokenExpired) {
+      return sessionContext.updateState({
+        isOpen: true,
+      });
+    }
+
+    setIsDrawerOpen(true);
+  };
+
   return (
     <>
       <Tooltip
@@ -259,7 +273,7 @@ export const UserMenu = React.memo(() => {
           {canSwitchBetweenParentOrProxyAccount && (
             <SwitchAccountButton
               buttonType="outlined"
-              onClick={() => setIsDrawerOpen(true)}
+              onClick={handleAccountSwitch}
             />
           )}
           <Box>
diff --git a/packages/manager/src/hooks/useIsResourceRestricted.ts b/packages/manager/src/hooks/useIsResourceRestricted.ts
index 0720636d1b4..e9126cf36af 100644
--- a/packages/manager/src/hooks/useIsResourceRestricted.ts
+++ b/packages/manager/src/hooks/useIsResourceRestricted.ts
@@ -1,6 +1,6 @@
 import { useGrants } from 'src/queries/profile';
 
-import type { GrantLevel, GrantType, Grants } from '@linode/api-v4';
+import type { GrantLevel, GrantType } from '@linode/api-v4';
 
 /**
  * This hook verifies if a user with restricted access can edit specific cloud resources (Linodes, NodeBalancers, Volumes, etc.).
@@ -13,7 +13,6 @@ export const useIsResourceRestricted = ({
 }: {
   grantLevel?: GrantLevel;
   grantType: GrantType;
-  grants?: Grants;
   id: number | undefined;
 }) => {
   const { data: grants } = useGrants();