SRVKP-12328: Add date range filter for PipelineRuns list page

src/components/common/DataViewFilterToolbar.tsx

@@ -32,6 +32,7 @@ export interface CheckboxFilterConfig {
   placeholder?: string;
   options: FilterOption[];
   defaultValues?: string[];
+  singleSelect?: boolean;
 }
 
 export interface FilterValues {
@@ -73,6 +74,11 @@ const CheckboxFilterInput: FC<{
 
   const onMenuSelect = (_event: unknown, itemId: string | number) => {
     const id = String(itemId);
+    if (config.singleSelect) {
+      onSelect([id]);
+      setIsOpen(false);
+      return;
+    }
     const newSelected = selected.includes(id)
       ? selected.filter((s) => s !== id)
       : [...selected, id];
@@ -110,14 +116,16 @@ const CheckboxFilterInput: FC<{
             onClick={handleToggleClick}
             isExpanded={isOpen}
             isFullWidth
-            icon={<FilterIcon />}
+            icon={config.singleSelect ? undefined : <FilterIcon />}
             badge={
-              selected.length > 0 ? (
+              !config.singleSelect && selected.length > 0 ? (
                 <Badge isRead>{selected.length}</Badge>
               ) : undefined
             }
           >
-            {config.placeholder || config.title}
+            {config.singleSelect && selected.length > 0
+              ? config.options.find((o) => o.value === selected[0])?.label
+              : config.placeholder || config.title}
           </MenuToggle>
         }
         triggerRef={toggleRef}
@@ -134,15 +142,17 @@ const CheckboxFilterInput: FC<{
                   <MenuItem
                     key={option.value}
                     itemId={option.value}
-                    hasCheckbox
+                    hasCheckbox={!config.singleSelect}
                     isSelected={selected.includes(option.value)}
                   >
                     {option.label}
-                    <Badge isRead className="pf-v6-u-ml-sm">
-                      {option.totalCount !== undefined
-                        ? `${option.count}/${option.totalCount}`
-                        : option.count}
-                    </Badge>
+                    {!config.singleSelect && (
+                      <Badge isRead className="pf-v6-u-ml-sm">
+                        {option.totalCount !== undefined
+                          ? `${option.count}/${option.totalCount}`
+                          : option.count}
+                      </Badge>
+                    )}
                   </MenuItem>
                 ))}
               </MenuList>

src/components/hooks/__tests__/useDateRangeFilter.spec.ts

@@ -0,0 +1,66 @@
+import {
+  useFlag,
+  useUserPreference,
+} from '@openshift-console/dynamic-plugin-sdk';
+import { testHook } from '../../../test-data/utils/hooks-utils';
+import { useDateRangeFilter } from '../useDateRangeFilter';
+
+jest.mock('@openshift-console/dynamic-plugin-sdk', () => ({
+  useFlag: jest.fn(),
+  useUserPreference: jest.fn(),
+}));
+
+const useFlagMock = useFlag as jest.Mock;
+const useUserPreferenceMock = useUserPreference as jest.Mock;
+
+const ONE_DAY_MS = 86400000;
+const ONE_WEEK_MS = 604800000;
+
+describe('useDateRangeFilter', () => {
+  let setTimespanMock: jest.Mock;
+
+  beforeEach(() => {
+    setTimespanMock = jest.fn();
+    useFlagMock.mockReturnValue(true);
+    useUserPreferenceMock.mockReturnValue([ONE_DAY_MS, setTimespanMock]);
+  });
+
+  it('should return timespan from user preference', () => {
+    const { result } = testHook(() => useDateRangeFilter());
+    expect(result.current.timespan).toBe(ONE_DAY_MS);
+  });
+
+  it('should compute startDate as Date.now() - timespan', () => {
+    const now = Date.now();
+    const { result } = testHook(() => useDateRangeFilter());
+    const diff = now - result.current.timespan;
+    expect(result.current.startDate).toBeGreaterThanOrEqual(diff - 100);
+    expect(result.current.startDate).toBeLessThanOrEqual(diff + 100);
+  });
+
+  it('should generate a valid CEL expression', () => {
+    const { result } = testHook(() => useDateRangeFilter());
+    expect(result.current.dateFilterCEL).toMatch(
+      /^data\.status\.startTime > timestamp\(".*"\)$/,
+    );
+  });
+
+  it('should default to 1 day when useUserPreference returns undefined', () => {
+    useUserPreferenceMock.mockReturnValue([undefined, setTimespanMock]);
+    const { result } = testHook(() => useDateRangeFilter());
+    expect(result.current.timespan).toBe(ONE_DAY_MS);
+    expect(result.current.dateFilterCEL).not.toBe('');
+  });
+
+  it('should expose setTimespan from the preference hook', () => {
+    const { result } = testHook(() => useDateRangeFilter());
+    result.current.setTimespan(ONE_WEEK_MS);
+    expect(setTimespanMock).toHaveBeenCalledWith(ONE_WEEK_MS);
+  });
+
+  it('should reflect the isTektonResultEnabled flag', () => {
+    useFlagMock.mockReturnValue(false);
+    const { result } = testHook(() => useDateRangeFilter());
+    expect(result.current.isTektonResultEnabled).toBe(false);
+  });
+});

src/components/hooks/useDateRangeFilter.ts

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+import {
+  useFlag,
+  useUserPreference,
+} from '@openshift-console/dynamic-plugin-sdk';
+import { FLAG_PIPELINE_TEKTON_RESULT_INSTALLED } from '../../consts';
+import { parsePrometheusDuration } from '../pipelines-overview/dateTime';
+
+export type DateRangeFilterResult = {
+  timespan: number;
+  setTimespan: (ms: number) => void;
+  startDate: number | undefined;
+  dateFilterCEL: string;
+  isTektonResultEnabled: boolean;
+  preferenceLoaded: boolean;
+};
+
+const SETTINGS_KEY = 'plugin__pipelines-console-plugin.dateRangeFilter';
+
+export const useDateRangeFilter = (): DateRangeFilterResult => {
+  const isTektonResultEnabled = useFlag(FLAG_PIPELINE_TEKTON_RESULT_INSTALLED);
+  const [timespan, setTimespan, preferenceLoaded] = useUserPreference<number>(
+    SETTINGS_KEY,
+    parsePrometheusDuration('1d'),
+    true,
+  );
+
+  const ts = timespan ?? parsePrometheusDuration('1d');
+
+  const startDate = useMemo(() => {
+    if (!ts) return undefined;
+    return Date.now() - ts;
+  }, [ts]);
+
+  const dateFilterCEL = useMemo(() => {
+    if (!startDate) return '';
+    return `data.status.startTime > timestamp("${new Date(
+      startDate,
+    ).toISOString()}")`;
+  }, [startDate]);
+
+  return {
+    timespan: ts,
+    setTimespan,
+    startDate,
+    dateFilterCEL,
+    isTektonResultEnabled,
+    preferenceLoaded,
+  };
+};

src/components/hooks/useTaskRuns.ts

@@ -21,7 +21,7 @@ import {
 } from '../../models';
 import { ApprovalTaskKind, PipelineRunKind, TaskRunKind } from '../../types';
 import { useDeepCompareMemoize } from '../utils/common-utils';
-import { EQ } from '../utils/tekton-results';
+import { AND, EQ } from '../utils/tekton-results';
 import { useMultiClusterProxyService } from './useMultiClusterProxyService';
 import { useMultiClusterTaskRuns } from './useMultiClusterTaskRuns';
 import { useTRRuns } from './useTektonResults';
@@ -191,12 +191,14 @@ export const usePipelineRuns = (
     selector?: Selector;
     limit?: number;
     name?: string;
+    filter?: string;
   },
 ): [PipelineRunKind[], boolean, boolean, Error | undefined, boolean, boolean] =>
   useRuns<PipelineRunKind>(PIPELINE_RUN_GVK, namespace, {
     selector: options?.selector,
     limit: options?.limit /* similar to one present in UseTaskRunsOptions */,
     name: options?.name /* similar to one present in UseTaskRunsOptions */,
+    filter: options?.filter,
   });
 
 export const useRuns = <Kind extends K8sResourceKind>(
@@ -207,6 +209,7 @@ export const useRuns = <Kind extends K8sResourceKind>(
     limit?: number;
     name?: string;
     skipFetch?: boolean;
+    filter?: string; // CEL expression sent to Tekton Results to retrieve PRs within the date range
   },
   pipelineRunFinished?: boolean,
   pipelineRunManagedBy?: string,
@@ -315,10 +318,10 @@ export const useRuns = <Kind extends K8sResourceKind>(
 
   const trOptions: typeof optionsMemo = useMemo(() => {
     if (optionsMemo?.name) {
-      const { name, ...rest } = optionsMemo;
+      const { name, filter, ...rest } = optionsMemo;
       return {
         ...rest,
-        filter: EQ('data.metadata.name', name),
+        filter: AND(EQ('data.metadata.name', name), filter),
       };
     }
     return optionsMemo;

src/components/hooks/useTektonResult.ts

@@ -1,5 +1,5 @@
 import { Selector, useFlag } from '@openshift-console/dynamic-plugin-sdk';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { RepositoryFields, RepositoryLabels } from '../../consts';
 import { FLAGS, PipelineRunKind } from '../../types';
 import { getTaskRunLog } from '../utils/tekton-results';
@@ -9,7 +9,7 @@ export type GetNextPage = () => void | undefined;
 
 export const useGetPipelineRuns = (
   ns: string,
-  options?: { name: string; kind: string },
+  options?: { name: string; kind: string; filter?: string },
 ): [
   PipelineRunKind[],
   boolean,
@@ -31,12 +31,18 @@ export const useGetPipelineRuns = (
     };
   }
 
-  return usePipelineRuns(
-    ns,
-    selector && {
-      selector,
-    },
-  );
+  const pipelineRunOptions = useMemo(() => {
+    const opts: Record<string, unknown> = {};
+    if (selector) {
+      opts.selector = selector;
+    }
+    if (options?.filter) {
+      opts.filter = options.filter;
+    }
+    return opts;
+  }, [selector, options?.filter]);
+
+  return usePipelineRuns(ns, pipelineRunOptions);
 };
 
 export const useTRTaskRunLog = (