feat: [M3-9890] - Support Akamai Employee Banners on the Linode Create flow when using Linode Interfaces (#12143)

bnussman-akamai · bnussman · web-flow · commit 9a29bdc569d1 · 2025-05-05T12:48:34.000-04:00
* inital support * clean up * add to changelog * account for vlan linode interfaces * feedback @hkhalil-akamai * feedback @mjac0bs --------- Co-authored-by: Banks Nussman <banks@nussman.us>
diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md
@@ -101,6 +101,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Add non-dismissible option support to Dismissible Banner ([#12115](https://github.com/linode/manager/pull/12115))
 - Add mocks and update `PlansPanel` to support `mtc-tt-2025` plans in selected regions (#12050)
 - IAM RBAC: Implement method to merge user-selected roles into existing roles ([#12125](https://github.com/linode/manager/pull/12125))
+- Support Akamai Employee Banners on the Linode Create flow when using Linode Interfaces ([#12143](https://github.com/linode/manager/pull/12143))
 - Add navigation to Linode Network tab after successfully upgrading interfaces ([#12146](https://github.com/linode/manager/pull/12146))
 - Fix "Error retrieving Firewalls" message in Subnet Linode Row after upgrading interfaces ([#12146](https://github.com/linode/manager/pull/12146))
 
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Actions.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Actions.tsx
@@ -1,7 +1,7 @@
 import { Box, Button } from '@linode/ui';
 import { scrollErrorIntoView } from '@linode/utilities';
 import React, { useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
@@ -22,18 +22,41 @@ export const Actions = () => {
 
   const { isLinodeInterfacesEnabled } = useIsLinodeInterfacesEnabled();
 
-  const {
-    formState,
-    getValues,
-    trigger,
-  } = useFormContext<LinodeCreateFormValues>();
+  const { formState, getValues, trigger, control } =
+    useFormContext<LinodeCreateFormValues>();
 
   const isLinodeCreateRestricted = useRestrictedGlobalGrantCheck({
     globalGrantType: 'add_linodes',
   });
 
+  const [
+    legacyFirewallId,
+    firstLinodeInterfaceFirewallId,
+    firstLinodeInterfaceType,
+    interfaceGeneration,
+  ] = useWatch({
+    name: [
+      'firewall_id',
+      'linodeInterfaces.0.firewall_id',
+      'linodeInterfaces.0.purpose',
+      'interface_generation',
+    ],
+    control,
+  });
+
+  const firewallId =
+    interfaceGeneration === 'linode'
+      ? firstLinodeInterfaceFirewallId
+      : legacyFirewallId;
+
+  const userNeedsToTakeActionAboutInternalFirewallPolicy =
+    interfaceGeneration === 'linode' && firstLinodeInterfaceType === 'vlan'
+      ? false
+      : 'firewallOverride' in formState.errors && !firewallId;
+
   const disableSubmitButton =
-    isLinodeCreateRestricted || 'firewallOverride' in formState.errors;
+    isLinodeCreateRestricted ||
+    userNeedsToTakeActionAboutInternalFirewallPolicy;
 
   const onOpenAPIAwareness = async () => {
     sendApiAwarenessClickEvent('Button', 'View Code Snippets');
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Firewall.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Firewall.tsx
@@ -1,6 +1,6 @@
 import { Box, Paper, Stack, Typography } from '@linode/ui';
 import React, { useState } from 'react';
-import { useController, useFormContext } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 
 import { AkamaiBanner } from 'src/components/AkamaiBanner/AkamaiBanner';
 import { GenerateFirewallDialog } from 'src/components/GenerateFirewallDialog/GenerateFirewallDialog';
@@ -16,12 +16,10 @@ import { sendLinodeCreateFormInputEvent } from 'src/utilities/analytics/formEven
 
 import { useLinodeCreateQueryParams } from './utilities';
 
-import type { LinodeCreateFormValues } from './utilities';
 import type { CreateLinodeRequest } from '@linode/api-v4';
 import type { LinodeCreateFormEventOptions } from 'src/utilities/analytics/types';
 
 export const Firewall = () => {
-  const { clearErrors } = useFormContext<LinodeCreateFormValues>();
   const { field, fieldState } = useController<
     CreateLinodeRequest,
     'firewall_id'
@@ -42,13 +40,6 @@ export const Firewall = () => {
     globalGrantType: 'add_linodes',
   });
 
-  const onChange = (firewallId: number | undefined) => {
-    if (firewallId !== undefined) {
-      clearErrors('firewallOverride');
-    }
-    field.onChange(firewallId);
-  };
-
   const firewallFormEventOptions: LinodeCreateFormEventOptions = {
     createType: params.type ?? 'OS',
     headerName: 'Firewall',
@@ -95,7 +86,7 @@ export const Firewall = () => {
         <Stack spacing={1.5}>
           <FirewallSelect
             onChange={(e, firewall) => {
-              onChange(firewall?.id);
+              field.onChange(firewall?.id);
               if (!firewall?.id) {
                 sendLinodeCreateFormInputEvent({
                   ...firewallFormEventOptions,
@@ -141,11 +132,13 @@ export const Firewall = () => {
         onFirewallCreated={(firewall) => field.onChange(firewall.id)}
         open={isDrawerOpen}
       />
-      <GenerateFirewallDialog
-        onClose={() => setIsGenerateDialogOpen(false)}
-        onFirewallGenerated={(firewall) => onChange(firewall.id)}
-        open={isGenerateDialogOpen}
-      />
+      {secureVMNoticesEnabled && (
+        <GenerateFirewallDialog
+          onClose={() => setIsGenerateDialogOpen(false)}
+          onFirewallGenerated={(firewall) => field.onChange(firewall.id)}
+          open={isGenerateDialogOpen}
+        />
+      )}
     </Paper>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/FirewallAuthorization.tsx b/packages/manager/src/features/Linodes/LinodeCreate/FirewallAuthorization.tsx
@@ -1,7 +1,6 @@
 import { Checkbox, FormControlLabel } from '@linode/ui';
-import { isNotNullOrUndefined } from '@linode/utilities';
 import React from 'react';
-import { useController, useFormContext } from 'react-hook-form';
+import { useController, useFormContext, useWatch } from 'react-hook-form';
 
 import { AkamaiBanner } from 'src/components/AkamaiBanner/AkamaiBanner';
 import { useFlags } from 'src/hooks/useFlags';
@@ -10,33 +9,57 @@ import type { LinodeCreateFormValues } from './utilities';
 
 export const FirewallAuthorization = () => {
   const flags = useFlags();
-  const { control, watch } = useFormContext<LinodeCreateFormValues>();
+
+  const { control } = useFormContext<LinodeCreateFormValues>();
+
   const { field, fieldState } = useController({
     control,
     name: 'firewallOverride',
   });
 
-  const watchFirewall = watch('firewall_id');
+  const [
+    legacyFirewallId,
+    firstLinodeInterfaceFirewallId,
+    firstLinodeInterfaceType,
+    interfaceGeneration,
+  ] = useWatch({
+    name: [
+      'firewall_id',
+      'linodeInterfaces.0.firewall_id',
+      'linodeInterfaces.0.purpose',
+      'interface_generation',
+    ],
+    control,
+  });
+
+  // Special case ❗️
+  // VLAN interfaces do not support Firewalls, so we hide this notice
+  // if that's what the user selects.
+  if (firstLinodeInterfaceType === 'vlan' && interfaceGeneration === 'linode') {
+    return null;
+  }
+
+  const firewallId =
+    interfaceGeneration === 'linode'
+      ? firstLinodeInterfaceFirewallId
+      : legacyFirewallId;
 
-  if (
-    isNotNullOrUndefined(watchFirewall) ||
-    !(fieldState.isDirty || fieldState.error)
-  ) {
-    return;
+  if (firewallId || !(fieldState.isDirty || fieldState.error)) {
+    return null;
   }
 
   return (
     <AkamaiBanner
       action={
         <FormControlLabel
-          label={
-            flags.secureVmCopy?.firewallAuthorizationLabel ??
-            'I am authorized to create a Linode without a firewall'
-          }
           checked={field.value ?? false}
           className="error-for-scroll"
           control={<Checkbox />}
           disableTypography
+          label={
+            flags.secureVmCopy?.firewallAuthorizationLabel ??
+            'I am authorized to create a Linode without a firewall'
+          }
           onChange={field.onChange}
           sx={{ fontSize: 14 }}
         />
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/Firewall.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/Firewall.tsx
@@ -2,10 +2,14 @@ import { Box, Stack } from '@linode/ui';
 import React, { useState } from 'react';
 import { useController } from 'react-hook-form';
 
+import { AkamaiBanner } from 'src/components/AkamaiBanner/AkamaiBanner';
+import { GenerateFirewallDialog } from 'src/components/GenerateFirewallDialog/GenerateFirewallDialog';
 import { LinkButton } from 'src/components/LinkButton';
 import { FirewallSelect } from 'src/features/Firewalls/components/FirewallSelect';
 import { CreateFirewallDrawer } from 'src/features/Firewalls/FirewallLanding/CreateFirewallDrawer';
+import { useFlags } from 'src/hooks/useFlags';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
+import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled';
 
 import type { LinodeCreateFormValues } from '../utilities';
 
@@ -17,6 +21,13 @@ export const Firewall = () => {
     name: 'firewall_id',
   });
 
+  const { secureVMNoticesEnabled } = useSecureVMNoticesEnabled();
+  const flags = useFlags();
+
+  const [
+    isGenerateAkamaiEmployeeFirewallDialogOpen,
+    setIsGenerateAkamaiEmployeeFirewallDialogOpen,
+  ] = useState(false);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   const isLinodeCreateRestricted = useRestrictedGlobalGrantCheck({
@@ -26,6 +37,24 @@ export const Firewall = () => {
   return (
     <Stack spacing={2}>
       <Stack spacing={1.5}>
+        {secureVMNoticesEnabled && (
+          <AkamaiBanner
+            action={
+              <LinkButton
+                onClick={() =>
+                  setIsGenerateAkamaiEmployeeFirewallDialogOpen(true)
+                }
+              >
+                {flags.secureVmCopy?.generateActionText ??
+                  'Generate Compliant Firewall'}
+              </LinkButton>
+            }
+            text={
+              flags.secureVmCopy?.linodeCreate?.text ??
+              'All accounts must apply an compliant firewall to all their Linodes.'
+            }
+          />
+        )}
         <FirewallSelect
           disabled={isLinodeCreateRestricted}
           errorText={fieldState.error?.message}
@@ -49,6 +78,13 @@ export const Firewall = () => {
         onFirewallCreated={(firewall) => field.onChange(firewall.id)}
         open={isDrawerOpen}
       />
+      {secureVMNoticesEnabled && (
+        <GenerateFirewallDialog
+          onClose={() => setIsGenerateAkamaiEmployeeFirewallDialogOpen(false)}
+          onFirewallGenerated={(firewall) => field.onChange(firewall.id)}
+          open={isGenerateAkamaiEmployeeFirewallDialogOpen}
+        />
+      )}
     </Stack>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceFirewall.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceFirewall.tsx
@@ -2,10 +2,14 @@ import { Box, Stack } from '@linode/ui';
 import React, { useState } from 'react';
 import { useController, useFormContext, useWatch } from 'react-hook-form';
 
+import { AkamaiBanner } from 'src/components/AkamaiBanner/AkamaiBanner';
+import { GenerateFirewallDialog } from 'src/components/GenerateFirewallDialog/GenerateFirewallDialog';
 import { LinkButton } from 'src/components/LinkButton';
 import { FirewallSelect } from 'src/features/Firewalls/components/FirewallSelect';
 import { CreateFirewallDrawer } from 'src/features/Firewalls/FirewallLanding/CreateFirewallDrawer';
+import { useFlags } from 'src/hooks/useFlags';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
+import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled';
 
 import type { LinodeCreateFormValues } from '../utilities';
 
@@ -14,6 +18,14 @@ interface Props {
 }
 
 export const InterfaceFirewall = ({ index }: Props) => {
+  const { secureVMNoticesEnabled } = useSecureVMNoticesEnabled();
+  const flags = useFlags();
+
+  const [
+    isGenerateAkamaiEmployeeFirewallDialogOpen,
+    setIsGenerateAkamaiEmployeeFirewallDialogOpen,
+  ] = useState(false);
+
   const { control } = useFormContext<LinodeCreateFormValues>();
 
   const interfaceType = useWatch({
@@ -35,6 +47,24 @@ export const InterfaceFirewall = ({ index }: Props) => {
   return (
     <Stack spacing={2}>
       <Stack spacing={1.5}>
+        {secureVMNoticesEnabled && (
+          <AkamaiBanner
+            action={
+              <LinkButton
+                onClick={() =>
+                  setIsGenerateAkamaiEmployeeFirewallDialogOpen(true)
+                }
+              >
+                {flags.secureVmCopy?.generateActionText ??
+                  'Generate Compliant Firewall'}
+              </LinkButton>
+            }
+            text={
+              flags.secureVmCopy?.linodeCreate?.text ??
+              'All accounts must apply an compliant firewall to all their Linodes.'
+            }
+          />
+        )}
         <FirewallSelect
           disabled={isLinodeCreateRestricted}
           errorText={fieldState.error?.message}
@@ -59,6 +89,13 @@ export const InterfaceFirewall = ({ index }: Props) => {
         onFirewallCreated={(firewall) => field.onChange(firewall.id)}
         open={isDrawerOpen}
       />
+      {secureVMNoticesEnabled && (
+        <GenerateFirewallDialog
+          onClose={() => setIsGenerateAkamaiEmployeeFirewallDialogOpen(false)}
+          onFirewallGenerated={(firewall) => field.onChange(firewall.id)}
+          open={isGenerateAkamaiEmployeeFirewallDialogOpen}
+        />
+      )}
     </Stack>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/index.tsx b/packages/manager/src/features/Linodes/LinodeCreate/index.tsx
@@ -265,7 +265,7 @@ export const LinodeCreate = () => {
           <EUAgreement />
           <Summary />
           <SMTP />
-          <FirewallAuthorization />
+          {secureVMNoticesEnabled && <FirewallAuthorization />}
           <Actions />
         </Stack>
       </form>
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/resolvers.ts b/packages/manager/src/features/Linodes/LinodeCreate/resolvers.ts
@@ -1,6 +1,5 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { accountQueries, regionQueries } from '@linode/queries';
-import { isNullOrUndefined } from '@linode/utilities';
 import type { FieldErrors, Resolver } from 'react-hook-form';
 
 import { getRegionCountryGroup, isEURegion } from 'src/utilities/formatRegion';
@@ -88,15 +87,22 @@ export const getLinodeCreateResolver = (
       }
     }
 
-    const secureVMViolation =
-      context?.secureVMNoticesEnabled &&
-      !values.firewallOverride &&
-      isNullOrUndefined(values.firewall_id);
-
-    if (secureVMViolation) {
-      (errors as FieldErrors<LinodeCreateFormValues>)['firewallOverride'] = {
-        type: 'validate',
-      };
+    // If we're dealing with an employee account and they did not bypass
+    // the firewall banner....
+    if (context?.secureVMNoticesEnabled && !values.firewallOverride) {
+      // Get the selected Firewall ID depending on what Interface Generation is selected
+      const firewallId =
+        values.interface_generation === 'linode'
+          ? values.linodeInterfaces[0].firewall_id
+          : values.firewall_id;
+
+      if (!firewallId) {
+        (errors as FieldErrors<LinodeCreateFormValues>)['firewallOverride'] = {
+          // This message does not get surfaced, see FirewallAuthorization.tsx
+          message: 'You must select a Firewall or bypass the Firewall policy.',
+          type: 'validate',
+        };
+      }
     }
 
     if (errors) {
