feat(ui): allow case insensitive search & optmize search (#1035)

package.json

@@ -66,5 +66,23 @@
     "overrides": {
       "vite": "^2.8.6"
     }
+  },
+  "vite": {
+    "optimizeDeps": {
+      "include": [
+        "@vueuse/core",
+        "birpc",
+        "codemirror",
+        "codemirror/addon/display/placeholder",
+        "codemirror/mode/javascript/javascript",
+        "codemirror/mode/jsx/jsx",
+        "codemirror/mode/xml/xml",
+        "d3-graph-controller",
+        "flatted",
+        "floating-vue",
+        "splitpanes",
+        "vue-router"
+      ]
+    }
   }
 }

packages/ui/client/auto-imports.d.ts

@@ -39,7 +39,6 @@ declare global {
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
-  const note: typeof import('@vueuse/core')['note']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']

packages/ui/client/components/TaskTree.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Task } from '#types'
+import { caseInsensitiveMatch } from '~/utils/task'
 
 withDefaults(defineProps<{
   task: Task
@@ -20,8 +21,10 @@ export default {
 </script>
 
 <template>
+  <!-- maybe provide a KEEP STRUCTURE mode, do not filter by search keyword  -->
+  <!-- v-if = keepStructure ||  (!search || caseInsensitiveMatch(task.name, search))-->
   <TaskItem
-    v-if="!search || task.name.includes(search)"
+    v-if="!search || caseInsensitiveMatch(task.name, search)"
     v-bind="$attrs"
     :task="task"
     :style="{ paddingLeft: `${indent * 0.75 + 1}rem`}"

packages/ui/client/components/TasksList.vue

@@ -3,6 +3,7 @@ import type { ComputedRef } from 'vue'
 import type { File, Task } from '#types'
 import { findById, testRunState } from '~/composables/client'
 import { activeFileId } from '~/composables/params'
+import { caseInsensitiveMatch, isSuite } from '~/utils/task'
 
 const props = withDefaults(defineProps<{
   tasks: Task[]
@@ -23,10 +24,33 @@ const emit = defineEmits<{
 const search = ref('')
 const isFiltered = computed(() => search.value.trim() !== '')
 
+const matchTasks = (tasks: Task[], search: string): boolean => {
+  let result = false
+
+  for (let i = 0; i < tasks.length; i++) {
+    const task = tasks[i]
+
+    if (caseInsensitiveMatch(task.name, search)) {
+      result = true
+      break
+    }
+
+    // walk whole task tree
+    if (isSuite(task) && task.tasks) {
+      result = matchTasks(task.tasks, search)
+      if (result)
+        break
+    }
+  }
+
+  return result
+}
+
 const filtered = computed(() => {
   if (!search.value.trim())
     return props.tasks
-  return props.tasks.filter(task => task.name.includes(search.value))
+
+  return props.tasks.filter(task => matchTasks([task], search.value))
 })
 const filteredTests: ComputedRef<File[]> = computed(() => isFiltered.value ? filtered.value.map(task => findById(task.id)!).filter(Boolean) : [])
 

packages/ui/client/components/views/ViewReport.vue

@@ -40,7 +40,7 @@ function relative(p: string) {
             <div v-for="({ file: efile, line, column }, i) of task.result.error.stacks || []" :key="i" class="op80 flex gap-x-2 items-center">
               <pre> - {{ relative(efile) }}:{{ line }}:{{ column }}</pre>
               <div
-                v-if="shouldOpenInEditor(efile, props.file.name)"
+                v-if="shouldOpenInEditor(efile, props.file?.name)"
                 class="i-carbon-launch text-red-900 hover:cursor-pointer"
                 tabindex="0"
                 title="Open in IDE"

packages/ui/client/utils/task.ts

@@ -0,0 +1,11 @@
+
+import type { Suite, Task } from '#types'
+
+export function isSuite(task: Task): task is Suite {
+  return Object.hasOwnProperty.call(task, 'tasks')
+}
+
+export function caseInsensitiveMatch(target: string, str2: string) {
+  if (typeof target !== 'string' || typeof str2 !== 'string') return false
+  return target.toLowerCase().includes(str2.toLowerCase())
+}