Core: Add globals URL param and remove from sessionStorage

[ghengeveld]

Issue: #11604

What I did

Added globals URL query param that tracks any globals that have a value that deviates from their initial/default value.
Removed session storage for globals.

How to test

• Is this testable with Jest or Chromatic screenshots? no
• Does this need a new example in the kitchen sink apps? no
• Does this need an update to the documentation? yes, todo

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit b0919fa. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[nx-cloud]

Nx Cloud Report

We didn't find any information for the current pull request with the commit 7dc469c.
Please make sure you set the \ NX_BRANCH\ environment variable in your CI pipeline .

Check the Getting started section to configure the app.

---

Sent with 💌 from NxCloud.

[shilman]

Looking great w/ one suggestion! 💯

[tmeasday]

Couple questions

[shilman]

💯

[nickofthyme]

@ghengeveld @shilman is there a way to hide or prevent global params from syncing to the url? I initially thought this was a good idea but after building my own addon, this locks-in the global variable for all stories.

Say I have a story that has a background color as a global parameter. Say the parameter default is only set in the preview.js file to #FFFFFF for story1. This will read the color from the default parameters from preview.js and update the url. Now if I navigate to story2 that has a story-level parameter override with a default of #000000, the color is still set to #FFFFFF because of the query param.

I DO think the hierarchy is correct and the url param value should override any other defined value. But syncing the global values to the URL creates issues. Looking at the old knobs addon, the knob values where never written to the url but you could still copy the current knob state via the copy button, which would then provide a stateful url that includes the necessary query params.

I think the capture state method used with the knobs would be a better approach in the case of the globals. Is there a reason this was done this way and would you consider changing this?

[shilman]

cc @MichaelArestad ☝️

[ghengeveld]

I think the capture state method used with the knobs would be a better approach in the case of the globals. Is there a reason this was done this way and would you consider changing this?

The rationale is that we wanted to make it super easy and obvious to share stories and their state with others. Syncing the URL makes it easy to just copy the URL from the address bar, regardless of how they got there. A separate Copy button would require feature discovery. We did consider a "share" button in the toolbar (not in the addon panel like Knobs has, because args and globals are a core feature), but decided against it for now. If URL syncing continues to be problematic we might reconsider. I'm pretty sure at that point we'll design a more elaborate "share" feature that gives you more than just a URL.

I think a short-term improvement would be to enable addon authors to opt-out their globals from URL syncing. Some globals aren't worth syncing with the URL, such as the measure addon state.

[nickofthyme]

I think a short-term improvement would be to enable addon authors to opt-out their globals from URL syncing. Some globals aren't worth syncing with the URL, such as the measure addon state.

Yes this would be greatly appreciated

[ghengeveld]

#15756