From 4ec3d38836296cc76570b0adfc1c2d7609747e42 Mon Sep 17 00:00:00 2001 From: Michael Uray Date: Sun, 18 Oct 2026 04:45:05 +0000 Subject: [PATCH] feat(tracker): group issue status selector by category with collapsible groups The issue status selection popup listed all statuses of a project type as one flat list, which gets hard to scan once a workflow has many statuses. SelectPopup gets an opt-in collapsibleCategories mode: category headers become rows that can be toggled by click or by Enter during keyboard navigation, show the number of statuses in the group, and the collapsed state is remembered in local storage under a caller supplied key. While searching all groups are shown expanded. The tracker status editor and status selector order statuses by status category and enable this mode when a project type has 10 or more statuses; with fewer statuses the popup stays unchanged. Fixes #8857 Signed-off-by: Michael Uray --- .../__test__/selectPopupCategories.test.ts | 90 +++++++++ packages/ui/src/components/SelectPopup.svelte | 181 +++++++++++++----- packages/ui/src/selectPopupCategories.ts | 95 +++++++++ .../src/__tests__/statusCategories.test.ts | 73 +++++++ .../src/components/issues/StatusEditor.svelte | 28 ++- .../components/issues/StatusSelector.svelte | 20 +- .../tracker-resources/src/statusCategories.ts | 47 +++++ 7 files changed, 470 insertions(+), 64 deletions(-) create mode 100644 packages/ui/src/__test__/selectPopupCategories.test.ts create mode 100644 packages/ui/src/selectPopupCategories.ts create mode 100644 plugins/tracker-resources/src/__tests__/statusCategories.test.ts create mode 100644 plugins/tracker-resources/src/statusCategories.ts diff --git a/packages/ui/src/__test__/selectPopupCategories.test.ts b/packages/ui/src/__test__/selectPopupCategories.test.ts new file mode 100644 index 00000000000..e7b0022a4d0 --- /dev/null +++ b/packages/ui/src/__test__/selectPopupCategories.test.ts @@ -0,0 +1,90 @@ +// +// Copyright © 2026 Hardcore Engineering Inc. +// +// Licensed under the Eclipse Public License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may +// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// +// See the License for the specific language governing permissions and +// limitations under the License. +// + +import type { IntlString } from '@hcengineering/platform' +import { buildSelectPopupRows, loadCollapsedCategories, saveCollapsedCategories } from '../selectPopupCategories' +import type { SelectPopupValueType } from '../types' + +const todo = { label: 'cat:ToDo' as IntlString } +const done = { label: 'cat:Done' as IntlString } + +const items: SelectPopupValueType[] = [ + { id: 'a', text: 'A', category: todo }, + { id: 'b', text: 'B', category: todo }, + { id: 'c', text: 'C', category: done }, + { id: 'd', text: 'D' } +] + +function describeRows (rows: ReturnType): string[] { + return rows.map((row) => + row.kind === 'category' + ? `[${row.category.label} ${row.count}${row.collapsed ? ' collapsed' : ''}]` + : String(row.item.id) + ) +} + +describe('buildSelectPopupRows', () => { + it('adds a header before each category group', () => { + expect(describeRows(buildSelectPopupRows(items, new Set()))).toEqual([ + '[cat:ToDo 2]', + 'a', + 'b', + '[cat:Done 1]', + 'c', + 'd' + ]) + }) + + it('hides items of collapsed categories but keeps the header with the item count', () => { + expect(describeRows(buildSelectPopupRows(items, new Set([todo.label])))).toEqual([ + '[cat:ToDo 2 collapsed]', + '[cat:Done 1]', + 'c', + 'd' + ]) + }) + + it('expands all groups when requested, e.g. while searching', () => { + expect(describeRows(buildSelectPopupRows(items, new Set([todo.label, done.label]), true))).toEqual([ + '[cat:ToDo 2]', + 'a', + 'b', + '[cat:Done 1]', + 'c', + 'd' + ]) + }) +}) + +describe('collapsed categories storage', () => { + beforeEach(() => { + localStorage.clear() + }) + + it('remembers collapsed categories per key', () => { + saveCollapsedCategories('status', new Set([todo.label])) + expect(Array.from(loadCollapsedCategories('status'))).toEqual([todo.label]) + expect(loadCollapsedCategories('other').size).toBe(0) + expect(loadCollapsedCategories(undefined).size).toBe(0) + + saveCollapsedCategories('status', new Set()) + expect(loadCollapsedCategories('status').size).toBe(0) + }) + + it('ignores malformed stored values', () => { + localStorage.setItem('selectPopup.collapsedCategories.status', '{broken') + expect(loadCollapsedCategories('status').size).toBe(0) + }) +}) diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte index 967babacaad..0f5f2088a8d 100644 --- a/packages/ui/src/components/SelectPopup.svelte +++ b/packages/ui/src/components/SelectPopup.svelte @@ -26,6 +26,13 @@ import Spinner from './Spinner.svelte' import IconCheck from './icons/Check.svelte' import IconSearch from './icons/Search.svelte' + import IconCollapseArrow from './icons/CollapseArrow.svelte' + import { + buildSelectPopupRows, + loadCollapsedCategories, + saveCollapsedCategories, + type SelectPopupRow + } from '../selectPopupCategories' import { translate } from '@hcengineering/platform' import { themeStore } from '@hcengineering/theme' @@ -40,6 +47,9 @@ export let embedded: boolean = false export let componentLink: boolean = false export let loading: boolean = false + // Show category headers as collapsible groups; collapse state is remembered under collapsedCategoriesKey + export let collapsibleCategories: boolean = false + export let collapsedCategoriesKey: string | undefined = undefined let popupElement: HTMLDivElement | undefined = undefined export let search: string = '' @@ -53,6 +63,27 @@ let selected: any + let collapsedCategories = loadCollapsedCategories(collapsedCategoriesKey) + + function toggleCategory (label: string): void { + if (collapsedCategories.has(label)) { + collapsedCategories.delete(label) + } else { + collapsedCategories.add(label) + } + collapsedCategories = collapsedCategories + saveCollapsedCategories(collapsedCategoriesKey, collapsedCategories) + } + + function selectRow (row: SelectPopupRow | undefined): void { + if (row === undefined) return + if (row.kind === 'category') { + toggleCategory(row.category.label) + } else { + sendSelect(row.item.id) + } + } + function sendSelect (id: SelectPopupValueType['id']): void { selected = id if (onSelect) { @@ -84,7 +115,7 @@ if (key.code === 'Enter') { key.preventDefault() key.stopPropagation() - sendSelect(filteredObjects[selection].id) + selectRow(rows[selection]) return true } return false @@ -112,6 +143,20 @@ (itemLabelsTranslation.get(el.label ?? '') ?? el.text ?? '').toLowerCase().includes(search.toLowerCase()) ) + $: rows = collapsibleCategories + ? buildSelectPopupRows(filteredObjects, collapsedCategories, search !== '') + : filteredObjects.map((item): SelectPopupRow => ({ kind: 'item', item })) + + // Start keyboard navigation on the first item instead of the first category header + let initialRowSelected = false + $: if (collapsibleCategories && !initialRowSelected && rows.length > 0) { + initialRowSelected = true + selection = Math.max( + 0, + rows.findIndex((row) => row.kind === 'item') + ) + } + $: huge = size === 'medium' || size === 'large' $: if (popupElement) { @@ -154,60 +199,83 @@ {/if}
- dispatch('changeContent')} - > + dispatch('changeContent')}> - {@const item = filteredObjects[itemId]} - + {:else} + {@const item = row.item} +
- + + {#if item.label} + + {/if} + {#if hasSelected} +
+ {#if item.isSelected} + + {/if} +
+ {/if} + {#if item.id === selected && loading} + + {/if} +
+ + {/if} - {@const obj = filteredObjects[row]} - {#if obj.category && ((row === 0 && obj.category.label !== undefined) || obj.category.label !== filteredObjects[row - 1]?.category?.label)} - {#if row > 0}
{/if} -
- - -
+ {#if collapsibleCategories} + {#if row > 0 && rows[row]?.kind === 'category'}
{/if} + {:else} + {@const obj = filteredObjects[row]} + {#if obj.category && ((row === 0 && obj.category.label !== undefined) || obj.category.label !== filteredObjects[row - 1]?.category?.label)} + {#if row > 0}
{/if} +
+ + +
+ {/if} {/if} @@ -215,3 +283,16 @@
{#if !embedded}
{/if}
+ + diff --git a/packages/ui/src/selectPopupCategories.ts b/packages/ui/src/selectPopupCategories.ts new file mode 100644 index 00000000000..d7088c78b5f --- /dev/null +++ b/packages/ui/src/selectPopupCategories.ts @@ -0,0 +1,95 @@ +// +// Copyright © 2026 Hardcore Engineering Inc. +// +// Licensed under the Eclipse Public License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may +// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// +// See the License for the specific language governing permissions and +// limitations under the License. +// + +import type { SelectPopupValueType } from './types' + +/** + * @public + */ +export type SelectPopupRow = + | { + kind: 'category' + category: NonNullable + count: number + collapsed: boolean + } + | { kind: 'item', item: SelectPopupValueType } + +/** + * Builds the rows of a select popup with collapsible category headers. + * Items are expected to be ordered by category; consecutive items with the same + * category label form one group. Items without a category get no header. + * When expandAll is set (e.g. while searching), collapsed groups are shown expanded. + * + * @public + */ +export function buildSelectPopupRows ( + items: SelectPopupValueType[], + collapsed: ReadonlySet, + expandAll: boolean = false +): SelectPopupRow[] { + const rows: SelectPopupRow[] = [] + let header: Extract | undefined + for (const item of items) { + const category = item.category + if (category === undefined) { + header = undefined + rows.push({ kind: 'item', item }) + continue + } + if (header === undefined || header.category.label !== category.label) { + header = { kind: 'category', category, count: 0, collapsed: !expandAll && collapsed.has(category.label) } + rows.push(header) + } + header.count++ + if (!header.collapsed) { + rows.push({ kind: 'item', item }) + } + } + return rows +} + +function collapsedStorageKey (key: string): string { + return `selectPopup.collapsedCategories.${key}` +} + +/** + * @public + */ +export function loadCollapsedCategories (key: string | undefined): Set { + if (key === undefined) return new Set() + try { + const value = JSON.parse(localStorage.getItem(collapsedStorageKey(key)) ?? '[]') + return new Set(Array.isArray(value) ? value.filter((it) => typeof it === 'string') : []) + } catch { + return new Set() + } +} + +/** + * @public + */ +export function saveCollapsedCategories (key: string | undefined, collapsed: ReadonlySet): void { + if (key === undefined) return + try { + if (collapsed.size === 0) { + localStorage.removeItem(collapsedStorageKey(key)) + } else { + localStorage.setItem(collapsedStorageKey(key), JSON.stringify(Array.from(collapsed))) + } + } catch { + // Storage may be unavailable, collapse state is then kept only while the popup is open + } +} diff --git a/plugins/tracker-resources/src/__tests__/statusCategories.test.ts b/plugins/tracker-resources/src/__tests__/statusCategories.test.ts new file mode 100644 index 00000000000..27e34719731 --- /dev/null +++ b/plugins/tracker-resources/src/__tests__/statusCategories.test.ts @@ -0,0 +1,73 @@ +// +// Copyright © 2026 Hardcore Engineering Inc. +// +// Licensed under the Eclipse Public License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may +// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// +// See the License for the specific language governing permissions and +// limitations under the License. +// + +import type { Ref, Status, StatusCategory } from '@hcengineering/core' +import { groupStatusesByCategory, statusGroupingThreshold } from '../statusCategories' + +const categories = new Map, StatusCategory>( + [ + ['backlog', 0], + ['started', 2], + ['unstarted', 1] + ].map(([id, order]) => [ + id as Ref, + { _id: id as Ref, order: order as number, label: `cat:${id}` } as unknown as StatusCategory + ]) +) + +function status (name: string, category?: string): Status { + return { _id: name as Ref, name, category: category as Ref | undefined } as unknown as Status +} + +function names (statuses: Status[]): string[] { + return groupStatusesByCategory(statuses, (ref) => categories.get(ref)).map( + ({ status, category }) => `${status.name}:${category?._id ?? '-'}` + ) +} + +describe('groupStatusesByCategory', () => { + it('keeps the original order without categories below the threshold', () => { + const statuses = [status('b', 'started'), status('a', 'backlog')] + expect(names(statuses)).toEqual(['b:-', 'a:-']) + }) + + it('orders statuses by category order and keeps the order inside a category', () => { + const statuses = [ + status('s1', 'started'), + status('u1', 'unstarted'), + status('x1'), + status('b1', 'backlog'), + status('s2', 'started'), + status('b2', 'backlog'), + status('u2', 'unstarted'), + status('s3', 'started'), + status('b3', 'backlog'), + status('u3', 'unstarted') + ] + expect(statuses.length).toBe(statusGroupingThreshold) + expect(names(statuses)).toEqual([ + 'b1:backlog', + 'b2:backlog', + 'b3:backlog', + 'u1:unstarted', + 'u2:unstarted', + 'u3:unstarted', + 's1:started', + 's2:started', + 's3:started', + 'x1:-' + ]) + }) +}) diff --git a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte index d164656e319..41d241c6ba6 100644 --- a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte +++ b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte @@ -33,6 +33,7 @@ import { createEventDispatcher } from 'svelte' import tracker from '../../plugin' + import { groupStatusesByCategory, statusCategoriesCollapseKey } from '../../statusCategories' import IssueStatusIcon from './IssueStatusIcon.svelte' import StatusPresenter from './StatusPresenter.svelte' @@ -84,7 +85,12 @@ showPopup( SelectPopup, - { value: statusesInfo, placeholder: tracker.string.SetStatus }, + { + value: statusesInfo, + placeholder: tracker.string.SetStatus, + collapsibleCategories: true, + collapsedCategoriesKey: statusCategoriesCollapseKey + }, eventToHTMLElement(event), changeStatus ) @@ -119,14 +125,18 @@ $: selectedStatus = getSelectedStatus(statuses, value, defaultIssueStatus) $: selectedStatusLabel = shouldShowLabel ? selectedStatus?.name : undefined - $: statusesInfo = statuses?.map((s) => { - return { - id: s._id, - component: StatusPresenter, - props: { value: s, size: 'small', space: value.space }, - isSelected: selectedStatus?._id === s._id - } - }) + $: statusesInfo = + statuses !== undefined + ? groupStatusesByCategory(statuses, (c) => client.getModel().findObject(c)).map(({ status: s, category }) => { + return { + id: s._id, + component: StatusPresenter, + props: { value: s, size: 'small', space: value.space }, + isSelected: selectedStatus?._id === s._id, + category: category !== undefined ? { label: category.label, icon: category.icon } : undefined + } + }) + : undefined $: smallgap = size === 'inline' || size === 'small' diff --git a/plugins/tracker-resources/src/components/issues/StatusSelector.svelte b/plugins/tracker-resources/src/components/issues/StatusSelector.svelte index df13cce3b48..dab7ff7f480 100644 --- a/plugins/tracker-resources/src/components/issues/StatusSelector.svelte +++ b/plugins/tracker-resources/src/components/issues/StatusSelector.svelte @@ -14,6 +14,7 @@ -->