Fixed : Ingestion wizard issue (#1223)

* Fixed : Ingestion wizard issue

* Removed unused css

* removed css import from modal component.

catalog-rest-service/src/main/resources/ui/package.json

@@ -49,6 +49,7 @@
     "markdown-draft-js": "^2.3.0",
     "mobx": "6.0.1",
     "mobx-react": "6.1.4",
+    "moment": "^2.29.1",
     "oidc-client": "^1.11.5",
     "path-browserify": "^1.0.1",
     "popper.js": "1.16.1",

catalog-rest-service/src/main/resources/ui/src/components/IngestionModal/IngestionModal.component.tsx

@@ -17,7 +17,8 @@
 
 import classNames from 'classnames';
 import cronstrue from 'cronstrue';
-import React, { Fragment, useEffect, useState } from 'react';
+import { utc } from 'moment';
+import React, { Fragment, ReactNode, useEffect, useState } from 'react';
 import { CronError } from 'react-js-cron';
 import { IngestionType } from '../../enums/service.enum';
 import { getIngestionTypeList } from '../../utils/ServiceUtils';
@@ -26,7 +27,6 @@ import { Button } from '../buttons/Button/Button';
 import CronEditor from '../common/CronEditor/CronEditor.component';
 import IngestionStepper from '../IngestionStepper/IngestionStepper.component';
 import { Steps } from '../IngestionStepper/IngestionStepper.interface';
-import './IngestionModal.css';
 import {
   IngestionModalProps,
   ServiceData,
@@ -64,13 +64,13 @@ const PreviewSection = ({
   className,
 }: {
   header: string;
-  data: Array<{ key: string; value: string }>;
+  data: Array<{ key: string; value: string | ReactNode }>;
   className: string;
 }) => {
   return (
     <div className={className}>
       {/* <hr className="tw-border-separator" /> */}
-      <p className="preview-header tw-px-1">{header}</p>
+      <p className="tw-font-medium tw-px-1 tw-mb-2">{header}</p>
       <div className="tw-grid tw-gap-4 tw-grid-cols-3 tw-place-content-center tw-pl-6">
         {data.map((d, i) => (
           <div key={i}>
@@ -96,7 +96,7 @@ const getIngestionName = (name: string) => {
 };
 
 const getCurrentDate = () => {
-  return `${new Date().toLocaleDateString('en-CA')}`;
+  return `${utc(new Date()).format('YYYY-MM-DD')}`;
 };
 
 const setService = (
@@ -118,13 +118,15 @@ const IngestionModal: React.FC<IngestionModalProps> = ({
   updateIngestion,
   selectedIngestion,
 }: IngestionModalProps) => {
-  const [activeStep, setActiveStep] = useState<number>(1);
+  const [activeStep, setActiveStep] = useState<number>(isUpdating ? 2 : 1);
 
   const [startDate, setStartDate] = useState<string>(
-    selectedIngestion?.startDate || getCurrentDate()
+    utc(selectedIngestion?.startDate).format('YYYY-MM-DD') || getCurrentDate()
   );
   const [endDate, setEndDate] = useState<string>(
-    selectedIngestion?.endDate || ''
+    selectedIngestion?.endDate
+      ? utc(selectedIngestion?.endDate).format('YYYY-MM-DD')
+      : ''
   );
 
   const [ingestionName, setIngestionName] = useState<string>(
@@ -166,7 +168,7 @@ const IngestionModal: React.FC<IngestionModalProps> = ({
     selectedIngestion?.scheduleInterval || '*/5 * * * *'
   );
   const [cronError, setCronError] = useState<CronError>();
-
+  const [isPasswordVisible, setIspasswordVisible] = useState<boolean>(false);
   const [showErrorMsg, setShowErrorMsg] = useState<ValidationErrorMsg>({
     selectService: false,
     name: false,
@@ -511,8 +513,15 @@ const IngestionModal: React.FC<IngestionModalProps> = ({
                   onError={setCronError}>
                   <p className="tw-text-grey-muted tw-text-xs tw-mt-1">
                     <span>( </span>
-                    <span className="tw-font-normal">{ingestionSchedule}</span>
-                    <span> in UTC Timezone ) </span>
+                    <span className="tw-font-normal">
+                      <span>
+                        {cronstrue.toString(ingestionSchedule || '', {
+                          use24HourTimeFormat: true,
+                          verbose: true,
+                        })}
+                      </span>
+                    </span>
+                    <span> ) </span>
                   </p>
                   {showErrorMsg.ingestionSchedule
                     ? errorMsg('Ingestion schedule is required')
@@ -520,27 +529,27 @@ const IngestionModal: React.FC<IngestionModalProps> = ({
                 </CronEditor>
               </div>
             </div>
-            <Field>
-              <label htmlFor="startDate">Start date:</label>
-              <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
-                pattern="YY-MM-DD"
-                type="date"
-                value={startDate}
-                onChange={(e) => setStartDate(e.target.value)}
-              />
-            </Field>
-            <Field>
-              <label htmlFor="endDate">End date:</label>
-              <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
-                min={startDate}
-                pattern="YY-MM-DD"
-                type="date"
-                value={endDate}
-                onChange={(e) => setEndDate(e.target.value)}
-              />
-            </Field>
+            <div className="tw-grid tw-grid-cols-2 tw-gap-x-2">
+              <Field>
+                <label htmlFor="startDate">Start date (UTC):</label>
+                <input
+                  className="tw-form-inputs tw-px-3 tw-py-1"
+                  type="date"
+                  value={startDate}
+                  onChange={(e) => setStartDate(e.target.value)}
+                />
+              </Field>
+              <Field>
+                <label htmlFor="endDate">End date (UTC):</label>
+                <input
+                  className="tw-form-inputs tw-px-3 tw-py-1"
+                  min={startDate}
+                  type="date"
+                  value={endDate}
+                  onChange={(e) => setEndDate(e.target.value)}
+                />
+              </Field>
+            </div>
           </Fragment>
         );
       case 4:
@@ -563,7 +572,32 @@ const IngestionModal: React.FC<IngestionModalProps> = ({
                 className="tw-mb-4 tw-mt-6"
                 data={[
                   { key: 'Username', value: username },
-                  { key: 'Password', value: password },
+                  {
+                    key: 'Password',
+                    value: (
+                      <div>
+                        <span
+                          className={classNames({
+                            'tw-align-middle': !isPasswordVisible,
+                          })}>
+                          {isPasswordVisible
+                            ? password
+                            : ''.padStart(password.length, '*')}
+                        </span>
+                        <i
+                          className={classNames(
+                            'far tw-text-grey-body tw-ml-2',
+                            {
+                              'fa-eye-slash': isPasswordVisible,
+                            },
+
+                            { 'fa-eye ': !isPasswordVisible }
+                          )}
+                          onClick={() => setIspasswordVisible((pre) => !pre)}
+                        />
+                      </div>
+                    ),
+                  },
                   { key: 'Host', value: host },
                   { key: 'Database', value: database },
                   { key: 'Include views', value: includeViews ? 'Yes' : 'No' },

catalog-rest-service/src/main/resources/ui/src/components/IngestionModal/IngestionModal.css

@@ -1,23 +0,0 @@
-/*
-  * Licensed to the Apache Software Foundation (ASF) under one or more
-  * contributor license agreements. See the NOTICE file distributed with
-  * this work for additional information regarding copyright ownership.
-  * The ASF licenses this file to You under the Apache License, Version 2.0
-  * (the "License"); you may not use this file except in compliance with
-  * the License. You may obtain a copy of the License at
-
-  * http://www.apache.org/licenses/LICENSE-2.0
-
-  * Unless required by applicable law or agreed to in writing, software
-  * distributed under the License is distributed on an "AS IS" BASIS,
-  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  * See the License for the specific language governing permissions and
-  * limitations under the License.
-*/
-
-.preview-header {
-  transform: translateY(-13px);
-  font-size: 14px;
-  display: inline-block;
-  background: white;
-}