From 8236163feab4326f14b618e3c77b23161d2e40fa Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Tue, 12 Nov 2024 10:48:26 -0500
Subject: [PATCH] Enable New UI by default (#1515)

nit

Add playwright test

nit

nit

nit
---
 browser_tests/fixtures/ComfyPage.ts           |  1 +
 .../dialog/content/SettingDialogContent.vue   |  2 ++
 .../content/setting/FirstTimeUIMessage.vue    | 25 +++++++++++++++++++
 src/i18n.ts                                   |  4 +++
 src/stores/coreSettings.ts                    |  5 ++--
 src/stores/settingStore.ts                    |  7 +++++-
 6 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 src/components/dialog/content/setting/FirstTimeUIMessage.vue

diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts
index 65950f4dc..0df1a6d19 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -778,6 +778,7 @@ export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
     comfyPage.userIds[parallelIndex] = userId
 
     await comfyPage.setupSettings({
+      'Comfy.UseNewMenu': 'Disabled',
       // Hide canvas menu/info by default.
       'Comfy.Graph.CanvasInfo': false,
       'Comfy.Graph.CanvasMenu': false,
diff --git a/src/components/dialog/content/SettingDialogContent.vue b/src/components/dialog/content/SettingDialogContent.vue
index c056f3bad..10989087e 100644
--- a/src/components/dialog/content/SettingDialogContent.vue
+++ b/src/components/dialog/content/SettingDialogContent.vue
@@ -19,6 +19,7 @@
     <Divider layout="vertical" class="mx-1 2xl:mx-4" />
     <ScrollPanel class="settings-content flex-grow">
       <Tabs :value="tabValue">
+        <FirstTimeUIMessage v-if="tabValue === 'Comfy'" />
         <TabPanels class="settings-tab-panels">
           <TabPanel key="search-results" value="Search Results">
             <div v-if="searchResults.length > 0">
@@ -91,6 +92,7 @@ import SearchBox from '@/components/common/SearchBox.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { flattenTree } from '@/utils/treeUtil'
 import AboutPanel from './setting/AboutPanel.vue'
+import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
 
 const KeybindingPanel = defineAsyncComponent(
   () => import('./setting/KeybindingPanel.vue')
diff --git a/src/components/dialog/content/setting/FirstTimeUIMessage.vue b/src/components/dialog/content/setting/FirstTimeUIMessage.vue
new file mode 100644
index 000000000..7a4014a7e
--- /dev/null
+++ b/src/components/dialog/content/setting/FirstTimeUIMessage.vue
@@ -0,0 +1,25 @@
+<template>
+  <Message
+    v-if="show"
+    class="first-time-ui-message m-2"
+    severity="info"
+    :closable="true"
+    @close="handleClose"
+  >
+    {{ $t('firstTimeUIMessage') }}
+  </Message>
+</template>
+
+<script setup lang="ts">
+import { useSettingStore } from '@/stores/settingStore'
+import Message from 'primevue/message'
+import { computed } from 'vue'
+
+const settingStore = useSettingStore()
+const show = computed(() => !settingStore.exists('Comfy.UseNewMenu'))
+const handleClose = () => {
+  // Explicitly write the current value to the store.
+  const currentValue = settingStore.get('Comfy.UseNewMenu')
+  settingStore.set('Comfy.UseNewMenu', currentValue)
+}
+</script>
diff --git a/src/i18n.ts b/src/i18n.ts
index a354cffe9..6342b7130 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -51,6 +51,8 @@ const messages = {
         }
       }
     },
+    firstTimeUIMessage:
+      'This is the first time you use the new UI. Choose "Menu > Use New Menu > Disabled" to restore the old UI.',
     download: 'Download',
     loadAllFolders: 'Load All Folders',
     refresh: 'Refresh',
@@ -174,6 +176,8 @@ const messages = {
     }
   },
   zh: {
+    firstTimeUIMessage:
+      '这是您第一次使用新界面。选择“Menu > Use New Menu > Disabled”以恢复旧界面。',
     download: '下载',
     loadAllFolders: '加载所有文件夹',
     refresh: '刷新',
diff --git a/src/stores/coreSettings.ts b/src/stores/coreSettings.ts
index f38bd1fe9..43b7a538d 100644
--- a/src/stores/coreSettings.ts
+++ b/src/stores/coreSettings.ts
@@ -373,9 +373,8 @@ export const CORE_SETTINGS: SettingParams[] = [
   {
     id: 'Comfy.UseNewMenu',
     category: ['Comfy', 'Menu', 'UseNewMenu'],
-    defaultValue: 'Disabled',
-    name: 'Use new menu and workflow management.',
-    experimental: true,
+    defaultValue: 'Top',
+    name: 'Use new menu',
     type: 'combo',
     options: ['Disabled', 'Top', 'Bottom'],
     migrateDeprecatedValue: (value: string) => {
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index 496fba11c..a68a45fba 100644
--- a/src/stores/settingStore.ts
+++ b/src/stores/settingStore.ts
@@ -66,6 +66,10 @@ export const useSettingStore = defineStore('setting', () => {
     })
   }
 
+  function exists(key: string) {
+    return settingValues.value[key] !== undefined
+  }
+
   async function set<K extends keyof Settings>(key: K, value: Settings[K]) {
     settingValues.value[key] = value
     await app.ui.settings.setSettingValueAsync(key, value)
@@ -84,6 +88,7 @@ export const useSettingStore = defineStore('setting', () => {
     addSettings,
     loadExtensionSettings,
     set,
-    get
+    get,
+    exists
   }
 })