change: [UIE-9701] - Add Back Navigation functionality in Drawer & Integrate the change with PrefixList Drawer (#13151)

* upcoming: [UIE-9698] - Add Beta Chip for Drawer

* Add Storybook

* PR feedback

* PR feedback @pmakode-akamai

* upcoming: [UIE-9701] - Add Back Navigation Icon to Drawer title

* Added changeset:  Add Back Navigation functionality in Drawer

* pr feedback

* Fix: test failure and back icon while `isFetching` is true

* Add test for back icon in PrefixList Drawer

* Added changeset: Add back navigation functionality to Drawer and integrate it with PrefixList Drawer

* Remove changed changeset

* Update comment for clarity

---------

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

Author: harsh-akamai

packages/manager/.changeset/pr-13151-upcoming-features-1765447199412.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add back navigation functionality to Drawer and integrate it with PrefixList Drawer ([#13151](https://github.com/linode/manager/pull/13151))

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

@@ -47,35 +47,40 @@ const computeExpectedElements = (
   let title = 'Prefix List details';
   let button = 'Close';
   let label = 'Name:';
+  let hasBackNavigation = false;
 
   if (context?.type === 'ruleset' && context.modeViewedFrom === 'create') {
     title = `Add an ${capitalize(category)} Rule or Rule Set`;
     button = `Back to ${capitalize(category)} Rule Set`;
     label = 'Prefix List Name:';
+    hasBackNavigation = true;
   }
 
   if (context?.type === 'rule' && context.modeViewedFrom === 'create') {
     title = `Add an ${capitalize(category)} Rule or Rule Set`;
     button = `Back to ${capitalize(category)} Rule`;
     label = 'Prefix List Name:';
+    hasBackNavigation = true;
   }
 
   if (context?.type === 'ruleset' && context.modeViewedFrom === 'view') {
     title = `${capitalize(category)} Rule Set details`;
     button = 'Back to the Rule Set';
     label = 'Prefix List Name:';
+    hasBackNavigation = true;
   }
 
   if (context?.type === 'rule' && context.modeViewedFrom === 'edit') {
     title = 'Edit Rule';
     button = 'Back to Rule';
     label = 'Prefix List Name:';
+    hasBackNavigation = true;
   }
 
   // Default values when there is no specific drawer context
   // (e.g., type === 'rule' and modeViewedFrom === undefined,
   // meaning the drawer is opened directly from the Firewall Table row)
-  return { title, button, label };
+  return { title, button, label, hasBackNavigation };
 };
 
 describe('FirewallPrefixListDrawer', () => {
@@ -158,7 +163,7 @@ describe('FirewallPrefixListDrawer', () => {
         mockData,
       ]);
 
-      const { getByText, getByRole } = renderWithTheme(
+      const { getByText, getByRole, queryByLabelText } = renderWithTheme(
         <FirewallPrefixListDrawer
           category={category}
           context={context}
@@ -169,10 +174,16 @@ describe('FirewallPrefixListDrawer', () => {
       );
 
       // Compute expectations
-      const { title, button, label } = computeExpectedElements(
-        category,
-        context
-      );
+      const { title, button, label, hasBackNavigation } =
+        computeExpectedElements(category, context);
+
+      // Back Navigation (Expected only for second-level drawers)
+      const backIconButton = queryByLabelText('back navigation');
+      if (hasBackNavigation) {
+        expect(backIconButton).toBeVisible();
+      } else {
+        expect(backIconButton).not.toBeInTheDocument();
+      }
 
       // Title
       expect(getByText(title)).toBeVisible();

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

@@ -210,6 +210,9 @@ export const FirewallPrefixListDrawer = React.memo(
     return (
       <Drawer
         error={error}
+        handleBackNavigation={
+          backButtonText ? () => onClose({ closeAll: false }) : undefined
+        }
         isFetching={isFetching}
         onClose={() => onClose({ closeAll: true })}
         open={isOpen}

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

@@ -183,6 +183,70 @@ export const WithError: Story = {
   },
 };
 
+export const WithBackNavigation: Story = {
+  args: {
+    isFetching: false,
+    open: false,
+    title: 'My Drawer',
+  },
+  render: (args) => {
+    const DrawerExampleWrapper = () => {
+      const [open, setOpen] = React.useState(args.open);
+
+      return (
+        <>
+          <Button
+            buttonType="primary"
+            onClick={() => setOpen(true)}
+            sx={{ m: 4 }}
+          >
+            Click to open Drawer
+          </Button>
+          <Drawer
+            {...args}
+            handleBackNavigation={() => {}}
+            onClose={() => setOpen(true)}
+            open={open}
+          >
+            <Typography sx={{ mb: 2 }}>
+              I smirked at their Kale chips banh-mi fingerstache brunch in
+              Williamsburg.
+            </Typography>
+            <Typography sx={{ mb: 2 }}>
+              Meanwhile in my closet-style flat in Red-Hook, my pour-over coffee
+              glitched on my vinyl record player while I styled the bottom left
+              corner of my beard. Those artisan tacos I ordered were infused
+              with turmeric and locally sourced honey, a true farm-to-table
+              vibe. Pabst Blue Ribbon in hand, I sat on my reclaimed wood bench
+              next to the macramé plant holder.
+            </Typography>
+            <Typography sx={{ mb: 2 }}>
+              Narwhal selfies dominated my Instagram feed, hashtagged with "slow
+              living" and "normcore aesthetics". My kombucha brewing kit arrived
+              just in time for me to ferment my own chai-infused blend. As I
+              adjusted my vintage round glasses, a tiny house documentary
+              started playing softly in the background. The retro typewriter
+              clacked as I typed out my minimalist poetry on sustainably sourced
+              paper. The sun glowed through the window, shining light on the
+              delightful cracks of my Apple watch.
+            </Typography>
+            <Typography sx={{ mb: 2 }}>It was Saturday.</Typography>
+            <ActionsPanel
+              primaryButtonProps={{ label: 'Save' }}
+              secondaryButtonProps={{
+                label: 'Cancel',
+                onClick: () => setOpen(false),
+              }}
+            />
+          </Drawer>
+        </>
+      );
+    };
+
+    return DrawerExampleWrapper();
+  },
+};
+
 export const WithTitleSuffix: Story = {
   args: {
     isFetching: false,

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

@@ -83,4 +83,13 @@ describe('Drawer', () => {
 
     expect(getByText('beta')).toBeVisible();
   });
+
+  it('should render a Dailog with back button if handleBackNavigation is provided', () => {
+    const { getByLabelText } = renderWithTheme(
+      <Drawer {...defaultArgs} handleBackNavigation={() => {}} open={true} />,
+    );
+    const iconButton = getByLabelText('back navigation');
+
+    expect(iconButton).toBeVisible();
+  });
 });

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

@@ -4,6 +4,7 @@ import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
+import ChevronLeftIcon from '../../assets/icons/chevron-left.svg';
 import { getErrorText } from '../../utilities/error';
 import { convertForAria } from '../../utilities/stringUtils';
 import { Box } from '../Box';
@@ -23,6 +24,11 @@ export interface DrawerProps extends _DrawerProps {
    * It prevents the drawer from showing broken content.
    */
   error?: APIError[] | null | string;
+  /**
+   * An optional prop that handles back navigation for second-level drawers.
+   * It can act as a visual indicator, similar to a back button or `onClose` handler.
+   */
+  handleBackNavigation?: () => void;
   /**
    * Whether the drawer is fetching the entity's data.
    *
@@ -62,12 +68,13 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
     const {
       children,
       error,
-      titleSuffix,
+      handleBackNavigation,
       isFetching,
       onClose,
       open,
       sx,
       title,
+      titleSuffix,
       wide,
       ...rest
     } = props;
@@ -159,6 +166,25 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
                 data-testid="drawer-title-container"
                 display="flex"
               >
+                {handleBackNavigation && (
+                  <IconButton
+                    aria-label="back navigation"
+                    data-qa-back-navigation
+                    disableRipple
+                    onClick={handleBackNavigation}
+                    sx={(theme) => ({
+                      color: theme.palette.text.primary,
+                      padding: 0,
+                      marginRight: theme.spacingFunction(8),
+                      '& svg': {
+                        width: 24,
+                        height: 24,
+                      },
+                    })}
+                  >
+                    <ChevronLeftIcon />
+                  </IconButton>
+                )}
                 <Typography
                   data-qa-drawer-title={lastTitleRef.current}
                   data-testid="drawer-title"