fix(manager): restore share popover with QR code

code/core/src/core-events/index.ts

@@ -100,7 +100,9 @@ enum events {
   // Emitted when the manager UI sets up a focus trap
   MANAGER_INERT_ATTRIBUTE_CHANGED = 'managerInertAttributeChanged',
 
+  SHARE_STORY_LINK = 'shareStoryLink',
   SHARE_ISOLATE_MODE = 'shareIsolateMode',
+  SHARE_POPOVER_OPENED = 'sharePopoverOpened',
 
   AI_PROMPT_NUDGE = 'aiPromptNudge',
   SIDEBAR_FILTER_CHANGED = 'sidebarFilterChanged',
@@ -177,7 +179,9 @@ export const {
   OPEN_IN_EDITOR_REQUEST,
   OPEN_IN_EDITOR_RESPONSE,
   MANAGER_INERT_ATTRIBUTE_CHANGED,
+  SHARE_STORY_LINK,
   SHARE_ISOLATE_MODE,
+  SHARE_POPOVER_OPENED,
   AI_PROMPT_NUDGE,
   SIDEBAR_FILTER_CHANGED,
 } = events;

code/core/src/core-server/server-channel/telemetry-channel.ts

@@ -2,6 +2,8 @@ import type { Channel } from 'storybook/internal/channels';
 import {
   PREVIEW_INITIALIZED,
   SHARE_ISOLATE_MODE,
+  SHARE_POPOVER_OPENED,
+  SHARE_STORY_LINK,
   SIDEBAR_FILTER_CHANGED,
   AI_PROMPT_NUDGE,
 } from 'storybook/internal/core-events';
@@ -41,6 +43,12 @@ export function initTelemetryChannel(channel: Channel) {
       }
     } catch {}
   });
+  channel.on(SHARE_POPOVER_OPENED, async () => {
+    telemetry('share', { action: 'popover-opened' });
+  });
+  channel.on(SHARE_STORY_LINK, async () => {
+    telemetry('share', { action: 'story-link-copied' });
+  });
   channel.on(SHARE_ISOLATE_MODE, async () => {
     telemetry('share', { action: 'isolate-mode-opened' });
   });

code/core/src/manager/components/preview/tools/share.tsx

@@ -1,54 +1,34 @@
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
-import { Button, PopoverProvider } from 'storybook/internal/components';
-import { QRCodeSVG } from 'qrcode.react';
-import { SHARE_ISOLATE_MODE } from 'storybook/internal/core-events';
+import { Button, PopoverProvider, TooltipLinkList } from 'storybook/internal/components';
+import {
+  SHARE_ISOLATE_MODE,
+  SHARE_POPOVER_OPENED,
+  SHARE_STORY_LINK,
+} from 'storybook/internal/core-events';
 import type { Addon_BaseType } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
-import { PopOutIcon } from '@storybook/icons';
+import { LinkIcon, ShareAltIcon, ShareIcon } from '@storybook/icons';
 
+import copy from 'copy-to-clipboard';
+import { QRCodeSVG } from 'qrcode.react';
 import { Consumer, types } from 'storybook/manager-api';
-import type { Combo } from 'storybook/manager-api';
+import type { API, Combo } from 'storybook/manager-api';
 import { styled, useTheme } from 'storybook/theming';
 
+import { Shortcut } from '../../Shortcut.tsx';
+
 const mapper = ({ api, state }: Combo) => {
   const { storyId, refId } = state;
   return { api, refId, storyId };
 };
 
-const QRContainer = styled.div(
-  () =>
-    ({
-      display: 'flex',
-      flexDirection: 'column',
-      padding: 8,
-      width: 300,
-      maxWidth: 300,
-      gap: 8,
-    }) as const
-);
-
-const QRRow = styled.div(() => ({
+const QRContainer = styled.div(() => ({
   display: 'flex',
   alignItems: 'center',
-}));
-
-const ShareLinkInput = styled.input(({ theme }) => ({
-  width: '100%',
-  border: `1px solid ${theme.appBorderColor}`,
-  borderRadius: 4,
-  padding: '6px 8px',
-  fontSize: theme.typography.size.s1,
-  color: theme.color.defaultText,
-  backgroundColor: theme.background.app,
-  outline: 'none',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  '&:focus': {
-    borderColor: theme.color.secondary,
-  },
+  padding: 8,
+  maxWidth: 200,
 }));
 
 const QRImageContainer = styled.div(() => ({
@@ -81,31 +61,103 @@ const QRDescription = styled.div(({ theme }) => ({
   color: theme.textMutedColor,
 }));
 
-export const isolationModeTool: Addon_BaseType = {
-  title: 'isolation mode',
-  id: 'isolationMode',
-  type: types.TOOLEXTRA,
+const ShareMenu = React.memo(function ShareMenu({
+  api,
+  storyId,
+  refId,
+}: {
+  api: API;
+  storyId: string;
+  refId: string | undefined;
+}) {
+  const shortcutKeys = api.getShortcutKeys();
+  const enableShortcuts = !!shortcutKeys;
+  const [copied, setCopied] = useState(false);
+  const copyStoryLink = shortcutKeys?.copyStoryLink;
+  const openInIsolation = shortcutKeys?.openInIsolation;
+
+  useEffect(() => {
+    api.emit(SHARE_POPOVER_OPENED);
+  }, [api]);
+
+  const links = useMemo(() => {
+    const copyTitle = copied ? 'Copied!' : 'Copy story link';
+    const originHrefs = api.getStoryHrefs(storyId, { base: 'origin', refId });
+    const networkHrefs = api.getStoryHrefs(storyId, { base: 'network', refId });
+
+    return [
+      [
+        {
+          id: 'copy-link',
+          title: copyTitle,
+          icon: <LinkIcon />,
+          right: enableShortcuts ? <Shortcut keys={copyStoryLink} /> : null,
+          onClick: () => {
+            api.emit(SHARE_STORY_LINK, originHrefs.managerHref);
+            copy(originHrefs.managerHref);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+          },
+        },
+        {
+          id: 'open-new-tab',
+          title: 'Open in isolation mode',
+          icon: <ShareAltIcon />,
+          right: enableShortcuts ? <Shortcut keys={openInIsolation} /> : null,
+          onClick: () => {
+            api.emit(SHARE_ISOLATE_MODE, originHrefs.previewHref);
+          },
+          href: originHrefs.previewHref,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        },
+      ],
+      [
+        {
+          id: 'qr-section',
+          content: (
+            <QRContainer>
+              <QRImage value={networkHrefs.managerHref} />
+              <QRContent>
+                <QRTitle>Scan to open</QRTitle>
+                <QRDescription>
+                  {global.CONFIG_TYPE === 'DEVELOPMENT'
+                    ? 'Device must be on the same network.'
+                    : 'View story on another device.'}
+                </QRDescription>
+              </QRContent>
+            </QRContainer>
+          ),
+        },
+      ],
+    ];
+  }, [api, storyId, refId, copied, enableShortcuts, copyStoryLink, openInIsolation]);
+
+  return <TooltipLinkList links={links} style={{ width: 240 }} />;
+});
+
+export const shareTool: Addon_BaseType = {
+  title: 'share',
+  id: 'share',
+  type: types.TOOL,
   match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId,
   render: () => (
     <Consumer filter={mapper}>
-      {({ api, storyId, refId }) => {
-        if (!storyId) return null;
-        const originHrefs = api.getStoryHrefs(storyId, { base: 'origin', refId });
-        return (
-          <Button
-            padding="small"
-            variant="ghost"
-            ariaLabel="Open in isolation mode"
-            tooltip="Open in isolation mode"
-            onClick={() => {
-              window.open(originHrefs.previewHref, '_blank', 'noopener,noreferrer');
-              api.emit(SHARE_ISOLATE_MODE, originHrefs.previewHref);
-            }}
+      {({ api, storyId, refId }) =>
+        storyId ? (
+          <PopoverProvider
+            ariaLabel="Share this story"
+            hasChrome
+            placement="bottom"
+            padding={0}
+            popover={<ShareMenu {...{ api, storyId, refId }} />}
           >
-            <PopOutIcon />
-          </Button>
-        );
-      }}
+            <Button padding="small" variant="ghost" ariaLabel="Share" tooltip="Share...">
+              <ShareIcon />
+            </Button>
+          </PopoverProvider>
+        ) : null
+      }
     </Consumer>
   ),
 };

code/core/src/manager/container/Preview.tsx

@@ -17,19 +17,13 @@ import { addonsTool } from '../components/preview/tools/addons.tsx';
 import { menuTool } from '../components/preview/tools/menu.tsx';
 import { openInEditorTool } from '../components/preview/tools/open-in-editor.tsx';
 import { remountTool } from '../components/preview/tools/remount.tsx';
-import { isolationModeTool } from '../components/preview/tools/share.tsx';
+import { shareTool } from '../components/preview/tools/share.tsx';
 import { zoomTool } from '../components/preview/tools/zoom.tsx';
 import type { PreviewProps } from '../components/preview/utils/types.tsx';
 
 const defaultTabs = [createCanvasTab()];
 const defaultTools = [menuTool, remountTool];
-const defaultToolsExtra = [
-  isolationModeTool,
-  zoomTool,
-  addonsTool,
-  fullScreenTool,
-  openInEditorTool,
-];
+const defaultToolsExtra = [zoomTool, addonsTool, fullScreenTool, shareTool, openInEditorTool];
 
 const emptyTabsList: Addon_BaseType[] = [];
 

code/core/src/manager/globals/exports.ts

@@ -624,6 +624,8 @@ export default {
     'SHARED_STATE_CHANGED',
     'SHARED_STATE_SET',
     'SHARE_ISOLATE_MODE',
+    'SHARE_POPOVER_OPENED',
+    'SHARE_STORY_LINK',
     'SIDEBAR_FILTER_CHANGED',
     'STORIES_COLLAPSE_ALL',
     'STORIES_EXPAND_ALL',