upcoming: [UIE-9507, UIE-9510] - Add New Firewall RuleSet Row Layout + Factories/Mocks (#13079)

* Save progress

* Update tests

* Few more changes

* Add more changes

* Clean up tests

* Few changes

* Layout updates

* Update tests

* Add ruleset loading state

* Clean up mocks

* Fix mocks

* Add comments to the type

* Added changeset: Update FirewallRuleType to support ruleset

* Added changeset: Update FirewallRuleTypeSchema to support ruleset

* Added changeset: Add new Firewall RuleSet row layout

* Update ruleset action text - Delete to Remove

* Move Action column and improve table responsiveness for long labels

* Update Cypress component test

* Revert Action column movement since its not yet confirmed

* Few updates

* Few fixes

* Update cypress component tests

Author: pmakode-akamai

packages/api-v4/.changeset/pr-13079-upcoming-features-1762861826541.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Update FirewallRuleType to support ruleset ([#13079](https://github.com/linode/manager/pull/13079))

packages/api-v4/src/firewalls/types.ts

@@ -36,16 +36,26 @@ export type UpdateFirewallRules = Omit<
 
 export type FirewallTemplateRules = UpdateFirewallRules;
 
+/**
+ * The API may return either a full firewall rule object or a ruleset reference
+ * containing only the `ruleset` field. This interface supports both formats
+ * to ensure backward compatibility with existing implementations and avoid
+ * widespread refactoring.
+ */
 export interface FirewallRuleType {
-  action: FirewallPolicyType;
+  action?: FirewallPolicyType | null;
   addresses?: null | {
     ipv4?: null | string[];
     ipv6?: null | string[];
   };
   description?: null | string;
   label?: null | string;
-  ports?: string;
-  protocol: FirewallRuleProtocol;
+  ports?: null | string;
+  protocol?: FirewallRuleProtocol | null;
+  /**
+   * Present when the object represents a ruleset reference.
+   */
+  ruleset?: null | number;
 }
 
 export interface FirewallDeviceEntity {

packages/manager/.changeset/pr-13079-upcoming-features-1762861957439.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add new Firewall RuleSet row layout ([#13079](https://github.com/linode/manager/pull/13079))

packages/manager/cypress/component/features/firewalls/firewall-rule-table.spec.tsx

@@ -122,13 +122,13 @@ const verifyFirewallWithRules = ({
       .within(() => {
         if (isSmallViewport) {
           // Column 'Protocol' is not visible for smaller screens.
-          cy.findByText(rule.protocol).should('not.exist');
+          cy.findByText(rule.protocol!).should('not.exist');
         } else {
-          cy.findByText(rule.protocol).should('be.visible');
+          cy.findByText(rule.protocol!).should('be.visible');
         }
 
         cy.findByText(rule.ports!).should('be.visible');
-        cy.findByText(getRuleActionLabel(rule.action)).should('be.visible');
+        cy.findByText(getRuleActionLabel(rule.action!)).should('be.visible');
       });
   });
 };

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

@@ -227,9 +227,9 @@ describe('update firewall', () => {
         .should('be.visible')
         .closest('tr')
         .within(() => {
-          cy.findByText(inboundRule.protocol).should('be.visible');
+          cy.findByText(inboundRule.protocol!).should('be.visible');
           cy.findByText(inboundRule.ports!).should('be.visible');
-          cy.findByText(getRuleActionLabel(inboundRule.action)).should(
+          cy.findByText(getRuleActionLabel(inboundRule.action!)).should(
             'be.visible'
           );
         });
@@ -242,9 +242,9 @@ describe('update firewall', () => {
         .should('be.visible')
         .closest('tr')
         .within(() => {
-          cy.findByText(outboundRule.protocol).should('be.visible');
+          cy.findByText(outboundRule.protocol!).should('be.visible');
           cy.findByText(outboundRule.ports!).should('be.visible');
-          cy.findByText(getRuleActionLabel(outboundRule.action)).should(
+          cy.findByText(getRuleActionLabel(outboundRule.action!)).should(
             'be.visible'
           );
         });

packages/manager/src/factories/firewalls.ts

@@ -10,7 +10,11 @@ import {
 } from '@linode/api-v4/lib/firewalls/types';
 import { Factory } from '@linode/utilities';
 
-import type { FirewallDeviceEntity } from '@linode/api-v4/lib/firewalls/types';
+import type {
+  FirewallDeviceEntity,
+  FirewallPrefixList,
+  FirewallRuleSet,
+} from '@linode/api-v4/lib/firewalls/types';
 
 export const firewallRuleFactory = Factory.Sync.makeFactory<FirewallRuleType>({
   action: 'DROP',
@@ -97,3 +101,35 @@ export const firewallSettingsFactory =
       vpc_interface: 1,
     },
   });
+
+export const firewallRuleSetFactory = Factory.Sync.makeFactory<FirewallRuleSet>(
+  {
+    created: '2025-11-05T00:00:00',
+    deleted: null,
+    description: Factory.each((i) => `firewall-ruleset-${i} description`),
+    label: Factory.each((i) => `firewall-ruleset-${i}`),
+    is_service_defined: false,
+    id: Factory.each((i) => i),
+    type: 'inbound',
+    rules: firewallRuleFactory.buildList(3),
+    updated: '2025-11-05T00:00:00',
+    version: 1,
+  }
+);
+
+export const firewallPrefixListFactory =
+  Factory.Sync.makeFactory<FirewallPrefixList>({
+    created: '2025-11-05T00:00:00',
+    updated: '2025-11-05T00:00:00',
+    description: Factory.each((i) => `firewall-prefixlist-${i} description`),
+    id: Factory.each((i) => i),
+    name: Factory.each((i) => `pl:system:resolvers:test-${i}`),
+    version: 1,
+    visibility: 'public',
+    ipv4: Factory.each((i) =>
+      Array.from({ length: 5 }, (_, j) => `139.144.${i}.${j}`)
+    ),
+    ipv6: Factory.each((i) =>
+      Array.from({ length: 5 }, (_, j) => `2600:3c05:e001:bc::${i}${j}`)
+    ),
+  });

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

@@ -12,6 +12,7 @@ const props: FirewallRuleActionMenuProps = {
   handleCloneFirewallRule: vi.fn(),
   handleDeleteFirewallRule: vi.fn(),
   handleOpenRuleDrawerForEditing: vi.fn(),
+  isRuleSetRowEnabled: false,
   idx: 1,
 };
 
@@ -25,8 +26,37 @@ describe('Firewall rule action menu', () => {
 
     await userEvent.click(actionMenuButton);
 
+    // "Edit", "Clone" and "Delete" are all visible and enabled
     for (const action of ['Edit', 'Clone', 'Delete']) {
       expect(getByText(action)).toBeVisible();
     }
   });
+
+  it('should include the correct actions when Firewall rules row is a RuleSet', async () => {
+    const { getByText, queryByText, queryByLabelText, findByRole } =
+      renderWithTheme(
+        <FirewallRuleActionMenu {...props} isRuleSetRowEnabled={true} />
+      );
+
+    const actionMenuButton = queryByLabelText(/^Action menu for/)!;
+
+    await userEvent.click(actionMenuButton);
+
+    // "Edit" is visible but disabled, "Clone" is not present, and "Remove" is visible and enabled
+    for (const action of ['Edit', 'Remove']) {
+      expect(getByText(action)).toBeVisible();
+    }
+    expect(queryByText('Clone')).toBeNull();
+
+    expect(getByText('Edit')).toBeDisabled();
+    expect(getByText('Remove')).toBeEnabled();
+
+    // Hover over "Edit" and assert tooltip text
+    const editButton = getByText('Edit');
+    await userEvent.hover(editButton);
+    const tooltip = await findByRole('tooltip');
+    expect(tooltip).toHaveTextContent(
+      'Edit your custom Rule Set\u2019s label, description, or rules, using the API. Rule Sets that are defined by a managed-service can only be updated by service accounts.'
+    );
+  });
 });

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

@@ -1,3 +1,4 @@
+import { Box } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
@@ -13,64 +14,78 @@ import type {
 
 export interface FirewallRuleActionMenuProps extends Partial<ActionMenuProps> {
   disabled: boolean;
-  handleCloneFirewallRule: (idx: number) => void;
+  handleCloneFirewallRule?: (idx: number) => void; // Cloning is NOT applicable in the case of ruleset
   handleDeleteFirewallRule: (idx: number) => void;
-  handleOpenRuleDrawerForEditing: (idx: number) => void;
+  handleOpenRuleDrawerForEditing?: (idx: number) => void; // Editing is NOT applicable in the case of ruleset
   idx: number;
+  isRuleSetRowEnabled: boolean;
 }
 
 export const FirewallRuleActionMenu = React.memo(
   (props: FirewallRuleActionMenuProps) => {
     const theme = useTheme<Theme>();
-    const matchesSmDown = useMediaQuery(theme.breakpoints.down('md'));
+    const matchesLgDown = useMediaQuery(theme.breakpoints.down('lg'));
+
+    const rulesetEditActionToolTipText =
+      'Edit your custom Rule Set\u2019s label, description, or rules, using the API. Rule Sets that are defined by a managed-service can only be updated by service accounts.';
 
     const {
       disabled,
       handleCloneFirewallRule,
       handleDeleteFirewallRule,
       handleOpenRuleDrawerForEditing,
       idx,
+      isRuleSetRowEnabled,
       ...actionMenuProps
     } = props;
 
     const actions: Action[] = [
       {
-        disabled,
+        disabled: disabled || isRuleSetRowEnabled,
         onClick: () => {
-          handleOpenRuleDrawerForEditing(idx);
+          handleOpenRuleDrawerForEditing?.(idx);
         },
         title: 'Edit',
+        tooltip: isRuleSetRowEnabled ? rulesetEditActionToolTipText : undefined,
       },
-      {
-        disabled,
-        onClick: () => {
-          handleCloneFirewallRule(idx);
-        },
-        title: 'Clone',
-      },
+      ...(!isRuleSetRowEnabled
+        ? [
+            {
+              disabled,
+              onClick: () => {
+                handleCloneFirewallRule?.(idx);
+              },
+              title: 'Clone',
+            },
+          ]
+        : []),
       {
         disabled,
         onClick: () => {
           handleDeleteFirewallRule(idx);
         },
-        title: 'Delete',
+        title: isRuleSetRowEnabled ? 'Remove' : 'Delete',
       },
     ];
 
     return (
       <>
-        {!matchesSmDown &&
-          actions.map((action) => {
-            return (
-              <InlineMenuAction
-                actionText={action.title}
-                disabled={action.disabled}
-                key={action.title}
-                onClick={action.onClick}
-              />
-            );
-          })}
-        {matchesSmDown && (
+        {!matchesLgDown && (
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            {actions.map((action) => {
+              return (
+                <InlineMenuAction
+                  actionText={action.title}
+                  disabled={action.disabled}
+                  key={action.title}
+                  onClick={action.onClick}
+                  tooltip={action.tooltip}
+                />
+              );
+            })}
+          </Box>
+        )}
+        {matchesLgDown && (
           <ActionMenu
             actionsList={actions}
             ariaLabel={`Action menu for Firewall Rule`}

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

@@ -76,7 +76,7 @@ export const FirewallRuleDrawer = React.memo(
       });
       setIPs(validatedIPs);
 
-      const _ports = itemsToPortString(presetPorts, ports);
+      const _ports = itemsToPortString(presetPorts, ports!);
 
       return {
         ...validateForm({
@@ -94,9 +94,9 @@ export const FirewallRuleDrawer = React.memo(
     };
 
     const onSubmit = (values: FormState) => {
-      const ports = itemsToPortString(presetPorts, values.ports);
+      const ports = itemsToPortString(presetPorts, values.ports!);
       const protocol = values.protocol as FirewallRuleProtocol;
-      const addresses = formValueToIPs(values.addresses, ips);
+      const addresses = formValueToIPs(values.addresses!, ips);
 
       const payload: FirewallRuleType = {
         action: values.action,

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

@@ -52,17 +52,17 @@ export const deriveTypeFromValuesAndIPs = (
 
   const predefinedFirewall = predefinedFirewallFromRule({
     action: 'ACCEPT',
-    addresses: formValueToIPs(values.addresses, ips),
+    addresses: formValueToIPs(values.addresses!, ips),
     ports: values.ports,
     protocol,
   });
 
   if (predefinedFirewall) {
     return predefinedFirewall;
   } else if (
-    values.protocol?.length > 0 ||
+    (values.protocol && values.protocol?.length > 0) ||
     (values.ports && values.ports?.length > 0) ||
-    values.addresses?.length > 0
+    (values.addresses && values.addresses?.length > 0)
   ) {
     return 'custom';
   }
@@ -163,7 +163,7 @@ export const getInitialFormValues = (
     ports: portStringToItems(ruleToModify.ports)[1],
     protocol: ruleToModify.protocol,
     type: predefinedFirewallFromRule(ruleToModify) || '',
-  };
+  } as FormState;
 };
 
 export const getInitialAddressFormValue = (
@@ -264,7 +264,7 @@ export const itemsToPortString = (
  * and converts it to FirewallOptionItem<string>[] and a custom input string.
  */
 export const portStringToItems = (
-  portString?: string
+  portString?: null | string
 ): [FirewallOptionItem<string>[], string] => {
   // Handle empty input
   if (!portString) {