feat: use general components in filters

- apply in tree details
- apply in hardware details

Part of #600

dashboard/src/api/commitHistory.ts

@@ -6,9 +6,10 @@ import type {
   TTreeDetailsFilter,
 } from '@/types/tree/TreeDetails';
 
-import { getTargetFilter } from '@/utils/filters';
 import { mapFiltersKeysToBackendCompatible } from '@/utils/utils';
 
+import { getTargetFilter, type TFilter } from '@/types/general';
+
 import http from './api';
 
 const fetchCommitHistory = async (
@@ -48,7 +49,7 @@ export const useCommitHistory = (
     origin: string;
     gitUrl: string;
     gitBranch: string;
-    filter: TTreeDetailsFilter;
+    filter: TTreeDetailsFilter | TFilter;
   },
   { enabled = true },
 ): UseQueryResult<TTreeCommitHistoryResponse> => {

dashboard/src/api/hardwareDetails.ts

@@ -6,8 +6,8 @@ import type {
   THardwareDetailsFilter,
   TTreeCommits,
 } from '@/types/hardware/hardwareDetails';
-import { getTargetFilter } from '@/types/hardware/hardwareDetails';
-import type { TOrigins } from '@/types/general';
+import type { TFilter, TOrigins } from '@/types/general';
+import { getTargetFilter } from '@/types/general';
 
 import http from './api';
 
@@ -68,12 +68,20 @@ export const useHardwareDetails = (
   hardwareId: string,
   limitTimestampInSeconds: number,
   origin: TOrigins,
-  filter: { [key: string]: string[] },
+  filter: TFilter,
   selectedIndexes: number[],
   treeCommits: TTreeCommits,
 ): UseQueryResult<THardwareDetails> => {
+  const testFilter = getTargetFilter(filter, 'test');
   const detailsFilter = getTargetFilter(filter, 'hardwareDetails');
-  const filtersFormatted = mapFiltersKeysToBackendCompatible(detailsFilter);
+
+  const filters = {
+    ...testFilter,
+    ...detailsFilter,
+  };
+
+  const filtersFormatted = mapFiltersKeysToBackendCompatible(filters);
+
   const selectedTrees = mapIndexesToSelectedTrees(selectedIndexes, treeCommits);
 
   const body: fetchHardwareDetailsBody = {

dashboard/src/api/treeDetails.ts

@@ -10,9 +10,10 @@ import type {
   BuildCountsResponse,
   TTreeTestsFullData,
   LogFilesResponse,
+  TTreeCommitHistoryResponse,
 } from '@/types/tree/TreeDetails';
 
-import { getTargetFilter } from '@/utils/filters';
+import { getTargetFilter, type TFilter } from '@/types/general';
 
 import { mapFiltersKeysToBackendCompatible } from '@/utils/utils';
 
@@ -71,7 +72,7 @@ export const useBuildsTab = ({
   enabled = true,
 }: {
   treeId: string;
-  filter?: TTreeDetailsFilter | Record<string, never>;
+  filter?: TFilter;
   enabled?: boolean;
 }): UseQueryResult<BuildsTab> => {
   const detailsFilter = getTargetFilter(filter, 'treeDetails');
@@ -115,11 +116,11 @@ const fetchTreeTestsData = async (
 
 export const useTestsTab = ({
   treeId,
-  filter,
+  filter = {},
   enabled = true,
 }: {
   treeId: string;
-  filter: TTreeDetailsFilter;
+  filter?: TFilter;
   enabled?: boolean;
 }): UseQueryResult<TTreeTestsFullData> => {
   const testFilter = getTargetFilter(filter, 'test');
@@ -180,6 +181,70 @@ export const useTestsByTreeAndCommitHash = (
   });
 };
 
+const fetchTreeCommitHistory = async (
+  commitHash: string,
+  origin: string,
+  gitUrl: string,
+  gitBranch: string,
+  filters: TTreeDetailsFilter,
+): Promise<TTreeCommitHistoryResponse> => {
+  const filtersFormatted = mapFiltersKeysToBackendCompatible(filters);
+
+  const params = {
+    origin,
+    git_url: gitUrl,
+    git_branch: gitBranch,
+    ...filtersFormatted,
+  };
+
+  const res = await http.get<TTreeCommitHistoryResponse>(
+    `/api/tree/${commitHash}/commits`,
+    {
+      params,
+    },
+  );
+  return res.data;
+};
+
+export const useTreeCommitHistory = (
+  {
+    commitHash,
+    origin,
+    gitUrl,
+    gitBranch,
+    filter,
+  }: {
+    commitHash: string;
+    origin: string;
+    gitUrl: string;
+    gitBranch: string;
+    filter: TFilter;
+  },
+  { enabled = true },
+): UseQueryResult<TTreeCommitHistoryResponse> => {
+  const testFilter = getTargetFilter(filter, 'test');
+  const treeDetailsFilter = getTargetFilter(filter, 'treeDetails');
+
+  const filters = {
+    ...treeDetailsFilter,
+    ...testFilter,
+  };
+
+  return useQuery({
+    queryKey: [
+      'treeCommitHistory',
+      commitHash,
+      origin,
+      gitUrl,
+      gitBranch,
+      filters,
+    ],
+    enabled,
+    queryFn: () =>
+      fetchTreeCommitHistory(commitHash, origin, gitUrl, gitBranch, filters),
+  });
+};
+
 const fetchBuildStatusCount = async (
   buildId: string,
 ): Promise<BuildCountsResponse> => {

dashboard/src/components/CommitNavigationGraph/CommitNavigationGraph.tsx

@@ -11,9 +11,9 @@ import type { TLineChartProps } from '@/components/LineChart/LineChart';
 import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
 import type { MessagesKey } from '@/locales/messages';
 import { formatDate } from '@/utils/utils';
-import { mapFilterToReq } from '@/pages/TreeDetails/TreeDetailsFilter';
-import type { TFilter } from '@/types/tree/TreeDetails';
+import { mapFilterToReq } from '@/components/Tabs/Filters';
 import { useCommitHistory } from '@/api/commitHistory';
+import type { TFilter } from '@/types/general';
 
 const graphDisplaySize = 8;
 

dashboard/src/components/Filter/CheckboxSection.tsx

@@ -2,6 +2,10 @@ import cls from 'classnames';
 
 import { useCallback, useMemo } from 'react';
 
+import type { MessageDescriptor } from 'react-intl';
+
+import type { TFilterObjectsKeys } from '@/types/general';
+
 import Checkbox from '../Checkbox/Checkbox';
 
 type TOnClickItem = (value: string) => void;
@@ -34,6 +38,12 @@ export interface ICheckboxSection {
   className?: string;
 }
 
+export interface ISectionItem {
+  title: MessageDescriptor['id'];
+  subtitle: MessageDescriptor['id'];
+  sectionKey: TFilterObjectsKeys;
+}
+
 const CheckboxSectionItem = ({
   value,
   onClickItem,