refactor: Test/Build Details Page

- use breadcrumb as a prop in test and build details page and move logic to a general component

Part of #507 and #508

dashboard/src/pages/BuildDetails/BuildDetails.tsx → dashboard/src/components/BuildDetails/BuildDetails.tsx

@@ -6,24 +6,13 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useMemo } from 'react';
 
-import { useParams, useSearch } from '@tanstack/react-router';
-
 import SectionGroup from '@/components/Section/SectionGroup';
 import type { ISection } from '@/components/Section/Section';
 import { useBuildDetails, useBuildIssues } from '@/api/BuildDetails';
 import UnexpectedError from '@/components/UnexpectedError/UnexpectedError';
 
 import { formatDate } from '@/utils/utils';
 
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/Breadcrumb/Breadcrumb';
-
 import IssueSection from '@/components/Issue/IssueSection';
 
 import { truncateBigText } from '@/lib/string';
@@ -42,13 +31,17 @@ const BlueFolderIcon = (): JSX.Element => (
   <MdFolderOpen className="text-blue" />
 );
 
-const BuildDetails = (): JSX.Element => {
-  const searchParams = useSearch({ from: '/tree/$treeId/build/$buildId/' });
-  const { buildId, treeId } = useParams({
-    from: '/tree/$treeId/build/$buildId/',
-  });
-  const { data, error } = useBuildDetails(buildId || '');
-  const issuesQueryResult = useBuildIssues(buildId);
+interface BuildDetailsProps {
+  breadcrumb: JSX.Element;
+  buildId?: string;
+}
+
+const BuildDetails = ({
+  breadcrumb,
+  buildId,
+}: BuildDetailsProps): JSX.Element => {
+  const { data, error, isLoading } = useBuildDetails(buildId ?? '');
+  const issuesQueryResult = useBuildIssues(buildId ?? '');
 
   const intl = useIntl();
 
@@ -169,36 +162,29 @@ const BuildDetails = (): JSX.Element => {
     ];
   }, [data, hasUsefulLogInfo, intl]);
 
-  //TODO: loading and 404
-  if (!data) return <span></span>;
-  if (error) return <UnexpectedError />;
+  if (error) {
+    return (
+      <div>
+        <FormattedMessage id="buildDetails.failedToFetch" />
+      </div>
+    );
+  }
+
+  if (isLoading) return <FormattedMessage id="global.loading" />;
+
+  if (!data) {
+    return (
+      <div>
+        <FormattedMessage id="buildDetails.notFound" />
+      </div>
+    );
+  }
 
   return (
     <ErrorBoundary FallbackComponent={UnexpectedError}>
       <Sheet>
-        <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="buildDetails.buildDetails" />
-              </BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
+        {breadcrumb}
+
         <SectionGroup sections={sectionsData} />
         {buildId && <BuildDetailsTestSection buildId={buildId} />}
         <IssueSection {...issuesQueryResult} />

dashboard/src/pages/BuildDetails/BuildDetailsTestSection.tsx → dashboard/src/components/BuildDetails/BuildDetailsTestSection.tsx

@@ -11,8 +11,7 @@ import { Separator } from '@/components/ui/separator';
 import { useBuildTests } from '@/api/buildTests';
 
 import type { TestsTableFilter } from '@/types/tree/TreeDetails';
-
-import { TestsTable } from '../TreeDetails/Tabs/Tests/TestsTable';
+import { TestsTable } from '@/pages/TreeDetails/Tabs/Tests/TestsTable';
 
 interface IBuildDetailsTestSection {
   buildId: string;

dashboard/src/pages/TestDetails/TestDetails.tsx → dashboard/src/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} />

dashboard/src/locales/messages/index.ts

@@ -49,13 +49,15 @@ export const messages = {
     'buildDetails.buildTime': 'Build time',
     'buildDetails.buildsHistory': 'Builds History',
     'buildDetails.compiler': 'Compiler',
+    'buildDetails.failedToFetch': 'Failed to fetch build details',
     'buildDetails.gitBranch': 'Git Branch',
     'buildDetails.gitCommit': 'Git Commit',
     'buildDetails.gitDescribe': 'Git Describe',
     'buildDetails.gitUrl': 'Git Url',
     'buildDetails.kernelConfig': 'Kernel Config',
     'buildDetails.kernelImage': 'Kernel Image',
     'buildDetails.noTestResults': 'No test results found.',
+    'buildDetails.notFound': 'Build not found',
     'buildDetails.startTime': 'Start Time',
     'buildDetails.systemMap': 'System Map',
     'buildDetails.testResults': 'Test Results',
@@ -153,6 +155,8 @@ export const messages = {
     'global.unknown': 'Unknown',
     'global.url': 'URL',
     'global.valid': 'Valid',
+    'hardware.details': 'Hardware Details',
+    'hardware.path': 'Hardware',
     'hardwareDetails.treeBranch': 'Tree / Branch',
     'issue.failedToFetch': 'Failed to fetch issues',
     'issue.noIssueFound': 'No issue found.',

dashboard/src/pages/HardwareBuildDetails/HardwareBuildDetails.tsx

@@ -0,0 +1,56 @@
+import { FormattedMessage } from 'react-intl';
+
+import { useParams, useSearch } from '@tanstack/react-router';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/Breadcrumb/Breadcrumb';
+
+import BuildDetails from '@/components/BuildDetails/BuildDetails';
+
+const HardwareBuildDetails = (): JSX.Element => {
+  const searchParams = useSearch({
+    from: '/hardware/$hardwareId/build/$buildId/',
+  });
+  const { buildId, hardwareId } = useParams({
+    from: '/hardware/$hardwareId/build/$buildId/',
+  });
+
+  return (
+    <BuildDetails
+      buildId={buildId}
+      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="buildDetails.buildDetails" />
+              </BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      }
+    />
+  );
+};
+
+export default HardwareBuildDetails;

dashboard/src/pages/HardwareBuildDetails/index.tsx

@@ -0,0 +1,3 @@
+import HardwareBuildDetails from './HardwareBuildDetails';
+
+export default HardwareBuildDetails;

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;

dashboard/src/pages/HardwareTestDetails/index.tsx

@@ -0,0 +1,3 @@
+import HardwareTestDetails from './HardwareTestDetails';
+
+export default HardwareTestDetails;