From 29bcbeb97c82d97c93be66d130886efa75a5d81f Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 7 Dec 2024 05:39:22 +0100
Subject: [PATCH 1/5] fix(ui): add errors and draft state (*) to the code
 editor

---
 .../client/components/CodeMirrorContainer.vue |   3 +-
 .../ui/client/components/views/ViewEditor.vue | 120 +++++++++++++-----
 .../ui/client/composables/client/index.ts     |   6 +-
 .../client/composables/explorer/collector.ts  |   2 +
 packages/ui/client/styles/main.css            |   4 +
 5 files changed, 104 insertions(+), 31 deletions(-)

diff --git a/packages/ui/client/components/CodeMirrorContainer.vue b/packages/ui/client/components/CodeMirrorContainer.vue
index 83ee34dc4a83..7218db43aaf5 100644
--- a/packages/ui/client/components/CodeMirrorContainer.vue
+++ b/packages/ui/client/components/CodeMirrorContainer.vue
@@ -4,6 +4,7 @@ import { codemirrorRef } from '~/composables/codemirror'
 const { mode, readOnly } = defineProps<{
   mode?: string
   readOnly?: boolean
+  saving?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -53,7 +54,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div relative font-mono text-sm class="codemirror-scrolls">
+  <div relative font-mono text-sm class="codemirror-scrolls" :class="saving ? 'codemirror-busy' : undefined">
     <textarea ref="el" />
   </div>
 </template>
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index 0bff2d1aedde..3d26fad51135 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -3,6 +3,7 @@ import type CodeMirror from 'codemirror'
 import type { ErrorWithDiff, File } from 'vitest'
 import { createTooltip, destroyTooltip } from 'floating-vue'
 import { client, isReport } from '~/composables/client'
+import { finished } from '~/composables/client/state'
 import { codemirrorRef } from '~/composables/codemirror'
 import { openInEditor } from '~/composables/error'
 import { lineNumber } from '~/composables/params'
@@ -17,6 +18,9 @@ const code = ref('')
 const serverCode = shallowRef<string | undefined>(undefined)
 const draft = ref(false)
 const loading = ref(true)
+// finished.value is true when saving the file, we need it to restore the caret position
+const saving = ref(true)
+const currentPosition = ref<CodeMirror.Position | undefined>()
 
 watch(
   () => props.file,
@@ -34,10 +38,15 @@ watch(
       serverCode.value = code.value
       draft.value = false
     }
-    finally {
-      // fire focusing editor after loading
-      nextTick(() => (loading.value = false))
+    catch (e) {
+      console.error('cannot fetch file', e)
     }
+
+    await nextTick()
+
+    // fire focusing editor after loading
+    loading.value = false
+    saving.value = false
   },
   { immediate: true },
 )
@@ -65,13 +74,9 @@ watch(() => [loading.value, props.file, lineNumber.value] as const, ([loadingFil
 const ext = computed(() => props.file?.filepath?.split(/\./g).pop() || 'js')
 const editor = ref<any>()
 
-const cm = computed<CodeMirror.EditorFromTextArea | undefined>(
-  () => editor.value?.cm,
-)
 const failed = computed(
   () => props.file?.tasks.filter(i => i.result?.state === 'fail') || [],
 )
-
 const widgets: CodeMirror.LineWidget[] = []
 const handles: CodeMirror.LineHandle[] = []
 const listeners: [el: HTMLSpanElement, l: EventListener, t: () => void][] = []
@@ -134,46 +139,103 @@ function createErrorElement(e: ErrorWithDiff) {
   const el: EventListener = async () => {
     await openInEditor(stack.file, stack.line, stack.column)
   }
+  span.addEventListener('click', el)
   div.appendChild(span)
   listeners.push([span, el, () => destroyTooltip(span)])
   handles.push(codemirrorRef.value!.addLineClass(stack.line - 1, 'wrap', 'bg-red-500/10'))
   widgets.push(codemirrorRef.value!.addLineWidget(stack.line - 1, div))
 }
 
-watch(
-  [cm, failed],
-  ([cmValue]) => {
+const { pause, resume } = watch(
+  [codemirrorRef, failed, finished, saving] as const,
+  ([cmValue, f, end, s]) => {
     if (!cmValue) {
+      widgets.length = 0
+      handles.length = 0
       clearListeners()
       return
     }
 
-    setTimeout(() => {
-      clearListeners()
-      widgets.forEach(widget => widget.clear())
-      handles.forEach(h => codemirrorRef.value?.removeLineClass(h, 'wrap'))
-      widgets.length = 0
-      handles.length = 0
+    // if still running or saving return
+    if (!end || s) {
+      return
+    }
 
-      cmValue.on('changes', codemirrorChanges)
+    cmValue.off('changes', codemirrorChanges)
 
-      failed.value.forEach((i) => {
-        i.result?.errors?.forEach(createErrorElement)
-      })
-      if (!hasBeenEdited.value) {
-        cmValue.clearHistory()
-      } // Prevent getting access to initial state
-    }, 100)
+    // cleanup previous data
+    clearListeners()
+    widgets.forEach(widget => widget.clear())
+    handles.forEach(h => cmValue?.removeLineClass(h, 'wrap'))
+    widgets.length = 0
+    handles.length = 0
+
+    // add new data
+    f.forEach((i) => {
+      i.result?.errors?.forEach(createErrorElement)
+    })
+
+    // Prevent getting access to initial state
+    if (!hasBeenEdited.value) {
+      cmValue.clearHistory()
+    }
+
+    cmValue.on('changes', codemirrorChanges)
+
+    // restore caret position
+    const { ch, line } = currentPosition.value ?? {}
+    console.log('WTF: ', currentPosition.value)
+    console.error('WTF', new Error('WTF'))
+    if (typeof ch === 'number' && typeof line === 'number') {
+      currentPosition.value = undefined
+    }
   },
   { flush: 'post' },
 )
 
+watchDebounced(() => [finished.value, saving.value, currentPosition.value] as const, ([f, s], old) => {
+  if (f && !s && old && old[2]) {
+    codemirrorRef.value?.setCursor(old[2])
+  }
+}, { debounce: 100, flush: 'post' })
+
 async function onSave(content: string) {
-  hasBeenEdited.value = true
-  await client.rpc.saveTestFile(props.file!.filepath, content)
-  serverCode.value = content
-  draft.value = false
+  if (saving.value) {
+    return
+  }
+  pause()
+  saving.value = true
+  await nextTick()
+  try {
+    currentPosition.value = codemirrorRef.value?.getCursor()
+    hasBeenEdited.value = true
+    // save the file changes
+    await client.rpc.saveTestFile(props.file!.filepath, content)
+    // update original server code
+    serverCode.value = content
+    // update draft indicator in the tab title (</> * Code)
+    draft.value = false
+    // the server will send 3 events in a row
+    // await first change in the state
+    await until(finished).toBe(false, { flush: 'sync', timeout: 1000, throwOnTimeout: false })
+    // await second change in the state
+    await until(finished).toBe(true, { flush: 'sync', timeout: 1000, throwOnTimeout: false })
+    // await last change in the state
+    await until(finished).toBe(false, { flush: 'sync', timeout: 1000, throwOnTimeout: false })
+  }
+  catch (e) {
+    console.error('error saving file', e)
+  }
+
+  // activate watcher
+  resume()
+  await nextTick()
+  // enable adding the errors if present
+  saving.value = false
 }
+
+// we need to remove listeners before unmounting the component: the watcher will not be called
+onBeforeUnmount(clearListeners)
 </script>
 
 <template>
@@ -181,7 +243,7 @@ async function onSave(content: string) {
     ref="editor"
     v-model="code"
     h-full
-    v-bind="{ lineNumbers: true, readOnly: isReport }"
+    v-bind="{ lineNumbers: true, readOnly: isReport, saving }"
     :mode="ext"
     data-testid="code-mirror"
     @save="onSave"
diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
index d633533dae26..b654503c6e12 100644
--- a/packages/ui/client/composables/client/index.ts
+++ b/packages/ui/client/composables/client/index.ts
@@ -32,7 +32,11 @@ export const client = (function createVitestClient() {
         },
         onFinished(_files, errors) {
           explorerTree.endRun()
-          testRunState.value = 'idle'
+          // don't change the testRunState.value here:
+          // - when saving the file in the codemirror requires explorer tree endRun to finish (multiple microtasks)
+          // - if we change here the state before the tasks states are updated, the cursor position will be lost
+          // - line moved to composables/explorer/collector.ts::refreshExplorer after calling updateRunningTodoTests
+          // testRunState.value = 'idle'
           unhandledErrors.value = (errors || []).map(parseError)
         },
         onFinishedReportCoverage() {
diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
index 81e9c74ba533..f348635a77a8 100644
--- a/packages/ui/client/composables/explorer/collector.ts
+++ b/packages/ui/client/composables/explorer/collector.ts
@@ -5,6 +5,7 @@ import { isTestCase } from '@vitest/runner/utils'
 import { toArray } from '@vitest/utils'
 import { hasFailedSnapshot } from '@vitest/ws-client'
 import { client, findById } from '~/composables/client'
+import { testRunState } from '~/composables/client/state'
 import { expandNodesOnEndRun } from '~/composables/explorer/expand'
 import { runFilter, testMatcher } from '~/composables/explorer/filter'
 import { explorerTree } from '~/composables/explorer/index'
@@ -234,6 +235,7 @@ function refreshExplorer(search: string, filter: Filter, end: boolean) {
   // update only at the end
   if (end) {
     updateRunningTodoTests()
+    testRunState.value = 'idle'
   }
 }
 
diff --git a/packages/ui/client/styles/main.css b/packages/ui/client/styles/main.css
index 1328827bbfd6..a6d48f033f67 100644
--- a/packages/ui/client/styles/main.css
+++ b/packages/ui/client/styles/main.css
@@ -211,3 +211,7 @@ html.dark {
 .v-popper__popper .v-popper__arrow-outer {
   border-color: var(--background-color);
 }
+
+.codemirror-busy > .CodeMirror > .CodeMirror-scroll > .CodeMirror-sizer .CodeMirror-lines {
+  cursor: wait !important;
+}

From 24e5d503fefd29cd10d771dc515262a22e7ef998 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 7 Dec 2024 05:51:33 +0100
Subject: [PATCH 2/5] chore: fix lint

---
 packages/ui/client/components/views/ViewEditor.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index 3d26fad51135..f9c5fb12b836 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -182,11 +182,8 @@ const { pause, resume } = watch(
 
     cmValue.on('changes', codemirrorChanges)
 
-    // restore caret position
-    const { ch, line } = currentPosition.value ?? {}
-    console.log('WTF: ', currentPosition.value)
-    console.error('WTF', new Error('WTF'))
-    if (typeof ch === 'number' && typeof line === 'number') {
+    // restore caret position: the watchDebounced below will use old value
+    if (currentPosition.value) {
       currentPosition.value = undefined
     }
   },

From 291a067d239adc6acdbfbc4d2d4e5138dcb819ce Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Tue, 17 Dec 2024 22:44:52 +0100
Subject: [PATCH 3/5] chore: split loading and saving logic

---
 packages/ui/client/components/FileDetails.vue |   2 +-
 .../ui/client/components/views/ViewEditor.vue | 116 ++++++++++++------
 2 files changed, 77 insertions(+), 41 deletions(-)

diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index f1c841224b66..78ac159126fd 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -228,7 +228,7 @@ const projectNameTextColor = computed(() => {
       </div>
       <ViewEditor
         v-if="viewMode === 'editor'"
-        :key="current.filepath"
+        :key="current.id"
         :file="current"
         data-testid="editor"
         @draft="onDraft"
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index f9c5fb12b836..7d99d15fa744 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -18,13 +18,17 @@ const code = ref('')
 const serverCode = shallowRef<string | undefined>(undefined)
 const draft = ref(false)
 const loading = ref(true)
-// finished.value is true when saving the file, we need it to restore the caret position
-const saving = ref(true)
+const saving = ref(false)
 const currentPosition = ref<CodeMirror.Position | undefined>()
 
 watch(
   () => props.file,
   async () => {
+    // this watcher will be called multiple times when saving the file in the view editor
+    // since we are saving the file and changing the content inside onSave we just return here
+    if (saving.value) {
+      return
+    }
     loading.value = true
     try {
       if (!props.file || !props.file?.filepath) {
@@ -46,21 +50,27 @@ watch(
 
     // fire focusing editor after loading
     loading.value = false
-    saving.value = false
   },
   { immediate: true },
 )
 
-watch(() => [loading.value, props.file, lineNumber.value] as const, ([loadingFile, _, l]) => {
-  if (!loadingFile) {
+watch(() => [loading.value, saving.value, props.file, lineNumber.value] as const, ([loadingFile, s, _, l]) => {
+  if (!loadingFile && !s) {
     if (l != null) {
       nextTick(() => {
-        const line = { line: l ?? 0, ch: 0 }
-        codemirrorRef.value?.scrollIntoView(line, 100)
-        nextTick(() => {
-          codemirrorRef.value?.focus()
-          codemirrorRef.value?.setCursor(line)
-        })
+        const cp = currentPosition.value
+        const line = cp ?? { line: l ?? 0, ch: 0 }
+        // restore caret position: the watchDebounced below will use old value
+        if (cp) {
+          currentPosition.value = undefined
+        }
+        else {
+          codemirrorRef.value?.scrollIntoView(line, 100)
+          nextTick(() => {
+            codemirrorRef.value?.focus()
+            codemirrorRef.value?.setCursor(line)
+          })
+        }
       })
     }
     else {
@@ -147,8 +157,8 @@ function createErrorElement(e: ErrorWithDiff) {
 }
 
 const { pause, resume } = watch(
-  [codemirrorRef, failed, finished, saving] as const,
-  ([cmValue, f, end, s]) => {
+  [codemirrorRef, failed, finished] as const,
+  ([cmValue, f, end]) => {
     if (!cmValue) {
       widgets.length = 0
       handles.length = 0
@@ -156,11 +166,12 @@ const { pause, resume } = watch(
       return
     }
 
-    // if still running or saving return
-    if (!end || s) {
+    // if still running
+    if (!end) {
       return
     }
 
+    // cleanup previous data when not saving just reloading
     cmValue.off('changes', codemirrorChanges)
 
     // cleanup previous data
@@ -170,22 +181,19 @@ const { pause, resume } = watch(
     widgets.length = 0
     handles.length = 0
 
-    // add new data
-    f.forEach((i) => {
-      i.result?.errors?.forEach(createErrorElement)
-    })
-
-    // Prevent getting access to initial state
-    if (!hasBeenEdited.value) {
-      cmValue.clearHistory()
-    }
+    setTimeout(() => {
+      // add new data
+      f.forEach((i) => {
+        i.result?.errors?.forEach(createErrorElement)
+      })
 
-    cmValue.on('changes', codemirrorChanges)
+      // Prevent getting access to initial state
+      if (!hasBeenEdited.value) {
+        cmValue.clearHistory()
+      }
 
-    // restore caret position: the watchDebounced below will use old value
-    if (currentPosition.value) {
-      currentPosition.value = undefined
-    }
+      cmValue.on('changes', codemirrorChanges)
+    }, 100)
   },
   { flush: 'post' },
 )
@@ -203,8 +211,21 @@ async function onSave(content: string) {
   pause()
   saving.value = true
   await nextTick()
+
+  // clear previous state
+  const cmValue = codemirrorRef.value
+  // save cursor position
+  currentPosition.value = cmValue?.getCursor()
+  cmValue?.off('changes', codemirrorChanges)
+
+  // cleanup previous data
+  clearListeners()
+  widgets.forEach(widget => widget.clear())
+  handles.forEach(h => cmValue?.removeLineClass(h, 'wrap'))
+  widgets.length = 0
+  handles.length = 0
+
   try {
-    currentPosition.value = codemirrorRef.value?.getCursor()
     hasBeenEdited.value = true
     // save the file changes
     await client.rpc.saveTestFile(props.file!.filepath, content)
@@ -212,23 +233,38 @@ async function onSave(content: string) {
     serverCode.value = content
     // update draft indicator in the tab title (</> * Code)
     draft.value = false
-    // the server will send 3 events in a row
-    // await first change in the state
-    await until(finished).toBe(false, { flush: 'sync', timeout: 1000, throwOnTimeout: false })
-    // await second change in the state
-    await until(finished).toBe(true, { flush: 'sync', timeout: 1000, throwOnTimeout: false })
-    // await last change in the state
-    await until(finished).toBe(false, { flush: 'sync', timeout: 1000, throwOnTimeout: false })
   }
   catch (e) {
     console.error('error saving file', e)
   }
 
+  // Prevent getting access to initial state
+  if (!hasBeenEdited.value) {
+    cmValue?.clearHistory()
+  }
+
+  try {
+    // the server will send a few events in a row
+    // await to re-run test
+    await until(finished).toBe(false, { flush: 'sync', timeout: 1000, throwOnTimeout: true })
+    // await to finish
+    await until(finished).toBe(true, { flush: 'sync', timeout: 1000, throwOnTimeout: false })
+  }
+  catch {
+    // ignore errors
+  }
+
+  // add new data
+  failed.value.forEach((i) => {
+    i.result?.errors?.forEach(createErrorElement)
+  })
+
+  cmValue?.on('changes', codemirrorChanges)
+
+  saving.value = false
+  await nextTick()
   // activate watcher
   resume()
-  await nextTick()
-  // enable adding the errors if present
-  saving.value = false
 }
 
 // we need to remove listeners before unmounting the component: the watcher will not be called

From 6b2343ca1daa653c69d5bdfb9ca2a2d5725abc21 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 21 Dec 2024 14:23:07 +0100
Subject: [PATCH 4/5] chore: prevent saving when readonly or 'nocursor'

---
 packages/ui/client/components/CodeMirrorContainer.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/ui/client/components/CodeMirrorContainer.vue b/packages/ui/client/components/CodeMirrorContainer.vue
index 7218db43aaf5..4035b368bfa7 100644
--- a/packages/ui/client/components/CodeMirrorContainer.vue
+++ b/packages/ui/client/components/CodeMirrorContainer.vue
@@ -39,10 +39,16 @@ onMounted(async () => {
     readOnly: readOnly ? true : undefined,
     extraKeys: {
       'Cmd-S': function (cm) {
-        emit('save', cm.getValue())
+        const isReadonly = cm.getOption('readOnly')
+        if (!isReadonly) {
+          emit('save', cm.getValue())
+        }
       },
       'Ctrl-S': function (cm) {
-        emit('save', cm.getValue())
+        const isReadonly = cm.getOption('readOnly')
+        if (!isReadonly) {
+          emit('save', cm.getValue())
+        }
       },
     },
   })

From 89c9ad87671995931ca09cfeec9d8836c62ccdf3 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 21 Dec 2024 14:23:34 +0100
Subject: [PATCH 5/5] chore: prevent saving again while saving

---
 packages/ui/client/components/views/ViewEditor.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index 7d99d15fa744..53d9c376edc1 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -35,6 +35,7 @@ watch(
         code.value = ''
         serverCode.value = code.value
         draft.value = false
+        loading.value = false
         return
       }
 
@@ -214,6 +215,11 @@ async function onSave(content: string) {
 
   // clear previous state
   const cmValue = codemirrorRef.value
+  if (cmValue) {
+    cmValue.setOption('readOnly', true)
+    await nextTick()
+    cmValue.refresh()
+  }
   // save cursor position
   currentPosition.value = cmValue?.getCursor()
   cmValue?.off('changes', codemirrorChanges)
@@ -263,6 +269,11 @@ async function onSave(content: string) {
 
   saving.value = false
   await nextTick()
+  if (cmValue) {
+    cmValue.setOption('readOnly', false)
+    await nextTick()
+    cmValue.refresh()
+  }
   // activate watcher
   resume()
 }