feat(web-analytics): Sync web analytics state with url

[robbie-c]

Problem

Some feedback asking a few related things:

• Want to preserve filters across a refresh
• Want to bookmark certain filters

An example zendesk ticket: https://posthoghelp.zendesk.com/agent/tickets/8277

Changes

Store relevant parts of the state in the url.

How did you test this code?

Manually, spending a lot of time making sure that the back button behaviour is correct. A few edge cases:

• clicking on the device type pie chart changes filters AND changes the tab, and the back button should revert both
• using the back button to remove the last filters should work, even though no filters are in the url bar

[github-actions]

Size Change: 0 B

Total Size: 1.99 MB

ℹ️ View Unchanged

Filename	Size
frontend/dist/toolbar.js	1.99 MB

_{compressed-size-action}

[mariusandra]

👍

[mariusandra]

Here's a patter you can use if you want to clean this up a bit, yet keep the url logic contained:

Suggested change

	actionToUrl(({ values }) => ({
	setWebAnalyticsFilters: () => stateToUrl(values),
	togglePropertyFilter: () => stateToUrl(values),
	setDates: () => stateToUrl(values),
	setInterval: () => stateToUrl(values),
	setDeviceTab: () => stateToUrl(values),
	setSourceTab: () => stateToUrl(values),
	setGraphsTab: () => stateToUrl(values),
	setPathTab: () => stateToUrl(values),
	setGeographyTab: () => stateToUrl(values),
	})),
	actionToUrl(({ values }) => {
	function stateToUrl() {
	const urlParams = new URLSearchParams()
	// ...
	}
	return {
	setWebAnalyticsFilters: stateToUrl,
	togglePropertyFilter: stateToUrl,
	setDates: stateToUrl,
	setInterval: stateToUrl,
	setDeviceTab: stateToUrl,
	setSourceTab: stateToUrl,
	setGraphsTab: stateToUrl,
	setPathTab: stateToUrl,
	setGeographyTab: stateToUrl,
	}
	})),

This is just a nit at this point, definitely not blocking.