From 0fc8d477b949ccd07c0bb15d89ccc5adc4d961c9 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 22 Jul 2020 19:52:56 +0900
Subject: [PATCH] fix(preview): uri-encode search params

This change applies basic URI encoding to knob keys/values in
`<iframe>` URL and torn-away window URL in preview.

Fixes storybookjs#11641.
---
 .../stories/addon-knobs/with-knobs.stories.js                | 4 ++++
 lib/ui/src/components/preview/utils/stringifyQueryParams.tsx | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
index 123549a7d89e..928d8833eee8 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
@@ -374,3 +374,7 @@ export const WithDuplicateDecorator = () => {
   return text('Text', 'Hello');
 };
 WithDuplicateDecorator.decorators = [withKnobs];
+
+export const WithKnobValueToBeEncoded = () => {
+  return text('Text', '10% 20%');
+};
diff --git a/lib/ui/src/components/preview/utils/stringifyQueryParams.tsx b/lib/ui/src/components/preview/utils/stringifyQueryParams.tsx
index 6bdc9b5c42f9..a5ca1b13ac72 100644
--- a/lib/ui/src/components/preview/utils/stringifyQueryParams.tsx
+++ b/lib/ui/src/components/preview/utils/stringifyQueryParams.tsx
@@ -1,2 +1,5 @@
 export const stringifyQueryParams = (queryParams: Record<string, string>) =>
-  Object.entries(queryParams).reduce((acc, [k, v]) => `${acc}&${k}=${v}`, '');
+  Object.entries(queryParams).reduce(
+    (acc, [k, v]) => `${acc}&${encodeURIComponent(k)}=${encodeURIComponent(v)}`,
+    ''
+  );