Fixes to date filter and datetime utils (#792)

Fixes to date filter behaviour
- The date filter correctly sets start and end time when double clicking on a day in calendar
- The date filter now sets end time when closed after selecting only start time
- Updated quick select options with more useful values
Use dayjs to calculate time duration for archival and basic visibility views
Add the day gap in config
Remove unused datetime utils

src/components/date-filter/__tests__/date-filter.test.tsx

@@ -50,10 +50,8 @@ describe(DateFilter.name, () => {
     });
   });
 
-  it('resets to previous date when one date is selected and then the modal is closed', () => {
-    const { mockOnChangeDates } = setup({
-      overrides: mockDateOverrides,
-    });
+  it('sets start and end time accordingly when one date is selected and then the modal is closed', () => {
+    const { mockOnChangeDates } = setup({});
     const datePicker = screen.getByPlaceholderText('Mock placeholder');
 
     act(() => {
@@ -76,13 +74,13 @@ describe(DateFilter.name, () => {
       fireEvent.keyDown(datePicker, { keyCode: 9 });
     });
 
-    expect(datePicker).toHaveValue(
-      '23 May 2023, 00:00 +00 – 24 May 2023, 00:00 +00'
-    );
-    expect(mockOnChangeDates).not.toHaveBeenCalled();
+    expect(mockOnChangeDates).toHaveBeenCalledWith({
+      start: new Date('2023-05-13T00:00:00.000Z'),
+      end: new Date('2023-05-13T23:59:59.999Z'),
+    });
   });
 
-  it('resets to empty state when one date is selected and then the modal is closed', () => {
+  it('sets start and end time accordingly when the same date is selected', () => {
     const { mockOnChangeDates } = setup({});
     const datePicker = screen.getByPlaceholderText('Mock placeholder');
 
@@ -102,12 +100,20 @@ describe(DateFilter.name, () => {
       'Selected date is 13 May 2023, 00:00 +00. Select the second date.'
     );
 
+    screen.debug();
+
+    const timeRangeEndLabel = screen.getByLabelText(
+      "Selected start date. Saturday, May 13th 2023. It's available."
+    );
+
     act(() => {
-      fireEvent.keyDown(datePicker, { keyCode: 9 });
+      fireEvent.click(timeRangeEndLabel);
     });
 
-    expect(datePicker).toHaveValue('');
-    expect(mockOnChangeDates).not.toHaveBeenCalled();
+    expect(mockOnChangeDates).toHaveBeenCalledWith({
+      start: new Date('2023-05-13T00:00:00.000Z'),
+      end: new Date('2023-05-13T23:59:59.999Z'),
+    });
   });
 
   it('clears the date when the clear button is clicked', () => {

src/components/date-filter/date-filter.constants.ts

@@ -1 +1,11 @@
 export const DATE_FORMAT = 'dd MMM yyyy, HH:mm:ss z';
+
+export const QUICK_SELECT_OPTIONS = [
+  { label: 'Last 5 minutes', durationSeconds: 5 * 60 },
+  { label: 'Last 15 minutes', durationSeconds: 15 * 60 },
+  { label: 'Last 1 hour', durationSeconds: 1 * 60 * 60 },
+  { label: 'Last 6 hours', durationSeconds: 6 * 60 * 60 },
+  { label: 'Last 12 hours', durationSeconds: 12 * 60 * 60 },
+  { label: 'Last 1 day', durationSeconds: 1 * 24 * 60 * 60 },
+  { label: 'Last 7 days', durationSeconds: 7 * 24 * 60 * 60 },
+] as const satisfies Array<{ label: string; durationSeconds: number }>;

src/components/date-filter/date-filter.tsx

@@ -5,7 +5,9 @@ import { DatePicker } from 'baseui/datepicker';
 import { FormControl } from 'baseui/form-control';
 import { SIZE } from 'baseui/input';
 
-import { DATE_FORMAT } from './date-filter.constants';
+import dayjs from '@/utils/datetime/dayjs';
+
+import { DATE_FORMAT, QUICK_SELECT_OPTIONS } from './date-filter.constants';
 import { overrides } from './date-filter.styles';
 import { type Props } from './date-filter.types';
 
@@ -39,27 +41,45 @@ export default function DateFilter({
             return;
           }
           setInternalDates(newDates);
+
           if (newDates.length === 0) {
             onChangeDates({
               start: undefined,
               end: undefined,
             });
-          } else if (newDates.length === 2) {
+          } else if (newDates.length === 2 && newDates[0] && newDates[1]) {
             const [start, end] = newDates;
-            if (!start || !end) {
-              return;
-            }
-            onChangeDates({ start, end });
+            onChangeDates({
+              start,
+              end:
+                start.getTime() === end.getTime()
+                  ? dayjs(start).endOf('day').toDate()
+                  : end,
+            });
           }
         }}
         onClose={() => {
-          if (
-            internalDates.length !== 2 ||
-            internalDates.some((date) => !date)
-          ) {
+          if (internalDates.some((date) => !date)) {
             resetDates();
+          } else if (internalDates.length === 1 && internalDates[0]) {
+            onChangeDates({
+              start: internalDates[0],
+              end: dayjs(internalDates[0]).endOf('day').toDate(),
+            });
           }
         }}
+        quickSelectOptions={QUICK_SELECT_OPTIONS.map(
+          ({ label, durationSeconds }) => {
+            const now = new Date();
+            return {
+              id: label,
+              beginDate: dayjs(now)
+                .subtract(durationSeconds, 'seconds')
+                .toDate(),
+              endDate: now,
+            };
+          }
+        )}
         placeholder={placeholder}
         formatString={DATE_FORMAT}
         size={SIZE.compact}

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

@@ -0,0 +1,3 @@
+const DOMAIN_WORKFLOWS_ARCHIVAL_START_DAYS_CONFIG = 10;
+
+export default DOMAIN_WORKFLOWS_ARCHIVAL_START_DAYS_CONFIG;

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

@@ -2,13 +2,14 @@
 import { useEffect } from 'react';
 
 import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
-import getDateDaysBeforeToday from '@/utils/datetime/get-date-days-before-today';
+import dayjs from '@/utils/datetime/dayjs';
 import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 import useListWorkflows from '@/views/shared/hooks/use-list-workflows';
 import WorkflowsHeader from '@/views/shared/workflows-header/workflows-header';
 
 import domainWorkflowsArchivalFiltersConfig from '../config/domain-workflows-archival-filters.config';
 import DOMAIN_WORKFLOWS_ARCHIVAL_PAGE_SIZE from '../config/domain-workflows-archival-page-size.config';
+import DOMAIN_WORKFLOWS_ARCHIVAL_START_DAYS_CONFIG from '../config/domain-workflows-archival-start-days.config';
 
 import { type Props } from './domain-workflows-archival-header.types';
 
@@ -40,9 +41,12 @@ export default function DomainWorkflowsArchivalHeader({
       !queryParams.timeRangeStartArchival &&
       !queryParams.timeRangeEndArchival
     ) {
+      const now = dayjs(new Date());
       setQueryParams({
-        timeRangeStartArchival: getDateDaysBeforeToday(10).toISOString(),
-        timeRangeEndArchival: getDateDaysBeforeToday(0).toISOString(),
+        timeRangeStartArchival: now
+          .subtract(DOMAIN_WORKFLOWS_ARCHIVAL_START_DAYS_CONFIG, 'days')
+          .toISOString(),
+        timeRangeEndArchival: now.toISOString(),
       });
     }
   }, [

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

@@ -0,0 +1,3 @@
+const DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG = 30;
+
+export default DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG;

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

@@ -5,11 +5,12 @@ 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 getDateDaysBeforeToday from '@/utils/datetime/get-date-days-before-today';
+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';
 
@@ -24,9 +25,12 @@ export default function DomainWorkflowsBasicFilters() {
 
   useEffect(() => {
     if (!queryParams.timeRangeStart && !queryParams.timeRangeEnd) {
+      const now = dayjs(new Date());
       setQueryParams({
-        timeRangeStart: getDateDaysBeforeToday(30).toISOString(),
-        timeRangeEnd: getDateDaysBeforeToday(0).toISOString(),
+        timeRangeStart: now
+          .subtract(DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG, 'days')
+          .toISOString(),
+        timeRangeEnd: now.toISOString(),
       });
     }
   }, [queryParams.timeRangeStart, queryParams.timeRangeEnd, setQueryParams]);