mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 05:32:02 +00:00
3eccf3ec61
## Summary Updates the templates modal to default to the "Getting Started" category for new users. ## Changes - Add `initialCategory` prop to `WorkflowTemplateSelectorDialog` component - Integrate `useNewUserService` in the dialog composable to detect first-time users - New users automatically see the "basics-getting-started" category - Existing users continue to see "all" templates as default - Allow explicit category override via options parameter ## Testing - Added unit tests covering all scenarios (new user, non-new user, undetermined, explicit override) - 6 tests pass Fixes COM-9146 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8599-feat-default-to-Getting-Started-category-for-new-users-in-templates-modal-2fd6d73d365081d4a5fad2abdb768269) by [Unito](https://www.unito.io)
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import WorkflowTemplateSelectorDialog from '@/components/custom/widget/WorkflowTemplateSelectorDialog.vue'
|
|
import { useTelemetry } from '@/platform/telemetry'
|
|
import { useDialogService } from '@/services/dialogService'
|
|
import { useNewUserService } from '@/services/useNewUserService'
|
|
import { useDialogStore } from '@/stores/dialogStore'
|
|
|
|
const DIALOG_KEY = 'global-workflow-template-selector'
|
|
const GETTING_STARTED_CATEGORY_ID = 'basics-getting-started'
|
|
|
|
export const useWorkflowTemplateSelectorDialog = () => {
|
|
const dialogService = useDialogService()
|
|
const dialogStore = useDialogStore()
|
|
const newUserService = useNewUserService()
|
|
|
|
function hide() {
|
|
dialogStore.closeDialog({ key: DIALOG_KEY })
|
|
}
|
|
|
|
function show(
|
|
source: 'sidebar' | 'menu' | 'command' = 'command',
|
|
options?: { initialCategory?: string }
|
|
) {
|
|
useTelemetry()?.trackTemplateLibraryOpened({ source })
|
|
|
|
const initialCategory =
|
|
options?.initialCategory ??
|
|
(newUserService.isNewUser() ? GETTING_STARTED_CATEGORY_ID : 'all')
|
|
|
|
dialogService.showLayoutDialog({
|
|
key: DIALOG_KEY,
|
|
component: WorkflowTemplateSelectorDialog,
|
|
props: {
|
|
onClose: hide,
|
|
initialCategory
|
|
},
|
|
dialogComponentProps: {
|
|
pt: {
|
|
content: { class: '!px-0 overflow-hidden h-full !py-0' },
|
|
root: {
|
|
style:
|
|
'width: 90vw; height: 85vh; max-width: 1400px; display: flex;'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
return {
|
|
show,
|
|
hide
|
|
}
|
|
}
|