diff --git a/packages/manager/.changeset/pr-10213-upcoming-features-1708540968499.md b/packages/manager/.changeset/pr-10213-upcoming-features-1708540968499.md new file mode 100644 index 00000000000..abba4498a36 --- /dev/null +++ b/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)) diff --git a/packages/manager/cypress/e2e/core/objectStorage/access-keys.smoke.spec.ts b/packages/manager/cypress/e2e/core/objectStorage/access-keys.smoke.spec.ts index cc1f74b33b7..56383377eb5 100644 --- a/packages/manager/cypress/e2e/core/objectStorage/access-keys.smoke.spec.ts +++ b/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}` ); }); }); diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/LimitedAccessControls.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/LimitedAccessControls.tsx index 04d70a725cc..5a1c89814b1 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/LimitedAccessControls.tsx +++ b/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 ( <> ({ - marginTop: theme.spacing(0.5), - marginBottom: theme.spacing(0.5), - })} control={ { 'Limited Access' ) } + sx={(theme) => ({ + marginBottom: theme.spacing(0.5), + marginTop: theme.spacing(0.5), + })} /> Limited access keys can list all buckets, regardless of access. They can diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/ViewPermissionsDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/ViewPermissionsDrawer.tsx index b6747755a1b..d2f37ca978a 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/ViewPermissionsDrawer.tsx +++ b/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 = (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 = (props) => { This access key has the following permissions: - null} - /> + {isObjMultiClusterEnabled ? ( + null} + /> + ) : ( + null} + /> + )} )} diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts index dc0496d1fe3..8bae0035f00 100644 --- a/packages/manager/src/mocks/serverHandlers.ts +++ b/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' },