chore(ui): move form util types to separate interface file (#11782)

* chore(ui): move form util types to separate interface file

* address comments

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

@@ -12,10 +12,11 @@
  */
 
 import { Button, Form, Space } from 'antd';
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import { capitalize, isNil } from 'lodash';
 import React, { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FieldProp, FieldTypes, generateFormFields } from 'utils/formUtils';
+import { generateFormFields } from 'utils/formUtils';
 import { PROFILE_SAMPLE_OPTIONS } from '../../../constants/profiler.constant';
 import { FilterPatternEnum } from '../../../enums/filterPattern.enum';
 import { FormSubmitType } from '../../../enums/form.enum';

openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.tsx

@@ -14,8 +14,9 @@
 import { Button, Form, FormProps, Space } from 'antd';
 import { ENTITY_NAME_REGEX } from 'constants/regex.constants';
 import { t } from 'i18next';
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import React from 'react';
-import { FieldProp, FieldTypes, generateFormFields } from 'utils/formUtils';
+import { generateFormFields } from 'utils/formUtils';
 import { ConfigureServiceProps } from './Steps.interface';
 
 const ConfigureService = ({

openmetadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/AddCustomProperty/AddCustomProperty.tsx

@@ -14,6 +14,7 @@
 import { Button, Card, Col, Form, Row } from 'antd';
 import { AxiosError } from 'axios';
 import { t } from 'i18next';
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import { isUndefined, map, startCase } from 'lodash';
 import React, {
   FocusEvent,
@@ -28,7 +29,7 @@ import {
   getTypeByFQN,
   getTypeListByCategory,
 } from 'rest/metadataTypeAPI';
-import { FieldProp, FieldTypes, generateFormFields } from 'utils/formUtils';
+import { generateFormFields } from 'utils/formUtils';
 import { SUPPORTED_FIELD_TYPES } from '../../../constants/constants';
 import { Category, CustomProperty, Type } from '../../../generated/entity/type';
 import { showErrorToast } from '../../../utils/ToastUtils';

openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTCloudConfig.tsx

@@ -12,8 +12,9 @@
  */
 
 import { t } from 'i18next';
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import React, { Fragment, FunctionComponent } from 'react';
-import { FieldProp, FieldTypes, generateFormFields } from 'utils/formUtils';
+import { generateFormFields } from 'utils/formUtils';
 import DBTCommonFields from './DBTCommonFields.component';
 import { DbtConfigCloud } from './DBTConfigForm.interface';
 

openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTCommonFields.component.tsx

@@ -11,9 +11,10 @@
  *  limitations under the License.
  */
 
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FieldProp, FieldTypes, generateFormFields } from 'utils/formUtils';
+import { generateFormFields } from 'utils/formUtils';
 
 interface Props {
   dbtClassificationName: string | undefined;

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

@@ -12,9 +12,10 @@
  */
 
 import { Button, Form, FormProps, Space } from 'antd';
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import React, { FunctionComponent, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FieldProp, FieldTypes, generateFormFields } from 'utils/formUtils';
+import { generateFormFields } from 'utils/formUtils';
 import { FormSubmitType } from '../../../enums/form.enum';
 import { DBTCloudConfig } from './DBTCloudConfig';
 import { DBTConfigFormProps } from './DBTConfigForm.interface';

openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTFormConstants.ts

@@ -13,7 +13,7 @@
 
 import i18n from 'utils/i18next/LocalUtil';
 import { FormValidationRulesType } from '../../../enums/form.enum';
-import { FormValidationRules } from '../../../interface/genericForm.interface';
+import { FormValidationRules } from '../../../interface/FormUtils.interface';
 import { DropDownListItem } from '../../dropdown/types';
 import {
   DbtConfigCloudReq,

openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTGCSConfig.tsx

@@ -12,13 +12,9 @@
  */
 
 import { t } from 'i18next';
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import React, { Fragment, FunctionComponent } from 'react';
-import {
+import { generateFormFields, getField } from 'utils/formUtils';
-  FieldProp,
-  FieldTypes,
-  generateFormFields,
-  getField,
-} from 'utils/formUtils';
 import { GCSCredentialsValues } from '../../../generated/metadataIngestion/dbtPipeline';
 import DBTCommonFields from './DBTCommonFields.component';
 import { DbtConfigS3GCS } from './DBTConfigForm.interface';

openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTHttpConfig.tsx

@@ -11,9 +11,10 @@
  *  limitations under the License.
  */
 
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import React, { Fragment, FunctionComponent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FieldProp, FieldTypes, generateFormFields } from 'utils/formUtils';
+import { generateFormFields } from 'utils/formUtils';
 import DBTCommonFields from './DBTCommonFields.component';
 import { DbtConfigHttp } from './DBTConfigForm.interface';
 

openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTLocalConfig.tsx

@@ -12,8 +12,9 @@
  */
 
 import { t } from 'i18next';
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import React, { Fragment, FunctionComponent } from 'react';
-import { FieldProp, FieldTypes, generateFormFields } from 'utils/formUtils';
+import { generateFormFields } from 'utils/formUtils';
 import DBTCommonFields from './DBTCommonFields.component';
 import { DbtConfigLocal } from './DBTConfigForm.interface';
 

openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTS3Config.tsx

@@ -12,8 +12,9 @@
  */
 
 import { t } from 'i18next';
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import React, { Fragment, FunctionComponent } from 'react';
-import { FieldProp, FieldTypes, generateFormFields } from 'utils/formUtils';
+import { generateFormFields } from 'utils/formUtils';
 import DBTCommonFields from './DBTCommonFields.component';
 import { DbtConfigS3GCS } from './DBTConfigForm.interface';
 

openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts

@@ -11,9 +11,39 @@
  *  limitations under the License.
  */
 
+import { FormItemProps, FormRule } from 'antd';
+import { ReactNode } from 'react';
 import { FormValidationRulesType } from '../enums/form.enum';
 
 export type FormValidationRules = Record<
   FormValidationRulesType,
   Array<string>
 >;
+
+export type FormItemLayout = 'horizontal' | 'vertical';
+
+export enum FieldTypes {
+  TEXT = 'text',
+  PASSWORD = 'password',
+  FILTER_PATTERN = 'filter_pattern',
+  SWITCH = 'switch',
+  SELECT = 'select',
+  NUMBER = 'number',
+  SLIDER_INPUT = 'slider_input',
+  DESCRIPTION = 'description',
+}
+
+export interface FieldProp {
+  label: ReactNode;
+  name: string;
+  type: FieldTypes;
+  required: boolean;
+  id: string;
+  props?: Record<string, unknown>;
+  formItemProps?: FormItemProps;
+  rules?: FormRule[];
+  helperText?: string;
+  placeholder?: string;
+  hasSeparator?: boolean;
+  formItemLayout?: FormItemLayout;
+}

openmetadata-ui/src/main/resources/ui/src/pages/EditCustomLogoConfig/EditCustomLogoConfig.tsx

@@ -28,6 +28,7 @@ import {
 import { ServiceCategory } from 'enums/service.enum';
 import { LogoConfiguration } from 'generated/configuration/applicationConfiguration';
 import { Settings, SettingType } from 'generated/settings/settings';
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
@@ -35,7 +36,7 @@ import {
   getSettingsConfigFromConfigType,
   updateSettingsConfig,
 } from 'rest/settingConfigAPI';
-import { FieldProp, FieldTypes, generateFormFields } from 'utils/formUtils';
+import { generateFormFields } from 'utils/formUtils';
 import { getSettingPath } from 'utils/RouterUtils';
 import { showErrorToast, showSuccessToast } from 'utils/ToastUtils';
 

openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.tsx

@@ -15,9 +15,10 @@ import { Form, Modal, Typography } from 'antd';
 import { VALIDATION_MESSAGES } from 'constants/constants';
 import { ENTITY_NAME_REGEX } from 'constants/regex.constants';
 import { DEFAULT_FORM_VALUE } from 'constants/Tags.constant';
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FieldProp, FieldTypes, generateFormFields } from 'utils/formUtils';
+import { generateFormFields } from 'utils/formUtils';
 import { RenameFormProps } from './TagsPage.interface';
 
 const TagsForm = ({

openmetadata-ui/src/main/resources/ui/src/utils/DBTConfigFormUtil.ts

@@ -45,7 +45,7 @@ import {
   GCSCredentialsValues,
   SCredentials,
 } from '../generated/metadataIngestion/dbtPipeline';
-import { FormValidationRules } from '../interface/genericForm.interface';
+import { FormValidationRules } from '../interface/FormUtils.interface';
 import { isValidEmail, isValidUrl } from './CommonUtils';
 
 export const validateDbtCloudConfig = (

openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx

@@ -15,7 +15,6 @@ import {
   Divider,
   Form,
   FormItemProps,
-  FormRule,
   Input,
   InputNumber,
   Select,
@@ -28,38 +27,11 @@ import RichTextEditor from 'components/common/rich-text-editor/RichTextEditor';
 import { RichTextEditorProp } from 'components/common/rich-text-editor/RichTextEditor.interface';
 import SliderWithInput from 'components/SliderWithInput/SliderWithInput';
 import { SliderWithInputProps } from 'components/SliderWithInput/SliderWithInput.interface';
+import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
 import { compact, startCase } from 'lodash';
 import React, { Fragment, ReactNode } from 'react';
 import i18n from './i18next/LocalUtil';
 
-export type FormItemLayout = 'horizontal' | 'vertical';
-
-export enum FieldTypes {
-  TEXT = 'text',
-  PASSWORD = 'password',
-  FILTER_PATTERN = 'filter_pattern',
-  SWITCH = 'switch',
-  SELECT = 'select',
-  NUMBER = 'number',
-  SLIDER_INPUT = 'slider_input',
-  DESCRIPTION = 'description',
-}
-
-export interface FieldProp {
-  label: ReactNode;
-  name: string;
-  type: FieldTypes;
-  required: boolean;
-  id: string;
-  props?: Record<string, unknown>;
-  formItemProps?: FormItemProps;
-  rules?: FormRule[];
-  helperText?: string;
-  placeholder?: string;
-  hasSeparator?: boolean;
-  formItemLayout?: FormItemLayout;
-}
-
 export const getField = (field: FieldProp) => {
   const {
     label,