new: STORIF-320 - Object storage creation flow updated.

Author: dchyrva-akamai

packages/manager/src/features/Account/constants.ts

@@ -5,6 +5,7 @@ export const CUSTOMER_SUPPORT = 'customer support';
 export const grantTypeMap = {
   account: 'Account',
   bucket: 'Buckets',
+  key: 'Access Keys',
   database: 'Databases',
   domain: 'Domains',
   firewall: 'Firewalls',

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { objectStorageBucketFactory } from 'src/factories/objectStorage';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { AccessKeyDrawer, getDefaultScopes } from './AccessKeyDrawer';
+import { AccessKeyDrawerV1, getDefaultScopes } from './AccessKeyDrawer';
 import { getUpdatedScopes } from './AccessTable';
 
 import type { AccessKeyDrawerProps } from './AccessKeyDrawer';
@@ -19,7 +19,7 @@ describe('AccessKeyDrawer', () => {
     onSubmit: vi.fn(),
     open: true,
   };
-  renderWithTheme(<AccessKeyDrawer {...props} />);
+  renderWithTheme(<AccessKeyDrawerV1 {...props} />);
   it('renders without crashing', () => {
     expect(screen.getByTestId('drawer-title')).toBeInTheDocument();
   });

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

@@ -78,7 +78,7 @@ export const getDefaultScopes = (
     }))
     .sort(sortByCluster);
 
-export const AccessKeyDrawer = (props: AccessKeyDrawerProps) => {
+export const AccessKeyDrawerV1 = (props: AccessKeyDrawerProps) => {
   const { isRestrictedUser, mode, objectStorageKey, onClose, onSubmit, open } =
     props;
 

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

@@ -4,17 +4,9 @@ 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', () => {
   it('should render a table of access keys', async () => {
-    const { getByTestId } = renderWithTheme(<AccessKeyLanding {...props} />);
+    const { getByTestId } = renderWithTheme(<AccessKeyLanding />);
     expect(getByTestId('data-qa-access-key-table')).toBeInTheDocument();
   });
 });

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

@@ -1,59 +1,22 @@
-import {
-  createObjectStorageKeys,
-  revokeObjectStorageKey,
-  updateObjectStorageKey,
-} from '@linode/api-v4/lib/object-storage';
-import { useAccountSettings } from '@linode/queries';
+import { revokeObjectStorageKey } from '@linode/api-v4/lib/object-storage';
 import { useErrors, useOpenClose } from '@linode/utilities';
 import { useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
-import { SecretTokenDialog } from 'src/features/Profile/SecretTokenDialog/SecretTokenDialog';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 import { useObjectStorageAccessKeys } from 'src/queries/object-storage/queries';
-import {
-  sendCreateAccessKeyEvent,
-  sendEditAccessKeyEvent,
-  sendRevokeAccessKeyEvent,
-} from 'src/utilities/analytics/customEventAnalytics';
-import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
+import { sendRevokeAccessKeyEvent } from 'src/utilities/analytics/customEventAnalytics';
+import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
-import { useIsObjMultiClusterEnabled } from '../hooks/useIsObjectStorageGen2Enabled';
-import { AccessKeyDrawer } from './AccessKeyDrawer';
 import { AccessKeyTable } from './AccessKeyTable/AccessKeyTable';
-import { OMC_AccessKeyDrawer } from './OMC_AccessKeyDrawer';
 import { RevokeAccessKeyDialog } from './RevokeAccessKeyDialog';
-import { ViewPermissionsDrawer } from './ViewPermissionsDrawer';
 
 import type { MODE, OpenAccessDrawer } from './types';
-import type {
-  CreateObjectStorageKeyPayload,
-  ObjectStorageKey,
-  UpdateObjectStorageKeyPayload,
-} from '@linode/api-v4/lib/object-storage';
-import type { FormikBag, FormikHelpers } 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;
+import type { ObjectStorageKey } from '@linode/api-v4/lib/object-storage';
 
+export const AccessKeyLanding = () => {
   const navigate = useNavigate();
   const pagination = usePaginationV2({
     currentRoute: '/object-storage/access-keys',
@@ -66,30 +29,15 @@ export const AccessKeyLanding = (props: Props) => {
     page_size: pagination.pageSize,
   });
 
-  const { data: accountSettings, refetch: requestAccountSettings } =
-    useAccountSettings();
-
-  // Key to display in Confirmation Modal upon creation
-  const [keyToDisplay, setKeyToDisplay] =
-    React.useState<null | ObjectStorageKey>(null);
-
-  // Key to rename (by clicking on a key's kebab menu )
-  const [keyToEdit, setKeyToEdit] = React.useState<null | ObjectStorageKey>(
-    null
-  );
-
   // Key to revoke (by clicking on a key's kebab menu )
   const [keyToRevoke, setKeyToRevoke] = React.useState<null | ObjectStorageKey>(
     null
   );
   const [isRevoking, setIsRevoking] = React.useState<boolean>(false);
   const [revokeErrors, setRevokeErrors] = useErrors();
 
-  const displayKeysDialog = useOpenClose();
   const revokeKeysDialog = useOpenClose();
 
-  const { isObjMultiClusterEnabled } = useIsObjMultiClusterEnabled();
-
   // Redirect to base access keys route if current page has no data
   // TODO: Remove this implementation and replace `usePagination` with `usePaginate` hook. See [M3-10442]
   React.useEffect(() => {
@@ -109,123 +57,6 @@ export const AccessKeyLanding = (props: Props) => {
     }
   }, [data, isLoading, pagination.page, navigate]);
 
-  const handleCreateKey = (
-    values: CreateObjectStorageKeyPayload,
-    {
-      setErrors,
-      setStatus,
-      setSubmitting,
-    }: FormikHelpers<CreateObjectStorageKeyPayload>
-  ) => {
-    // Clear out status (used for general errors)
-    setStatus(null);
-    setSubmitting(true);
-
-    createObjectStorageKeys(values)
-      .then((data) => {
-        setSubmitting(false);
-
-        setKeyToDisplay(data);
-
-        // "Refresh" keys to include the newly created key
-        refetch();
-
-        props.closeAccessDrawer();
-        displayKeysDialog.open();
-
-        // If our Redux Store says that the user doesn't have OBJ enabled,
-        // it probably means they have just enabled it with the creation
-        // of this key. In that case, update the Redux Store so that
-        // subsequently created keys don't need to go through the
-        // confirmation flow.
-        if (accountSettings?.object_storage === 'disabled') {
-          requestAccountSettings();
-        }
-
-        // @analytics
-        sendCreateAccessKeyEvent();
-      })
-      .catch((errorResponse) => {
-        // We also need to refresh account settings on failure, since, depending
-        // on the error, Object Storage service might have actually been enabled.
-        if (accountSettings?.object_storage === 'disabled') {
-          requestAccountSettings();
-        }
-
-        setSubmitting(false);
-
-        const errors = getAPIErrorOrDefault(
-          errorResponse,
-          'There was an issue creating your Access Key.'
-        );
-        const mappedErrors = getErrorMap(['label'], errors);
-
-        // `status` holds general errors
-        if (mappedErrors.none) {
-          setStatus(mappedErrors.none);
-        }
-
-        setErrors(mappedErrors);
-      });
-  };
-
-  const handleEditKey = (
-    values: UpdateObjectStorageKeyPayload,
-    {
-      setErrors,
-      setStatus,
-      setSubmitting,
-    }: FormikHelpers<UpdateObjectStorageKeyPayload>
-  ) => {
-    // This shouldn't happen, but just in case.
-    if (!keyToEdit) {
-      return;
-    }
-
-    // Clear out status (used for general errors)
-    setStatus(null);
-
-    // If the new label is the same as the old one, no need to make an API
-    // request. Just close the drawer and return early.
-    if (values.label === keyToEdit.label) {
-      return closeAccessDrawer();
-    }
-
-    setSubmitting(true);
-
-    updateObjectStorageKey(
-      keyToEdit.id,
-      isObjMultiClusterEnabled ? values : { label: values.label }
-    )
-      .then((_) => {
-        setSubmitting(false);
-
-        // "Refresh" keys to display the newly updated key
-        refetch();
-
-        closeAccessDrawer();
-
-        // @analytics
-        sendEditAccessKeyEvent();
-      })
-      .catch((errorResponse) => {
-        setSubmitting(false);
-
-        const errors = getAPIErrorOrDefault(
-          errorResponse,
-          'There was an issue updating your Access Key.'
-        );
-        const mappedErrors = getErrorMap(['label'], errors);
-
-        // `status` holds general errors
-        if (mappedErrors.none) {
-          setStatus(mappedErrors.none);
-        }
-
-        setErrors(mappedErrors);
-      });
-  };
-
   const handleRevokeKeys = () => {
     // This shouldn't happen, but just in case.
     if (!keyToRevoke) {
@@ -260,12 +91,19 @@ export const AccessKeyLanding = (props: Props) => {
 
   const openDrawer: OpenAccessDrawer = (
     mode: MODE,
-    objectStorageKey: null | ObjectStorageKey = null
+    objectStorageKey: ObjectStorageKey
   ) => {
-    setKeyToEdit(objectStorageKey);
-    if (mode !== 'creating') {
-      openAccessDrawer(mode);
+    let drawerUrl = `/object-storage/access-keys/${objectStorageKey.id}`;
+
+    if (mode === 'editing') {
+      drawerUrl += `/update`;
+    }
+
+    if (mode === 'viewing') {
+      drawerUrl += `/details`;
     }
+
+    navigate({ to: drawerUrl });
   };
 
   const openRevokeDialog = (objectStorageKey: ObjectStorageKey) => {
@@ -279,19 +117,18 @@ export const AccessKeyLanding = (props: Props) => {
   };
 
   return (
-    <div>
-      <DocumentTitleSegment
-        segment={`${accessDrawerOpen ? `Create an Access Key` : `Access Keys`}`}
-      />
+    <>
+      <DocumentTitleSegment segment="Access Keys" />
+
       <AccessKeyTable
         data={data?.data}
         data-qa-access-key-table
         error={error}
         isLoading={isLoading}
-        isRestrictedUser={isRestrictedUser}
         openDrawer={openDrawer}
         openRevokeDialog={openRevokeDialog}
       />
+
       <PaginationFooter
         count={data?.results || 0}
         eventCategory="object storage keys table"
@@ -301,37 +138,6 @@ export const AccessKeyLanding = (props: Props) => {
         pageSize={pagination.pageSize}
       />
 
-      {isObjMultiClusterEnabled ? (
-        <OMC_AccessKeyDrawer
-          isRestrictedUser={props.isRestrictedUser}
-          mode={mode}
-          objectStorageKey={keyToEdit ? keyToEdit : undefined}
-          onClose={closeAccessDrawer}
-          onSubmit={mode === 'creating' ? handleCreateKey : handleEditKey}
-          open={accessDrawerOpen}
-        />
-      ) : (
-        <AccessKeyDrawer
-          isRestrictedUser={props.isRestrictedUser}
-          mode={mode}
-          objectStorageKey={keyToEdit ? keyToEdit : undefined}
-          onClose={closeAccessDrawer}
-          onSubmit={mode === 'creating' ? handleCreateKey : handleEditKey}
-          open={accessDrawerOpen}
-        />
-      )}
-
-      <ViewPermissionsDrawer
-        objectStorageKey={keyToEdit}
-        onClose={closeAccessDrawer}
-        open={mode === 'viewing' && accessDrawerOpen}
-      />
-      <SecretTokenDialog
-        objectStorageKey={keyToDisplay}
-        onClose={displayKeysDialog.close}
-        open={displayKeysDialog.isOpen}
-        title="Access Keys"
-      />
       <RevokeAccessKeyDialog
         errors={revokeErrors}
         handleClose={closeRevokeDialog}
@@ -341,6 +147,6 @@ export const AccessKeyLanding = (props: Props) => {
         label={keyToRevoke?.label || ''}
         numAccessKeys={data?.results || 0}
       />
-    </div>
+    </>
   );
 };

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

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