Implement new Unified Dashboard header design/UI behind feature flag

Feature Description

The Unified Dashboard has an updated Header design that should be implemented, preferably in the existing Header component, behind a feature flag.

It should start with the header being “sticky”, the user avatar being only an icon on all screen sizes, and a “dummy” button that a user can click to open the URL/page title search, eg:

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The existing Header component (assets/js/components/Header.js) should continue to be used. All modifications in this issue should only be present when the feature flag unifiedDashboard is enabled.
  • When the feature flag is not enabled, no changes to the header should be made.
• The entire Header should be “sticky”, eg. it should remain on-screen/at the top of the page, even as the page is scrolled.
• The user menu should never show the user’s login/email; it should always show only the user’s avatar. (This is already the behaviour on mobile viewports—essentially, all viewports should now match the mobile viewport’s behaviour.)
• A new button should be added for the “URL search” feature.

In its default state the URL Search button should look like this:

When clicked it should expand to show an <input> component:

Note the exact design and functionality will be implemented in #4049, so a simple <input> element when the “URL Search”/magnifying glass icon button is clicked for now is fine.

The desktop Figma file is here: https://www.figma.com/file/VILRieNSLg2DOVyEgFBkXe/[MVP]-Generic-Dashboard?node-id=0%3A1 (under the “Single Search: Full frames” section). The mobile versions are available here: https://www.figma.com/file/VILRieNSLg2DOVyEgFBkXe/[MVP]-Generic-Dashboard?node-id=382%3A1699

When the input is blurred it should disappear and the “URL Search” button should appear again. No functionality other than the show/hide functionality should be implemented as part of this issue.

Implementation Brief

Create a new component assets/js/components/EntitySearchInput, it will need a single piece of state isActive, when it is inactive (false === isActive) it renders as a <Button component. The icon needs to have a magnifying glass (per the AC), for which we need a new image and the text “URL Search”. In the onClick handler for the button, the isActive state is set to true, and the component renders as an <input /> field, which will be further implemented in #4049. In the onBlur handler for the input field, the isActive state is set back to false.

• We will be updating two components, assets/js/components/DashboardEntityApp.js and assets/js/components/DashboardMainApp.js. Since they are both already behind the feature flag for unified dashboard, we don’t need to further check for the feature flag. The changes will need to occur in both files.

Add three child components to the <Header /> component: <EntitySearchInput /> (created above), <DateRangeSelector />, <HelpMenu />. If you’re familiar with DashboardDetailsApp, the order of HelpMenu and DateRangeSelector is intentionally switched to align with the figma files.

<Header>
    <EntitySearchInput />
    <DateRangeSelector />
    <HelpMenu />
</Header>

• In assets/js/components/UserMenu.js add a check for the feature flag const unifiedDashboardEnabled = useFeature( 'unifiedDashboard' );, and when the feature is enabled, ignore the return when ! userEmail, and don’t show the text in the button { userEmail }.

QA Brief

• Enable unifiedDashboard feature flag.
• Observe the header bar resembling the picture in the AC, make sure
  • New (unstyled) EntitySearchWidget with the behavior described in the AC.
  • User Menu no longer showing email address in the header.
  • Check in both main main and entity dashboard.
• UPDATE: Also ensure that,
  • Input field is focused when search button is clicked.
  • Input field closes when clicked outside it.
  • search icon is on the right with enough spacing.
  • User Avatar is centered when hovered.
  • User Menu has a tooltip “Account”.
  • New design changes made to User Menu does not affect Old Dashboard.

Changelog entry

• Implement new Unified Dashboard header design/UI.

[kuasha420]

@tofumatt I think I will create a follow up pr on this issue and fix avatar and the button here so CR/QA doesn’t get too much out of control on 4049. Thanks for the discussion and clarification!

cc: @wpdarren

[tofumatt]

@wpdarren Yes, those issues are fine—the avatar seems okay to me (and how those avatars look on other Google products).

The header should be fixed elsewhere, I think the main thing is to hide the “Site Kit” text on mobile, but it’s not part of this issue I think 👍🏻

So should be good 🙂