upcoming: [M3-10713] – Create & use new JSON-based Firewall RuleSets & Prefix Lists feature flag (#13125)

* Add JSON-based feature flag for Firewall RuleSets and Prefix Lists feature; update useIsFirewallRulesetsPrefixlistsEnabled() to use new feature flag accordingly

* Remove old feature flag that is now obsolete

* Added changeset: Use new JSON-based fwRulesetsPrefixLists feature flag for Firewall RuleSets and Prefix Lists feature

---------

Co-authored-by: Dajahi Wiley <[email protected]>
Co-authored-by: pmakode-akamai <[email protected]>

Author: 3 people

packages/manager/.changeset/pr-13125-upcoming-features-1763760083439.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Use new JSON-based fwRulesetsPrefixLists feature flag for Firewall RuleSets and Prefix Lists feature ([#13125](https://github.com/linode/manager/pull/13125))

packages/manager/src/dev-tools/FeatureFlagTool.tsx

@@ -31,8 +31,8 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'cloudNat', label: 'Cloud NAT' },
   { flag: 'disableLargestGbPlans', label: 'Disable Largest GB Plans' },
   {
-    flag: 'firewallRulesetsPrefixlists',
-    label: 'Firewall Rulesets & Prefixlists',
+    flag: 'fwRulesetsPrefixLists',
+    label: 'Firewall RuleSets and Prefix Lists (JSON-based)',
   },
   { flag: 'gecko2', label: 'Gecko' },
   { flag: 'generationalPlansv2', label: 'Generational compute plans' },

packages/manager/src/featureFlags.ts

@@ -171,6 +171,11 @@ interface MTC {
   supportedRegions: Region['id'][];
 }
 
+interface FirewallRulesetsAndPrefixLists extends BetaFeatureFlag {
+  ga: boolean;
+  la: boolean;
+}
+
 export interface Flags {
   acceleratedPlans: AcceleratedPlansFlag;
   aclp: AclpFlag;
@@ -200,7 +205,7 @@ export interface Flags {
   dbaasV2: BetaFeatureFlag;
   dbaasV2MonitorMetrics: BetaFeatureFlag;
   disableLargestGbPlans: boolean;
-  firewallRulesetsPrefixlists: boolean;
+  fwRulesetsPrefixLists: FirewallRulesetsAndPrefixLists;
   gecko2: GeckoFeatureFlag;
   generationalPlansv2: GenerationalPlansFlag;
   gpuv2: GpuV2;

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

@@ -67,7 +67,12 @@ const spy = vi.spyOn(shared, 'useIsFirewallRulesetsPrefixlistsEnabled');
 
 describe('AddRuleDrawer', () => {
   it('renders the title', () => {
-    spy.mockReturnValue({ isFirewallRulesetsPrefixlistsEnabled: false });
+    spy.mockReturnValue({
+      isFirewallRulesetsPrefixlistsFeatureEnabled: false,
+      isFirewallRulesetsPrefixListsBetaEnabled: false,
+      isFirewallRulesetsPrefixListsLAEnabled: false,
+      isFirewallRulesetsPrefixListsGAEnabled: false,
+    });
 
     const { getByText } = renderWithTheme(
       <FirewallRuleDrawer {...props} category="inbound" mode="create" />
@@ -98,7 +103,12 @@ describe('AddRuleDrawer', () => {
 
 describe('AddRuleSetDrawer', () => {
   beforeEach(() => {
-    spy.mockReturnValue({ isFirewallRulesetsPrefixlistsEnabled: true });
+    spy.mockReturnValue({
+      isFirewallRulesetsPrefixlistsFeatureEnabled: true,
+      isFirewallRulesetsPrefixListsBetaEnabled: false,
+      isFirewallRulesetsPrefixListsLAEnabled: false,
+      isFirewallRulesetsPrefixListsGAEnabled: false,
+    });
   });
 
   it('renders the drawer title', () => {
@@ -171,7 +181,12 @@ describe('AddRuleSetDrawer', () => {
 
 describe('ViewRuleSetDetailsDrawer', () => {
   beforeEach(() => {
-    spy.mockReturnValue({ isFirewallRulesetsPrefixlistsEnabled: true });
+    spy.mockReturnValue({
+      isFirewallRulesetsPrefixlistsFeatureEnabled: true,
+      isFirewallRulesetsPrefixListsBetaEnabled: false,
+      isFirewallRulesetsPrefixListsLAEnabled: false,
+      isFirewallRulesetsPrefixListsGAEnabled: false,
+    });
   });
 
   const activeRuleSet = firewallRuleSetFactory.build({ id: 123 });

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

@@ -41,7 +41,7 @@ export const FirewallRuleDrawer = React.memo(
   (props: FirewallRuleDrawerProps) => {
     const { category, isOpen, mode, onClose, ruleToModifyOrView } = props;
 
-    const { isFirewallRulesetsPrefixlistsEnabled } =
+    const { isFirewallRulesetsPrefixlistsFeatureEnabled } =
       useIsFirewallRulesetsPrefixlistsEnabled();
 
     /**
@@ -82,21 +82,21 @@ export const FirewallRuleDrawer = React.memo(
       // 2. The drawer is closed - ensures the next time it opens, it starts with the default 'rule' selection.
       if (
         mode === 'create' &&
-        (!isFirewallRulesetsPrefixlistsEnabled || !isOpen)
+        (!isFirewallRulesetsPrefixlistsFeatureEnabled || !isOpen)
       ) {
         setCreateEntityType('rule');
       }
     }, [
       mode,
       isOpen,
       ruleToModifyOrView,
-      isFirewallRulesetsPrefixlistsEnabled,
+      isFirewallRulesetsPrefixlistsFeatureEnabled,
     ]);
 
     const title =
       mode === 'create'
         ? `Add an ${capitalize(category)} Rule${
-            isFirewallRulesetsPrefixlistsEnabled ? ' or Rule Set' : ''
+            isFirewallRulesetsPrefixlistsFeatureEnabled ? ' or Rule Set' : ''
           }`
         : mode === 'edit'
           ? 'Edit Rule'
@@ -160,7 +160,7 @@ export const FirewallRuleDrawer = React.memo(
 
     return (
       <Drawer onClose={onClose} open={isOpen} title={title}>
-        {mode === 'create' && isFirewallRulesetsPrefixlistsEnabled && (
+        {mode === 'create' && isFirewallRulesetsPrefixlistsFeatureEnabled && (
           <Grid container spacing={2}>
             {firewallRuleCreateOptions.map((option) => (
               <SelectionCard
@@ -229,7 +229,7 @@ export const FirewallRuleDrawer = React.memo(
 
         {mode === 'create' &&
           createEntityType === 'ruleset' &&
-          isFirewallRulesetsPrefixlistsEnabled && (
+          isFirewallRulesetsPrefixlistsFeatureEnabled && (
             <Formik<FormRuleSetState>
               initialValues={{ ruleset: -1 }}
               onSubmit={(values) => {

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

@@ -41,7 +41,7 @@ export const FirewallRuleSetDetailsView = (
 ) => {
   const { category, closeDrawer, ruleset } = props;
 
-  const { isFirewallRulesetsPrefixlistsEnabled } =
+  const { isFirewallRulesetsPrefixlistsFeatureEnabled } =
     useIsFirewallRulesetsPrefixlistsEnabled();
   const { classes } = useStyles();
 
@@ -54,7 +54,7 @@ export const FirewallRuleSetDetailsView = (
     error,
   } = useFirewallRuleSetQuery(
     ruleset ?? -1,
-    isValidRuleSetId && isFirewallRulesetsPrefixlistsEnabled
+    isValidRuleSetId && isFirewallRulesetsPrefixlistsFeatureEnabled
   );
 
   if (!isValidRuleSetId) {

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

@@ -38,11 +38,11 @@ export const FirewallRuleSetForm = React.memo(
 
     const { classes } = useStyles();
 
-    const { isFirewallRulesetsPrefixlistsEnabled } =
+    const { isFirewallRulesetsPrefixlistsFeatureEnabled } =
       useIsFirewallRulesetsPrefixlistsEnabled();
 
     const { data, error, isLoading } = useAllFirewallRuleSetsQuery(
-      isFirewallRulesetsPrefixlistsEnabled
+      isFirewallRulesetsPrefixlistsFeatureEnabled
     );
 
     const ruleSets = data ?? [];

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

@@ -310,12 +310,12 @@ const FirewallRuleTableRow = React.memo((props: FirewallRuleTableRowProps) => {
     ruleset,
   } = props;
 
-  const { isFirewallRulesetsPrefixlistsEnabled } =
+  const { isFirewallRulesetsPrefixlistsFeatureEnabled } =
     useIsFirewallRulesetsPrefixlistsEnabled();
 
   const isRuleSetRow = Boolean(ruleset);
   const isRuleSetRowEnabled =
-    isRuleSetRow && isFirewallRulesetsPrefixlistsEnabled;
+    isRuleSetRow && isFirewallRulesetsPrefixlistsFeatureEnabled;
 
   const isValidRuleSetId = ruleset !== undefined && ruleset !== null;
 

packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx

@@ -75,7 +75,7 @@ const FirewallLanding = () => {
   const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
   const [dialogMode, setDialogMode] = React.useState<Mode>('enable');
   const [isGenerateDialogOpen, setIsGenerateDialogOpen] = React.useState(false);
-  const { isFirewallRulesetsPrefixlistsEnabled } =
+  const { isFirewallRulesetsPrefixlistsFeatureEnabled } =
     useIsFirewallRulesetsPrefixlistsEnabled();
 
   const rulesColumnTooltipText =
@@ -208,7 +208,7 @@ const FirewallLanding = () => {
             <Hidden smDown>
               <TableCell sx={{ width: '15%' }}>
                 Rules
-                {isFirewallRulesetsPrefixlistsEnabled && (
+                {isFirewallRulesetsPrefixlistsFeatureEnabled && (
                   <TooltipIcon
                     status="info"
                     sxTooltipIcon={{

packages/manager/src/features/Firewalls/shared.test.ts

@@ -152,7 +152,16 @@ describe('generateAddressLabel', () => {
 
 describe('useIsFirewallRulesetsPrefixlistsEnabled', () => {
   it('returns true if the feature is enabled', async () => {
-    const options = { flags: { firewallRulesetsPrefixlists: true } };
+    const options = {
+      flags: {
+        fwRulesetsPrefixLists: {
+          enabled: true,
+          beta: false,
+          la: false,
+          ga: false,
+        },
+      },
+    };
 
     const { result } = renderHook(
       () => useIsFirewallRulesetsPrefixlistsEnabled(),
@@ -162,12 +171,23 @@ describe('useIsFirewallRulesetsPrefixlistsEnabled', () => {
     );
 
     await waitFor(() => {
-      expect(result.current.isFirewallRulesetsPrefixlistsEnabled).toBe(true);
+      expect(result.current.isFirewallRulesetsPrefixlistsFeatureEnabled).toBe(
+        true
+      );
     });
   });
 
   it('returns false if the feature is NOT enabled', async () => {
-    const options = { flags: { firewallRulesetsPrefixlists: false } };
+    const options = {
+      flags: {
+        fwRulesetsPrefixLists: {
+          enabled: false,
+          beta: false,
+          la: false,
+          ga: false,
+        },
+      },
+    };
 
     const { result } = renderHook(
       () => useIsFirewallRulesetsPrefixlistsEnabled(),
@@ -177,7 +197,9 @@ describe('useIsFirewallRulesetsPrefixlistsEnabled', () => {
     );
 
     await waitFor(() => {
-      expect(result.current.isFirewallRulesetsPrefixlistsEnabled).toBe(false);
+      expect(result.current.isFirewallRulesetsPrefixlistsFeatureEnabled).toBe(
+        false
+      );
     });
   });
 });