From 8c6f1293c4c60fcdfb3e3401f4cf23033be6bb8d Mon Sep 17 00:00:00 2001 From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> Date: Tue, 13 Aug 2024 16:20:36 -0400 Subject: [PATCH] =?UTF-8?q?upcoming:=20[M3-8368]=20=E2=80=93=20Add=20"Encr?= =?UTF-8?q?yption"=20column=20to=20Volumes=20landing=20page=20(#10775)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...r-10775-upcoming-features-1723502865486.md | 5 +++ packages/manager/src/factories/volume.ts | 7 +++- .../features/Volumes/VolumeTableRow.test.tsx | 36 ++++++++++++++++--- .../src/features/Volumes/VolumeTableRow.tsx | 17 +++++++-- .../src/features/Volumes/VolumesLanding.tsx | 12 +++++++ 5 files changed, 70 insertions(+), 7 deletions(-) create mode 100644 packages/manager/.changeset/pr-10775-upcoming-features-1723502865486.md diff --git a/packages/manager/.changeset/pr-10775-upcoming-features-1723502865486.md b/packages/manager/.changeset/pr-10775-upcoming-features-1723502865486.md new file mode 100644 index 00000000000..de0fb24aa8b --- /dev/null +++ b/packages/manager/.changeset/pr-10775-upcoming-features-1723502865486.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Add "Encryption" column to Volumes landing table ([#10775](https://github.com/linode/manager/pull/10775)) diff --git a/packages/manager/src/factories/volume.ts b/packages/manager/src/factories/volume.ts index 5a127893af9..710b3694871 100644 --- a/packages/manager/src/factories/volume.ts +++ b/packages/manager/src/factories/volume.ts @@ -1,8 +1,13 @@ -import { Volume, VolumeRequestPayload } from '@linode/api-v4/lib/volumes/types'; import Factory from 'src/factories/factoryProxy'; +import type { + Volume, + VolumeRequestPayload, +} from '@linode/api-v4/lib/volumes/types'; + export const volumeFactory = Factory.Sync.makeFactory({ created: '2018-01-01', + encryption: 'enabled', filesystem_path: '/mnt', hardware_type: 'nvme', id: Factory.each((id) => id), diff --git a/packages/manager/src/features/Volumes/VolumeTableRow.test.tsx b/packages/manager/src/features/Volumes/VolumeTableRow.test.tsx index f4895c4dfc1..b2da52e9888 100644 --- a/packages/manager/src/features/Volumes/VolumeTableRow.test.tsx +++ b/packages/manager/src/features/Volumes/VolumeTableRow.test.tsx @@ -3,12 +3,13 @@ import * as React from 'react'; import { notificationFactory, volumeFactory } from 'src/factories'; import { makeResourcePage } from 'src/mocks/serverHandlers'; -import { http, HttpResponse, server } from 'src/mocks/testServer'; +import { HttpResponse, http, server } from 'src/mocks/testServer'; import { renderWithTheme, wrapWithTableBody } from 'src/utilities/testHelpers'; -import { ActionHandlers } from './VolumesActionMenu'; import { VolumeTableRow } from './VolumeTableRow'; +import type { ActionHandlers } from './VolumesActionMenu'; + const attachedVolume = volumeFactory.build({ linode_id: 0, linode_label: 'thisLinode', @@ -65,7 +66,7 @@ describe('Volume table row', () => { expect(getByText('Attach')); }); - it('should should render an upgrade chip if the volume is eligible for an upgrade', async () => { + it('should render an upgrade chip if the volume is eligible for an upgrade', async () => { const volume = volumeFactory.build({ id: 5 }); const notification = notificationFactory.build({ entity: { id: volume.id, type: 'volume' }, @@ -85,7 +86,7 @@ describe('Volume table row', () => { await findByText('UPGRADE TO NVMe'); }); - it('should should render an "UPGRADE PENDING" chip if the volume upgrade is imminent', async () => { + it('should render an "UPGRADE PENDING" chip if the volume upgrade is imminent', async () => { const volume = volumeFactory.build({ id: 5 }); const notification = notificationFactory.build({ entity: { id: volume.id, type: 'volume' }, @@ -104,6 +105,33 @@ describe('Volume table row', () => { await findByText('UPGRADE PENDING'); }); + + /* @TODO BSE: Remove feature flagging/conditionality once BSE is fully rolled out */ + it('should render the encryption status if isBlockStorageEncryptionFeatureEnabled is true', async () => { + const volume = volumeFactory.build(); + + const { findByText } = renderWithTheme( + wrapWithTableBody( + + ) + ); + + await findByText('Encrypted'); + }); + + it('should not render the encryption status if isBlockStorageEncryptionFeatureEnabled is false', async () => { + const volume = volumeFactory.build(); + + const { queryByText } = renderWithTheme( + wrapWithTableBody() + ); + + expect(queryByText('Encrypted')).toBeNull(); + }); }); describe('Volume table row - for linodes detail page', () => { diff --git a/packages/manager/src/features/Volumes/VolumeTableRow.tsx b/packages/manager/src/features/Volumes/VolumeTableRow.tsx index 8a43fe50fb8..25094ad7042 100644 --- a/packages/manager/src/features/Volumes/VolumeTableRow.tsx +++ b/packages/manager/src/features/Volumes/VolumeTableRow.tsx @@ -18,8 +18,9 @@ import { getEventProgress, volumeStatusIconMap, } from './utils'; -import { ActionHandlers, VolumesActionMenu } from './VolumesActionMenu'; +import { VolumesActionMenu } from './VolumesActionMenu'; +import type { ActionHandlers } from './VolumesActionMenu'; import type { Volume } from '@linode/api-v4'; export const useStyles = makeStyles()({ @@ -31,13 +32,19 @@ export const useStyles = makeStyles()({ interface Props { handlers: ActionHandlers; + isBlockStorageEncryptionFeatureEnabled?: boolean; isDetailsPageRow?: boolean; volume: Volume; } export const VolumeTableRow = React.memo((props: Props) => { const { classes } = useStyles(); - const { handlers, isDetailsPageRow, volume } = props; + const { + handlers, + isBlockStorageEncryptionFeatureEnabled, + isDetailsPageRow, + volume, + } = props; const history = useHistory(); @@ -94,6 +101,9 @@ export const VolumeTableRow = React.memo((props: Props) => { const regionLabel = regions?.find((r) => r.id === volume.region)?.label ?? volume.region; + const encryptionStatus = + volume.encryption === 'enabled' ? 'Encrypted' : 'Not Encrypted'; + return ( @@ -151,6 +161,9 @@ export const VolumeTableRow = React.memo((props: Props) => { )} )} + {isBlockStorageEncryptionFeatureEnabled && ( + {encryptionStatus} + )} { }, filter ); + + const { + isBlockStorageEncryptionFeatureEnabled, + } = useIsBlockStorageEncryptionFeatureEnabled(); + const [selectedVolumeId, setSelectedVolumeId] = React.useState(); const [isDetailsDrawerOpen, setIsDetailsDrawerOpen] = React.useState( Boolean(location.state?.volume) @@ -233,6 +239,9 @@ export const VolumesLanding = () => { Size Attached To + {isBlockStorageEncryptionFeatureEnabled && ( + Encryption + )} @@ -252,6 +261,9 @@ export const VolumesLanding = () => { handleResize: () => handleResize(volume), handleUpgrade: () => handleUpgrade(volume), }} + isBlockStorageEncryptionFeatureEnabled={ + isBlockStorageEncryptionFeatureEnabled + } key={volume.id} volume={volume} />