Use new DateFilterV2 for Advanced Visibility and Archival workflow listing (#917)

* Use DateFilterV2 for Advanced Visibility and Archival workflow listing
* Pre-compute the absolute dates in a memo, allowing a fresh list to be fetched on rerenders without needing a hard page reload
* Create new DomainWorkflowsAdvanced component that's just a wrapper for DomainWorkflowsHeader/Table
* Remove Archival start days config

Author: adhityamamallan

src/views/domain-page/__fixtures__/domain-page-query-params.ts

@@ -5,8 +5,8 @@ export const mockDomainPageQueryParamsValues = {
   inputType: 'search',
   search: '',
   statuses: undefined,
-  timeRangeStart: undefined,
-  timeRangeEnd: new Date('2024-12-17T03:24:00'),
+  timeRangeStart: 'now',
+  timeRangeEnd: 'now-7d',
   sortColumn: 'startTime',
   sortOrder: 'DESC',
   query: '',

src/views/domain-page/config/domain-page-query-params.config.ts

@@ -4,26 +4,21 @@ import {
   type PageQueryParamMultiValue,
   type PageQueryParam,
 } from '@/hooks/use-page-query-params/use-page-query-params.types';
-import dayjs from '@/utils/datetime/dayjs';
-import parseDateQueryParam from '@/utils/datetime/parse-date-query-param';
 import { type SortOrder } from '@/utils/sort-by';
-import DOMAIN_WORKFLOWS_ARCHIVAL_START_DAYS_CONFIG from '@/views/domain-workflows-archival/config/domain-workflows-archival-start-days.config';
 import { type WorkflowStatusClosed } from '@/views/domain-workflows-archival/domain-workflows-archival-header/domain-workflows-archival-header.types';
 import { type WorkflowStatusBasicVisibility } from '@/views/domain-workflows-basic/domain-workflows-basic-filters/domain-workflows-basic-filters.types';
 import isWorkflowStatusBasicVisibility from '@/views/domain-workflows-basic/domain-workflows-basic-filters/helpers/is-workflow-status-basic-visibility';
 import isWorkflowStatus from '@/views/shared/workflow-status-tag/helpers/is-workflow-status';
 import { type WorkflowStatus } from '@/views/shared/workflow-status-tag/workflow-status-tag.types';
 import { type WorkflowsHeaderInputType } from '@/views/shared/workflows-header/workflows-header.types';
 
-const now = dayjs();
-
 const domainPageQueryParamsConfig: [
   PageQueryParam<'inputType', WorkflowsHeaderInputType>,
   // Search input
   PageQueryParam<'search', string>,
   PageQueryParamMultiValue<'statuses', Array<WorkflowStatus> | undefined>,
-  PageQueryParam<'timeRangeStart', Date | undefined>,
-  PageQueryParam<'timeRangeEnd', Date>,
+  PageQueryParam<'timeRangeStart', DateFilterValue>,
+  PageQueryParam<'timeRangeEnd', DateFilterValue>,
   PageQueryParam<'sortColumn', string>,
   PageQueryParam<'sortOrder', SortOrder>,
   // Query input
@@ -41,8 +36,8 @@ const domainPageQueryParamsConfig: [
     'statusesArchival',
     Array<WorkflowStatusClosed> | undefined
   >,
-  PageQueryParam<'timeRangeStartArchival', Date>,
-  PageQueryParam<'timeRangeEndArchival', Date>,
+  PageQueryParam<'timeRangeStartArchival', DateFilterValue>,
+  PageQueryParam<'timeRangeEndArchival', DateFilterValue>,
   PageQueryParam<'sortColumnArchival', string>,
   PageQueryParam<'sortOrderArchival', SortOrder>,
   PageQueryParam<'queryArchival', string>,
@@ -67,13 +62,14 @@ const domainPageQueryParamsConfig: [
   {
     key: 'timeRangeStart',
     queryParamKey: 'start',
-    parseValue: parseDateQueryParam,
+    defaultValue: 'now-7d',
+    parseValue: (v) => parseDateFilterValue(v, 'now-7d'),
   },
   {
     key: 'timeRangeEnd',
     queryParamKey: 'end',
-    defaultValue: now.toDate(),
-    parseValue: (v) => parseDateQueryParam(v) ?? now.toDate(),
+    defaultValue: 'now',
+    parseValue: (v) => parseDateFilterValue(v, 'now'),
   },
   {
     key: 'sortColumn',
@@ -143,20 +139,14 @@ const domainPageQueryParamsConfig: [
   {
     key: 'timeRangeStartArchival',
     queryParamKey: 'astart',
-    defaultValue: now
-      .subtract(DOMAIN_WORKFLOWS_ARCHIVAL_START_DAYS_CONFIG, 'days')
-      .toDate(),
-    parseValue: (v) =>
-      parseDateQueryParam(v) ??
-      now
-        .subtract(DOMAIN_WORKFLOWS_ARCHIVAL_START_DAYS_CONFIG, 'days')
-        .toDate(),
+    defaultValue: 'now-7d',
+    parseValue: (v) => parseDateFilterValue(v, 'now-7d'),
   },
   {
     key: 'timeRangeEndArchival',
     queryParamKey: 'aend',
-    defaultValue: now.toDate(),
-    parseValue: (v) => parseDateQueryParam(v) ?? now.toDate(),
+    defaultValue: 'now',
+    parseValue: (v) => parseDateFilterValue(v, 'now'),
   },
   {
     key: 'sortColumnArchival',

src/views/domain-workflows-archival/__tests__/domain-workflows-archival.test.tsx

@@ -6,6 +6,7 @@ import { render, screen, act } from '@/test-utils/rtl';
 
 import { type DescribeDomainResponse } from '@/route-handlers/describe-domain/describe-domain.types';
 import { mockDomainDescription } from '@/views/domain-page/__fixtures__/domain-description';
+import { mockDomainPageQueryParamsValues } from '@/views/domain-page/__fixtures__/domain-page-query-params';
 
 import DomainWorkflowsArchival from '../domain-workflows-archival';
 
@@ -24,6 +25,11 @@ jest.mock(
   () => jest.fn(() => <div>Mock archival table</div>)
 );
 
+const mockSetQueryParams = jest.fn();
+jest.mock('@/hooks/use-page-query-params/use-page-query-params', () =>
+  jest.fn(() => [mockDomainPageQueryParamsValues, mockSetQueryParams])
+);
+
 describe(DomainWorkflowsArchival.name, () => {
   it('renders without error and shows archival disabled page', async () => {
     await setup({});

src/views/domain-workflows-archival/config/domain-workflows-archival-filters.config.ts

@@ -2,7 +2,9 @@ import { createElement } from 'react';
 
 import { omit } from 'lodash';
 
-import DateFilter from '@/components/date-filter/date-filter';
+import DateFilterV2 from '@/components/date-filter-v2/date-filter-v2';
+import { type DateFilterValue } from '@/components/date-filter-v2/date-filter-v2.types';
+import stringifyDateFilterValue from '@/components/date-filter-v2/helpers/stringify-date-filter-value';
 import ListFilterMulti from '@/components/list-filter-multi/list-filter-multi';
 import { type PageFilterConfig } from '@/components/page-filters/page-filters.types';
 import type domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
@@ -18,8 +20,8 @@ const domainWorkflowsArchivalFiltersConfig: [
   PageFilterConfig<
     typeof domainPageQueryParamsConfig,
     {
-      timeRangeStartArchival: Date | undefined;
-      timeRangeEndArchival: Date | undefined;
+      timeRangeStartArchival: DateFilterValue | undefined;
+      timeRangeEndArchival: DateFilterValue | undefined;
     }
   >,
 ] = [
@@ -43,12 +45,16 @@ const domainWorkflowsArchivalFiltersConfig: [
     id: 'dates',
     getValue: (v) => v,
     formatValue: (v) => ({
-      timeRangeStartArchival: v.timeRangeStartArchival?.toISOString(),
-      timeRangeEndArchival: v.timeRangeEndArchival?.toISOString(),
+      timeRangeStartArchival: v.timeRangeStartArchival
+        ? stringifyDateFilterValue(v.timeRangeStartArchival)
+        : undefined,
+      timeRangeEndArchival: v.timeRangeEndArchival
+        ? stringifyDateFilterValue(v.timeRangeEndArchival)
+        : undefined,
     }),
     component: ({ value, setValue }) =>
-      createElement(DateFilter, {
-        label: 'Dates',
+      createElement(DateFilterV2, {
+        label: 'Time range',
         placeholder: 'Select time range',
         dates: {
           start: value.timeRangeStartArchival,
@@ -59,7 +65,6 @@ const domainWorkflowsArchivalFiltersConfig: [
             timeRangeStartArchival: start,
             timeRangeEndArchival: end,
           }),
-        clearable: false,
       }),
   },
 ] as const;

src/views/domain-workflows-archival/config/domain-workflows-archival-start-days.config.ts

@@ -27,6 +27,8 @@ describe(DomainWorkflowsArchivalHeader.name, () => {
       <DomainWorkflowsArchivalHeader
         domain="mock_domain"
         cluster="mock_cluster"
+        timeRangeStart="mock-time-range-start"
+        timeRangeEnd="mock-time-range-end"
       />
     );
 

src/views/domain-workflows-archival/domain-workflows-archival-header/__tests__/domain-workflows-archival-header.test.tsx

@@ -13,6 +13,8 @@ import { type Props } from './domain-workflows-archival-header.types';
 export default function DomainWorkflowsArchivalHeader({
   domain,
   cluster,
+  timeRangeStart,
+  timeRangeEnd,
 }: Props) {
   const [queryParams] = usePageQueryParams(domainPageQueryParamsConfig);
 
@@ -24,8 +26,8 @@ export default function DomainWorkflowsArchivalHeader({
     inputType: queryParams.inputTypeArchival,
     search: queryParams.searchArchival,
     statuses: queryParams.statusesArchival,
-    timeRangeStart: queryParams.timeRangeStartArchival,
-    timeRangeEnd: queryParams.timeRangeEndArchival,
+    timeRangeStart,
+    timeRangeEnd,
     sortColumn: queryParams.sortColumnArchival,
     sortOrder: queryParams.sortOrderArchival,
     query: queryParams.queryArchival,

src/views/domain-workflows-archival/domain-workflows-archival-header/domain-workflows-archival-header.tsx

@@ -3,6 +3,8 @@ import { type WorkflowStatus } from '@/views/shared/workflow-status-tag/workflow
 export type Props = {
   domain: string;
   cluster: string;
+  timeRangeStart: string;
+  timeRangeEnd: string;
 };
 
 export type WorkflowStatusClosed = Exclude<

src/views/domain-workflows-archival/domain-workflows-archival-header/domain-workflows-archival-header.types.ts

@@ -131,6 +131,8 @@ function setup({
     <DomainWorkflowsArchivalTable
       domain="mock-domain"
       cluster="mock-cluster"
+      timeRangeStart="mock-time-range-start"
+      timeRangeEnd="mock-time-range-end"
     />,
     {
       endpointsMocks: [

src/views/domain-workflows-archival/domain-workflows-archival-table/__tests__/domain-workflows-archival-table.test.tsx

@@ -18,6 +18,8 @@ import getArchivalErrorPanelProps from './helpers/get-archival-error-panel-props
 export default function DomainWorkflowsArchivalTable({
   domain,
   cluster,
+  timeRangeStart,
+  timeRangeEnd,
 }: Props) {
   const [queryParams, setQueryParams] = usePageQueryParams(
     domainPageQueryParamsConfig
@@ -39,8 +41,8 @@ export default function DomainWorkflowsArchivalTable({
     inputType: queryParams.inputTypeArchival,
     search: queryParams.searchArchival,
     statuses: queryParams.statusesArchival,
-    timeRangeStart: queryParams.timeRangeStartArchival,
-    timeRangeEnd: queryParams.timeRangeEndArchival,
+    timeRangeStart,
+    timeRangeEnd,
     sortColumn: queryParams.sortColumnArchival,
     sortOrder: queryParams.sortOrderArchival,
     query: queryParams.queryArchival,