Fixes to date filter and 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]);