Require description field to be non-empty when reporting issue from the UI (#3939)

Co-authored-by: github-actions <[email protected]>

Author: christian-byrne

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

@@ -124,12 +124,16 @@
                 :aria-label="$t('issueReport.provideAdditionalDetails')"
               />
               <Message
-                v-if="$field?.error && $field.touched && $field.value"
+                v-if="$field?.error && $field.touched"
                 severity="error"
                 size="small"
                 variant="simple"
               >
-                {{ t('issueReport.validation.maxLength') }}
+                {{
+                  $field.value
+                    ? t('issueReport.validation.maxLength')
+                    : t('issueReport.validation.descriptionRequired')
+                }}
               </Message>
             </FormField>
           </div>

src/locales/en/main.json

@@ -203,7 +203,9 @@
     "validation": {
       "maxLength": "Message too long",
       "invalidEmail": "Please enter a valid email address",
-      "selectIssueType": "Please select an issue type"
+      "selectIssueType": "Please select an issue type",
+      "descriptionRequired": "Description is required",
+      "helpTypeRequired": "Help type is required"
     }
   },
   "color": {

src/locales/es/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "Enviar Reporte de Error (Opcional)",
     "systemStats": "Estadísticas del Sistema",
     "validation": {
+      "descriptionRequired": "Se requiere una descripción",
+      "helpTypeRequired": "Se requiere el tipo de ayuda",
       "invalidEmail": "Por favor ingresa una dirección de correo electrónico válida",
       "maxLength": "Mensaje demasiado largo",
       "selectIssueType": "Por favor, seleccione un tipo de problema"

src/locales/fr/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "Soumettre un rapport d'erreur (Facultatif)",
     "systemStats": "Statistiques du système",
     "validation": {
+      "descriptionRequired": "La description est requise",
+      "helpTypeRequired": "Le type d'aide est requis",
       "invalidEmail": "Veuillez entrer une adresse e-mail valide",
       "maxLength": "Message trop long",
       "selectIssueType": "Veuillez sélectionner un type de problème"

src/locales/ja/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "エラーレポートを提出する（オプション）",
     "systemStats": "システム統計",
     "validation": {
+      "descriptionRequired": "説明は必須です",
+      "helpTypeRequired": "ヘルプの種類は必須です",
       "invalidEmail": "有効なメールアドレスを入力してください",
       "maxLength": "メッセージが長すぎます",
       "selectIssueType": "問題の種類を選択してください"

src/locales/ko/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "오류 보고서 제출 (선택 사항)",
     "systemStats": "시스템 통계",
     "validation": {
+      "descriptionRequired": "설명은 필수입니다",
+      "helpTypeRequired": "도움 유형은 필수입니다",
       "invalidEmail": "유효한 이메일 주소를 입력해 주세요",
       "maxLength": "메시지가 너무 깁니다",
       "selectIssueType": "문제 유형을 선택해 주세요"

src/locales/ru/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "Отправить отчёт об ошибке (необязательно)",
     "systemStats": "Статистика системы",
     "validation": {
+      "descriptionRequired": "Описание обязательно",
+      "helpTypeRequired": "Тип помощи обязателен",
       "invalidEmail": "Пожалуйста, введите действительный адрес электронной почты",
       "maxLength": "Сообщение слишком длинное",
       "selectIssueType": "Пожалуйста, выберите тип проблемы"

src/locales/zh/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "提交错误报告（可选）",
     "systemStats": "系统状态",
     "validation": {
+      "descriptionRequired": "描述为必填项",
+      "helpTypeRequired": "帮助类型为必选项",
       "invalidEmail": "请输入有效的电子邮件地址",
       "maxLength": "消息过长",
       "selectIssueType": "请选择一个问题类型"

src/schemas/issueReportSchema.ts

@@ -1,18 +1,28 @@
 import { z } from 'zod'
 
+import { t } from '@/i18n'
+
 const checkboxField = z.boolean().optional()
 export const issueReportSchema = z
   .object({
     contactInfo: z.string().email().max(320).optional().or(z.literal('')),
-    details: z.string().max(5_000).optional(),
+    details: z
+      .string()
+      .min(1, { message: t('validation.descriptionRequired') })
+      .max(5_000, { message: t('validation.maxLength', { length: 5_000 }) })
+      .optional(),
     helpType: z.string().optional()
   })
   .catchall(checkboxField)
   .refine((data) => Object.values(data).some((value) => value), {
     path: ['details', 'helpType']
   })
   .refine((data) => data.helpType !== undefined && data.helpType !== '', {
-    message: 'Help type is required',
+    message: t('issueReport.validation.helpTypeRequired'),
     path: ['helpType']
   })
+  .refine((data) => data.details !== undefined && data.details !== '', {
+    message: t('issueReport.validation.descriptionRequired'),
+    path: ['details']
+  })
 export type IssueReportFormData = z.infer<typeof issueReportSchema>