feat: [M3-7921] - Added Dialog to Refresh Proxy Tokens as Time Expires (

#10361) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
linode · May 6, 2024 · 423d84f · 423d84f
1 parent ee202fe
commit 423d84f
Show file tree

Hide file tree

Showing 22 changed files with 920 additions and 536 deletions.
diff --git a/packages/manager/.changeset/pr-10361-upcoming-features-1712850056835.md b/packages/manager/.changeset/pr-10361-upcoming-features-1712850056835.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Dialog to Refresh Proxy Tokens as Time Expires ([#10361](https://github.com/linode/manager/pull/10361))
diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
@@ -28,6 +28,7 @@ import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 
 import { ENABLE_MAINTENANCE_MODE } from './constants';
 import { complianceUpdateContext } from './context/complianceUpdateContext';
+import { sessionExpirationContext } from './context/sessionExpirationContext';
 import { switchAccountSessionContext } from './context/switchAccountSessionContext';
 import { useIsACLBEnabled } from './features/LoadBalancers/utils';
 import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
@@ -197,6 +198,11 @@ export const MainContent = () => {
     isOpen: false,
   });
 
+  const SessionExpirationProvider = sessionExpirationContext.Provider;
+  const sessionExpirationContextValue = useDialogContext({
+    isOpen: false,
+  });
+
   const [menuIsOpen, toggleMenu] = React.useState<boolean>(false);
   const {
     _isManagedAccount,
@@ -281,94 +287,99 @@ export const MainContent = () => {
 
   return (
     <div className={classes.appFrame}>
-      <SwitchAccountSessionProvider value={switchAccountSessionContextValue}>
-        <ComplianceUpdateProvider value={complianceUpdateContextValue}>
-          <NotificationProvider value={contextValue}>
-            <SideMenu
-              closeMenu={() => toggleMenu(false)}
-              collapse={desktopMenuIsOpen || false}
-              open={menuIsOpen}
-            />
-            <div
-              className={cx(classes.content, {
-                [classes.fullWidthContent]:
-                  desktopMenuIsOpen ||
-                  (desktopMenuIsOpen && desktopMenuIsOpen === true),
-              })}
-            >
-              <MainContentBanner />
-              <TopMenu
-                desktopMenuToggle={desktopMenuToggle}
-                isSideMenuOpen={!desktopMenuIsOpen}
-                openSideMenu={() => toggleMenu(true)}
-                username={username}
+      <SessionExpirationProvider value={sessionExpirationContextValue}>
+        <SwitchAccountSessionProvider value={switchAccountSessionContextValue}>
+          <ComplianceUpdateProvider value={complianceUpdateContextValue}>
+            <NotificationProvider value={contextValue}>
+              <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" />
-                        {isPlacementGroupsEnabled && (
+                <MainContentBanner />
+                <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" />
+                          {isPlacementGroupsEnabled && (
+                            <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={PlacementGroups}
-                            path="/placement-groups"
+                            component={StackScripts}
+                            path="/stackscripts"
                           />
-                        )}
-                        <Route component={Volumes} path="/volumes" />
-                        <Redirect path="/volumes*" to="/volumes" />
-                        {isACLBEnabled && (
                           <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" />
-                        )}
-                        <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" />
+                          )}
+                          <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>
-      </SwitchAccountSessionProvider>
+                </main>
+              </div>
+            </NotificationProvider>
+            <Footer desktopMenuIsOpen={desktopMenuIsOpen} />
+          </ComplianceUpdateProvider>
+        </SwitchAccountSessionProvider>
+      </SessionExpirationProvider>
     </div>
   );
 };
diff --git a/packages/manager/src/components/Button/StyledLinkButton.ts b/packages/manager/src/components/Button/StyledLinkButton.ts
@@ -10,7 +10,11 @@ import { styled } from '@mui/material/styles';
 export const StyledLinkButton = styled('button', {
   label: 'StyledLinkButton',
 })(({ theme }) => ({
-  '&:hover': {
+  '&:disabled': {
+    color: theme.palette.text.disabled,
+    cursor: 'not-allowed',
+  },
+  '&:hover:not(:disabled)': {
     backgroundColor: 'transparent',
     color: theme.palette.primary.main,
     textDecoration: 'underline',

diff --git a/packages/manager/src/context/sessionExpirationContext.ts b/packages/manager/src/context/sessionExpirationContext.ts
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import { DialogContextProps, defaultContext } from './useDialogContext';
+
+export const sessionExpirationContext = React.createContext<DialogContextProps>(
+  defaultContext
+);
diff --git a/packages/manager/src/features/Account/AccountLanding.tsx b/packages/manager/src/features/Account/AccountLanding.tsx
@@ -12,10 +12,9 @@ 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 { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/useIsParentTokenExpired';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useFlags } from 'src/hooks/useFlags';
-import { usePendingRevocationToken } from 'src/hooks/usePendingRevocationToken';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAccount } from 'src/queries/account/account';
 import { useProfile } from 'src/queries/profile';
@@ -56,10 +55,6 @@ const AccountLanding = () => {
   const flags = useFlags();
   const [isDrawerOpen, setIsDrawerOpen] = React.useState<boolean>(false);
   const sessionContext = React.useContext(switchAccountSessionContext);
-  const {
-    getPendingRevocationToken,
-    pendingRevocationToken,
-  } = usePendingRevocationToken();
 
   const isAkamaiAccount = account?.billing_source === 'akamai';
   const isProxyUser = profile?.user_type === 'proxy';
@@ -76,7 +71,7 @@ const AccountLanding = () => {
     globalGrantType: 'child_account_access',
   });
 
-  const { isParentTokenExpired } = useParentTokenManagement({ isProxyUser });
+  const { isParentTokenExpired } = useIsParentTokenExpired({ isProxyUser });
 
   const tabs = [
     {
@@ -118,10 +113,6 @@ const AccountLanding = () => {
       });
     }
 
-    if (isProxyUser) {
-      getPendingRevocationToken();
-    }
-
     setIsDrawerOpen(true);
   };
 
@@ -223,7 +214,6 @@ const AccountLanding = () => {
       <SwitchAccountDrawer
         onClose={() => setIsDrawerOpen(false)}
         open={isDrawerOpen}
-        proxyToken={pendingRevocationToken}
         userType={profile?.user_type}
       />
     </React.Fragment>