upcoming: [UIE-9531] – Prevent referencing of RuleSet by a FW more than once

packages/manager/.changeset/pr-13169-upcoming-features-1764884932241.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Ensure a firewall can only reference a RuleSet once ([#13169](https://github.com/linode/manager/pull/13169))

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

@@ -60,6 +60,7 @@ const props: FirewallRuleDrawerProps = {
   category: 'inbound',
   isOpen: true,
   mode: 'create',
+  inboundAndOutboundRules: [],
   handleOpenPrefixListDrawer: mockHandleOpenPrefixListDrawer,
   onClose: mockOnClose,
   onSubmit: mockOnSubmit,

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

@@ -47,6 +47,7 @@ export const FirewallRuleDrawer = React.memo(
       isOpen,
       mode,
       onClose,
+      inboundAndOutboundRules,
       ruleToModifyOrView,
     } = props;
 
@@ -303,6 +304,7 @@ export const FirewallRuleDrawer = React.memo(
                         'ruleset'
                       );
                     }}
+                    inboundAndOutboundRules={inboundAndOutboundRules}
                     ruleErrors={ruleToModifyOrView?.errors}
                     {...formikProps}
                   />

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

@@ -18,6 +18,7 @@ export interface FirewallRuleDrawerProps {
     plRuleRef: PrefixListRuleReference,
     contextType: PrefixListDrawerContext['type']
   ) => void;
+  inboundAndOutboundRules: FirewallRuleType[];
   isOpen: boolean;
   mode: FirewallRuleDrawerMode;
   onClose: () => void;
@@ -67,5 +68,6 @@ export interface FirewallRuleSetFormProps
     prefixListLabel: string,
     plRuleRef: PrefixListRuleReference
   ) => void;
+  inboundAndOutboundRules: FirewallRuleType[];
   ruleErrors?: FirewallRuleError[];
 }

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

@@ -27,13 +27,14 @@ export const FirewallRuleSetForm = React.memo(
   (props: FirewallRuleSetFormProps) => {
     const {
       category,
+      closeDrawer,
       errors,
       handleOpenPrefixListDrawer,
       handleSubmit,
+      inboundAndOutboundRules,
       setFieldTouched,
       setFieldValue,
       touched,
-      closeDrawer,
       values,
     } = props;
 
@@ -59,7 +60,13 @@ export const FirewallRuleSetForm = React.memo(
       () =>
         ruleSets
           // TODO: Firewall RuleSets: Remove this client-side filter once the API supports filtering by the 'type' field
-          .filter((ruleSet) => ruleSet.type === category) // Display only rule sets applicable to the given category
+          .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,

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

@@ -547,6 +547,10 @@ export const FirewallRulesLanding = React.memo((props: Props) => {
             modeViewedFrom: ruleDrawer.mode,
           });
         }}
+        inboundAndOutboundRules={[
+          ...(rules.inbound ?? []),
+          ...(rules.outbound ?? []),
+        ]}
         isOpen={
           location.pathname.endsWith('add/inbound') ||
           location.pathname.endsWith('add/outbound') ||