Browser navigation is broken after selecting different tabs in the ideas widget

Bug Description

When I switch tabs in the ideas widget multiple times, my browser history is full of similar records with just different hashes. It causes a bad user experience because if I want to go back to the previous page, I’ll need to click on the back button the same number of times that I switched tabs. Plus, when I click back and the URL changes to the previous one (with a different hash), the selected tab in the ideas widget doesn’t change.

We need to either update tabs in the ideas widget to follow the hash changes or update how we change hashes to avoid generating duplicate records in the browser history.

https://user-images.githubusercontent.com/873049/128038754-267dd890-58a1-4116-95f1-7c1c2bcc5542.mp4

---

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

Acceptance criteria

• Changing tabs on the Idea Hub dashboard widget should not add new items to the browser history
  • I.e. clicking “Back” should invoke a page navigation rather than a hash change

Implementation Brief

Using the files from the existing open react-use PR https://github.com/streamich/react-use/pull/1435

1. Create assets/js/hooks/useHash.js
2. Copy the contents of https://github.com/streamich/react-use/blob/ed831e6db478d739d3638a8efca37418aba1328e/src/useHash.ts into this file
3. Remove the TypeScript typings
4. Fix the imports (need to import dependency hooks from react-use)
5. Fix eslint warnings (window should be global)

The code should now build.

In assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/index.js

1. Import new useHash hook (instead of from react-use)
2. Where setHash is used, pass in false as a new second argument

See this all done on existing PR https://github.com/google/site-kit-wp/pull/3862

Test Coverage

• Copying existing tests from PR to new assets/js/hooks/useHash.test.js https://github.com/streamich/react-use/blob/ed831e6db478d739d3638a8efca37418aba1328e/tests/useHash.test.ts
• Fix the imports (need to import useHash from the same folder)
• Fix eslint warnings

Visual Regression Changes

• None

QA Brief

• Visit any page that is not the Site Kit dashboard
• Navigate to the Site Kit dashboard by the menu bar
• Change tabs on the Idea Hub widget
• Observe that the query param has updated in the browser URL
• Use the back button
• Observe that the back button works as expected and goes back to the previously visited page

Changelog entry

• Prevent Idea Hub tab navigation from adding to the browser’s history.

[tofumatt]

It certainly doesn’t make it any more effort to convert, and could possibly ease the transition. Worst case it’s a wash, but given it won’t complicate the generic dashboard implementation I say we go for it 😄

[tofumatt]

Given the implementation here is already done and there is some urgency to Idea Hub tickets, I think this IB/approach is worth merging, but I agree with @eugene-manuilov that we should ditch this hook.

In this case, we should be using React Router here—if we were, it’d be quite straightforward to make this change to replace the history rather than add the hash to the stack as well.

Looking at the component, changing it to use a router would be quite straightforward, but it’s still more effort than what’s already here. I think this is the one hash that was in-progress during the huge React Router merge and I meant to get it… but never did 😓 . I’ve created #3886 for said issue 🙂

So let’s use this fix for now in the interest of time, but fix it properly using a router in the future.

IB ✅