refactor: reuse OriginsCard as generic FiltersCard

Author: MarceloRobert

dashboard/src/components/Cards/OriginsCard.tsx renamed to dashboard/src/components/Cards/FilterCard.tsx

@@ -13,35 +13,38 @@ import type {
   TFilter,
   TFilterObjectsKeys,
 } from '@/types/general';
+import type { MessagesKey } from '@/locales/messages';
 
 interface IOriginsCard {
-  origins: Record<string, RequiredStatusCount>;
+  data: Record<string, RequiredStatusCount>;
   diffFilter: TFilter;
   filterSection: TFilterObjectsKeys;
-  hideSingleOrigin?: boolean;
+  hideSingleValue?: boolean;
+  cardTitle: MessagesKey;
 }
 
-const OriginsCard = ({
-  origins,
+const FilterCard = ({
+  data,
   diffFilter,
   filterSection,
-  hideSingleOrigin = true,
+  hideSingleValue = true,
+  cardTitle,
 }: IOriginsCard): JSX.Element => {
   const content: JSX.Element[] = useMemo(() => {
-    return Object.keys(origins).map(originItem => {
-      const { DONE, FAIL, ERROR, MISS, PASS, SKIP, NULL } = origins[originItem];
+    return Object.keys(data).map(item => {
+      const { DONE, FAIL, ERROR, MISS, PASS, SKIP, NULL } = data[item];
 
       return (
         <FilterLink
-          key={originItem}
-          filterValue={originItem}
+          key={item}
+          filterValue={item}
           filterSection={filterSection}
           diffFilter={diffFilter}
         >
           <ListingItem
             hasBottomBorder
-            key={originItem}
-            text={originItem}
+            key={item}
+            text={item}
             leftIcon={
               <GroupedTestStatus
                 done={DONE}
@@ -57,17 +60,17 @@ const OriginsCard = ({
         </FilterLink>
       );
     });
-  }, [origins, filterSection, diffFilter]);
+  }, [data, filterSection, diffFilter]);
 
-  if (hideSingleOrigin && Object.keys(origins).length === 1) {
+  if (hideSingleValue && Object.keys(data).length === 1) {
     return <></>;
   }
 
   return (
-    <BaseCard title={<FormattedMessage id="filter.origins" />}>
+    <BaseCard title={<FormattedMessage id={cardTitle} />}>
       <DumbListingContent>{content}</DumbListingContent>
     </BaseCard>
   );
 };
 
-export const MemoizedOriginsCard = memo(OriginsCard);
+export const MemoizedFilterCard = memo(FilterCard);

dashboard/src/pages/TreeDetails/Tabs/Boots/BootsTab.tsx

@@ -34,7 +34,7 @@ import type { TreeDetailsLazyLoaded } from '@/hooks/useTreeDetailsLazyLoadQuery'
 import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
 import { generateDiffFilter } from '@/components/Tabs/tabsUtils';
 import { MemoizedSectionError } from '@/components/DetailsPages/SectionError';
-import { MemoizedOriginsCard } from '@/components/Cards/OriginsCard';
+import { MemoizedFilterCard } from '@/components/Cards/FilterCard';
 import { sanitizeTreeinfo } from '@/utils/treeDetails';
 import { MemoizedKcidevFooter } from '@/components/Footer/KcidevFooter';
 import { getStringParam } from '@/utils/utils';
@@ -277,10 +277,11 @@ const BootsTab = ({
           environmentCompatible={hardwareData}
           diffFilter={diffFilter}
         />,
-        <MemoizedOriginsCard
+        <MemoizedFilterCard
+          cardTitle="filter.origins"
           key="origins"
           diffFilter={diffFilter}
-          origins={summaryBootsData?.origins ?? {}}
+          data={summaryBootsData?.origins ?? {}}
           filterSection="bootOrigin"
         />,
       ],

dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx

@@ -45,7 +45,7 @@ import { generateDiffFilter } from '@/components/Tabs/tabsUtils';
 
 import { MemoizedSectionError } from '@/components/DetailsPages/SectionError';
 
-import { MemoizedOriginsCard } from '@/components/Cards/OriginsCard';
+import { MemoizedFilterCard } from '@/components/Cards/FilterCard';
 import { sanitizeTreeinfo } from '@/utils/treeDetails';
 import { MemoizedKcidevFooter } from '@/components/Footer/KcidevFooter';
 
@@ -209,10 +209,11 @@ const BuildTab = ({
           toggleFilterBySection={toggleFilterBySection}
           diffFilter={diffFilter}
         />,
-        <MemoizedOriginsCard
+        <MemoizedFilterCard
+          cardTitle="filter.origins"
           key="origins"
           diffFilter={diffFilter}
-          origins={treeDetailsData.origins}
+          data={treeDetailsData.origins}
           filterSection="buildOrigin"
         />,
         <MemoizedConfigsCard

dashboard/src/pages/TreeDetails/Tabs/Tests/TestsTab.tsx

@@ -34,7 +34,7 @@ import type { TreeDetailsLazyLoaded } from '@/hooks/useTreeDetailsLazyLoadQuery'
 import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
 import { generateDiffFilter } from '@/components/Tabs/tabsUtils';
 import { MemoizedSectionError } from '@/components/DetailsPages/SectionError';
-import { MemoizedOriginsCard } from '@/components/Cards/OriginsCard';
+import { MemoizedFilterCard } from '@/components/Cards/FilterCard';
 import { sanitizeTreeinfo } from '@/utils/treeDetails';
 import { MemoizedKcidevFooter } from '@/components/Footer/KcidevFooter';
 import { getStringParam } from '@/utils/utils';
@@ -278,10 +278,11 @@ const TestsTab = ({
           environmentCompatible={hardwareData}
           diffFilter={diffFilter}
         />,
-        <MemoizedOriginsCard
+        <MemoizedFilterCard
+          cardTitle="filter.origins"
           key="origins"
           diffFilter={diffFilter}
-          origins={summaryTestsData?.origins ?? {}}
+          data={summaryTestsData?.origins ?? {}}
           filterSection="testOrigin"
         />,
       ],