ui: update url params when switching tabs on sql activity

[maryliag]

When the user clicks on a tab on the new SQL Activity page
now the search params on the url is updated with the tab
selection.
This commit also create a common function to sync history
so all the pages can use it and remove duplicate code.

Release note: None

[cockroach-teamcity]

This change is 

[lindseyjin]

Reviewed 1 of 8 files at r1, 1 of 1 files at r3, all commit messages.
Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @lindseyjin and @maryliag)

---

pkg/ui/workspaces/cluster-ui/src/util/query/query.ts, line 74 at r3 (raw file):

  const nextSearchParams = new URLSearchParams(history.location.search);

  Object.entries(params).forEach(([key, value]) => {

Hi, I'm just a little bit confused about how this code works. Why do we need to delete keys in nextSearchParams if they're undefined in params? Is this because we want to keep old param values and only clear them if we explicitly pass in undefined values?

[lindseyjin]

I tried running this locally, and everything works well!

One quick question though: I noticed that the sql activity page defaults to the Sessions tab, but 'tab=sessions' doesn't appear in the url when you first click into the page. Is that intentional/expected behaviour?

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @lindseyjin and @maryliag)

[maryliag]

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @lindseyjin)

---

pkg/ui/workspaces/cluster-ui/src/util/query/query.ts, line 74 at r3 (raw file):

Previously, lindseyjin (Lindsey Jin) wrote…

Hi, I'm just a little bit confused about how this code works. Why do we need to delete keys in nextSearchParams if they're undefined in params? Is this because we want to keep old param values and only clear them if we explicitly pass in undefined values?

Exactly, if a param is undefined we want to remove from here (no need to keep things in the url that don't add information), if we have a value we want to add/update this value.
For example, if you go to the statement page and do a search, it will add q=abc, then you filter based on app, this will add app=def so now you have q=abc&app=def, now you want to remove the search, for this on the Statement page we set the value of q to undefined and call this function, so now the params will be updated to have just app=def

[maryliag]

It's intentional, since the default value is session, just so we get a cleaner first url, since at that point it won't add any new information

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @lindseyjin)

[lindseyjin]

Thanks for clearing up my questions! LGTM :)

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @lindseyjin)

[maryliag]

bors r+

[craig]

Build succeeded:

• GitHub CI (Cockroach)