Toolbar Date Filter, remove react-hot-loader, fix dashboard date filter URL

[mariusandra]

Changes

This PR started innocently enough, with the desire to just add a datefilter into the toolbar, so we could now do this:

I had to refactor the DateFilter a bit to separate it from the dateFilterLogic (which is tied to the /insights url), and was happy when all was done. However even though all other pages were fine, the /insights and /dashboard/:id pages would not load anymore:

The error was thrown when calling useState... inside the date filter? This took countless hours of debugging to track down 🤦, but in the end it's a conflict between the react hot module reloading system and multiple configurations inside webpack.json (we export an array of configs -- we can't merge them into one config with multiple entrypoints as the toolbar has a different set of webpack plugins that it needs for CSS).

Turns out we can't import the same "lib/components/*" inside both the toolbar and the main app... and have both running at the same time. Because the toolbar is loaded via posthog-js and comes with its own version of React inside the .js bundle, we'll have two copies of React loaded in memory... but both of them will try to load the same vendor~lib~datepicker-blabla.js file that's delivered by HMR, which is then linked to just one of the two React instances.

The only change to make this work was to remove the component from the toolbar:

... but then there would be no date picker in the toolbar.

The solution (after trying oh so many things for, again, hours 😢), was to remove react hot module reloading altogether. It's deprecated anyway and we should switch to react fast refresh. Without react-hot-loader, when you make a change, then instead of a react component being swapped in place, the full page will reload instead. In my experience this HMR was in my experience often broken anyway and I frequently reloaded the entire page. Plus it didn't work if you modified a logic.

In addition to all of that, this PR also:

• Upgrades to Webpack v5 (from v4)
• Fixes the date filter on the dashboards page by disconnecting it from the URL (it would modify the URL when changed, but never read from the URL if reloaded)

Checklist

• All querysets/queries filter by Organization, by Team, and by User
• Django backend tests
• Jest frontend tests
• Cypress end-to-end tests

[mariusandra]

Cypress fails and it's going to be complicated to work around that: cypress-io/cypress#8948

[mariusandra]

Reverted back to webpack 4 because cypress. Tests are now green. Ready for a look.

[Twixes]

This is a big diff for such a small UX-wise change…

[mariusandra]

Ready for another look!

[Twixes]

Looks good to me!

[mariusandra]

Let's get it in!