upcoming: [UIE-9730] - Add Beta/New Feature Chip Support for RuleSets and Prefix Lists

packages/manager/.changeset/pr-13164-upcoming-features-1764838771826.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Beta/New feature Chip support for RuleSets and Prefix Lists ([#13164](https://github.com/linode/manager/pull/13164))

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

@@ -7,7 +7,10 @@ import ArrowLeftIcon from 'src/assets/icons/arrow-left.svg';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 
-import { useIsFirewallRulesetsPrefixlistsEnabled } from '../../shared';
+import {
+  getFeatureChip,
+  useIsFirewallRulesetsPrefixlistsEnabled,
+} from '../../shared';
 import {
   getPrefixListType,
   PREFIXLIST_MARKED_FOR_DELETION_TEXT,
@@ -42,8 +45,11 @@ export const FirewallPrefixListDrawer = React.memo(
     const { category, context, onClose, isOpen, selectedPrefixListLabel } =
       props;
 
-    const { isFirewallRulesetsPrefixlistsFeatureEnabled } =
-      useIsFirewallRulesetsPrefixlistsEnabled();
+    const {
+      isFirewallRulesetsPrefixlistsFeatureEnabled,
+      isFirewallRulesetsPrefixListsBetaEnabled,
+      isFirewallRulesetsPrefixListsGAEnabled,
+    } = useIsFirewallRulesetsPrefixlistsEnabled();
     const { classes } = useStyles();
 
     const { data, error, isFetching } = useAllFirewallPrefixListsQuery(
@@ -118,6 +124,13 @@ export const FirewallPrefixListDrawer = React.memo(
         onClose={() => onClose({ closeAll: true })}
         open={isOpen}
         title={titleText}
+        titleSuffix={
+          getFeatureChip({
+            isFirewallRulesetsPrefixlistsFeatureEnabled,
+            isFirewallRulesetsPrefixListsBetaEnabled,
+            isFirewallRulesetsPrefixListsGAEnabled,
+          }) ?? undefined
+        }
       >
         <Box mt={2}>
           {prefixListDetails && (

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

@@ -1,4 +1,5 @@
 import { capitalize } from '@linode/utilities';
+import { within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
@@ -272,6 +273,26 @@ describe('ViewRuleSetDetailsDrawer', () => {
   );
 });
 
+describe('EditRuleDrawer', () => {
+  it('should not show the Firewall RS & PL feature chip in the title in Edit mode', () => {
+    spy.mockReturnValue({
+      isFirewallRulesetsPrefixlistsFeatureEnabled: true,
+      isFirewallRulesetsPrefixListsBetaEnabled: true,
+      isFirewallRulesetsPrefixListsLAEnabled: false,
+      isFirewallRulesetsPrefixListsGAEnabled: false,
+    });
+
+    const { getByTestId } = renderWithTheme(
+      <FirewallRuleDrawer {...props} mode="edit" />
+    );
+
+    const titleContainer = getByTestId('drawer-title-container');
+
+    // The beta (chip) should NOT be in the title area
+    expect(within(titleContainer).queryByText('beta')).not.toBeInTheDocument();
+  });
+});
+
 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,7 +6,10 @@ import * as React from 'react';
 
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
 
-import { useIsFirewallRulesetsPrefixlistsEnabled } from '../../shared';
+import {
+  getFeatureChip,
+  useIsFirewallRulesetsPrefixlistsEnabled,
+} from '../../shared';
 import {
   formValueToIPs,
   getInitialFormValues,
@@ -50,8 +53,11 @@ export const FirewallRuleDrawer = React.memo(
       ruleToModifyOrView,
     } = props;
 
-    const { isFirewallRulesetsPrefixlistsFeatureEnabled } =
-      useIsFirewallRulesetsPrefixlistsEnabled();
+    const {
+      isFirewallRulesetsPrefixlistsFeatureEnabled,
+      isFirewallRulesetsPrefixListsBetaEnabled,
+      isFirewallRulesetsPrefixListsGAEnabled,
+    } = useIsFirewallRulesetsPrefixlistsEnabled();
 
     /**
      * State for the type of entity being created: either a firewall 'rule' or
@@ -189,8 +195,23 @@ export const FirewallRuleDrawer = React.memo(
       return errors;
     };
 
+    const featureChip =
+      getFeatureChip({
+        isFirewallRulesetsPrefixlistsFeatureEnabled,
+        isFirewallRulesetsPrefixListsBetaEnabled,
+        isFirewallRulesetsPrefixListsGAEnabled,
+      }) ?? undefined;
+
+    // Do not show the Firewall RS & PL feature chip in Edit mode drawer title
+    const titleSuffix = mode === 'edit' ? undefined : featureChip;
+
     return (
-      <Drawer onClose={onClose} open={isOpen} title={title}>
+      <Drawer
+        onClose={onClose}
+        open={isOpen}
+        title={title}
+        titleSuffix={titleSuffix}
+      >
         {mode === 'create' && isFirewallRulesetsPrefixlistsFeatureEnabled && (
           <Grid container spacing={2}>
             {firewallRuleCreateOptions.map((option) => (

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

@@ -1,7 +1,6 @@
 import { useAllFirewallPrefixListsQuery } from '@linode/queries';
 import {
   Autocomplete,
-  BetaChip,
   Box,
   Button,
   Checkbox,
@@ -15,7 +14,10 @@ import Grid from '@mui/material/Grid';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { useIsFirewallRulesetsPrefixlistsEnabled } from 'src/features/Firewalls/shared';
+import {
+  getFeatureChip,
+  useIsFirewallRulesetsPrefixlistsEnabled,
+} from 'src/features/Firewalls/shared';
 
 import { getPrefixListType, groupPriority } from './shared';
 
@@ -121,7 +123,9 @@ export const MultiplePrefixListSelect = React.memo(
     const {
       isFirewallRulesetsPrefixlistsFeatureEnabled,
       isFirewallRulesetsPrefixListsBetaEnabled,
+      isFirewallRulesetsPrefixListsGAEnabled,
     } = useIsFirewallRulesetsPrefixlistsEnabled();
+
     const { data, isLoading } = useAllFirewallPrefixListsQuery(
       isFirewallRulesetsPrefixlistsFeatureEnabled
     );
@@ -326,7 +330,11 @@ export const MultiplePrefixListSelect = React.memo(
         {pls.length > 0 && (
           <Box display="flex">
             <InputLabel sx={{ margin: 0 }}>Prefix List</InputLabel>
-            {isFirewallRulesetsPrefixListsBetaEnabled && <BetaChip />}
+            {getFeatureChip({
+              isFirewallRulesetsPrefixlistsFeatureEnabled,
+              isFirewallRulesetsPrefixListsBetaEnabled,
+              isFirewallRulesetsPrefixListsGAEnabled,
+            })}
           </Box>
         )}
         <Stack spacing={1}>

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

@@ -11,6 +11,7 @@ import {
   buildPrefixListReferenceMap,
   generateAddressesLabel,
   generateAddressesLabelV2,
+  getFeatureChip,
   predefinedFirewallFromRule,
   useIsFirewallRulesetsPrefixlistsEnabled,
 } from './shared';
@@ -442,3 +443,43 @@ describe('useIsFirewallRulesetsPrefixlistsEnabled', () => {
     });
   });
 });
+
+describe('getFeatureChip', () => {
+  it('returns null if RS & PL feature is disabled', () => {
+    const result = getFeatureChip({
+      isFirewallRulesetsPrefixlistsFeatureEnabled: false,
+      isFirewallRulesetsPrefixListsBetaEnabled: false,
+      isFirewallRulesetsPrefixListsGAEnabled: false,
+    });
+    expect(result).toBeNull();
+  });
+
+  it('returns BetaChip if Firewall RS & PL feature is enabled and Beta is true', () => {
+    const result = getFeatureChip({
+      isFirewallRulesetsPrefixlistsFeatureEnabled: true,
+      isFirewallRulesetsPrefixListsBetaEnabled: true,
+      isFirewallRulesetsPrefixListsGAEnabled: false,
+    });
+    const { getByText } = renderWithTheme(<>{result}</>);
+    expect(getByText('beta')).toBeVisible();
+  });
+
+  it('returns NewFeatureChip if Firewall RS & PL feature is enabled, GA is true, and Beta is false', () => {
+    const result = getFeatureChip({
+      isFirewallRulesetsPrefixlistsFeatureEnabled: true,
+      isFirewallRulesetsPrefixListsBetaEnabled: false,
+      isFirewallRulesetsPrefixListsGAEnabled: true,
+    });
+    const { getByText } = renderWithTheme(<>{result}</>);
+    expect(getByText('new')).toBeVisible();
+  });
+
+  it('returns null if feature is enabled but neither Beta nor GA', () => {
+    const result = getFeatureChip({
+      isFirewallRulesetsPrefixlistsFeatureEnabled: true,
+      isFirewallRulesetsPrefixListsBetaEnabled: false,
+      isFirewallRulesetsPrefixListsGAEnabled: false,
+    });
+    expect(result).toBeNull();
+  });
+});

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

@@ -1,4 +1,4 @@
-import { Box, Chip, Tooltip } from '@linode/ui';
+import { BetaChip, Box, Chip, NewFeatureChip, Tooltip } from '@linode/ui';
 import { capitalize, truncateAndJoinList } from '@linode/utilities';
 import React from 'react';
 
@@ -580,3 +580,24 @@ export const useIsFirewallRulesetsPrefixlistsEnabled = () => {
       flags.fwRulesetsPrefixLists?.ga ?? false,
   };
 };
+
+/**
+ * Returns the feature chip for Firewall Rulesets & Prefix Lists.
+ *
+ * - Shows `<BetaChip />` if the feature is in Beta.
+ * - Shows `<NewFeatureChip />` if the feature is in GA.
+ * - Returns `null` if the feature is disabled OR if the feature is enabled but no chip applies.
+ */
+export const getFeatureChip = ({
+  isFirewallRulesetsPrefixlistsFeatureEnabled,
+  isFirewallRulesetsPrefixListsBetaEnabled,
+  isFirewallRulesetsPrefixListsGAEnabled,
+}: Omit<
+  ReturnType<typeof useIsFirewallRulesetsPrefixlistsEnabled>,
+  'isFirewallRulesetsPrefixListsLAEnabled'
+>) => {
+  if (!isFirewallRulesetsPrefixlistsFeatureEnabled) return null;
+  if (isFirewallRulesetsPrefixListsBetaEnabled) return <BetaChip />;
+  if (isFirewallRulesetsPrefixListsGAEnabled) return <NewFeatureChip />;
+  return null;
+};

packages/ui/src/components/Drawer/Drawer.tsx

@@ -154,7 +154,11 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
         >
           <Grid>
             {isFetching ? null : (
-              <Box alignItems="center" display="flex">
+              <Box
+                alignItems="center"
+                data-testid="drawer-title-container"
+                display="flex"
+              >
                 <Typography
                   data-qa-drawer-title={lastTitleRef.current}
                   data-testid="drawer-title"