refactro: STORIF-335 AccessKeysDrawerOutlet component created.

Author: dchyrva-akamai

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx

@@ -1,4 +1,4 @@
-import { useAccountSettings } from '@linode/queries';
+import { useAccountSettings, useProfile } from '@linode/queries';
 import {
   ActionsPanel,
   CircleProgress,
@@ -12,6 +12,7 @@ import {
   createObjectStorageKeysSchema,
   updateObjectStorageKeysSchema,
 } from '@linode/validation';
+import { useParams } from '@tanstack/react-router';
 import { useFormik } from 'formik';
 import React, { useEffect, useState } from 'react';
 
@@ -20,6 +21,7 @@ import { useObjectStorageRegions } from 'src/features/ObjectStorage/hooks/useObj
 import { SecretTokenDialog } from 'src/features/Profile/SecretTokenDialog/SecretTokenDialog';
 import {
   useCreateAccessKeyMutation,
+  useObjectStorageAccessKey,
   useObjectStorageBuckets,
   useUpdateAccessKeyMutation,
 } from 'src/queries/object-storage/queries';
@@ -48,12 +50,11 @@ import type {
 import type { FormikHelpers } from 'formik';
 
 export interface AccessKeyDrawerProps {
-  isRestrictedUser: boolean;
+  isOpen: boolean;
   mode: MODE;
   // If the mode is 'editing', we should have an ObjectStorageKey to edit
   objectStorageKey?: ObjectStorageKey;
   onClose: () => void;
-  open: boolean;
 }
 
 // Access key scopes displayed in the drawer can have no permission or "No Access" selected, which are not valid API permissions.
@@ -103,7 +104,11 @@ export const getDefaultScopes = (
     .sort(sortByRegion(regionLookup));
 
 export const AccessKeyDrawer = (props: AccessKeyDrawerProps) => {
-  const { isRestrictedUser, mode, objectStorageKey, onClose, open } = props;
+  const { mode, onClose, isOpen } = props;
+  const { accessKeyId } = useParams({ strict: false });
+
+  const { data: profile } = useProfile();
+  const isRestrictedUser = profile?.restricted ?? false;
 
   const displayKeysDialog = useOpenClose();
   // Key to display in Confirmation Modal upon creation
@@ -119,6 +124,7 @@ export const AccessKeyDrawer = (props: AccessKeyDrawerProps) => {
   } = useObjectStorageBuckets();
 
   const { data: accountSettings } = useAccountSettings();
+  const { data: objectStorageKey } = useObjectStorageAccessKey(accessKeyId);
   const { mutateAsync: createAccessKey } = useCreateAccessKeyMutation();
   const { mutateAsync: updateAccessKey } = useUpdateAccessKeyMutation();
 
@@ -307,13 +313,13 @@ export const AccessKeyDrawer = (props: AccessKeyDrawerProps) => {
   useEffect(() => {
     setLimitedAccessChecked(false);
     formik.resetForm({ values: initialValues });
-  }, [open]);
+  }, [isOpen]);
 
   return (
     <>
       <Drawer
         onClose={onClose}
-        open={open}
+        open={isOpen}
         title={title}
         wide={createMode && hasBuckets}
       >
@@ -361,7 +367,7 @@ export const AccessKeyDrawer = (props: AccessKeyDrawerProps) => {
 
             <TextField
               data-qa-add-label
-              disabled={isRestrictedUser || mode === 'viewing'}
+              disabled={isRestrictedUser}
               error={formik.touched.label ? !!formik.errors.label : false}
               errorText={formik.touched.label ? formik.errors.label : undefined}
               label="Label"

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.test.tsx

@@ -5,11 +5,7 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 import { AccessKeyLanding } from './AccessKeyLanding';
 
 const props = {
-  accessDrawerOpen: false,
-  closeAccessDrawer: vi.fn(),
   isRestrictedUser: false,
-  mode: 'creating' as any,
-  openAccessDrawer: vi.fn(),
 };
 
 describe('AccessKeyLanding', () => {

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.tsx

@@ -11,36 +11,24 @@ import {
 } from 'src/queries/object-storage/queries';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
-import { AccessKeyDrawer } from './AccessKeyDrawer';
 import { AccessKeyTable } from './AccessKeyTable/AccessKeyTable';
+import { useAccessKeyDrawers } from './hooks/useAccessKeyDrawers';
 import { RevokeAccessKeyDialog } from './RevokeAccessKeyDialog';
-import { ViewPermissionsDrawer } from './ViewPermissionsDrawer';
 
-import type { MODE, OpenAccessDrawer } from './types';
 import type {
   CreateObjectStorageKeyPayload,
   ObjectStorageKey,
 } from '@linode/api-v4/lib/object-storage';
 import type { FormikBag } from 'formik';
 
 interface Props {
-  accessDrawerOpen: boolean;
-  closeAccessDrawer: () => void;
   isRestrictedUser: boolean;
-  mode: MODE;
-  openAccessDrawer: (mode: MODE) => void;
 }
 
 export type FormikProps = FormikBag<Props, CreateObjectStorageKeyPayload>;
 
 export const AccessKeyLanding = (props: Props) => {
-  const {
-    accessDrawerOpen,
-    closeAccessDrawer,
-    isRestrictedUser,
-    mode,
-    openAccessDrawer,
-  } = props;
+  const { isRestrictedUser } = props;
 
   const navigate = useNavigate();
   const pagination = usePaginationV2({
@@ -55,10 +43,8 @@ export const AccessKeyLanding = (props: Props) => {
   });
   const { mutateAsync: deleteAccessKey } = useDeleteAccessKeyMutation();
 
-  // Key to rename (by clicking on a key's kebab menu )
-  const [keyToEdit, setKeyToEdit] = React.useState<null | ObjectStorageKey>(
-    null
-  );
+  const { drawer } = useAccessKeyDrawers();
+  const isCreateAccessDrawerOpen = drawer === 'create-access-key';
 
   // Key to revoke (by clicking on a key's kebab menu )
   const [keyToRevoke, setKeyToRevoke] = React.useState<null | ObjectStorageKey>(
@@ -114,16 +100,6 @@ export const AccessKeyLanding = (props: Props) => {
       });
   };
 
-  const openDrawer: OpenAccessDrawer = (
-    mode: MODE,
-    objectStorageKey: null | ObjectStorageKey = null
-  ) => {
-    setKeyToEdit(objectStorageKey);
-    if (mode !== 'creating') {
-      openAccessDrawer(mode);
-    }
-  };
-
   const openRevokeDialog = (objectStorageKey: ObjectStorageKey) => {
     setKeyToRevoke(objectStorageKey);
     revokeKeysDialog.open();
@@ -137,15 +113,14 @@ export const AccessKeyLanding = (props: Props) => {
   return (
     <div>
       <DocumentTitleSegment
-        segment={`${accessDrawerOpen ? `Create an Access Key` : `Access Keys`}`}
+        segment={`${isCreateAccessDrawerOpen ? `Create an Access Key` : `Access Keys`}`}
       />
       <AccessKeyTable
         data={data?.data}
         data-qa-access-key-table
         error={error}
         isLoading={isLoading}
         isRestrictedUser={isRestrictedUser}
-        openDrawer={openDrawer}
         openRevokeDialog={openRevokeDialog}
       />
       <PaginationFooter
@@ -157,20 +132,6 @@ export const AccessKeyLanding = (props: Props) => {
         pageSize={pagination.pageSize}
       />
 
-      <AccessKeyDrawer
-        isRestrictedUser={props.isRestrictedUser}
-        mode={mode}
-        objectStorageKey={keyToEdit ? keyToEdit : undefined}
-        onClose={closeAccessDrawer}
-        open={accessDrawerOpen}
-      />
-
-      <ViewPermissionsDrawer
-        objectStorageKey={keyToEdit}
-        onClose={closeAccessDrawer}
-        open={mode === 'viewing' && accessDrawerOpen}
-      />
-
       <RevokeAccessKeyDialog
         errors={revokeErrors}
         handleClose={closeRevokeDialog}

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyActionMenu.tsx

@@ -6,27 +6,21 @@ import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 
 import { useIsObjMultiClusterEnabled } from '../../hooks/useIsObjectStorageGen2Enabled';
+import { useAccessKeyDrawers } from '../hooks/useAccessKeyDrawers';
 
-import type { OpenAccessDrawer } from '../types';
 import type { ObjectStorageKey } from '@linode/api-v4';
 import type { Theme } from '@mui/material';
 
 interface Props {
   label: string;
   objectStorageKey: ObjectStorageKey;
-  openDrawer: OpenAccessDrawer;
-  openHostnamesDrawer: () => void;
   openRevokeDialog: (key: ObjectStorageKey) => void;
 }
 
 export const AccessKeyActionMenu = (props: Props) => {
-  const {
-    label,
-    objectStorageKey,
-    openDrawer,
-    openHostnamesDrawer,
-    openRevokeDialog,
-  } = props;
+  const { label, objectStorageKey, openRevokeDialog } = props;
+
+  const { openDrawer } = useAccessKeyDrawers();
 
   const { isObjMultiClusterEnabled } = useIsObjMultiClusterEnabled();
 
@@ -37,20 +31,22 @@ export const AccessKeyActionMenu = (props: Props) => {
   const actions = [
     {
       onClick: () => {
-        openDrawer('editing', objectStorageKey);
+        openDrawer('edit-access-key', objectStorageKey.id);
       },
       title: isObjMultiClusterEnabled ? 'Edit' : 'Edit Label',
     },
     {
       onClick: () => {
-        openDrawer('viewing', objectStorageKey);
+        openDrawer('access-key-permissions', objectStorageKey.id);
       },
       title: 'Permissions',
     },
     ...(isObjMultiClusterEnabled
       ? [
           {
-            onClick: openHostnamesDrawer,
+            onClick: () => {
+              openDrawer('access-key-hostnames', objectStorageKey.id);
+            },
             title: 'View Regions/S3 Hostnames',
           },
         ]

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTable.test.tsx

@@ -12,7 +12,6 @@ describe('ObjectStorageKeyTable', () => {
     error: undefined,
     isLoading: false,
     isRestrictedUser: false,
-    openDrawer: vi.fn(),
     openRevokeDialog: vi.fn(),
   };