feat: itemsControl property of Side Navigation (#2673)

Co-authored-by: ManzuraZakirova <[email protected]>

pages/side-navigation/app-layout.page.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import AppLayout from '~components/app-layout';
 import Badge from '~components/badge';
+import Select from '~components/select';
 import SideNavigation, { SideNavigationProps } from '~components/side-navigation';
 
 import labels from '../app-layout/utils/labels';
@@ -102,6 +103,17 @@ const items: SideNavigationProps.Item[] = [
   { type: 'link', text: 'Documentation', href: '#', external: true, externalIconAriaLabel: 'Opens in a new tab' },
 ];
 
+const itemsControl = (
+  <Select
+    options={[
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+    ]}
+    selectedOption={{ value: 'option1', label: 'Option 1' }}
+    onChange={() => null}
+  />
+);
+
 export default function SideNavigationPage() {
   const [open, setOpen] = React.useState(true);
 
@@ -125,6 +137,7 @@ export default function SideNavigationPage() {
             },
           }}
           items={items}
+          itemsControl={itemsControl}
         />
       }
       content={

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -14070,7 +14070,13 @@ Object that represents an expandable group of links.
       "type": "ReadonlyArray<SideNavigationProps.Item>",
     },
   ],
-  "regions": Array [],
+  "regions": Array [
+    Object {
+      "description": "A slot located below the header and above the items.",
+      "isDefault": false,
+      "name": "itemsControl",
+    },
+  ],
   "releaseStatus": "stable",
 }
 `;

src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -488,6 +488,7 @@ Object {
     "awsui_expandable-link-group_l0dv0",
     "awsui_header-link_l0dv0",
     "awsui_header_l0dv0",
+    "awsui_items-control_l0dv0",
     "awsui_link-active_l0dv0",
     "awsui_link_l0dv0",
     "awsui_list-variant-root_l0dv0",

src/side-navigation/__tests__/side-navigation.test.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 
+import Select from '../../../lib/components/select';
 import SideNavigation, { SideNavigationProps } from '../../../lib/components/side-navigation';
 import createWrapper from '../../../lib/components/test-utils/dom';
 
@@ -1219,6 +1220,20 @@ describe('SideNavigation', () => {
       expect(logo).toHaveAttribute('alt', 'logo');
     });
   });
+
+  describe('Items Control', () => {
+    it('renders Select component when provided', () => {
+      const wrapper = renderSideNavigation({
+        itemsControl: <Select options={[]} selectedOption={{}} onChange={() => null} />,
+      });
+      expect(wrapper.findItemsControl()!.getElement()).toBeInTheDocument();
+      expect(wrapper.findItemsControl()!.findSelect()?.getElement()).toBeInTheDocument();
+    });
+    it('returns null when items control is not provided', () => {
+      const wrapper = renderSideNavigation({});
+      expect(wrapper.findItemsControl()).toBeNull();
+    });
+  });
 });
 
 describe('URL sanitization', () => {

src/side-navigation/implementation.tsx

@@ -19,6 +19,7 @@ export type SideNavigationInternalProps = SideNavigationProps & InternalBaseComp
 
 export function SideNavigationImplementation({
   header,
+  itemsControl,
   activeHref,
   items = [],
   onFollow,
@@ -68,6 +69,7 @@ export function SideNavigationImplementation({
       {header && (
         <Header definition={header} activeHref={activeHref} fireChange={onChangeHandler} fireFollow={onFollowHandler} />
       )}
+      {itemsControl && <div className={styles['items-control']}>{itemsControl}</div>}
       {items && (
         <div className={styles['list-container']}>
           <NavigationItemsList

src/side-navigation/interfaces.tsx

@@ -16,6 +16,11 @@ export interface SideNavigationProps extends BaseComponentProps {
    */
   header?: SideNavigationProps.Header;
 
+  /**
+   * A slot located below the header and above the items.
+   **/
+  itemsControl?: React.ReactNode;
+
   /**
    * Specifies the `href` of the currently active link.
    * All items within the navigation with a matching `href` are highlighted.

src/side-navigation/styles.scss

@@ -52,6 +52,11 @@
   }
 }
 
+.items-control {
+  margin-block-start: awsui.$space-panel-content-top;
+  padding-inline: awsui.$space-l;
+}
+
 .list-container {
   margin-block-start: awsui.$space-panel-content-top;
   .with-toolbar > & {

src/test-utils/dom/side-navigation/index.ts

@@ -17,6 +17,10 @@ export default class SideNavigationWrapper extends ComponentWrapper {
     return this.findByClassName(styles['header-link']);
   }
 
+  findItemsControl(): ElementWrapper | null {
+    return this.findByClassName(styles['items-control']);
+  }
+
   findLinkByHref(href: string): ElementWrapper<HTMLAnchorElement> | null {
     return this.find(`.${styles.link}[href="${href}"]`);
   }