wip: ui

ph-fritsche · Nov 12, 2024 · ea84630 · ea84630
1 parent 7827ae7
commit ea84630
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 35 deletions.
diff --git a/src/ui/cli/Input.tsx b/src/ui/cli/Input.tsx
@@ -7,13 +7,15 @@ export function Input({
     title,
     initialValue,
     onChange,
+    width = 25,
 }: {
     id?: string
     title: string
     initialValue: string
     onChange: (s: string) => void
+    width?: number
 }) {
-    const {isFocused} = useFocus({id})
+    const {focus, isFocused} = useFocus({id})
     const [{value, pos}, set] = useState({value: initialValue, pos: initialValue.length})
     useMemo(() => {
         if (value !== initialValue) {
@@ -33,10 +35,15 @@ export function Input({
             return
         }
 
-        if (key.return) {
+        if (key.escape) {
+            if (value !== initialValue) {
+                set({value: initialValue, pos: initialValue.length})
+            }
+        } else if (key.return) {
             if (value !== initialValue) {
                 onChange(value)
             }
+            focus('#main')
         } else if (key.ctrl && (key.backspace || key.delete || input === 'w')) {
             set({value: '', pos: 0})
         } else if (key.backspace || key.delete) {
@@ -60,43 +67,42 @@ export function Input({
         }
     })
 
-    return <Box>
-        <Box flexDirection="column">
-            <Text color="grey" dimColor>╭</Text>
-            <Text color="grey" dimColor>╰</Text>
+    const innerWidth = width - 4
+
+    return <Box flexDirection="column">
+        <Box>
+            <Text color="grey" dimColor>╭╴</Text>
+            <Text
+                bold={isFocused}
+            >{title}</Text>
+            <Text color="grey" dimColor>╶{''.padEnd(innerWidth - title.length, '─')}╮</Text>
         </Box>
-        <Box flexDirection="column" width={28}>
-            <Box>
-                <Text
-                    bold={isFocused}
-                >{title}</Text>
-                <Text color="grey">{''.padEnd(28 - title.length, '─')}</Text>
-            </Box>
+        <Box>
+            <Text color="grey" dimColor>╰{value || isFocused ? '╸' : '─'}</Text>
             {isFocused
-                ? <FocusedInputValue value={value} pos={pos}/>
-                : <Box>
-                    <Text>{value.substring(0, 28)}</Text>
-                    <Text color="grey" dimColor>{''.padEnd(28 - value.length, '─')}</Text>
-                </Box>
+                ? <FocusedInputValue value={value} pos={pos} width={innerWidth}/>
+                : <Text>{value.substring(0, innerWidth)}</Text>
             }
-        </Box>
-        <Box flexDirection="column">
-            <Text color="grey" dimColor>╮</Text>
-            <Text color="grey" dimColor>╯</Text>
+            <Text color="grey" dimColor>{
+                (value || isFocused ? '╺' : '─')
+                + (isFocused ? '' : ''.padEnd(innerWidth - value.length, '─'))
+            }╯</Text>
         </Box>
     </Box>
 }
 
 function FocusedInputValue({
     value,
     pos,
+    width,
 }: {
     value: string
     pos: number
+    width: number
 }) {
-    const head = value.substring(pos - Math.min(pos, Math.max(3, 27 - (value.length - pos))), pos)
+    const head = value.substring(pos - Math.min(pos, Math.max(3, width - 1 - (value.length - pos))), pos)
     const cursor = value.substring(pos, pos + 1) || ' '
-    const tail = value.substring(pos + 1).substring(0, 28 - head.length)
+    const tail = value.substring(pos + 1).substring(0, width - head.length)
 
     return <Box>
         <Text
@@ -113,6 +119,6 @@ function FocusedInputValue({
         >{tail}</Text>
         <Text
             backgroundColor="yellow"
-        >{''.padEnd(28 - head.length - cursor.length - tail.length, ' ')}</Text>
+        >{''.padEnd(width - head.length - cursor.length - tail.length, ' ')}</Text>
     </Box>
 }
diff --git a/src/ui/cli/Main.tsx b/src/ui/cli/Main.tsx
@@ -6,19 +6,32 @@ import { Overview } from './Overview'
 import { useSubscribers } from './useSubscribers'
 import { TesterStatus } from './TesterStatus'
 import { useWindowSize } from './useWindowSize'
+import { useTesterCli } from './TesterCli'
 
 export function Main() {
     const tester = useTester()
+    const cli = useTesterCli()
 
     const [currentRun, setCurrentRun] = useState<TestRunStack>()
 
-    const { isFocused } = useFocus({ id: '#main', autoFocus: true })
-    useInput((input) => {
-        if (isFocused && input.toLowerCase() === 's') {
-            if (tester.active) {
-                void tester.stop()
-            } else {
-                void tester.start()
+    const { focus, isFocused } = useFocus({ id: '#main', autoFocus: true })
+    useInput((input, key) => {
+        if (input === 'c' && key.ctrl && !key.shift) {
+            void cli.close()
+            return
+        }
+
+        if (isFocused) {
+            if (input.toLowerCase() === 's') {
+                if (tester.active) {
+                    void tester.stop()
+                } else {
+                    void tester.start()
+                }
+            } else if (input.toLowerCase() === 'f') {
+                focus('filterSuites')
+            } else if (input.toLowerCase() === 't') {
+                focus('filterTests')
             }
         }
     })

diff --git a/src/ui/cli/TesterCli.tsx b/src/ui/cli/TesterCli.tsx
@@ -3,6 +3,7 @@ import { render, Instance } from 'ink'
 import { Tester } from '../Tester'
 import { TesterContext } from '../TesterContext'
 import { Main } from './Main'
+import { createProvidedContext } from '../../util/react/context'
 
 export class TesterCli {
     constructor(
@@ -18,12 +19,24 @@ export class TesterCli {
 
         this.#instance = render((
             <TesterContext.Provider value={this.tester}>
-                <Main/>
+                <TesterCliContext.Provider value={this}>
+                    <Main/>
+                </TesterCliContext.Provider>
             </TesterContext.Provider>
-        ))
+        ), {exitOnCtrlC: false})
     }
 
-    close() {
+    async close() {
+        await this.tester.stop()
         this.#instance?.unmount()
+        await this.tester[Symbol.asyncDispose]()
+
+        process.stdin.destroy()
+        process.stdout.destroy()
+        process.exit()
     }
 }
+
+const TesterCliContext = createProvidedContext<TesterCli>('TesterCli')
+
+export const useTesterCli = TesterCliContext.useContext
diff --git a/src/ui/cli/TesterStatus.tsx b/src/ui/cli/TesterStatus.tsx
@@ -28,11 +28,13 @@ export function TesterStatus() {
             <Text>{tester.conductors.size} conductors</Text>
         </Box>
         <Input
+            id="filterSuites"
             title="Filter Suites"
             onChange={s => tester.filterSuites.set(s ? new RegExp(s, 'i') : undefined)}
             initialValue={getRegexpSource(tester.filterSuites.get())}
         />
         <Input
+            id="filterTests"
             title="Filter Tests"
             onChange={s => tester.filterTests.set(s ? new RegExp(s, 'i') : undefined)}
             initialValue={getRegexpSource(tester.filterTests.get())}