refactor: test details page

- reuse test details component in tree and hardware context Close #507
kernelci · Nov 6, 2024 · 8cb0bd9 · 8cb0bd9
1 parent 6ab22f9
commit 8cb0bd9
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 56 deletions.
diff --git a/...ard/src/pages/TestDetails/TestDetails.tsx → ...rc/components/TestDetails/TestDetails.tsx b/...ard/src/pages/TestDetails/TestDetails.tsx → ...rc/components/TestDetails/TestDetails.tsx
@@ -1,37 +1,23 @@
-import { useParams, useSearch } from '@tanstack/react-router';
-
 import { FormattedMessage, useIntl } from 'react-intl';
 
+import { GiFlatPlatform } from 'react-icons/gi';
+
 import { useMemo } from 'react';
 
 import { PiComputerTowerThin } from 'react-icons/pi';
-
-import { GiFlatPlatform } from 'react-icons/gi';
-
 import { MdFolderOpen } from 'react-icons/md';
 
-import { useTestDetails, useTestIssues } from '@/api/TestDetails';
-
-import type { TTestDetails } from '@/types/tree/TestDetails';
-
-import type { ISubsection } from '@/components/Section/Section';
-import { Subsection } from '@/components/Section/Section';
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/Breadcrumb/Breadcrumb';
-import IssueSection from '@/components/Issue/IssueSection';
 import { truncateBigText } from '@/lib/string';
+import type { TTestDetails } from '@/types/tree/TestDetails';
 import { Sheet, SheetTrigger } from '@/components/Sheet';
+import { useTestDetails, useTestIssues } from '@/api/TestDetails';
 
-import { TooltipDateTime } from '@/components/TooltipDateTime';
+import { LogSheet } from '@/pages/TreeDetails/Tabs/LogSheet';
 
-import { LogSheet } from '../TreeDetails/Tabs/LogSheet';
+import { Subsection } from '../Section/Section';
+import type { ISubsection } from '../Section/Section';
+import { TooltipDateTime } from '../TooltipDateTime';
+import IssueSection from '../Issue/IssueSection';
 
 const emptyValue = '-';
 const valueOrEmpty = (value: string | undefined): string => value || emptyValue;
@@ -131,11 +117,17 @@ const TestDetailsSection = ({ test }: { test: TTestDetails }): JSX.Element => {
   return <Subsection infos={infos} />;
 };
 
-const TestDetails = (): JSX.Element => {
-  const searchParams = useSearch({ from: '/tree/$treeId/test/$testId/' });
-  const { testId, treeId } = useParams({ from: '/tree/$treeId/test/$testId/' });
+interface TestsDetailsProps {
+  breadcrumb: JSX.Element;
+  testId?: string;
+}
+
+const TestDetails = ({
+  breadcrumb,
+  testId,
+}: TestsDetailsProps): JSX.Element => {
   const { data, error, isLoading } = useTestDetails(testId ?? '');
-  const issuesQueryResult = useTestIssues(testId);
+  const issuesQueryResult = useTestIssues(testId ?? '');
 
   if (error) {
     return (
@@ -158,29 +150,8 @@ const TestDetails = (): JSX.Element => {
   return (
     <Sheet>
       <div className="w-100 px-5 pb-8">
-        <Breadcrumb className="pb-6 pt-6">
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink to="/tree" search={searchParams}>
-                <FormattedMessage id="tree.path" />
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbLink
-              to={`/tree/$treeId`}
-              params={{ treeId: treeId }}
-              search={searchParams}
-            >
-              <FormattedMessage id="tree.details" />
-            </BreadcrumbLink>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>
-                <FormattedMessage id="test.details" />
-              </BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
+        {breadcrumb}
+
         <h1 className="mb-4 text-2xl font-bold">{data.path}</h1>
         <TestDetailsSection test={data} />
         <IssueSection {...issuesQueryResult} />

diff --git a/dashboard/src/pages/HardwareTestDetails/HardwareTestDetails.tsx b/dashboard/src/pages/HardwareTestDetails/HardwareTestDetails.tsx
@@ -0,0 +1,56 @@
+import { useParams, useSearch } from '@tanstack/react-router';
+
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/Breadcrumb/Breadcrumb';
+
+import TestDetails from '@/components/TestDetails/TestDetails';
+
+const HardwareTestDetails = (): JSX.Element => {
+  const searchParams = useSearch({
+    from: '/hardware/$hardwareId/test/$testId/',
+  });
+  const { testId, hardwareId } = useParams({
+    from: '/hardware/$hardwareId/test/$testId/',
+  });
+
+  return (
+    <TestDetails
+      testId={testId}
+      breadcrumb={
+        <Breadcrumb className="pb-6 pt-6">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink to="/hardware" search={searchParams}>
+                <FormattedMessage id="hardware.path" />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbLink
+              to={`/hardware/$hardwareId`}
+              params={{ hardwareId }}
+              search={searchParams}
+            >
+              <FormattedMessage id="hardware.details" />
+            </BreadcrumbLink>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>
+                <FormattedMessage id="test.details" />
+              </BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      }
+    />
+  );
+};
+
+export default HardwareTestDetails;
diff --git a/dashboard/src/pages/HardwareTestDetails/index.tsx b/dashboard/src/pages/HardwareTestDetails/index.tsx
@@ -0,0 +1,3 @@
+import HardwareTestDetails from './HardwareTestDetails';
+
+export default HardwareTestDetails;
diff --git a/dashboard/src/pages/TestDetails/index.tsx b/dashboard/src/pages/TestDetails/index.tsx
diff --git a/...rc/pages/TestDetails/TestDetailsTable.tsx → ...ages/TreeTestDetails/TestDetailsTable.tsx b/...rc/pages/TestDetails/TestDetailsTable.tsx → ...ages/TreeTestDetails/TestDetailsTable.tsx
diff --git a/dashboard/src/pages/TreeTestDetails/TreeTestDetails.tsx b/dashboard/src/pages/TreeTestDetails/TreeTestDetails.tsx
@@ -0,0 +1,52 @@
+import { useParams, useSearch } from '@tanstack/react-router';
+
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/Breadcrumb/Breadcrumb';
+
+import TestDetails from '@/components/TestDetails/TestDetails';
+
+const TreeTestDetails = (): JSX.Element => {
+  const searchParams = useSearch({ from: '/tree/$treeId/test/$testId/' });
+  const { testId, treeId } = useParams({ from: '/tree/$treeId/test/$testId/' });
+
+  return (
+    <TestDetails
+      testId={testId}
+      breadcrumb={
+        <Breadcrumb className="pb-6 pt-6">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink to="/tree" search={searchParams}>
+                <FormattedMessage id="tree.path" />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbLink
+              to={`/tree/$treeId`}
+              params={{ treeId: treeId }}
+              search={searchParams}
+            >
+              <FormattedMessage id="tree.details" />
+            </BreadcrumbLink>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>
+                <FormattedMessage id="test.details" />
+              </BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      }
+    />
+  );
+};
+
+export default TreeTestDetails;
diff --git a/dashboard/src/pages/TreeTestDetails/index.tsx b/dashboard/src/pages/TreeTestDetails/index.tsx
@@ -0,0 +1,3 @@
+import TreeTestDetails from './TreeTestDetails';
+
+export default TreeTestDetails;
diff --git a/dashboard/src/routes/hardware/$hardwareId/test/$testId/index.tsx b/dashboard/src/routes/hardware/$hardwareId/test/$testId/index.tsx
@@ -1,5 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router';
 
+import HardwareTestDetails from '@/pages/HardwareTestDetails';
+
 export const Route = createFileRoute('/hardware/$hardwareId/test/$testId/')({
-  component: () => <div>Hello /hardware/$hardware/test/$testId/!</div>,
+  component: () => <HardwareTestDetails />,
 });
diff --git a/dashboard/src/routes/tree/$treeId/test/$testId/index.tsx b/dashboard/src/routes/tree/$treeId/test/$testId/index.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router';
 
-import TestDetails from '@/pages/TestDetails/TestDetails';
+import TreeTestDetails from '@/pages/TreeTestDetails/TreeTestDetails';
 
 export const Route = createFileRoute('/tree/$treeId/test/$testId/')({
-  component: () => <TestDetails />,
+  component: () => <TreeTestDetails />,
 });