upcoming: [UIE-9515] - Update Firewall Rules Edit & Add Drawer to Support Prefix List Selection (#13138)

* Update Rules Edit/Add drawer to support PrefixLists

* Update comment

* Add some mocks for prefixlists

* Update mock data order

* Reset pls state on address change

* Feature-flagged add/edit prefixlists

* Some clean up

* Some changes

* More clean up

* More clean up

* Add code comments and some clean up

* Add key and test ids to the pl rows

* A small fix

* Add unit tests

* More clean up

* Rename component

* Fix one test case

* Few fixes

* Fix type import

* Update mocks for PLs with more possible cases

* Some more changes related to sorting

* Update mocks

* Added changeset: Update Firewall Rules Edit & Add Drawer to Support Prefix List Selection

* Add/update comments

Author: pmakode-akamai

packages/manager/.changeset/pr-13138-upcoming-features-1764681439890.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update Firewall Rules Edit & Add Drawer to Support Prefix List Selection ([#13138](https://github.com/linode/manager/pull/13138))

packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx

@@ -26,7 +26,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
       justifyContent: 'flex-start',
     },
     paddingLeft: 0,
-    paddingTop: theme.spacing(1.5),
+    paddingTop: theme.spacingFunction(12),
   },
   button: {
     '& > span': {
@@ -70,6 +70,12 @@ export interface MultipeIPInputProps {
    */
   buttonText?: string;
 
+  /**
+   * Whether the first input field can be removed.
+   * @default false
+   */
+  canRemoveFirstInput?: boolean;
+
   /**
    * Custom CSS class for additional styling.
    */
@@ -155,6 +161,7 @@ export const MultipleIPInput = React.memo((props: MultipeIPInputProps) => {
   const {
     adjustSpacingForVPCDualStack,
     buttonText,
+    canRemoveFirstInput,
     className,
     disabled,
     error,
@@ -244,8 +251,8 @@ export const MultipleIPInput = React.memo((props: MultipeIPInputProps) => {
           <TooltipIcon
             status="info"
             sxTooltipIcon={{
-              marginLeft: '-4px',
-              marginTop: '-15px',
+              marginTop: '-8px',
+              padding: '4px',
             }}
             text={tooltip}
             tooltipPosition="right"
@@ -304,7 +311,10 @@ export const MultipleIPInput = React.memo((props: MultipeIPInputProps) => {
              * used in DBaaS or for Linode VPC interfaces
              */}
             <Grid size={1}>
-              {(idx > 0 || forDatabaseAccessControls || forVPCIPRanges) && (
+              {(idx > 0 ||
+                forDatabaseAccessControls ||
+                forVPCIPRanges ||
+                canRemoveFirstInput) && (
                 <IconButton
                   aria-disabled={disabled}
                   className={classes.button}

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

@@ -13,7 +13,7 @@ import {
   classifyIPs,
   deriveTypeFromValuesAndIPs,
   formValueToIPs,
-  getInitialIPs,
+  getInitialIPsOrPLs,
   IP_ERROR_MESSAGE,
   itemsToPortString,
   portStringToItems,
@@ -275,17 +275,25 @@ describe('ViewRuleSetDetailsDrawer', () => {
 describe('utilities', () => {
   describe('formValueToIPs', () => {
     it('returns a complete set of IPs given a string form value', () => {
-      expect(formValueToIPs('all', [''].map(stringToExtendedIP))).toEqual(
+      expect(formValueToIPs('all', [''].map(stringToExtendedIP), [])).toEqual(
         allIPs
       );
-      expect(formValueToIPs('allIPv4', [''].map(stringToExtendedIP))).toEqual({
+      expect(
+        formValueToIPs('allIPv4', [''].map(stringToExtendedIP), [])
+      ).toEqual({
         ipv4: ['0.0.0.0/0'],
       });
-      expect(formValueToIPs('allIPv6', [''].map(stringToExtendedIP))).toEqual({
+      expect(
+        formValueToIPs('allIPv6', [''].map(stringToExtendedIP), [])
+      ).toEqual({
         ipv6: ['::/0'],
       });
       expect(
-        formValueToIPs('ip/netmask', ['1.1.1.1'].map(stringToExtendedIP))
+        formValueToIPs(
+          'ip/netmask/prefixlist',
+          ['1.1.1.1'].map(stringToExtendedIP),
+          []
+        )
       ).toEqual({
         ipv4: ['1.1.1.1'],
       });
@@ -304,22 +312,27 @@ describe('utilities', () => {
   });
 
   describe('validateForm', () => {
+    const baseOptions = {
+      validatedIPs: [],
+      validatedPLs: [],
+      isFirewallRulesetsPrefixlistsFeatureEnabled: false,
+    };
+
     it('validates protocol', () => {
-      expect(validateForm({})).toHaveProperty(
+      expect(validateForm({}, baseOptions)).toHaveProperty(
         'protocol',
         'Protocol is required.'
       );
     });
     it('validates ports', () => {
-      expect(validateForm({ ports: '80', protocol: 'ICMP' })).toHaveProperty(
-        'ports',
-        'Ports are not allowed for ICMP protocols.'
-      );
       expect(
-        validateForm({ ports: '443', protocol: 'IPENCAP' })
+        validateForm({ ports: '80', protocol: 'ICMP' }, baseOptions)
+      ).toHaveProperty('ports', 'Ports are not allowed for ICMP protocols.');
+      expect(
+        validateForm({ ports: '443', protocol: 'IPENCAP' }, baseOptions)
       ).toHaveProperty('ports', 'Ports are not allowed for IPENCAP protocols.');
       expect(
-        validateForm({ ports: 'invalid-port', protocol: 'TCP' })
+        validateForm({ ports: 'invalid-port', protocol: 'TCP' }, baseOptions)
       ).toHaveProperty('ports');
     });
     it('validates custom ports', () => {
@@ -328,56 +341,77 @@ describe('utilities', () => {
         label: 'Firewalllabel',
       };
       // SUCCESS CASES
-      expect(validateForm({ ports: '1234', protocol: 'TCP', ...rest })).toEqual(
-        {}
-      );
       expect(
-        validateForm({ ports: '1,2,3,4,5', protocol: 'TCP', ...rest })
+        validateForm({ ports: '1234', protocol: 'TCP', ...rest }, baseOptions)
       ).toEqual({});
       expect(
-        validateForm({ ports: '1, 2, 3, 4, 5', protocol: 'TCP', ...rest })
+        validateForm(
+          { ports: '1,2,3,4,5', protocol: 'TCP', ...rest },
+          baseOptions
+        )
       ).toEqual({});
-      expect(validateForm({ ports: '1-20', protocol: 'TCP', ...rest })).toEqual(
-        {}
-      );
       expect(
-        validateForm({
-          ports: '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15',
-          protocol: 'TCP',
-          ...rest,
-        })
+        validateForm(
+          { ports: '1, 2, 3, 4, 5', protocol: 'TCP', ...rest },
+          baseOptions
+        )
+      ).toEqual({});
+      expect(
+        validateForm({ ports: '1-20', protocol: 'TCP', ...rest }, baseOptions)
+      ).toEqual({});
+      expect(
+        validateForm(
+          {
+            ports: '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15',
+            protocol: 'TCP',
+            ...rest,
+          },
+          baseOptions
+        )
       ).toEqual({});
       expect(
-        validateForm({ ports: '1-2,3-4', protocol: 'TCP', ...rest })
+        validateForm(
+          { ports: '1-2,3-4', protocol: 'TCP', ...rest },
+          baseOptions
+        )
       ).toEqual({});
       expect(
-        validateForm({ ports: '1,5-12', protocol: 'TCP', ...rest })
+        validateForm({ ports: '1,5-12', protocol: 'TCP', ...rest }, baseOptions)
       ).toEqual({});
       // FAILURE CASES
       expect(
-        validateForm({ ports: '1,21-12', protocol: 'TCP', ...rest })
+        validateForm(
+          { ports: '1,21-12', protocol: 'TCP', ...rest },
+          baseOptions
+        )
       ).toHaveProperty(
         'ports',
         'Range must start with a smaller number and end with a larger number'
       );
       expect(
-        validateForm({ ports: '1-21-45', protocol: 'TCP', ...rest })
+        validateForm(
+          { ports: '1-21-45', protocol: 'TCP', ...rest },
+          baseOptions
+        )
       ).toHaveProperty('ports', 'Ranges must have 2 values');
       expect(
-        validateForm({ ports: 'abc', protocol: 'TCP', ...rest })
+        validateForm({ ports: 'abc', protocol: 'TCP', ...rest }, baseOptions)
       ).toHaveProperty('ports', 'Must be 1-65535');
       expect(
-        validateForm({ ports: '1--20', protocol: 'TCP', ...rest })
+        validateForm({ ports: '1--20', protocol: 'TCP', ...rest }, baseOptions)
       ).toHaveProperty('ports', 'Must be 1-65535');
       expect(
-        validateForm({ ports: '-20', protocol: 'TCP', ...rest })
+        validateForm({ ports: '-20', protocol: 'TCP', ...rest }, baseOptions)
       ).toHaveProperty('ports', 'Must be 1-65535');
       expect(
-        validateForm({
-          ports: '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16',
-          protocol: 'TCP',
-          ...rest,
-        })
+        validateForm(
+          {
+            ports: '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16',
+            protocol: 'TCP',
+            ...rest,
+          },
+          baseOptions
+        )
       ).toHaveProperty(
         'ports',
         'Number of ports or port range endpoints exceeded. Max allowed is 15'
@@ -432,11 +466,79 @@ describe('utilities', () => {
           ports: '80',
           protocol: 'TCP',
         };
-        expect(validateForm({ label: value, ...rest })).toEqual(result);
+        expect(validateForm({ label: value, ...rest }, baseOptions)).toEqual(
+          result
+        );
       });
     });
+
+    it('handles addresses field when isFirewallRulesetsPrefixlistsFeatureEnabled is true', () => {
+      // Invalid cases
+      expect(
+        validateForm(
+          {},
+          {
+            ...baseOptions,
+            isFirewallRulesetsPrefixlistsFeatureEnabled: true,
+          }
+        )
+      ).toHaveProperty('addresses', 'Sources is a required field.');
+
+      expect(
+        validateForm(
+          { addresses: 'ip/netmask/prefixlist' },
+          {
+            ...baseOptions,
+            isFirewallRulesetsPrefixlistsFeatureEnabled: true,
+          }
+        )
+      ).toHaveProperty(
+        'addresses',
+        'Add an IP address in IP/mask format, or reference a Prefix List name.'
+      );
+
+      // Valid cases
+      expect(
+        validateForm(
+          { addresses: 'ip/netmask/prefixlist' },
+          {
+            validatedIPs: [
+              { address: '192.268.0.0' },
+              { address: '192.268.0.1' },
+            ],
+            validatedPLs: [
+              { address: 'pl:system:test', inIPv4Rule: true, inIPv6Rule: true },
+            ],
+            isFirewallRulesetsPrefixlistsFeatureEnabled: true,
+          }
+        )
+      ).not.toHaveProperty('addresses');
+      expect(
+        validateForm(
+          { addresses: 'ip/netmask/prefixlist' },
+          {
+            validatedIPs: [{ address: '192.268.0.0' }],
+            validatedPLs: [],
+            isFirewallRulesetsPrefixlistsFeatureEnabled: true,
+          }
+        )
+      ).not.toHaveProperty('addresses');
+      expect(
+        validateForm(
+          { addresses: 'ip/netmask/prefixlist' },
+          {
+            validatedIPs: [],
+            validatedPLs: [
+              { address: 'pl:system:test', inIPv4Rule: true, inIPv6Rule: true },
+            ],
+            isFirewallRulesetsPrefixlistsFeatureEnabled: true,
+          }
+        )
+      ).not.toHaveProperty('addresses');
+    });
+
     it('handles required fields', () => {
-      expect(validateForm({})).toEqual({
+      expect(validateForm({}, baseOptions)).toEqual({
         addresses: 'Sources is a required field.',
         label: 'Label is required.',
         ports: 'Ports is a required field.',
@@ -445,11 +547,11 @@ describe('utilities', () => {
     });
   });
 
-  describe('getInitialIPs', () => {
+  describe('getInitialIPsOrPLs', () => {
     const ruleToModify: ExtendedFirewallRule = {
       action: 'ACCEPT',
       addresses: {
-        ipv4: ['1.2.3.4'],
+        ipv4: ['1.2.3.4', 'pl:system:test'],
         ipv6: ['::0'],
       },
       originalIndex: 0,
@@ -458,10 +560,8 @@ describe('utilities', () => {
       status: 'NEW',
     };
     it('parses the IPs when no errors', () => {
-      expect(getInitialIPs(ruleToModify)).toEqual([
-        { address: '1.2.3.4' },
-        { address: '::0' },
-      ]);
+      const { ips: initalIPs } = getInitialIPsOrPLs(ruleToModify);
+      expect(initalIPs).toEqual([{ address: '1.2.3.4' }, { address: '::0' }]);
     });
     it('parses the IPs with no errors', () => {
       const errors: FirewallRuleError[] = [
@@ -473,13 +573,17 @@ describe('utilities', () => {
           reason: 'Invalid IP',
         },
       ];
-      expect(getInitialIPs({ ...ruleToModify, errors })).toEqual([
+      const { ips: initalIPs } = getInitialIPsOrPLs({
+        ...ruleToModify,
+        errors,
+      });
+      expect(initalIPs).toEqual([
         { address: '1.2.3.4', error: IP_ERROR_MESSAGE },
         { address: '::0' },
       ]);
     });
     it('offsets error indices correctly', () => {
-      const result = getInitialIPs({
+      const { ips: initialIPs } = getInitialIPsOrPLs({
         ...ruleToModify,
         addresses: {
           ipv4: ['1.2.3.4'],
@@ -495,11 +599,17 @@ describe('utilities', () => {
           },
         ],
       });
-      expect(result).toEqual([
+      expect(initialIPs).toEqual([
         { address: '1.2.3.4' },
         { address: 'INVALID_IP', error: IP_ERROR_MESSAGE },
       ]);
     });
+    it('parses the PLs when no errors', () => {
+      const { pls: initalPLs } = getInitialIPsOrPLs(ruleToModify);
+      expect(initalPLs).toEqual([
+        { address: 'pl:system:test', inIPv4Rule: true, inIPv6Rule: false },
+      ]);
+    });
   });
 
   describe('classifyIPs', () => {
@@ -528,12 +638,13 @@ describe('utilities', () => {
     };
 
     it('correctly matches values to their representative type', () => {
-      const result = deriveTypeFromValuesAndIPs(formValues, []);
+      const result = deriveTypeFromValuesAndIPs(formValues, [], []);
       expect(result).toBe('https');
     });
     it('returns "custom" if there is no match', () => {
       const result = deriveTypeFromValuesAndIPs(
         { ...formValues, ports: '22-23' },
+        [],
         []
       );
       expect(result).toBe('custom');