upcoming: [M3-7733] - Access key "Permissions" drawer ARIA label needs to be updated for OBJ Multicluster

packages/manager/.changeset/pr-10213-upcoming-features-1708540968499.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Ensure correct ARIA labels for permissions are displayed in Access Key "Permissions" drawer when OBJ Multicluster is enabled ([#10213](https://github.com/linode/manager/pull/10213))

packages/manager/cypress/e2e/core/objectStorage/access-keys.smoke.spec.ts

@@ -394,7 +394,7 @@ describe('object storage access keys smoke tests', () => {
           mockBuckets.forEach((mockBucket) => {
             // TODO M3-7733 Update this selector when ARIA label is fixed.
             cy.findByLabelText(
-              `This token has read-only access for -${mockBucket.label}`
+              `This token has read-only access for ${mockRegion.id}-${mockBucket.label}`
             );
           });
         });

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

@@ -3,10 +3,10 @@ import * as React from 'react';
 
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Toggle } from 'src/components/Toggle/Toggle';
+import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useFlags } from 'src/hooks/useFlags';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 
 import { AccessTable } from './AccessTable';
@@ -52,10 +52,6 @@ export const LimitedAccessControls = React.memo((props: Props) => {
   return (
     <>
       <FormControlLabel
-        sx={(theme) => ({
-          marginTop: theme.spacing(0.5),
-          marginBottom: theme.spacing(0.5),
-        })}
         control={
           <Toggle
             checked={checked}
@@ -74,6 +70,10 @@ export const LimitedAccessControls = React.memo((props: Props) => {
             'Limited Access'
           )
         }
+        sx={(theme) => ({
+          marginBottom: theme.spacing(0.5),
+          marginTop: theme.spacing(0.5),
+        })}
       />
       <Typography>
         Limited access keys can list all buckets, regardless of access. They can

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

@@ -3,8 +3,12 @@ import * as React from 'react';
 
 import { Drawer } from 'src/components/Drawer';
 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 { AccessTable } from './AccessTable';
+import { BucketPermissionsTable } from './BucketPermissionsTable';
 
 export interface Props {
   objectStorageKey: ObjectStorageKey | null;
@@ -17,6 +21,15 @@ type CombinedProps = Props;
 export const ViewPermissionsDrawer: React.FC<CombinedProps> = (props) => {
   const { objectStorageKey, onClose, open } = props;
 
+  const flags = useFlags();
+  const { account } = useAccountManagement();
+
+  const isObjMultiClusterEnabled = isFeatureEnabled(
+    'Object Storage Access Key Regions',
+    Boolean(flags.objMultiCluster),
+    account?.capabilities ?? []
+  );
+
   if (objectStorageKey === null) {
     return null;
   }
@@ -37,12 +50,21 @@ export const ViewPermissionsDrawer: React.FC<CombinedProps> = (props) => {
           <Typography>
             This access key has the following permissions:
           </Typography>
-          <AccessTable
-            bucket_access={objectStorageKey.bucket_access}
-            checked={objectStorageKey.limited}
-            mode={'viewing'}
-            updateScopes={() => null}
-          />
+          {isObjMultiClusterEnabled ? (
+            <BucketPermissionsTable
+              bucket_access={objectStorageKey.bucket_access}
+              checked={objectStorageKey.limited}
+              mode="viewing"
+              updateScopes={() => null}
+            />
+          ) : (
+            <AccessTable
+              bucket_access={objectStorageKey.bucket_access}
+              checked={objectStorageKey.limited}
+              mode="viewing"
+              updateScopes={() => null}
+            />
+          )}
         </>
       )}
     </Drawer>

packages/manager/src/mocks/serverHandlers.ts

@@ -1045,6 +1045,21 @@ export const handlers = [
             ],
           }),
           ...objectStorageKeyFactory.buildList(1, {
+            bucket_access: [
+              {
+                bucket_name: 'test007',
+                cluster: 'us-east-1',
+                permissions: 'read_only',
+                region: 'us-east',
+              },
+              {
+                bucket_name: 'test001',
+                cluster: 'nl-ams-1',
+                permissions: 'read_write',
+                region: 'nl-ams',
+              },
+            ],
+            limited: true,
             regions: [
               { id: 'us-east', s3_endpoint: 'us-east.com' },
               { id: 'nl-ams', s3_endpoint: 'nl-ams.com' },