chore(content-explorer): Migrate Header

Author: greg-in-a-box

i18n/en-US.properties

@@ -642,6 +642,8 @@ be.rootBreadcrumb = All Files
 be.save = Save
 # Shown as the title in the sub header while searching.
 be.searchBreadcrumb = Search Results
+# Aria label for the clear button in the search box.
+be.searchClear = Clear search
 # Shown as a placeholder in the search box.
 be.searchPlaceholder = Search files and folders
 # Message shown when there are no search results.

src/elements/common/header/Header.js src/elements/common/header/Header.js.flowsrc/elements/common/header/Header.js renamed to src/elements/common/header/Header.js.flow

@@ -1,53 +1,52 @@
-/**
- * @flow
- * @file Header bar
- * @author Box
- */
-
 import * as React from 'react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
+import { SearchInput } from '@box/blueprint-web';
 import Logo from './Logo';
 import messages from '../messages';
 import { VIEW_FOLDER, VIEW_SEARCH } from '../../../constants';
 import type { View } from '../../../common/types/core';
 
 import './Header.scss';
 
-type Props = {
-    intl: any,
+type HeaderProps = {
     isHeaderLogoVisible?: boolean,
-    isSmall: boolean,
     logoUrl?: string,
-    onSearch: Function,
+    onSearch: any,
     searchQuery: string,
-    view: View,
+    view: View
 };
 
 // eslint-disable-next-line react/prop-types
-const Header = ({ isHeaderLogoVisible = true, view, isSmall, searchQuery, onSearch, logoUrl, intl }: Props) => {
-    const { formatMessage } = intl;
-    const search = ({ currentTarget }: { currentTarget: HTMLInputElement }) => onSearch(currentTarget.value);
+const Header = ({
+    isHeaderLogoVisible = true,
+    view,
+    searchQuery,
+    onSearch,
+    logoUrl,
+}: HeaderProps) => {
+    const { formatMessage } = useIntl();
     const searchMessage = formatMessage(messages.searchPlaceholder);
     const isFolder = view === VIEW_FOLDER;
     const isSearch = view === VIEW_SEARCH;
 
     return (
         <div className="be-header">
-            {isHeaderLogoVisible && <Logo isSmall={isSmall} url={logoUrl} />}
+            {isHeaderLogoVisible && <Logo url={logoUrl} />}
             <div className="be-search">
-                <input
-                    aria-label={searchMessage}
-                    data-testid="be-Header-searchInput"
+                <SearchInput
+                    className="my-class"
+                    defaultValue=""
                     disabled={!isFolder && !isSearch}
-                    onChange={search}
+                    onChange={onSearch}
                     placeholder={searchMessage}
-                    type="search"
+                    searchInputAriaLabel={searchMessage}
+                    searchInputClearAriaLabel={formatMessage(messages.searchClear)}
                     value={searchQuery}
+                    variant="global"
                 />
             </div>
         </div>
     );
 };
 
-export { Header as HeaderBase };
-export default injectIntl(Header);
+export default Header;

src/elements/common/header/Header.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { SearchInput } from '@box/blueprint-web';
+import Logo from './Logo';
+import messages from '../messages';
+import { VIEW_FOLDER, VIEW_SEARCH } from '../../../constants';
+import type { View } from '../../../common/types/core';
+
+import './Header.scss';
+
+export interface HeaderProps {
+    isHeaderLogoVisible?: boolean;
+    logoUrl?: string;
+    onSearch: (value: string) => void;
+    view: View;
+}
+
+// eslint-disable-next-line react/prop-types
+const Header = ({ isHeaderLogoVisible = true, logoUrl, onSearch, view }: HeaderProps) => {
+    const { formatMessage } = useIntl();
+    const searchMessage = formatMessage(messages.searchPlaceholder);
+    const isFolder = view === VIEW_FOLDER;
+    const isSearch = view === VIEW_SEARCH;
+
+    return (
+        <div className="be-header">
+            {isHeaderLogoVisible && <Logo url={logoUrl} />}
+            <div className="be-search">
+                <SearchInput
+                    defaultValue=""
+                    disabled={!isFolder && !isSearch}
+                    onChange={onSearch}
+                    placeholder={searchMessage}
+                    searchInputAriaLabel={searchMessage}
+                    searchInputClearAriaLabel={formatMessage(messages.searchClear)}
+                    variant="global"
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Header;

src/elements/common/header/Logo.js src/elements/common/header/Logo.js.flowsrc/elements/common/header/Logo.js renamed to src/elements/common/header/Logo.js.flow

@@ -1,17 +1,11 @@
-/**
- * @flow
- * @file Logo for the header
- * @author Box
- */
-
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import IconLogo from '../../../icons/general/IconLogo';
 import messages from '../messages';
 import './Logo.scss';
 
 type Props = {
-    url?: string,
+    url?: string
 };
 
 function getLogo(url?: string) {
@@ -29,7 +23,9 @@ function getLogo(url?: string) {
     );
 }
 
-const Logo = ({ url }: Props) => (
+const Logo = ({
+    url,
+}: Props) => (
     <div className="be-logo" data-testid="be-Logo">
         {getLogo(url)}
     </div>

src/elements/common/header/Logo.scss

@@ -4,8 +4,8 @@
     padding-left: 20px;
 
     .be-logo-custom {
-        max-width: 80px;
-        max-height: 32px;
+        max-width: 240px;
+        max-height: 40px;
 
         .be-is-small & {
             max-width: 75px;
@@ -16,8 +16,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 75px;
-        height: 32px;
+        width: 208px;
+        height: 48px;
         background-color: $bdl-gray-10;
         border: 1px dashed;
 

src/elements/common/header/Logo.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { BoxLogo } from '@box/blueprint-web-assets/icons/Logo';
+import messages from '../messages';
+import './Logo.scss';
+
+export interface LogoProps {
+    url?: string;
+}
+
+function getLogo(url?: string) {
+    if (url === 'box') {
+        return <BoxLogo width={45} height={25} />;
+    }
+
+    if (typeof url === 'string') {
+        return <img alt="" className="be-logo-custom" src={url} />;
+    }
+
+    return (
+        <div className="be-logo-placeholder">
+            <FormattedMessage {...messages.logo} />
+        </div>
+    );
+}
+
+const Logo = ({ url }: LogoProps) => (
+    <div className="be-logo" data-testid="be-Logo">
+        {getLogo(url)}
+    </div>
+);
+
+export default Logo;

src/elements/common/header/__tests__/Header.test.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { userEvent } from '@testing-library/user-event';
+import { render, screen } from '../../../../test-utils/testing-library';
+import Header, { HeaderProps } from '../Header';
+
+jest.mock('@box/blueprint-web-assets/icons/Logo', () => {
+    return {
+        BoxLogo: () => <div>BoxLogo</div>,
+    };
+});
+
+describe('elements/common/header/Header', () => {
+    const renderComponent = (props?: Partial<HeaderProps>) =>
+        render(<Header onSearch={jest.fn()} view="folder" {...props} />);
+
+    test('disables search input when view is not `folder` and not `search`', () => {
+        renderComponent({ view: 'recents' });
+        expect(screen.getByRole('searchbox', { name: 'Search files and folders' })).toBeInTheDocument();
+        expect(screen.getByRole('searchbox', { name: 'Search files and folders' })).toBeDisabled();
+    });
+
+    test.each(['folder', 'search'])('does not disable search input when view is %s', view => {
+        renderComponent({ view });
+
+        expect(screen.getByRole('searchbox', { name: 'Search files and folders' })).toBeInTheDocument();
+        expect(screen.getByRole('searchbox', { name: 'Search files and folders' })).not.toBeDisabled();
+    });
+
+    test('onSearch is called when search input changes', async () => {
+        const onSearch = jest.fn();
+        renderComponent({ onSearch });
+        const searchInput = screen.getByRole('searchbox', { name: 'Search files and folders' });
+
+        expect(onSearch).not.toHaveBeenCalled();
+        await userEvent.type(searchInput, 'test');
+        expect(onSearch).toHaveBeenCalled();
+    });
+
+    describe('Logo', () => {
+        test('renders Logo component when isHeaderLogoVisible is `true`', () => {
+            renderComponent({ isHeaderLogoVisible: true });
+            expect(screen.getByRole('searchbox', { name: 'Search files and folders' })).toBeInTheDocument();
+
+            expect(screen.getByText('Logo')).toBeInTheDocument();
+        });
+
+        test('does not render Logo component when isHeaderLogoVisible is `false`', () => {
+            renderComponent({ isHeaderLogoVisible: false });
+            expect(screen.queryByText('Logo')).not.toBeInTheDocument();
+            expect(screen.getByRole('searchbox', { name: 'Search files and folders' })).toBeInTheDocument();
+        });
+
+        test('renders BoxLogo component when logoUrl is `box`', () => {
+            renderComponent({ logoUrl: 'box' });
+            expect(screen.getByText('BoxLogo')).toBeInTheDocument();
+        });
+
+        test('renders custom logo component when logoUrl is a string', () => {
+            renderComponent({ logoUrl: 'https://example.com/logo.png' });
+            expect(screen.getByRole('presentation')).toBeInTheDocument();
+        });
+    });
+});

src/elements/common/header/__tests__/Header.test.tsx

@@ -0,0 +1 @@
+export {default} from './Header';

src/elements/common/header/index.js.flow

@@ -1,2 +1 @@
-// @flow
 export { default } from './Header';