Add issue report dialog service (#2284)

Co-authored-by: huchenlei <huchenlei@proton.me>

src/components/dialog/content/FeedbackDialogContent.vue

@@ -1,27 +0,0 @@
-<template>
-  <div class="p-8 h-full min-w-96">
-    <div class="flex flex-col items-center">
-      <h3 class="text-4xl">{{ $t('g.feedback') }}</h3>
-    </div>
-  </div>
-  <Divider />
-  <div>
-    <ReportIssuePanel
-      error-type="Feedback"
-      :title="$t('issueReport.feedbackTitle')"
-      :default-fields="['SystemStats', 'Settings']"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import Divider from 'primevue/divider'
-
-import ReportIssuePanel from '@/components/dialog/content/error/ReportIssuePanel.vue'
-</script>
-
-<style scoped>
-:deep(.p-panel) {
-  @apply border-none;
-}
-</style>

src/components/dialog/content/IssueReportDialogContent.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="p-2 h-full" aria-labelledby="issue-report-title">
+    <Panel
+      :pt="{
+        root: 'border-none',
+        content: 'p-0'
+      }"
+    >
+      <template #header>
+        <header class="flex flex-col items-center">
+          <h2 id="issue-report-title" class="text-4xl">{{ title }}</h2>
+          <span v-if="subtitle" class="text-muted mt-2">{{ subtitle }}</span>
+        </header>
+      </template>
+      <ReportIssuePanel v-bind="panelProps" :pt="{ root: 'border-none' }" />
+    </Panel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Panel from 'primevue/panel'
+
+import type { IssueReportPanelProps } from '@/types/issueReportTypes'
+
+import ReportIssuePanel from './error/ReportIssuePanel.vue'
+
+defineProps<{
+  title: string
+  subtitle?: string
+  panelProps: IssueReportPanelProps
+}>()
+</script>

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

@@ -67,19 +67,17 @@ import { useI18n } from 'vue-i18n'
 import CheckboxGroup from '@/components/common/CheckboxGroup.vue'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import type { DefaultField, ReportField } from '@/types/issueReportTypes'
+import type {
+  DefaultField,
+  IssueReportPanelProps
+} from '@/types/issueReportTypes'
 
 const ISSUE_NAME = 'User reported issue'
 const DETAILS_MAX_LEN = 5_000
 const CONTACT_MAX_LEN = 320
 
-const props = defineProps<{
-  errorType: string
-  defaultFields?: DefaultField[]
-  extraFields?: ReportField[]
-  tags?: Record<string, string>
-  title?: string
-}>()
+const props = defineProps<IssueReportPanelProps>()
+
 const {
   defaultFields = ['Workflow', 'Logs', 'SystemStats', 'Settings'],
   tags = {}

src/hooks/coreCommandHooks.ts

@@ -9,6 +9,7 @@ import {
   DEFAULT_DARK_COLOR_PALETTE,
   DEFAULT_LIGHT_COLOR_PALETTE
 } from '@/constants/coreColorPalettes'
+import { t } from '@/i18n'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
@@ -543,9 +544,16 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.Feedback',
       icon: 'pi pi-megaphone',
       label: 'Give Feedback',
-      versionAdded: '1.7.15',
+      versionAdded: '1.8.2',
       function: () => {
-        dialogService.showFeedbackDialog()
+        dialogService.showIssueReportDialog({
+          title: t('g.feedback'),
+          panelProps: {
+            errorType: 'Feedback',
+            title: t('issueReport.feedbackTitle'),
+            defaultFields: ['SystemStats', 'Settings']
+          }
+        })
       }
     }
   ]

src/services/dialogService.ts

@@ -1,6 +1,6 @@
 import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
 import ExecutionErrorDialogContent from '@/components/dialog/content/ExecutionErrorDialogContent.vue'
-import FeedbackDialogContent from '@/components/dialog/content/FeedbackDialogContent.vue'
+import IssueReportDialogContent from '@/components/dialog/content/IssueReportDialogContent.vue'
 import LoadWorkflowWarning from '@/components/dialog/content/LoadWorkflowWarning.vue'
 import MissingModelsWarning from '@/components/dialog/content/MissingModelsWarning.vue'
 import PromptDialogContent from '@/components/dialog/content/PromptDialogContent.vue'
@@ -84,12 +84,12 @@ export const useDialogService = () => {
     })
   }
 
-  function showFeedbackDialog(
-    props: InstanceType<typeof FeedbackDialogContent>['$props'] = {}
+  function showIssueReportDialog(
+    props: InstanceType<typeof IssueReportDialogContent>['$props']
   ) {
     dialogStore.showDialog({
-      key: 'global-provide-feedback',
-      component: FeedbackDialogContent,
+      key: 'global-issue-report',
+      component: IssueReportDialogContent,
       props
     })
   }
@@ -171,7 +171,7 @@ export const useDialogService = () => {
     showAboutDialog,
     showExecutionErrorDialog,
     showTemplateWorkflowsDialog,
-    showFeedbackDialog,
+    showIssueReportDialog,
     prompt,
     confirm
   }

src/types/issueReportTypes.ts

@@ -22,3 +22,30 @@ export interface ReportField {
    */
   optIn: boolean
 }
+
+export interface IssueReportPanelProps {
+  /**
+   * The type of error being reported. This is used to categorize the error.
+   */
+  errorType: string
+
+  /**
+   * Which of the default fields to include in the report.
+   */
+  defaultFields?: DefaultField[]
+
+  /**
+   * Additional fields to include in the report.
+   */
+  extraFields?: ReportField[]
+
+  /**
+   * Tags that will be added to the report. Tags are used to further categorize the error.
+   */
+  tags?: Record<string, string>
+
+  /**
+   * The title displayed in the dialog.
+   */
+  title?: string
+}