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/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/AccessKeyTableRows.tsx

@@ -2,25 +2,10 @@ 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 { TableRow } from 'src/components/TableRow';
-import { Typography } from 'src/components/Typography';
-import { useAccountManagement } from 'src/hooks/useAccountManagement';
-import { useFlags } from 'src/hooks/useFlags';
-import { useRegionsQuery } from 'src/queries/regions';
-import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
-import { getRegionsByRegionId } from 'src/utilities/regions';
-
-import { AccessKeyActionMenu } from './AccessKeyActionMenu';
 import { OpenAccessDrawer } from '../types';
+import { AccessKeyTableRow } from './AccessKeyTableRow';
 
 type Props = {
   objectStorageKeys: ObjectStorageKey[];
@@ -37,73 +22,18 @@ export const AccessKeyTableRows = ({
   setHostNames,
   setShowHostNamesDrawers,
 }: Props) => {
-  const { account } = useAccountManagement();
-  const { data: regionsData } = useRegionsQuery();
-  const flags = useFlags();
-
-  const regionsLookup = regionsData && getRegionsByRegionId(regionsData);
-
-  const isObjMultiClusterEnabled = isFeatureEnabled(
-    'Object Storage Access Key Regions',
-    Boolean(flags.objMultiCluster),
-    account?.capabilities ?? []
-  );
-
   return (
     <>
-      {objectStorageKeys.map((eachKey: ObjectStorageKey) => (
-        <TableRow data-qa-table-row={eachKey.label} key={eachKey.id}>
-          <TableCell parentColumn="Label">
-            <Typography component="h3" data-qa-key-label variant="body1">
-              {eachKey.label}
-            </Typography>
-          </TableCell>
-          <TableCell parentColumn="Access Key">
-            <Typography data-qa-key-created variant="body1">
-              {eachKey.access_key}
-              <StyledCopyIcon text={eachKey.access_key} />
-            </Typography>
-          </TableCell>
-          {isObjMultiClusterEnabled && regionsLookup && (
-            <TableCell>
-              {`${regionsLookup[eachKey?.regions[0]?.id].label}: ${
-                eachKey?.regions[0]?.s3_endpoint
-              } `}
-              {eachKey?.regions?.length === 1 && (
-                <StyledCopyIcon text={eachKey?.regions[0]?.s3_endpoint} />
-              )}
-              {eachKey.regions.length > 1 && (
-                <StyledLinkButton
-                  onClick={() => {
-                    setHostNames(eachKey.regions);
-                    setShowHostNamesDrawers(true);
-                  }}
-                  type="button"
-                >
-                  and {eachKey.regions.length - 1} more...
-                </StyledLinkButton>
-              )}
-            </TableCell>
-          )}
-          <TableCell>
-            <AccessKeyActionMenu
-              label={eachKey.label}
-              objectStorageKey={eachKey}
-              openDrawer={openDrawer}
-              openRevokeDialog={openRevokeDialog}
-            />
-          </TableCell>
-        </TableRow>
+      {objectStorageKeys.map((eachKey: ObjectStorageKey, index) => (
+        <AccessKeyTableRow
+          key={index}
+          openDrawer={openDrawer}
+          openRevokeDialog={openRevokeDialog}
+          setHostNames={setHostNames}
+          setShowHostNamesDrawers={setShowHostNamesDrawers}
+          storageKeyData={eachKey}
+        />
       ))}
     </>
   );
 };
-
-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 null;
+  }
+
+  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(() =>