Storybook: Addon knobs values aren't loaded from URL generated by "Copy" button in the knob panel.

[andyindahouse]

Describe the bug
When you access to storybook from a URL generated with "Copy" button from knob panel, it doesn't set knobs like they were in the URL.

To Reproduce
Steps to reproduce the behaviour:

1. Open storybooks-official.netlify 5.0.1
2. Go to knobs panel and change some knobs like a "name" and "age", then tap "Copy" button.
3. Open a new tab in your browser and paste the URL with knobs, enter.

Expected behavior:

The storybooks should load the knobs values that appear in the URL generated by the "Copy" button in the knob panel.

@storybook/addon-knobs 5.0.1

[shilman]

I fixed this during the beta but looks like this regressed during the course of the release. I'll dig in soon. Possibly a duplicate of https://github.com/storybooks/storybook/issues/6075

[shilman]

This appears to be working in both the latest next and master

[willryan]

@shilman I'm seeing Copy not work when the knob's name has a space in it (or any other character that needs to be URL-encoded). If you look in addons/knobs/src/components/Panel.js, you can see that the query param is set to knob-${name} in several places, without first escaping the name. Since the qs.stringify() call deliberately does not encode the query object, this leaves spaces and other invalid characters in the final URL that gets copied.

[leoyli]

qs can do encoding for us just need an option flag encodeValuesOnly: true, but shareable URL is really tricky IMHO, likely to have edge cases to think about. And I think a better way it get namespaced like I did in addon-contexts since URL have max size (we can at least prevent it grows too fast).

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[andyindahouse]

This works, thanks for all.

[johnhunter]

@willryan's comment is still true with v5.3.18

I'm seeing Copy not work when the knob's name has a space in it (or any other character that needs to be URL-encoded).

I have stories where the knob names have spaces. The url from the copy button fails as the spaces are not encoded. Replacing the spaces in the url with %20 and the url loads the expected state so its definitely a space encoding issue.

[johnhunter]

Ah, so it works. The issue is pasting the url into other applications that expect urls to have spaces escaped (Slack, I'm looking at you). In all fairness there is no way handle links with spaces correctly when pasted as text.

Pasting links into other apps is a pretty common use case - it would be nice to resolve this.