From b51b292ea700081d2494ef1992b7dc063d0fc16a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Wed, 3 Apr 2024 15:36:39 -0300
Subject: [PATCH] feat: add search menu button to header (#474)

---
 src/studio-header/HeaderBody.jsx        | 21 ++++++++++++++++++++-
 src/studio-header/StudioHeader.jsx      |  5 ++++-
 src/studio-header/StudioHeader.test.jsx | 15 +++++++++++++++
 src/studio-header/messages.js           |  5 +++++
 4 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/studio-header/HeaderBody.jsx b/src/studio-header/HeaderBody.jsx
index af3690610..7a4426d4b 100644
--- a/src/studio-header/HeaderBody.jsx
+++ b/src/studio-header/HeaderBody.jsx
@@ -1,18 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Button,
   Container,
+  Icon,
+  IconButton,
   Nav,
   Row,
 } from '@openedx/paragon';
-import { Close, MenuIcon } from '@openedx/paragon/icons';
+import { Close, MenuIcon, Search } from '@openedx/paragon/icons';
 
 import CourseLockUp from './CourseLockUp';
 import UserMenu from './UserMenu';
 import BrandNav from './BrandNav';
 import NavDropdownMenu from './NavDropdownMenu';
+import messages from './messages';
 
 const HeaderBody = ({
   logo,
@@ -32,7 +36,10 @@ const HeaderBody = ({
   isHiddenMainMenu,
   mainMenuDropdowns,
   outlineLink,
+  searchButtonAction,
 }) => {
+  const intl = useIntl();
+
   const renderBrandNav = (
     <BrandNav
       {...{
@@ -96,6 +103,16 @@ const HeaderBody = ({
           </>
         )}
         <ActionRow.Spacer />
+        {searchButtonAction && (
+          <Nav>
+            <IconButton
+              src={Search}
+              iconAs={Icon}
+              onClick={searchButtonAction}
+              aria-label={intl.formatMessage(messages['header.label.search.nav'])}
+            />
+          </Nav>
+        )}
         <Nav>
           <UserMenu
             {...{
@@ -137,6 +154,7 @@ HeaderBody.propTypes = {
     })),
   })),
   outlineLink: PropTypes.string,
+  searchButtonAction: PropTypes.func,
 };
 
 HeaderBody.defaultProps = {
@@ -155,6 +173,7 @@ HeaderBody.defaultProps = {
   isHiddenMainMenu: false,
   mainMenuDropdowns: [],
   outlineLink: null,
+  searchButtonAction: null,
 };
 
 export default HeaderBody;
diff --git a/src/studio-header/StudioHeader.jsx b/src/studio-header/StudioHeader.jsx
index 3f267e031..886ad8411 100644
--- a/src/studio-header/StudioHeader.jsx
+++ b/src/studio-header/StudioHeader.jsx
@@ -16,7 +16,7 @@ ensureConfig([
 ], 'Studio Header component');
 
 const StudioHeader = ({
-  number, org, title, isHiddenMainMenu, mainMenuDropdowns, outlineLink,
+  number, org, title, isHiddenMainMenu, mainMenuDropdowns, outlineLink, searchButtonAction,
 }) => {
   const { authenticatedUser, config } = useContext(AppContext);
   const props = {
@@ -33,6 +33,7 @@ const StudioHeader = ({
     isHiddenMainMenu,
     mainMenuDropdowns,
     outlineLink,
+    searchButtonAction,
   };
 
   return (
@@ -62,6 +63,7 @@ StudioHeader.propTypes = {
     })),
   })),
   outlineLink: PropTypes.string,
+  searchButtonAction: PropTypes.func,
 };
 
 StudioHeader.defaultProps = {
@@ -70,6 +72,7 @@ StudioHeader.defaultProps = {
   isHiddenMainMenu: false,
   mainMenuDropdowns: [],
   outlineLink: null,
+  searchButtonAction: null,
 };
 
 export default StudioHeader;
diff --git a/src/studio-header/StudioHeader.test.jsx b/src/studio-header/StudioHeader.test.jsx
index 8ebda05cd..263cac2f7 100644
--- a/src/studio-header/StudioHeader.test.jsx
+++ b/src/studio-header/StudioHeader.test.jsx
@@ -69,6 +69,7 @@ const props = {
     },
   ],
   outlineLink: 'tEsTLInK',
+  searchButtonAction: null,
 };
 
 describe('Header', () => {
@@ -138,6 +139,20 @@ describe('Header', () => {
 
       expect(desktopMenu).toBeNull();
     });
+
+    it('should show search button', async () => {
+      const testProps = { ...props, searchButtonAction: () => undefined };
+      const { getByRole } = render(<RootWrapper {...testProps} />);
+      const searchButton = getByRole('button', { name: 'Search content' });
+
+      expect(searchButton).toBeVisible();
+    });
+
+    it('should not show search button', async () => {
+      const testProps = { ...props, searchButtonAction: null };
+      const { queryByRole } = render(<RootWrapper {...testProps} />);
+      expect(queryByRole('button', { name: 'Search content' })).not.toBeInTheDocument();
+    });
   });
 
   describe('mobile', () => {
diff --git a/src/studio-header/messages.js b/src/studio-header/messages.js
index d99a6fda9..b3fc522a8 100644
--- a/src/studio-header/messages.js
+++ b/src/studio-header/messages.js
@@ -51,6 +51,11 @@ const messages = defineMessages({
     defaultMessage: 'Back to course outline in Studio',
     description: 'The aria label for the link back to the Studio Course Outline',
   },
+  'header.label.search.nav': {
+    id: 'header.label.search.nav',
+    defaultMessage: 'Search content',
+    description: 'The aria label for the search content button nav',
+  },
 });
 
 export default messages;