feat: [M3-6785] - Firewall-NodeBalancer → Dev (#9760)

* feat: [M3 7015] - Create nodebalancer tab in firewalls landing (#9590) * initial changes * finished the firewall device landing updates * Added changeset: Create nodebalancer tab in firewalls landing * fixed breadcrumb and variable names * added FirewallDeviceLanding test file * added initial unit tests * updated jest.mock function, still not working * swapped from jest.mock to MSW, still need some work * fixed unit tests * fixed tests for FirewallDeviceLanding --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * feat: [M3-7019] - Create add Nodebalancer to Firewall drawer (#9608) * initial drawer commit * finished the add nodebalancer drawer * Added changeset: Created 'Add Nodebalancer' to Firewall drawer * updated drawer and started to add event handlers * added toast notification * added multiple toast notifications * separated nodebalancer and linode drawer * added infinite scrolling * fixed pr suggestions * partially eliminated type definitions in LinodeSelect * eliminated type definitions in LinodeSelect * changed type definition of onSelectionChange in NodeBalancerSelect * eliminated type declarations in NodeBalancerSelect * erased commented out code * initial round of fixes * fixed linode error drawer not closing * eliminated event message * added todo comment * added todo comment * fixed toast notification, error reset, and error text * fixed toast notification, error reset, and error text for Linode Drawer * fixed nodebalancer drawer error notices * merged with develop * initial migration to new autocomplete component, still some errors * can select linodes now, but the linodes arent showing as selected * fixed selection issue with autocomplete * migrated to new autocomplete component * remove NodeBalancerSelect file changes * added banks PR suggestions --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * feat: [M3-7052] - Add NodeBalancer table under Firewall / Devices (#9664) * initial nodebalancer table commit * Added changeset: Added NodeBalancer table under Firewall/Devices * removed unnecessary prop extension --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * feat: [M3-7016] - Add Basic Filtering for Firewall Devices (#9626) * initial firewall device filter commit * Added changeset: Added Basic Filtering for Firewall Devices * cleaned up label content in TextField * initial ActionsPanel Storybook commit * reverted ActionsPanel changes * updated storybook * Fixed storybook * test commit - eslint issues * test commit * fixed text field * removed unnecessary code * added Alban's changes * test commit * removed test comment * fixed filtering error --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> Co-authored-by: Hana Xu <hxu@akamai.com> * feat: [M3-7033] - Update Firewall Landing Device Column (#9668) * initial update to device cell wrap functionality * added extra console line for width * still not working * updated the code, still not working * changes linodes column to devices column * fixed styling file * Added changeset: Updated Firewall Landing Device Column * removed unnecessary styling * fixed test results * added Connie's pr suggestions * updated styled row file * added line clamp to styled component * removed old test case * updated row spacing * fixed spacing --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * feat: [M3-7017] - Update firewall events (#9693) * feat: [M3-7017] - Update firewall events * Fix e2e test and secondary entity formatting * Add changeset * feat: [M3-7020] - Update Create Firewall drawer (#9630) * feat: [M3-7020] - Update Create Firewall drawer * Update firewall e2e tests for NodeBalancer UI improvements * Integrate new Autocomplete component * Change test description * Add UI indicator for errors and reset nb values * Add changeset * Move static strings outside component * Implement PR feedback suggestions * Remove unnecessary check and change var name --------- Co-authored-by: Joe D'Amore <jdamore@linode.com> * feat: [M3-7021] - Added Firewall panel to create NodeBalancer flow (#9733) * merged with upstream * Added changeset: Added Firewall Panel to NodeBalancer Create flow --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * fix: [M3-7245] - Replaced 'Devices' with 'Services' in Firewall Page (#9775) * replaced visible devices with services * fixed routing for drawers * Added changeset: Swapped 'Devices' to 'Services' in Firewall and updated Add Service to Firewall routing * updated unit tests, still need work * updated unit tests * updated capitalization and unit tests --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * fixed merge conflict * fix: [M3-7313] - Migrated Linode dropdown to Autocomplete in Firewall Landing > Create Firewall drawer (#9837) * migrated Linode dropdown to Autocomplete, fixed NodeBalancer dropdown, added successfull toast notification * Added changeset: Linode dropdown in Create Firewall drawer using LinodeSelect component instead of the Autocomplete component * fixed changeset message from last pr * updated unit tests * addressed Hana's feedback * removed helper text * initial changes to unnecessary state * addresses Banks feedback * addressed additional feedback * fixed syntax of optionsFilter * switched set to list for autocomplete --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * feat: [M3-7163] - Add Firewall Section to NodeBalancer Details Page (#9831) * first commit * Code cleanup * Fix quick bug * PR feedback changes * RQ changes * fixed toast notification errors * fixed toast notifications * PR feedback --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * refactor: [M3-7377] - Migrate dopdowns in Create Firewall Drawer from Autocomplete to LinodeSelect and NodeBalancerSelect (#9886) * initial commit * updated font bold to use mui theme * migrated autocomplete to nodebalancer select * small naming changes * Updated CreateFirewallDrawer and SelectFirewallPanel * removed comments * Added changeset: Dropdowns in Create Firewall Drawer using Autocomplete instead of updated LinodeSelect and NodeBalancerSelect * fixed LinodeSelect unit tests * added NodeBalancer unit tests * fixed SelectFirewallPanel unit tests * added pr feedback * updated dropdown labels * fixed unit tests * fixed unit tests * fixed unit tests * working to fix timeout error * rerunning unit tests * test debug * merged with develop * testing unit tests * testing last unit test * testing last unit test * removed line to see if unit tests will pass * Replace calls to `jest.fn()` with `vi.fn()` * rerunning tests * fixed e2e tests * resolved pr suggestions --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: Joe D'Amore <jdamore@linode.com> * feature: [M3-7442] - Put Firewall-Nodebalancer behind feature flag (#9931) * initial feature flag migration * Added remaining code under feature flag * updated text in drawer * Added changeset: Added feature flag to Firewall-NodeBalancer * fixed unit test * fixed unit tests * added feature flag to dev tools * test commit * test commit * fixed border issue in firewall's table * partially fixed border issue * partially fixed border issue * fixed border issue * feat: [M3-7018] - Add documentation links for Firewall NodeBalancer (#9926) * added links * fixed nodebalancer create flow text * made link format more consistent * added changeset * fixed filter issue * removed comment * started to address Alban's feedback * fixed other instance of unnecessary else * addressed feedback for Firewall Drawer Props * added clamp-js for firewall landing * added clamp-js library * addressed some comments * addressed onService required prop feedback * addressed test feedbacl for FirewallDeviceLanding * addressed test feedback for FirewallDeviceLanding * added a todo in FirewallRulesLanding * added unit tests for addNodebalancerDrawer and addLinodeDrawer * addressed Connie's feedback ab aria labels * sanitized error messages in add drawers * added interface for secondaryEntityTypeObj * fixed link in create NodeBalancer flow * fixed header in create drawer * Update packages/manager/.changeset/pr-9926-upcoming-features-1700672014523.md Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> * added period after Learn more in create firewall drawer * fixed nodebalancer create flow issue * NodeBalancer is now assigned to Firewall * removed unnecessary invalidate query * added doc link to NodeBalancer's details page * improved organization of the AddLinodeDrawer and AddNodeBalancerDrawer * added a constants file in FirewallLanding directory * Update packages/manager/.changeset/pr-9926-upcoming-features-1700672014523.md Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/.changeset/pr-9931-upcoming-features-1700686098973.md Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceTable.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceTable.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/api-v4/src/nodebalancers/nodebalancers.ts Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * fixed import error * mapIdsToLinodes to mapIdsToDevices * fixed Linodes Network tab Firewall Table error state * fixed Linodes Network tab Firewall Table error state * fixed Create NodeBalancer add firewall flow * removed firewall_id forom NodeBalancerConfigNode * added firewall_id to the payload * fixed spelling issue * Fix darkmode link color discrepancy * added tags to CreateNodeBalancerPayload * Replace html anchor tag with Link component * change: [M3-7546] - Revert FW table row changes (#9974) * change: [M3-7546] - Revert NB table row changes * Fix linking for NodeBalancers from the table cell * Remove the `clamp-js` package * Add changeset * added links to constants file * changed SecondaryEntityType from interface to type * changed improved mapIdsToDevices tests to cover nodebalancers * Update packages/manager/src/features/Events/eventMessageGenerator.ts Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> * eliminated ternary in Summary Panel * cleaned up NodeBalancerSettings displayFirewallInfotext * Fix dark mode color issue on NB settings page * invalidated device queries after firewall has been deleted --------- Co-authored-by: tyler-akamai <139489745+tyler-akamai@users.noreply.github.com> Co-authored-by: TylerWJ <tylerwjones99@gmail.com> Co-authored-by: Hana Xu <hxu@akamai.com> Co-authored-by: Joe D'Amore <jdamore@linode.com> Co-authored-by: Tyler Jones <tjones@akamai.com> Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
linode · Dec 7, 2023 · 1060a1c · 1060a1c
1 parent ed841e7
commit 1060a1c
Show file tree

Hide file tree

Showing 62 changed files with 2,277 additions and 698 deletions.
diff --git a/packages/api-v4/src/firewalls/types.ts b/packages/api-v4/src/firewalls/types.ts
@@ -2,7 +2,7 @@ export type FirewallStatus = 'enabled' | 'disabled' | 'deleted';
 
 export type FirewallRuleProtocol = 'ALL' | 'TCP' | 'UDP' | 'ICMP' | 'IPENCAP';
 
-export type FirewallDeviceEntityType = 'linode';
+export type FirewallDeviceEntityType = 'linode' | 'nodebalancer';
 
 export type FirewallPolicyType = 'ACCEPT' | 'DROP';
 

diff --git a/packages/api-v4/src/nodebalancers/nodebalancers.ts b/packages/api-v4/src/nodebalancers/nodebalancers.ts
@@ -17,6 +17,7 @@ import {
   NodeBalancerStats,
 } from './types';
 import { combineNodeBalancerConfigNodeAddressAndPort } from './utils';
+import type { Firewall } from '../firewalls/types';
 
 /**
  * getNodeBalancers
@@ -107,3 +108,25 @@ export const getNodeBalancerStats = (nodeBalancerId: number) => {
     setMethod('GET')
   );
 };
+
+/**
+ * getNodeBalancerFirewalls
+ *
+ * View Firewall information for Firewalls associated with this NodeBalancer
+ */
+
+export const getNodeBalancerFirewalls = (
+  nodeBalancerId: number,
+  params?: Params,
+  filter?: Filter
+) =>
+  Request<Page<Firewall>>(
+    setURL(
+      `${API_ROOT}/nodebalancers/${encodeURIComponent(
+        nodeBalancerId
+      )}/firewalls`
+    ),
+    setMethod('GET'),
+    setXFilter(filter),
+    setParams(params)
+  );
diff --git a/packages/api-v4/src/nodebalancers/types.ts b/packages/api-v4/src/nodebalancers/types.ts
@@ -106,9 +106,7 @@ export interface CreateNodeBalancerConfigNode {
   weight?: number;
 }
 
-export type UpdateNodeBalancerConfigNode = Partial<
-  CreateNodeBalancerConfigNode
->;
+export type UpdateNodeBalancerConfigNode = Partial<CreateNodeBalancerConfigNode>;
 
 export interface NodeBalancerConfigNode {
   address: string;
@@ -130,4 +128,6 @@ export interface CreateNodeBalancerPayload {
   label?: string;
   client_conn_throttle?: number;
   configs: any;
+  firewall_id?: number;
+  tags?: string[];
 }
diff --git a/packages/manager/.changeset/pr-9886-upcoming-features-1699461580236.md b/packages/manager/.changeset/pr-9886-upcoming-features-1699461580236.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Dropdowns in Create Firewall Drawer using Autocomplete instead of updated LinodeSelect and NodeBalancerSelect ([#9886](https://github.com/linode/manager/pull/9886))
diff --git a/packages/manager/.changeset/pr-9926-upcoming-features-1700672014523.md b/packages/manager/.changeset/pr-9926-upcoming-features-1700672014523.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Firewall documentation links in the Create flows for Linodes, NodeBalancers, and Firewalls and in the Add NodeBalancer to Firewall drawer ([#9926](https://github.com/linode/manager/pull/9926))
diff --git a/packages/manager/.changeset/pr-9931-upcoming-features-1700686098973.md b/packages/manager/.changeset/pr-9931-upcoming-features-1700686098973.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add feature flag to Firewall-NodeBalancer ([#9931](https://github.com/linode/manager/pull/9931))
diff --git a/packages/manager/.changeset/pr-9974-changed-1701965338643.md b/packages/manager/.changeset/pr-9974-changed-1701965338643.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Revert FW table changes and removed clamp-js dependancy ([#9974](https://github.com/linode/manager/pull/9974))
diff --git a/packages/manager/cypress/e2e/core/firewalls/update-firewall.spec.ts b/packages/manager/cypress/e2e/core/firewalls/update-firewall.spec.ts
@@ -124,7 +124,10 @@ const removeFirewallRules = (ruleLabel: string) => {
  */
 const addLinodesToFirewall = (firewall: Firewall, linode: Linode) => {
   // Go to Linodes tab
-  ui.tabList.findTabByTitle('Linodes').should('be.visible').click();
+  ui.tabList
+    .findTabByTitle('Linodes', { exact: false })
+    .should('be.visible')
+    .click();
 
   ui.button.findByTitle('Add Linodes to Firewall').should('be.visible').click();
 

diff --git a/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts b/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts
@@ -491,7 +491,7 @@ describe('Linode Config', () => {
             ui.button.findByTitle('Clone').should('be.disabled');
             cy.findByRole('combobox').should('be.visible').click();
             ui.select
-              .findLinodeItemByText('cy-test-clone-destination-linode')
+              .findItemByText('cy-test-clone-destination-linode')
               .click();
             ui.button.findByTitle('Clone').should('be.enabled').click();
           });

diff --git a/packages/manager/cypress/support/ui/tab-list.ts b/packages/manager/cypress/support/ui/tab-list.ts
@@ -1,3 +1,5 @@
+import type { SelectorMatcherOptions } from '@testing-library/cypress';
+
 /**
  * Tab list UI element.
  */
@@ -15,10 +17,14 @@ export const tabList = {
    * Finds a tab within a tab list by its title.
    *
    * @param tabTitle - Title of tab to find.
+   * @param options - Selector matcher options.
    *
    * @returns Cypress chainable.
    */
-  findTabByTitle: (tabTitle: string): Cypress.Chainable => {
-    return cy.get('[data-reach-tab-list]').findByText(tabTitle);
+  findTabByTitle: (
+    tabTitle: string,
+    options?: SelectorMatcherOptions
+  ): Cypress.Chainable => {
+    return cy.get('[data-reach-tab-list]').findByText(tabTitle, options);
   },
 };
diff --git a/packages/manager/src/components/ActionsPanel/ActionsPanel.stories.tsx b/packages/manager/src/components/ActionsPanel/ActionsPanel.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { ActionPanelProps, ActionsPanel } from './ActionsPanel';
+
+const meta: Meta<typeof ActionsPanel> = {
+  component: ActionsPanel,
+  title: 'Components/ActionsPanel',
+};
+
+type Story = StoryObj<typeof ActionsPanel>;
+
+const primaryButtonProps = {
+  label: 'Confirm',
+};
+
+const secondaryButtonProps = {
+  label: 'Cancel',
+};
+
+export const StandardActions: Story = {
+  args: {
+    primaryButtonProps,
+    secondaryButtonProps,
+  },
+  render: (args: ActionPanelProps) => {
+    return <ActionsPanel sx={{ justifyContent: 'flex-start' }} {...args} />;
+  },
+};
+
+export default meta;
diff --git a/packages/manager/src/components/ActionsPanel/ActionsPanel.tsx b/packages/manager/src/components/ActionsPanel/ActionsPanel.tsx
@@ -3,7 +3,6 @@ import cx from 'classnames';
 import * as React from 'react';
 
 import { Button, ButtonProps } from 'src/components/Button/Button';
-import { RenderGuard } from 'src/components/RenderGuard';
 
 import { Box, BoxProps } from '../Box';
 
@@ -14,19 +13,22 @@ interface ActionButtonsProps extends ButtonProps {
   label: string;
 }
 
-interface ActionPanelProps extends BoxProps {
+export interface ActionPanelProps extends BoxProps {
   /**
    * primary type actionable button custom aria descripton.
    */
   primaryButtonProps?: ActionButtonsProps;
-
   /**
    * secondary type actionable button custom aria descripton.
    */
   secondaryButtonProps?: ActionButtonsProps;
 }
 
-const ActionsPanelComponent = (props: ActionPanelProps) => {
+/**
+ * `ActionPanel` is a container for primary and secondary actions (ex: "Cancel" & "Save")
+ * It can also be used to render a single action within modals or drawers for styling and layout consistency.
+ */
+export const ActionsPanel = (props: ActionPanelProps) => {
   const {
     className,
     primaryButtonProps,
@@ -83,7 +85,3 @@ const StyledBox = styled(Box)(({ theme: { spacing } }) => ({
   paddingBottom: spacing(1),
   paddingTop: spacing(1),
 }));
-
-const ActionsPanel = RenderGuard(ActionsPanelComponent);
-
-export { ActionsPanel };
diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx
@@ -121,7 +121,7 @@ export const Autocomplete = <
         return renderOption ? (
           renderOption(props, option, state, ownerState)
         ) : (
-          <ListItem {...props}>
+          <ListItem {...props} data-qa-option>
             <>
               <Box
                 sx={{

diff --git a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.test.tsx b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.test.tsx
@@ -2,10 +2,13 @@ import { fireEvent, waitFor } from '@testing-library/react';
 import * as React from 'react';
 import { QueryClient } from 'react-query';
 
+import {
+  LINODE_CREATE_FLOW_TEXT,
+  NODEBALANCER_CREATE_FLOW_TEXT,
+} from 'src/features/Firewalls/FirewallLanding/constants';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
 import { SelectFirewallPanel } from './SelectFirewallPanel';
-import { createFirewallLabel } from './SelectFirewallPanel';
 
 const queryClient = new QueryClient();
 
@@ -20,6 +23,7 @@ describe('SelectFirewallPanel', () => {
   it('should render', async () => {
     const wrapper = renderWithTheme(
       <SelectFirewallPanel
+        entityType={undefined}
         handleFirewallChange={vi.fn()}
         helperText={<span>Testing</span>}
         selectedFirewallId={-1}
@@ -34,14 +38,16 @@ describe('SelectFirewallPanel', () => {
     });
   });
 
-  it('should open a Create Firewall drawer when the link is clicked', async () => {
+  it('should open a Create Firewall drawer when the link is clicked in Linode Create', async () => {
     const wrapper = renderWithTheme(
       <SelectFirewallPanel
+        entityType="linode"
         handleFirewallChange={vi.fn()}
         helperText={<span>Testing</span>}
         selectedFirewallId={-1}
       />,
       {
+        flags: { firewallNodebalancer: true },
         queryClient,
       }
     );
@@ -51,7 +57,34 @@ describe('SelectFirewallPanel', () => {
     fireEvent.click(createFirewallLink);
 
     await waitFor(() => {
-      expect(wrapper.getByLabelText(createFirewallLabel)).toBeInTheDocument();
+      expect(
+        wrapper.getByLabelText(LINODE_CREATE_FLOW_TEXT)
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('should open a Create Firewall drawer when the link is clicked in NodeBalancer Create', async () => {
+    const wrapper = renderWithTheme(
+      <SelectFirewallPanel
+        entityType="nodebalancer"
+        handleFirewallChange={vi.fn()}
+        helperText={<span>Testing</span>}
+        selectedFirewallId={-1}
+      />,
+      {
+        flags: { firewallNodebalancer: true },
+        queryClient,
+      }
+    );
+
+    const createFirewallLink = wrapper.getByText('Create Firewall');
+
+    fireEvent.click(createFirewallLink);
+
+    await waitFor(() => {
+      expect(
+        wrapper.getByLabelText(NODEBALANCER_CREATE_FLOW_TEXT)
+      ).toBeInTheDocument();
     });
   });
 });
diff --git a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx
@@ -1,4 +1,4 @@
-import { Firewall } from '@linode/api-v4';
+import { Firewall, FirewallDeviceEntityType } from '@linode/api-v4';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
@@ -13,15 +13,19 @@ import { Autocomplete } from '../Autocomplete/Autocomplete';
 import { LinkButton } from '../LinkButton';
 
 interface Props {
+  entityType: FirewallDeviceEntityType | undefined;
   handleFirewallChange: (firewallID: number) => void;
   helperText: JSX.Element;
   selectedFirewallId: number;
 }
 
-export const createFirewallLabel = 'Additional Linodes (Optional)';
-
 export const SelectFirewallPanel = (props: Props) => {
-  const { handleFirewallChange, helperText, selectedFirewallId } = props;
+  const {
+    entityType,
+    handleFirewallChange,
+    helperText,
+    selectedFirewallId,
+  } = props;
 
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
 
@@ -79,7 +83,7 @@ export const SelectFirewallPanel = (props: Props) => {
           </LinkButton>
         </StyledLinkButtonBox>
         <CreateFirewallDrawer
-          label={createFirewallLabel}
+          createFlow={entityType}
           onClose={() => setIsDrawerOpen(false)}
           onFirewallCreated={handleFirewallCreated}
           open={isDrawerOpen}

diff --git a/packages/manager/src/components/Tag/Tag.styles.ts b/packages/manager/src/components/Tag/Tag.styles.ts
@@ -17,7 +17,7 @@ export const StyledChip = styled(Chip, {
     },
     borderRadius: 4,
     color: theme.name === 'light' ? '#3a3f46' : '#fff',
-    fontWeight: 'normal',
+    fontFamily: theme.font.normal,
     maxWidth: 350,
     padding: '7px 10px',
   },

diff --git a/packages/manager/src/constants.ts b/packages/manager/src/constants.ts
@@ -267,3 +267,11 @@ export const DEVELOPERS_LINK = 'https://developers.linode.com';
 // URL validators
 export const OFFSITE_URL_REGEX = /(?=.{1,2000}$)((\s)*((ht|f)tp(s?):\/\/|mailto:)[A-Za-z0-9]+[~a-zA-Z0-9-_\.@\#\$%&amp;;:,\?=/\+!\(\)]*(\s)*)/;
 export const ONSITE_URL_REGEX = /^([A-Za-z0-9/\.\?=&\-~]){1,2000}$/;
+
+// Firewall links
+export const CREATE_FIREWALL_LINK =
+  'https://www.linode.com/docs/products/networking/cloud-firewall/guides/create-a-cloud-firewall/';
+export const FIREWALL_GET_STARTED_LINK =
+  'https://www.linode.com/docs/products/networking/cloud-firewall/get-started/';
+export const FIREWALL_LIMITS_CONSIDERATIONS_LINK =
+  'https://www.linode.com/docs/products/networking/cloud-firewall/#limits-and-considerations';
diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
@@ -20,6 +20,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'selfServeBetas', label: 'Self Serve Betas' },
   { flag: 'unifiedMigrations', label: 'Unified Migrations' },
   { flag: 'vpc', label: 'VPC' },
+  { flag: 'firewallNodebalancer', label: 'Firewall NodeBalancer' },
   { flag: 'recharts', label: 'Recharts' },
   { flag: 'objMultiCluster', label: 'OBJ Multi-Cluster' },
 ];

diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
@@ -46,6 +46,7 @@ export interface Flags {
   databaseBeta: boolean;
   databases: boolean;
   dcGetWell: boolean;
+  firewallNodebalancer: boolean;
   ipv6Sharing: boolean;
   kubernetesDashboardAvailability: boolean;
   linodeCreateWithFirewall: boolean;

diff --git a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx
@@ -413,12 +413,12 @@ export const CreateDomain = () => {
               defaultRecordsSetting.value === 'nodebalancer' && (
                 <React.Fragment>
                   <NodeBalancerSelect
-                    onChange={(_, nodebalancer) =>
-                      setSelectedDefaultNodeBalancer(nodebalancer)
+                    onSelectionChange={(value) =>
+                      setSelectedDefaultNodeBalancer(value ?? undefined)
                     }
                     disabled={disabled}
-                    error={errorMap.defaultNodeBalancer}
-                    value={selectedDefaultNodeBalancer?.id}
+                    errorText={errorMap.defaultNodeBalancer}
+                    value={selectedDefaultNodeBalancer?.id ?? null}
                   />
                   {!errorMap.defaultNodeBalancer && (
                     <FormHelperText>