From 10f43be9119bead4bc91007144f1f55ed475016b Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Tue, 29 Oct 2024 10:15:31 -0400
Subject: [PATCH] Remove show model folder checkbox in missing model dialog
 (#1358)

* Remove show model folder checkbox in missing model dialog

* nit

* nit
---
 browser_tests/dialog.spec.ts                  | 26 --------------
 .../dialog/content/MissingModelsWarning.vue   | 36 ++++---------------
 2 files changed, 7 insertions(+), 55 deletions(-)

diff --git a/browser_tests/dialog.spec.ts b/browser_tests/dialog.spec.ts
index 0ff979e02..074cea9fa 100644
--- a/browser_tests/dialog.spec.ts
+++ b/browser_tests/dialog.spec.ts
@@ -68,32 +68,6 @@ test.describe('Missing models warning', () => {
     const downloadComplete = comfyPage.page.locator('.download-complete')
     await expect(downloadComplete).toBeVisible()
   })
-
-  test('Can configure download folder', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('missing_models')
-
-    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
-    await expect(missingModelsWarning).toBeVisible()
-
-    const folderSelectToggle = comfyPage.page.locator(
-      '.model-path-select-checkbox'
-    )
-    const folderSelect = comfyPage.page.locator('.model-path-select')
-    await expect(folderSelectToggle).toBeVisible()
-    await expect(folderSelect).not.toBeVisible()
-
-    await folderSelectToggle.click() // show the selectors
-    await expect(folderSelect).toBeVisible()
-
-    await folderSelect.click() // open dropdown
-    await expect(folderSelect).toHaveClass(/p-select-open/)
-
-    await folderSelect.click() // close the dropdown
-    await expect(folderSelect).not.toHaveClass(/p-select-open/)
-
-    await folderSelectToggle.click() // hide the selectors
-    await expect(folderSelect).not.toBeVisible()
-  })
 })
 
 test.describe('Settings', () => {
diff --git a/src/components/dialog/content/MissingModelsWarning.vue b/src/components/dialog/content/MissingModelsWarning.vue
index 518af7901..a711fd114 100644
--- a/src/components/dialog/content/MissingModelsWarning.vue
+++ b/src/components/dialog/content/MissingModelsWarning.vue
@@ -5,27 +5,15 @@
     title="Missing Models"
     message="When loading the graph, the following models were not found"
   />
-  <div class="flex flex-row">
-    <Checkbox
-      class="model-path-select-checkbox"
-      v-model="showFolderSelect"
-      label="Show folder selector"
-      :binary="true"
-    />
-    <p class="ml-2">Show folder selector</p>
-  </div>
   <ListBox
     :options="missingModels"
     optionLabel="label"
     scrollHeight="100%"
     class="comfy-missing-models"
-    :pt="{
-      list: { class: 'border-none' }
-    }"
   >
     <template #option="slotProps">
       <div
-        class="missing-model-item"
+        class="missing-model-item flex flex-row items-center"
         :style="{ '--progress': `${slotProps.option.progress}%` }"
       >
         <div class="model-info">
@@ -40,14 +28,14 @@
         </div>
         <div class="model-action">
           <Select
-            class="model-path-select"
+            class="model-path-select mr-2"
             v-if="
               slotProps.option.action &&
               !slotProps.option.downloading &&
               !slotProps.option.completed &&
-              !slotProps.option.error &&
-              showFolderSelect
+              !slotProps.option.error
             "
+            v-show="slotProps.option.paths.length > 1"
             v-model="slotProps.option.folderPath"
             :options="slotProps.option.paths"
             @change="updateFolderPath(slotProps.option, $event)"
@@ -61,7 +49,9 @@
             "
             @click="slotProps.option.action.callback"
             :label="slotProps.option.action.text"
-            class="p-button-sm p-button-outlined model-action-button"
+            size="small"
+            outlined
+            class="model-action-button"
           />
           <div v-if="slotProps.option.downloading" class="download-progress">
             <span class="progress-text"
@@ -82,7 +72,6 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import Checkbox from 'primevue/checkbox'
 import ListBox from 'primevue/listbox'
 import Select from 'primevue/select'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
@@ -91,8 +80,6 @@ import Button from 'primevue/button'
 import { api } from '@/scripts/api'
 import { DownloadModelStatus } from '@/types/apiTypes'
 
-const showFolderSelect = ref(false)
-
 // TODO: Read this from server internal API rather than hardcoding here
 // as some installations may wish to use custom sources
 const allowedSources = [
@@ -259,15 +246,6 @@ const missingModels = computed(() => {
   overflow-y: auto;
 }
 
-.missing-model-item {
-  display: flex;
-  align-items: flex-start;
-  padding: 0.5rem;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
-
 .missing-model-item::before {
   content: '';
   position: absolute;