refactor: rename StatusBadge to Badge

browser_tests/assets/vueNodes/overlapping-with-text.json

@@ -0,0 +1,139 @@
+{
+  "id": "b7e1a3f0-text-bleed-test",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CLIPTextEncode",
+      "pos": [500, 300],
+      "size": [240, 155],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "localized_name": "clip",
+          "name": "clip",
+          "type": "CLIP",
+          "link": null
+        },
+        {
+          "localized_name": "text",
+          "name": "text",
+          "type": "STRING",
+          "widget": { "name": "text" },
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "localized_name": "CONDITIONING",
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": null
+        }
+      ],
+      "properties": { "Node name for S&R": "CLIPTextEncode" },
+      "widgets_values": ["beautiful scenery nature glass bottle landscape"]
+    },
+    {
+      "id": 2,
+      "type": "KSampler",
+      "pos": [500, 300],
+      "size": [428, 437],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "localized_name": "model",
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "localized_name": "positive",
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "localized_name": "negative",
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "localized_name": "latent_image",
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "localized_name": "seed",
+          "name": "seed",
+          "type": "INT",
+          "widget": { "name": "seed" },
+          "link": null
+        },
+        {
+          "localized_name": "steps",
+          "name": "steps",
+          "type": "INT",
+          "widget": { "name": "steps" },
+          "link": null
+        },
+        {
+          "localized_name": "cfg",
+          "name": "cfg",
+          "type": "FLOAT",
+          "widget": { "name": "cfg" },
+          "link": null
+        },
+        {
+          "localized_name": "sampler_name",
+          "name": "sampler_name",
+          "type": "COMBO",
+          "widget": { "name": "sampler_name" },
+          "link": null
+        },
+        {
+          "localized_name": "scheduler",
+          "name": "scheduler",
+          "type": "COMBO",
+          "widget": { "name": "scheduler" },
+          "link": null
+        },
+        {
+          "localized_name": "denoise",
+          "name": "denoise",
+          "type": "FLOAT",
+          "widget": { "name": "denoise" },
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "localized_name": "LATENT",
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": { "Node name for S&R": "KSampler" },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [-200, -100]
+    }
+  },
+  "version": 0.4
+}

browser_tests/tests/vueNodes/interactions/node/textBleedThrough.spec.ts

@@ -0,0 +1,23 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import { fitToViewInstant } from '../../../../helpers/fitToView'
+
+test.describe('Vue Node Text Bleed-Through', { tag: '@screenshot' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('vueNodes/overlapping-with-text')
+    await comfyPage.vueNodes.waitForNodes()
+    await fitToViewInstant(comfyPage)
+  })
+
+  test('overlapping node should not show text from node beneath', async ({
+    comfyPage
+  }) => {
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'node-text-no-bleed-through.png'
+    )
+  })
+})

src/components/actionbar/ComfyActionbar.test.ts

@@ -44,7 +44,7 @@ const mountActionbar = (showRunProgressBar: boolean) => {
           name: 'Panel',
           template: '<div><slot /></div>'
         },
-        StatusBadge: true,
+        Badge: true,
         ComfyRunButton: {
           name: 'ComfyRunButton',
           template: '<button type="button">Run</button>'

src/components/actionbar/ComfyActionbar.vue

@@ -59,7 +59,7 @@
           <span class="text-sm font-normal tabular-nums">
             {{ activeJobsLabel }}
           </span>
-          <StatusBadge
+          <Badge
             v-if="activeJobsCount > 0"
             data-testid="active-jobs-indicator"
             variant="dot"
@@ -104,7 +104,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 import type { ComponentPublicInstance } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import StatusBadge from '@/components/common/StatusBadge.vue'
+import Badge from '@/components/common/Badge.vue'
 import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'

src/components/common/Badge.stories.ts

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import StatusBadge from './StatusBadge.vue'
+import Badge from './Badge.vue'
 
 const meta = {
-  title: 'Components/Badges/StatusBadge',
-  component: StatusBadge,
+  title: 'Components/Badges/Badge',
+  component: Badge,
   tags: ['autodocs'],
   argTypes: {
     label: { control: 'text' },
@@ -21,7 +21,7 @@ const meta = {
     label: 'NEW',
     severity: 'default'
   }
-} satisfies Meta<typeof StatusBadge>
+} satisfies Meta<typeof Badge>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -65,14 +65,14 @@ export const Circle: Story = {
 
 export const AllSeveritiesLabel: Story = {
   render: () => ({
-    components: { StatusBadge },
+    components: { Badge },
     template: `
       <div class="flex items-center gap-2">
-        <StatusBadge label="NEW" severity="default" />
-        <StatusBadge label="NEW" severity="secondary" />
-        <StatusBadge label="NEW" severity="warn" />
-        <StatusBadge label="NEW" severity="danger" />
-        <StatusBadge label="NEW" severity="contrast" />
+        <Badge label="NEW" severity="default" />
+        <Badge label="NEW" severity="secondary" />
+        <Badge label="NEW" severity="warn" />
+        <Badge label="NEW" severity="danger" />
+        <Badge label="NEW" severity="contrast" />
       </div>
     `
   })
@@ -80,14 +80,14 @@ export const AllSeveritiesLabel: Story = {
 
 export const AllSeveritiesDot: Story = {
   render: () => ({
-    components: { StatusBadge },
+    components: { Badge },
     template: `
       <div class="flex items-center gap-2">
-        <StatusBadge variant="dot" severity="default" />
-        <StatusBadge variant="dot" severity="secondary" />
-        <StatusBadge variant="dot" severity="warn" />
-        <StatusBadge variant="dot" severity="danger" />
-        <StatusBadge variant="dot" severity="contrast" />
+        <Badge variant="dot" severity="default" />
+        <Badge variant="dot" severity="secondary" />
+        <Badge variant="dot" severity="warn" />
+        <Badge variant="dot" severity="danger" />
+        <Badge variant="dot" severity="contrast" />
       </div>
     `
   })
@@ -95,19 +95,19 @@ export const AllSeveritiesDot: Story = {
 
 export const AllVariants: Story = {
   render: () => ({
-    components: { StatusBadge },
+    components: { Badge },
     template: `
       <div class="flex items-center gap-4">
         <div class="flex flex-col items-center gap-1">
-          <StatusBadge label="NEW" variant="label" />
+          <Badge label="NEW" variant="label" />
           <span class="text-xs text-muted">label</span>
         </div>
         <div class="flex flex-col items-center gap-1">
-          <StatusBadge variant="dot" severity="danger" />
+          <Badge variant="dot" severity="danger" />
           <span class="text-xs text-muted">dot</span>
         </div>
         <div class="flex flex-col items-center gap-1">
-          <StatusBadge label="5" variant="circle" />
+          <Badge label="5" variant="circle" />
           <span class="text-xs text-muted">circle</span>
         </div>
       </div>

src/components/common/Badge.vue

@@ -3,8 +3,8 @@ import { computed } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
-import { statusBadgeVariants } from './statusBadge.variants'
-import type { StatusBadgeVariants } from './statusBadge.variants'
+import { badgeVariants } from './badge.variants'
+import type { BadgeVariants } from './badge.variants'
 
 const {
   label,
@@ -13,14 +13,14 @@ const {
   class: className
 } = defineProps<{
   label?: string | number
-  severity?: StatusBadgeVariants['severity']
-  variant?: StatusBadgeVariants['variant']
+  severity?: BadgeVariants['severity']
+  variant?: BadgeVariants['variant']
   class?: string
 }>()
 
 const badgeClass = computed(() =>
   cn(
-    statusBadgeVariants({
+    badgeVariants({
       severity,
       variant: variant ?? (label == null ? 'dot' : 'label')
     }),

src/components/common/TreeExplorerTreeNode.test.ts

@@ -1,6 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
-import StatusBadge from '@/components/common/StatusBadge.vue'
+import Badge from '@/components/common/Badge.vue'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
@@ -47,7 +47,7 @@ describe('TreeExplorerTreeNode', () => {
     const wrapper = mount(TreeExplorerTreeNode, {
       props: { node: mockNode },
       global: {
-        components: { EditableText, StatusBadge },
+        components: { EditableText, Badge },
         plugins: [createTestingPinia(), i18n],
         provide: {
           [InjectKeyHandleEditLabelFunction]: mockHandleEditLabel
@@ -61,7 +61,7 @@ describe('TreeExplorerTreeNode', () => {
     expect(wrapper.findComponent(EditableText).props('modelValue')).toBe(
       'Test Node'
     )
-    expect(wrapper.findComponent(StatusBadge).props('label')).toBe('3')
+    expect(wrapper.findComponent(Badge).props('label')).toBe('3')
   })
 
   it('makes node label editable when renamingEditingNode matches', async () => {
@@ -73,7 +73,7 @@ describe('TreeExplorerTreeNode', () => {
         }
       },
       global: {
-        components: { EditableText, StatusBadge, InputText },
+        components: { EditableText, Badge, InputText },
         plugins: [createTestingPinia(), i18n, PrimeVue],
         provide: {
           [InjectKeyHandleEditLabelFunction]: mockHandleEditLabel
@@ -96,7 +96,7 @@ describe('TreeExplorerTreeNode', () => {
         }
       },
       global: {
-        components: { EditableText, StatusBadge, InputText },
+        components: { EditableText, Badge, InputText },
         provide: { [InjectKeyHandleEditLabelFunction]: handleEditLabelMock },
         plugins: [createTestingPinia(), i18n, PrimeVue]
       }

src/components/common/TreeExplorerTreeNode.vue

@@ -21,7 +21,7 @@
         />
         <slot name="after-label" :node="props.node" />
       </span>
-      <StatusBadge
+      <Badge
         v-if="showNodeBadgeText"
         :label="nodeBadgeText"
         severity="secondary"
@@ -39,7 +39,7 @@
 
 <script setup lang="ts" generic="T">
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
-import StatusBadge from '@/components/common/StatusBadge.vue'
+import Badge from '@/components/common/Badge.vue'
 import { computed, inject, ref } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'

src/components/common/badge.variants.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
-export const statusBadgeVariants = cva({
+export const badgeVariants = cva({
   base: 'inline-flex items-center justify-center rounded-full',
   variants: {
     severity: {
@@ -23,4 +23,4 @@ export const statusBadgeVariants = cva({
   }
 })
 
-export type StatusBadgeVariants = VariantProps<typeof statusBadgeVariants>
+export type BadgeVariants = VariantProps<typeof badgeVariants>

src/components/dialog/content/setting/UsageLogsTable.test.ts

@@ -1,6 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
-import StatusBadge from '@/components/common/StatusBadge.vue'
+import Badge from '@/components/common/Badge.vue'
 import Button from '@/components/ui/button/Button.vue'
 import Column from 'primevue/column'
 import PrimeVue from 'primevue/config'
@@ -163,7 +163,7 @@ describe('UsageLogsTable', () => {
         components: {
           DataTable,
           Column,
-          StatusBadge,
+          Badge,
           Button,
           Message,
           ProgressSpinner
@@ -240,7 +240,7 @@ describe('UsageLogsTable', () => {
       vm.events = mockEventsResponse.events
       await nextTick()
 
-      const badges = wrapper.findAllComponents(StatusBadge)
+      const badges = wrapper.findAllComponents(Badge)
       expect(badges.length).toBeGreaterThan(0)
 
       // Check if formatEventType and getEventSeverity are called

src/components/dialog/content/setting/UsageLogsTable.vue

@@ -19,7 +19,7 @@
     >
       <Column field="event_type" :header="$t('credits.eventType')">
         <template #body="{ data }">
-          <StatusBadge
+          <Badge
             :label="customerEventService.formatEventType(data.event_type)"
             :severity="customerEventService.getEventSeverity(data.event_type)"
           />
@@ -91,7 +91,7 @@
 </template>
 
 <script setup lang="ts">
-import StatusBadge from '@/components/common/StatusBadge.vue'
+import Badge from '@/components/common/Badge.vue'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Message from 'primevue/message'

src/components/toast/ProgressToastItem.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Loader from '@/components/loader/Loader.vue'
-import StatusBadge from '@/components/common/StatusBadge.vue'
+import Badge from '@/components/common/Badge.vue'
 import type { AssetDownload } from '@/stores/assetDownloadStore'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -40,11 +40,11 @@ const isPending = computed(() => job.status === 'created')
         <i
           class="icon-[lucide--circle-alert] size-4 text-destructive-background"
         />
-        <StatusBadge :label="t('progressToast.failed')" severity="danger" />
+        <Badge :label="t('progressToast.failed')" severity="danger" />
       </template>
 
       <template v-else-if="isCompleted">
-        <StatusBadge :label="t('progressToast.finished')" severity="contrast" />
+        <Badge :label="t('progressToast.finished')" severity="contrast" />
       </template>
 
       <template v-else-if="isRunning">

src/components/widget/nav/NavItem.vue

@@ -20,7 +20,7 @@
     <span ref="textRef" class="min-w-0 truncate">
       <slot />
     </span>
-    <StatusBadge
+    <Badge
       v-if="badge !== undefined"
       :label="String(badge)"
       severity="contrast"
@@ -33,7 +33,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import StatusBadge from '@/components/common/StatusBadge.vue'
+import Badge from '@/components/common/Badge.vue'
 import type { NavItemData } from '@/types/navTypes'
 
 import NavIcon from './NavIcon.vue'

src/platform/assets/components/AssetCard.vue

@@ -119,7 +119,7 @@
           @click.stop="handleSelect"
         >
           {{ $t('g.use') }}
-          <StatusBadge
+          <Badge
             v-if="isNewlyImported"
             severity="contrast"
             class="absolute -top-0.5 -right-0.5"
@@ -137,7 +137,7 @@ import { useI18n } from 'vue-i18n'
 
 import IconGroup from '@/components/button/IconGroup.vue'
 import MoreButton from '@/components/button/MoreButton.vue'
-import StatusBadge from '@/components/common/StatusBadge.vue'
+import Badge from '@/components/common/Badge.vue'
 import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
 import Button from '@/components/ui/button/Button.vue'
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'

src/platform/workflow/sharing/components/publish/ComfyHubPublishNav.vue

@@ -28,7 +28,7 @@
           "
           @click="$emit('stepClick', step.name)"
         >
-          <StatusBadge
+          <Badge
             :label="step.number"
             variant="circle"
             severity="contrast"
@@ -67,7 +67,7 @@ import { computed } from 'vue'
 
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
 
-import StatusBadge from '@/components/common/StatusBadge.vue'
+import Badge from '@/components/common/Badge.vue'
 import Button from '@/components/ui/button/Button.vue'
 import type { ComfyHubPublishStep } from '@/platform/workflow/sharing/composables/useComfyHubPublishWizard'
 import { cn } from '@/utils/tailwindUtil'

src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue

@@ -80,7 +80,7 @@
                   <span class="text-sm font-bold text-text-primary">
                     {{ subscriptionTierName }}
                   </span>
-                  <StatusBadge
+                  <Badge
                     v-if="isCancelled"
                     :label="$t('subscription.canceled')"
                     severity="warn"
@@ -365,7 +365,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useToast } from 'primevue/usetoast'
 
-import StatusBadge from '@/components/common/StatusBadge.vue'
+import Badge from '@/components/common/Badge.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useBillingOperationStore } from '@/platform/workspace/stores/billingOperationStore'