Cherry pick API node fixes (#3839)

Co-authored-by: Terry Jia <[email protected]>
Co-authored-by: Chenlei Hu <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Chenlei Hu <[email protected]>
Co-authored-by: Comfy Org PR Bot <[email protected]>

Author: 6 people

public/assets/favicon.ico

@@ -5,7 +5,7 @@
         <div class="flex flex-col items-center">
           <i :class="icon" style="font-size: 3rem; margin-bottom: 1rem" />
           <h3>{{ title }}</h3>
-          <p class="whitespace-pre-line text-center">
+          <p :class="textClass" class="whitespace-pre-line text-center">
             {{ message }}
           </p>
           <Button
@@ -29,6 +29,7 @@ const props = defineProps<{
   icon?: string
   title: string
   message: string
+  textClass?: string
   buttonLabel?: string
 }>()
 

public/assets/images/Comfy_Logo_x32.png

@@ -0,0 +1,106 @@
+import { mount } from '@vue/test-utils'
+import Avatar from 'primevue/avatar'
+import PrimeVue from 'primevue/config'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createApp, nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import UserAvatar from './UserAvatar.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      auth: {
+        login: {
+          userAvatar: 'User Avatar'
+        }
+      }
+    }
+  }
+})
+
+describe('UserAvatar', () => {
+  beforeEach(() => {
+    const app = createApp({})
+    app.use(PrimeVue)
+  })
+
+  const mountComponent = (props: any = {}) => {
+    return mount(UserAvatar, {
+      global: {
+        plugins: [PrimeVue, i18n],
+        components: { Avatar }
+      },
+      props
+    })
+  }
+
+  it('renders correctly with photo Url', async () => {
+    const wrapper = mountComponent({
+      photoUrl: 'https://example.com/avatar.jpg'
+    })
+
+    const avatar = wrapper.findComponent(Avatar)
+    expect(avatar.exists()).toBe(true)
+    expect(avatar.props('image')).toBe('https://example.com/avatar.jpg')
+    expect(avatar.props('icon')).toBeNull()
+  })
+
+  it('renders with default icon when no photo Url is provided', () => {
+    const wrapper = mountComponent({
+      photoUrl: undefined
+    })
+
+    const avatar = wrapper.findComponent(Avatar)
+    expect(avatar.exists()).toBe(true)
+    expect(avatar.props('image')).toBeNull()
+    expect(avatar.props('icon')).toBe('pi pi-user')
+  })
+
+  it('renders with default icon when provided photo Url is null', () => {
+    const wrapper = mountComponent({
+      photoUrl: null
+    })
+
+    const avatar = wrapper.findComponent(Avatar)
+    expect(avatar.exists()).toBe(true)
+    expect(avatar.props('image')).toBeNull()
+    expect(avatar.props('icon')).toBe('pi pi-user')
+  })
+
+  it('falls back to icon when image fails to load', async () => {
+    const wrapper = mountComponent({
+      photoUrl: 'https://example.com/broken-image.jpg'
+    })
+
+    const avatar = wrapper.findComponent(Avatar)
+    expect(avatar.props('icon')).toBeNull()
+
+    // Simulate image load error
+    avatar.vm.$emit('error')
+    await nextTick()
+
+    expect(avatar.props('icon')).toBe('pi pi-user')
+  })
+
+  it('uses provided ariaLabel', () => {
+    const wrapper = mountComponent({
+      photoUrl: 'https://example.com/avatar.jpg',
+      ariaLabel: 'Custom Label'
+    })
+
+    const avatar = wrapper.findComponent(Avatar)
+    expect(avatar.attributes('aria-label')).toBe('Custom Label')
+  })
+
+  it('falls back to i18n translation when no ariaLabel is provided', () => {
+    const wrapper = mountComponent({
+      photoUrl: 'https://example.com/avatar.jpg'
+    })
+
+    const avatar = wrapper.findComponent(Avatar)
+    expect(avatar.attributes('aria-label')).toBe('User Avatar')
+  })
+})

public/assets/images/comfy-logo-mono.svg

@@ -0,0 +1,25 @@
+<template>
+  <Avatar
+    :image="photoUrl ?? undefined"
+    :icon="hasAvatar ? undefined : 'pi pi-user'"
+    shape="circle"
+    :aria-label="ariaLabel ?? $t('auth.login.userAvatar')"
+    @error="handleImageError"
+  />
+</template>
+
+<script setup lang="ts">
+import Avatar from 'primevue/avatar'
+import { computed, ref } from 'vue'
+
+const { photoUrl, ariaLabel } = defineProps<{
+  photoUrl?: string | null
+  ariaLabel?: string
+}>()
+
+const imageError = ref(false)
+const handleImageError = () => {
+  imageError.value = true
+}
+const hasAvatar = computed(() => photoUrl && !imageError.value)
+</script>

public/assets/images/comfy-logo-single.svg

@@ -5,6 +5,7 @@
       icon="pi pi-exclamation-circle"
       :title="title"
       :message="error.exceptionMessage"
+      :text-class="'break-words max-w-[60vw]'"
     />
     <template v-if="error.extensionFile">
       <span>{{ t('errorDialog.extensionFileHint') }}:</span>