Fix(UI) #8727: Worked on improvements in Data Insight Ingestion step (#8757)

* - Added more information about fields in metadata to ES config step
- Styling improvement for the same step
- Data insight pipelines can only be sheduled with day option

* Worked on comments and code optimisation in MetadataToESConfigForm

* Added missing dependancies for useMemo in CronEditor

* Worked on comments

* Changed component name and converted components to arrow functions

* Component name correction

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

@@ -54,7 +54,7 @@ import IngestionStepper from '../IngestionStepper/IngestionStepper.component';
 import DeployIngestionLoaderModal from '../Modals/DeployIngestionLoaderModal/DeployIngestionLoaderModal';
 import { AddIngestionProps } from './addIngestion.interface';
 import ConfigureIngestion from './Steps/ConfigureIngestion';
-import MetadataToESConfigForm from './Steps/MetadataToESConfigForm';
+import MetadataToESConfigForm from './Steps/MetadataToESConfigForm/MetadataToESConfigForm';
 import ScheduleInterval from './Steps/ScheduleInterval';
 
 const AddIngestion = ({
@@ -799,7 +799,6 @@ const AddIngestion = ({
             handleMetadataToESConfig={handleMetadataToESConfig}
             handleNext={handleNext}
             handlePrev={handlePrev}
-            metadataToESConfig={metadataToESConfig}
           />
         )}
 
@@ -808,6 +807,9 @@ const AddIngestion = ({
             handleRepeatFrequencyChange={(value: string) =>
               setRepeatFrequency(value)
             }
+            includePeriodOptions={
+              pipelineType === PipelineType.DataInsight ? ['day'] : undefined
+            }
             repeatFrequency={repeatFrequency}
             status={saveState}
             submitButtonLabel={isUndefined(data) ? 'Add & Deploy' : 'Submit'}

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

@@ -1,105 +0,0 @@
-import { Button, Form, Input, Switch } from 'antd';
-import React, { useState } from 'react';
-import { ConfigClass } from '../../../generated/entity/services/ingestionPipelines/ingestionPipeline';
-
-interface Props {
-  metadataToESConfig?: ConfigClass;
-  handleMetadataToESConfig: (data: ConfigClass) => void;
-  handlePrev: () => void;
-  handleNext: () => void;
-}
-
-export default function MetadataToESConfigForm({
-  metadataToESConfig,
-  handleMetadataToESConfig,
-  handlePrev,
-  handleNext,
-}: Props) {
-  const [caCerts, SetCaCerts] = useState<string>('');
-  const [regionName, SetRegionName] = useState<string>('');
-  const [timeout, SetTimeout] = useState<number>(0);
-  const [useAwsCredentials, SetUseAwsCredentials] = useState<boolean>(false);
-  const [useSSL, SetUseSSL] = useState<boolean>(false);
-  const [verifyCerts, SetVerifyCerts] = useState<boolean>(false);
-
-  const handleCaCertsChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    SetCaCerts(event.target.value);
-  };
-  const handleRegionNameChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    SetRegionName(event.target.value);
-  };
-  const handleTimeoutChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    SetTimeout(Number(event.target.value));
-  };
-  const handleAwaCredentialsChange = (checked: boolean) => {
-    SetUseAwsCredentials(checked);
-  };
-  const handleUseSSLChange = (checked: boolean) => {
-    SetUseSSL(checked);
-  };
-  const handleVerifyCertsChange = (checked: boolean) => {
-    SetVerifyCerts(checked);
-  };
-
-  return (
-    <Form layout="vertical">
-      <Form.Item label="caCerts">
-        <Input
-          value={metadataToESConfig?.caCerts}
-          onChange={handleCaCertsChange}
-        />
-      </Form.Item>
-      <Form.Item label="regionName">
-        <Input
-          value={metadataToESConfig?.regionName}
-          onChange={handleRegionNameChange}
-        />
-      </Form.Item>
-      <Form.Item label="timeout">
-        <Input
-          type="number"
-          value={metadataToESConfig?.timeout}
-          onChange={handleTimeoutChange}
-        />
-      </Form.Item>
-      <Form.Item label="useAwsCredentials">
-        <Switch
-          checked={metadataToESConfig?.useAwsCredentials}
-          onClick={handleAwaCredentialsChange}
-        />
-      </Form.Item>
-      <Form.Item label="useSSL">
-        <Switch
-          checked={metadataToESConfig?.useSSL}
-          onClick={handleUseSSLChange}
-        />
-      </Form.Item>
-      <Form.Item label="verifyCerts">
-        <Switch
-          checked={metadataToESConfig?.verifyCerts}
-          onClick={handleVerifyCertsChange}
-        />
-      </Form.Item>
-      <Button type="link" onClick={handlePrev}>
-        Back
-      </Button>
-      <Button
-        type="primary"
-        onClick={() => {
-          handleMetadataToESConfig({
-            caCerts,
-            regionName,
-            timeout,
-            useAwsCredentials,
-            useSSL,
-            verifyCerts,
-          });
-          handleNext();
-        }}>
-        Next
-      </Button>
-    </Form>
-  );
-}

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

@@ -0,0 +1,33 @@
+/*
+ *  Copyright 2022 Collate
+ *  Licensed 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.
+ */
+import { Space, Typography } from 'antd';
+import React from 'react';
+
+const { Text } = Typography;
+
+const EsConfigFieldLabel = ({
+  label,
+  description,
+}: {
+  label: string;
+  description: string;
+}) => {
+  return (
+    <Space direction="vertical">
+      <Text>{label}</Text>
+      <Text className="input-field-descriptions">{description}</Text>
+    </Space>
+  );
+};
+
+export default EsConfigFieldLabel;

openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/MetadataToESConfigForm.less

@@ -0,0 +1,46 @@
+/*
+ *  Copyright 2022 Collate
+ *  Licensed 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.
+ */
+
+@description-color: #6b7280;
+
+.metadata-to-es-config-form {
+  .ant-form-item-label {
+    padding: 0px;
+  }
+
+  .ant-input {
+    margin-top: 8px;
+  }
+
+  .input-field-descriptions {
+    color: @description-color;
+  }
+
+  .switch-field-descriptions {
+    color: @description-color;
+    display: block;
+    margin-top: 8px;
+  }
+
+  .switch-item {
+    gap: 8px;
+    align-items: center;
+    flex-flow: nowrap;
+    margin-bottom: 8px;
+  }
+
+  .ant-btn {
+    height: 38px;
+    border-radius: 8px;
+  }
+}

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

@@ -0,0 +1,134 @@
+/*
+ *  Copyright 2022 Collate
+ *  Licensed 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.
+ */
+import {
+  Button,
+  Col,
+  Divider,
+  Form,
+  Input,
+  Row,
+  Switch,
+  Typography,
+} from 'antd';
+import { startCase } from 'lodash';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ConfigClass } from '../../../../generated/entity/services/ingestionPipelines/ingestionPipeline';
+import EsConfigFieldLabel from './EsConfigFieldLabel.component';
+import './MetadataToESConfigForm.less';
+
+interface Props {
+  handleMetadataToESConfig: (data: ConfigClass) => void;
+  handlePrev: () => void;
+  handleNext: () => void;
+}
+
+const { Text } = Typography;
+
+const MetadataToESConfigForm = ({
+  handleMetadataToESConfig,
+  handlePrev,
+  handleNext,
+}: Props) => {
+  const { t } = useTranslation();
+
+  const handleSubmit = (values: ConfigClass) => {
+    handleMetadataToESConfig({
+      ...values,
+    });
+    handleNext();
+  };
+
+  return (
+    <Form
+      className="metadata-to-es-config-form"
+      layout="vertical"
+      onFinish={handleSubmit}>
+      <Form.Item
+        label={
+          <EsConfigFieldLabel
+            description={t('message.field-ca-certs-description')}
+            label={startCase('caCerts')}
+          />
+        }
+        name="caCerts">
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={
+          <EsConfigFieldLabel
+            description={t('message.field-region-name-description')}
+            label={startCase('regionName')}
+          />
+        }
+        name="regionName">
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={
+          <EsConfigFieldLabel
+            description={t('message.field-timeout-description')}
+            label={startCase('timeout')}
+          />
+        }
+        name="timeout">
+        <Input type="number" />
+      </Form.Item>
+      <Divider />
+      <Form.Item
+        className="switch-item"
+        label={startCase('useAwsCredentials')}
+        name="useAwsCredentials">
+        <Switch />
+      </Form.Item>
+      <Text className="switch-field-descriptions">
+        {t('message.field-use-aws-credentials-description')}
+      </Text>
+      <Divider />
+      <Form.Item
+        className="switch-item"
+        label={startCase('useSSL')}
+        name="useSSL">
+        <Switch />
+      </Form.Item>
+      <Text className="switch-field-descriptions">
+        {t('message.field-use-ssl-description')}
+      </Text>
+      <Divider />
+      <Form.Item
+        className="switch-item"
+        label={startCase('verifyCerts')}
+        name="verifyCerts">
+        <Switch />
+      </Form.Item>
+      <Text className="switch-field-descriptions">
+        {t('message.field-verify-certs-description')}
+      </Text>
+      <Divider />
+      <Row justify="end">
+        <Col>
+          <Button type="link" onClick={handlePrev}>
+            {t('label.back')}
+          </Button>
+        </Col>
+        <Col>
+          <Button htmlType="submit" type="primary">
+            {t('label.next')}
+          </Button>
+        </Col>
+      </Row>
+    </Form>
+  );
+};
+
+export default MetadataToESConfigForm;

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

@@ -26,12 +26,14 @@ const ScheduleInterval = ({
   submitButtonLabel,
   onBack,
   onDeploy,
+  includePeriodOptions,
 }: ScheduleIntervalProps) => {
   return (
     <div data-testid="schedule-intervel-container">
       <Field>
         <div>
           <CronEditor
+            includePeriodOptions={includePeriodOptions}
             value={repeatFrequency}
             onChange={handleRepeatFrequencyChange}
           />

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

@@ -116,6 +116,7 @@ export type ScheduleIntervalProps = {
   status: LoadingState;
   repeatFrequency: string;
   handleRepeatFrequencyChange: (value: string) => void;
+  includePeriodOptions?: string[];
   submitButtonLabel: string;
   onBack: () => void;
   onDeploy: () => void;

openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.interface.ts

@@ -88,4 +88,5 @@ export interface CronEditorProp {
   value?: string;
   className?: string;
   disabled?: boolean;
+  includePeriodOptions?: string[];
 }

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

@@ -12,7 +12,7 @@
  */
 
 import { isEmpty, toNumber } from 'lodash';
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 import { pluralize } from '../../../utils/CommonUtils';
 import { getCron } from '../../../utils/CronUtils';
 import {
@@ -127,6 +127,17 @@ const CronEditor: FC<CronEditorProp> = (props) => {
   const [monthDaysOptions] = useState(getMonthDaysOptions());
   const [monthOptions] = useState(getMonthOptions());
 
+  const filteredPeriodOptions = useMemo(() => {
+    const { includePeriodOptions } = props;
+    if (includePeriodOptions) {
+      return periodOptions.filter((option) =>
+        includePeriodOptions.includes(option.label)
+      );
+    } else {
+      return periodOptions;
+    }
+  }, [props, periodOptions]);
+
   const { className, disabled } = props;
   const { selectedPeriod } = state;
 
@@ -608,7 +619,7 @@ const CronEditor: FC<CronEditorProp> = (props) => {
                 e.persist();
                 onPeriodSelect(e);
               }}>
-              {periodOptions.map((t, index) => {
+              {filteredPeriodOptions.map((t, index) => {
                 return (
                   <option key={`period_option_${index}`} value={t.value}>
                     {t.label}

openmetadata-ui/src/main/resources/ui/src/constants/ingestion.constant.ts

@@ -17,7 +17,7 @@ import { FilterPattern } from '../generated/entity/services/ingestionPipelines/i
 export const STEPS_FOR_ADD_INGESTION: Array<StepperStepType> = [
   { name: 'Configure Ingestion', step: 1 },
   { name: 'Configure DBT', step: 2 },
-  { name: 'Configure Metadata to ES Config', step: 3 },
+  { name: 'Configure Metadata to ES Config (Optional)', step: 3 },
   { name: 'Schedule Interval', step: 4 },
 ];
 

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -275,6 +275,8 @@
     "data-insight-chart": "Data insight chart",
     "data-assets": "Data Assets",
     "app-analytics": "App Analytics",
+    "back": "Back",
+    "next": "Next",
     "no-team-found": "No team found.",
     "quality": "Quality",
     "insight": "Insight",
@@ -323,7 +325,13 @@
     "interval-required": "Interval is required",
     "enter-interval": "Enter interval",
     "interval-unit-required": "Interval unit is required",
-    "select-interval-unit": "Select interval unit"
+    "select-interval-unit": "Select interval unit",
+    "field-use-ssl-description": "Indicates whether to use SSL when connecting to ElasticSearch. By default, we will ignore SSL settings.",
+    "field-verify-certs-description": "Indicates whether to verify certificates when using SSL connection to ElasticSearch. Ignored by default. Is set to true, make sure to send the certificates in the property `CA Certificates`.",
+    "field-timeout-description": "Connection Timeout",
+    "field-ca-certs-description": "Certificate path to be added in configuration. The path should be local in the Ingestion Container.",
+    "field-use-aws-credentials-description": "Indicates whether to use aws credentials when connecting to OpenSearch in AWS.",
+    "field-region-name-description": "Region name. Required when using AWS Credentials."
   },
   "server": {
     "no-followed-entities": "You have not followed anything yet.",