Core: Retain iframe.html query parameters

lib/components/src/blocks/Story.tsx

@@ -7,6 +7,7 @@ import { IFrame } from './IFrame';
 import { EmptyBlock } from './EmptyBlock';
 import { ZoomContext } from './ZoomContext';
 import { Loader } from '..';
+import { getStoryHref } from '../../../ui/src/components/preview/utils/getStoryHref';
 
 const { PREVIEW_URL } = global;
 const BASE_URL = PREVIEW_URL || 'iframe.html';
@@ -56,7 +57,7 @@ const IFrameStory: FunctionComponent<IFrameStoryProps> = ({ id, title, height =
             key="iframe"
             id={`iframe--${id}`}
             title={title}
-            src={`${BASE_URL}?id=${id}&viewMode=story`}
+            src={getStoryHref(BASE_URL, id, { viewMode: 'story' })}
             allowFullScreen
             scale={scale}
             style={{

lib/components/src/blocks/Toolbar.tsx

@@ -5,6 +5,8 @@ import { FlexBar } from '../bar/bar';
 import { Icons } from '../icon/icon';
 import { IconButton, IconButtonSkeleton } from '../bar/button';
 
+import { getStoryHref } from '../../../ui/src/components/preview/utils/getStoryHref';
+
 interface ZoomProps {
   zoom: (val: number) => void;
   resetZoom: () => void;
@@ -63,7 +65,7 @@ const Zoom: FunctionComponent<ZoomProps> = ({ zoom, resetZoom }) => (
 const Eject: FunctionComponent<EjectProps> = ({ baseUrl, storyId }) => (
   <IconButton
     key="opener"
-    href={`${baseUrl}?id=${storyId}`}
+    href={getStoryHref(baseUrl, storyId)}
     target="_blank"
     title="Open canvas in new tab"
   >

lib/ui/src/components/preview/FramesRenderer.tsx

@@ -5,6 +5,7 @@ import { Global, CSSObject, styled } from '@storybook/theming';
 import { IFrame } from './iframe';
 import { FramesRendererProps } from './utils/types';
 import { stringifyQueryParams } from './utils/stringifyQueryParams';
+import { getStoryHref } from './utils/getStoryHref';
 
 const getActive = (refId: FramesRendererProps['refId']) => {
   if (refId) {
@@ -66,7 +67,11 @@ export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   }, []);
 
   const [frames, setFrames] = useState<Record<string, string>>({
-    'storybook-preview-iframe': `${baseUrl}?id=${storyId}&viewMode=${viewMode}${stringifiedQueryParams}`,
+    'storybook-preview-iframe': getStoryHref(baseUrl, storyId, {
+      ...queryParams,
+      ...(version && { version }),
+      viewMode,
+    }),
   });
 
   useEffect(() => {

lib/ui/src/components/preview/tools/copy.tsx

@@ -4,7 +4,7 @@ import copy from 'copy-to-clipboard';
 import { IconButton, Icons } from '@storybook/components';
 import { Consumer, Combo } from '@storybook/api';
 import { Addon } from '@storybook/addons';
-import { stringifyQueryParams } from '../utils/stringifyQueryParams';
+import { getStoryHref } from '../utils/getStoryHref';
 
 const { PREVIEW_URL } = global;
 
@@ -30,7 +30,7 @@ export const copyTool: Addon = {
         storyId ? (
           <IconButton
             key="copy"
-            onClick={() => copy(`${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`)}
+            onClick={() => copy(getStoryHref(baseUrl, storyId, queryParams))}
             title="Copy canvas link"
           >
             <Icons icon="link" />

lib/ui/src/components/preview/tools/eject.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { IconButton, Icons } from '@storybook/components';
 import { Consumer, Combo } from '@storybook/api';
 import { Addon } from '@storybook/addons';
-import { stringifyQueryParams } from '../utils/stringifyQueryParams';
+import { getStoryHref } from '../utils/getStoryHref';
 
 const { PREVIEW_URL } = global;
 
@@ -29,7 +29,7 @@ export const ejectTool: Addon = {
         storyId ? (
           <IconButton
             key="opener"
-            href={`${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`}
+            href={getStoryHref(baseUrl, storyId, queryParams)}
             target="_blank"
             title="Open canvas in new tab"
           >

lib/ui/src/components/preview/utils/getStoryHref.tsx

@@ -0,0 +1,20 @@
+import qs from 'qs';
+
+export const getStoryHref = (
+  baseUrl: string,
+  storyId: string,
+  additionalParams: Record<string, string> = {}
+) => {
+  const [url, paramsStr] = baseUrl.split('?');
+  const params = paramsStr
+    ? {
+        ...qs.parse(paramsStr),
+        ...additionalParams,
+        id: storyId,
+      }
+    : {
+        ...additionalParams,
+        id: storyId,
+      };
+  return `${url}${qs.stringify(params, { addQueryPrefix: true, encode: false })}`;
+};