refactor: test types messages duplication

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

@@ -8,12 +8,13 @@ import { ProgressSeriesType } from '@/types/run';
 import { HomeMessages } from './page';
 import { TokenContext } from '@/utils/TokenProvider';
 import { aggregateBasicInfo, aggregateTestPriority, aggregateTestType, aggregateProgress } from './aggregate';
-import TestTypesChart from './TestTypesDonutChart';
-import TestPriorityChart from './TestPriorityDonutChart';
-import TestProgressBarChart from './TestProgressColumnChart';
 import Config from '@/config/config';
 import { useTheme } from 'next-themes';
 import { PriorityMessages } from '@/types/priority';
+import { TestTypeMessages } from '@/types/testType';
+import TestTypesChart from './TestTypesDonutChart';
+import TestPriorityChart from './TestPriorityDonutChart';
+import TestProgressBarChart from './TestProgressColumnChart';
 const apiServer = Config.apiServer;
 
 async function fetchProject(jwt: string, projectId: number) {
@@ -42,10 +43,11 @@ async function fetchProject(jwt: string, projectId: number) {
 type Props = {
   projectId: string;
   messages: HomeMessages;
+  testTypeMessages: TestTypeMessages;
   priorityMessages: PriorityMessages;
 };
 
-export function ProjectHome({ projectId, messages, priorityMessages }: Props) {
+export function ProjectHome({ projectId, messages, testTypeMessages, priorityMessages }: Props) {
   const context = useContext(TokenContext);
   const { theme, setTheme } = useTheme();
   const [project, setProject] = useState({
@@ -132,7 +134,7 @@ export function ProjectHome({ projectId, messages, priorityMessages }: Props) {
       <div className="flex pb-20">
         <div style={{ width: '32rem', height: '18rem' }}>
           <h3>{messages.byType}</h3>
-          <TestTypesChart typesCounts={typesCounts} messages={messages} theme={theme} />
+          <TestTypesChart typesCounts={typesCounts} testTypeMessages={testTypeMessages} theme={theme} />
         </div>
         <div style={{ width: '30rem', height: '18rem' }}>
           <h3>{messages.byPriority}</h3>

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

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

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

@@ -1,6 +1,7 @@
 import { ProjectHome } from './ProjectHome';
 import { useTranslations } from 'next-intl';
 import { PriorityMessages } from '@/types/priority';
+import { TestTypeMessages } from '@/types/testType';
 
 export type HomeMessages = {
   folders: string;
@@ -15,20 +16,6 @@ export type HomeMessages = {
   testClassification: string;
   byType: string;
   byPriority: string;
-  testTypes: string;
-  other: string;
-  security: string;
-  performance: string;
-  accessibility: string;
-  functional: string;
-  acceptance: string;
-  usability: string;
-  smokeSanity: string;
-  compatibility: string;
-  destructive: string;
-  regression: string;
-  automated: string;
-  manual: string;
 };
 
 export default function Page({ params }: { params: { projectId: string } }) {
@@ -46,19 +33,23 @@ export default function Page({ params }: { params: { projectId: string } }) {
     testClassification: t('test_classification'),
     byType: t('by_type'),
     byPriority: t('by_priority'),
-    other: t('other'),
-    security: t('security'),
-    performance: t('performance'),
-    accessibility: t('accessibility'),
-    functional: t('functional'),
-    acceptance: t('acceptance'),
-    usability: t('usability'),
-    smokeSanity: t('smoke_sanity'),
-    compatibility: t('compatibility'),
-    destructive: t('destructive'),
-    regression: t('regression'),
-    automated: t('automated'),
-    manual: t('manual'),
+  };
+
+  const tt = useTranslations('Type');
+  const testTypeMessages: TestTypeMessages = {
+    other: tt('other'),
+    security: tt('security'),
+    performance: tt('performance'),
+    accessibility: tt('accessibility'),
+    functional: tt('functional'),
+    acceptance: tt('acceptance'),
+    usability: tt('usability'),
+    smokeSanity: tt('smoke_sanity'),
+    compatibility: tt('compatibility'),
+    destructive: tt('destructive'),
+    regression: tt('regression'),
+    automated: tt('automated'),
+    manual: tt('manual'),
   };
 
   const pt = useTranslations('Priority');
@@ -71,7 +62,12 @@ export default function Page({ params }: { params: { projectId: string } }) {
 
   return (
     <>
-      <ProjectHome projectId={params.projectId} messages={messages} priorityMessages={priorityMessages} />
+      <ProjectHome
+        projectId={params.projectId}
+        messages={messages}
+        testTypeMessages={testTypeMessages}
+        priorityMessages={priorityMessages}
+      />
     </>
   );
 }