Migrate to new test provider API

.storybook/main.ts

@@ -14,16 +14,8 @@ const configFileMap = {
 
 const config: StorybookConfig = {
   addons: [
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        backgrounds: false,
-        viewport: false,
-      },
-    },
-    '@storybook/addon-interactions',
-    // TODO: re-enable addon-designs when it is compatible with SB 9
-    // '@storybook/addon-designs',
+    '@storybook/addon-docs',
+    '@storybook/addon-designs',
     {
       name: useDistVersion ? '../dist/preset.js' : '../src/dev.ts',
       options: {

package.json

@@ -68,13 +68,13 @@
     "@graphql-typed-document-node/core": "^3.2.0",
     "@parcel/watcher": "^2.4.1",
     "@storybook/addon-designs": "^9.0.0-0",
-    "@storybook/addon-essentials": "^9.0.0 || ^9.0.0-alpha.4",
-    "@storybook/addon-interactions": "^9.0.0 || ^9.0.0-alpha.4",
-    "@storybook/addon-mdx-gfm": "^9.0.0 || ^9.0.0-alpha.4",
-    "@storybook/blocks": "^9.0.0 || ^9.0.0-alpha.4",
+    "@storybook/addon-docs": "0.0.0-pr-30875-sha-5d0152e4",
+    "@storybook/addon-essentials": "0.0.0-pr-30875-sha-5d0152e4",
+    "@storybook/addon-mdx-gfm": "0.0.0-pr-30875-sha-5d0152e4",
+    "@storybook/blocks": "0.0.0-pr-30875-sha-5d0152e4",
     "@storybook/icons": "^1.4.0",
-    "@storybook/react": "^9.0.0 || ^9.0.0-alpha.4",
-    "@storybook/react-vite": "^9.0.0 || ^9.0.0-alpha.4",
+    "@storybook/react": "0.0.0-pr-30875-sha-5d0152e4",
+    "@storybook/react-vite": "0.0.0-pr-30875-sha-5d0152e4",
     "@types/jsonfile": "^6.1.1",
     "@types/node": "^22.13.5",
     "@types/pluralize": "^0.0.29",
@@ -109,7 +109,7 @@
     "react-dom": "^18.3.1",
     "react-joyride": "^2.7.2",
     "rimraf": "^3.0.2",
-    "storybook": "^9.0.0 || ^9.0.0-alpha.4",
+    "storybook": "0.0.0-pr-30875-sha-5d0152e4",
     "ts-dedent": "^2.2.0",
     "tsup": "^6.6.3",
     "typescript": "^5.7.3",
@@ -123,7 +123,7 @@
     "zx": "^1.14.1"
   },
   "peerDependencies": {
-    "storybook": "^0.0.0-0 || ^9.0.0 || ^9.0.0-alpha.4"
+    "storybook": "^0.0.0-0 || 0.0.0-pr-30875-sha-5d0152e4"
   },
   "packageManager": "[email protected]",
   "engines": {

src/Panel.tsx

@@ -1,17 +1,17 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import type { API } from 'storybook/manager-api';
-import { useChannel, useStorybookState } from 'storybook/manager-api';
+import { experimental_getStatusStore, useChannel, useStorybookState } from 'storybook/manager-api';
 
 import { AuthProvider } from './AuthContext';
 import { Spinner } from './components/design-system';
 import {
+  ADDON_ID,
   GIT_INFO,
   GIT_INFO_ERROR,
   IS_OFFLINE,
   IS_OUTDATED,
   LOCAL_BUILD_PROGRESS,
   REMOVE_ADDON,
-  statusStore,
   TELEMETRY,
 } from './constants';
 import { Authentication } from './screens/Authentication/Authentication';
@@ -40,6 +40,8 @@
   api: API;
 }
 
+const statusStore = experimental_getStatusStore(ADDON_ID);
+
 export const Panel = ({ active, api }: PanelProps) => {
   const [accessToken, updateAccessToken] = useAccessToken();
   const setAccessToken = useCallback(

src/TestingModuleDescription.tsx → src/TestingModule.tsx

@@ -1,15 +1,18 @@
 import { FailedIcon } from '@storybook/icons';
+import { PlayHollowIcon, StopAltIcon } from '@storybook/icons';
 import pluralize from 'pluralize';
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { Link } from 'storybook/internal/components';
-import { type Addon_TestProviderState } from 'storybook/internal/types';
+import { Button, ProgressSpinner, TooltipNote, WithTooltip } from 'storybook/internal/components';
 import {
-  type API,
+  experimental_getTestProviderStore,
   experimental_useStatusStore,
-  useChannel,
+  experimental_useTestProviderStore,
+  useStorybookApi,
   useStorybookState,
 } from 'storybook/manager-api';
 import { color } from 'storybook/theming';
+import { styled } from 'storybook/theming';
 
 import { BUILD_STEP_CONFIG } from './buildSteps';
 import {
@@ -21,9 +24,6 @@
   LOCAL_BUILD_PROGRESS,
   PANEL_ID,
   TEST_PROVIDER_ID,
-  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
-  TESTING_MODULE_PROGRESS_REPORT,
-  TESTING_MODULE_RUN_ALL_REQUEST,
 } from './constants';
 import { ConfigInfoPayload, LocalBuildProgress } from './types';
 import { useAccessToken } from './utils/graphQLClient';
@@ -32,10 +32,44 @@
 import { useProjectId } from './utils/useProjectId';
 import { useSharedState } from './utils/useSharedState';
 
-type TestingModuleDescriptionProps = Addon_TestProviderState & { api: API };
+const Container = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '8px 0',
+});
 
-export const TestingModuleDescription = ({ api, running }: TestingModuleDescriptionProps) => {
-  const { addNotification, selectStory, setOptions, togglePanel } = api;
+const Info = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  marginLeft: 8,
+});
+
+const Actions = styled.div({
+  display: 'flex',
+  gap: 4,
+});
+
+const TitleWrapper = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ({
+  fontSize: theme.typography.size.s1,
+  fontWeight: crashed ? 'bold' : 'normal',
+  color: crashed ? theme.color.negativeText : theme.color.defaultText,
+}));
+
+const DescriptionWrapper = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+  color: theme.textMutedColor,
+}));
+
+const Progress = styled(ProgressSpinner)({
+  margin: 4,
+});
+
+const StopIcon = styled(StopAltIcon)({
+  width: 10,
+});
+
+export const TestingModule = () => {
+  const { addNotification, selectStory, setOptions, togglePanel } = useStorybookApi();
   const warningStatusCount = experimental_useStatusStore(
     (allStatuses) =>
       Object.values(allStatuses)
@@ -60,6 +94,20 @@
   const lastStep = useRef(localBuildProgress?.currentStep);
   const { index, storyId, viewMode } = useStorybookState();
 
+  const testProviderState = experimental_useTestProviderStore(
+    (state) => state[TEST_PROVIDER_ID] ?? 'test-provider-state:pending'
+  );
+
+  const { startBuild, stopBuild } = useBuildEvents({
+    localBuildProgress,
+    accessToken,
+  });
+
+  useEffect(
+    () => experimental_getTestProviderStore(TEST_PROVIDER_ID).onRunAll(startBuild),
+    [startBuild]
+  );
+
   const openVisualTestsPanel = useCallback(
     (warning?: string) => {
       setOptions({ selectedPanel: PANEL_ID });
@@ -127,11 +175,6 @@
     }
   }, [addNotification, clickNotification, localBuildProgress?.currentStep]);
 
-  const { startBuild, stopBuild } = useBuildEvents({
-    localBuildProgress,
-    accessToken,
-  });
-
   let warning: string | undefined;
   if (!projectId) warning = 'Select a project';
   if (!isLoggedIn) warning = 'Login required';
@@ -144,50 +187,86 @@
     [openVisualTestsPanel, warning]
   );
 
-  const emit = useChannel(
-    {
-      [TESTING_MODULE_RUN_ALL_REQUEST]: ({ providerId }) => {
-        if (providerId === TEST_PROVIDER_ID) startBuild();
-      },
-      [TESTING_MODULE_CANCEL_TEST_RUN_REQUEST]: ({ providerId }) => {
-        if (providerId === TEST_PROVIDER_ID) stopBuild();
-      },
-    },
-    [startBuild, stopBuild]
-  );
+  let description: string | React.ReactNode;
+  switch (true) {
+    case !!warning:
+      description = <Link onClick={clickWarning}>{warning}</Link>;
+      break;
+    case testProviderState === 'test-provider-state:running':
+      description = localBuildProgress
+        ? BUILD_STEP_CONFIG[localBuildProgress.currentStep].renderProgress(localBuildProgress)
+        : 'Starting...';
+      break;
+    case !!isOutdated:
+      description = 'Test results outdated';
+      break;
+    case localBuildProgress?.currentStep === 'aborted':
+      description = 'Aborted by user';
+      break;
+    case localBuildProgress?.currentStep === 'complete':
+      description = localBuildProgress.errorCount
+        ? `Encountered ${pluralize('component error', localBuildProgress.errorCount, true)}`
+        : warningStatusCount
+          ? `Found ${pluralize('story', warningStatusCount, true)} with ${pluralize('change', warningStatusCount)}`
+          : 'No visual changes detected';
+      break;
+    default:
+      description = 'Not run';
+  }
 
-  useEffect(() => {
-    emit(TESTING_MODULE_PROGRESS_REPORT, { providerId: TEST_PROVIDER_ID, runnable: !warning });
-  }, [emit, warning]);
+  return (
+    <Container>
+      <Info>
+        <TitleWrapper crashed={testProviderState === 'test-provider-state:crashed'}>
+          {localBuildProgress?.currentStep === 'error' ||
+          localBuildProgress?.currentStep === 'limited'
+            ? "Visual tests didn't complete"
+            : 'Visual tests'}
+        </TitleWrapper>
+        <DescriptionWrapper>{description}</DescriptionWrapper>
+      </Info>
 
-  if (warning) {
-    return <Link onClick={clickWarning}>{warning}</Link>;
-  }
-  if (running) {
-    if (localBuildProgress) {
-      const { renderProgress } = BUILD_STEP_CONFIG[localBuildProgress.currentStep];
-      return <>{renderProgress(localBuildProgress)}</>;
-    }
-    return <>Starting...</>;
-  }
-  if (isOutdated) {
-    return <>Test results outdated</>;
-  }
-  if (localBuildProgress?.currentStep === 'aborted') {
-    return <>Aborted by user</>;
-  }
-  if (localBuildProgress?.currentStep === 'complete') {
-    if (localBuildProgress.errorCount) {
-      return <>Encountered {pluralize('component error', localBuildProgress.errorCount, true)}</>;
-    }
-    return warningStatusCount ? (
-      <>
-        Found {pluralize('story', warningStatusCount, true)} with
-        {pluralize('change', warningStatusCount)}
-      </>
-    ) : (
-      <>No visual changes detected</>
-    );
-  }
-  return <>Not run</>;
+      <Actions>
+        {warning ? null : testProviderState === 'test-provider-state:running' ? (
+          <WithTooltip
+            hasChrome={false}
+            trigger="hover"
+            tooltip={<TooltipNote note="Stop Visual tests" />}
+          >
+            <Button
+              aria-label="Stop Visual tests"
+              size="medium"
+              variant="ghost"
+              padding="none"
+              onClick={stopBuild}
+              disabled={
+                !['initialize', 'build', 'upload'].includes(localBuildProgress?.currentStep ?? '')
+              }
+            >
+              <Progress percentage={localBuildProgress?.buildProgressPercentage}>
+                <StopIcon />
+              </Progress>
+            </Button>
+          </WithTooltip>
+        ) : (
+          <WithTooltip
+            hasChrome={false}
+            trigger="hover"
+            tooltip={<TooltipNote note="Start Visual tests" />}
+          >
+            <Button
+              aria-label="Start Visual tests"
+              size="medium"
+              variant="ghost"
+              padding="small"
+              onClick={startBuild}
+              disabled={testProviderState === 'test-provider-state:crashed'}
+            >
+              <PlayHollowIcon />
+            </Button>
+          </WithTooltip>
+        )}
+      </Actions>
+    </Container>
+  );
 };

src/components/BuildProgressBarInline.tsx

@@ -3,7 +3,6 @@
 
 import { LocalBuildProgress } from '../types';
 import { BuildProgressLabel } from './BuildProgressLabel';
-import { ProgressBar, ProgressTrack } from './SidebarTopButton';
 import { Text } from './Text';
 
 const ProgressTextWrapper = styled(Text)({
@@ -14,6 +13,18 @@
   marginTop: 15,
 });
 
+const ProgressTrack = styled.div(({ theme }) => ({
+  height: 5,
+  background: theme.background.hoverable,
+  borderRadius: 5,
+  overflow: 'hidden',
+}));
+
+const ProgressBar = styled(ProgressTrack)(({ theme }) => ({
+  background: theme.color.secondary,
+  transition: 'width 3s ease-out',
+}));
+
 export function BuildProgressInline({
   localBuildProgress,
 }: {