refactor: [M3-7720] - Refactor AccessKeyTable - Eliminate react anti patterns

packages/manager/.changeset/pr-10124-tech-stories-1706629455055.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Refactor AccessKeyTable - Eliminate react anti patterns. ([#10124](https://github.com/linode/manager/pull/10124))

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

@@ -27,7 +27,7 @@ import {
 import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 
 import { AccessKeyDrawer } from './AccessKeyDrawer';
-import { AccessKeyTable } from './AccessKeyTable';
+import { AccessKeyTable } from './AccessKeyTable/AccessKeyTable';
 import { OMC_AccessKeyDrawer } from './OMC_AccessKeyDrawer';
 import { RevokeAccessKeyDialog } from './RevokeAccessKeyDialog';
 import ViewPermissionsDrawer from './ViewPermissionsDrawer';

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

@@ -9,7 +9,7 @@ import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useFlags } from 'src/hooks/useFlags';
 import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 
-import { OpenAccessDrawer } from './types';
+import { OpenAccessDrawer } from '../types';
 
 interface Props {
   label: string;
@@ -18,9 +18,12 @@ interface Props {
   openRevokeDialog: (key: ObjectStorageKey) => void;
 }
 
-export const AccessKeyMenu = (props: Props) => {
-  const { objectStorageKey, openDrawer, openRevokeDialog } = props;
-
+export const AccessKeyActionMenu = ({
+  label,
+  objectStorageKey,
+  openDrawer,
+  openRevokeDialog,
+}: Props) => {
   const flags = useFlags();
   const { account } = useAccountManagement();
 
@@ -56,7 +59,7 @@ export const AccessKeyMenu = (props: Props) => {
       {isObjMultiClusterEnabled ? (
         <ActionMenu
           actionsList={actions}
-          ariaLabel={`Action menu for Object Storage Key ${props.label}`}
+          ariaLabel={`Action menu for Object Storage Key ${label}`}
         />
       ) : (
         <>
@@ -72,7 +75,7 @@ export const AccessKeyMenu = (props: Props) => {
           <Hidden mdUp>
             <ActionMenu
               actionsList={actions}
-              ariaLabel={`Action menu for Object Storage Key ${props.label}`}
+              ariaLabel={`Action menu for Object Storage Key ${label}`}
             />
           </Hidden>
         </>

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

@@ -0,0 +1,105 @@
+import {
+  ObjectStorageKey,
+  RegionS3EndpointAndID,
+} from '@linode/api-v4/lib/object-storage';
+import { APIError } from '@linode/api-v4/lib/types';
+import { styled } from '@mui/material/styles';
+import React, { useState } from 'react';
+
+import { Table } from 'src/components/Table';
+
+import { TableCell } from 'src/components/TableCell';
+import { TableHead } from 'src/components/TableHead';
+import { TableRow } from 'src/components/TableRow';
+import { TableBody } from 'src/components/TableBody';
+
+import { useAccountManagement } from 'src/hooks/useAccountManagement';
+import { useFlags } from 'src/hooks/useFlags';
+import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
+
+import { HostNamesDrawer } from '../HostNamesDrawer';
+import { OpenAccessDrawer } from '../types';
+
+import { AccessKeyTableBody } from './AccessKeyTableBody';
+
+export interface AccessKeyTableProps {
+  data: ObjectStorageKey[] | undefined;
+  error: APIError[] | null | undefined;
+  isLoading: boolean;
+  isRestrictedUser: boolean;
+  openDrawer: OpenAccessDrawer;
+  openRevokeDialog: (objectStorageKey: ObjectStorageKey) => void;
+}
+
+export const AccessKeyTable = (props: AccessKeyTableProps) => {
+  const {
+    data,
+    error,
+    isLoading,
+    isRestrictedUser,
+    openDrawer,
+    openRevokeDialog,
+  } = props;
+
+  const [showHostNamesDrawer, setShowHostNamesDrawers] = useState<boolean>(
+    false
+  );
+  const [hostNames, setHostNames] = useState<RegionS3EndpointAndID[]>([]);
+
+  const flags = useFlags();
+  const { account } = useAccountManagement();
+
+  const isObjMultiClusterEnabled = isFeatureEnabled(
+    'Object Storage Access Key Regions',
+    Boolean(flags.objMultiCluster),
+    account?.capabilities ?? []
+  );
+
+  return (
+    <>
+      <Table
+        aria-label="List of Object Storage Access Keys"
+        colCount={2}
+        data-testid="data-qa-access-key-table"
+        rowCount={data?.length}
+      >
+        <TableHead>
+          <TableRow data-qa-table-head>
+            <StyledLabelCell data-qa-header-label>Label</StyledLabelCell>
+            <StyledLabelCell data-qa-header-key>Access Key</StyledLabelCell>
+            {isObjMultiClusterEnabled && (
+              <StyledLabelCell data-qa-header-key>
+                Regions/S3 Hostnames
+              </StyledLabelCell>
+            )}
+            {/* empty cell for kebab menu */}
+            <TableCell />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <AccessKeyTableBody
+            data={data}
+            error={error}
+            isLoading={isLoading}
+            isRestrictedUser={isRestrictedUser}
+            openDrawer={openDrawer}
+            openRevokeDialog={openRevokeDialog}
+            setHostNames={setHostNames}
+            setShowHostNamesDrawers={setShowHostNamesDrawers}
+          />
+        </TableBody>
+      </Table>
+      {isObjMultiClusterEnabled && (
+        <HostNamesDrawer
+          onClose={() => setShowHostNamesDrawers(false)}
+          open={showHostNamesDrawer}
+          regions={hostNames}
+        />
+      )}
+    </>
+  );
+};
+
+const StyledLabelCell = styled(TableCell)(() => ({
+  width: '35%',
+}));