upcoming: [M3-7743] - Handle errors gracefully when FF enabled without MSW

packages/manager/.changeset/pr-10189-upcoming-features-1707838240012.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Handle errors gracefully when OBJ Multi-Cluster feature flag is enabled without MSW ([#10189](https://github.com/linode/manager/pull/10189))

packages/manager/src/components/AccountActivation/AccountActivationError.tsx

@@ -23,10 +23,12 @@ const AccountActivationError = (props: CombinedProps) => {
 
   return (
     <React.Fragment>
-      {getAPIErrorOrDefault(
-        props.errors,
-        'Your account is not yet activated. Please reach out to support@linode.com for more information'
-      )[0].reason}
+      {
+        getAPIErrorOrDefault(
+          props.errors,
+          'Your account is not yet activated. Please reach out to support@linode.com for more information'
+        )[0].reason
+      }
     </React.Fragment>
   );
 };

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

@@ -30,8 +30,8 @@ import { AccessKeyDrawer } from './AccessKeyDrawer';
 import { AccessKeyTable } from './AccessKeyTable/AccessKeyTable';
 import { OMC_AccessKeyDrawer } from './OMC_AccessKeyDrawer';
 import { RevokeAccessKeyDialog } from './RevokeAccessKeyDialog';
-import ViewPermissionsDrawer from './ViewPermissionsDrawer';
 import { MODE, OpenAccessDrawer } from './types';
+import ViewPermissionsDrawer from './ViewPermissionsDrawer';
 
 interface Props {
   accessDrawerOpen: boolean;

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

@@ -1,15 +1,16 @@
-import React from 'react';
 import {
   ObjectStorageKey,
   RegionS3EndpointAndID,
 } from '@linode/api-v4/lib/object-storage';
 import { APIError } from '@linode/api-v4/lib/types';
+import React from 'react';
 
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
-import { AccessKeyTableRows } from './AccessKeyTableRows';
+
 import { OpenAccessDrawer } from '../types';
+import { AccessKeyTableRow } from './AccessKeyTableRow';
 
 type Props = {
   data: ObjectStorageKey[] | undefined;
@@ -52,13 +53,18 @@ export const AccessKeyTableBody = ({
   return (
     <>
       {data && data.length > 0 ? (
-        <AccessKeyTableRows
-          objectStorageKeys={data}
-          openDrawer={openDrawer}
-          openRevokeDialog={openRevokeDialog}
-          setHostNames={setHostNames}
-          setShowHostNamesDrawers={setShowHostNamesDrawers}
-        />
+        <>
+          {data.map((eachKey: ObjectStorageKey, index) => (
+            <AccessKeyTableRow
+              key={index}
+              openDrawer={openDrawer}
+              openRevokeDialog={openRevokeDialog}
+              setHostNames={setHostNames}
+              setShowHostNamesDrawers={setShowHostNamesDrawers}
+              storageKeyData={eachKey}
+            />
+          ))}
+        </>
       ) : (
         <TableRowEmpty colSpan={12} />
       )}

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

@@ -0,0 +1,84 @@
+import {
+  ObjectStorageKey,
+  RegionS3EndpointAndID,
+} from '@linode/api-v4/lib/object-storage';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import { TableCell } from 'src/components/TableCell';
+import { TableRow } from 'src/components/TableRow';
+import { Typography } from 'src/components/Typography';
+import { useAccountManagement } from 'src/hooks/useAccountManagement';
+import { useFlags } from 'src/hooks/useFlags';
+import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
+
+import { OpenAccessDrawer } from '../types';
+import { AccessKeyActionMenu } from './AccessKeyActionMenu';
+import { HostNameTableCell } from './HostNameTableCell';
+
+type Props = {
+  openDrawer: OpenAccessDrawer;
+  openRevokeDialog: (storageKeyData: ObjectStorageKey) => void;
+  setHostNames: (hostNames: RegionS3EndpointAndID[]) => void;
+  setShowHostNamesDrawers: (show: boolean) => void;
+  storageKeyData: ObjectStorageKey;
+};
+
+export const AccessKeyTableRow = ({
+  openDrawer,
+  openRevokeDialog,
+  setHostNames,
+  setShowHostNamesDrawers,
+  storageKeyData,
+}: Props) => {
+  const { account } = useAccountManagement();
+  const flags = useFlags();
+
+  const isObjMultiClusterEnabled = isFeatureEnabled(
+    'Object Storage Access Key Regions',
+    Boolean(flags.objMultiCluster),
+    account?.capabilities ?? []
+  );
+
+  return (
+    <TableRow data-qa-table-row={storageKeyData.label} key={storageKeyData.id}>
+      <TableCell parentColumn="Label">
+        <Typography component="h3" data-qa-key-label variant="body1">
+          {storageKeyData.label}
+        </Typography>
+      </TableCell>
+      <TableCell parentColumn="Access Key">
+        <Typography data-qa-key-created variant="body1">
+          {storageKeyData.access_key}
+          <StyledCopyIcon text={storageKeyData.access_key} />
+        </Typography>
+      </TableCell>
+      {isObjMultiClusterEnabled && (
+        <HostNameTableCell
+          setHostNames={setHostNames}
+          setShowHostNamesDrawers={setShowHostNamesDrawers}
+          storageKeyData={storageKeyData}
+        />
+      )}
+
+      <TableCell>
+        <AccessKeyActionMenu
+          label={storageKeyData.label}
+          objectStorageKey={storageKeyData}
+          openDrawer={openDrawer}
+          openRevokeDialog={openRevokeDialog}
+        />
+      </TableCell>
+    </TableRow>
+  );
+};
+
+const StyledCopyIcon = styled(CopyTooltip)(({ theme }) => ({
+  '& svg': {
+    height: 12,
+    top: 1,
+    width: 12,
+  },
+  marginLeft: theme.spacing(),
+}));

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

@@ -0,0 +1,65 @@
+import {
+  ObjectStorageKey,
+  RegionS3EndpointAndID,
+} from '@linode/api-v4/lib/object-storage';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+
+import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import { TableCell } from 'src/components/TableCell';
+import { useRegionsQuery } from 'src/queries/regions';
+import { getRegionsByRegionId } from 'src/utilities/regions';
+
+type Props = {
+  setHostNames: (hostNames: RegionS3EndpointAndID[]) => void;
+  setShowHostNamesDrawers: (show: boolean) => void;
+  storageKeyData: ObjectStorageKey;
+};
+
+export const HostNameTableCell = ({
+  setHostNames,
+  setShowHostNamesDrawers,
+  storageKeyData,
+}: Props) => {
+  const { data: regionsData } = useRegionsQuery();
+
+  const regionsLookup = regionsData && getRegionsByRegionId(regionsData);
+
+  const { regions } = storageKeyData;
+
+  if (!regionsLookup || !regionsData || !regions) {
+    return <TableCell />;
+  }
+
+  return (
+    <TableCell>
+      {`${regionsLookup[storageKeyData.regions[0].id].label}: ${
+        storageKeyData?.regions[0]?.s3_endpoint
+      } `}
+      {storageKeyData?.regions?.length === 1 && (
+        <StyledCopyIcon text={storageKeyData.regions[0].s3_endpoint} />
+      )}
+      {storageKeyData.regions.length > 1 && (
+        <StyledLinkButton
+          onClick={() => {
+            setHostNames(storageKeyData.regions);
+            setShowHostNamesDrawers(true);
+          }}
+          type="button"
+        >
+          and {storageKeyData.regions.length - 1} more...
+        </StyledLinkButton>
+      )}
+    </TableCell>
+  );
+};
+
+const StyledCopyIcon = styled(CopyTooltip)(({ theme }) => ({
+  '& svg': {
+    height: 12,
+    top: 1,
+    width: 12,
+  },
+  marginLeft: theme.spacing(),
+}));

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

@@ -174,10 +174,12 @@ export const OMC_AccessKeyDrawer = (props: AccessKeyDrawerProps) => {
       : updateObjectStorageKeysSchema,
   });
 
+  // @TODO OBJ Multicluster: The objectStorageKey check is a temporary fix to handle error cases when the feature flag is enabled without Mock Service Worker (MSW). This can be removed during the feature flag cleanup.
   const isSaveDisabled =
     isRestrictedUser ||
     (mode !== 'creating' &&
       objectStorageKey &&
+      objectStorageKey?.regions?.length > 0 &&
       !hasLabelOrRegionsChanged(formik.values, objectStorageKey));
 
   const beforeSubmit = () => {

packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.test.tsx

@@ -92,7 +92,10 @@ describe('CreateBucketDrawer', () => {
       getByTestId,
     } = renderWithTheme(<CreateBucketDrawer {...props} />, { queryClient });
 
-    await userEvent.type(getByLabelText('Label', { exact: false }), 'my-test-bucket');
+    await userEvent.type(
+      getByLabelText('Label', { exact: false }),
+      'my-test-bucket'
+    );
 
     // We must waitFor because we need to load region and cluster data from the API
     await waitFor(() =>