From c6dd63accf8c0b47f6ab9e424aca96004316437d Mon Sep 17 00:00:00 2001
From: Cuvii <xw5427@gmail.com>
Date: Sun, 27 Mar 2022 17:12:05 +0800
Subject: [PATCH] feat(ui): allow case insensitive search & optmize search
 (#1035)

---
 package.json                                  | 18 +++++++++++++
 packages/ui/client/auto-imports.d.ts          |  1 -
 packages/ui/client/components/TaskTree.vue    |  5 +++-
 packages/ui/client/components/TasksList.vue   | 26 ++++++++++++++++++-
 .../ui/client/components/views/ViewReport.vue |  2 +-
 packages/ui/client/utils/task.ts              | 11 ++++++++
 6 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/client/utils/task.ts

diff --git a/package.json b/package.json
index 9162062416db..0ec36e9c46a2 100644
--- a/package.json
+++ b/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"
+      ]
+    }
   }
 }
diff --git a/packages/ui/client/auto-imports.d.ts b/packages/ui/client/auto-imports.d.ts
index 674b46219e36..981df43bc9af 100644
--- a/packages/ui/client/auto-imports.d.ts
+++ b/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']
diff --git a/packages/ui/client/components/TaskTree.vue b/packages/ui/client/components/TaskTree.vue
index f3600db14f80..f2af0de80965 100644
--- a/packages/ui/client/components/TaskTree.vue
+++ b/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`}"
diff --git a/packages/ui/client/components/TasksList.vue b/packages/ui/client/components/TasksList.vue
index d4f4b1666135..a1a048fbb039 100644
--- a/packages/ui/client/components/TasksList.vue
+++ b/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) : [])
 
diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index f4d2faf21804..ece2d245013e 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/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"
diff --git a/packages/ui/client/utils/task.ts b/packages/ui/client/utils/task.ts
new file mode 100644
index 000000000000..5871618f898b
--- /dev/null
+++ b/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())
+}