upcoming: [UIE-9709] - Integrate Prefix List Details Drawer with Edit and Add Rule Drawer (#13158)

* Update tests and fix typo

* Added changeset: Integrate Prefix List details drawer with Edit and Add Rule drawer

* Add tests for handleOpenPrefixListDrawer call on click of View Details

* Update ruleset details drawer button text from cancel to close

* Change from Link to LinkButton

* Update mock protocol

Author: pmakode-akamai

packages/manager/.changeset/pr-13158-upcoming-features-1764752133530.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Integrate Prefix List details drawer with Edit and Add Rule drawer ([#13158](https://github.com/linode/manager/pull/13158))

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallPrefixListDrawer.test.tsx

@@ -52,6 +52,12 @@ const computeExpectedElements = (
     label = 'Prefix List Name:';
   }
 
+  if (context?.type === 'rule' && context.modeViewedFrom === 'create') {
+    title = `Add an ${capitalize(category)} Rule or Rule Set`;
+    button = `Back to ${capitalize(category)} Rule`;
+    label = 'Prefix List Name:';
+  }
+
   if (context?.type === 'ruleset' && context.modeViewedFrom === 'view') {
     title = `${capitalize(category)} Rule Set details`;
     button = 'Back to the Rule Set';
@@ -98,6 +104,15 @@ describe('PrefixListDrawer', () => {
         plRuleRef: { inIPv4Rule: true, inIPv6Rule: true },
       },
     },
+    {
+      ...baseProps,
+      category: 'inbound',
+      context: {
+        type: 'rule',
+        modeViewedFrom: 'create',
+        plRuleRef: { inIPv4Rule: true, inIPv6Rule: true },
+      },
+    },
     {
       ...baseProps,
       category: 'outbound',

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallPrefixListDrawer.tsx

@@ -80,6 +80,13 @@ export const FirewallPrefixListDrawer = React.memo(
         };
       }
 
+      if (type === 'rule' && modeViewedFrom === 'create') {
+        return {
+          title: `Add an ${capitalize(category)} Rule or Rule Set`,
+          backButton: `Back to ${capitalize(category)} Rule`,
+        };
+      }
+
       if (type === 'ruleset' && modeViewedFrom === 'view') {
         return {
           title: `${capitalize(category)} Rule Set details`,

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.test.tsx

@@ -267,7 +267,7 @@ describe('ViewRuleSetDetailsDrawer', () => {
       expect(getByText(`${capitalize(category)} Rules`)).toBeVisible();
 
       // Cancel button
-      expect(getByRole('button', { name: 'Cancel' })).toBeVisible();
+      expect(getByRole('button', { name: 'Close' })).toBeVisible();
     }
   );
 });

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.tsx

@@ -245,6 +245,13 @@ export const FirewallRuleDrawer = React.memo(
                   addressesLabel={addressesLabel}
                   category={category}
                   closeDrawer={onClose}
+                  handleOpenPrefixListDrawer={(prefixListLabel, plRuleRef) => {
+                    handleOpenPrefixListDrawer(
+                      prefixListLabel,
+                      plRuleRef,
+                      'rule'
+                    );
+                  }}
                   ips={ips}
                   mode={mode}
                   pls={pls}

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.types.ts

@@ -45,6 +45,10 @@ export interface FirewallRuleFormProps extends FormikProps<FormState> {
   addressesLabel: string;
   category: Category;
   closeDrawer: () => void;
+  handleOpenPrefixListDrawer: (
+    prefixListLabel: string,
+    plRuleRef: PrefixListRuleReference
+  ) => void;
   ips: ExtendedIP[];
   mode: FirewallRuleDrawerMode;
   pls: ExtendedPL[];

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx

@@ -24,7 +24,7 @@ import {
 import { ipFieldPlaceholder } from 'src/utilities/ipUtils';
 
 import { enforceIPMasks } from './FirewallRuleDrawer.utils';
-import { MultiplePrefixListSelect } from './MutiplePrefixListSelect';
+import { MultiplePrefixListSelect } from './MultiplePrefixListSelect';
 import { PORT_PRESETS, PORT_PRESETS_ITEMS } from './shared';
 
 import type { FirewallRuleFormProps } from './FirewallRuleDrawer.types';
@@ -45,6 +45,7 @@ export const FirewallRuleForm = React.memo((props: FirewallRuleFormProps) => {
     errors,
     handleBlur,
     handleChange,
+    handleOpenPrefixListDrawer,
     handleSubmit,
     ips,
     pls,
@@ -348,6 +349,7 @@ export const FirewallRuleForm = React.memo((props: FirewallRuleFormProps) => {
           {isFirewallRulesetsPrefixlistsFeatureEnabled && (
             <MultiplePrefixListSelect
               aria-label="Prefix List for Firewall rule"
+              handleOpenPrefixListDrawer={handleOpenPrefixListDrawer}
               onChange={handlePrefixListChange}
               pls={pls}
             />

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleSetDetailsView.tsx

@@ -196,7 +196,7 @@ export const FirewallRuleSetDetailsView = (
 
       <ActionsPanel
         secondaryButtonProps={{
-          label: 'Cancel',
+          label: 'Close',
           onClick: closeDrawer,
         }}
       />

…l/Rules/MutiplePrefixListSelect.test.tsx …/Rules/MultiplePrefixListSelect.test.tsxpackages/manager/src/features/Firewalls/FirewallDetail/Rules/MutiplePrefixListSelect.test.tsx renamed to packages/manager/src/features/Firewalls/FirewallDetail/Rules/MultiplePrefixListSelect.test.tsx packages/manager/src/features/Firewalls/FirewallDetail/Rules/MutiplePrefixListSelect.test.tsx renamed to packages/manager/src/features/Firewalls/FirewallDetail/Rules/MultiplePrefixListSelect.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import * as shared from '../../shared';
-import { MultiplePrefixListSelect } from './MutiplePrefixListSelect';
+import { MultiplePrefixListSelect } from './MultiplePrefixListSelect';
 
 const queryMocks = vi.hoisted(() => ({
   useAllFirewallPrefixListsQuery: vi.fn().mockReturnValue({}),
@@ -31,7 +31,10 @@ describe('MultiplePrefixListSelect', () => {
     });
   });
 
-  const onChange = vi.fn();
+  const baseProps = {
+    handleOpenPrefixListDrawer: vi.fn(),
+    onChange: vi.fn(),
+  };
 
   const mockPrefixLists = [
     {
@@ -62,7 +65,7 @@ describe('MultiplePrefixListSelect', () => {
   it('should render the title only when at least one PL row is added', () => {
     const { getByText } = renderWithTheme(
       <MultiplePrefixListSelect
-        onChange={vi.fn()}
+        {...baseProps}
         pls={[{ address: '', inIPv4Rule: false, inIPv6Rule: false }]}
       />
     );
@@ -71,24 +74,23 @@ describe('MultiplePrefixListSelect', () => {
 
   it('should not render the title when no PL row is added', () => {
     const { queryByText } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={vi.fn()} pls={[]} />
+      <MultiplePrefixListSelect {...baseProps} pls={[]} />
     );
     expect(queryByText('Prefix List')).not.toBeInTheDocument();
   });
 
   it('should add a new PL row (empty state) when clicking "Add a Prefix List"', async () => {
     const { getByText } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={[]} />
+      <MultiplePrefixListSelect {...baseProps} pls={[]} />
     );
 
     await userEvent.click(getByText('Add a Prefix List'));
-    expect(onChange).toHaveBeenCalledWith([
+    expect(baseProps.onChange).toHaveBeenCalledWith([
       { address: '', inIPv4Rule: false, inIPv6Rule: false },
     ]);
   });
 
   it('should remove a PL row when clicking delete (X)', async () => {
-    const onChange = vi.fn();
     const pls = [
       {
         address: 'pl::supports-both',
@@ -97,17 +99,17 @@ describe('MultiplePrefixListSelect', () => {
       },
     ];
     const { getByTestId } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     await userEvent.click(getByTestId('delete-pl-0'));
-    expect(onChange).toHaveBeenCalledWith([]);
+    expect(baseProps.onChange).toHaveBeenCalledWith([]);
   });
 
   it('filters out unsupported PLs from dropdown', async () => {
     const pls = [{ address: '', inIPv4Rule: false, inIPv6Rule: false }];
     const { getByRole, queryByText } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     const input = getByRole('combobox');
@@ -131,7 +133,7 @@ describe('MultiplePrefixListSelect', () => {
       { address: '', inIPv4Rule: false, inIPv6Rule: false },
     ];
     const { getAllByRole, findByText } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={selectedPLs} />
+      <MultiplePrefixListSelect {...baseProps} pls={selectedPLs} />
     );
 
     const inputs = getAllByRole('combobox');
@@ -166,7 +168,7 @@ describe('MultiplePrefixListSelect', () => {
       },
     ];
     const { getByDisplayValue, queryAllByTestId } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     expect(queryAllByTestId('prefixlist-select')).toHaveLength(3);
@@ -178,7 +180,7 @@ describe('MultiplePrefixListSelect', () => {
   it('defaults to IPv4 selected and IPv6 unselected when choosing a PL that supports both', async () => {
     const pls = [{ address: '', inIPv4Rule: false, inIPv6Rule: false }];
     const { findByText, getByRole } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     const input = getByRole('combobox');
@@ -190,7 +192,7 @@ describe('MultiplePrefixListSelect', () => {
     const option = await findByText('pl::supports-both');
     await userEvent.click(option);
 
-    expect(onChange).toHaveBeenCalledWith([
+    expect(baseProps.onChange).toHaveBeenCalledWith([
       {
         address: 'pl::supports-both',
         inIPv4Rule: true,
@@ -202,7 +204,7 @@ describe('MultiplePrefixListSelect', () => {
   it('defaults to IPv4 selected and IPv6 unselected when choosing a PL that supports only IPv4', async () => {
     const pls = [{ address: '', inIPv4Rule: false, inIPv6Rule: false }];
     const { findByText, getByRole } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     const input = getByRole('combobox');
@@ -214,7 +216,7 @@ describe('MultiplePrefixListSelect', () => {
     const option = await findByText('pl:system:supports-only-ipv4');
     await userEvent.click(option);
 
-    expect(onChange).toHaveBeenCalledWith([
+    expect(baseProps.onChange).toHaveBeenCalledWith([
       {
         address: 'pl:system:supports-only-ipv4',
         inIPv4Rule: true,
@@ -226,7 +228,7 @@ describe('MultiplePrefixListSelect', () => {
   it('defaults to IPv4 unselected and IPv6 selected when choosing a PL that supports only IPv6', async () => {
     const pls = [{ address: '', inIPv4Rule: false, inIPv6Rule: false }];
     const { findByText, getByRole } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     const input = getByRole('combobox');
@@ -238,7 +240,7 @@ describe('MultiplePrefixListSelect', () => {
     const option = await findByText('pl::supports-only-ipv6');
     await userEvent.click(option);
 
-    expect(onChange).toHaveBeenCalledWith([
+    expect(baseProps.onChange).toHaveBeenCalledWith([
       {
         address: 'pl::supports-only-ipv6',
         inIPv4Rule: false,
@@ -252,7 +254,7 @@ describe('MultiplePrefixListSelect', () => {
       { address: 'pl::supports-both', inIPv4Rule: true, inIPv6Rule: false },
     ];
     const { findByTestId } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     const ipv4CheckboxWrapper = await findByTestId('ipv4-checkbox-0');
@@ -275,7 +277,7 @@ describe('MultiplePrefixListSelect', () => {
       { address: 'pl::supports-both', inIPv4Rule: false, inIPv6Rule: true },
     ];
     const { findByTestId } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     const ipv4CheckboxWrapper = await findByTestId('ipv4-checkbox-0');
@@ -298,7 +300,7 @@ describe('MultiplePrefixListSelect', () => {
       { address: 'pl::supports-both', inIPv4Rule: true, inIPv6Rule: true },
     ];
     const { findByTestId } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     const ipv4CheckboxWrapper = await findByTestId('ipv4-checkbox-0');
@@ -325,7 +327,7 @@ describe('MultiplePrefixListSelect', () => {
       },
     ];
     const { findByTestId } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     const ipv4CheckboxWrapper = await findByTestId('ipv4-checkbox-0');
@@ -352,7 +354,7 @@ describe('MultiplePrefixListSelect', () => {
       },
     ];
     const { findByTestId } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     const ipv4CheckboxWrapper = await findByTestId('ipv4-checkbox-0');
@@ -376,14 +378,31 @@ describe('MultiplePrefixListSelect', () => {
       { address: 'pl::supports-both', inIPv4Rule: true, inIPv6Rule: false },
     ];
     const { findByTestId } = renderWithTheme(
-      <MultiplePrefixListSelect onChange={onChange} pls={pls} />
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
     );
 
     const ipv6Checkbox = await findByTestId('ipv6-checkbox-0');
     await userEvent.click(ipv6Checkbox);
 
-    expect(onChange).toHaveBeenCalledWith([
+    expect(baseProps.onChange).toHaveBeenCalledWith([
       { address: 'pl::supports-both', inIPv4Rule: true, inIPv6Rule: true },
     ]);
   });
+
+  it('calls handleOpenPrefixListDrawer with correct arguments when clicking "View Details"', async () => {
+    const pls = [
+      { address: 'pl::supports-both', inIPv4Rule: true, inIPv6Rule: false },
+    ];
+
+    const { getByText } = renderWithTheme(
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
+    );
+
+    await userEvent.click(getByText('View Details'));
+
+    expect(baseProps.handleOpenPrefixListDrawer).toHaveBeenCalledWith(
+      'pl::supports-both',
+      { inIPv4Rule: true, inIPv6Rule: false }
+    );
+  });
 });