Merge pull request #487 from Enterprise-CMCS/master

Release to val
Enterprise-CMCS · Apr 4, 2024 · 8024a5f · 8024a5f
2 parents b4956d1 + 2b06965
commit 8024a5f
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 43 deletions.
diff --git a/src/services/ui/src/components/Opensearch/main/Filtering/Chipbar/index.tsx b/src/services/ui/src/components/Opensearch/main/Filtering/Chipbar/index.tsx
@@ -3,6 +3,7 @@ import { type FC, useCallback } from "react";
 import { Chip, useOsUrl, checkMultiFilter } from "@/components";
 import { opensearch } from "shared-types";
 import { useFilterDrawerContext } from "../FilterProvider";
+import { offsetFromUtc } from "shared-utils";
 import { useLabelMapping } from "@/hooks";
 
 export interface RenderProp {
@@ -43,10 +44,10 @@ export const ChipDate: FC<RenderProp> = ({
         clearFilter(filter);
       }}
     >
-      {`${filter?.label}: ${new Date(
-        value.gte || ""
-      ).toLocaleDateString()} - ${new Date(
-        value.lte || ""
+      {`${filter?.label}: ${offsetFromUtc(
+        new Date(value.gte || ""),
+      ).toLocaleDateString()} - ${offsetFromUtc(
+        new Date(value.lte || ""),
       ).toLocaleDateString()}`}
     </Chip>
   );
@@ -89,7 +90,7 @@ export const FilterChips: FC = () => {
   const twoOrMoreFiltersApplied = checkMultiFilter(url.state.filters, 2);
   const clearFilter = (
     filter: opensearch.main.Filterable,
-    valIndex?: number
+    valIndex?: number,
   ) => {
     url.onSet((s) => {
       let filters = s.filters;

diff --git a/src/services/ui/src/components/Opensearch/main/Filtering/Drawer/Filterable/DateRange.tsx b/src/services/ui/src/components/Opensearch/main/Filtering/Drawer/Filterable/DateRange.tsx
@@ -25,7 +25,11 @@ import {
   Input,
 } from "@/components";
 import { opensearch } from "shared-types";
-import { getNextBusinessDayTimestamp, offsetFromUtc } from "shared-utils";
+import {
+  getNextBusinessDayTimestamp,
+  offsetFromUtc,
+  offsetToUtc,
+} from "shared-utils";
 
 type Props = Omit<
   React.HTMLAttributes<HTMLDivElement>,
@@ -39,30 +43,24 @@ type Props = Omit<
 export function FilterableDateRange({ value, onChange, ...props }: Props) {
   const [open, setOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState<DateRange | undefined>({
-    from: value?.gte ? new Date(value?.gte) : undefined,
-    to: value?.lte ? new Date(value?.lte) : undefined,
+    from: value?.gte ? offsetToUtc(new Date(value?.gte)) : undefined,
+    to: value?.lte ? offsetToUtc(new Date(value?.lte)) : undefined,
   });
   const [fromValue, setFromValue] = useState<string>(
-    value?.gte ? format(new Date(value?.gte), "MM/dd/yyyy") : ""
+    value?.gte ? format(offsetToUtc(new Date(value?.gte)), "MM/dd/yyyy") : "",
   );
   const [toValue, setToValue] = useState<string>(
-    value?.lte ? format(new Date(value?.lte), "MM/dd/yyyy") : ""
+    value?.lte ? format(offsetToUtc(new Date(value?.lte)), "MM/dd/yyyy") : "",
   );
 
   const handleClose = (updateOpen: boolean) => {
     setOpen(updateOpen);
   };
 
-  const checkSingleDateSelection = (
-    from: Date | undefined,
-    to: Date | undefined
-  ) => {
-    if (from && !to) {
-      const rangeObject = getDateRange(from, endOfDay(from));
-      onChange(rangeObject);
-      setFromValue(format(from, "MM/dd/yyyy"));
-    }
-  };
+  const offsetRangeToUtc = (val: opensearch.RangeValue) => ({
+    gte: val.gte ? offsetToUtc(new Date(val.gte)).toISOString() : undefined,
+    lte: val.lte ? offsetToUtc(new Date(val.lte)).toISOString() : undefined,
+  });
 
   const onFromInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     const minValidYear = 1960;
@@ -83,10 +81,12 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) {
         setToValue("");
       } else {
         setSelectedDate({ from: date, to: selectedDate?.to });
-        onChange({
-          gte: date.toISOString(),
-          lte: selectedDate?.to?.toISOString() || "",
-        });
+        onChange(
+          offsetRangeToUtc({
+            gte: date.toISOString(),
+            lte: selectedDate?.to?.toISOString() || "",
+          }),
+        );
       }
     }
   };
@@ -112,17 +112,19 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) {
         setFromValue("");
       } else {
         setSelectedDate({ from: selectedDate?.from, to: date });
-        onChange({
-          gte: selectedDate?.from?.toISOString() || "",
-          lte: endOfDay(date).toISOString(),
-        });
+        onChange(
+          offsetRangeToUtc({
+            gte: selectedDate?.from?.toISOString() || "",
+            lte: endOfDay(date).toISOString(),
+          }),
+        );
       }
     }
   };
 
   const getDateRange = (
     startDate: Date,
-    endDate: Date
+    endDate: Date,
   ): opensearch.RangeValue => {
     return {
       gte: startDate.toISOString(),
@@ -142,7 +144,7 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) {
     }
 
     const rangeObject = getDateRange(startDate, endOfDay(today));
-    onChange(rangeObject);
+    onChange(offsetRangeToUtc(rangeObject));
     setSelectedDate({ from: startDate, to: today });
     setFromValue(format(startDate, "MM/dd/yyyy"));
     setToValue(format(today, "MM/dd/yyyy"));
@@ -167,7 +169,7 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) {
             id="date"
             className={cn(
               "flex items-center w-[270px] border-[1px] border-black p-2 justify-start text-left font-normal",
-              !value && "text-muted-foreground"
+              !value && "text-muted-foreground",
             )}
           >
             <CalendarIcon className="mr-2 h-4 w-4" />
@@ -181,7 +183,9 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) {
           sideOffset={1}
         >
           <Calendar
-            disabled={[{ after: offsetFromUtc(new Date(getNextBusinessDayTimestamp())) }]}
+            disabled={[
+              { after: offsetFromUtc(new Date(getNextBusinessDayTimestamp())) },
+            ]}
             initialFocus
             mode="range"
             defaultMonth={selectedDate?.from}
@@ -191,21 +195,28 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) {
             onSelect={(d) => {
               setSelectedDate(d);
               if (!!d?.from && !!d.to) {
-                onChange({
-                  gte: d.from.toISOString(),
-                  lte: endOfDay(d.to).toISOString(),
-                });
+                onChange(
+                  offsetRangeToUtc({
+                    gte: d.from.toISOString(),
+                    lte: endOfDay(d.to).toISOString(),
+                  }),
+                );
                 setFromValue(format(d.from, "MM/dd/yyyy"));
                 setToValue(format(d.to, "MM/dd/yyyy"));
               } else if (!d?.from && !d?.to) {
-                onChange({
-                  gte: "",
-                  lte: "",
-                });
+                onChange(
+                  offsetRangeToUtc({
+                    gte: "",
+                    lte: "",
+                  }),
+                );
                 setFromValue("");
                 setToValue("");
-              } else {
-                checkSingleDateSelection(d.from, d.to);
+              } else if (d?.from && !d?.to) {
+                setFromValue(format(d.from, "MM/dd/yyyy"));
+                onChange(
+                  offsetRangeToUtc(getDateRange(d.from, endOfDay(d.from))),
+                );
               }
             }}
             {...props}
@@ -241,7 +252,7 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) {
         className="text-white"
         onClick={() => {
           setSelectedDate({ from: undefined, to: undefined });
-          onChange({ gte: undefined, lte: undefined });
+          onChange(offsetRangeToUtc({ gte: undefined, lte: undefined }));
           setToValue("");
           setFromValue("");
         }}