WIP: feat (ui): insert filter by workspace in vitest ui

packages/ui/client/components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     Explorer: typeof import('./components/explorer/Explorer.vue')['default']
     ExplorerItem: typeof import('./components/explorer/ExplorerItem.vue')['default']
     FileDetails: typeof import('./components/FileDetails.vue')['default']
+    FilterSelect: typeof import('./components/FilterSelect.vue')['default']
     FilterStatus: typeof import('./components/FilterStatus.vue')['default']
     IconAction: typeof import('./components/IconAction.vue')['default']
     IconButton: typeof import('./components/IconButton.vue')['default']

packages/ui/client/components/FilterSelect.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineProps<{ options: string[] }>()
+const emit = defineEmits(['update'])
+
+const selected = ref('All')
+
+function onChange() {
+  emit('update', selected.value)
+}
+</script>
+
+<template>
+  <div>
+    <label for="select">Projects</label>
+    <select id="select" v-model="selected" @change="onChange">
+      <option value="All">
+        All
+      </option>
+      <option v-for="(option, index) in options" :key="index" :value="option">
+        {{ option }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<style scoped>
+label {
+    margin-top: 10px;
+    font-size: 14px;
+    margin-bottom: 8px;
+    display: block;
+}
+select {
+    padding: 6px;
+    width: 150%;
+    font-size: 12px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+}
+</style>

packages/ui/client/components/explorer/Explorer.vue

@@ -42,6 +42,7 @@ const {
   filteredFiles,
   testsTotal,
   uiEntries,
+  workspaceProjects,
 } = useSearch(searchBox)
 
 const filterClass = ref<string>('grid-cols-2')
@@ -123,6 +124,7 @@ watch(() => windowWidth.value * (panels.navigation / 100), (width) => {
         <FilterStatus v-model="filter.success" label="Pass" />
         <FilterStatus v-model="filter.skipped" label="Skip" />
         <FilterStatus v-model="filter.onlyTests" label="Only Tests" />
+        <FilterSelect v-model="filter.project" :options="(workspaceProjects as string[])" @update="(e) => console.log(e)" />
       </div>
     </div>
     <div class="scrolls" flex-auto py-1 @scroll.passive="hideAllPoppers">

packages/ui/client/composables/explorer/search.ts

@@ -24,6 +24,8 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
   const disableClearSearch = computed(() => search.value === '')
   const debouncedSearch = ref(search.value)
 
+  const workspaceProjects = computed(() => [...new Set(uiEntries.value.filter(entry => entry.parentId === 'root').map(entry => entry.projectName))])
+
   debouncedWatch(() => search.value, (value) => {
     debouncedSearch.value = value?.trim() ?? ''
   }, { debounce: 256 })
@@ -40,6 +42,7 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
     filter.success = false
     filter.skipped = false
     filter.onlyTests = false
+    filter.project = 'All'
     if (focus) {
       searchBox.value?.focus()
     }
@@ -103,5 +106,6 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
     filteredFiles,
     testsTotal,
     uiEntries,
+    workspaceProjects,
   }
 }

packages/ui/client/composables/explorer/state.ts

@@ -19,6 +19,7 @@ export const treeFilter = useLocalStorage<TreeFilterState>(
     skipped: false,
     onlyTests: false,
     search: '',
+    project: 'All',
   },
 )
 export const search = ref<string>(treeFilter.value.search)
@@ -42,6 +43,7 @@ export const filter = reactive<Filter>({
   success: treeFilter.value.success,
   skipped: treeFilter.value.skipped,
   onlyTests: treeFilter.value.onlyTests,
+  project: treeFilter.value.project,
 })
 export const isFilteredByStatus = computed(() => {
   if (filter.failed) {

packages/ui/client/composables/explorer/tree.ts

@@ -65,6 +65,7 @@ export class ExplorerTree {
         success: filter.success,
         skipped: filter.skipped,
         onlyTests: filter.onlyTests,
+        project: filter.project,
       },
     )
   }
@@ -107,6 +108,7 @@ export class ExplorerTree {
             success: filter.success,
             skipped: filter.skipped,
             onlyTests: filter.onlyTests,
+            project: filter.project,
           },
         )
       })
@@ -122,6 +124,7 @@ export class ExplorerTree {
           success: filter.success,
           skipped: filter.skipped,
           onlyTests: filter.onlyTests,
+          project: filter.project,
         },
       )
     }
@@ -138,6 +141,7 @@ export class ExplorerTree {
       success: filter.success,
       skipped: filter.skipped,
       onlyTests: filter.onlyTests,
+      project: filter.project,
     })
   }
 
@@ -154,6 +158,7 @@ export class ExplorerTree {
         success: filter.success,
         skipped: filter.skipped,
         onlyTests: filter.onlyTests,
+        project: filter.project,
       })
     })
   }
@@ -171,6 +176,7 @@ export class ExplorerTree {
         success: filter.success,
         skipped: filter.skipped,
         onlyTests: filter.onlyTests,
+        project: filter.project,
       })
     })
   }
@@ -182,6 +188,7 @@ export class ExplorerTree {
         success: filter.success,
         skipped: filter.skipped,
         onlyTests: filter.onlyTests,
+        project: filter.project,
       })
     })
   }

packages/ui/client/composables/explorer/types.ts

@@ -35,6 +35,7 @@ export interface UITaskTreeNode extends TaskTreeNode {
   indent: number
   state?: TaskState
   duration?: number
+  projectName?: string
 }
 
 export interface TestTreeNode extends UITaskTreeNode {
@@ -69,6 +70,7 @@ export interface Filter {
   success: boolean
   skipped: boolean
   onlyTests: boolean
+  project: string
 }
 
 export interface TreeFilterState extends Filter {