Fix date query params for basic visibility (#857)

* Separate query params for basic visibility start/end time
* Allow caching for basic visibility workflow listing by removing gcTime: 0
* Default start/end time values moved to query params config
* Default values modified to:
  - end: end of current day
  - start: start of the day 30 days before current day
* Refetch workflows every 60 seconds
* Regenerate package.json (the version number is gone now)

Author: adhityamamallan

package-lock.json

@@ -13,6 +13,8 @@ export const mockDomainPageQueryParamsValues = {
   workflowId: '',
   workflowType: '',
   statusBasic: undefined,
+  timeRangeStartBasic: new Date('2024-11-17T03:24:00'),
+  timeRangeEndBasic: new Date('2024-12-17T03:24:00'),
   inputTypeArchival: 'search',
   searchArchival: '',
   statusesArchival: undefined,

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

@@ -2,9 +2,11 @@ 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 { type WorkflowStatusClosed } from '@/views/domain-workflows-archival/domain-workflows-archival-header/domain-workflows-archival-header.types';
+import DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG from '@/views/domain-workflows-basic/config/domain-workflows-basic-start-days.config';
 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';
@@ -26,6 +28,8 @@ const domainPageQueryParamsConfig: [
   PageQueryParam<'workflowId', string>,
   PageQueryParam<'workflowType', string>,
   PageQueryParam<'statusBasic', WorkflowStatusBasicVisibility | undefined>,
+  PageQueryParam<'timeRangeStartBasic', Date>,
+  PageQueryParam<'timeRangeEndBasic', Date>,
   // Archival inputs
   PageQueryParam<'inputTypeArchival', WorkflowsHeaderInputType>,
   PageQueryParam<'searchArchival', string>,
@@ -95,6 +99,24 @@ const domainPageQueryParamsConfig: [
     parseValue: (value: string) =>
       isWorkflowStatusBasicVisibility(value) ? value : undefined,
   },
+  {
+    key: 'timeRangeStartBasic',
+    queryParamKey: 'start',
+    defaultValue: dayjs()
+      .subtract(DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG, 'days')
+      .toDate(),
+    parseValue: (v) =>
+      parseDateQueryParam(v) ??
+      dayjs()
+        .subtract(DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG, 'days')
+        .toDate(),
+  },
+  {
+    key: 'timeRangeEndBasic',
+    queryParamKey: 'end',
+    defaultValue: dayjs().toDate(),
+    parseValue: (v) => parseDateQueryParam(v) ?? dayjs().toDate(),
+  },
   {
     key: 'inputTypeArchival',
     queryParamKey: 'ainput',

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

@@ -15,7 +15,10 @@ const domainWorkflowsBasicFiltersConfig: [
   >,
   PageFilterConfig<
     typeof domainPageQueryParamsConfig,
-    { timeRangeStart: Date | undefined; timeRangeEnd: Date | undefined }
+    {
+      timeRangeStartBasic: Date | undefined;
+      timeRangeEndBasic: Date | undefined;
+    }
   >,
 ] = [
   {
@@ -34,23 +37,26 @@ const domainWorkflowsBasicFiltersConfig: [
   {
     id: 'dates',
     getValue: (v) => ({
-      timeRangeStart: v.timeRangeStart,
-      timeRangeEnd: v.timeRangeEnd,
+      timeRangeStartBasic: v.timeRangeStartBasic,
+      timeRangeEndBasic: v.timeRangeEndBasic,
     }),
     formatValue: (v) => ({
-      timeRangeStart: v.timeRangeStart?.toISOString(),
-      timeRangeEnd: v.timeRangeEnd?.toISOString(),
+      timeRangeStartBasic: v.timeRangeStartBasic?.toISOString(),
+      timeRangeEndBasic: v.timeRangeEndBasic?.toISOString(),
     }),
     component: ({ value, setValue }) =>
       createElement(DateFilter, {
         label: 'Dates',
         placeholder: 'Select time range',
         dates: {
-          start: value.timeRangeStart,
-          end: value.timeRangeEnd,
+          start: value.timeRangeStartBasic,
+          end: value.timeRangeEndBasic,
         },
         onChangeDates: ({ start, end }) =>
-          setValue({ timeRangeStart: start, timeRangeEnd: end }),
+          setValue({
+            timeRangeStartBasic: start,
+            timeRangeEndBasic: end,
+          }),
         clearable: false,
       }),
   },

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

@@ -1,16 +1,14 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import usePageFilters from '@/components/page-filters/hooks/use-page-filters';
 import PageFiltersFields from '@/components/page-filters/page-filters-fields/page-filters-fields';
 import PageFiltersSearch from '@/components/page-filters/page-filters-search/page-filters-search';
 import PageFiltersToggle from '@/components/page-filters/page-filters-toggle/page-filters-toggle';
-import dayjs from '@/utils/datetime/dayjs';
 import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 
 import domainWorkflowsBasicFiltersConfig from '../config/domain-workflows-basic-filters.config';
 import DOMAIN_WORKFLOWS_BASIC_SEARCH_DEBOUNCE_MS from '../config/domain-workflows-basic-search-debounce-ms.config';
-import DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG from '../config/domain-workflows-basic-start-days.config';
 
 import { styled } from './domain-workflows-basic-filters.styles';
 
@@ -23,18 +21,6 @@ export default function DomainWorkflowsBasicFilters() {
       pageQueryParamsConfig: domainPageQueryParamsConfig,
     });
 
-  useEffect(() => {
-    if (!queryParams.timeRangeStart && !queryParams.timeRangeEnd) {
-      const now = dayjs();
-      setQueryParams({
-        timeRangeStart: now
-          .subtract(DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG, 'days')
-          .toISOString(),
-        timeRangeEnd: now.toISOString(),
-      });
-    }
-  }, [queryParams.timeRangeStart, queryParams.timeRangeEnd, setQueryParams]);
-
   return (
     <styled.HeaderContainer>
       <styled.InputContainer>

src/views/domain-workflows-basic/domain-workflows-basic-filters/domain-workflows-basic-filters.tsx

@@ -26,7 +26,6 @@ describe(getListWorkflowsBasicQueryOptions.name, () => {
         },
       ],
       initialPageParam: undefined,
-      gcTime: 0,
       retry: false,
     });
   });

src/views/domain-workflows-basic/hooks/helpers/__tests__/get-list-workflows-basic-query-options.test.ts

@@ -38,6 +38,5 @@ export default function getListWorkflowsBasicQueryOptions({
     },
     retry: false,
     refetchOnWindowFocus: (query) => query.state.status !== 'error',
-    gcTime: 0,
   };
 }

src/views/domain-workflows-basic/hooks/helpers/get-list-workflows-basic-query-options.ts

@@ -32,8 +32,8 @@ export default function useListWorkflowsBasic({
     const requestQueryParamsBase = {
       workflowId: queryParams.workflowId,
       workflowType: queryParams.workflowType,
-      timeRangeStart: queryParams.timeRangeStart?.toISOString() ?? '',
-      timeRangeEnd: queryParams.timeRangeEnd?.toISOString() ?? '',
+      timeRangeStart: queryParams.timeRangeStartBasic.toISOString(),
+      timeRangeEnd: queryParams.timeRangeEndBasic.toISOString(),
       pageSize: pageSize.toString(),
       ...(queryParams.statusBasic !== 'ALL_CLOSED' &&
       queryParams.statusBasic !== 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID'
@@ -77,8 +77,8 @@ export default function useListWorkflowsBasic({
     loadClosedWorkflows,
     queryParams.workflowId,
     queryParams.workflowType,
-    queryParams.timeRangeStart,
-    queryParams.timeRangeEnd,
+    queryParams.timeRangeStartBasic,
+    queryParams.timeRangeEndBasic,
     queryParams.statusBasic,
   ]);