Require confirmation for desktop reinstall (#1835)

* Add generic default button for unknown dialogs

* Add reinstall confirmation dialog

* Prevent removal of newlines in i18n dialogs

* Update locales [skip ci]

---------

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

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -26,7 +26,7 @@
         @click="onConfirm"
         icon="pi pi-save"
       />
-      <template v-else>
+      <template v-else-if="type === 'dirtyClose'">
         <Button
           :label="$t('no')"
           severity="secondary"
@@ -35,6 +35,21 @@
         />
         <Button :label="$t('save')" @click="onConfirm" icon="pi pi-save" />
       </template>
+      <Button
+        v-else-if="type === 'reinstall'"
+        :label="$t('desktopMenu.reinstall')"
+        severity="warn"
+        @click="onConfirm"
+        icon="pi pi-eraser"
+      />
+      <!-- Invalid - just show a close button. -->
+      <Button
+        v-else
+        :label="$t('close')"
+        severity="primary"
+        @click="onCancel"
+        icon="pi pi-times"
+      />
     </div>
   </section>
 </template>
@@ -42,10 +57,11 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { useDialogStore } from '@/stores/dialogStore'
+import type { ConfirmationDialogType } from '@/services/dialogService'
 
 const props = defineProps<{
   message: string
-  type: 'overwrite' | 'delete' | 'dirtyClose'
+  type: ConfirmationDialogType
   onConfirm: (value?: boolean) => void
   itemList?: string[]
 }>()
@@ -62,3 +78,9 @@ const onConfirm = () => {
   useDialogStore().closeDialog()
 }
 </script>
+
+<style lang="css" scoped>
+.prompt-dialog-content {
+  white-space: pre-wrap;
+}
+</style>

src/extensions/core/electronAdapter.ts

@@ -1,4 +1,6 @@
+import { t } from '@/i18n'
 import { app } from '@/scripts/app'
+import { showConfirmationDialog } from '@/services/dialogService'
 import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
 ;(async () => {
   if (!isElectron()) return
@@ -101,11 +103,16 @@ import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
       },
       {
         id: 'Comfy-Desktop.Reinstall',
-        label: 'Reinstall',
+        label: t('desktopMenu.reinstall'),
         icon: 'pi pi-refresh',
-        function() {
-          // TODO(huchenlei): Add a confirmation dialog.
-          electronAPI.reinstall()
+        async function() {
+          const proceed = await showConfirmationDialog({
+            message: t('desktopMenu.confirmReinstall'),
+            title: t('desktopMenu.reinstall'),
+            type: 'reinstall'
+          })
+
+          if (proceed) electronAPI.reinstall()
         }
       },
       {

src/locales/en.json

@@ -136,6 +136,7 @@
   "save": "Save",
   "no": "No",
   "cancel": "Cancel",
+  "close": "Close",
   "overwrite": "Overwrite",
   "customize": "Customize",
   "experimental": "BETA",
@@ -598,7 +599,7 @@
   },
   "desktopMenu": {
     "reinstall": "Reinstall",
-    "confirmReinstall": "This will clear your extra_models_config.yaml file, and begin installation again.  Are you sure?"
+    "confirmReinstall": "This will clear your extra_models_config.yaml file,\nand begin installation again.\n\nAre you sure?"
   },
   "settingsCategories": {
     "Comfy-Desktop": "Comfy-Desktop",

src/locales/ja.json

@@ -5,6 +5,7 @@
   "box": "ボックス",
   "briefcase": "ブリーフケース",
   "cancel": "キャンセル",
+  "close": "閉じる",
   "color": "色",
   "comingSoon": "近日公開",
   "confirm": "確認",

src/locales/ru.json

@@ -5,6 +5,7 @@
   "box": "Ящик",
   "briefcase": "Чемодан",
   "cancel": "Отмена",
+  "close": "Закрыть",
   "color": "Цвет",
   "comingSoon": "Скоро",
   "confirm": "Подтвердить",

src/locales/zh.json

@@ -5,6 +5,7 @@
   "box": "盒子",
   "briefcase": "公文包",
   "cancel": "取消",
+  "close": "关闭",
   "color": "颜色",
   "comingSoon": "敬请期待",
   "confirm": "确认",

src/services/dialogService.ts

@@ -97,6 +97,12 @@ export async function showPromptDialog({
   })
 }
 
+export type ConfirmationDialogType =
+  | 'overwrite'
+  | 'delete'
+  | 'dirtyClose'
+  | 'reinstall'
+
 /**
  *
  * @returns `true` if the user confirms the dialog,
@@ -112,7 +118,7 @@ export async function showConfirmationDialog({
   /** Dialog heading */
   title: string
   /** Pre-configured dialog type */
-  type: 'overwrite' | 'delete' | 'dirtyClose'
+  type: ConfirmationDialogType
   /** The main message body */
   message: string
   /** Displayed as an unorderd list immediately below the message body */