TestAddon: Refactor UI & add config options

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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Link as LinkComponent } from 'storybook/internal/components';
+import { type TestProviderConfig, type TestProviderState } from 'storybook/internal/core-events';
+import { styled } from 'storybook/internal/theming';
+
+import { RelativeTime } from './RelativeTime';
+
+export const DescriptionStyle = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+  color: theme.barTextColor,
+}));
+
+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/Subnav.tsx

@@ -41,7 +41,7 @@ const StyledSubnav = styled.nav(({ theme }) => ({
   paddingLeft: 15,
 }));
 
-export interface SubnavProps {
+interface SubnavProps {
   controls: Controls;
   controlStates: ControlStates;
   status: Call['status'];
@@ -64,7 +64,7 @@ const Note = styled(TooltipNote)(({ theme }) => ({
   fontFamily: theme.typography.fonts.base,
 }));
 
-export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
   color: theme.textMutedColor,
   margin: '0 3px',
 }));

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

@@ -0,0 +1,158 @@
+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, within } from '@storybook/test';
+
+import type { Config, 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'),
+    updateTestProviderState: fn().mockName('api::updateTestProviderState'),
+  },
+};
+
+const config: TestProviderConfig = {
+  id: 'test-provider-id',
+  name: 'Test Provider',
+  type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+  runnable: true,
+  watchable: true,
+};
+
+const baseState: TestProviderState<Details, Config> = {
+  cancellable: true,
+  cancelling: false,
+  crashed: false,
+  error: null,
+  failed: false,
+  running: false,
+  watching: false,
+  config: {
+    a11y: false,
+    coverage: false,
+  },
+  details: {
+    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,
+    },
+    api: managerContext.api,
+  },
+  decorators: [
+    (StoryFn) => (
+      <Content>
+        <StoryFn />
+      </Content>
+    ),
+    (StoryFn) => (
+      <ManagerContext.Provider value={managerContext}>
+        <StoryFn />
+      </ManagerContext.Provider>
+    ),
+  ],
+} 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: {
+        testResults: [],
+      },
+      config: {
+        a11y: true,
+        coverage: false,
+      },
+    },
+  },
+};
+
+export const EnableEditing: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      config: {
+        a11y: true,
+        coverage: false,
+      },
+      details: {
+        testResults: [],
+      },
+    },
+  },
+
+  play: async ({ canvasElement }) => {
+    const screen = within(canvasElement);
+
+    screen.getByLabelText('Edit').click();
+  },
+};