Add convert to subgraph toolbox button

src/components/graph/SelectionToolbox.vue

@@ -11,6 +11,7 @@
     <BypassButton />
     <PinButton />
     <MaskEditorButton />
+    <ConvertToSubgraphButton />
     <DeleteButton />
     <RefreshButton />
     <ExtensionCommandButton
@@ -28,6 +29,7 @@ import { computed } from 'vue'
 
 import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
+import ConvertToSubgraphButton from '@/components/graph/selectionToolbox/ConvertToSubgraphButton.vue'
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <Button
+    v-tooltip.top="{
+      value: t('commands.Comfy_Graph_ConvertToSubgraph.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon="pi pi-box"
+    @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+</script>

tests-ui/tests/components/graph/SelectionToolbox.spec.ts

@@ -0,0 +1,127 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import Panel from 'primevue/panel'
+import { describe, expect, it, vi } from 'vitest'
+
+import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
+
+// Mock all child components
+vi.mock('@/components/graph/selectionToolbox/BypassButton.vue', () => ({
+  default: {
+    name: 'BypassButton',
+    render: () => null
+  }
+}))
+
+vi.mock('@/components/graph/selectionToolbox/ColorPickerButton.vue', () => ({
+  default: {
+    name: 'ColorPickerButton',
+    render: () => null
+  }
+}))
+
+vi.mock('@/components/graph/selectionToolbox/DeleteButton.vue', () => ({
+  default: {
+    name: 'DeleteButton',
+    render: () => null
+  }
+}))
+
+vi.mock('@/components/graph/selectionToolbox/ExecuteButton.vue', () => ({
+  default: {
+    name: 'ExecuteButton',
+    render: () => null
+  }
+}))
+
+vi.mock('@/components/graph/selectionToolbox/MaskEditorButton.vue', () => ({
+  default: {
+    name: 'MaskEditorButton',
+    render: () => null
+  }
+}))
+
+vi.mock('@/components/graph/selectionToolbox/PinButton.vue', () => ({
+  default: {
+    name: 'PinButton',
+    render: () => null
+  }
+}))
+
+vi.mock('@/components/graph/selectionToolbox/RefreshButton.vue', () => ({
+  default: {
+    name: 'RefreshButton',
+    render: () => null
+  }
+}))
+
+vi.mock(
+  '@/components/graph/selectionToolbox/ConvertToSubgraphButton.vue',
+  () => ({
+    default: {
+      name: 'ConvertToSubgraphButton',
+      render: () => null
+    }
+  })
+)
+
+vi.mock(
+  '@/components/graph/selectionToolbox/ExtensionCommandButton.vue',
+  () => ({
+    default: {
+      name: 'ExtensionCommandButton',
+      props: ['command'],
+      render: () => null
+    }
+  })
+)
+
+// Mock extension service and stores
+vi.mock('@/services/extensionService', () => ({
+  useExtensionService: vi.fn(() => ({
+    invokeExtensions: vi.fn(() => [])
+  }))
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: vi.fn(() => ({
+    getCommand: vi.fn()
+  }))
+}))
+
+vi.mock('@/stores/graphStore', () => ({
+  useCanvasStore: vi.fn(() => ({
+    selectedItems: []
+  }))
+}))
+
+describe('SelectionToolbox', () => {
+  const mountComponent = () => {
+    return mount(SelectionToolbox, {
+      global: {
+        plugins: [PrimeVue],
+        components: { Panel }
+      }
+    })
+  }
+
+  it('renders all toolbox buttons', () => {
+    const wrapper = mountComponent()
+
+    // Verify all buttons are rendered
+    expect(wrapper.findComponent({ name: 'ExecuteButton' }).exists()).toBe(true)
+    expect(wrapper.findComponent({ name: 'ColorPickerButton' }).exists()).toBe(
+      true
+    )
+    expect(wrapper.findComponent({ name: 'BypassButton' }).exists()).toBe(true)
+    expect(wrapper.findComponent({ name: 'PinButton' }).exists()).toBe(true)
+    expect(wrapper.findComponent({ name: 'MaskEditorButton' }).exists()).toBe(
+      true
+    )
+    expect(wrapper.findComponent({ name: 'DeleteButton' }).exists()).toBe(true)
+    expect(wrapper.findComponent({ name: 'RefreshButton' }).exists()).toBe(true)
+    expect(
+      wrapper.findComponent({ name: 'ConvertToSubgraphButton' }).exists()
+    ).toBe(true)
+  })
+})

tests-ui/tests/components/graph/selectionToolbox/ConvertToSubgraphButton.spec.ts

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils'
+import Button from 'primevue/button'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { describe, expect, it, vi } from 'vitest'
+
+import ConvertToSubgraphButton from '@/components/graph/selectionToolbox/ConvertToSubgraphButton.vue'
+
+// Mock the command store
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: vi.fn(() => ({
+    execute: vi.fn()
+  }))
+}))
+
+// Mock i18n
+vi.mock('vue-i18n', () => ({
+  useI18n: vi.fn(() => ({
+    t: vi.fn((key) => key)
+  }))
+}))
+
+describe('ConvertToSubgraphButton', () => {
+  const mountComponent = () => {
+    return mount(ConvertToSubgraphButton, {
+      global: {
+        plugins: [PrimeVue],
+        directives: { tooltip: Tooltip },
+        components: { Button }
+      }
+    })
+  }
+
+  it('renders correctly', () => {
+    const wrapper = mountComponent()
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.find('.pi-box').exists()).toBe(true)
+  })
+
+  it('has the correct tooltip', () => {
+    const wrapper = mountComponent()
+    const buttonElement = wrapper.find('button')
+
+    // Check that the tooltip directive is applied
+    expect(buttonElement.attributes('data-pd-tooltip')).toBe('true')
+  })
+})