From 1e4231f2f2f1ccd8203a3b9a49e6132252a2fcdd Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Wed, 26 Apr 2023 17:31:48 +0530
Subject: [PATCH] fixed ui: [UI] Data Insights UI does not show scheduling
 options and range selector not including last day bug (#11288)

* fixed ui: [UI] Data Insights UI does not show scheduling options and range selector not including last day bug

* removing subtraction logic

* fixed time range issue

* cypress fix
---
 .../AddIngestion/AddIngestion.component.tsx       |  1 +
 .../AddIngestion/Steps/ScheduleInterval.tsx       |  2 ++
 .../AddIngestion/addIngestion.interface.ts        |  1 +
 .../DatePickerMenu/DatePickerMenu.component.tsx   | 15 +++++++++++----
 .../common/CronEditor/CronEditor.interface.ts     |  1 +
 .../components/common/CronEditor/CronEditor.tsx   |  4 ++--
 .../src/main/resources/ui/src/utils/TimeUtils.ts  | 10 ++++++++--
 7 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/AddIngestion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/AddIngestion.component.tsx
index 9c4d01c4463..908ab8d3246 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/AddIngestion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/AddIngestion.component.tsx
@@ -778,6 +778,7 @@ const AddIngestion = ({
 
         {activeIngestionStep === 4 && (
           <ScheduleInterval
+            disabledCronChange={pipelineType === PipelineType.DataInsight}
             includePeriodOptions={
               pipelineType === PipelineType.DataInsight ? ['day'] : undefined
             }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ScheduleInterval.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ScheduleInterval.tsx
index f8aa4561223..45b36766c2a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ScheduleInterval.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ScheduleInterval.tsx
@@ -20,6 +20,7 @@ import CronEditor from '../../common/CronEditor/CronEditor';
 import { ScheduleIntervalProps } from '../addIngestion.interface';
 
 const ScheduleInterval = ({
+  disabledCronChange,
   includePeriodOptions,
   onBack,
   onChange,
@@ -39,6 +40,7 @@ const ScheduleInterval = ({
       <Col span={24}>
         <div>
           <CronEditor
+            disabledCronChange={disabledCronChange}
             includePeriodOptions={includePeriodOptions}
             value={repeatFrequency}
             onChange={handleRepeatFrequencyChange}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/addIngestion.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/addIngestion.interface.ts
index 3ed2876a962..f8820efe6a1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/addIngestion.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/addIngestion.interface.ts
@@ -83,6 +83,7 @@ export type ScheduleIntervalProps = {
   repeatFrequency: string;
   includePeriodOptions?: string[];
   submitButtonLabel: string;
+  disabledCronChange?: boolean;
   onBack: () => void;
   onDeploy: () => void;
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DatePickerMenu/DatePickerMenu.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DatePickerMenu/DatePickerMenu.component.tsx
index b64d219d08b..8b5e5baaf56 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DatePickerMenu/DatePickerMenu.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DatePickerMenu/DatePickerMenu.component.tsx
@@ -19,6 +19,7 @@ import {
   DEFAULT_SELECTED_RANGE,
   PROFILER_FILTER_RANGE,
 } from 'constants/profiler.constant';
+import { isUndefined } from 'lodash';
 import { MenuInfo } from 'rc-menu/lib/interface';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -56,9 +57,9 @@ function DatePickerMenu({
     dateStrings
   ) => {
     if (values) {
-      const startTs = Date.parse(dateStrings[0]) / 1000;
+      const startTs = values[0]?.set({ h: 0, m: 0 }).utc().unix() ?? 0;
 
-      const endTs = Date.parse(dateStrings[1]) / 1000;
+      const endTs = values[1]?.set({ h: 23, m: 59 }).utc().unix() ?? 0;
 
       const daysCount = getDaysCount(dateStrings[0], dateStrings[1]);
 
@@ -78,8 +79,13 @@ function DatePickerMenu({
   };
 
   const handleOptionClick = ({ key }: MenuInfo) => {
-    const selectedNumberOfDays =
-      PROFILER_FILTER_RANGE[key as keyof typeof PROFILER_FILTER_RANGE].days;
+    const filterRange =
+      PROFILER_FILTER_RANGE[key as keyof typeof PROFILER_FILTER_RANGE];
+    if (isUndefined(filterRange)) {
+      return;
+    }
+
+    const selectedNumberOfDays = filterRange.days;
     const keyString = key as keyof typeof PROFILER_FILTER_RANGE;
     const startTs = getPastDatesTimeStampFromCurrentDate(selectedNumberOfDays);
 
@@ -108,6 +114,7 @@ function DatePickerMenu({
             <DatePicker.RangePicker
               bordered={false}
               clearIcon={<CloseCircleOutlined />}
+              format={(value) => value.utc().format('YYYY-MM-DD')}
               open={isMenuOpen}
               placement="bottomRight"
               suffixIcon={null}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.interface.ts
index 5a488fef7d7..3f37d0cb752 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.interface.ts
@@ -88,6 +88,7 @@ export interface CronEditorProp {
   value?: string;
   className?: string;
   disabled?: boolean;
+  disabledCronChange?: boolean;
   includePeriodOptions?: string[];
 }
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.tsx
index 2526636a4d3..53264821a86 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.tsx
@@ -142,7 +142,7 @@ const CronEditor: FC<CronEditorProp> = (props) => {
     }
   }, [props, periodOptions]);
 
-  const { className, disabled } = props;
+  const { className, disabled, disabledCronChange } = props;
   const { selectedPeriod } = state;
 
   const startText = t('label.schedule-to-run-every');
@@ -557,7 +557,7 @@ const CronEditor: FC<CronEditorProp> = (props) => {
             <Select
               className="w-full"
               data-testid="cron-type"
-              disabled={disabled}
+              disabled={disabledCronChange || disabled}
               id="cronType"
               options={filteredPeriodOptions.map(({ label, value }) => ({
                 label,
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts
index 1bfad142f5a..2183299364d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TimeUtils.ts
@@ -196,7 +196,10 @@ export const getPastDaysDateTimeMillis = (days: number) =>
 export const getFormattedDateFromSeconds = (
   timeStamp: number,
   format?: string
-) => DateTime.fromSeconds(timeStamp || 0).toFormat(format || 'dd/MMM HH:mm');
+) =>
+  DateTime.fromSeconds(timeStamp || 0)
+    .toUTC()
+    .toFormat(format || 'dd/MMM HH:mm');
 /**
  * It takes a timestamp in milliseconds and returns a formatted date string
  * @param {number} timeStamp - The timeStamp in milliseconds.
@@ -205,7 +208,10 @@ export const getFormattedDateFromSeconds = (
 export const getFormattedDateFromMilliSeconds = (
   timeStamp: number,
   format?: string
-) => DateTime.fromMillis(timeStamp || 0).toFormat(format || 'dd/MMM');
+) =>
+  DateTime.fromMillis(timeStamp || 0)
+    .toUTC()
+    .toFormat(format || 'dd/MMM');
 
 /**
  * It takes a timestamp in milliseconds and returns a formatted date like 'Oct 14, 1983, 9:30 AM'.