upcoming: [M3-9777] - Add label field when creating a firewall from a template in CreateFirewallDrawer (#12069)

* add label when creating firewall from a template

* make label optional

* Added changeset: Add Firewall label to CreateFirewallDrawer when using firewall templates

* update changeset

* Revert "make label optional"

This reverts commit b6a079d.

Author: coliu-akamai

packages/manager/.changeset/pr-12069-upcoming-features-1745004654779.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add label field to CreateFirewallDrawer form when using firewall templates ([#12069](https://github.com/linode/manager/pull/12069))

packages/manager/cypress/e2e/core/firewalls/create-firewall-custom.spec.ts

@@ -425,4 +425,36 @@ describe('Can create Firewalls using custom rules', () => {
         cy.contains(mockNodeBalancer.label).should('be.visible');
       });
   });
+
+  /*
+   * - Confirms a validation error displays when trying to create a custom Firewall without inputting a label
+   */
+  it('displays an error when trying to create a customFirewall without a label', () => {
+    mockGetFirewalls([]).as('getFirewalls');
+
+    cy.visitWithLogin('/firewalls');
+    cy.wait('@getFirewalls');
+
+    ui.button
+      .findByTitle('Create Firewall')
+      .should('be.visible')
+      .should('be.enabled')
+      .click();
+
+    ui.drawer
+      .findByTitle('Create Firewall')
+      .should('be.visible')
+      .within(() => {
+        cy.findByLabelText('Custom Firewall').should('be.checked');
+
+        // Make no changes to the default selections, just click "Create Firewall".
+        ui.buttonGroup
+          .findButtonByTitle('Create Firewall')
+          .should('be.visible')
+          .should('be.enabled')
+          .click();
+      });
+
+    cy.findByText('Label is required.');
+  });
 });

packages/manager/cypress/e2e/core/firewalls/create-firewall-with-template.spec.ts

@@ -2,11 +2,6 @@
  * @file Integration tests for Firewall creation flows involving templates.
  */
 
-import {
-  accountFactory,
-  firewallFactory,
-  firewallTemplateFactory,
-} from 'src/factories';
 import { mockGetAccount } from 'support/intercepts/account';
 import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 import {
@@ -17,8 +12,13 @@ import {
 } from 'support/intercepts/firewalls';
 import { mockApiInternalUser } from 'support/intercepts/general';
 import { ui } from 'support/ui';
-import { buildArray } from 'support/util/arrays';
-import { randomNumber } from 'support/util/random';
+import { randomLabel } from 'support/util/random';
+
+import {
+  accountFactory,
+  firewallFactory,
+  firewallTemplateFactory,
+} from 'src/factories';
 
 const mockFirewallTemplateVpc = firewallTemplateFactory.build({
   slug: 'vpc',
@@ -51,13 +51,13 @@ describe('Can create Firewalls using templates', () => {
   /*
    * - Confirms that users can create a Firewall using the VPC template.
    * - Confirms that VPC template-specific details are shown prior to creating Firewall.
-   * - Confirms that outgoing Firewall create request includes autogenerated label.
+   * - Confirms that outgoing Firewall create request includes chosen Firewall label.
    * - Confirms that outgoing Firewall create request includes chosen rules.
    * - Confirms that landing page automatically updates to display the new Firewall.
    */
   it('can create a Firewall using VPC template', () => {
     const mockFirewall = firewallFactory.build({
-      label: 'vpc-1',
+      label: randomLabel(),
       rules: mockFirewallTemplateVpc.rules,
       entities: [],
     });
@@ -83,6 +83,7 @@ describe('Can create Firewalls using templates', () => {
       .should('be.visible')
       .within(() => {
         cy.findByText('From a Template').should('be.visible').click();
+        cy.findByText('Label').should('be.visible').type(mockFirewall.label);
 
         cy.findByLabelText('Firewall Template').click();
         ui.autocompletePopper.find().within(() => {
@@ -104,16 +105,16 @@ describe('Can create Firewalls using templates', () => {
       });
 
     cy.wait('@createFirewall').then((xhr) => {
-      // Confirm that label is automatically assigned, and that rules reflect the selected template.
-      expect(xhr.request.body['label']).to.equal('vpc-1');
+      // Confirm that rules reflect the selected template.
+      expect(xhr.request.body['label']).to.equal(mockFirewall.label);
       expect(xhr.request.body['rules']).to.deep.equal(
         mockFirewallTemplateVpc.rules
       );
     });
 
     // Confirm that page automatically updates to show the new Firewall,
     // and that the expected information is displayed alongside the Firewall.
-    cy.findByText('vpc-1')
+    cy.findByText(mockFirewall.label)
       .should('be.visible')
       .closest('tr')
       .within(() => {
@@ -126,36 +127,24 @@ describe('Can create Firewalls using templates', () => {
   /*
    * - Confirms that users can create a Firewall using the Public template.
    * - Confirms that Public template-specific details are shown prior to creating Firewall.
-   * - Confirms that outgoing Firewall create request includes autogenerated label.
-   * - Confirms that autogenerated Firewall label takes into account existing Firewalls.
+   * - Confirms that outgoing Firewall create request includes chosen Firewall label
    * - Confirms that outgoing Firewall create request includes chosen rules.
    * - Confirms that landing page automatically updates to display the new Firewall.
    */
   it('can create a Firewall using Public template', () => {
-    const existingFirewallCount = randomNumber(1, 10);
-
-    const mockExistingFirewalls = buildArray(existingFirewallCount, (i) => {
-      return firewallFactory.build({
-        label: `public-${i + 1}`,
-        rules: mockFirewallTemplatePublic.rules,
-        entities: [],
-      });
-    });
-
-    const mockNewFirewallLabel = `public-${existingFirewallCount + 1}`;
-    const mockNewFirewall = firewallFactory.build({
-      label: mockNewFirewallLabel,
+    const mockFirewall = firewallFactory.build({
+      label: randomLabel(),
       rules: mockFirewallTemplatePublic.rules,
       entities: [],
     });
 
-    mockGetFirewalls(mockExistingFirewalls).as('getFirewalls');
+    mockGetFirewalls([]).as('getFirewalls');
     mockGetFirewallTemplates([
       mockFirewallTemplateVpc,
       mockFirewallTemplatePublic,
     ]);
     mockGetFirewallTemplate(mockFirewallTemplatePublic);
-    mockCreateFirewall(mockNewFirewall).as('createFirewall');
+    mockCreateFirewall(mockFirewall).as('createFirewall');
 
     cy.visitWithLogin('/firewalls');
     cy.wait('@getFirewalls');
@@ -171,6 +160,7 @@ describe('Can create Firewalls using templates', () => {
       .should('be.visible')
       .within(() => {
         cy.findByText('From a Template').should('be.visible').click();
+        cy.findByText('Label').should('be.visible').type(mockFirewall.label);
 
         cy.findByLabelText('Firewall Template').click();
         ui.autocompletePopper.find().within(() => {
@@ -186,9 +176,7 @@ describe('Can create Firewalls using templates', () => {
         ).should('be.visible');
 
         // Create the Firewall
-        mockGetFirewalls([...mockExistingFirewalls, mockNewFirewall]).as(
-          'getFirewalls'
-        );
+        mockGetFirewalls([mockFirewall]).as('getFirewalls');
         ui.buttonGroup
           .findButtonByTitle('Create Firewall')
           .should('be.visible')
@@ -197,17 +185,17 @@ describe('Can create Firewalls using templates', () => {
       });
 
     cy.wait('@createFirewall').then((xhr) => {
-      // Confirm that label is automatically assigned, taking into account existing firewall labels,
+      // Confirm that label reflects chosen label
       // and that the Firewall rules reflect the selected template.
-      expect(xhr.request.body['label']).to.equal(mockNewFirewallLabel);
+      expect(xhr.request.body['label']).to.equal(mockFirewall.label);
       expect(xhr.request.body['rules']).to.deep.equal(
         mockFirewallTemplatePublic.rules
       );
     });
 
     // Confirm that page automatically updates to show the new Firewall,
     // and that the expected information is displayed alongside the Firewall.
-    cy.findByText(mockNewFirewallLabel)
+    cy.findByText(mockFirewall.label)
       .should('be.visible')
       .closest('tr')
       .within(() => {
@@ -220,13 +208,13 @@ describe('Can create Firewalls using templates', () => {
   /*
    * - Confirms that users can create a Firewall using the internal template.
    * - Confirms that internal choice is present when internal API header exists and API includes the template.
-   * - Confirms that outgoing Firewall create request includes autogenerated label.
+   * - Confirms that outgoing Firewall create request includes selected Firewall label.
    * - Confirms that outgoing Firewall create request includes chosen rules.
    * - Confirms that landing page automatically updates to display the new Firewall.
    */
   it('can create a Firewall using internal-only template as internal user', () => {
     const mockFirewall = firewallFactory.build({
-      label: 'akamai-non-prod-1',
+      label: randomLabel(),
       rules: mockFirewallTemplateInternalUser.rules,
       entities: [],
     });
@@ -254,6 +242,7 @@ describe('Can create Firewalls using templates', () => {
       .should('be.visible')
       .within(() => {
         cy.findByText('From a Template').should('be.visible').click();
+        cy.findByText('Label').should('be.visible').type(mockFirewall.label);
 
         cy.findByLabelText('Firewall Template').click();
         ui.autocompletePopper.find().within(() => {
@@ -275,15 +264,15 @@ describe('Can create Firewalls using templates', () => {
     cy.wait('@createFirewall').then((xhr) => {
       // Confirm that page automatically updates to show the new Firewall,
       // and that the expected information is displayed alongside the Firewall.
-      expect(xhr.request.body['label']).to.equal('akamai-non-prod-1');
+      expect(xhr.request.body['label']).to.equal(mockFirewall.label);
       expect(xhr.request.body['rules']).to.deep.equal(
         mockFirewallTemplateInternalUser.rules
       );
     });
 
     // Confirm that page automatically updates to show the new Firewall,
     // and that the expected information is displayed alongside the Firewall.
-    cy.findByText('akamai-non-prod-1')
+    cy.findByText(mockFirewall.label)
       .should('be.visible')
       .closest('tr')
       .within(() => {
@@ -317,6 +306,7 @@ describe('Can create Firewalls using templates', () => {
       .should('be.visible')
       .within(() => {
         cy.findByText('From a Template').should('be.visible').click();
+        cy.findByText('Label').should('be.visible').type(randomLabel());
 
         cy.findByLabelText('Firewall Template').click();
         ui.autocompletePopper.find().within(() => {
@@ -329,6 +319,44 @@ describe('Can create Firewalls using templates', () => {
       });
   });
 
+  /*
+   * - Confirms a validation error displays for firewall label if no label inputted
+   * - Confirms a validation error displays for template select if no template chosen
+   */
+  it('displays an error when trying to create a Firewall from a template without a label', () => {
+    mockGetFirewalls([]).as('getFirewalls');
+    mockGetFirewallTemplates([
+      mockFirewallTemplateVpc,
+      mockFirewallTemplatePublic,
+    ]);
+    mockGetFirewallTemplate(mockFirewallTemplatePublic);
+
+    cy.visitWithLogin('/firewalls');
+    cy.wait('@getFirewalls');
+
+    ui.button
+      .findByTitle('Create Firewall')
+      .should('be.visible')
+      .should('be.enabled')
+      .click();
+
+    ui.drawer
+      .findByTitle('Create Firewall')
+      .should('be.visible')
+      .within(() => {
+        cy.findByText('From a Template').should('be.visible').click();
+
+        ui.buttonGroup
+          .findButtonByTitle('Create Firewall')
+          .should('be.visible')
+          .should('be.enabled')
+          .click();
+      });
+
+    cy.findByText('Label is required.');
+    cy.findByText('Please select a template to create a firewall from.');
+  });
+
   // TODO M3-9775 - Delete this test once `linodeInterfaces` feature flag is removed.
   /*
    * - Confirms that "Custom Firewall" and "From a Template" selections are absent when feature flag is disabled.

packages/manager/src/components/GenerateFirewallDialog/useCreateFirewallFromTemplate.ts

@@ -1,6 +1,5 @@
-import { useQueryClient } from '@tanstack/react-query';
-
 import { firewallQueries, useCreateFirewall } from '@linode/queries';
+import { useQueryClient } from '@tanstack/react-query';
 
 import type { DialogState } from './GenerateFirewallDialog';
 import type {
@@ -46,11 +45,18 @@ export const useCreateFirewallFromTemplate = (options: {
 
 export const createFirewallFromTemplate = async (options: {
   createFirewall: (firewall: CreateFirewallPayload) => Promise<Firewall>;
+  firewallLabel?: string;
   queryClient: QueryClient;
   templateSlug: FirewallTemplateSlug;
   updateProgress?: (progress: number | undefined) => void;
 }): Promise<Firewall> => {
-  const { createFirewall, queryClient, templateSlug, updateProgress } = options;
+  const {
+    createFirewall,
+    queryClient,
+    templateSlug,
+    updateProgress,
+    firewallLabel,
+  } = options;
   if (updateProgress) {
     updateProgress(0);
   }
@@ -66,7 +72,7 @@ export const createFirewallFromTemplate = async (options: {
     updateProgress(80); // this gives the appearance of linear progress
   }
   // Determine new firewall name
-  const label = getUniqueFirewallLabel(slug, firewalls);
+  const label = firewallLabel ?? getUniqueFirewallLabel(slug, firewalls);
 
   // Create new firewall
   return await createFirewall({ label, rules });

packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.test.tsx

@@ -30,6 +30,12 @@ describe('Create Firewall Drawer', () => {
     expect(title).toBeVisible();
   });
 
+  it('should always show the label field', () => {
+    renderWithTheme(<CreateFirewallDrawer {...props} />);
+    const label = screen.getByText('Label');
+    expect(label).toBeVisible();
+  });
+
   it('should render radio buttons for default inbound/outbound policies', () => {
     renderWithTheme(<CreateFirewallDrawer {...props} />);
     const withinInboundPolicy = within(