Merge pull request #33766 from storybookjs/norbert/share-channel-events

Telemetry: Add share events

Author: ndelangen

code/.eslintrc.js

@@ -160,10 +160,9 @@ module.exports = {
         'import-x/no-named-as-default-member': 'warn',
         'react/destructuring-assignment': 'warn',
 
-        // This warns about importing interfaces and types in a normal import, it's arguably better to import with the `type` prefix separate from the runtime imports,
-        // I leave this as a warning right now because we haven't really decided yet, and the codebase is riddled with errors if I set to 'error'.
+        // Our codebase is mostly TypeScript, and typescript will warn when imports are not found.
         // It IS set to 'error' for JS files.
-        'import-x/named': 'warn',
+        'import-x/named': 'off',
       },
     },
     {

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

@@ -96,6 +96,10 @@ enum events {
   OPEN_IN_EDITOR_RESPONSE = 'openInEditorResponse',
   // 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',
 }
 
 // Enables: `import Events from ...`
@@ -167,6 +171,9 @@ export const {
   OPEN_IN_EDITOR_REQUEST,
   OPEN_IN_EDITOR_RESPONSE,
   MANAGER_INERT_ATTRIBUTE_CHANGED,
+  SHARE_STORY_LINK,
+  SHARE_ISOLATE_MODE,
+  SHARE_POPOVER_OPENED,
 } = events;
 
 export * from './data/create-new-story';

code/core/src/core-server/presets/common-preset.ts

@@ -34,7 +34,7 @@ import { initCreateNewStoryChannel } from '../server-channel/create-new-story-ch
 import { initFileSearchChannel } from '../server-channel/file-search-channel';
 import { initGhostStoriesChannel } from '../server-channel/ghost-stories-channel';
 import { initOpenInEditorChannel } from '../server-channel/open-in-editor-channel';
-import { initPreviewInitializedChannel } from '../server-channel/preview-initialized-channel';
+import { initTelemetryChannel } from '../server-channel/telemetry-channel';
 import { initializeChecklist } from '../utils/checklist';
 import { defaultFavicon, defaultStaticDirs } from '../utils/constants';
 import { initializeSaveStory } from '../utils/save-story/save-story';
@@ -271,7 +271,7 @@ export const experimental_serverChannel = async (
   initCreateNewStoryChannel(channel, options, coreOptions);
   initGhostStoriesChannel(channel, options, coreOptions);
   initOpenInEditorChannel(channel, options, coreOptions);
-  initPreviewInitializedChannel(channel, options, coreOptions);
+  initTelemetryChannel(channel, options);
 
   return channel;
 };

…nnel/preview-initialized-channel.test.ts …server-channel/telemetry-channel.test.tscode/core/src/core-server/server-channel/preview-initialized-channel.test.ts renamed to code/core/src/core-server/server-channel/telemetry-channel.test.ts code/core/src/core-server/server-channel/preview-initialized-channel.test.ts renamed to code/core/src/core-server/server-channel/telemetry-channel.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { makePayload } from './preview-initialized-channel';
+import { makePayload } from './telemetry-channel';
 
 describe('makePayload', () => {
   beforeEach(() => {

…r-channel/preview-initialized-channel.ts …rver/server-channel/telemetry-channel.tscode/core/src/core-server/server-channel/preview-initialized-channel.ts renamed to code/core/src/core-server/server-channel/telemetry-channel.ts code/core/src/core-server/server-channel/preview-initialized-channel.ts renamed to code/core/src/core-server/server-channel/telemetry-channel.ts

@@ -1,9 +1,14 @@
 import type { Channel } from 'storybook/internal/channels';
-import { PREVIEW_INITIALIZED } from 'storybook/internal/core-events';
+import {
+  PREVIEW_INITIALIZED,
+  SHARE_ISOLATE_MODE,
+  SHARE_POPOVER_OPENED,
+  SHARE_STORY_LINK,
+} from 'storybook/internal/core-events';
 import { type InitPayload, telemetry } from 'storybook/internal/telemetry';
 import { type CacheEntry, getLastEvents } from 'storybook/internal/telemetry';
 import { getSessionId } from 'storybook/internal/telemetry';
-import type { CoreConfig, Options } from 'storybook/internal/types';
+import type { Options } from 'storybook/internal/types';
 
 export const makePayload = (
   userAgent: string,
@@ -24,13 +29,9 @@ export const makePayload = (
   return payload;
 };
 
-export function initPreviewInitializedChannel(
-  channel: Channel,
-  options: Options,
-  _coreConfig: CoreConfig
-) {
-  channel.on(PREVIEW_INITIALIZED, async ({ userAgent }) => {
-    if (!options.disableTelemetry) {
+export function initTelemetryChannel(channel: Channel, options: Options) {
+  if (!options.disableTelemetry) {
+    channel.on(PREVIEW_INITIALIZED, async ({ userAgent }) => {
       try {
         const sessionId = await getSessionId();
         const lastEvents = await getLastEvents();
@@ -40,9 +41,16 @@ export function initPreviewInitializedChannel(
           const payload = makePayload(userAgent, lastInit, sessionId);
           telemetry('preview-first-load', payload);
         }
-      } catch (e) {
-        // do nothing
-      }
-    }
-  });
+      } 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.stories.tsx

@@ -5,7 +5,7 @@ import { global } from '@storybook/global';
 import type { StoryObj } from '@storybook/react-vite';
 
 import { ManagerContext } from 'storybook/manager-api';
-import { expect, screen, waitFor } from 'storybook/test';
+import { expect, fn, screen, waitFor } from 'storybook/test';
 
 import { shareTool } from './share';
 
@@ -15,6 +15,7 @@ const managerContext = {
     refId: undefined,
   },
   api: {
+    emit: fn().mockName('api::emit'),
     getShortcutKeys: () => ({
       copyStoryLink: ['alt', 'shift', 'l'],
       openInIsolation: ['alt', 'shift', 'i'],

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

@@ -1,6 +1,11 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 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';
@@ -71,6 +76,10 @@ const ShareMenu = React.memo(function ShareMenu({
   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 });
@@ -84,6 +93,7 @@ const ShareMenu = React.memo(function ShareMenu({
           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);
@@ -94,6 +104,9 @@ const ShareMenu = React.memo(function ShareMenu({
           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',

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

@@ -615,6 +615,9 @@ export default {
     'SET_WHATS_NEW_CACHE',
     'SHARED_STATE_CHANGED',
     'SHARED_STATE_SET',
+    'SHARE_ISOLATE_MODE',
+    'SHARE_POPOVER_OPENED',
+    'SHARE_STORY_LINK',
     'STORIES_COLLAPSE_ALL',
     'STORIES_EXPAND_ALL',
     'STORY_ARGS_UPDATED',

code/core/src/telemetry/types.ts

@@ -43,6 +43,7 @@ export type EventType =
   | 'migrate'
   | 'preview-first-load'
   | 'doctor'
+  | 'share'
   | 'ghost-stories';
 export interface Dependency {
   version: string | undefined;