upcoming: [M3-8368] – Add "Encryption" column to Volumes landing page (…

…#10775)

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))

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<Volume>({
   created: '2018-01-01',
+  encryption: 'enabled',
   filesystem_path: '/mnt',
   hardware_type: 'nvme',
   id: Factory.each((id) => id),

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(
+        <VolumeTableRow
+          handlers={handlers}
+          isBlockStorageEncryptionFeatureEnabled
+          volume={volume}
+        />
+      )
+    );
+
+    await findByText('Encrypted');
+  });
+
+  it('should not render the encryption status if isBlockStorageEncryptionFeatureEnabled is false', async () => {
+    const volume = volumeFactory.build();
+
+    const { queryByText } = renderWithTheme(
+      wrapWithTableBody(<VolumeTableRow handlers={handlers} volume={volume} />)
+    );
+
+    expect(queryByText('Encrypted')).toBeNull();
+  });
 });
 
 describe('Volume table row - for linodes detail page', () => {

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 (
     <TableRow data-qa-volume-cell={volume.id} key={`volume-row-${volume.id}`}>
       <TableCell data-qa-volume-cell-label={volume.label}>
@@ -151,6 +161,9 @@ export const VolumeTableRow = React.memo((props: Props) => {
           )}
         </TableCell>
       )}
+      {isBlockStorageEncryptionFeatureEnabled && (
+        <TableCell noWrap>{encryptionStatus}</TableCell>
+      )}
       <TableCell actionCell>
         <VolumesActionMenu
           handlers={handlers}

packages/manager/src/features/Volumes/VolumesLanding.tsx

@@ -5,6 +5,7 @@ import { debounce } from 'throttle-debounce';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { useIsBlockStorageEncryptionFeatureEnabled } from 'src/components/Encryption/utils';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { IconButton } from 'src/components/IconButton';
 import { InputAdornment } from 'src/components/InputAdornment';
@@ -74,6 +75,11 @@ export const VolumesLanding = () => {
     },
     filter
   );
+
+  const {
+    isBlockStorageEncryptionFeatureEnabled,
+  } = useIsBlockStorageEncryptionFeatureEnabled();
+
   const [selectedVolumeId, setSelectedVolumeId] = React.useState<number>();
   const [isDetailsDrawerOpen, setIsDetailsDrawerOpen] = React.useState(
     Boolean(location.state?.volume)
@@ -233,6 +239,9 @@ export const VolumesLanding = () => {
               Size
             </TableSortCell>
             <TableCell>Attached To</TableCell>
+            {isBlockStorageEncryptionFeatureEnabled && (
+              <TableCell>Encryption</TableCell>
+            )}
             <TableCell></TableCell>
           </TableRow>
         </TableHead>
@@ -252,6 +261,9 @@ export const VolumesLanding = () => {
                 handleResize: () => handleResize(volume),
                 handleUpgrade: () => handleUpgrade(volume),
               }}
+              isBlockStorageEncryptionFeatureEnabled={
+                isBlockStorageEncryptionFeatureEnabled
+              }
               key={volume.id}
               volume={volume}
             />