Convert useHash to useQueryParam in Idea Hub

Feature Description

We have one remaining use of useHash to manage Idea Hub tabs on the dashboard—we should convert this to use React Router for better control of the link behaviour (see #3796) and to remove the useHash hook entirely.

Having thought about this more though, we shouldn’t rely on hash URLs for non-page-level components/routing. Hash routing should handle page-wide routes, and things like widget routing/tabs should be handled in-memory. There’s no reason to change the URL based on the Idea Hub tab—the main design for hash routes is to be able to load a particular tab on page load.

To do that, let’s use a query param and set the Idea Hub’s default route to be that param’s value if detected.

---

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

Acceptance criteria

• The useHash hook should be removed from usage.
• Idea Hub’s tabs on the Site Kit Dashboard should use query params and not add to the browser’s history.

Implementation Brief

• Add a MemoryRouter to the assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/index.js
• Remove the useHash hook, instead getting the initial Idea Hub tab position from the useSearchParam hook, given a MemoryRouter will be used.
• Replace each Tab with a format like:

<Tab
  replace
  tag={ Link }
  to="/draft-ideas"
>

• Replace the body of the IdeaHub widget with a <Switch><Route exact path="/new-ideas"><NewIdeas WidgetReportError={ WidgetReportError }/></Route></Switch>, except with a route for each tab.
• If a value for the idea-hub-tab query param is set (from useSearchParam('idea-hub-tab')), use the appropriate component for the “default” route (eg. <Route exact path="/"><SavedIdeas WidgetReportError={ WidgetReportError }/></Route> for idea-hub-tab=saved-ideas). Use <NewIdeas /> if no query param is set.
• Update includes/Modules/Idea_Hub.php to use the new ?idea-hub-tab=new-ideas type URL over the existing #new-ideas ones

See #3897 for a proof-of-concept PR.

Test Coverage

• Some of the tests for Idea Hub routes should be updated from #new-drafts to use the query params eg ?idea-hub-tab=new-drafts.

Visual Regression Changes

• N/A

QA Brief

• The Idea Hub tabs should continue to work as-expected when changing between tabs.
• Check that the new query param URLs (eg http://sitekit.10uplabs.com/wp-admin/admin.php?page=googlesitekit-dashboard&idea-hub-tab=saved-ideas) should load with the Saved Ideas tab selected.

Changelog entry

• Use query params instead of hash URLs in Idea Hub tabs.

[tofumatt]

The memory router handles its own paths internally, yup.

And the estimate is still accurate, the only real difference is changing the URLs output by PHP, which involves adding a query param instead of the hash route. Not hard! 😄

[wpdarren]

QA Update: ✅

• Confirmed that the Idea Hub tabs continues to work as-expected when changing between tabs.

• Confirmed that the new query param URLs work:

wp-admin/admin.php?page=googlesitekit-dashboard&idea-hub-tab=new-ideas The New Ideas tab loads and ideas appear. wp-admin/admin.php?page=googlesitekit-dashboard&idea-hub-tab=saved-ideas The Saved Ideas tab loads and ideas appear with the correct number in the tab. wp-admin/admin.php?page=googlesitekit-dashboard&idea-hub-tab=draft-ideas The Draft Ideas tab loads and ideas appear with the correct number in the tab.