From 70cf3fb6ee3bc6ae5875e4eb25cd51d16f04303d Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 21 Feb 2024 12:30:09 -0600 Subject: [PATCH 1/8] upcoming: [M3-7733] - Access key "Permissions" drawer ARIA label needs to be updated for OBJ Multicluster --- .../LimitedAccessControls.tsx | 10 +++--- .../ViewPermissionsDrawer.tsx | 34 +++++++++++++++---- packages/manager/src/mocks/serverHandlers.ts | 15 ++++++++ 3 files changed, 48 insertions(+), 11 deletions(-) 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..fa9a8af3f13 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' }, From 3d03dba5c74d0878bf58c0d1cb118ab61a00bf29 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 21 Feb 2024 12:42:48 -0600 Subject: [PATCH 2/8] Added changeset: Update access key Permissions drawer ARIA label for OBJ Multicluster. --- .../.changeset/pr-10213-upcoming-features-1708540968499.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10213-upcoming-features-1708540968499.md 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..162a112751a --- /dev/null +++ b/packages/manager/.changeset/pr-10213-upcoming-features-1708540968499.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Update access key "Permissions" drawer ARIA label for OBJ Multicluster. ([#10213](https://github.com/linode/manager/pull/10213)) From b0b1bead9b6239be13de6d70162e5926f731bf36 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 21 Feb 2024 15:07:23 -0600 Subject: [PATCH 3/8] Update access-keys.smoke.spec.ts --- .../cypress/e2e/core/objectStorage/access-keys.smoke.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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..257d33603ef 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}` ); }); }); From b5977bfa8546d530309b9a45e89333893c7be80e Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 21 Feb 2024 15:30:50 -0600 Subject: [PATCH 4/8] Update packages/manager/cypress/e2e/core/objectStorage/access-keys.smoke.spec.ts Co-authored-by: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com> --- .../cypress/e2e/core/objectStorage/access-keys.smoke.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 257d33603ef..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 -${mockRegion.id}-${mockBucket.label}` + `This token has read-only access for ${mockRegion.id}-${mockBucket.label}` ); }); }); From ce15f83fb44442770821f34cb95ab07e30c66a58 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Thu, 22 Feb 2024 06:40:53 -0600 Subject: [PATCH 5/8] upcoming: [M3-7733] - Secret Key modal requires scrolling to see Access Key and Secret Key --- .../SecretTokenDialog/SecretTokenDialog.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx b/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx index f49b977a3a0..cd59f13802e 100644 --- a/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx +++ b/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx @@ -59,6 +59,11 @@ export const SecretTokenDialog = (props: Props) => { return ( ({ + '.MuiPaper-root': { + overflow: 'hidden', + }, + })} actions={actions} disableEscapeKeyDown fullWidth @@ -108,14 +113,13 @@ export const SecretTokenDialog = (props: Props) => { objectStorageKey?.regions?.length > 0 && ( ({ - '.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), + borderColor: + theme.name === 'light' ? theme.color.grey3 : theme.color.black, + boxSizing: 'border-box', + maxHeight: '200px', + overflowY: 'auto', })} > {objectStorageKey?.regions.map((region, index) => ( From 3e9d74a140df86b7f34d114194dfeb8131b9fa01 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Thu, 22 Feb 2024 06:43:25 -0600 Subject: [PATCH 6/8] Revert "upcoming: [M3-7733] - Secret Key modal requires scrolling to see Access Key and Secret Key" This reverts commit ce15f83fb44442770821f34cb95ab07e30c66a58. --- .../SecretTokenDialog/SecretTokenDialog.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx b/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx index cd59f13802e..f49b977a3a0 100644 --- a/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx +++ b/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx @@ -59,11 +59,6 @@ export const SecretTokenDialog = (props: Props) => { return ( ({ - '.MuiPaper-root': { - overflow: 'hidden', - }, - })} actions={actions} disableEscapeKeyDown fullWidth @@ -113,13 +108,14 @@ export const SecretTokenDialog = (props: Props) => { objectStorageKey?.regions?.length > 0 && ( ({ + '.copyIcon': { + marginRight: 0, + paddingRight: 0, + }, backgroundColor: theme.bg.main, border: `1px solid ${theme.color.grey3}`, - borderColor: - theme.name === 'light' ? theme.color.grey3 : theme.color.black, - boxSizing: 'border-box', - maxHeight: '200px', - overflowY: 'auto', + borderColor: theme.name === 'light' ? '#ccc' : '#222', + padding: theme.spacing(1), })} > {objectStorageKey?.regions.map((region, index) => ( From 226be00e8e2e303ac60236b6f343f63fc29b66c6 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Thu, 22 Feb 2024 06:44:09 -0600 Subject: [PATCH 7/8] Update packages/manager/.changeset/pr-10213-upcoming-features-1708540968499.md Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> --- .../.changeset/pr-10213-upcoming-features-1708540968499.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/.changeset/pr-10213-upcoming-features-1708540968499.md b/packages/manager/.changeset/pr-10213-upcoming-features-1708540968499.md index 162a112751a..abba4498a36 100644 --- a/packages/manager/.changeset/pr-10213-upcoming-features-1708540968499.md +++ b/packages/manager/.changeset/pr-10213-upcoming-features-1708540968499.md @@ -2,4 +2,4 @@ "@linode/manager": Upcoming Features --- -Update access key "Permissions" drawer ARIA label for OBJ Multicluster. ([#10213](https://github.com/linode/manager/pull/10213)) +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)) From cd3d5247918462f702a525142a8a8e82edbed651 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Thu, 22 Feb 2024 06:45:04 -0600 Subject: [PATCH 8/8] PR - Feedback - @DevDW --- .../ObjectStorage/AccessKeyLanding/ViewPermissionsDrawer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/ViewPermissionsDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/ViewPermissionsDrawer.tsx index fa9a8af3f13..d2f37ca978a 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/ViewPermissionsDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/ViewPermissionsDrawer.tsx @@ -54,14 +54,14 @@ export const ViewPermissionsDrawer: React.FC = (props) => { null} /> ) : ( null} /> )}