From e8efd0d8013ff5db3f8f19aae7d76f2727df3598 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Mon, 3 Mar 2025 16:49:08 -0700
Subject: [PATCH] Show templates to first time user (#2841)

---
 browser_tests/dialog.spec.ts              |  8 --------
 browser_tests/templates.spec.ts           | 13 +++++++++++++
 src/composables/useWorkflowPersistence.ts |  6 +++---
 src/services/workflowService.ts           | 14 --------------
 4 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/browser_tests/dialog.spec.ts b/browser_tests/dialog.spec.ts
index f6a7c1d00..b2d3d5411 100644
--- a/browser_tests/dialog.spec.ts
+++ b/browser_tests/dialog.spec.ts
@@ -133,14 +133,6 @@ test.describe('Missing models warning', () => {
     await expect(missingModelsWarning).not.toBeVisible()
   })
 
-  test('should show on tutorial workflow', async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.TutorialCompleted', false)
-    await comfyPage.setup({ clearStorage: true })
-    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
-    await expect(missingModelsWarning).toBeVisible()
-    expect(await comfyPage.getSetting('Comfy.TutorialCompleted')).toBe(true)
-  })
-
   // Flaky test after parallelization
   // https://github.com/Comfy-Org/ComfyUI_frontend/pull/1400
   test.skip('Should download missing model when clicking download button', async ({
diff --git a/browser_tests/templates.spec.ts b/browser_tests/templates.spec.ts
index ef68e897e..cbbcc60e2 100644
--- a/browser_tests/templates.spec.ts
+++ b/browser_tests/templates.spec.ts
@@ -73,4 +73,17 @@ test.describe('Templates', () => {
       expect(await comfyPage.getGraphNodesCount()).toBeGreaterThan(0)
     }).toPass({ timeout: 250 })
   })
+
+  test('dialog should be automatically shown to first-time users', async ({
+    comfyPage
+  }) => {
+    // Set the tutorial as not completed to mark the user as a first-time user
+    await comfyPage.setSetting('Comfy.TutorialCompleted', false)
+
+    // Load the page
+    await comfyPage.setup({ clearStorage: true })
+
+    // Expect the templates dialog to be shown
+    expect(await comfyPage.templates.content.isVisible()).toBe(true)
+  })
 })
diff --git a/src/composables/useWorkflowPersistence.ts b/src/composables/useWorkflowPersistence.ts
index eeb879ab7..c8dbc3eea 100644
--- a/src/composables/useWorkflowPersistence.ts
+++ b/src/composables/useWorkflowPersistence.ts
@@ -4,7 +4,7 @@ import { api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { getStorageValue, setStorageValue } from '@/scripts/utils'
 import { useWorkflowService } from '@/services/workflowService'
-import { useModelStore } from '@/stores/modelStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 
@@ -50,8 +50,8 @@ export function useWorkflowPersistence() {
   const loadDefaultWorkflow = async () => {
     if (!settingStore.get('Comfy.TutorialCompleted')) {
       await settingStore.set('Comfy.TutorialCompleted', true)
-      await useModelStore().loadModelFolders()
-      await useWorkflowService().loadTutorialWorkflow()
+      await useWorkflowService().loadBlankWorkflow()
+      await useCommandStore().execute('Comfy.BrowseTemplates')
     } else {
       await comfyApp.loadGraphData()
     }
diff --git a/src/services/workflowService.ts b/src/services/workflowService.ts
index 391c1aff1..73779d74a 100644
--- a/src/services/workflowService.ts
+++ b/src/services/workflowService.ts
@@ -4,7 +4,6 @@ import { toRaw } from 'vue'
 
 import { t } from '@/i18n'
 import { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
-import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
 import { downloadBlob } from '@/scripts/utils'
@@ -123,18 +122,6 @@ export const useWorkflowService = () => {
     await app.loadGraphData(defaultGraph)
   }
 
-  /**
-   * Load the tutorial workflow
-   */
-  const loadTutorialWorkflow = async () => {
-    const tutorialWorkflow = await fetch(
-      api.fileURL('/templates/default.json')
-    ).then((r) => r.json())
-    await app.loadGraphData(tutorialWorkflow, false, false, 'tutorial', {
-      showMissingModelsDialog: true
-    })
-  }
-
   /**
    * Load a blank workflow
    */
@@ -386,7 +373,6 @@ export const useWorkflowService = () => {
     saveWorkflow,
     loadDefaultWorkflow,
     loadBlankWorkflow,
-    loadTutorialWorkflow,
     reloadCurrentWorkflow,
     openWorkflow,
     closeWorkflow,