Add "Don't show this again" checkbox to missing models dialog (#2344)

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/dialog.spec.ts

@@ -1,4 +1,4 @@
-import { expect } from '@playwright/test'
+import { Locator, expect } from '@playwright/test'
 
 import { Keybinding } from '../src/types/keyBindingTypes'
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
@@ -140,6 +140,49 @@ test.describe('Missing models warning', () => {
     const download = await downloadPromise
     expect(download.suggestedFilename()).toBe('fake_model.safetensors')
   })
+
+  test.describe('Do not show again checkbox', () => {
+    let checkbox: Locator
+    let closeButton: Locator
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning',
+        true
+      )
+      await comfyPage.loadWorkflow('missing_models')
+
+      checkbox = comfyPage.page.getByLabel("Don't show this again")
+      closeButton = comfyPage.page.getByLabel('Close')
+    })
+
+    test('Should disable warning dialog when checkbox is checked', async ({
+      comfyPage
+    }) => {
+      await checkbox.click()
+      const changeSettingPromise = comfyPage.page.waitForRequest(
+        '**/api/settings/Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      await closeButton.click()
+      await changeSettingPromise
+
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(false)
+    })
+
+    test('Should keep warning dialog enabled when checkbox is unchecked', async ({
+      comfyPage
+    }) => {
+      await closeButton.click()
+
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(true)
+    })
+  })
 })
 
 test.describe('Settings', () => {

src/components/dialog/content/MissingModelsWarning.vue

@@ -2,9 +2,15 @@
   <NoResultsPlaceholder
     class="pb-0"
     icon="pi pi-exclamation-circle"
-    title="Missing Models"
+    :title="t('missingModelsDialog.missingModels')"
-    message="When loading the graph, the following models were not found"
+    :message="t('missingModelsDialog.missingModelsMessage')"
   />
+  <div class="flex gap-1 mb-4">
+    <Checkbox v-model="doNotAskAgain" binary input-id="doNotAskAgain" />
+    <label for="doNotAskAgain">{{
+      t('missingModelsDialog.doNotAskAgain')
+    }}</label>
+  </div>
   <ListBox :options="missingModels" class="comfy-missing-models">
     <template #option="{ option }">
       <Suspense v-if="isElectron()">
@@ -25,11 +31,14 @@
 </template>
 
 <script setup lang="ts">
+import Checkbox from 'primevue/checkbox'
 import ListBox from 'primevue/listbox'
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import { useSettingStore } from '@/stores/settingStore'
 import { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here
@@ -58,6 +67,10 @@ const props = defineProps<{
   paths: Record<string, string[]>
 }>()
 
+const { t } = useI18n()
+
+const doNotAskAgain = ref(false)
+
 const modelDownloads = ref<Record<string, ModelInfo>>({})
 const missingModels = computed(() => {
   return props.missingModels.map((model) => {
@@ -107,6 +120,12 @@ const missingModels = computed(() => {
     }
   })
 })
+
+onBeforeUnmount(() => {
+  if (doNotAskAgain.value) {
+    useSettingStore().set('Comfy.Workflow.ShowMissingModelsWarning', false)
+  }
+})
 </script>
 
 <style scoped>

src/locales/en/main.json

@@ -708,5 +708,10 @@
       "taskFailed": "Task failed to run.",
       "defaultDescription": "An error occurred while running a maintenance task."
     }
+  },
+  "missingModelsDialog": {
+    "doNotAskAgain": "Don't show this again",
+    "missingModels": "Missing Models",
+    "missingModelsMessage": "When loading the graph, the following models were not found"
   }
 }

src/locales/fr/main.json

@@ -370,6 +370,11 @@
     "Zoom In": "Zoom avant",
     "Zoom Out": "Zoom arrière"
   },
+  "missingModelsDialog": {
+    "doNotAskAgain": "Ne plus afficher ce message",
+    "missingModels": "Modèles manquants",
+    "missingModelsMessage": "Lors du chargement du graphique, les modèles suivants n'ont pas été trouvés"
+  },
   "nodeCategories": {
     "3d": "3d",
     "3d_models": "modèles_3d",

src/locales/ja/main.json

@@ -370,6 +370,11 @@
     "Zoom In": "ズームイン",
     "Zoom Out": "ズームアウト"
   },
+  "missingModelsDialog": {
+    "doNotAskAgain": "再度表示しない",
+    "missingModels": "モデルが見つかりません",
+    "missingModelsMessage": "グラフを読み込む際に、次のモデルが見つかりませんでした"
+  },
   "nodeCategories": {
     "3d": "3d",
     "3d_models": "3Dモデル",

src/locales/ko/main.json

@@ -370,6 +370,11 @@
     "Zoom In": "확대",
     "Zoom Out": "축소"
   },
+  "missingModelsDialog": {
+    "doNotAskAgain": "다시 보지 않기",
+    "missingModels": "모델이 없습니다",
+    "missingModelsMessage": "그래프를 로드할 때 다음 모델을 찾을 수 없었습니다"
+  },
   "nodeCategories": {
     "3d": "3d",
     "3d_models": "3D 모델",

src/locales/ru/main.json

@@ -370,6 +370,11 @@
     "Zoom In": "Увеличить",
     "Zoom Out": "Уменьшить"
   },
+  "missingModelsDialog": {
+    "doNotAskAgain": "Больше не показывать это",
+    "missingModels": "Отсутствующие модели",
+    "missingModelsMessage": "При загрузке графа следующие модели не были найдены"
+  },
   "nodeCategories": {
     "3d": "3d",
     "3d_models": "3d_модели",

src/locales/zh/main.json

@@ -370,6 +370,11 @@
     "Zoom In": "放大画面",
     "Zoom Out": "缩小画面"
   },
+  "missingModelsDialog": {
+    "doNotAskAgain": "不再显示此消息",
+    "missingModels": "缺少模型",
+    "missingModelsMessage": "加载图表时，未找到以下模型"
+  },
   "nodeCategories": {
     "3d": "3d",
     "3d_models": "3D模型",