Add preliminary support for rendering run hooks

src/components/app/TestRunHooks.module.scss

@@ -0,0 +1,12 @@
+.hooks {
+  padding: 0;
+  list-style: none;
+
+  > li {
+    list-style: none;
+
+    &:not(:empty) {
+      padding: 0.125em 0;
+    }
+  }
+}

src/components/app/TestRunHooks.stories.tsx

@@ -0,0 +1,41 @@
+import * as messages from '@cucumber/messages'
+import { Story } from '@ladle/react'
+import React from 'react'
+
+import globalHooksAfterAllError from '../../../acceptance/global-hooks-afterall-error/global-hooks-afterall-error.js'
+import globalHooksAttachments from '../../../acceptance/global-hooks-attachments/global-hooks-attachments.js'
+import globalHooksBeforeAllError from '../../../acceptance/global-hooks-beforeall-error/global-hooks-beforeall-error.js'
+import { EnvelopesProvider, FilteredDocuments } from './index.js'
+import { TestRunHooks } from './TestRunHooks.js'
+
+type TemplateArgs = {
+  envelopes: readonly messages.Envelope[]
+}
+
+const Template: Story<TemplateArgs> = ({ envelopes }) => {
+  return (
+    <EnvelopesProvider envelopes={envelopes}>
+      <FilteredDocuments />
+      <TestRunHooks />
+    </EnvelopesProvider>
+  )
+}
+
+export default {
+  title: 'App/TestRunHooksList',
+}
+
+export const GlobalHooksWithAttachments = Template.bind({})
+GlobalHooksWithAttachments.args = {
+  envelopes: globalHooksAttachments,
+}
+
+export const GlobalHooksBeforeAllError = Template.bind({})
+GlobalHooksBeforeAllError.args = {
+  envelopes: globalHooksBeforeAllError,
+}
+
+export const GlobalHooksAfterAllError = Template.bind({})
+GlobalHooksAfterAllError.args = {
+  envelopes: globalHooksAfterAllError,
+}

src/components/app/TestRunHooks.tsx

@@ -0,0 +1,29 @@
+import { TestRunHookFinished } from '@cucumber/messages'
+import React, { FC } from 'react'
+
+import { useQueries } from '../../hooks/useQueries.js'
+import { TestRunHookOutcome } from '../results/TestRunHookOutcome.js'
+import styles from './TestRunHooks.module.scss'
+
+export const TestRunHooks: FC = () => {
+  const { cucumberQuery } = useQueries()
+  const testRunHooksFinished: ReadonlyArray<TestRunHookFinished> =
+    cucumberQuery.findAllTestRunHookFinished()
+  return (
+    <ol aria-label="RunHooks" className={styles.hooks}>
+      {testRunHooksFinished.map((testRunHookFinished) => {
+        const testRunHook = cucumberQuery.findHookBy(testRunHookFinished)
+
+        return (
+          <TestRunHookOutcome
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            key={testRunHook!.id}
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            hook={testRunHook!}
+            testRunHookFinished={testRunHookFinished}
+          />
+        )
+      })}
+    </ol>
+  )
+}

src/components/app/index.ts

@@ -10,4 +10,5 @@ export * from './NoMatchResult.js'
 export * from './QueriesProvider.js'
 export * from './SearchBar.js'
 export * from './StatusesSummary.js'
+export * from './TestRunHooks.js'
 export * from './UrlSearchProvider.js'

src/components/results/TestRunHookOutcome.module.scss

@@ -0,0 +1,36 @@
+.header {
+  display: flex;
+  width: 100%;
+  gap: 0.25rem;
+}
+
+.status {
+  padding-top: 0.1em;
+}
+
+.title {
+  > * {
+    vertical-align: middle;
+
+    & + * {
+      margin-left: 0.5em;
+    }
+  }
+}
+
+.name {
+  font-size: 1em;
+  display: inline;
+  font-weight: normal;
+  padding: 0;
+  margin: 0;
+}
+
+.content {
+  margin-left: 1.125rem;
+
+  // bits of detail (doc string, data table, error, attachments) get consistent spacing between them
+  > * {
+    margin-top: 0.25rem !important;
+  }
+}

src/components/results/TestRunHookOutcome.tsx

@@ -0,0 +1,35 @@
+import { Hook, HookType, TestRunHookFinished } from '@cucumber/messages'
+import React, { FC } from 'react'
+
+import { StatusIcon } from '../gherkin/index.js'
+import styles from './TestRunHookOutcome.module.scss'
+import { TestStepAttachments } from './TestStepAttachments.js'
+import { TestStepDuration } from './TestStepDuration.js'
+import { TestStepResultDetails } from './TestStepResultDetails.js'
+
+interface Props {
+  hook: Hook
+  testRunHookFinished: TestRunHookFinished
+}
+
+export const TestRunHookOutcome: FC<Props> = ({ hook, testRunHookFinished }) => {
+  return (
+    <li data-status={testRunHookFinished.result.status}>
+      <div className={styles.header}>
+        <div className={styles.status}>
+          <StatusIcon status={testRunHookFinished.result.status} />
+        </div>
+        <div className={styles.title}>
+          <h3 className={styles.name}>
+            {hook.name ?? (hook.type === HookType.BEFORE_TEST_RUN ? 'BeforeAll' : 'AfterAll')}
+          </h3>
+          <TestStepDuration duration={testRunHookFinished.result.duration} />
+        </div>
+      </div>
+      <div className={styles.content}>
+        <TestStepResultDetails {...testRunHookFinished.result} />
+        <TestStepAttachments testStepOrHookFinished={testRunHookFinished} />
+      </div>
+    </li>
+  )
+}

src/components/results/TestStepAttachments.tsx

@@ -1,4 +1,4 @@
-import { TestStepFinished } from '@cucumber/messages'
+import { TestRunHookFinished, TestStepFinished } from '@cucumber/messages'
 import React from 'react'
 import { FC } from 'react'
 
@@ -7,12 +7,12 @@ import { Attachment } from '../gherkin/index.js'
 import styles from './TestStepAttachments.module.scss'
 
 interface Props {
-  testStepFinished: TestStepFinished
+  testStepOrHookFinished: TestStepFinished | TestRunHookFinished
 }
 
-export const TestStepAttachments: FC<Props> = ({ testStepFinished }) => {
+export const TestStepAttachments: FC<Props> = ({ testStepOrHookFinished }) => {
   const { cucumberQuery } = useQueries()
-  const attachments = cucumberQuery.findAttachmentsBy(testStepFinished)
+  const attachments = cucumberQuery.findAttachmentsBy(testStepOrHookFinished)
   return (
     <ol className={styles.attachments}>
       {attachments.map((attachment, index) => {

src/components/results/TestStepOutcome.tsx

@@ -33,7 +33,7 @@ export const TestStepOutcome: FC<Props> = ({ testStep, testStepFinished }) => {
       <div className={styles.content}>
         {testStep.pickleStepId && <PickleStepArgument testStep={testStep} />}
         <TestStepResultDetails {...testStepFinished.testStepResult} />
-        <TestStepAttachments testStepFinished={testStepFinished} />
+        <TestStepAttachments testStepOrHookFinished={testStepFinished} />
       </div>
     </li>
   )