create-appraisejs 0.3.0 → 0.3.1-alpha.1

package/templates/starter/src/components/test-run/test-run-details.tsx

@@ -1,11 +1,8 @@
 'use client'
 
-import { AnimatePresence, motion } from 'motion/react'
 import { TestRunStatus, TestRunTestCaseResult } from '@prisma/client'
 import {
-  Binoculars,
   CheckCircle,
-  ExternalLink,
   Info,
   LoaderCircle,
   Tag as TagIcon,
@@ -22,6 +19,7 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Progress } from '@/components/ui/progress'
 import { cn, formatDateTime } from '@/lib/utils'
+import { TraceViewerIdleLabel, TraceViewerOpeningLabel, TraceViewerRunningLabel } from './trace-viewer-button-label'
 
 import {
   getDurationSeconds,
@@ -54,17 +52,17 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
           <CardTitle className="flex items-center justify-between">
             {testRun.status === TestRunStatus.RUNNING ? (
               <div className="flex items-center gap-2">
-                <LoaderCircle className="h-6 w-6 animate-spin text-blue-500" />
+                <LoaderCircle className="size-6 animate-spin text-blue-500" />
                 <span>Executing</span>
               </div>
             ) : testRun.status === TestRunStatus.COMPLETED ? (
               <div className="flex items-center gap-2 duration-300 animate-in fade-in-0">
-                <CheckCircle className="h-6 w-6 text-green-500" />
+                <CheckCircle className="size-6 text-green-500" />
                 <span>Finished</span>
               </div>
             ) : testRun.status === TestRunStatus.CANCELLED ? (
               <div className="flex items-center gap-2 duration-300 animate-in fade-in-0">
-                <XCircle className="h-6 w-6 text-red-500 duration-300 animate-in fade-in-0" />
+                <XCircle className="size-6 text-red-500 duration-300 animate-in fade-in-0" />
                 <span>Interrupted</span>
               </div>
             ) : null}
@@ -77,12 +75,12 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
               >
                 {isCancelling ? (
                   <>
-                    <LoaderCircle className="h-4 w-4 animate-spin" />
+                    <LoaderCircle className="size-4 animate-spin" />
                     Cancelling...
                   </>
                 ) : (
                   <>
-                    <Trash className="h-4 w-4" />
+                    <Trash className="size-4" />
                     <span>Cancel Run</span>
                   </>
                 )}
@@ -106,7 +104,7 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center">
-              <Info className="mr-2 h-6 w-6" />
+              <Info className="mr-2 size-6" />
               <h3 className="text-lg font-semibold">Test Run Information</h3>
             </CardTitle>
           </CardHeader>
@@ -119,7 +117,7 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
               <span className="text-sm font-medium">Status</span>
               <Badge variant="outline" className={cn(statusMeta.badgeClassName, 'py-1')}>
                 <span className="mr-1 text-white">
-                  <StatusIcon className={cn('h-4 w-4', testRun.status === TestRunStatus.RUNNING && 'animate-spin')} />
+                  <StatusIcon className={cn('size-4', testRun.status === TestRunStatus.RUNNING && 'animate-spin')} />
                 </span>
                 <span className="text-white">{statusMeta.label}</span>
               </Badge>
@@ -150,7 +148,7 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center">
-              <Timer className="mr-2 h-6 w-6" />
+              <Timer className="mr-2 size-6" />
               <h3 className="text-lg font-semibold">Timing</h3>
             </CardTitle>
           </CardHeader>
@@ -177,7 +175,7 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
         <Card className="md:col-span-2">
           <CardHeader>
             <CardTitle className="flex items-center">
-              <Tags className="mr-2 h-6 w-6" />
+              <Tags className="mr-2 size-6" />
               <h3 className="text-lg font-semibold">Tags</h3>
             </CardTitle>
           </CardHeader>
@@ -185,8 +183,8 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
             {testRun.tags.length > 0 ? (
               <div className="flex flex-wrap gap-2">
                 {testRun.tags.map(tag => (
-                  <Badge key={tag.id} variant="outline" className="bg-gray-700 text-white">
-                    <TagIcon className="mr-2 h-4 w-4 text-white" />
+                  <Badge key={tag.id} variant="outline" className="bg-zinc-700 text-white">
+                    <TagIcon className="mr-2 size-4 text-white" />
                     <span className="text-sm">{tag.name}</span>
                   </Badge>
                 ))}
@@ -200,7 +198,7 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
         <Card className="md:col-span-2">
           <CardHeader>
             <CardTitle className="flex items-center">
-              <TestTubes className="mr-2 h-6 w-6" />
+              <TestTubes className="mr-2 size-6" />
               <h3 className="text-lg font-semibold">Test Cases ({testRun.testCases.length})</h3>
             </CardTitle>
           </CardHeader>
@@ -221,14 +219,14 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
                       <div className="flex items-center gap-2">
                         <TestTubeDiagonal
                           className={cn(
-                            'mr-2 h-6 w-6 text-white',
+                            'mr-2 size-6 text-white',
                             testCase.result === TestRunTestCaseResult.PASSED
                               ? 'text-green-500'
                               : testCase.result === TestRunTestCaseResult.FAILED
                                 ? 'text-red-500'
                                 : testCase.result === TestRunTestCaseResult.UNTESTED
                                   ? 'text-blue-500'
-                                  : 'text-gray-500',
+                                  : 'text-zinc-500',
                           )}
                         />
                         <div className="flex flex-col gap-1">
@@ -244,11 +242,11 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
                         </div>
                       </div>
                       <div className="flex items-center gap-2">
-                        <Badge variant="outline" className="bg-gray-700 text-xs text-white">
+                        <Badge variant="outline" className="bg-zinc-700 text-xs text-white">
                           <div className="flex min-w-20 items-center gap-2 p-1.5">
                             <TestCaseStatusIcon
                               className={cn(
-                                'h-4 w-4',
+                                'size-4',
                                 testCase.status === 'PENDING' || testCase.status === 'RUNNING'
                                   ? 'animate-spin'
                                   : testCaseStatusMeta.iconClassName,
@@ -257,9 +255,9 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
                             <span>{testCaseStatusMeta.label}</span>
                           </div>
                         </Badge>
-                        <Badge variant="outline" className="bg-gray-700 text-xs text-white">
+                        <Badge variant="outline" className="bg-zinc-700 text-xs text-white">
                           <div className="flex min-w-20 items-center gap-2 p-1.5">
-                            <TestCaseResultIcon className={cn('h-4 w-4', testCaseResultMeta.iconClassName)} />
+                            <TestCaseResultIcon className={cn('size-4', testCaseResultMeta.iconClassName)} />
                             <span>{testCaseResultMeta.label}</span>
                           </div>
                         </Badge>
@@ -271,39 +269,13 @@ export function TestRunDetails({ testRun: initialTestRun }: TestRunDetailsProps)
                             disabled={loadingTraceViewer === testCase.id || runningTraceViewers.has(testCase.id)}
                             className="w-28 bg-transparent text-xs"
                           >
-                            <AnimatePresence mode="wait" initial={false}>
-                              <motion.div
-                                key={
-                                  loadingTraceViewer === testCase.id
-                                    ? 'opening'
-                                    : runningTraceViewers.has(testCase.id)
-                                      ? 'running'
-                                      : 'idle'
-                                }
-                                initial={{ opacity: 0, y: 4 }}
-                                animate={{ opacity: 1, y: 0 }}
-                                exit={{ opacity: 0, y: -4 }}
-                                transition={{ duration: 0.15 }}
-                                className="flex w-full items-center justify-center gap-1"
-                              >
-                                {loadingTraceViewer === testCase.id ? (
-                                  <>
-                                    <ExternalLink className="h-3 w-3 animate-pulse text-gray-500" />
-                                    Opening
-                                  </>
-                                ) : runningTraceViewers.has(testCase.id) ? (
-                                  <>
-                                    <LoaderCircle className="text-white-500 h-3 w-3 animate-spin" />
-                                    Running
-                                  </>
-                                ) : (
-                                  <>
-                                    <Binoculars className="h-3 w-3 text-blue-500" />
-                                    View Trace
-                                  </>
-                                )}
-                              </motion.div>
-                            </AnimatePresence>
+                            {loadingTraceViewer === testCase.id ? (
+                              <TraceViewerOpeningLabel />
+                            ) : runningTraceViewers.has(testCase.id) ? (
+                              <TraceViewerRunningLabel />
+                            ) : (
+                              <TraceViewerIdleLabel />
+                            )}
                           </Button>
                         ) : null}
                       </div>

package/templates/starter/src/components/test-run/test-run-header.test.tsx

@@ -15,12 +15,9 @@ vi.mock('@/actions/test-run/test-run-actions', () => ({
   getTestRunByIdAction,
 }))
 
-vi.mock('motion/react', () => ({
-  AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  motion: {
-    div: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
-  },
-}))
+import '@/test/setup-motion-react-mocks'
+
+const completedRunAt = new Date('2024-01-01T00:00:10.000Z')
 
 function createTestRun(overrides?: Partial<TestRunDetailsData>): TestRunDetailsData {
   return {
@@ -67,7 +64,7 @@ describe('TestRunHeader', () => {
       data: createTestRun({
         status: TestRunStatus.COMPLETED,
         result: TestRunResult.PASSED,
-        completedAt: new Date('2024-01-01T00:00:10.000Z'),
+        completedAt: completedRunAt,
         reports: [
           {
             id: 'report-1',
@@ -75,22 +72,20 @@ describe('TestRunHeader', () => {
             description: null,
             reportPath: null,
             testRunId: 'run-db-id',
-            createdAt: new Date('2024-01-01T00:00:10.000Z'),
-            updatedAt: new Date('2024-01-01T00:00:10.000Z'),
+            createdAt: completedRunAt,
+            updatedAt: completedRunAt,
           },
         ],
       }),
     })
 
-    render(
-      <TestRunHeader
-        initialTestRun={createTestRun({
-          status: TestRunStatus.COMPLETED,
-          result: TestRunResult.PASSED,
-          completedAt: new Date('2024-01-01T00:00:10.000Z'),
-        })}
-      />,
-    )
+    const initialTestRun = createTestRun({
+      status: TestRunStatus.COMPLETED,
+      result: TestRunResult.PASSED,
+      completedAt: completedRunAt,
+    })
+
+    render(<TestRunHeader initialTestRun={initialTestRun} />)
 
     expect(screen.getByRole('button', { name: /generating report/i })).toBeInTheDocument()
 

package/templates/starter/src/components/test-run/trace-viewer-button-label.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { AnimatePresence, LazyMotion, domAnimation } from 'motion/react'
+import * as motion from 'motion/react-m'
+import { Binoculars, ExternalLink, LoaderCircle } from 'lucide-react'
+
+type TraceViewerButtonLabelProps = {
+  labelKey: 'opening' | 'running' | 'idle'
+  children: ReactNode
+}
+
+function TraceViewerButtonLabel({ labelKey, children }: TraceViewerButtonLabelProps) {
+  return (
+    <LazyMotion features={domAnimation} strict>
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.div
+          key={labelKey}
+          initial={{ opacity: 0, y: 4 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -4 }}
+          transition={{ duration: 0.15 }}
+          className="flex w-full items-center justify-center gap-1"
+        >
+          {children}
+        </motion.div>
+      </AnimatePresence>
+    </LazyMotion>
+  )
+}
+
+export function TraceViewerOpeningLabel() {
+  return (
+    <TraceViewerButtonLabel labelKey="opening">
+      <ExternalLink className="size-3 animate-pulse text-zinc-500" />
+      Opening
+    </TraceViewerButtonLabel>
+  )
+}
+
+export function TraceViewerRunningLabel() {
+  return (
+    <TraceViewerButtonLabel labelKey="running">
+      <LoaderCircle className="text-white-500 size-3 animate-spin" />
+      Running
+    </TraceViewerButtonLabel>
+  )
+}
+
+export function TraceViewerIdleLabel() {
+  return (
+    <TraceViewerButtonLabel labelKey="idle">
+      <Binoculars className="size-3 text-blue-500" />
+      View Trace
+    </TraceViewerButtonLabel>
+  )
+}

package/templates/starter/src/components/test-run/use-log-viewer.ts

@@ -128,10 +128,7 @@ export function useLogViewer({ testRunId, status }: UseLogViewerParams) {
           console.log('[LogViewer] Received log event:', data)
         }
 
-        setLogs(currentLogs => [
-          ...currentLogs,
-          createLogMessage(data.type || 'stdout', data.message || ''),
-        ])
+        setLogs(currentLogs => [...currentLogs, createLogMessage(data.type || 'stdout', data.message || '')])
       } catch (error) {
         console.error('[LogViewer] Error parsing log event:', error, 'event.data:', event.data)
       }
@@ -147,10 +144,7 @@ export function useLogViewer({ testRunId, status }: UseLogViewerParams) {
         }
 
         const data = JSON.parse(event.data)
-        setLogs(currentLogs => [
-          ...currentLogs,
-          createLogMessage('status', `Process exited with code ${data.code}`),
-        ])
+        setLogs(currentLogs => [...currentLogs, createLogMessage('status', `Process exited with code ${data.code}`)])
       } catch (error) {
         console.error('[LogViewer] Error parsing exit event:', error, 'event.data:', event.data)
       } finally {

package/templates/starter/src/components/test-run/use-test-run-header.ts

@@ -4,10 +4,7 @@ import { useCallback, useEffect, useState } from 'react'
 
 import { getTestRunByIdAction } from '@/actions/test-run/test-run-actions'
 
-import {
-  getTestRunDetailsData,
-  type TestRunDetailsData,
-} from './test-run-details-helpers'
+import { getTestRunDetailsData, type TestRunDetailsData } from './test-run-details-helpers'
 import {
   getTestRunHeaderPollMode,
   matchesTestRunExitEvent,

package/templates/starter/src/components/test-run/view-report-button.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import { TestRunStatus, Report } from '@prisma/client'
+import type { ReactNode } from 'react'
+import { TestRunStatus, type Report } from '@prisma/client'
 import { Button } from '@/components/ui/button'
 import { FileText, LoaderCircle, XCircle } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
+import { AnimatePresence, LazyMotion, domAnimation } from 'motion/react'
+import * as motion from 'motion/react-m'
 import Link from 'next/link'
 
 interface ViewReportButtonProps {
@@ -12,60 +14,66 @@ interface ViewReportButtonProps {
   className?: string
 }
 
-export function ViewReportButton({ testRunStatus, reports, className }: ViewReportButtonProps) {
-  // Button should only be visible when test run is completed/cancelled AND a report exists
-  const shouldShowReportButton =
-    (testRunStatus === TestRunStatus.COMPLETED || testRunStatus === TestRunStatus.CANCELLED) && reports.length > 0
+const fadeSlideTransition = { duration: 0.3, ease: 'easeOut' as const }
+const scaleFadeTransition = { duration: 0.2, delay: 0.1 }
 
-  // Show cancelled status if test run is cancelled and no report exists
-  if (testRunStatus === TestRunStatus.CANCELLED && reports.length === 0) {
-    return (
+function AnimatedReportShell({ children }: { children: ReactNode }) {
+  return (
+    <LazyMotion features={domAnimation} strict>
       <AnimatePresence mode="wait">
         <motion.div
           initial={{ opacity: 0, y: -10 }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: -10 }}
-          transition={{ duration: 0.3, ease: 'easeOut' }}
+          transition={fadeSlideTransition}
         >
-          <Button variant="outline" size="sm" className={className} disabled>
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.2, delay: 0.1 }}
-              className="flex items-center gap-2"
-            >
-              <XCircle className="h-4 w-4" />
-              Report Not Available
-            </motion.div>
-          </Button>
+          {children}
         </motion.div>
       </AnimatePresence>
+    </LazyMotion>
+  )
+}
+
+function AnimatedButtonContent({ children }: { children: ReactNode }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={scaleFadeTransition}
+      className="flex items-center gap-2"
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export function ViewReportButton({ testRunStatus, reports, className }: ViewReportButtonProps) {
+  const shouldShowReportButton =
+    (testRunStatus === TestRunStatus.COMPLETED || testRunStatus === TestRunStatus.CANCELLED) && reports.length > 0
+
+  if (testRunStatus === TestRunStatus.CANCELLED && reports.length === 0) {
+    return (
+      <AnimatedReportShell>
+        <Button variant="outline" size="sm" className={className} disabled>
+          <AnimatedButtonContent>
+            <XCircle className="size-4" />
+            Report Not Available
+          </AnimatedButtonContent>
+        </Button>
+      </AnimatedReportShell>
     )
   }
 
-  // Show generating report message only for completed (not cancelled) runs without reports
   if (testRunStatus === TestRunStatus.COMPLETED && reports.length === 0) {
     return (
-      <AnimatePresence mode="wait">
-        <motion.div
-          initial={{ opacity: 0, y: -10 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -10 }}
-          transition={{ duration: 0.3, ease: 'easeOut' }}
-        >
-          <Button variant="outline" size="sm" className={className}>
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.2, delay: 0.1 }}
-              className="flex items-center gap-2"
-            >
-              <LoaderCircle className="h-4 w-4 animate-spin" />
-              Generating Report...
-            </motion.div>
-          </Button>
-        </motion.div>
-      </AnimatePresence>
+      <AnimatedReportShell>
+        <Button variant="outline" size="sm" className={className}>
+          <AnimatedButtonContent>
+            <LoaderCircle className="size-4 animate-spin" />
+            Generating report
+          </AnimatedButtonContent>
+        </Button>
+      </AnimatedReportShell>
     )
   }
 
@@ -76,27 +84,15 @@ export function ViewReportButton({ testRunStatus, reports, className }: ViewRepo
   const reportId = reports[0].id
 
   return (
-    <AnimatePresence mode="wait">
-      <motion.div
-        initial={{ opacity: 0, y: -10 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: -10 }}
-        transition={{ duration: 0.3, ease: 'easeOut' }}
-      >
-        <Link href={`/reports/${reportId}`}>
-          <Button variant="outline" size="sm" className={className}>
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.2, delay: 0.1 }}
-              className="flex items-center gap-2"
-            >
-              <FileText className="h-4 w-4" />
-              View Report
-            </motion.div>
-          </Button>
-        </Link>
-      </motion.div>
-    </AnimatePresence>
+    <AnimatedReportShell>
+      <Link href={`/reports/${reportId}`}>
+        <Button variant="outline" size="sm" className={className}>
+          <AnimatedButtonContent>
+            <FileText className="size-4" />
+            View Report
+          </AnimatedButtonContent>
+        </Button>
+      </Link>
+    </AnimatedReportShell>
   )
 }

package/templates/starter/src/components/test-suite/test-suite-picker-helpers.test.ts

@@ -2,7 +2,13 @@ import { describe, expect, it } from 'vitest'
 
 import type { TestSuitePickerRow } from '@/types/test-suite-picker'
 
-import { createDraftSelections, normalizeSuiteSelection, suiteMatchesQuery } from './test-suite-picker-helpers'
+import {
+  applyChildCheckboxSelection,
+  applySuiteCheckboxSelection,
+  createDraftSelections,
+  normalizeSuiteSelection,
+  suiteMatchesQuery,
+} from './test-suite-picker-helpers'
 
 const suite: TestSuitePickerRow = {
   id: 'suite-1',
@@ -59,6 +65,26 @@ describe('test-suite-picker helpers', () => {
     })
   })
 
+  it('updates draft selections for suite and child checkboxes', () => {
+    const empty = createDraftSelections([])
+
+    expect(applySuiteCheckboxSelection(empty, suite, true)).toEqual({
+      'suite-1': { testSuiteId: 'suite-1', runAll: true, testCaseIds: [] },
+    })
+
+    const partial = applyChildCheckboxSelection(empty, suite, 'case-1', true)
+    expect(partial).toEqual({
+      'suite-1': { testSuiteId: 'suite-1', runAll: false, testCaseIds: ['case-1'] },
+    })
+
+    const full = applyChildCheckboxSelection(partial, suite, 'case-2', true)
+    expect(full).toEqual({
+      'suite-1': { testSuiteId: 'suite-1', runAll: true, testCaseIds: [] },
+    })
+
+    expect(applySuiteCheckboxSelection(full, suite, false)).toEqual({})
+  })
+
   it('matches suites against module, suite, tag, and child test text', () => {
     expect(suiteMatchesQuery(suite, 'payments')).toBe(true)
     expect(suiteMatchesQuery(suite, 'wallet')).toBe(true)

package/templates/starter/src/components/test-suite/test-suite-picker-helpers.ts

@@ -1,4 +1,4 @@
-import { getFilterTags } from '@/lib/tag-utils'
+import { getFilterTags } from '@/lib/tag-filters'
 import type { TestSuitePickerRow, TestSuiteSelection } from '@/types/test-suite-picker'
 
 export type DraftSelectionMap = Record<string, TestSuiteSelection>
@@ -52,6 +52,85 @@ export function normalizeSuiteSelection(
   }
 }
 
+export function applySuiteCheckboxSelection(
+  current: DraftSelectionMap,
+  testSuite: TestSuitePickerRow,
+  checked: boolean,
+): DraftSelectionMap {
+  const next = { ...current }
+
+  if (!checked) {
+    delete next[testSuite.id]
+    return next
+  }
+
+  next[testSuite.id] = {
+    testSuiteId: testSuite.id,
+    runAll: true,
+    testCaseIds: [],
+  }
+
+  return next
+}
+
+export function applyChildCheckboxSelection(
+  current: DraftSelectionMap,
+  testSuite: TestSuitePickerRow,
+  testCaseId: string,
+  checked: boolean,
+): DraftSelectionMap {
+  const childIds = testSuite.testCases.map(testCase => testCase.id)
+  const currentSelection = current[testSuite.id]
+  const nextSelectedIds = new Set(currentSelection?.runAll ? childIds : (currentSelection?.testCaseIds ?? []))
+
+  if (checked) {
+    nextSelectedIds.add(testCaseId)
+  } else {
+    nextSelectedIds.delete(testCaseId)
+  }
+
+  const next = { ...current }
+
+  if (nextSelectedIds.size === 0) {
+    delete next[testSuite.id]
+    return next
+  }
+
+  if (nextSelectedIds.size === childIds.length) {
+    next[testSuite.id] = {
+      testSuiteId: testSuite.id,
+      runAll: true,
+      testCaseIds: [],
+    }
+    return next
+  }
+
+  next[testSuite.id] = {
+    testSuiteId: testSuite.id,
+    runAll: false,
+    testCaseIds: Array.from(nextSelectedIds),
+  }
+
+  return next
+}
+
+export function buildNormalizedSelectionsFromDraft(
+  testSuites: TestSuitePickerRow[],
+  draftSelections: DraftSelectionMap,
+): TestSuiteSelection[] {
+  return testSuites.reduce<TestSuiteSelection[]>((selections, testSuite) => {
+    const selection = draftSelections[testSuite.id]
+    if (selection !== null && selection !== undefined) {
+      const normalizedSelection = normalizeSuiteSelection(testSuite, selection)
+      if (normalizedSelection) {
+        selections.push(normalizedSelection)
+      }
+    }
+
+    return selections
+  }, [])
+}
+
 export function suiteMatchesQuery(testSuite: TestSuitePickerRow, query: string): boolean {
   if (!query) {
     return true