Skip to content

Commit 209b1b0

Browse files
julianhahncursoragent
julianhahn
and
cursoragent
authored
feat(ui): add duration sorting to explorer (#9603)
Co-authored-by: Cursor <[email protected]>
1 parent 9cb80c0 commit 209b1b0

File tree

5 files changed

+54
-28
lines changed

5 files changed

+54
-28
lines changed

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

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ const {
5252
currentProject,
5353
currentProjectName,
5454
clearProject,
55-
disableProjectSort,
5655
clearProjectSort,
5756
disableClearProjectSort,
5857
searchMatcher,
@@ -88,7 +87,6 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
8887
grid="~ cols-[auto_auto_minmax(0,1fr)_auto] gap-x-2 gap-y-1"
8988
items-center
9089
>
91-
<!-- Row 1 -->
9290
<div class="i-carbon:workspace" flex-shrink-0 />
9391
<label for="project-select" text-sm>
9492
Projects
@@ -133,13 +131,19 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
133131
icon="i-carbon:filter-remove"
134132
@click.passive="clearProject(true)"
135133
/>
136-
137-
<!-- Row 2 -->
134+
</div>
135+
<div
136+
p="l3 y2 r2"
137+
bg-header
138+
border="b-2 base"
139+
grid="~ cols-[auto_auto_minmax(0,1fr)_auto] gap-x-2"
140+
items-center
141+
>
138142
<div class="i-carbon:arrows-vertical" flex-shrink-0 />
139143
<label for="project-sort" text-sm>
140144
Sort by
141145
</label>
142-
<div class="relative flex-1" :class="{ 'op-50 cursor-not-allowed': disableProjectSort }">
146+
<div class="relative flex-1">
143147
<select
144148
id="project-sort"
145149
ref="sortProjectRef"
@@ -156,15 +160,20 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
156160
cursor-pointer
157161
hover:bg-active
158162
class="outline-none"
159-
:disabled="disableProjectSort"
160163
>
161164
<option value="default" class="text-base bg-base">
162165
Default
163166
</option>
164-
<option value="asc" class="text-base bg-base">
167+
<option value="duration-desc" class="text-base bg-base">
168+
Slowest first
169+
</option>
170+
<option value="duration-asc" class="text-base bg-base">
171+
Fastest first
172+
</option>
173+
<option v-if="enableProjects" value="asc" class="text-base bg-base">
165174
Project A-Z
166175
</option>
167-
<option value="desc" class="text-base bg-base">
176+
<option v-if="enableProjects" value="desc" class="text-base bg-base">
168177
Project Z-A
169178
</option>
170179
</select>

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Ref } from 'vue'
2-
import type { ProjectSortUIType } from '~/composables/explorer/types'
2+
import type { SortUIType } from '~/composables/explorer/types'
33
import { debouncedWatch } from '@vueuse/core'
44
import { computed, ref, watch } from 'vue'
55
import { explorerTree } from '~/composables/explorer'
@@ -38,8 +38,14 @@ export function useSearch(
3838

3939
const disableClearSearch = computed(() => search.value === '')
4040
const debouncedSearch = ref(search.value)
41-
const disableProjectSort = computed(() => currentProject.value !== ALL_PROJECTS)
42-
const disableClearProjectSort = computed(() => disableProjectSort.value || projectSort.value === 'default')
41+
const disableClearProjectSort = computed(() => projectSort.value === 'default')
42+
43+
// Reset project-specific sort when multiple projects are no longer available
44+
watch(() => enableProjects.value, (enabled) => {
45+
if (!enabled && (projectSort.value === 'asc' || projectSort.value === 'desc')) {
46+
projectSort.value = 'default'
47+
}
48+
})
4349

4450
debouncedWatch(() => search.value, (value) => {
4551
debouncedSearch.value = value?.trim() ?? ''
@@ -90,7 +96,7 @@ export function useSearch(
9096
skippedValue: boolean,
9197
onlyTestsValue: boolean,
9298
projectValue: string,
93-
projectSortValue: ProjectSortUIType,
99+
projectSortValue: SortUIType,
94100
) {
95101
if (!initialized.value) {
96102
return
@@ -157,7 +163,6 @@ export function useSearch(
157163
currentProjectName,
158164
clearProject,
159165
projectSort,
160-
disableProjectSort,
161166
clearProjectSort,
162167
disableClearProjectSort,
163168
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { File, Task } from '@vitest/runner'
2-
import type { FileTreeNode, Filter, FilteredTests, ProjectSortUIType, TreeFilterState, UITaskTreeNode } from './types'
2+
import type { FileTreeNode, Filter, FilteredTests, SortUIType, TreeFilterState, UITaskTreeNode } from './types'
33
import { createTagsFilter } from '@vitest/runner/utils'
44
import { useLocalStorage } from '@vueuse/core'
55
import { computed, reactive, ref, shallowRef } from 'vue'
@@ -30,7 +30,7 @@ export const treeFilter = useLocalStorage<TreeFilterState>(
3030
projectSort: undefined,
3131
},
3232
)
33-
export const projectSort = ref<ProjectSortUIType>(treeFilter.value.projectSort || 'default')
33+
export const projectSort = ref<SortUIType>(treeFilter.value.projectSort || 'default')
3434
export const currentProject = shallowRef(treeFilter.value?.project || ALL_PROJECTS)
3535
export const enableProjects = computed(() => availableProjects.value.length > 1)
3636
export const disableClearProjects = computed(() => currentProject.value === ALL_PROJECTS)

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,20 @@ export interface Filter {
7777
}
7878

7979
export type ProjectSortType = 'asc' | 'desc'
80-
export type ProjectSortUIType = ProjectSortType | 'default'
80+
export type DurationSortType = 'duration-asc' | 'duration-desc'
81+
export type SortType = ProjectSortType | DurationSortType
82+
export type SortUIType = SortType | 'default'
83+
84+
/**
85+
* @deprecated Use `SortUIType` instead
86+
*/
87+
export type ProjectSortUIType = SortUIType
8188

8289
export interface TreeFilterState extends Filter {
8390
search: string
8491
expandAll?: boolean
8592
project?: string
86-
projectSort?: ProjectSortType
93+
projectSort?: SortType
8794
}
8895

8996
export interface CollectorInfo {

‎packages/ui/client/composables/explorer/utils.ts‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { File, Task } from '@vitest/runner'
22
import type {
33
FileTreeNode,
44
ParentTreeNode,
5-
ProjectSortUIType,
5+
SortUIType,
66
SuiteTreeNode,
77
TestTreeNode,
88
UITaskTreeNode,
@@ -33,24 +33,29 @@ export function isParentNode(node: UITaskTreeNode): node is FileTreeNode | Suite
3333
return node.type === 'file' || node.type === 'suite'
3434
}
3535

36-
export function getSortedRootTasks(sort: ProjectSortUIType, tasks = explorerTree.root.tasks) {
36+
export function getSortedRootTasks(sort: SortUIType, tasks = explorerTree.root.tasks) {
3737
const sorted = [...tasks]
3838

3939
sorted.sort((a, b) => {
40-
if (sort === 'asc' || sort === 'desc') {
40+
if (sort === 'duration-desc' || sort === 'duration-asc') {
41+
const durationA = a.duration ?? 0
42+
const durationB = b.duration ?? 0
43+
if (durationA !== durationB) {
44+
return sort === 'duration-desc'
45+
? durationB - durationA
46+
: durationA - durationB
47+
}
48+
}
49+
else if (sort === 'asc' || sort === 'desc') {
4150
const projectA = a.projectName || ''
4251
const projectB = b.projectName || ''
4352
if (projectA !== projectB) {
44-
if (sort === 'asc') {
45-
return projectA.localeCompare(projectB)
46-
}
47-
else {
48-
return projectB.localeCompare(projectA)
49-
}
53+
return sort === 'asc'
54+
? projectA.localeCompare(projectB)
55+
: projectB.localeCompare(projectA)
5056
}
5157
}
52-
// Default sort (by filepath, then project) is the fallback for project sort
53-
// and the primary for default sort
58+
// Default sort (by filepath, then project) is the fallback
5459
return `${a.filepath}:${a.projectName}`.localeCompare(`${b.filepath}:${b.projectName}`)
5560
})
5661

0 commit comments

Comments
 (0)