Fix issue-4813 UI: Improve UX in Metadata Ingestion page (#4848)

openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/AddIngestion.component.tsx

@@ -91,10 +91,10 @@ const AddIngestion = ({
   const [repeatFrequency, setRepeatFrequency] = useState(
     data?.airflowConfig.scheduleInterval ?? INGESTION_SCHEDULER_INITIAL_VALUE
   );
-  const [startDate, setStartDate] = useState(
+  const [startDate] = useState(
     data?.airflowConfig.startDate ?? getCurrentDate()
   );
-  const [endDate, setEndDate] = useState(data?.airflowConfig?.endDate ?? '');
+  const [endDate] = useState(data?.airflowConfig?.endDate ?? '');
 
   const [showDashboardFilter, setShowDashboardFilter] = useState(
     !isUndefined(
@@ -654,14 +654,10 @@ const AddIngestion = ({
 
         {activeIngestionStep === 3 && (
           <ScheduleInterval
-            endDate={endDate as string}
-            handleEndDateChange={(value: string) => setEndDate(value)}
             handleRepeatFrequencyChange={(value: string) =>
               setRepeatFrequency(value)
             }
-            handleStartDateChange={(value: string) => setStartDate(value)}
             repeatFrequency={repeatFrequency}
-            startDate={startDate as string}
             status={saveState}
             submitButtonLabel={isUndefined(data) ? 'Add & Deploy' : 'Submit'}
             onBack={handlePrev}

openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ScheduleInterval.test.tsx

@@ -30,10 +30,6 @@ const mockScheduleIntervalProps: ScheduleIntervalProps = {
   status: 'initial',
   repeatFrequency: '',
   handleRepeatFrequencyChange: jest.fn(),
-  startDate: '',
-  handleStartDateChange: jest.fn(),
-  endDate: '',
-  handleEndDateChange: jest.fn(),
   onBack: jest.fn(),
   onDeploy: jest.fn(),
   submitButtonLabel: 'Add',
@@ -49,16 +45,12 @@ describe('Test ScheduleInterval component', () => {
       container,
       'schedule-intervel-container'
     );
-    const startDate = await findByTestId(container, 'start-date');
-    const endDate = await findByTestId(container, 'end-date');
     const backButton = await findByTestId(container, 'back-button');
     const deployButton = await findByTestId(container, 'deploy-button');
     const cronEditor = await findByText(container, 'CronEditor.component');
 
     expect(scheduleIntervelContainer).toBeInTheDocument();
     expect(cronEditor).toBeInTheDocument();
-    expect(startDate).toBeInTheDocument();
-    expect(endDate).toBeInTheDocument();
     expect(backButton).toBeInTheDocument();
     expect(deployButton).toBeInTheDocument();
   });

openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ScheduleInterval.tsx

@@ -23,10 +23,6 @@ const ScheduleInterval = ({
   status,
   repeatFrequency,
   handleRepeatFrequencyChange,
-  startDate,
-  handleStartDateChange,
-  endDate,
-  handleEndDateChange,
   submitButtonLabel,
   onBack,
   onDeploy,
@@ -34,40 +30,13 @@ const ScheduleInterval = ({
   return (
     <div data-testid="schedule-intervel-container">
       <Field>
-        <div className="tw-flex tw-mt-2 tw-ml-3">
+        <div>
           <CronEditor
             value={repeatFrequency}
             onChange={handleRepeatFrequencyChange}
           />
         </div>
       </Field>
-      <div className="tw-grid tw-grid-cols-2 tw-gap-x-4">
-        <Field>
-          <label htmlFor="startDate">Start date (UTC):</label>
-          <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
-            data-testid="start-date"
-            type="date"
-            value={startDate}
-            onChange={(e) => {
-              handleStartDateChange(e.target.value);
-            }}
-          />
-        </Field>
-        <Field>
-          <label htmlFor="endDate">End date (UTC):</label>
-          <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
-            data-testid="end-date"
-            min={startDate}
-            type="date"
-            value={endDate}
-            onChange={(e) => {
-              handleEndDateChange(e.target.value);
-            }}
-          />
-        </Field>
-      </div>
       <Field className="tw-flex tw-justify-end tw-mt-5">
         <Button
           className="tw-mr-2"

openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/addIngestion.interface.ts

@@ -100,11 +100,7 @@ export type ScheduleIntervalProps = {
   status: LoadingState;
   repeatFrequency: string;
   handleRepeatFrequencyChange: (value: string) => void;
-  startDate: string;
-  handleStartDateChange: (value: string) => void;
-  endDate: string;
   submitButtonLabel: string;
-  handleEndDateChange: (value: string) => void;
   onBack: () => void;
   onDeploy: () => void;
 };

openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.jsx

@@ -145,7 +145,7 @@ const CronEditor = (props) => {
 
   const option = periodOptions.find((o) => o.value === selectedPeriod);
 
-  const startText = 'Repeat every';
+  const startText = 'Scheduled to run every';
   const cronPeriodString = `${startText} ${selectedPeriod}`;
 
   const changeValue = (state) => {
@@ -226,7 +226,7 @@ const CronEditor = (props) => {
   };
 
   const getTextComp = (str) => {
-    return <div className="cron-string">{str}</div>;
+    return <div>{str}</div>;
   };
 
   const findHourOption = (hour) => {
@@ -246,7 +246,7 @@ const CronEditor = (props) => {
 
     return (
       <select
-        className="tw-form-inputs tw-py-1 tw-ml-2 tw-px-1"
+        className="tw-form-inputs tw-py-1 tw-px-1"
         disabled={disabled}
         value={selectedOption.hour}
         onChange={(e) => {
@@ -316,24 +316,19 @@ const CronEditor = (props) => {
 
     return (
       state.selectedPeriod === 'hour' && (
-        <cron-hour-component>
-          <div className="cron-field-row">
-            <span className="m-l-xs">Day : </span>
-            <div className="cron-badge-option-container week-opt-container">
-              {getBadgeOptions(dayOptions, -1, 1, null)}
-            </div>
-          </div>
-          <div className="tw-flex tw-justify-center tw-items-center">
-            <label className="tw-mr-2 tw-flex-none tw-mt-1">Minute :</label>
+        <>
+          <div className="tw-mb-1.5">
+            <label>Minute :</label>
             {getMinuteSelect(selectedHourOption, (e) =>
               onHourOptionSelect(e, 'min')
             )}
           </div>
-
-          {getTextComp(
-            `${cronPeriodString} ${selectedHourOption.min} minute past the hour`
-          )}
-        </cron-hour-component>
+          <div className="tw-col-span-2">
+            {getTextComp(
+              `${cronPeriodString} ${selectedHourOption.min} minute past the hour`
+            )}
+          </div>
+        </>
       )
     );
   };
@@ -346,15 +341,9 @@ const CronEditor = (props) => {
 
     return (
       state.selectedPeriod === 'day' && (
-        <cron-day-component>
-          <div className="cron-field-row">
-            <span className="m-l-xs">Day : </span>
-            <div className="cron-badge-option-container week-opt-container">
-              {getBadgeOptions(dayOptions, -1, 1, null)}
-            </div>
-          </div>
-          <div className="tw-flex">
-            <label className="tw-mt-1">Time :</label>
+        <>
+          <div className="tw-mb-1.5">
+            <label>Time :</label>
             <div className="tw-flex">
               {getHourSelect(selectedDayOption, (e) =>
                 onDayOptionSelect(e, 'hour')
@@ -365,8 +354,10 @@ const CronEditor = (props) => {
               )}
             </div>
           </div>
-          {getTextComp(`${cronPeriodString} at ${hourLabel}:${minuteLabel}`)}
-        </cron-day-component>
+          <div className="tw-col-span-2">
+            {getTextComp(`${cronPeriodString} at ${hourLabel}:${minuteLabel}`)}
+          </div>
+        </>
       )
     );
   };
@@ -383,17 +374,9 @@ const CronEditor = (props) => {
 
     return (
       state.selectedPeriod === 'week' && (
-        <cron-week-component>
-          <div className="cron-field-row">
-            <span className="m-l-xs">Day : </span>
-            <div className="cron-badge-option-container week-opt-container">
-              {getBadgeOptions(dayOptions, selectedWeekOption.dow, 1, (e) =>
-                onWeekOptionSelect(e, 'dow')
-              )}
-            </div>
-          </div>
-          <div className="tw-flex">
-            <label className="tw-mt-1">Time :</label>
+        <>
+          <div className="tw-mb-1.5">
+            <label>Time :</label>
             <div className="tw-flex">
               {getHourSelect(selectedWeekOption, (e) =>
                 onWeekOptionSelect(e, 'hour')
@@ -404,11 +387,20 @@ const CronEditor = (props) => {
               )}
             </div>
           </div>
-
-          {getTextComp(
-            `${cronPeriodString} on ${dayLabel} at ${hourLabel}:${minuteLabel}`
-          )}
-        </cron-week-component>
+          <div className="tw-pt-2">
+            <span>Day : </span>
+            <div className="cron-badge-option-container week-opt-container">
+              {getBadgeOptions(dayOptions, selectedWeekOption.dow, 1, (e) =>
+                onWeekOptionSelect(e, 'dow')
+              )}
+            </div>
+          </div>
+          <div className="tw-col-span-2">
+            {getTextComp(
+              `${cronPeriodString} on ${dayLabel} at ${hourLabel}:${minuteLabel}`
+            )}
+          </div>
+        </>
       )
     );
   };
@@ -511,13 +503,11 @@ const CronEditor = (props) => {
   return (
     <div className={`${className} cron-row`}>
       <div className="">
-        <div className="">
-          <div className="tw-flex tw-mb-1.5">
-            <label className="tw-mb-0 tw-self-center" htmlFor="ingestionType">
-              Every:
-            </label>
+        <div className="tw-grid tw-grid-cols-2 tw-gap-4">
+          <div className="tw-mb-1.5">
+            <label htmlFor="ingestionType">Every:</label>
             <select
-              className="tw-ml-2 tw-form-inputs tw-py-1"
+              className="tw-form-inputs tw-px-3 tw-py-1"
               disabled={disabled}
               id="ingestionType"
               name="ingestionType"

openmetadata-ui/src/main/resources/ui/src/constants/service-guide.constant.ts

@@ -32,7 +32,7 @@ const schedulingIngestionGuide = {
   step: 3,
   title: 'Schedule for Ingestion',
   description:
-    'Scheduling can be set up at an hourly, daily, or weekly cadence. The timezone is in UTC. Select a Start Date to schedule for ingestion. It is optional to add an End Date.',
+    'Scheduling can be set up at an hourly, daily, or weekly cadence. The timezone is in UTC.',
 };
 
 export const addMetadataIngestionGuide = [