Restyle missing node warning dialog (#1348)

* nit

* Restyle missing node warning dialog

* nit

* nit

src/components/common/NoResultsPlaceholder.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="no-results-placeholder">
+  <div class="no-results-placeholder p-8 h-full" :class="props.class">
     <Card>
       <template #content>
         <div class="flex flex-col items-center">
@@ -22,7 +22,8 @@
 import Card from 'primevue/card'
 import Button from 'primevue/button'
 
-defineProps<{
+const props = defineProps<{
+  class?: string
   icon?: string
   title: string
   message: string
@@ -33,11 +34,6 @@ defineEmits(['action'])
 </script>
 
 <style scoped>
-.no-results-placeholder {
-  height: 100%;
-  padding: 2rem;
-}
-
 .no-results-placeholder :deep(.p-card) {
   background-color: var(--surface-ground);
   text-align: center;

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -1,43 +1,42 @@
 <template>
-  <div class="comfy-missing-nodes">
-    <h4 class="warning-title">Warning: Missing Node Types</h4>
-    <p class="warning-description">
-      When loading the graph, the following node types were not found:
-    </p>
-    <ListBox
-      :options="uniqueNodes"
-      optionLabel="label"
-      scrollHeight="100%"
-      :class="'missing-nodes-list' + (props.maximized ? ' maximized' : '')"
-      :pt="{
-        list: { class: 'border-none' }
-      }"
-    >
-      <template #option="slotProps">
-        <div class="missing-node-item">
-          <span class="node-type">{{ slotProps.option.label }}</span>
-          <span v-if="slotProps.option.hint" class="node-hint">{{
-            slotProps.option.hint
-          }}</span>
-          <Button
-            v-if="slotProps.option.action"
-            @click="slotProps.option.action.callback"
-            :label="slotProps.option.action.text"
-            class="p-button-sm p-button-outlined"
-          />
-        </div>
-      </template>
-    </ListBox>
-    <p v-if="hasAddedNodes" class="added-nodes-warning">
-      Nodes that have failed to load will show as red on the graph.
-    </p>
-  </div>
+  <NoResultsPlaceholder
+    class="pb-0"
+    icon="pi pi-exclamation-circle"
+    title="Missing Node Types"
+    message="When loading the graph, the following node types were not found"
+  />
+  <ListBox
+    :options="uniqueNodes"
+    optionLabel="label"
+    scrollHeight="100%"
+    class="comfy-missing-nodes"
+    :pt="{
+      list: { class: 'border-none' }
+    }"
+  >
+    <template #option="slotProps">
+      <div class="flex align-items-center">
+        <span class="node-type">{{ slotProps.option.label }}</span>
+        <span v-if="slotProps.option.hint" class="node-hint">{{
+          slotProps.option.hint
+        }}</span>
+        <Button
+          v-if="slotProps.option.action"
+          @click="slotProps.option.action.callback"
+          :label="slotProps.option.action.text"
+          size="small"
+          outlined
+        />
+      </div>
+    </template>
+  </ListBox>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import ListBox from 'primevue/listbox'
 import Button from 'primevue/button'
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 
 interface NodeType {
   type: string
@@ -50,8 +49,6 @@ interface NodeType {
 
 const props = defineProps<{
   missingNodeTypes: (string | NodeType)[]
-  hasAddedNodes: boolean
-  maximized: boolean
 }>()
 
 const uniqueNodes = computed(() => {
@@ -76,51 +73,12 @@ const uniqueNodes = computed(() => {
 })
 </script>
 
-<style>
-:root {
-  --red-600: #dc3545;
-}
-</style>
-
 <style scoped>
 .comfy-missing-nodes {
-  font-family: monospace;
-  color: var(--red-600);
-  padding: 1.5rem;
-  background-color: var(--surface-ground);
-  border-radius: var(--border-radius);
-  box-shadow: var(--card-shadow);
-}
-
-.warning-title {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-.warning-description {
-  margin-bottom: 1rem;
-}
-
-.missing-nodes-list {
   max-height: 300px;
   overflow-y: auto;
 }
 
-.missing-nodes-list.maximized {
-  max-height: unset;
-}
-
-.missing-node-item {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem;
-}
-
-.node-type {
-  font-weight: 600;
-  color: var(--text-color);
-}
-
 .node-hint {
   margin-left: 0.5rem;
   font-style: italic;
@@ -130,9 +88,4 @@ const uniqueNodes = computed(() => {
 :deep(.p-button) {
   margin-left: auto;
 }
-
-.added-nodes-warning {
-  margin-top: 1rem;
-  font-style: italic;
-}
 </style>

src/scripts/app.ts

@@ -2188,12 +2188,9 @@ export class ComfyApp {
     localStorage.setItem('litegrapheditor_clipboard', old)
   }
 
-  #showMissingNodesError(missingNodeTypes, hasAddedNodes = true) {
+  #showMissingNodesError(missingNodeTypes) {
     if (useSettingStore().get('Comfy.Workflow.ShowMissingNodesWarning')) {
-      showLoadWorkflowWarning({
-        missingNodeTypes,
-        hasAddedNodes
-      })
+      showLoadWorkflowWarning({ missingNodeTypes })
     }
 
     this.logging.addEntry('Comfy.App', 'warn', {
@@ -2823,8 +2820,7 @@ export class ComfyApp {
     if (missingNodeTypes.length) {
       this.#showMissingNodesError(
         // @ts-expect-error
-        missingNodeTypes.map((t) => t.class_type),
-        false
+        missingNodeTypes.map((t) => t.class_type)
       )
       return
     }

src/services/dialogService.ts

@@ -14,16 +14,12 @@ import { i18n } from '@/i18n'
 
 export function showLoadWorkflowWarning(props: {
   missingNodeTypes: any[]
-  hasAddedNodes: boolean
   [key: string]: any
 }) {
   const dialogStore = useDialogStore()
   dialogStore.showDialog({
     component: LoadWorkflowWarning,
-    props,
-    dialogComponentProps: {
-      maximizable: true
-    }
+    props
   })
 }