upcoming: [UIE-9512, UIE-9530] - New Rule Set Details Drawer with Marked for Deletion status

packages/manager/.changeset/pr-13108-upcoming-features-1763746838424.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+New Rule Set Details drawer with Marked for Deletion status ([#13108](https://github.com/linode/manager/pull/13108))

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

@@ -1,6 +1,8 @@
+import { capitalize } from '@linode/utilities';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
+import { firewallRuleSetFactory } from 'src/factories';
 import { allIPs } from 'src/features/Firewalls/shared';
 import { stringToExtendedIP } from 'src/utilities/ipUtils';
 import { renderWithTheme } from 'src/utilities/testHelpers';
@@ -18,12 +20,35 @@ import {
   validateForm,
   validateIPs,
 } from './FirewallRuleDrawer.utils';
-import { PORT_PRESETS } from './shared';
+import { PORT_PRESETS, RULESET_MARKED_FOR_DELETION_TEXT } from './shared';
 
 import type { FirewallRuleDrawerProps } from './FirewallRuleDrawer.types';
 import type { ExtendedFirewallRule } from './firewallRuleEditor';
-import type { FirewallRuleError } from './shared';
-import type { FirewallPolicyType } from '@linode/api-v4/lib/firewalls/types';
+import type { Category, FirewallRuleError } from './shared';
+import type {
+  FirewallPolicyType,
+  FirewallRuleSet,
+} from '@linode/api-v4/lib/firewalls/types';
+
+const queryMocks = vi.hoisted(() => ({
+  useFirewallRuleSetQuery: vi.fn().mockReturnValue({}),
+}));
+
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useFirewallRuleSetQuery: queryMocks.useFirewallRuleSetQuery,
+  };
+});
+
+vi.mock('@linode/utilities', async () => {
+  const actual = await vi.importActual('@linode/utilities');
+  return {
+    ...actual,
+    getUserTimezone: vi.fn().mockReturnValue('utc'),
+  };
+});
 
 const mockOnClose = vi.fn();
 const mockOnSubmit = vi.fn();
@@ -144,6 +169,92 @@ describe('AddRuleSetDrawer', () => {
   });
 });
 
+describe('ViewRuleSetDetailsDrawer', () => {
+  beforeEach(() => {
+    spy.mockReturnValue({ isFirewallRulesetsPrefixlistsEnabled: true });
+  });
+
+  const activeRuleSet = firewallRuleSetFactory.build({ id: 123 });
+  const deletedRuleSet = firewallRuleSetFactory.build({
+    id: 456,
+    deleted: '2025-07-24T04:23:17',
+  });
+
+  it.each([
+    ['inbound', activeRuleSet],
+    ['outbound', activeRuleSet],
+    ['inbound', deletedRuleSet],
+    ['outbound', deletedRuleSet],
+  ] as [Category, FirewallRuleSet][])(
+    'renders %s ruleset drawer (%s)',
+    async (category, mockData) => {
+      queryMocks.useFirewallRuleSetQuery.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        error: null,
+      });
+
+      const { getByText, getByRole, getByTestId, findByText, queryByText } =
+        renderWithTheme(
+          <FirewallRuleDrawer
+            {...props}
+            category={category}
+            mode="view"
+            ruleToModifyOrView={{
+              ruleset: mockData.id,
+              originalIndex: 0,
+              status: 'NEW',
+            }}
+          />
+        );
+
+      // Drawer title
+      expect(
+        getByText(`${capitalize(category)} Rule Set details`)
+      ).toBeVisible();
+
+      // Labels
+      const labels = [
+        'Label',
+        'ID',
+        'Description',
+        'Service Defined',
+        'Version',
+        'Created',
+        'Updated',
+      ];
+      labels.forEach((label) => expect(getByText(`${label}:`)).toBeVisible());
+
+      // Check ID value
+      expect(getByText(`${mockData.id}`)).toBeVisible();
+
+      if (mockData.deleted) {
+        // Marked for deletion status section
+        expect(getByText('Marked for deletion:')).toBeVisible();
+        expect(getByText('2025-07-24 04:23')).toBeVisible();
+        // Tooltip icon should exist
+        const tooltipIcon = getByTestId('tooltip-info-icon');
+        expect(tooltipIcon).toBeInTheDocument();
+
+        // Tooltip text should exist
+        await userEvent.hover(tooltipIcon);
+        expect(
+          await findByText(RULESET_MARKED_FOR_DELETION_TEXT)
+        ).toBeVisible();
+      } else {
+        // Marked for deletion status section should not exist
+        expect(queryByText('Marked for deletion:')).not.toBeInTheDocument();
+      }
+
+      // Rules section
+      expect(getByText(`${capitalize(category)} Rules`)).toBeVisible();
+
+      // Cancel button
+      expect(getByRole('button', { name: 'Cancel' })).toBeVisible();
+    }
+  );
+});
+
 describe('utilities', () => {
   describe('formValueToIPs', () => {
     it('returns a complete set of IPs given a string form value', () => {

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

@@ -6,10 +6,7 @@ import * as React from 'react';
 
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
 
-import {
-  type FirewallOptionItem,
-  useIsFirewallRulesetsPrefixlistsEnabled,
-} from '../../shared';
+import { useIsFirewallRulesetsPrefixlistsEnabled } from '../../shared';
 import {
   formValueToIPs,
   getInitialFormValues,
@@ -20,9 +17,11 @@ import {
   validateIPs,
 } from './FirewallRuleDrawer.utils';
 import { FirewallRuleForm } from './FirewallRuleForm';
+import { FirewallRuleSetDetailsView } from './FirewallRuleSetDetailsView';
 import { FirewallRuleSetForm } from './FirewallRuleSetForm';
 import { firewallRuleCreateOptions } from './shared';
 
+import type { FirewallOptionItem } from '../../shared';
 import type {
   FirewallCreateEntityType,
   FirewallRuleDrawerProps,
@@ -40,7 +39,7 @@ import type { ExtendedIP } from 'src/utilities/ipUtils';
 // =============================================================================
 export const FirewallRuleDrawer = React.memo(
   (props: FirewallRuleDrawerProps) => {
-    const { category, isOpen, mode, onClose, ruleToModify } = props;
+    const { category, isOpen, mode, onClose, ruleToModifyOrView } = props;
 
     const { isFirewallRulesetsPrefixlistsEnabled } =
       useIsFirewallRulesetsPrefixlistsEnabled();
@@ -69,9 +68,9 @@ export const FirewallRuleDrawer = React.memo(
     React.useEffect(() => {
       // Reset state. If we're in EDIT mode, set IPs to the addresses of the rule we're modifying
       // (along with any errors we may have).
-      if (mode === 'edit' && ruleToModify) {
-        setIPs(getInitialIPs(ruleToModify));
-        setPresetPorts(portStringToItems(ruleToModify.ports)[0]);
+      if (mode === 'edit' && ruleToModifyOrView) {
+        setIPs(getInitialIPs(ruleToModifyOrView));
+        setPresetPorts(portStringToItems(ruleToModifyOrView.ports)[0]);
       } else if (isOpen) {
         setPresetPorts([]);
       } else {
@@ -87,14 +86,21 @@ export const FirewallRuleDrawer = React.memo(
       ) {
         setCreateEntityType('rule');
       }
-    }, [mode, isOpen, ruleToModify, isFirewallRulesetsPrefixlistsEnabled]);
+    }, [
+      mode,
+      isOpen,
+      ruleToModifyOrView,
+      isFirewallRulesetsPrefixlistsEnabled,
+    ]);
 
     const title =
       mode === 'create'
         ? `Add an ${capitalize(category)} Rule${
             isFirewallRulesetsPrefixlistsEnabled ? ' or Rule Set' : ''
           }`
-        : 'Edit Rule';
+        : mode === 'edit'
+          ? 'Edit Rule'
+          : `${capitalize(category)} Rule Set details`;
 
     const addressesLabel = category === 'inbound' ? 'source' : 'destination';
 
@@ -185,9 +191,10 @@ export const FirewallRuleDrawer = React.memo(
           </Grid>
         )}
 
-        {(mode === 'edit' || createEntityType === 'rule') && (
+        {(mode === 'edit' ||
+          (mode === 'create' && createEntityType === 'rule')) && (
           <Formik<FormState>
-            initialValues={getInitialFormValues(ruleToModify)}
+            initialValues={getInitialFormValues(ruleToModifyOrView)}
             onSubmit={onSubmitRule}
             validate={onValidateRule}
             validateOnBlur={false}
@@ -210,7 +217,7 @@ export const FirewallRuleDrawer = React.memo(
                   ips={ips}
                   mode={mode}
                   presetPorts={presetPorts}
-                  ruleErrors={ruleToModify?.errors}
+                  ruleErrors={ruleToModifyOrView?.errors}
                   setIPs={setIPs}
                   setPresetPorts={setPresetPorts}
                   {...formikProps}
@@ -246,17 +253,28 @@ export const FirewallRuleDrawer = React.memo(
                   <FirewallRuleSetForm
                     category={category}
                     closeDrawer={onClose}
-                    ruleErrors={ruleToModify?.errors}
+                    ruleErrors={ruleToModifyOrView?.errors}
                     {...formikProps}
                   />
                 </>
               )}
             </Formik>
           )}
-        <Typography variant="body1">
-          Rule changes don&rsquo;t take effect immediately. You can add or
-          delete rules before saving all your changes to this Firewall.
-        </Typography>
+
+        {mode === 'view' && (
+          <FirewallRuleSetDetailsView
+            category={category}
+            closeDrawer={onClose}
+            ruleset={ruleToModifyOrView?.ruleset}
+          />
+        )}
+
+        {(mode === 'create' || mode === 'edit') && (
+          <Typography variant="body1">
+            Rule changes don&rsquo;t take effect immediately. You can add or
+            delete rules before saving all your changes to this Firewall.
+          </Typography>
+        )}
       </Drawer>
     );
   }

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

@@ -8,15 +8,15 @@ import type {
 import type { FormikProps } from 'formik';
 import type { ExtendedIP } from 'src/utilities/ipUtils';
 
-export type FirewallRuleDrawerMode = 'create' | 'edit';
+export type FirewallRuleDrawerMode = 'create' | 'edit' | 'view';
 
 export interface FirewallRuleDrawerProps {
   category: Category;
   isOpen: boolean;
   mode: FirewallRuleDrawerMode;
   onClose: () => void;
   onSubmit: (category: 'inbound' | 'outbound', rule: FirewallRuleType) => void;
-  ruleToModify?: ExtendedFirewallRule;
+  ruleToModifyOrView?: ExtendedFirewallRule;
 }
 
 export interface FormState {