Addon Test: Refactor UI & add config options

code/addons/test/src/components/Description.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { Link as LinkComponent } from 'storybook/internal/components';
+import { type TestProviderConfig, type TestProviderState } from 'storybook/internal/core-events';
+
+import { RelativeTime } from './RelativeTime';
+import { DescriptionStyle } from './TestProviderRender';
+
+export function Description({
+  errorMessage,
+  setIsModalOpen,
+  state,
+}: {
+  state: TestProviderConfig & TestProviderState;
+  errorMessage: string;
+  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  let description: string | React.ReactNode = 'Not run';
+
+  if (state.running) {
+    description = state.progress
+      ? `Testing... ${state.progress.numPassedTests}/${state.progress.numTotalTests}`
+      : 'Starting...';
+  } else if (state.failed && !errorMessage) {
+    description = '';
+  } else if (state.crashed || (state.failed && errorMessage)) {
+    description = (
+      <>
+        <LinkComponent
+          isButton
+          onClick={() => {
+            setIsModalOpen(true);
+          }}
+        >
+          {state.error?.name || 'View full error'}
+        </LinkComponent>
+      </>
+    );
+  } else if (state.progress?.finishedAt) {
+    description = (
+      <RelativeTime
+        timestamp={new Date(state.progress.finishedAt)}
+        testCount={state.progress.numTotalTests}
+      />
+    );
+  } else if (state.watching) {
+    description = 'Watching for file changes';
+  }
+  return <DescriptionStyle id="testing-module-description">{description}</DescriptionStyle>;
+}

code/addons/test/src/components/RelativeTime.tsx

@@ -1,6 +1,23 @@
 import { useEffect, useState } from 'react';
 
-import { getRelativeTimeString } from '../manager';
+export function getRelativeTimeString(date: Date): string {
+  const delta = Math.round((date.getTime() - Date.now()) / 1000);
+  const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
+  const units: Intl.RelativeTimeFormatUnit[] = [
+    'second',
+    'minute',
+    'hour',
+    'day',
+    'week',
+    'month',
+    'year',
+  ];
+
+  const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(delta));
+  const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
+  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+  return rtf.format(Math.floor(delta / divisor), units[unitIndex]);
+}
 
 export const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: number }) => {
   const [relativeTimeString, setRelativeTimeString] = useState(null);

code/addons/test/src/components/TestProviderRender.stories.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+
+import type { TestProviderConfig, TestProviderState } from 'storybook/internal/core-events';
+import { ManagerContext } from 'storybook/internal/manager-api';
+import { styled } from 'storybook/internal/theming';
+import { Addon_TypesEnum } from 'storybook/internal/types';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import type { Details } from '../constants';
+import { TestProviderRender } from './TestProviderRender';
+
+type Story = StoryObj<typeof TestProviderRender>;
+const managerContext: any = {
+  state: {
+    testProviders: {
+      'test-provider-id': {
+        id: 'test-provider-id',
+        name: 'Test Provider',
+        type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+      },
+    },
+  },
+  api: {
+    getDocsUrl: fn().mockName('api::getDocsUrl'),
+    emit: fn().mockName('api::emit'),
+  },
+};
+
+const config: TestProviderConfig = {
+  id: 'test-provider-id',
+  name: 'Test Provider',
+  type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+  runnable: true,
+  watchable: true,
+};
+
+const baseState: TestProviderState<Details> = {
+  cancellable: true,
+  cancelling: false,
+  crashed: false,
+  error: null,
+  failed: false,
+  running: false,
+  watching: false,
+  details: {
+    editing: false,
+    options: {
+      a11y: false,
+      coverage: false,
+    },
+    testResults: [
+      {
+        endTime: 0,
+        startTime: 0,
+        status: 'passed',
+        message: 'All tests passed',
+        results: [
+          {
+            storyId: 'story-id',
+            status: 'success',
+            duration: 100,
+            testRunId: 'test-run-id',
+          },
+        ],
+      },
+    ],
+  },
+};
+
+const Content = styled.div({
+  padding: '12px 6px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+});
+
+export default {
+  title: 'TestProviderRender',
+  component: TestProviderRender,
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+    },
+  },
+  decorators: [
+    (StoryFn) => (
+      <ManagerContext.Provider value={managerContext}>
+        <StoryFn api={managerContext.api} />
+      </ManagerContext.Provider>
+    ),
+    (StoryFn) => (
+      <Content>
+        <StoryFn />
+      </Content>
+    ),
+  ],
+} as Meta<typeof TestProviderRender>;
+
+export const Default: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+    },
+  },
+};
+
+export const Running: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      running: true,
+    },
+  },
+};
+
+export const EnableA11y: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      details: {
+        editing: false,
+        options: {
+          a11y: true,
+          coverage: false,
+        },
+        testResults: [],
+      },
+    },
+  },
+};

code/addons/test/src/components/TestProviderRender.tsx

@@ -0,0 +1,130 @@
+import React, { type FC, Fragment, useState } from 'react';
+
+import { Button } from 'storybook/internal/components';
+import {
+  TESTING_MODULE_RUN_ALL_REQUEST,
+  type TestProviderConfig,
+  type TestProviderState,
+} from 'storybook/internal/core-events';
+import type { API } from 'storybook/internal/manager-api';
+import { styled } from 'storybook/internal/theming';
+
+import { EyeIcon, PlayHollowIcon, StopAltHollowIcon } from '@storybook/icons';
+
+import { type Details, TEST_PROVIDER_ID } from '../constants';
+import { Description } from './Description';
+import { GlobalErrorModal } from './GlobalErrorModal';
+
+const Info = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  marginLeft: 6,
+});
+
+const Title2 = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ({
+  fontSize: theme.typography.size.s1,
+  fontWeight: crashed ? 'bold' : 'normal',
+  color: crashed ? theme.color.negativeText : theme.color.defaultText,
+}));
+
+export const DescriptionStyle = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+  color: theme.barTextColor,
+}));
+
+const Actions = styled.div({
+  display: 'flex',
+  gap: 6,
+});
+
+const Head = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  gap: 6,
+});
+
+export const TestProviderRender: FC<{
+  api: API;
+  state: TestProviderConfig & TestProviderState<Details>;
+}> = ({ state, api }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const title = state.crashed || state.failed ? 'Component tests failed' : 'Component tests';
+  const errorMessage = state.error?.message;
+  return (
+    <Fragment>
+      <Head>
+        <Info>
+          <Title2 crashed={state.crashed} id="testing-module-title">
+            {title}
+          </Title2>
+          <Description errorMessage={errorMessage} setIsModalOpen={setIsModalOpen} state={state} />
+        </Info>
+
+        <Actions>
+          {state.watchable && (
+            <Button
+              aria-label={`${state.watching ? 'Disable' : 'Enable'} watch mode for ${state.name}`}
+              variant="ghost"
+              padding="small"
+              active={state.watching}
+              onClick={() => api.setTestProviderWatchMode(state.id, !state.watching)}
+              disabled={state.crashed || state.running}
+            >
+              <EyeIcon />
+            </Button>
+          )}
+          {state.runnable && (
+            <>
+              {state.running && state.cancellable ? (
+                <Button
+                  aria-label={`Stop ${state.name}`}
+                  variant="ghost"
+                  padding="small"
+                  onClick={() => api.cancelTestProvider(state.id)}
+                  disabled={state.cancelling}
+                >
+                  <StopAltHollowIcon />
+                </Button>
+              ) : (
+                <Button
+                  aria-label={`Start ${state.name}`}
+                  variant="ghost"
+                  padding="small"
+                  onClick={() => api.runTestProvider(state.id)}
+                  disabled={state.crashed || state.running}
+                >
+                  <PlayHollowIcon />
+                </Button>
+              )}
+            </>
+          )}
+        </Actions>
+      </Head>
+
+      {!state.details.editing ? (
+        <Fragment>
+          {state.details?.options?.a11y ? <div>A11Y</div> : null}
+          {state.details?.options?.coverage ? <div>COVERAGE</div> : null}
+        </Fragment>
+      ) : (
+        <Fragment>
+          <div>EDITING A11Y</div>
+          <div>EDITING COVERAGE</div>
+        </Fragment>
+      )}
+
+      <GlobalErrorModal
+        error={errorMessage}
+        open={isModalOpen}
+        onClose={() => {
+          setIsModalOpen(false);
+        }}
+        onRerun={() => {
+          setIsModalOpen(false);
+          api.getChannel().emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: TEST_PROVIDER_ID });
+        }}
+      />
+    </Fragment>
+  );
+};

code/addons/test/src/constants.ts

@@ -1,3 +1,5 @@
+import type { TestResult } from './node/reporter';
+
 export const ADDON_ID = 'storybook/test';
 export const TEST_PROVIDER_ID = `${ADDON_ID}/test-provider`;
 export const PANEL_ID = `${ADDON_ID}/panel`;
@@ -7,3 +9,14 @@ export const TUTORIAL_VIDEO_LINK = 'https://youtu.be/Waht9qq7AoA';
 export const DOCUMENTATION_LINK = 'writing-tests/test-addon';
 export const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#what-happens-when-there-are-different-test-results-in-multiple-environments`;
 export const DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK}#what-happens-if-vitest-itself-has-an-error`;
+
+interface Options {
+  coverage: boolean;
+  a11y: boolean;
+}
+
+export type Details = {
+  testResults: TestResult[];
+  options: Options;
+  editing: boolean;
+};