refactor: STORIF-335 - Comments resolved.

Author: dchyrva-akamai

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

@@ -44,7 +44,7 @@ export const AccessKeyLanding = (props: Props) => {
   const { mutateAsync: deleteAccessKey } = useDeleteAccessKeyMutation();
 
   const { drawer } = useAccessKeyDrawers();
-  const isCreateAccessDrawerOpen = drawer === 'create-access-key';
+  const isCreateAccessKeyDrawerOpen = drawer === 'create-access-key';
 
   // Key to revoke (by clicking on a key's kebab menu )
   const [keyToRevoke, setKeyToRevoke] = React.useState<null | ObjectStorageKey>(
@@ -113,7 +113,7 @@ export const AccessKeyLanding = (props: Props) => {
   return (
     <div>
       <DocumentTitleSegment
-        segment={`${isCreateAccessDrawerOpen ? `Create an Access Key` : `Access Keys`}`}
+        segment={`${isCreateAccessKeyDrawerOpen ? `Create an Access Key` : `Access Keys`}`}
       />
       <AccessKeyTable
         data={data?.data}

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

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { useIsObjMultiClusterEnabled } from '../hooks/useIsObjectStorageGen2Enabled';
 import { useAccessKeyDrawers } from './hooks/useAccessKeyDrawers';
 import { HostNamesDrawer } from './HostNamesDrawer';
 import { AccessKeyDrawer } from './OMC_AccessKeyDrawer';
@@ -9,8 +8,6 @@ import { ViewPermissionsDrawer } from './ViewPermissionsDrawer';
 export const AccessKeysDrawerOutlet = () => {
   const { drawer, closeDrawer } = useAccessKeyDrawers();
 
-  const { isObjMultiClusterEnabled } = useIsObjMultiClusterEnabled();
-
   return (
     <>
       <AccessKeyDrawer
@@ -30,12 +27,10 @@ export const AccessKeysDrawerOutlet = () => {
         onClose={closeDrawer}
       />
 
-      {isObjMultiClusterEnabled && (
-        <HostNamesDrawer
-          isOpen={drawer === 'access-key-hostnames'}
-          onClose={closeDrawer}
-        />
-      )}
+      <HostNamesDrawer
+        isOpen={drawer === 'access-key-hostnames'}
+        onClose={closeDrawer}
+      />
     </>
   );
 };

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

@@ -1,6 +1,7 @@
 import { useMatch, useNavigate } from '@tanstack/react-router';
+import { useMemo } from 'react';
 
-type AccessKeyDrawers =
+type AccessKeyDrawerType =
   | 'access-key-hostnames'
   | 'access-key-permissions'
   | 'create-access-key'
@@ -12,7 +13,7 @@ export const useAccessKeyDrawers = () => {
   const navigate = useNavigate();
   const { routeId } = useMatch({ strict: false });
 
-  function getDrawer(): AccessKeyDrawers | null {
+  function getDrawer(): AccessKeyDrawerType | null {
     switch (routeId) {
       case `${ACCESS_KEYS_BASE_URL}/$accessKeyId/edit`:
         return 'edit-access-key';
@@ -27,7 +28,7 @@ export const useAccessKeyDrawers = () => {
     }
   }
 
-  function openDrawer(drawer: AccessKeyDrawers, accessKeyId?: number) {
+  function openDrawer(drawer: AccessKeyDrawerType, accessKeyId?: number) {
     switch (drawer) {
       case 'access-key-hostnames':
         navigate({
@@ -55,7 +56,7 @@ export const useAccessKeyDrawers = () => {
   }
 
   return {
-    drawer: getDrawer(),
+    drawer: useMemo(() => getDrawer(), [routeId]),
     openDrawer,
     closeDrawer,
   };

packages/manager/src/features/ObjectStorage/BucketLanding/hooks/useBucketDrawers.tsx

@@ -1,14 +1,15 @@
 import { useMatch, useNavigate } from '@tanstack/react-router';
+import { useMemo } from 'react';
 
-type BucketDrawers = 'bucket-details' | 'create-bucket';
+type BucketDrawerType = 'bucket-details' | 'create-bucket';
 
 const BUCKETS_BASE_URL = '/object-storage/buckets';
 
 export const useBucketDrawers = () => {
   const navigate = useNavigate();
   const { routeId } = useMatch({ strict: false });
 
-  function getDrawer(): BucketDrawers | null {
+  function getDrawer(): BucketDrawerType | null {
     switch (routeId) {
       case `${BUCKETS_BASE_URL}/$regionId/$bucketName/details`:
         return 'bucket-details';
@@ -20,7 +21,7 @@ export const useBucketDrawers = () => {
   }
 
   function openDrawer(
-    drawer: BucketDrawers,
+    drawer: BucketDrawerType,
     regionId?: string,
     bucketName?: string
   ) {
@@ -41,7 +42,7 @@ export const useBucketDrawers = () => {
   }
 
   return {
-    drawer: getDrawer(),
+    drawer: useMemo(() => getDrawer(), [routeId]),
     openDrawer,
     closeDrawer,
   };