Addon-docs: Add eject button to canvas toolbar

code/addons/docs/src/blocks/components/Preview.tsx

@@ -1,5 +1,5 @@
 import type { ClipboardEvent, FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
-import React, { Children, useCallback, useState } from 'react';
+import React, { Children, useCallback, useContext, useState } from 'react';
 
 import { ActionBar, Zoom } from 'storybook/internal/components';
 import type { ActionItem } from 'storybook/internal/components';
@@ -9,6 +9,8 @@ import { styled } from 'storybook/theming';
 
 import type { SourceProps } from '.';
 import { Source } from '.';
+import { DocsContext } from '../blocks/DocsContext';
+import { getStoryId } from '../blocks/Story';
 import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
 import { StorySkeleton } from './Story';
 import { Toolbar } from './Toolbar';
@@ -151,11 +153,12 @@ const getSource = (
     }
   }
 };
-function getStoryId(children: ReactNode) {
+
+function getChildProps(children: ReactNode) {
   if (Children.count(children) === 1) {
     const elt = children as ReactElement;
     if (elt.props) {
-      return elt.props.id;
+      return elt.props;
     }
   }
   return null;
@@ -205,6 +208,8 @@ export const Preview: FC<PreviewProps> = ({
 
   const { window: globalWindow } = globalThis;
 
+  const context = useContext(DocsContext);
+
   const copyToClipboard = useCallback(async (text: string) => {
     const { createCopyToClipboardFunction } = await import('storybook/internal/components');
     createCopyToClipboardFunction();
@@ -240,6 +245,8 @@ export const Preview: FC<PreviewProps> = ({
     }
   };
 
+  const childProps = getChildProps(children);
+
   return (
     <PreviewContainer
       {...{ withSource, withToolbar }}
@@ -252,7 +259,7 @@ export const Preview: FC<PreviewProps> = ({
           border
           zoom={(z: number) => setScale(scale * z)}
           resetZoom={() => setScale(1)}
-          storyId={getStoryId(children)}
+          storyId={!isLoading && childProps ? getStoryId(childProps, context) : undefined}
           baseUrl="./iframe.html"
         />
       )}

code/addons/docs/src/blocks/components/Toolbar.tsx

@@ -1,9 +1,9 @@
-import type { FC, MouseEvent as ReactMouseEvent, SyntheticEvent } from 'react';
+import type { FC, SyntheticEvent } from 'react';
 import React from 'react';
 
-import { FlexBar, IconButton } from 'storybook/internal/components';
+import { FlexBar, IconButton, getStoryHref } from 'storybook/internal/components';
 
-import { ZoomIcon, ZoomOutIcon, ZoomResetIcon } from '@storybook/icons';
+import { ShareAltIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon } from '@storybook/icons';
 
 import { styled } from 'storybook/theming';
 
@@ -97,5 +97,26 @@ export const Toolbar: FC<ToolbarProps> = ({
         </>
       )}
     </Wrapper>
+    {isLoading ? (
+      <Wrapper key="right">
+        <IconPlaceholder />
+      </Wrapper>
+    ) : (
+      baseUrl &&
+      storyId && (
+        <Wrapper key="right">
+          <IconButton key="opener" asChild>
+            <a
+              href={getStoryHref(baseUrl, storyId)}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Open canvas in new tab"
+            >
+              <ShareAltIcon />
+            </a>
+          </IconButton>
+        </Wrapper>
+      )
+    )}
   </Bar>
 );