feat: add search menu button to header (#474)

Author: rpenido

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;

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;

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', () => {

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;