refactor: remove unnecessary id parameters from build/test/issue details

kernelci · Feb 25, 2025 · 7f9b634 · 7f9b634
1 parent 55f0982
commit 7f9b634
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 54 deletions.
diff --git a/dashboard/src/components/BuildDetails/BuildDetails.tsx b/dashboard/src/components/BuildDetails/BuildDetails.tsx
@@ -44,25 +44,24 @@ import BuildDetailsTestSection from './BuildDetailsTestSection';
 
 interface BuildDetailsProps {
   breadcrumb?: JSX.Element;
-  buildId?: string;
   onClickFilter: (filter: PossibleTableFilters) => void;
   tableFilter: TableFilter;
   getTestTableRowLink: (testId: string) => LinkProps;
 }
 
 const BuildDetails = ({
   breadcrumb,
-  buildId,
   onClickFilter,
   tableFilter,
   getTestTableRowLink,
 }: BuildDetailsProps): JSX.Element => {
-  const { data, isLoading, status, error } = useBuildDetails(buildId ?? '');
+  const { buildId } = useParams({ from: '/build/$buildId' });
+  const { data, isLoading, status, error } = useBuildDetails(buildId);
   const {
     data: issueData,
     status: issueStatus,
     error: issueError,
-  } = useBuildIssues(buildId ?? '');
+  } = useBuildIssues(buildId);
 
   const { formatMessage } = useIntl();
 

diff --git a/dashboard/src/components/IssueDetails/IssueDetails.tsx b/dashboard/src/components/IssueDetails/IssueDetails.tsx
@@ -2,7 +2,7 @@ import { useIntl } from 'react-intl';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useMemo, useState, type JSX } from 'react';
 
-import type { LinkProps } from '@tanstack/react-router';
+import { useParams, type LinkProps } from '@tanstack/react-router';
 
 import SectionGroup from '@/components/Section/SectionGroup';
 import type { ISection } from '@/components/Section/Section';
@@ -47,7 +47,6 @@ import { IssueDetailsTestSection } from './IssueDetailsTestSection';
 import { IssueDetailsBuildSection } from './IssueDetailsBuildSection';
 
 interface IIssueDetails {
-  issueId: string;
   versionNumber?: number;
   tableFilter: TableFilter;
   onClickTestFilter: (filter: PossibleTableFilters) => void;
@@ -58,7 +57,6 @@ interface IIssueDetails {
 }
 
 export const IssueDetails = ({
-  issueId,
   versionNumber,
   tableFilter,
   onClickTestFilter,
@@ -67,6 +65,7 @@ export const IssueDetails = ({
   getBuildTableRowLink,
   breadcrumb,
 }: IIssueDetails): JSX.Element => {
+  const { issueId } = useParams({ from: '/issue/$issueId' });
   const { data, isLoading, status, error } = useIssueDetails(
     issueId,
     versionNumber,

diff --git a/dashboard/src/components/TestDetails/TestDetails.tsx b/dashboard/src/components/TestDetails/TestDetails.tsx
@@ -4,7 +4,12 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import type { Dispatch, SetStateAction, JSX } from 'react';
 
 import type { LinkProps } from '@tanstack/react-router';
-import { Link, useRouterState, useSearch } from '@tanstack/react-router';
+import {
+  Link,
+  useParams,
+  useRouterState,
+  useSearch,
+} from '@tanstack/react-router';
 
 import { shouldTruncate, truncateBigText, valueOrEmpty } from '@/lib/string';
 import type { TTestDetails } from '@/types/tree/TestDetails';
@@ -314,13 +319,11 @@ const TestDetailsSections = ({
 
 interface TestsDetailsProps {
   breadcrumb?: JSX.Element;
-  testId?: string;
 }
 
-const TestDetails = ({
-  breadcrumb,
-  testId,
-}: TestsDetailsProps): JSX.Element => {
+const TestDetails = ({ breadcrumb }: TestsDetailsProps): JSX.Element => {
+  const { testId } = useParams({ from: '/test/$testId' });
+
   const { formatMessage } = useIntl();
 
   const { data, isLoading, status, error } = useTestDetails(testId ?? '');

diff --git a/dashboard/src/pages/BuildDetails/BuildDetails.tsx b/dashboard/src/pages/BuildDetails/BuildDetails.tsx
@@ -1,12 +1,7 @@
 import { useCallback, type JSX } from 'react';
 
 import type { LinkProps } from '@tanstack/react-router';
-import {
-  useSearch,
-  useParams,
-  useNavigate,
-  useRouterState,
-} from '@tanstack/react-router';
+import { useSearch, useNavigate, useRouterState } from '@tanstack/react-router';
 
 import {
   zTableFilterInfoDefault,
@@ -21,7 +16,6 @@ import HardwareBuildDetails from '@/pages/HardwareBuildDetails';
 
 const BuildDetailsPage = (): JSX.Element => {
   const searchParams = useSearch({ from: '/build/$buildId' });
-  const { buildId } = useParams({ from: '/build/$buildId' });
   const navigate = useNavigate({ from: '/build/$buildId' });
   const historyState = useRouterState({ select: s => s.location.state });
 
@@ -66,7 +60,6 @@ const BuildDetailsPage = (): JSX.Element => {
 
   return (
     <BuildDetails
-      buildId={buildId}
       onClickFilter={onClickFilter}
       tableFilter={searchParams.tableFilter ?? zTableFilterInfoDefault}
       getTestTableRowLink={getTestTableRowLink}

diff --git a/dashboard/src/pages/HardwareBuildDetails/HardwareBuildDetails.tsx b/dashboard/src/pages/HardwareBuildDetails/HardwareBuildDetails.tsx
@@ -1,10 +1,5 @@
 import type { LinkProps } from '@tanstack/react-router';
-import {
-  useNavigate,
-  useParams,
-  useRouterState,
-  useSearch,
-} from '@tanstack/react-router';
+import { useNavigate, useRouterState, useSearch } from '@tanstack/react-router';
 
 import { useCallback, type JSX } from 'react';
 
@@ -18,7 +13,6 @@ import { MemoizedHardwareBreadcrumb } from '@/components/Breadcrumb/HardwareBrea
 
 const HardwareBuildDetails = (): JSX.Element => {
   const searchParams = useSearch({ from: '/build/$buildId' });
-  const { buildId } = useParams({ from: '/build/$buildId' });
   const historyState = useRouterState({ select: s => s.location.state });
   const hardwareId = historyState.id;
 
@@ -58,7 +52,6 @@ const HardwareBuildDetails = (): JSX.Element => {
 
   return (
     <BuildDetails
-      buildId={buildId}
       breadcrumb={
         <MemoizedHardwareBreadcrumb
           searchParams={searchParams}

diff --git a/dashboard/src/pages/HardwareTestDetails/HardwareTestDetails.tsx b/dashboard/src/pages/HardwareTestDetails/HardwareTestDetails.tsx
@@ -1,4 +1,4 @@
-import { useParams, useSearch } from '@tanstack/react-router';
+import { useSearch } from '@tanstack/react-router';
 
 import type { JSX } from 'react';
 
@@ -7,11 +7,9 @@ import { MemoizedHardwareBreadcrumb } from '@/components/Breadcrumb/HardwareBrea
 
 const HardwareTestDetails = (): JSX.Element => {
   const searchParams = useSearch({ from: '/test/$testId/' });
-  const { testId } = useParams({ from: '/test/$testId/' });
 
   return (
     <TestDetails
-      testId={testId}
       breadcrumb={
         <MemoizedHardwareBreadcrumb
           searchParams={searchParams}

diff --git a/dashboard/src/pages/IssueDetails/IssueDetails.tsx b/dashboard/src/pages/IssueDetails/IssueDetails.tsx
@@ -1,10 +1,5 @@
 import type { LinkProps } from '@tanstack/react-router';
-import {
-  useNavigate,
-  useParams,
-  useRouterState,
-  useSearch,
-} from '@tanstack/react-router';
+import { useNavigate, useRouterState, useSearch } from '@tanstack/react-router';
 
 import { useCallback, useMemo, type JSX } from 'react';
 
@@ -37,7 +32,6 @@ const getTestTableRowLink = (testId: string): LinkProps => ({
 
 const IssueDetailsPage = (): JSX.Element => {
   const searchParams = useSearch({ from: ISSUE_ROUTE });
-  const { issueId } = useParams({ from: ISSUE_ROUTE });
   const navigate = useNavigate({ from: ISSUE_ROUTE });
   const historyState = useRouterState({ select: s => s.location.state });
 
@@ -101,7 +95,6 @@ const IssueDetailsPage = (): JSX.Element => {
 
   return (
     <IssueDetails
-      issueId={issueId}
       versionNumber={searchParams.issueVersion}
       tableFilter={searchParams.tableFilter ?? zTableFilterInfoDefault}
       onClickTestFilter={onClickTestFilter}

diff --git a/dashboard/src/pages/TestDetails/TestDetails.tsx b/dashboard/src/pages/TestDetails/TestDetails.tsx
@@ -1,4 +1,4 @@
-import { useParams, useRouterState } from '@tanstack/react-router';
+import { useRouterState } from '@tanstack/react-router';
 
 import type { JSX } from 'react';
 
@@ -11,7 +11,6 @@ import HardwareTestDetails from '@/pages/HardwareTestDetails';
 
 const TestDetailsPage = (): JSX.Element => {
   const historyState = useRouterState({ select: s => s.location.state });
-  const { testId } = useParams({ from: '/test/$testId' });
 
   if (historyState.id !== undefined) {
     if (historyState.from === RedirectFrom.Tree) {
@@ -23,7 +22,7 @@ const TestDetailsPage = (): JSX.Element => {
     }
   }
 
-  return <TestDetails testId={testId} />;
+  return <TestDetails />;
 };
 
 export default TestDetailsPage;
diff --git a/dashboard/src/pages/TreeBuildDetails/TreeBuildDetails.tsx b/dashboard/src/pages/TreeBuildDetails/TreeBuildDetails.tsx
@@ -1,10 +1,5 @@
 import type { LinkProps } from '@tanstack/react-router';
-import {
-  useNavigate,
-  useParams,
-  useRouterState,
-  useSearch,
-} from '@tanstack/react-router';
+import { useNavigate, useRouterState, useSearch } from '@tanstack/react-router';
 
 import { useCallback, type JSX } from 'react';
 
@@ -18,7 +13,6 @@ import { MemoizedTreeBreadcrumb } from '@/components/Breadcrumb/TreeBreadcrumb';
 
 const TreeBuildDetails = (): JSX.Element => {
   const searchParams = useSearch({ from: '/build/$buildId' });
-  const { buildId } = useParams({ from: '/build/$buildId' });
   const historyState = useRouterState({ select: s => s.location.state });
   const treeId = historyState.id;
 
@@ -56,7 +50,6 @@ const TreeBuildDetails = (): JSX.Element => {
 
   return (
     <BuildDetails
-      buildId={buildId}
       breadcrumb={
         <MemoizedTreeBreadcrumb
           searchParams={searchParams}

diff --git a/dashboard/src/pages/TreeTestDetails/TreeTestDetails.tsx b/dashboard/src/pages/TreeTestDetails/TreeTestDetails.tsx
@@ -1,4 +1,4 @@
-import { useParams, useSearch } from '@tanstack/react-router';
+import { useSearch } from '@tanstack/react-router';
 
 import type { JSX } from 'react';
 
@@ -7,11 +7,9 @@ import { MemoizedTreeBreadcrumb } from '@/components/Breadcrumb/TreeBreadcrumb';
 
 const TreeTestDetails = (): JSX.Element => {
   const searchParams = useSearch({ from: '/test/$testId/' });
-  const { testId } = useParams({ from: '/test/$testId/' });
 
   return (
     <TestDetails
-      testId={testId}
       breadcrumb={
         <MemoizedTreeBreadcrumb
           searchParams={searchParams}