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 FF enabled without MSW. ([#10189](https://github.com/linode/manager/pull/10189))

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

@@ -0,0 +1,85 @@
+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';
+
+// Define the props type for AccessKeyTableRow
+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

@@ -169,10 +169,12 @@ export const OMC_AccessKeyDrawer = (props: AccessKeyDrawerProps) => {
     validationSchema: createObjectStorageKeysSchema,
   });
 
+  // @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/Profile/SecretTokenDialog/SecretTokenDialog.tsx

@@ -71,43 +71,54 @@ export const SecretTokenDialog = (props: Props) => {
         spacingTop={8}
         variant="warning"
       />
-      {isObjMultiClusterEnabled && (
-        <div>
-          <CopyAll
-            text={
-              objectStorageKey?.regions
-                .map(
-                  (region) => `S3 Endpoint: ${region.id}: ${region.s3_endpoint}`
-                )
-                .join('\n') ?? ''
-            }
-          />
-        </div>
-      )}
-      {isObjMultiClusterEnabled && (
-        <Box
-          sx={(theme) => ({
-            '.copyIcon': {
-              marginRight: 0,
-              paddingRight: 0,
-            },
-            backgroundColor: theme.bg.main,
-            border: `1px solid ${theme.color.grey3}`,
-            borderColor: theme.name === 'light' ? '#ccc' : '#222',
-            padding: theme.spacing(1),
-          })}
-        >
-          {objectStorageKey?.regions.map((region, index) => (
-            <CopyableTextField
-              hideLabel
-              key={index}
-              label="Create a Filesystem"
-              sx={{ border: 'none', maxWidth: '100%' }}
-              value={`S3 Endpoint: ${region.id}: ${region.s3_endpoint}`}
+      {/* @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. */}
+      {isObjMultiClusterEnabled &&
+        objectStorageKey &&
+        objectStorageKey?.regions?.length > 0 && (
+          <div>
+            <CopyAll
+              text={
+                objectStorageKey?.regions
+                  .map(
+                    (region) =>
+                      `S3 Endpoint: ${region.id}: ${region.s3_endpoint}`
+                  )
+                  .join('\n') ?? ''
+              }
             />
-          ))}
-        </Box>
-      )}
+          </div>
+        )}
+      {/* @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. */}
+      {isObjMultiClusterEnabled &&
+        objectStorageKey &&
+        objectStorageKey?.regions?.length > 0 && (
+          <Box
+            sx={(theme) => ({
+              '.copyIcon': {
+                marginRight: 0,
+                paddingRight: 0,
+              },
+              backgroundColor: theme.bg.main,
+              border: `1px solid ${theme.color.grey3}`,
+              borderColor: theme.name === 'light' ? '#ccc' : '#222',
+              padding: theme.spacing(1),
+            })}
+          >
+            {objectStorageKey?.regions.map((region, index) => (
+              <CopyableTextField
+                hideLabel
+                key={index}
+                label="Create a Filesystem"
+                sx={{ border: 'none', maxWidth: '100%' }}
+                value={`S3 Endpoint: ${region.id}: ${region.s3_endpoint}`}
+              />
+            ))}
+          </Box>
+        )}
       {objectStorageKey ? (
         <>
           <Box marginBottom="16px">