feat: make HardwareTest and HardwareUsed add filter on click

Now when a HardwareTest or HardwareUsed item is clicked, that item is added as a hardware filter Close #622
kernelci · Dec 2, 2024 · 2bd4e4d · 2bd4e4d
1 parent da9e671
commit 2bd4e4d
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 20 deletions.
diff --git a/dashboard/src/components/Cards/HardwareTested.tsx b/dashboard/src/components/Cards/HardwareTested.tsx
@@ -9,14 +9,20 @@ import type { TTreeTestsData } from '@/types/tree/TreeDetails';
 
 import { ScrollArea } from '@/components/ui/scroll-area';
 
+import type { TFilter } from '@/types/general';
+
+import FilterLink from '@/components/Tabs/FilterLink';
+
 interface IHardwareTested
   extends Pick<TTreeTestsData, 'environmentCompatible'> {
   title: IBaseCard['title'];
+  diffFilter: TFilter;
 }
 
 const HardwareTested = ({
   environmentCompatible,
   title,
+  diffFilter,
 }: IHardwareTested): JSX.Element => {
   return (
     <BaseCard
@@ -29,22 +35,29 @@ const HardwareTested = ({
                 environmentCompatible[hardwareTestedName];
 
               return (
-                <ListingItem
-                  hasBottomBorder
+                <FilterLink
                   key={hardwareTestedName}
-                  text={hardwareTestedName}
-                  leftIcon={
-                    <GroupedTestStatus
-                      done={DONE}
-                      fail={FAIL}
-                      error={ERROR}
-                      miss={MISS}
-                      pass={PASS}
-                      skip={SKIP}
-                      nullStatus={NULL}
-                    />
-                  }
-                />
+                  filterValue={hardwareTestedName}
+                  filterSection="hardware"
+                  diffFilter={diffFilter}
+                >
+                  <ListingItem
+                    hasBottomBorder
+                    key={hardwareTestedName}
+                    text={hardwareTestedName}
+                    leftIcon={
+                      <GroupedTestStatus
+                        done={DONE}
+                        fail={FAIL}
+                        error={ERROR}
+                        miss={MISS}
+                        pass={PASS}
+                        skip={SKIP}
+                        nullStatus={NULL}
+                      />
+                    }
+                  />
+                </FilterLink>
               );
             })}
           </DumbListingContent>

diff --git a/dashboard/src/components/Cards/HardwareUsed.tsx b/dashboard/src/components/Cards/HardwareUsed.tsx
@@ -4,22 +4,41 @@ import type { IBaseCard } from '@/components/Cards/BaseCard';
 import BaseCard from '@/components/Cards/BaseCard';
 
 import { Badge } from '@/components/ui/badge';
+import type { TFilter } from '@/types/general';
+
+import FilterLink from '@/components/Tabs/FilterLink';
 
 interface IHardwareUsed {
   title: IBaseCard['title'];
   hardwareUsed?: string[];
+  diffFilter: TFilter;
 }
 
-const HardwareUsed = ({ hardwareUsed, title }: IHardwareUsed): JSX.Element => {
+const HardwareUsed = ({
+  hardwareUsed,
+  title,
+  diffFilter,
+}: IHardwareUsed): JSX.Element => {
   const hardwareSorted = useMemo(() => {
     return hardwareUsed?.sort().map(hardware => {
       return (
-        <Badge key={hardware} variant="outline" className="text-sm font-normal">
-          {hardware}
-        </Badge>
+        <FilterLink
+          key={hardware}
+          filterValue={hardware}
+          filterSection="hardware"
+          diffFilter={diffFilter}
+        >
+          <Badge
+            key={hardware}
+            variant="outline"
+            className="text-sm font-normal"
+          >
+            {hardware}
+          </Badge>
+        </FilterLink>
       );
     });
-  }, [hardwareUsed]);
+  }, [diffFilter, hardwareUsed]);
 
   return (
     <BaseCard

diff --git a/dashboard/src/pages/TreeDetails/Tabs/Boots/BootsTab.tsx b/dashboard/src/pages/TreeDetails/Tabs/Boots/BootsTab.tsx
@@ -153,6 +153,7 @@ const BootsTab = ({ reqFilter }: BootsTabProps): JSX.Element => {
           <MemoizedHardwareTested
             title={<FormattedMessage id="bootsTab.hardwareTested" />}
             environmentCompatible={data.bootEnvironmentCompatible}
+            diffFilter={diffFilter}
           />
         </div>
       </DesktopGrid>
@@ -184,6 +185,7 @@ const BootsTab = ({ reqFilter }: BootsTabProps): JSX.Element => {
             <MemoizedHardwareTested
               title={<FormattedMessage id="bootsTab.hardwareTested" />}
               environmentCompatible={data.bootEnvironmentCompatible}
+              diffFilter={diffFilter}
             />
           </div>
         </InnerMobileGrid>

diff --git a/dashboard/src/pages/TreeDetails/Tabs/Tests/TestsTab.tsx b/dashboard/src/pages/TreeDetails/Tabs/Tests/TestsTab.tsx
@@ -156,6 +156,7 @@ const TestsTab = ({ reqFilter }: TestsTabProps): JSX.Element => {
           <MemoizedHardwareTested
             title={<FormattedMessage id="testsTab.hardwareTested" />}
             environmentCompatible={data.testEnvironmentCompatible}
+            diffFilter={diffFilter}
           />
         </div>
       </DesktopGrid>
@@ -187,6 +188,7 @@ const TestsTab = ({ reqFilter }: TestsTabProps): JSX.Element => {
             <MemoizedHardwareTested
               title={<FormattedMessage id="testsTab.hardwareTested" />}
               environmentCompatible={data.testEnvironmentCompatible}
+              diffFilter={diffFilter}
             />
           </div>
         </InnerMobileGrid>

diff --git a/dashboard/src/pages/TreeDetails/TreeDetails.tsx b/dashboard/src/pages/TreeDetails/TreeDetails.tsx
@@ -308,6 +308,7 @@ function TreeDetails(): JSX.Element {
           <MemoizedHardwareUsed
             title={<FormattedMessage id="treeDetails.hardwareUsed" />}
             hardwareUsed={testsData?.hardwareUsed}
+            diffFilter={diffFilter}
           />
         </div>
       </QuerySwitcher>