Storybook: Knobs: Wrong URI-encoding in torn-away iframe

[asudoh]

Describe the bug
The torn-away <iframe> with a knob value changed has wrong URI-encoding, not properly escaping % character.

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/asudoh/storybook-knobs-test
2. yarn install
3. yarn storybook
4. Open http://localhost:6006/?path=/story/button--emoji
5. Replace aria-label knob content with 10% 20% 30%
6. Click on torn-away button (An icon with square with up arrow)
7. Inspect aria-label in <span role="img"> with DOM inspector

BUG: aria-label shows 10%%2020%%2030%.

Expected behavior

1. The aria-label shows 10% 20% 30%.
2. The URL shows http://localhost:6006/iframe.html?id=button--emoji&knob-aria-label=10%25%2020%25%2030%25 (aria-label having encodeURIComponent('10% 20% 30%')) instead of 10%%2020%%2030%

Screenshots

System:
Got below unfortunately:

> npx -p @storybook/cli@next sb info

Environment Info:
(node:85942) UnhandledPromiseRejectionWarning: TypeError: e.filter is not a function
...

But hope above provides enough info.

[shilman]

Hi @asudoh! Thanks for filing this and also for the fix. Sorry I missed this first time around, will take a look at the PR now and hopefully get it out with the next release.

[shilman]

FYI, we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term. Controls don't have a "populate from URL" feature yet, but we plan to add it in the future: https://github.com/storybookjs/storybook/issues/11604

• Controls README
• Migration instructions
• Walkthrough: Controls w/ CRA & TypeScript

Please upgrade and try them out today!

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.24 containing PR #11642 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.