upcoming: [UIE-9793] - UI/UX enhancements and fixes for Rule Sets & Prefix Lists (part-2) (#13188)

* Fix Rule Set Id copy from Rules table row

* Change `RuleSets` to `Rule Sets` text

* Update Ruleset ID to Rule Set ID for edge case

* Exclude Marked for deletion rulesets from the dropdown

* Update default state of newly choosen PL or Special PL that supports both Ipv4 & IPv6

* Added changeset: UI/UX enhancements and fixes for Rule Sets & Prefix Lists (part-2)

* Fix styling for long PL/RS labels in PL/RS Drawer

* Add flex wrap

* Minor styling bug fix

* Copy Icon display style update

* Clean up: avoid repetitive styles

* Add a comment for clarity

* Add unit tests for Rule Sets filter logic

Author: pmakode-akamai

packages/manager/.changeset/pr-13188-upcoming-features-1765378307536.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+UI/UX enhancements and fixes for Rule Sets & Prefix Lists (part-2) ([#13188](https://github.com/linode/manager/pull/13188))

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

@@ -204,7 +204,7 @@ export const FirewallPrefixListDrawer = React.memo(
       column?: boolean;
       copy?: boolean;
       label: string;
-      value: React.ReactNode | string;
+      value: React.ReactNode;
     }[];
 
     return (
@@ -227,13 +227,10 @@ export const FirewallPrefixListDrawer = React.memo(
             <>
               {fields.map((item, idx) => (
                 <StyledListItem
+                  fieldsMode
                   key={`item-${idx}`}
                   paddingMultiplier={2}
-                  sx={
-                    item.column
-                      ? { flexDirection: 'column', alignItems: 'flex-start' }
-                      : {}
-                  }
+                  sx={item.column ? { flexDirection: 'column' } : {}}
                 >
                   {item.label && (
                     <StyledLabel component="span">{item.label}:</StyledLabel>

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

@@ -143,7 +143,7 @@ describe('AddRuleSetDrawer', () => {
     // Description
     expect(
       getByText(
-        'RuleSets are reusable collections of Cloud Firewall rules that use the same fields as individual rules. They let you manage and update multiple rules as a group. You can then apply them across different firewalls by reference.'
+        'Rule Sets are reusable collections of Cloud Firewall rules that use the same fields as individual rules. They let you manage and update multiple rules as a group. You can then apply them across different firewalls by reference.'
       )
     ).toBeVisible();
 

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

@@ -107,13 +107,10 @@ export const FirewallRuleSetDetailsView = (
         },
       ].map((item, idx) => (
         <StyledListItem
+          fieldsMode
           key={`item-${idx}`}
           paddingMultiplier={2}
-          sx={
-            item.column
-              ? { flexDirection: 'column', alignItems: 'flex-start' }
-              : {}
-          }
+          sx={item.column ? { flexDirection: 'column' } : {}}
         >
           {item.label && (
             <StyledLabel component="span">{item.label}:</StyledLabel>

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

@@ -0,0 +1,64 @@
+import { firewallRuleSetFactory } from 'src/factories';
+
+import { filterRuleSets } from './FirewallRuleSetForm';
+
+import type { FirewallRuleSet } from '@linode/api-v4';
+
+describe('filterRuleSets', () => {
+  const mockRuleSets: FirewallRuleSet[] = [
+    firewallRuleSetFactory.build({
+      id: 1,
+      type: 'inbound',
+      label: 'Inbound RS',
+      deleted: null,
+    }),
+    firewallRuleSetFactory.build({
+      id: 2,
+      type: 'outbound',
+      label: 'Outbound RS',
+      deleted: null,
+    }),
+    firewallRuleSetFactory.build({
+      id: 3,
+      type: 'inbound',
+      label: 'Deleted RS',
+      deleted: '2025-11-18T18:51:11', // Marked for Deletion Rule Set
+    }),
+    firewallRuleSetFactory.build({
+      id: 4,
+      type: 'inbound',
+      label: 'Already Used RS',
+      deleted: null,
+    }),
+  ];
+
+  it('returns only ruleSets of the correct type', () => {
+    const result = filterRuleSets({
+      ruleSets: mockRuleSets,
+      category: 'inbound',
+      inboundAndOutboundRules: [],
+    });
+
+    expect(result.map((r) => r.id)).toEqual([1, 4]);
+  });
+
+  it('excludes ruleSets already referenced by the firewall', () => {
+    const result = filterRuleSets({
+      ruleSets: mockRuleSets,
+      category: 'inbound',
+      inboundAndOutboundRules: [{ ruleset: 4 }],
+    });
+
+    expect(result.map((r) => r.id)).toEqual([1]); // excludes id=4
+  });
+
+  it('excludes ruleSets marked for deletion', () => {
+    const result = filterRuleSets({
+      ruleSets: mockRuleSets,
+      category: 'inbound',
+      inboundAndOutboundRules: [],
+    });
+
+    expect(result.some((r) => r.id === 3)).toBe(false);
+  });
+});

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

@@ -22,6 +22,39 @@ import {
 import { StyledLabel, StyledListItem, useStyles } from './shared.styles';
 
 import type { FirewallRuleSetFormProps } from './FirewallRuleDrawer.types';
+import type { Category } from './shared';
+import type { FirewallRuleSet, FirewallRuleType } from '@linode/api-v4';
+
+interface FilterRuleSetsArgs {
+  category: Category;
+  inboundAndOutboundRules: FirewallRuleType[];
+  ruleSets: FirewallRuleSet[];
+}
+
+/**
+ * Display only those Rule Sets that:
+ * - are applicable to the given category
+ * - are not already referenced by the firewall
+ * - are not marked for deletion
+ */
+export const filterRuleSets = ({
+  ruleSets,
+  category,
+  inboundAndOutboundRules,
+}: FilterRuleSetsArgs) => {
+  return ruleSets.filter((ruleSet) => {
+    // TODO: Firewall RuleSets: Remove this client-side filter once the API supports filtering by the 'type' field
+    const isCorrectType = ruleSet.type === category;
+
+    const isNotAlreadyReferenced = !inboundAndOutboundRules.some(
+      (rule) => rule.ruleset === ruleSet.id
+    );
+
+    const isNotMarkedForDeletion = ruleSet.deleted === null;
+
+    return isCorrectType && isNotAlreadyReferenced && isNotMarkedForDeletion;
+  });
+};
 
 export const FirewallRuleSetForm = React.memo(
   (props: FirewallRuleSetFormProps) => {
@@ -58,19 +91,14 @@ export const FirewallRuleSetForm = React.memo(
     // Build dropdown options
     const ruleSetDropdownOptions = React.useMemo(
       () =>
-        ruleSets
-          // TODO: Firewall RuleSets: Remove this client-side filter once the API supports filtering by the 'type' field
-          .filter(
-            (ruleSet) =>
-              ruleSet.type === category &&
-              !inboundAndOutboundRules.some(
-                (rule) => rule.ruleset === ruleSet.id
-              )
-          ) // Display only rule sets applicable to the given category and filter out rule sets already referenced by the FW
-          .map((ruleSet) => ({
-            label: ruleSet.label,
-            value: ruleSet.id,
-          })),
+        filterRuleSets({
+          ruleSets,
+          category,
+          inboundAndOutboundRules,
+        }).map((ruleSet) => ({
+          label: ruleSet.label,
+          value: ruleSet.id,
+        })),
       [ruleSets]
     );
 
@@ -83,7 +111,7 @@ export const FirewallRuleSetForm = React.memo(
           <Typography
             sx={(theme) => ({ marginTop: theme.spacingFunction(16) })}
           >
-            RuleSets are reusable collections of Cloud Firewall rules that use
+            Rule Sets are reusable collections of Cloud Firewall rules that use
             the same fields as individual rules. They let you manage and update
             multiple rules as a group. You can then apply them across different
             firewalls by reference.

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

@@ -397,8 +397,6 @@ const FirewallRuleTableRow = React.memo((props: FirewallRuleTableRowProps) => {
     return <TableRowLoading columns={smDown ? 3 : lgDown ? 5 : 6} />;
   }
 
-  const ruleSetCopyableId = `${rulesetDetails ? 'ID:' : 'Ruleset ID:'} ${ruleset}`;
-
   return (
     <StyledTableRow
       aria-label={label ?? `firewall rule ${id}`}
@@ -475,7 +473,8 @@ const FirewallRuleTableRow = React.memo((props: FirewallRuleTableRowProps) => {
               )}
             </Box>
             <Box sx={{ whiteSpace: 'nowrap' }}>
-              <IPAddress ips={[ruleSetCopyableId]} isHovered={isHovered} />
+              <span>{rulesetDetails ? 'ID: ' : 'Rule Set ID: '}</span>
+              <IPAddress ips={[String(ruleset)]} isHovered={isHovered} />
             </Box>
           </Box>
         </TableCell>

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

@@ -54,6 +54,7 @@ describe('MultiplePrefixListSelect', () => {
     }, // supported (supports only ipv4)
     { name: 'pl:system:supports-both', ipv4: [], ipv6: [] }, // supported (supports both)
     { name: 'pl:system:not-supported', ipv4: null, ipv6: null }, // unsupported
+    { name: 'pl::vpcs:<current>' }, // Special Prefix List (Doesn't have IPv4 & IPv6)
   ];
 
   queryMocks.useAllFirewallPrefixListsQuery.mockReturnValue({
@@ -177,7 +178,7 @@ describe('MultiplePrefixListSelect', () => {
     getByDisplayValue('pl:system:supports-only-ipv4');
   });
 
-  it('defaults to IPv4 selected and IPv6 unselected when choosing a PL that supports both', async () => {
+  it('defaults to both IPv4 and IPv6 selected when choosing a PL that supports both', async () => {
     const pls = [{ address: '', inIPv4Rule: false, inIPv6Rule: false }];
     const { findByText, getByRole } = renderWithTheme(
       <MultiplePrefixListSelect {...baseProps} pls={pls} />
@@ -196,7 +197,31 @@ describe('MultiplePrefixListSelect', () => {
       {
         address: 'pl::supports-both',
         inIPv4Rule: true,
-        inIPv6Rule: false,
+        inIPv6Rule: true,
+      },
+    ]);
+  });
+
+  it('defaults to both IPv4 and IPv6 selected when choosing a Special PL', async () => {
+    const pls = [{ address: '', inIPv4Rule: false, inIPv6Rule: false }];
+    const { findByText, getByRole } = renderWithTheme(
+      <MultiplePrefixListSelect {...baseProps} pls={pls} />
+    );
+
+    const input = getByRole('combobox');
+
+    // Type the Special PL name to filter the dropdown
+    await userEvent.type(input, 'pl::vpcs:<current>');
+
+    // Select the option from the autocomplete dropdown
+    const option = await findByText('pl::vpcs:<current>');
+    await userEvent.click(option);
+
+    expect(baseProps.onChange).toHaveBeenCalledWith([
+      {
+        address: 'pl::vpcs:<current>',
+        inIPv4Rule: true,
+        inIPv6Rule: true,
       },
     ]);
   });

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

@@ -84,17 +84,20 @@ const getDefaultPLReferenceState = (
 ): { inIPv4Rule: boolean; inIPv6Rule: boolean } => {
   if (support === null) {
     // Special Prefix List case
-    return { inIPv4Rule: true, inIPv6Rule: false };
+    return { inIPv4Rule: true, inIPv6Rule: true };
   }
 
   const { isPLIPv4Unsupported, isPLIPv6Unsupported } = support;
 
+  // Supports both IPv4 & IPv6
   if (!isPLIPv4Unsupported && !isPLIPv6Unsupported)
-    return { inIPv4Rule: true, inIPv6Rule: false };
+    return { inIPv4Rule: true, inIPv6Rule: true };
 
+  // Supports only IPv4
   if (!isPLIPv4Unsupported && isPLIPv6Unsupported)
     return { inIPv4Rule: true, inIPv6Rule: false };
 
+  // Supports only Ipv6
   if (isPLIPv4Unsupported && !isPLIPv6Unsupported)
     return { inIPv4Rule: false, inIPv6Rule: true };
 

packages/manager/src/features/Firewalls/FirewallDetail/Rules/shared.styles.ts

@@ -12,16 +12,20 @@ import type { FirewallPolicyType } from '@linode/api-v4';
 import type { Theme } from '@linode/ui';
 
 interface StyledListItemProps {
+  fieldsMode?: boolean;
   paddingMultiplier?: number; // optional, default 1
 }
 
 export const StyledListItem = styled(Typography, {
   label: 'StyledTypography',
-  shouldForwardProp: omittedProps(['paddingMultiplier']),
-})<StyledListItemProps>(({ theme, paddingMultiplier = 1 }) => ({
-  alignItems: 'center',
+  shouldForwardProp: omittedProps(['fieldsMode', 'paddingMultiplier']),
+})<StyledListItemProps>(({ theme, fieldsMode, paddingMultiplier = 1 }) => ({
+  alignItems: fieldsMode ? 'flex-start' : 'center',
   display: 'flex',
   padding: `${theme.spacingFunction(4 * paddingMultiplier)} 0`,
+  ...(fieldsMode && {
+    flexWrap: 'wrap', // Longer labels start on the next line
+  }),
 }));
 
 export const StyledLabel = styled(Box, {
@@ -71,8 +75,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
       width: '1em',
     },
     color: theme.palette.primary.main,
-    display: 'inline-block',
+    display: 'flex',
     position: 'relative',
-    marginTop: theme.spacingFunction(4),
   },
 }));