From b5c1da22dbee76348a587132caa5cd36db1830af Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Sun, 20 Apr 2025 17:02:42 -0400
Subject: [PATCH] [API Nodes] Remove cost from signin required dialog (#3532)

---
 src/components/common/ApiNodesList.vue        | 31 +++++++++++++++++++
 .../dialog/content/ApiNodesSignInContent.vue  |  9 ++----
 src/services/dialogService.ts                 |  5 ++-
 3 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 src/components/common/ApiNodesList.vue

diff --git a/src/components/common/ApiNodesList.vue b/src/components/common/ApiNodesList.vue
new file mode 100644
index 000000000..38d89607b
--- /dev/null
+++ b/src/components/common/ApiNodesList.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="flex flex-col gap-3 h-full">
+    <div class="flex text-xs">
+      <div>{{ t('apiNodesCostBreakdown.title') }}</div>
+    </div>
+    <ScrollPanel class="flex-grow h-0">
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="nodeName in nodeNames"
+          :key="nodeName"
+          class="flex items-center justify-between px-3 py-2 rounded-md bg-[var(--p-content-border-color)]"
+        >
+          <div class="flex items-center gap-2">
+            <span class="text-base font-medium leading-tight">{{
+              nodeName
+            }}</span>
+          </div>
+        </div>
+      </div>
+    </ScrollPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ScrollPanel from 'primevue/scrollpanel'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const { nodeNames } = defineProps<{ nodeNames: string[] }>()
+</script>
diff --git a/src/components/dialog/content/ApiNodesSignInContent.vue b/src/components/dialog/content/ApiNodesSignInContent.vue
index f83e11919..1d9d08358 100644
--- a/src/components/dialog/content/ApiNodesSignInContent.vue
+++ b/src/components/dialog/content/ApiNodesSignInContent.vue
@@ -9,7 +9,7 @@
       {{ t('apiNodesSignInDialog.message') }}
     </div>
 
-    <ApiNodesCostBreakdown :nodes="apiNodes" :show-total="true" />
+    <ApiNodesList :node-names="apiNodeNames" />
 
     <div class="flex justify-between items-center">
       <Button :label="t('g.learnMore')" link />
@@ -30,13 +30,10 @@
 import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
-import ApiNodesCostBreakdown from '@/components/common/ApiNodesCostBreakdown.vue'
-import type { ApiNodeCost } from '@/types/apiNodeTypes'
-
 const { t } = useI18n()
 
-const { apiNodes, onLogin, onCancel } = defineProps<{
-  apiNodes: ApiNodeCost[]
+const { apiNodeNames, onLogin, onCancel } = defineProps<{
+  apiNodeNames: string[]
   onLogin?: () => void
   onCancel?: () => void
 }>()
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index acd6bb869..03d327058 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -19,7 +19,6 @@ import TemplateWorkflowsDialogHeader from '@/components/templates/TemplateWorkfl
 import { t } from '@/i18n'
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import { type ShowDialogOptions, useDialogStore } from '@/stores/dialogStore'
-import { ApiNodeCost } from '@/types/apiNodeTypes'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
 export type ConfirmationDialogType =
@@ -225,14 +224,14 @@ export const useDialogService = () => {
    * @returns Promise that resolves to true if user clicks login, false if cancelled
    */
   async function showApiNodesSignInDialog(
-    apiNodes: ApiNodeCost[]
+    apiNodeNames: string[]
   ): Promise<boolean> {
     return new Promise<boolean>((resolve) => {
       dialogStore.showDialog({
         key: 'api-nodes-signin',
         component: ApiNodesSignInContent,
         props: {
-          apiNodes,
+          apiNodeNames,
           onLogin: () => showSignInDialog().then((result) => resolve(result)),
           onCancel: () => resolve(false)
         },