upcoming: [M3-8020] – Add "Disk Encryption" section to Linode Rebuild modal

packages/manager/.changeset/pr-10549-upcoming-features-1718120005131.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Disk Encryption section to Linode Rebuild modal ([#10549](https://github.com/linode/manager/pull/10549))

packages/manager/src/components/AccessPanel/AccessPanel.tsx

@@ -1,10 +1,14 @@
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import {
   DISK_ENCRYPTION_GENERAL_DESCRIPTION,
   DISK_ENCRYPTION_UNAVAILABLE_IN_REGION_COPY,
+  ENCRYPT_DISK_DISABLED_REBUILD_DISTRIBUTED_REGION_REASON,
+  ENCRYPT_DISK_DISABLED_REBUILD_LKE_REASON,
+  ENCRYPT_DISK_REBUILD_DISTRIBUTED_COPY,
+  ENCRYPT_DISK_REBUILD_LKE_COPY,
+  ENCRYPT_DISK_REBUILD_STANDARD_COPY,
 } from 'src/components/DiskEncryption/constants';
 import { DiskEncryption } from 'src/components/DiskEncryption/DiskEncryption';
 import { useIsDiskEncryptionFeatureEnabled } from 'src/components/DiskEncryption/utils';
@@ -17,6 +21,8 @@ import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature
 import { Divider } from '../Divider';
 import UserSSHKeyPanel from './UserSSHKeyPanel';
 
+import type { Theme } from '@mui/material/styles';
+
 const PasswordInput = React.lazy(
   () => import('src/components/PasswordInput/PasswordInput')
 );
@@ -46,8 +52,11 @@ interface Props {
   handleChange: (value: string) => void;
   heading?: string;
   hideStrengthLabel?: boolean;
+  isInRebuildFlow?: boolean;
+  isLKELinode?: boolean;
   isOptional?: boolean;
   label?: string;
+  linodeIsInDistributedRegion?: boolean;
   password: null | string;
   passwordHelperText?: string;
   placeholder?: string;
@@ -69,8 +78,11 @@ export const AccessPanel = (props: Props) => {
     error,
     handleChange: _handleChange,
     hideStrengthLabel,
+    isInRebuildFlow,
+    isLKELinode,
     isOptional,
     label,
+    linodeIsInDistributedRegion,
     password,
     passwordHelperText,
     placeholder,
@@ -97,6 +109,48 @@ export const AccessPanel = (props: Props) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
     _handleChange(e.target.value);
 
+  const determineRebuildFlowDiskEncryptionDescription = ({
+    isLKELinode,
+    linodeIsInDistributedRegion,
+  }: {
+    isLKELinode: boolean | undefined;
+    linodeIsInDistributedRegion: boolean | undefined;
+  }) => {
+    if (isLKELinode) {
+      return ENCRYPT_DISK_REBUILD_LKE_COPY;
+    }
+
+    if (linodeIsInDistributedRegion) {
+      return ENCRYPT_DISK_REBUILD_DISTRIBUTED_COPY;
+    }
+
+    return ENCRYPT_DISK_REBUILD_STANDARD_COPY;
+  };
+
+  const determineEncryptDiskDisabledReason = ({
+    isLKELinode,
+    linodeIsInDistributedRegion,
+    regionSupportsDiskEncryption,
+  }: {
+    isLKELinode: boolean | undefined;
+    linodeIsInDistributedRegion: boolean | undefined;
+    regionSupportsDiskEncryption: boolean;
+  }) => {
+    if (isLKELinode) {
+      return ENCRYPT_DISK_DISABLED_REBUILD_LKE_REASON;
+    }
+
+    if (linodeIsInDistributedRegion) {
+      return ENCRYPT_DISK_DISABLED_REBUILD_DISTRIBUTED_REGION_REASON;
+    }
+
+    if (!regionSupportsDiskEncryption) {
+      return DISK_ENCRYPTION_UNAVAILABLE_IN_REGION_COPY;
+    }
+
+    return '';
+  };
+
   /**
    * Display the "Disk Encryption" section if:
    * 1) the feature is enabled
@@ -111,9 +165,24 @@ export const AccessPanel = (props: Props) => {
       <>
         <Divider spacingBottom={20} spacingTop={24} />
         <DiskEncryption
-          descriptionCopy={DISK_ENCRYPTION_GENERAL_DESCRIPTION}
-          disabled={!regionSupportsDiskEncryption}
-          disabledReason={DISK_ENCRYPTION_UNAVAILABLE_IN_REGION_COPY}
+          descriptionCopy={
+            isInRebuildFlow
+              ? determineRebuildFlowDiskEncryptionDescription({
+                  isLKELinode,
+                  linodeIsInDistributedRegion,
+                })
+              : DISK_ENCRYPTION_GENERAL_DESCRIPTION
+          }
+          disabled={
+            !regionSupportsDiskEncryption ||
+            isLKELinode ||
+            linodeIsInDistributedRegion
+          }
+          disabledReason={determineEncryptDiskDisabledReason({
+            isLKELinode,
+            linodeIsInDistributedRegion,
+            regionSupportsDiskEncryption,
+          })}
           isEncryptDiskChecked={diskEncryptionEnabled ?? false}
           onChange={() => toggleDiskEncryptionEnabled()}
         />

packages/manager/src/components/DiskEncryption/constants.tsx

@@ -28,3 +28,18 @@ export const UNENCRYPTED_STANDARD_LINODE_GUIDANCE_COPY =
 
 export const DISK_ENCRYPTION_IMAGES_CAVEAT_COPY =
   'Virtual Machine Images are not encrypted.';
+
+export const ENCRYPT_DISK_DISABLED_REBUILD_LKE_REASON =
+  'The Encrypt Disk setting cannot be changed for a Linode attached to a node pool.';
+
+export const ENCRYPT_DISK_DISABLED_REBUILD_DISTRIBUTED_REGION_REASON =
+  'The Encrypt Disk setting cannot be changed for distributed instances.';
+
+export const ENCRYPT_DISK_REBUILD_STANDARD_COPY =
+  'Secure this Linode using data at rest encryption.';
+
+export const ENCRYPT_DISK_REBUILD_LKE_COPY =
+  'Secure this Linode using data at rest encryption. The disk encryption setting for Linodes added to a node pool will not be changed after rebuild.';
+
+export const ENCRYPT_DISK_REBUILD_DISTRIBUTED_COPY =
+  'Distributed Compute Instances are secured using disk encryption.';

packages/manager/src/features/Events/factories/tax.tsx

@@ -4,6 +4,10 @@ import type { PartialEventMap } from '../types';
 
 export const tax: PartialEventMap<'tax'> = {
   tax_id_invalid: {
-    notification: () => <>Tax Identification Number format is <strong>invalid</strong>.</>,
+    notification: () => (
+      <>
+        Tax Identification Number format is <strong>invalid</strong>.
+      </>
+    ),
   },
 };

packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx

@@ -2,17 +2,21 @@ import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Dialog } from 'src/components/Dialog/Dialog';
-import EnhancedSelect, { Item } from 'src/components/EnhancedSelect/Select';
+import EnhancedSelect from 'src/components/EnhancedSelect/Select';
 import { Notice } from 'src/components/Notice/Notice';
+import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils';
 import { Typography } from 'src/components/Typography';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
+import { useRegionsQuery } from 'src/queries/regions/regions';
 
 import { HostMaintenanceError } from '../HostMaintenanceError';
 import { LinodePermissionsError } from '../LinodePermissionsError';
 import { RebuildFromImage } from './RebuildFromImage';
 import { RebuildFromStackScript } from './RebuildFromStackScript';
 
+import type { Item } from 'src/components/EnhancedSelect/Select';
+
 interface Props {
   linodeId: number | undefined;
   onClose: () => void;
@@ -42,6 +46,8 @@ export const LinodeRebuildDialog = (props: Props) => {
     linodeId !== undefined && open
   );
 
+  const { data: regionsData } = useRegionsQuery();
+
   const isReadOnly =
     Boolean(profile?.restricted) &&
     grants?.linode.find((grant) => grant.id === linodeId)?.permissions ===
@@ -51,11 +57,24 @@ export const LinodeRebuildDialog = (props: Props) => {
   const unauthorized = isReadOnly;
   const disabled = hostMaintenance || unauthorized;
 
+  // LDE-related checks
+  const isEncrypted = linode?.disk_encryption === 'enabled';
+  const isLKELinode = Boolean(linode?.lke_cluster_id);
+  const linodeIsInDistributedRegion = getIsDistributedRegion(
+    regionsData ?? [],
+    linode?.region ?? ''
+  );
+
   const theme = useTheme();
 
   const [mode, setMode] = React.useState<MODES>('fromImage');
   const [rebuildError, setRebuildError] = React.useState<string>('');
 
+  const [
+    diskEncryptionEnabled,
+    setDiskEncryptionEnabled,
+  ] = React.useState<boolean>(isEncrypted);
+
   const onExitDrawer = () => {
     setRebuildError('');
     setMode('fromImage');
@@ -65,6 +84,10 @@ export const LinodeRebuildDialog = (props: Props) => {
     setRebuildError(status);
   };
 
+  const toggleDiskEncryptionEnabled = () => {
+    setDiskEncryptionEnabled(!diskEncryptionEnabled);
+  };
+
   return (
     <Dialog
       TransitionProps={{ onExited: onExitDrawer }}
@@ -108,33 +131,47 @@ export const LinodeRebuildDialog = (props: Props) => {
       {mode === 'fromImage' && (
         <RebuildFromImage
           disabled={disabled}
+          diskEncryptionEnabled={diskEncryptionEnabled}
           handleRebuildError={handleRebuildError}
+          isLKELinode={isLKELinode}
           linodeId={linodeId ?? -1}
+          linodeIsInDistributedRegion={linodeIsInDistributedRegion}
           linodeLabel={linode?.label}
           linodeRegion={linode?.region}
           onClose={onClose}
           passwordHelperText={passwordHelperText}
+          toggleDiskEncryptionEnabled={toggleDiskEncryptionEnabled}
         />
       )}
       {mode === 'fromCommunityStackScript' && (
         <RebuildFromStackScript
           disabled={disabled}
+          diskEncryptionEnabled={diskEncryptionEnabled}
           handleRebuildError={handleRebuildError}
+          isLKELinode={isLKELinode}
           linodeId={linodeId ?? -1}
+          linodeIsInDistributedRegion={linodeIsInDistributedRegion}
           linodeLabel={linode?.label}
+          linodeRegion={linode?.region}
           onClose={onClose}
           passwordHelperText={passwordHelperText}
+          toggleDiskEncryptionEnabled={toggleDiskEncryptionEnabled}
           type="community"
         />
       )}
       {mode === 'fromAccountStackScript' && (
         <RebuildFromStackScript
           disabled={disabled}
+          diskEncryptionEnabled={diskEncryptionEnabled}
           handleRebuildError={handleRebuildError}
+          isLKELinode={isLKELinode}
           linodeId={linodeId ?? -1}
+          linodeIsInDistributedRegion={linodeIsInDistributedRegion}
           linodeLabel={linode?.label}
+          linodeRegion={linode?.region}
           onClose={onClose}
           passwordHelperText={passwordHelperText}
+          toggleDiskEncryptionEnabled={toggleDiskEncryptionEnabled}
           type="account"
         />
       )}

packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import * as React from 'react';
 
 import { reactRouterProps } from 'src/__data__/reactRouterProps';
-import { wrapWithTheme } from 'src/utilities/testHelpers';
+import { renderWithTheme, wrapWithTheme } from 'src/utilities/testHelpers';
 
 import { RebuildFromImage } from './RebuildFromImage';
 
@@ -11,18 +11,66 @@ vi.mock('src/components/EnhancedSelect/Select');
 
 const props = {
   disabled: false,
+  diskEncryptionEnabled: true,
   handleRebuildError: vi.fn(),
+  isLKELinode: false,
   linodeId: 1234,
+  linodeIsInDistributedRegion: false,
   onClose: vi.fn(),
   passwordHelperText: '',
+  toggleDiskEncryptionEnabled: vi.fn(),
   ...reactRouterProps,
 };
 
+const diskEncryptionEnabledMock = vi.hoisted(() => {
+  return {
+    useIsDiskEncryptionFeatureEnabled: vi.fn(),
+  };
+});
+
 describe('RebuildFromImage', () => {
+  vi.mock('src/components/DiskEncryption/utils.ts', async () => {
+    const actual = await vi.importActual<any>(
+      'src/components/DiskEncryption/utils.ts'
+    );
+    return {
+      ...actual,
+      __esModule: true,
+      useIsDiskEncryptionFeatureEnabled: diskEncryptionEnabledMock.useIsDiskEncryptionFeatureEnabled.mockImplementation(
+        () => {
+          return {
+            isDiskEncryptionFeatureEnabled: false, // indicates the feature flag is off or account capability is absent
+          };
+        }
+      ),
+    };
+  });
+
   it('renders a SelectImage panel', () => {
     const { queryByText } = render(
       wrapWithTheme(<RebuildFromImage {...props} />)
     );
     expect(queryByText('Select Image')).toBeInTheDocument();
   });
+
+  // @TODO LDE: Remove feature flagging/conditionality once LDE is fully rolled out
+  it('does not render a "Disk Encryption" section when the Disk Encryption feature is disabled', () => {
+    const { queryByText } = renderWithTheme(<RebuildFromImage {...props} />);
+
+    expect(queryByText('Encrypt Disk')).not.toBeInTheDocument();
+  });
+
+  it('renders a "Disk Encryption" section when the Disk Encryption feature is enabled', () => {
+    diskEncryptionEnabledMock.useIsDiskEncryptionFeatureEnabled.mockImplementationOnce(
+      () => {
+        return {
+          isDiskEncryptionFeatureEnabled: true,
+        };
+      }
+    );
+
+    const { queryByText } = renderWithTheme(<RebuildFromImage {...props} />);
+
+    expect(queryByText('Encrypt Disk')).toBeInTheDocument();
+  });
 });