UI: Sidebar context menu addon API

code/addons/test/src/manager.tsx

@@ -1,16 +1,34 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { type FC, type SyntheticEvent, useCallback, useEffect, useState } from 'react';
 
-import { AddonPanel, Badge, Link as LinkComponent, Spaced } from 'storybook/internal/components';
+import {
+  AddonPanel,
+  Badge,
+  Button,
+  Link as LinkComponent,
+  type ListItem,
+  Spaced,
+} from 'storybook/internal/components';
 import { TESTING_MODULE_RUN_ALL_REQUEST } from 'storybook/internal/core-events';
 import type { Combo } from 'storybook/internal/manager-api';
-import { Consumer, addons, types, useAddonState } from 'storybook/internal/manager-api';
 import {
+  Consumer,
+  addons,
+  types,
+  useAddonState,
+  useStorybookApi,
+} from 'storybook/internal/manager-api';
+import { useTheme } from 'storybook/internal/theming';
+import {
+  type API_HashEntry,
   type API_StatusObject,
   type API_StatusValue,
+  type Addon_TestProviderState,
   type Addon_TestProviderType,
   Addon_TypesEnum,
 } from 'storybook/internal/types';
 
+import { PlayIcon } from '@storybook/icons';
+
 import { Panel } from './Panel';
 import { GlobalErrorModal } from './components/GlobalErrorModal';
 import { ADDON_ID, PANEL_ID, TEST_PROVIDER_ID } from './constants';
@@ -79,6 +97,40 @@ const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: nu
   );
 };
 
+const ContextMenuItem: FC<{
+  context: API_HashEntry;
+  state: Addon_TestProviderState<{
+    testResults: TestResult[];
+  }>;
+  ListItem: typeof ListItem;
+}> = ({ context, state, ListItem }) => {
+  const api = useStorybookApi();
+
+  const onClick = useCallback(
+    (event: SyntheticEvent) => {
+      event.stopPropagation();
+      // TODO - actually send along a sub-set based on `context` to test.
+      api.getChannel().emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: TEST_PROVIDER_ID });
+    },
+    [api]
+  );
+
+  const theme = useTheme();
+
+  return (
+    <ListItem
+      title={'Component tests'}
+      right={
+        <Button variant="ghost" padding="small" disabled={state.crashed || state.running}>
+          <PlayIcon fill={theme.barTextColor} />
+        </Button>
+      }
+      center={state.running ? 'Running...' : 'Run tests'}
+      onClick={onClick}
+    />
+  );
+};
+
 addons.register(ADDON_ID, (api) => {
   const storybookBuilder = (globalThis as any).STORYBOOK_BUILDER || '';
   if (storybookBuilder.includes('vite')) {
@@ -93,6 +145,13 @@ addons.register(ADDON_ID, (api) => {
       watchable: true,
 
       name: 'Component tests',
+      contextMenu: ({ context, state }, { ListItem }) => {
+        if (context.type === 'docs') {
+          return null;
+        }
+
+        return <ContextMenuItem context={context} state={state} ListItem={ListItem} />;
+      },
       title: ({ crashed, failed }) =>
         crashed || failed ? 'Component tests failed' : 'Component tests',
       description: ({ failed, running, watching, progress, crashed, error }) => {
@@ -181,20 +240,20 @@ addons.register(ADDON_ID, (api) => {
     }>);
   }
 
+  const filter = ({ state }: Combo) => {
+    return {
+      storyId: state.storyId,
+    };
+  };
+
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: Title,
     match: ({ viewMode }) => viewMode === 'story',
     render: ({ active }) => {
-      const newLocal = useCallback(({ state }: Combo) => {
-        return {
-          storyId: state.storyId,
-        };
-      }, []);
-
       return (
         <AddonPanel active={active}>
-          <Consumer filter={newLocal}>{({ storyId }) => <Panel storyId={storyId} />}</Consumer>
+          <Consumer filter={filter}>{({ storyId }) => <Panel storyId={storyId} />}</Consumer>
         </AddonPanel>
       );
     },

code/core/src/components/components/tooltip/TooltipLinkList.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, SyntheticEvent } from 'react';
+import type { ComponentProps, ReactNode, SyntheticEvent } from 'react';
 import React, { useCallback } from 'react';
 
 import { styled } from '@storybook/core/theming';
@@ -15,7 +15,8 @@ const List = styled.div(
   },
   ({ theme }) => ({
     borderRadius: theme.appBorderRadius + 2,
-  })
+  }),
+  ({ theme }) => (theme.base === 'dark' ? { background: theme.background.content } : {})
 );
 
 const Group = styled.div(({ theme }) => ({
@@ -25,15 +26,27 @@ const Group = styled.div(({ theme }) => ({
   },
 }));
 
-export interface Link extends Omit<ListItemProps, 'onClick'> {
+export interface NormalLink extends Omit<ListItemProps, 'onClick'> {
   id: string;
   onClick?: (
     event: SyntheticEvent,
     item: Pick<ListItemProps, 'id' | 'active' | 'disabled' | 'title' | 'href'>
   ) => void;
 }
 
-interface ItemProps extends Link {
+export type Link = CustomLink | NormalLink;
+
+/**
+ * This is a custom link that can be used in the `TooltipLinkList` component. It allows for custom
+ * content to be rendered in the list; it does not have to be a link.
+ */
+interface CustomLink {
+  id: string;
+  icon?: any;
+  content: ReactNode;
+}
+
+interface ItemProps extends NormalLink {
   isIndented?: boolean;
 }
 
@@ -63,9 +76,14 @@ export const TooltipLinkList = ({ links, LinkWrapper, ...props }: TooltipLinkLis
         .map((group, index) => {
           return (
             <Group key={group.map((link) => link.id).join(`~${index}~`)}>
-              {group.map((link) => (
-                <Item key={link.id} isIndented={isIndented} LinkWrapper={LinkWrapper} {...link} />
-              ))}
+              {group.map((link) => {
+                if ('content' in link) {
+                  return link.content;
+                }
+                return (
+                  <Item key={link.id} isIndented={isIndented} LinkWrapper={LinkWrapper} {...link} />
+                );
+              })}
             </Group>
           );
         })}

code/core/src/components/components/tooltip/WithTooltip.tsx

@@ -121,7 +121,7 @@ const WithTooltipPure = ({
     }
   );
 
-  const tooltipComponent = (
+  const tooltipComponent = isVisible ? (
     <Tooltip
       placement={state?.placement}
       ref={setTooltipRef}
@@ -133,7 +133,7 @@ const WithTooltipPure = ({
       {/* @ts-expect-error (non strict) */}
       {typeof tooltip === 'function' ? tooltip({ onHide: () => onVisibleChange(false) }) : tooltip}
     </Tooltip>
-  );
+  ) : null;
 
   return (
     <>

code/core/src/core-events/data/testing-module.ts

@@ -9,16 +9,16 @@ export type TestProviderState = Addon_TestProviderState;
 export type TestProviders = Record<TestProviderId, TestProviderConfig & TestProviderState>;
 
 export type TestingModuleRunRequestStories = {
-  id: string;
-  name: string;
+  id: string; // button--primary
+  name: string; // Primary
 };
 
 export type TestingModuleRunRequestPayload = {
   providerId: TestProviderId;
   payload: {
     stories: TestingModuleRunRequestStories[];
-    importPath: string;
-    componentPath: string;
+    importPath: string; // ./.../button.stories.tsx
+    componentPath: string; // ./.../button.tsx
   }[];
 };
 

code/core/src/manager-api/modules/addons.ts

@@ -30,6 +30,7 @@ export interface SubAPI {
       | Addon_Types
       | Addon_TypesEnum.experimental_PAGE
       | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+      | Addon_TypesEnum.experimental_TEST_PROVIDER
       | Addon_TypesEnum.experimental_SIDEBAR_TOP = Addon_Types,
   >(
     type: T

code/core/src/manager-api/modules/experimental_testmodule.ts

@@ -0,0 +1,100 @@
+import { Addon_TypesEnum } from '@storybook/core/types';
+
+import {
+  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+  TESTING_MODULE_RUN_ALL_REQUEST,
+  type TestProviderId,
+  type TestProviderState,
+  type TestProviders,
+} from '@storybook/core/core-events';
+
+import type { ModuleFn } from '../lib/types';
+
+export type SubState = {
+  testProviders: TestProviders;
+};
+
+const STORAGE_KEY = '@storybook/manager/test-providers';
+
+const initialTestProviderState: TestProviderState = {
+  details: {} as { [key: string]: any },
+  cancellable: false,
+  cancelling: false,
+  running: false,
+  watching: false,
+  failed: false,
+  crashed: false,
+};
+
+export type SubAPI = {
+  getTestproviderState(id: string): TestProviderState | undefined;
+  updateTestproviderState(id: TestProviderId, update: Partial<TestProviderState>): void;
+  clearTestproviderState(id: TestProviderId): void;
+  runTestprovider(id: TestProviderId): void;
+  cancelTestprovider(id: TestProviderId): void;
+};
+
+export const init: ModuleFn = ({ store, fullAPI }) => {
+  let sessionState: TestProviders = {};
+  try {
+    sessionState = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '{}');
+  } catch (_) {
+    //
+  }
+
+  const state: SubState = {
+    testProviders: sessionState,
+  };
+
+  const api: SubAPI = {
+    getTestproviderState(id) {
+      const { testProviders } = store.getState();
+
+      return testProviders?.[id];
+    },
+    updateTestproviderState(id, update) {
+      return store.setState(
+        ({ testProviders }) => {
+          return { testProviders: { ...testProviders, [id]: { ...testProviders[id], ...update } } };
+        },
+        { persistence: 'session' }
+      );
+    },
+    clearTestproviderState(id) {
+      const update = {
+        cancelling: false,
+        running: true,
+        failed: false,
+        crashed: false,
+        progress: undefined,
+      };
+      return store.setState(
+        ({ testProviders }) => {
+          return { testProviders: { ...testProviders, [id]: { ...testProviders[id], ...update } } };
+        },
+        { persistence: 'session' }
+      );
+    },
+    runTestprovider(id) {
+      fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: id });
+
+      return () => api.cancelTestprovider(id);
+    },
+    cancelTestprovider(id) {
+      api.updateTestproviderState(id, { cancelling: true });
+      fullAPI.emit(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, { providerId: id });
+    },
+  };
+
+  const initModule = async () => {
+    const initialState = Object.fromEntries(
+      Object.entries(fullAPI.getElements(Addon_TypesEnum.experimental_TEST_PROVIDER)).map(
+        ([id, config]) => [id, { ...config, ...initialTestProviderState, ...sessionState[id] }]
+      )
+    );
+
+    store.setState({ testProviders: initialState }, { persistence: 'session' });
+  };
+
+  return { init: initModule, state, api };
+};

code/core/src/manager-api/root.tsx

@@ -50,6 +50,7 @@ import { noArrayMerge } from './lib/merge';
 import type { ModuleFn } from './lib/types';
 import * as addons from './modules/addons';
 import * as channel from './modules/channel';
+import * as testproviders from './modules/experimental_testmodule';
 import * as globals from './modules/globals';
 import * as layout from './modules/layout';
 import * as notifications from './modules/notifications';
@@ -79,6 +80,7 @@ export type State = layout.SubState &
   stories.SubState &
   refs.SubState &
   notifications.SubState &
+  testproviders.SubState &
   version.SubState &
   url.SubState &
   shortcuts.SubState &
@@ -98,6 +100,7 @@ export type API = addons.SubAPI &
   globals.SubAPI &
   layout.SubAPI &
   notifications.SubAPI &
+  testproviders.SubAPI &
   shortcuts.SubAPI &
   settings.SubAPI &
   version.SubAPI &
@@ -178,6 +181,7 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
       addons,
       layout,
       notifications,
+      testproviders,
       settings,
       shortcuts,
       stories,

code/core/src/manager/components/sidebar/Refs.stories.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { fn } from '@storybook/test';
+
 import { ManagerContext } from '@storybook/core/manager-api';
 
 import { standardData as standardHeaderData } from './Heading.stories';
@@ -8,6 +10,15 @@ import { Ref } from './Refs';
 import { mockDataset } from './mockdata';
 import type { RefType } from './types';
 
+const managerContext = {
+  state: { docsOptions: {}, testProviders: {} },
+  api: {
+    on: fn().mockName('api::on'),
+    off: fn().mockName('api::off'),
+    getElements: fn(() => ({})),
+  },
+} as any;
+
 export default {
   component: Ref,
   title: 'Sidebar/Refs',
@@ -16,7 +27,7 @@ export default {
   globals: { sb_theme: 'side-by-side' },
   decorators: [
     (storyFn: any) => (
-      <ManagerContext.Provider value={{ state: { docsOptions: {} } } as any}>
+      <ManagerContext.Provider value={managerContext}>
         <IconSymbols />
         {storyFn()}
       </ManagerContext.Provider>