refactor: priority messages duplication

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx

@@ -6,15 +6,17 @@ import { fetchCases, createCase, deleteCases } from '@/utils/caseControl';
 import { CaseType, CasesMessages } from '@/types/case';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 import CaseDialog from './CaseDialog';
+import { PriorityMessages } from '@/types/priority';
 
 type Props = {
   projectId: string;
   folderId: string;
   messages: CasesMessages;
+  priorityMessages: PriorityMessages;
   locale: string;
 };
 
-export default function CasesPane({ projectId, folderId, messages, locale }: Props) {
+export default function CasesPane({ projectId, folderId, messages, priorityMessages, locale }: Props) {
   const [cases, setCases] = useState<CaseType[]>([]);
   const context = useContext(TokenContext);
   const [isCaseDialogOpen, setIsCaseDialogOpen] = useState(false);
@@ -81,6 +83,7 @@ export default function CasesPane({ projectId, folderId, messages, locale }: Pro
         onDeleteCase={onDeleteCase}
         onDeleteCases={onDeleteCases}
         messages={messages}
+        priorityMessages={priorityMessages}
         locale={locale}
       />
 

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx

@@ -17,7 +17,8 @@ import {
 import { Link, NextUiLinkClasses } from '@/src/navigation';
 import { Plus, MoreVertical, Trash, Circle } from 'lucide-react';
 import { CaseType, CasesMessages } from '@/types/case';
-import { priorities } from '@/config/selection';
+import { PriorityMessages } from '@/types/priority';
+import TestCasePriority from '@/components/TestCasePriority';
 
 type Props = {
   projectId: string;
@@ -27,6 +28,7 @@ type Props = {
   onDeleteCase: (caseId: number) => void;
   onDeleteCases: (caseIds: number[]) => void;
   messages: CasesMessages;
+  priorityMessages: PriorityMessages;
   locale: string;
 };
 
@@ -38,6 +40,7 @@ export default function TestCaseTable({
   onDeleteCase,
   onDeleteCases,
   messages,
+  priorityMessages,
   locale,
 }: Props) {
   const headerColumns = [
@@ -89,12 +92,7 @@ export default function TestCaseTable({
           </Button>
         );
       case 'priority':
-        return (
-          <div className="flex items-center">
-            <Circle size={8} color={priorities[cellValue].color} fill={priorities[cellValue].color} />
-            <div className="ms-3">{messages[priorities[cellValue].uid]}</div>
-          </div>
-        );
+        return <TestCasePriority priorityValue={cellValue} priorityMessages={priorityMessages} />;
       case 'actions':
         return (
           <Dropdown>

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx

@@ -6,12 +6,13 @@ import { Save, Plus, ArrowLeft, Circle } from 'lucide-react';
 import { priorities, testTypes, templates } from '@/config/selection';
 import CaseStepsEditor from './CaseStepsEditor';
 import CaseAttachmentsEditor from './CaseAttachmentsEditor';
-import { CaseType, AttachmentType, CaseMessages, StepType } from '@/types/case';
 import { fetchCase, updateCase } from '@/utils/caseControl';
 import { updateSteps } from './stepControl';
 import { fetchCreateAttachments, fetchDownloadAttachment, fetchDeleteAttachment } from './attachmentControl';
 import { TokenContext } from '@/utils/TokenProvider';
 import { useFormGuard } from '@/utils/formGuard';
+import { CaseType, AttachmentType, CaseMessages, StepType } from '@/types/case';
+import { PriorityMessages } from '@/types/priority';
 
 const defaultTestCase = {
   id: 0,
@@ -36,10 +37,11 @@ type Props = {
   folderId: string;
   caseId: string;
   messages: CaseMessages;
+  priorityMessages: PriorityMessages;
   locale: string;
 };
 
-export default function CaseEditor({ projectId, folderId, caseId, messages, locale }: Props) {
+export default function CaseEditor({ projectId, folderId, caseId, messages, priorityMessages, locale }: Props) {
   const context = useContext(TokenContext);
   const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
   const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
@@ -262,7 +264,7 @@ export default function CaseEditor({ projectId, folderId, caseId, messages, loca
           >
             {priorities.map((priority, index) => (
               <SelectItem key={priority.uid} value={index}>
-                {messages[priority.uid]}
+                {priorityMessages[priority.uid]}
               </SelectItem>
             ))}
           </Select>

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx

@@ -1,3 +1,4 @@
+import { PriorityMessages } from '@/types/priority';
 import CaseEditor from './CaseEditor';
 import { useTranslations } from 'next-intl';
 
@@ -22,10 +23,6 @@ export default function Page({
     description: t('description'),
     testCaseDescription: t('test_case_description'),
     priority: t('priority'),
-    critical: t('critical'),
-    high: t('high'),
-    medium: t('medium'),
-    low: t('low'),
     type: t('type'),
     other: t('other'),
     security: t('security'),
@@ -61,12 +58,21 @@ export default function Page({
     areYouSureLeave: t('are_you_sure_leave'),
   };
 
+  const priorityTranslation = useTranslations('Priority');
+  const priorityMessages: PriorityMessages = {
+    critical: priorityTranslation('critical'),
+    high: priorityTranslation('high'),
+    medium: priorityTranslation('medium'),
+    low: priorityTranslation('low'),
+  };
+
   return (
     <CaseEditor
       projectId={params.projectId}
       folderId={params.folderId}
       caseId={params.caseId}
       messages={messages}
+      priorityMessages={priorityMessages}
       locale={params.locale}
     />
   );

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx

@@ -1,3 +1,4 @@
+import { PriorityMessages } from '@/types/priority';
 import CasesPane from './CasesPane';
 import { useTranslations } from 'next-intl';
 
@@ -15,10 +16,6 @@ export default function Page({ params }: { params: { projectId: string; folderId
     areYouSure: t('are_you_sure'),
     newTestCase: t('new_test_case'),
     status: t('status'),
-    critical: t('critical'),
-    high: t('high'),
-    medium: t('medium'),
-    low: t('low'),
     noCasesFound: t('no_cases_found'),
     caseTitle: t('case_title'),
     caseDescription: t('case_description'),
@@ -26,9 +23,23 @@ export default function Page({ params }: { params: { projectId: string; folderId
     pleaseEnter: t('please_enter'),
   };
 
+  const priorityTranslation = useTranslations('Priority');
+  const priorityMessages: PriorityMessages = {
+    critical: priorityTranslation('critical'),
+    high: priorityTranslation('high'),
+    medium: priorityTranslation('medium'),
+    low: priorityTranslation('low'),
+  };
+
   return (
     <>
-      <CasesPane projectId={params.projectId} folderId={params.folderId} locale={params.locale} messages={messages} />
+      <CasesPane
+        projectId={params.projectId}
+        folderId={params.folderId}
+        locale={params.locale}
+        messages={messages}
+        priorityMessages={priorityMessages}
+      />
     </>
   );
 }

frontend/src/app/[locale]/projects/[projectId]/home/ProjectHome.tsx

@@ -13,6 +13,7 @@ import TestPriorityChart from './TestPriorityDonutChart';
 import TestProgressBarChart from './TestProgressColumnChart';
 import Config from '@/config/config';
 import { useTheme } from 'next-themes';
+import { PriorityMessages } from '@/types/priority';
 const apiServer = Config.apiServer;
 
 async function fetchProject(jwt: string, projectId: number) {
@@ -41,9 +42,10 @@ async function fetchProject(jwt: string, projectId: number) {
 type Props = {
   projectId: string;
   messages: HomeMessages;
+  priorityMessages: PriorityMessages;
 };
 
-export function ProjectHome({ projectId, messages }: Props) {
+export function ProjectHome({ projectId, messages, priorityMessages }: Props) {
   const context = useContext(TokenContext);
   const { theme, setTheme } = useTheme();
   const [project, setProject] = useState({
@@ -134,7 +136,7 @@ export function ProjectHome({ projectId, messages }: Props) {
         </div>
         <div style={{ width: '30rem', height: '18rem' }}>
           <h3>{messages.byPriority}</h3>
-          <TestPriorityChart priorityCounts={priorityCounts} messages={messages} theme={theme} />
+          <TestPriorityChart priorityCounts={priorityCounts} priorityMessages={priorityMessages} theme={theme} />
         </div>
       </div>
     </div>

frontend/src/app/[locale]/projects/[projectId]/home/TestPriorityDonutChart.tsx

@@ -3,16 +3,16 @@ import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { priorities } from '@/config/selection';
 import { CasePriorityCountType } from '@/types/case';
-import { HomeMessages } from './page';
+import { PriorityMessages } from '@/types/priority';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
 type Props = {
   priorityCounts: CasePriorityCountType[];
-  messages: HomeMessages;
+  priorityMessages: PriorityMessages;
   theme: string;
 };
 
-export default function TestPriorityDonutChart({ priorityCounts, messages, theme }: Props) {
+export default function TestPriorityDonutChart({ priorityCounts, priorityMessages, theme }: Props) {
   const [chartData, setChartData] = useState({
     series: [],
     options: {
@@ -29,7 +29,7 @@ export default function TestPriorityDonutChart({ priorityCounts, messages, theme
           return found ? found.count : 0;
         });
 
-        const labels = priorities.map((entry) => messages[entry.uid]);
+        const labels = priorities.map((entry) => priorityMessages[entry.uid]);
         const colors = priorities.map((entry) => entry.chartColor);
         const legend = {
           labels: {

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

@@ -1,5 +1,6 @@
 import { ProjectHome } from './ProjectHome';
 import { useTranslations } from 'next-intl';
+import { PriorityMessages } from '@/types/priority';
 
 export type HomeMessages = {
   folders: string;
@@ -28,10 +29,6 @@ export type HomeMessages = {
   regression: string;
   automated: string;
   manual: string;
-  critical: string;
-  high: string;
-  medium: string;
-  low: string;
 };
 
 export default function Page({ params }: { params: { projectId: string } }) {
@@ -62,14 +59,19 @@ export default function Page({ params }: { params: { projectId: string } }) {
     regression: t('regression'),
     automated: t('automated'),
     manual: t('manual'),
-    critical: t('critical'),
-    high: t('high'),
-    medium: t('medium'),
-    low: t('low'),
   };
+
+  const pt = useTranslations('Priority');
+  const priorityMessages: PriorityMessages = {
+    critical: pt('critical'),
+    high: pt('high'),
+    medium: pt('medium'),
+    low: pt('low'),
+  };
+
   return (
     <>
-      <ProjectHome projectId={params.projectId} messages={messages} />
+      <ProjectHome projectId={params.projectId} messages={messages} priorityMessages={priorityMessages} />
     </>
   );
 }

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

@@ -1,9 +1,9 @@
 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 { PriorityMessages } from '@/types/priority';
+import TestCasePriority from '@/components/TestCasePriority';
 
 type Props = {
   isOpen: boolean;

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

@@ -26,11 +26,12 @@ import {
   CircleSlash2,
 } from 'lucide-react';
 import { NextUiLinkClasses } from '@/src/navigation';
-import { priorities, testRunCaseStatus } from '@/config/selection';
+import { testRunCaseStatus } from '@/config/selection';
 import { CaseType } from '@/types/case';
 import { RunMessages } from '@/types/run';
 import TestCaseDetailDialog from './TestCaseDetailDialog';
 import { PriorityMessages } from '@/types/priority';
+import TestCasePriority from '@/components/TestCasePriority';
 
 type Props = {
   cases: CaseType[];
@@ -95,7 +96,6 @@ export default function TestCaseSelector({
   }, [sortDescriptor, cases]);
 
   const notIncludedCaseClass = 'text-neutral-200 dark:text-neutral-600';
-  const chipBaseClass = 'flex items-center text-default-600';
 
   const renderStatusIcon = (uid: string) => {
     if (uid === 'untested') {
@@ -142,13 +142,8 @@ export default function TestCaseSelector({
         );
       case 'priority':
         return (
-          <div className={isIncluded ? chipBaseClass : chipBaseClass + notIncludedCaseClass}>
-            <Circle
-              size={8}
-              color={isIncluded ? priorities[cellValue].color : '#d4d4d8'}
-              fill={isIncluded ? priorities[cellValue].color : '#d4d4d8'}
-            />
-            <div className="ms-3">{messages[priorities[cellValue].uid]}</div>
+          <div className={isIncluded ? '' : notIncludedCaseClass}>
+            <TestCasePriority priorityValue={cellValue} priorityMessages={priorityMessages} />
           </div>
         );
       case 'runStatus':

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

@@ -55,12 +55,12 @@ export default function Page({ params }: { params: { projectId: string; runId: s
     close: t('close'),
   };
 
-  const priorityTranslation = useTranslations('Priority');
+  const pt = useTranslations('Priority');
   const priorityMessages: PriorityMessages = {
-    critical: priorityTranslation('critical'),
-    high: priorityTranslation('high'),
-    medium: priorityTranslation('medium'),
-    low: priorityTranslation('low'),
+    critical: pt('critical'),
+    high: pt('high'),
+    medium: pt('medium'),
+    low: pt('low'),
   };
 
   return (