upcoming: [M3-8074] – Add "Disk Encryption" section to Linode Create …

…flow (#10462)

packages/api-v4/.changeset/pr-10462-changed-1715896838291.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+Add Disk Encryption to AccountCapability type and region Capabilities type ([#10462](https://github.com/linode/manager/pull/10462))

packages/api-v4/src/account/types.ts

@@ -63,6 +63,7 @@ export type AccountCapability =
   | 'Akamai Cloud Load Balancer'
   | 'Block Storage'
   | 'Cloud Firewall'
+  | 'Disk Encryption'
   | 'Kubernetes'
   | 'Linodes'
   | 'LKE HA Control Planes'

packages/api-v4/src/regions/types.ts

@@ -5,6 +5,7 @@ export type Capabilities =
   | 'Block Storage'
   | 'Block Storage Migrations'
   | 'Cloud Firewall'
+  | 'Disk Encryption'
   | 'GPU Linodes'
   | 'Kubernetes'
   | 'Linodes'

packages/manager/.changeset/pr-10462-tests-1716303824484.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add Cypress test coverage for Disk Encryption in Linode Create flow ([#10462](https://github.com/linode/manager/pull/10462))

packages/manager/.changeset/pr-10462-upcoming-features-1715896941491.md

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

packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts

@@ -19,6 +19,7 @@ import {
   VLANFactory,
   LinodeConfigInterfaceFactory,
   LinodeConfigInterfaceFactoryWithVPC,
+  accountFactory,
 } from '@src/factories';
 import { authenticate } from 'support/api/authentication';
 import { cleanUp } from 'support/util/cleanup';
@@ -44,8 +45,13 @@ import {
   mockGetFeatureFlagClientstream,
 } from 'support/intercepts/feature-flags';
 import { makeFeatureFlagData } from 'support/util/feature-flags';
+import {
+  checkboxTestId,
+  headerTestId,
+} from 'src/components/DiskEncryption/DiskEncryption';
 
 import type { Config, VLAN, Disk, Region } from '@linode/api-v4';
+import { mockGetAccount } from 'support/intercepts/account';
 
 const mockRegions: Region[] = [
   regionFactory.build({
@@ -511,4 +517,74 @@ describe('create linode', () => {
       containsVisible(`eth2 – VPC: ${mockVPC.label}`);
     });
   });
+
+  it('should not have a "Disk Encryption" section visible if the feature flag is off and user does not have capability', () => {
+    // Mock feature flag -- @TODO LDE: Remove feature flag once LDE is fully rolled out
+    mockAppendFeatureFlags({
+      linodeDiskEncryption: makeFeatureFlagData(false),
+    }).as('getFeatureFlags');
+    mockGetFeatureFlagClientstream().as('getClientStream');
+
+    // Mock account response
+    const mockAccount = accountFactory.build({
+      capabilities: ['Linodes'],
+    });
+
+    mockGetAccount(mockAccount).as('getAccount');
+
+    // intercept request
+    cy.visitWithLogin('/linodes/create');
+    cy.wait(['@getFeatureFlags', '@getClientStream', '@getAccount']);
+
+    // Check if section is visible
+    cy.get(`[data-testid=${headerTestId}]`).should('not.exist');
+  });
+
+  it('should have a "Disk Encryption" section visible if feature flag is on and user has the capability', () => {
+    // Mock feature flag -- @TODO LDE: Remove feature flag once LDE is fully rolled out
+    mockAppendFeatureFlags({
+      linodeDiskEncryption: makeFeatureFlagData(true),
+    }).as('getFeatureFlags');
+    mockGetFeatureFlagClientstream().as('getClientStream');
+
+    // Mock account response
+    const mockAccount = accountFactory.build({
+      capabilities: ['Linodes', 'Disk Encryption'],
+    });
+
+    const mockRegion = regionFactory.build({
+      capabilities: ['Linodes', 'Disk Encryption'],
+    });
+
+    const mockRegionWithoutDiskEncryption = regionFactory.build({
+      capabilities: ['Linodes'],
+    });
+
+    const mockRegions = [mockRegion, mockRegionWithoutDiskEncryption];
+
+    mockGetAccount(mockAccount).as('getAccount');
+    mockGetRegions(mockRegions);
+
+    // intercept request
+    cy.visitWithLogin('/linodes/create');
+    cy.wait(['@getFeatureFlags', '@getClientStream', '@getAccount']);
+
+    // Check if section is visible
+    cy.get(`[data-testid="${headerTestId}"]`).should('exist');
+
+    // "Encrypt Disk" checkbox should be disabled if a region that does not support LDE is selected
+    ui.regionSelect.find().click();
+    ui.select
+      .findItemByText(
+        `${mockRegionWithoutDiskEncryption.label} (${mockRegionWithoutDiskEncryption.id})`
+      )
+      .click();
+
+    cy.get(`[data-testid="${checkboxTestId}"]`).should('be.disabled');
+
+    ui.regionSelect.find().click();
+    ui.select.findItemByText(`${mockRegion.label} (${mockRegion.id})`).click();
+
+    cy.get(`[data-testid="${checkboxTestId}"]`).should('be.enabled');
+  });
 });

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

@@ -2,8 +2,17 @@ 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,
+} from 'src/components/DiskEncryption/constants';
+import { DiskEncryption } from 'src/components/DiskEncryption/DiskEncryption';
+import { useIsDiskEncryptionFeatureEnabled } from 'src/components/DiskEncryption/utils';
 import { Paper } from 'src/components/Paper';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { Typography } from 'src/components/Typography';
+import { useRegionsQuery } from 'src/queries/regions/regions';
+import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature';
 
 import { Divider } from '../Divider';
 import UserSSHKeyPanel from './UserSSHKeyPanel';
@@ -31,6 +40,8 @@ interface Props {
   className?: string;
   disabled?: boolean;
   disabledReason?: JSX.Element | string;
+  diskEncryptionEnabled?: boolean;
+  displayDiskEncryption?: boolean;
   error?: string;
   handleChange: (value: string) => void;
   heading?: string;
@@ -41,8 +52,10 @@ interface Props {
   passwordHelperText?: string;
   placeholder?: string;
   required?: boolean;
+  selectedRegion?: string;
   setAuthorizedUsers?: (usernames: string[]) => void;
   small?: boolean;
+  toggleDiskEncryptionEnabled?: () => void;
   tooltipInteractive?: boolean;
 }
 
@@ -52,6 +65,8 @@ export const AccessPanel = (props: Props) => {
     className,
     disabled,
     disabledReason,
+    diskEncryptionEnabled,
+    displayDiskEncryption,
     error,
     handleChange: _handleChange,
     hideStrengthLabel,
@@ -61,15 +76,52 @@ export const AccessPanel = (props: Props) => {
     passwordHelperText,
     placeholder,
     required,
+    selectedRegion,
     setAuthorizedUsers,
+    toggleDiskEncryptionEnabled,
     tooltipInteractive,
   } = props;
 
   const { classes, cx } = useStyles();
 
+  const {
+    isDiskEncryptionFeatureEnabled,
+  } = useIsDiskEncryptionFeatureEnabled();
+
+  const regions = useRegionsQuery().data ?? [];
+
+  const regionSupportsDiskEncryption = doesRegionSupportFeature(
+    selectedRegion ?? '',
+    regions,
+    'Disk Encryption'
+  );
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
     _handleChange(e.target.value);
 
+  /**
+   * Display the "Disk Encryption" section if:
+   * 1) the feature is enabled
+   * 2) "displayDiskEncryption" is explicitly passed -- <AccessPanel />
+   * gets used in several places, but we don't want to display Disk Encryption in all
+   * 3) toggleDiskEncryptionEnabled is defined
+   */
+  const diskEncryptionJSX =
+    isDiskEncryptionFeatureEnabled &&
+    displayDiskEncryption &&
+    toggleDiskEncryptionEnabled !== undefined ? (
+      <>
+        <Divider spacingBottom={20} spacingTop={24} />
+        <DiskEncryption
+          descriptionCopy={DISK_ENCRYPTION_GENERAL_DESCRIPTION}
+          disabled={!regionSupportsDiskEncryption}
+          disabledReason={DISK_ENCRYPTION_UNAVAILABLE_IN_REGION_COPY}
+          isEncryptDiskChecked={diskEncryptionEnabled ?? false}
+          toggleDiskEncryptionEnabled={toggleDiskEncryptionEnabled}
+        />
+      </>
+    ) : null;
+
   return (
     <Paper
       className={cx(
@@ -80,6 +132,14 @@ export const AccessPanel = (props: Props) => {
         className
       )}
     >
+      {isDiskEncryptionFeatureEnabled && (
+        <Typography
+          sx={(theme) => ({ paddingBottom: theme.spacing(2) })}
+          variant="h2"
+        >
+          Security
+        </Typography>
+      )}
       <React.Suspense fallback={<SuspenseLoader />}>
         <PasswordInput
           autoComplete="off"
@@ -110,6 +170,7 @@ export const AccessPanel = (props: Props) => {
           />
         </>
       ) : null}
+      {diskEncryptionJSX}
     </Paper>
   );
 };

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

@@ -12,7 +12,11 @@ import {
 describe('DiskEncryption', () => {
   it('should render a header', () => {
     const { getByTestId } = renderWithTheme(
-      <DiskEncryption descriptionCopy="Description for unit test" />
+      <DiskEncryption
+        descriptionCopy="Description for unit test"
+        isEncryptDiskChecked={true}
+        toggleDiskEncryptionEnabled={vi.fn()}
+      />
     );
 
     const heading = getByTestId(headerTestId);
@@ -23,7 +27,11 @@ describe('DiskEncryption', () => {
 
   it('should render a description', () => {
     const { getByTestId } = renderWithTheme(
-      <DiskEncryption descriptionCopy="Description for unit test" />
+      <DiskEncryption
+        descriptionCopy="Description for unit test"
+        isEncryptDiskChecked={true}
+        toggleDiskEncryptionEnabled={vi.fn()}
+      />
     );
 
     const description = getByTestId(descriptionTestId);
@@ -33,7 +41,11 @@ describe('DiskEncryption', () => {
 
   it('should render a checkbox', () => {
     const { getByTestId } = renderWithTheme(
-      <DiskEncryption descriptionCopy="Description for unit test" />
+      <DiskEncryption
+        descriptionCopy="Description for unit test"
+        isEncryptDiskChecked={true}
+        toggleDiskEncryptionEnabled={vi.fn()}
+      />
     );
 
     const checkbox = getByTestId(checkboxTestId);

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

@@ -8,18 +8,22 @@ export interface DiskEncryptionProps {
   descriptionCopy: JSX.Element | string;
   disabled?: boolean;
   disabledReason?: string;
-  // encryptionStatus
-  // toggleEncryption
+  isEncryptDiskChecked: boolean;
+  toggleDiskEncryptionEnabled: () => void;
 }
 
 export const headerTestId = 'disk-encryption-header';
 export const descriptionTestId = 'disk-encryption-description';
 export const checkboxTestId = 'encrypt-disk-checkbox';
 
 export const DiskEncryption = (props: DiskEncryptionProps) => {
-  const { descriptionCopy, disabled, disabledReason } = props;
-
-  const [checked, setChecked] = React.useState<boolean>(false); // @TODO LDE: temporary placeholder until toggleEncryption logic is in place
+  const {
+    descriptionCopy,
+    disabled,
+    disabledReason,
+    isEncryptDiskChecked,
+    toggleDiskEncryptionEnabled,
+  } = props;
 
   return (
     <>
@@ -41,10 +45,10 @@ export const DiskEncryption = (props: DiskEncryptionProps) => {
         flexDirection="row"
       >
         <Checkbox
-          checked={checked} // @TODO LDE: in Create flows, this will be defaulted to be checked. Otherwise, we will rely on the current encryption status for the initial value
+          checked={disabled ? false : isEncryptDiskChecked} // in Create flows, this will be defaulted to be checked. Otherwise, we will rely on the current encryption status for the initial value
           data-testid={checkboxTestId}
           disabled={disabled}
-          onChange={() => setChecked(!checked)} // @TODO LDE: toggleEncryption will be used here
+          onChange={toggleDiskEncryptionEnabled}
           text="Encrypt Disk"
           toolTipText={disabled ? disabledReason : ''}
         />

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

@@ -16,3 +16,6 @@ export const DISK_ENCRYPTION_DESCRIPTION_NODE_POOL_REBUILD_CAVEAT =
 
 export const DISK_ENCRYPTION_UNAVAILABLE_IN_REGION_COPY =
   'Disk encryption is not available in the selected region.';
+
+export const DISK_ENCRYPTION_BACKUPS_CAVEAT_COPY =
+  'Virtual Machine Backups are not encrypted.';

packages/manager/src/components/DiskEncryption/utils.ts

@@ -0,0 +1,31 @@
+import { useFlags } from 'src/hooks/useFlags';
+import { useAccount } from 'src/queries/account/account';
+
+/**
+ * Hook to determine if the Disk Encryption feature should be visible to the user.
+ * Based on the user's account capability and the feature flag.
+ *
+ * @returns { boolean } - Whether the Disk Encryption feature is enabled for the current user.
+ */
+export const useIsDiskEncryptionFeatureEnabled = (): {
+  isDiskEncryptionFeatureEnabled: boolean;
+} => {
+  const { data: account, error } = useAccount();
+  const flags = useFlags();
+
+  if (error || !flags) {
+    return { isDiskEncryptionFeatureEnabled: false };
+  }
+
+  const hasAccountCapability = account?.capabilities?.includes(
+    'Disk Encryption'
+  );
+
+  const isFeatureFlagEnabled = flags.linodeDiskEncryption;
+
+  const isDiskEncryptionFeatureEnabled = Boolean(
+    hasAccountCapability && isFeatureFlagEnabled
+  );
+
+  return { isDiskEncryptionFeatureEnabled };
+};

packages/manager/src/factories/account.ts

@@ -36,17 +36,18 @@ export const accountFactory = Factory.Sync.makeFactory<Account>({
   balance_uninvoiced: 0.0,
   billing_source: 'linode',
   capabilities: [
-    'Linodes',
-    'NodeBalancers',
     'Block Storage',
-    'Object Storage',
-    'Kubernetes',
     'Cloud Firewall',
-    'Vlans',
+    'Disk Encryption',
+    'Kubernetes',
+    'Linodes',
     'LKE HA Control Planes',
     'Machine Images',
     'Managed Databases',
+    'NodeBalancers',
+    'Object Storage',
     'Placement Group',
+    'Vlans',
   ],
   city: 'Colorado',
   company: Factory.each((i) => `company-${i}`),