refactor: priority messages duplication

frontend/components/TestCasePriority.tsx

@@ -0,0 +1,17 @@
+import { Circle } from 'lucide-react';
+import { priorities } from '@/config/selection';
+import { PriorityMessages } from '@/types/priority';
+
+type Props = {
+  priorityValue: number;
+  priorityMessages: PriorityMessages;
+};
+
+export default function TestCasePriority({ priorityValue, priorityMessages }: Props) {
+  return (
+    <div className="flex items-center">
+      <Circle size={8} color={priorities[priorityValue].color} fill={priorities[priorityValue].color} />
+      <div className="ms-3">{priorityMessages[priorities[priorityValue].uid]}</div>
+    </div>
+  );
+}

frontend/messages/en.json

@@ -1,4 +1,10 @@
 {
+  "Priority": {
+    "critical": "Critical",
+    "high": "High",
+    "medium": "Medium",
+    "low": "Low"
+  },
   "Index": {
     "get_started": "Get Started",
     "demo": "Demo",

frontend/messages/ja.json

@@ -1,4 +1,11 @@
 {
+  "Priority": {
+    "priority": "優先度",
+    "critical": "致",
+    "high": "高",
+    "medium": "中",
+    "low": "低"
+  },
   "Index": {
     "get_started": "テスト管理を始める",
     "demo": "デモ",

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx

@@ -37,6 +37,7 @@ import { fetchFolders } from '../../folders/foldersControl';
 import { TokenContext } from '@/utils/TokenProvider';
 import { useTheme } from 'next-themes';
 import { useFormGuard } from '@/utils/formGuard';
+import { PriorityMessages } from '@/types/priority';
 
 const defaultTestRun = {
   id: 0,
@@ -53,10 +54,11 @@ type Props = {
   projectId: string;
   runId: string;
   messages: RunMessages;
+  priorityMessages: PriorityMessages;
   locale: string;
 };
 
-export default function RunEditor({ projectId, runId, messages, locale }: Props) {
+export default function RunEditor({ projectId, runId, messages, priorityMessages, locale }: Props) {
   const context = useContext(TokenContext);
   const { theme, setTheme } = useTheme();
   const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
@@ -314,6 +316,7 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
               onIncludeCase={(includeTestId) => handleIncludeExcludeCase(true, includeTestId)}
               onExcludeCase={(excludeCaseId) => handleIncludeExcludeCase(false, excludeCaseId)}
               messages={messages}
+              priorityMessages={priorityMessages}
             />
           </div>
         </div>

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx

@@ -1,8 +1,9 @@
-import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Chip, Divider } from '@nextui-org/react';
+import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
+import { testTypes, templates } from '@/config/selection';
+import TestCasePriority from '@/components/TestCasePriority';
 import { RunMessages } from '@/types/run';
 import { CaseType } from '@/types/case';
-import { Circle } from 'lucide-react';
+import { PriorityMessages } from '@/types/priority';
-import { priorities, testTypes, templates } from '@/config/selection';
 
 type Props = {
   isOpen: boolean;
@@ -10,9 +11,17 @@ type Props = {
   onCancel: () => void;
   onChangeStatus: (changeCaseId: number, status: number) => {};
   messages: RunMessages;
+  priorityMessages: PriorityMessages;
 };
 
-export default function showTestCaseDetailDialog({ isOpen, testCase, onCancel, onChangeStatus, messages }: Props) {
+export default function showTestCaseDetailDialog({
+  isOpen,
+  testCase,
+  onCancel,
+  onChangeStatus,
+  messages,
+  priorityMessages,
+}: Props) {
   return (
     <Modal
       isOpen={isOpen}
@@ -34,19 +43,7 @@ export default function showTestCaseDetailDialog({ isOpen, testCase, onCancel, o
           <div className="flex my-2">
             <div className="w-1/2">
               <p className={'font-bold'}>{messages.priority}</p>
-              <Chip
+              <TestCasePriority priorityValue={testCase.priority} priorityMessages={priorityMessages} />
-                startContent={
-                  <Circle
-                    size={8}
-                    className="me-2"
-                    color={priorities[testCase.priority].color}
-                    fill={priorities[testCase.priority].color}
-                  />
-                }
-                variant="light"
-              >
-                {messages[priorities[testCase.priority].uid]}
-              </Chip>
             </div>
 
             <div className="w-1/2">

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx

@@ -30,6 +30,7 @@ import { priorities, testRunCaseStatus } from '@/config/selection';
 import { CaseType } from '@/types/case';
 import { RunMessages } from '@/types/run';
 import TestCaseDetailDialog from './TestCaseDetailDialog';
+import { PriorityMessages } from '@/types/priority';
 
 type Props = {
   cases: CaseType[];
@@ -40,6 +41,7 @@ type Props = {
   onIncludeCase: (includeCaseId: number) => {};
   onExcludeCase: (excludeCaseId: number) => {};
   messages: RunMessages;
+  priorityMessages: PriorityMessages;
 };
 
 export default function TestCaseSelector({
@@ -51,6 +53,7 @@ export default function TestCaseSelector({
   onIncludeCase,
   onExcludeCase,
   messages,
+  priorityMessages,
 }: Props) {
   const headerColumns = [
     { name: messages.id, uid: 'id', sortable: true },
@@ -303,6 +306,7 @@ export default function TestCaseSelector({
         onCancel={hideTestCaseDetailDialog}
         onChangeStatus={(showingCaseId, newStatus) => onChangeStatus(showingCaseId, newStatus)}
         messages={messages}
+        priorityMessages={priorityMessages}
       />
     </>
   );

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx

@@ -1,9 +1,11 @@
 import RunEditor from './RunEditor';
 import { useTranslations } from 'next-intl';
+import { RunMessages } from '@/types/run';
+import { PriorityMessages } from '@/types/priority';
 
 export default function Page({ params }: { params: { projectId: string; runId: string; locale: string } }) {
   const t = useTranslations('Run');
-  const messages = {
+  const messages: RunMessages = {
     backToRuns: t('back_to_runs'),
     updating: t('updating'),
     update: t('update'),
@@ -22,10 +24,6 @@ export default function Page({ params }: { params: { projectId: string; runId: s
     priority: t('priority'),
     actions: t('actions'),
     status: t('status'),
-    critical: t('critical'),
-    high: t('high'),
-    medium: t('medium'),
-    low: t('low'),
     untested: t('untested'),
     passed: t('passed'),
     failed: t('failed'),
@@ -57,5 +55,21 @@ export default function Page({ params }: { params: { projectId: string; runId: s
     close: t('close'),
   };
 
-  return <RunEditor projectId={params.projectId} runId={params.runId} messages={messages} locale={params.locale} />;
+  const priorityTranslation = useTranslations('Priority');
+  const priorityMessages: PriorityMessages = {
+    critical: priorityTranslation('critical'),
+    high: priorityTranslation('high'),
+    medium: priorityTranslation('medium'),
+    low: priorityTranslation('low'),
+  };
+
+  return (
+    <RunEditor
+      projectId={params.projectId}
+      runId={params.runId}
+      messages={messages}
+      priorityMessages={priorityMessages}
+      locale={params.locale}
+    />
+  );
 }

frontend/types/case.ts

@@ -101,11 +101,6 @@ type CaseMessages = {
   pleaseEnterTitle: string;
   description: string;
   testCaseDescription: string;
-  priority: string;
-  critical: string;
-  high: string;
-  medium: string;
-  low: string;
   type: string;
   other: string;
   security: string;

frontend/types/priority.ts

@@ -0,0 +1,7 @@
+type PriorityMessages = {
+  critical: string;
+  high: string;
+  medium: string;
+  low: string;
+};
+export type { PriorityMessages };