Enhance telemetry functionality by adding share-related events and updating ESLint rules. Introduce new events for sharing story links, isolating modes, and popover openings. Update telemetry channel to handle these events and create corresponding tests for payload generation.

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';
@@ -264,7 +264,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, coreOptions);
 
   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.tsx

@@ -1,6 +1,11 @@
 import React, { 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';
@@ -75,6 +80,7 @@ const ShareMenu = React.memo(function ShareMenu({
     const copyTitle = copied ? 'Copied!' : 'Copy story link';
     const originHrefs = api.getStoryHrefs(storyId, { base: 'origin', refId });
     const networkHrefs = api.getStoryHrefs(storyId, { base: 'network', refId });
+    api.emit(SHARE_POPOVER_OPENED);
 
     return [
       [
@@ -84,6 +90,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 +101,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

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