Add User Feedback buttons

browser_tests/dialog.spec.ts

@@ -165,3 +165,52 @@ test.describe('Settings', () => {
     expect(request.postData()).toContain(JSON.stringify(expectedSetting))
   })
 })
+
+test.describe('Feedback dialog', () => {
+  test('Should open from topmenu help command', async ({ comfyPage }) => {
+    // Open feedback dialog from top menu
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    // Verify feedback dialog content is visible
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+    await expect(feedbackHeader).toBeVisible()
+  })
+
+  test('Should close when close button clicked', async ({ comfyPage }) => {
+    // Open feedback dialog
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+
+    // Close feedback dialog
+    await comfyPage.page
+      .getByLabel('', { exact: true })
+      .getByLabel('Close')
+      .click()
+    await feedbackHeader.waitFor({ state: 'hidden' })
+
+    // Verify dialog is closed
+    await expect(feedbackHeader).not.toBeVisible()
+  })
+
+  test('Should update rating icons when selecting rating', async ({
+    comfyPage
+  }) => {
+    // Open feedback dialog
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    // Test rating interaction
+    const stars = comfyPage.page.locator('.pi-star')
+    await stars.nth(3).click()
+    await expect(
+      comfyPage.page.getByLabel('Rating').locator('i').nth(3)
+    ).toHaveClass(/pi-star-fill/)
+  })
+})

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -28,6 +28,7 @@
     </template>
     <ReportIssuePanel
       v-if="sendReportOpen"
+      :title="$t('issueReport.submitErrorReport')"
       error-type="graphExecutionError"
       :extra-fields="[stackTraceField]"
       :tags="{ exceptionMessage: props.error.exception_message }"

src/components/dialog/content/FeedbackDialogContent.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="p-8 h-full">
+    <Card>
+      <template #content>
+        <div class="flex flex-col items-center">
+          <h3 class="text-4xl">{{ $t('menuLabels.Feedback') }}</h3>
+          <Rating
+            v-model="rating"
+            class="flex justify-center"
+            :aria-label="$t('issueReport.rating')"
+          >
+            <template #onicon>
+              <i class="pi pi-star-fill text-4xl"></i>
+            </template>
+            <template #officon>
+              <i class="pi pi-star text-4xl hover:text-highlight" />
+            </template>
+          </Rating>
+        </div>
+      </template>
+    </Card>
+  </div>
+  <div>
+    <ReportIssuePanel
+      error-type="Feedback"
+      :title="$t('issueReport.feedbackTitle')"
+      :extra-fields="[ratingField]"
+      :default-fields="['SystemStats', 'Settings']"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Card from 'primevue/card'
+import Rating from 'primevue/rating'
+import { computed, ref } from 'vue'
+
+import ReportIssuePanel from '@/components/dialog/content/error/ReportIssuePanel.vue'
+import type { ReportField } from '@/types/issueReportTypes'
+
+const rating = ref(null)
+
+const ratingField = computed<ReportField>(() => {
+  return {
+    label: 'rating',
+    value: 'Rating',
+    optIn: false,
+    data: {
+      rating: rating.value
+    }
+  }
+})
+</script>

src/components/dialog/content/__tests__/FeedbackDialogContent.spec.ts

@@ -0,0 +1,154 @@
+// @ts-strict-ignore
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+import type { ReportField } from '@/types/issueReportTypes'
+
+import FeedbackDialogContent from '../FeedbackDialogContent.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: enMessages
+  }
+})
+
+vi.mock('@/components/error/ReportIssuePanel.vue', () => ({
+  default: {
+    name: 'ReportIssuePanel',
+    props: ['errorType', 'title', 'extraFields', 'defaultFields'],
+    template: '<div><slot /></div>'
+  }
+}))
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: vi.fn(() => ({
+    add: vi.fn()
+  }))
+}))
+
+describe('FeedbackDialogContent', () => {
+  beforeAll(() => {
+    const app = createApp({})
+    app.use(PrimeVue)
+    app.use(i18n)
+  })
+
+  const mountComponent = (): any =>
+    mount(FeedbackDialogContent, {
+      global: {
+        plugins: [PrimeVue, i18n],
+        directives: { tooltip: Tooltip }
+      }
+    })
+
+  describe('Rating functionality', () => {
+    it('initializes rating to null', () => {
+      const wrapper = mountComponent()
+      expect(wrapper.vm.rating).toBeNull()
+    })
+
+    it('updates rating when a star is clicked', async () => {
+      const wrapper = mountComponent()
+      const ratingComponent = wrapper.findComponent({ name: 'Rating' })
+
+      // Click the 4th start (out of 5)
+      await ratingComponent.findAll('i').at(3)?.trigger('click')
+
+      // Verify the rating has been updated
+      expect(wrapper.vm.rating).toBe(4)
+    })
+  })
+
+  describe('ReportIssuePanel integration', () => {
+    it('passes correct props to ReportIssuePanel', () => {
+      const wrapper = mountComponent()
+      const reportIssuePanel = wrapper.findComponent({
+        name: 'ReportIssuePanel'
+      })
+
+      expect(reportIssuePanel.props()).toMatchObject({
+        errorType: 'Feedback',
+        title: enMessages['issueReport']['feedbackTitle'],
+        defaultFields: ['SystemStats', 'Settings']
+      })
+    })
+
+    it('includes rating in extraFields when updated', async () => {
+      const wrapper = mountComponent()
+      const reportIssuePanel = wrapper.findComponent({
+        name: 'ReportIssuePanel'
+      })
+
+      // Click the 5th star (out of 5)
+      const ratingComponent = wrapper.findComponent({ name: 'Rating' })
+      await ratingComponent.findAll('i').at(4)?.trigger('click')
+
+      const expectedExtraFields: ReportField[] = [
+        {
+          label: 'rating',
+          value: 'Rating',
+          optIn: false,
+          data: { rating: 5 }
+        }
+      ]
+      expect(reportIssuePanel.props('extraFields')).toEqual(expectedExtraFields)
+    })
+
+    it('includes rating in extraFields as null when no rating is selected', () => {
+      const wrapper = mountComponent()
+      const reportIssuePanel = wrapper.findComponent({
+        name: 'ReportIssuePanel'
+      })
+
+      const expectedExtraFields: ReportField[] = [
+        {
+          label: 'rating',
+          value: 'Rating',
+          optIn: false,
+          data: { rating: null }
+        }
+      ]
+      expect(reportIssuePanel.props('extraFields')).toEqual(expectedExtraFields)
+    })
+
+    it('resets the rating to null on re-render', async () => {
+      const wrapper = mountComponent()
+
+      // Simulate rating selection
+      wrapper.vm.rating = 4
+      expect(wrapper.vm.rating).toBe(4)
+
+      // Re-mount the component
+      wrapper.unmount()
+      const newWrapper = mountComponent()
+
+      // Verify rating is reset
+      expect(newWrapper.vm.rating).toBeNull()
+    })
+
+    it('passes all expected extraFields to ReportIssuePanel', () => {
+      const wrapper = mountComponent()
+      const reportIssuePanel = wrapper.findComponent({
+        name: 'ReportIssuePanel'
+      })
+
+      const extraFields = reportIssuePanel.props('extraFields') as ReportField[]
+
+      expect(extraFields).toContainEqual(
+        expect.objectContaining({
+          label: 'rating',
+          value: 'Rating',
+          optIn: false,
+          data: { rating: null }
+        })
+      )
+    })
+  })
+})

src/components/dialog/content/error/ReportIssuePanel.vue

@@ -2,7 +2,7 @@
   <Panel>
     <template #header>
       <div class="flex items-center gap-2">
-        <span class="font-bold">{{ $t('issueReport.submitErrorReport') }}</span>
+        <span class="font-bold">{{ title }}</span>
       </div>
     </template>
     <template #footer>
@@ -19,6 +19,7 @@
     </template>
     <div class="p-4 mt-4 border border-round surface-border shadow-1">
       <CheckboxGroup
+        v-if="reportCheckboxes.length"
         v-model="selection"
         class="gap-4 mb-4"
         :checkboxes="reportCheckboxes"
@@ -76,6 +77,7 @@ const props = defineProps<{
   defaultFields?: DefaultField[]
   extraFields?: ReportField[]
   tags?: Record<string, string>
+  title?: string
 }>()
 const {
   defaultFields = ['Workflow', 'Logs', 'SystemStats', 'Settings'],
@@ -116,7 +118,9 @@ const defaultReportCheckboxes = [
   { label: t('g.settings'), value: 'Settings' }
 ]
 const reportCheckboxes = computed(() => [
-  ...(props.extraFields?.map(({ label, value }) => ({ label, value })) ?? []),
+  ...(props.extraFields
+    ?.filter(({ optIn }) => optIn)
+    .map(({ label, value }) => ({ label, value })) ?? []),
   ...defaultReportCheckboxes.filter(({ value }) =>
     defaultFields.includes(value as DefaultField)
   )

src/components/dialog/content/error/__tests__/ReportIssuePanel.spec.ts

@@ -21,6 +21,8 @@ type ReportIssuePanelProps = {
   errorType: string
   defaultFields?: DefaultField[]
   extraFields?: ReportField[]
+  tags?: Record<string, string>
+  title?: string
 }
 
 const i18n = createI18n({

src/constants/coreMenuCommands.ts

@@ -22,5 +22,5 @@ export const CORE_MENU_COMMANDS = [
       'Comfy.Help.OpenComfyOrgDiscord'
     ]
   ],
-  [['Help'], ['Comfy.Help.AboutComfyUI']]
+  [['Help'], ['Comfy.Help.AboutComfyUI', 'Comfy.Feedback']]
 ]

src/extensions/core/electronAdapter.ts

@@ -114,14 +114,6 @@ import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
           electronAPI.openDevTools()
         }
       },
-      {
-        id: 'Comfy-Desktop.OpenFeedbackPage',
-        label: 'Feedback',
-        icon: 'pi pi-envelope',
-        function() {
-          window.open('https://forum.comfy.org/c/v1-feedback/', '_blank')
-        }
-      },
       {
         id: 'Comfy-Desktop.OpenUserGuide',
         label: 'Desktop User Guide',
@@ -176,10 +168,7 @@ import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
     menuCommands: [
       {
         path: ['Help'],
-        commands: [
-          'Comfy-Desktop.OpenUserGuide',
-          'Comfy-Desktop.OpenFeedbackPage'
-        ]
+        commands: ['Comfy-Desktop.OpenUserGuide']
       },
       {
         path: ['Help'],

src/hooks/coreCommandHooks.ts

@@ -538,6 +538,15 @@ export function useCoreCommands(): ComfyCommand[] {
         if (workflowStore.activeWorkflow)
           workflowService.closeWorkflow(workflowStore.activeWorkflow)
       }
+    },
+    {
+      id: 'Comfy.Feedback',
+      icon: 'pi pi-megaphone',
+      label: 'Give Feedback',
+      versionAdded: '1.7.15',
+      function: () => {
+        dialogService.showFeedbackDialog()
+      }
     }
   ]
 }

src/locales/en/commands.json

@@ -20,9 +20,6 @@
   "Comfy-Desktop_OpenDevTools": {
     "label": "Open DevTools"
   },
-  "Comfy-Desktop_OpenFeedbackPage": {
-    "label": "Feedback"
-  },
   "Comfy-Desktop_OpenUserGuide": {
     "label": "Desktop User Guide"
   },
@@ -86,6 +83,9 @@
   "Comfy_ExportWorkflowAPI": {
     "label": "Export Workflow (API Format)"
   },
+  "Comfy_Feedback": {
+    "label": "Give Feedback"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Fit Group To Contents"
   },