Clicking the Site Kit logo within the header of DashboardEntityApp should redirect user to the main dashboard.

[asvinb]

Feature Description

When the user is on the entity dashboard (with the unifiedDashboard feature flag set), another intuitive way of getting back to the main dashboard is by clicking on the Site Kit logo in the header which is a common practice on sites when on sub pages.

---

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

Acceptance criteria

• Given the user is on any page, when the G Site Kit Logo within the header of the plugin is clicked, then the user should be directed to the Main Dashboard.
  • Hovering over the logo should change the cursor to identify it as a normal link.
  • The link should be accessible (keyboard and screen-reader friendly).
• If the user is already on the Main Dashboard or any of the Splash Screens, clicking on the Logo would simply reload the page.

Implementation Brief

• In assets/js/components/Header.js:
  • Locate the <Logo /> component. Wrap it using the <Link /> component. In the href prop, pass a URL to the Main Dashboard. The Main Dashboard URL can be found by using the getAdminURL selector of the CORE_SITE store, passing googlesitekit-dashboard string passed to it.
  • Add a class to the <Link /> component. Add the display: inline-block; styles to it so that the link can be visually differentiated when focused.

Test Coverage

• No tests need to be added/updated.

QA Brief

• The logo in the header should be clickable and redirect the user to the main dashboard.

Changelog entry

• Link the Site Kit logo on the entity dashboard to the main dashboard.

[aaemnnosttv]

Thanks @asvinb – I've thought about this before too as that is a very common UX pattern. I'm not quite sure about only doing it in one place though. If we do it I think it should be across the board everywhere the header is used. If there are situations we wouldn't want that then it might be better to leave it as-is, but I'll raise it with the rest of the team to discuss 👍

[tofumatt]

My actual instinct here is to have that logo always link to the main dashboard. That creates the expectation/informs the user that there is a link there, but also simplifies the logic of implementing it.

I've seen that done with little confusion across many sites, basically that it's fine to leave that sort of "Home" link there all the time.

We don't disable links in the menu:

Let's just leave it on all the time—what do you think @jimmymadon?

[jimmymadon]

@tofumatt I'm happy to keep the logo as a link on the main dashboard as shown in your GIF. However, what should the behaviour of clicking on the logo be on a splash page? Would the link simply reload the page?

[tofumatt]

@jimmymadon Yeah, I think in that case it'd be a link to the main dashboard and would reload the page.

It's of semi-dubious value, but it lets the user know that's a link and would even allow a user to open it in a new tab with a "command + click". I've seen that behaviour in other sites/apps and it's not confusing, so let's do that 👍🏻

[techanvil]

Hi @nfmohit, thanks for the IB. I would suggest a slightly different approach here, though. Rather than providing an onClick handler I would just pass the dashboard URL as the href attribute to the Link, ensuring an a anchor tag will be rendered. That way the link is more screen reader friendly, can be ctrl/command-clicked to open in a new window, and also will show the link address on hover.

A tweak to the styling of the anchor tag would also be needed to ensure the link is visually differentiated when focused. It looks like setting its display value to inline-block would be sufficient to achieve this.

Please take a look and see what you think.

[nfmohit]

Thank you for the kind review, @techanvil!

Should we pass the dashboard URL for all scenarios? I ask because the AC mentions the page should just be reloaded for splash screens.

[techanvil]

Hey @nfmohit, thanks for pointing that out.

To be honest I don't think we need to be too "smart" about this. If we just use the dashboard URL, when the user doesn't have access to the dashboard it will redirect to the appropriate splash page anyway.

I think this would probably be better than always reloading the current page.

For example, when disconnecting from Site Kit, the following splash page is shown. To me, it would seem a bit strange if clicking on the Site Kit logo reloaded this page:

On the other hand, if the dashboard URL is used for the link, clicking on it will result in a redirect to this splash page, which makes more sense to me:

What do you think?

[nfmohit]

Very valid point. I have updated the IB. Thank you @techanvil!

[techanvil]

Thanks @nfmohit. LGTM!

IB ✅

[mohitwp]

QA Update ✅

• Verified on main.
• Verified site kit logo is now clickable and showing hand icon on hover.
• Clicking on logo redirect users to main dashboard.
• Verified on main dashboard, entity dashboard and settings page.
• If the user is already on the Main Dashboard or any of the Splash Screens, clicking on the Logo reload the page.
• The link is accessible through keyboard.

Recording.58.mp4