Merge pull request #116 from navi-sa/TP-51644

TP-51644 | Date filter bug fix from UI

src/Pages/Dashboard/SearchResultsTable.module.scss

@@ -66,4 +66,5 @@
   align-items: center;
   position: fixed;
   z-index: var(--title-z-index);
+  line-height: 1;
 }

src/Pages/Dashboard/partials/Date.tsx

@@ -3,12 +3,16 @@ import { useState, useEffect, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
 import styles from './DashboardHeader.module.scss';
 import { Button } from '@navi/web-ui/lib/primitives';
 
 import useClickStream from '@src/services/clickStream';
 import { CLICK_STREAM_EVENT_FACTORY } from '@src/services/clickStream/constants/values';
-
+import { formatDate } from '@src/services/globalUtils';
+import { DATE_FORMAT } from '@src/services/constants';
 export interface DateProps {
   clearSearchValue: () => void;
   updateURLAndFetchData: (payload: string) => void;
@@ -61,16 +65,34 @@ const Date: React.FC<DateProps> = ({
     updateURLAndFetchData(updatedQuery);
   };
 
+  const formatDates = (start_date, end_date) => {
+    const fromDate = dayjs(start_date).startOf('day');
+    const toDate = dayjs(end_date).endOf('day');
+
+    const formattedFromDate = fromDate.format(DATE_FORMAT);
+    const formattedToDate = toDate.format(DATE_FORMAT);
+
+    const startDateUTC = dayjs(formattedFromDate).utc().format('');
+    const endDateUTC = dayjs(formattedToDate).utc().format('');
+    return {
+      formattedFromDate: startDateUTC,
+      formattedToDate: endDateUTC,
+    };
+  };
   const handleApplyClick = () => {
     fireEvent(EVENT_NAME.Houston_Check_DateFilter, {
       screen_name: SCREEN_NAME.DASHBOARD_PAGE,
     });
-    if (date.length === 2) {
-      const [start_date, end_date] = date;
-      const formattedStartDate = formatDate(start_date);
-      const formattedEndDate = formatDate(end_date);
-      searchParams.set('from', formattedStartDate);
-      searchParams.set('to', formattedEndDate);
+    if (date?.length === 2) {
+      let [start_date, end_date] = date;
+      start_date = formatDate(start_date);
+      end_date = formatDate(end_date);
+      const { formattedFromDate, formattedToDate } = formatDates(
+        start_date,
+        end_date,
+      );
+      searchParams.set('from', formattedFromDate);
+      searchParams.set('to', formattedToDate);
       searchParams.delete('incident_name');
       searchParams.set('page_number', '0');
       searchParams.set('page_size', '10');
@@ -80,12 +102,6 @@ const Date: React.FC<DateProps> = ({
     }
     setOpen(false);
   };
-
-  const formatDate = (date: string) => {
-    const [day, month, year] = date.split('/');
-    return `${year}-${month}-${day}`;
-  };
-
   return (
     <div className={styles['date-wrapper']}>
       <ConfigProvider

src/services/constants.ts

@@ -1 +1,2 @@
 export const JANUS_API = `/events`;
+export const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';

src/services/globalUtils.ts

@@ -57,3 +57,7 @@ export const handleCopyClick = (textToCopy: string): void => {
 export const createURL = (endpoint: string): string => {
   return `${window?.config?.BASE_API_URL}${endpoint}`;
 };
+export const formatDate = (date: string) => {
+  const [day, month, year] = date.split('/');
+  return `${year}-${month}-${day}`;
+};