(feat)ui: migrate form builder in connection form

openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/ServiceConfig/ConnectionConfigForm.tsx

@@ -30,6 +30,7 @@ import { useApplicationStore } from '../../../../hooks/useApplicationStore';
 import { ConfigData } from '../../../../interface/service.interface';
 import { getPipelineServiceHostIp } from '../../../../rest/ingestionPipelineAPI';
 import brandClassBase from '../../../../utils/BrandData/BrandClassBase';
+import connectionsRouterClassBase from '../../../../utils/ConnectionsRouterClassBase';
 import i18n, { Transi18next } from '../../../../utils/i18next/LocalUtil';
 import { formatFormDataForSubmit } from '../../../../utils/JSONSchemaFormUtils';
 import {
@@ -41,6 +42,7 @@ import AirflowMessageBanner from '../../../common/AirflowMessageBanner/AirflowMe
 import BooleanFieldTemplate from '../../../common/Form/JSONSchema/JSONSchemaTemplate/BooleanFieldTemplate';
 import WorkflowArrayFieldTemplate from '../../../common/Form/JSONSchema/JSONSchemaTemplate/WorkflowArrayFieldTemplate';
 import FormBuilder from '../../../common/FormBuilder/FormBuilder';
+import FormBuilderV1 from '../../../common/FormBuilderV1/FormBuilderV1';
 import InlineAlert from '../../../common/InlineAlert/InlineAlert';
 import TestConnection from '../../../common/TestConnection/TestConnection';
 import { ConnectionConfigFormProps } from './ConnectionConfigForm.interface';
@@ -66,6 +68,8 @@ const ConnectionConfigForm = ({
   const { isAirflowAvailable, platform } = useAirflowStatus();
   const [hostIp, setHostIp] = useState<string>();
 
+  const isEmbeddedMode = connectionsRouterClassBase.isEmbeddedMode();
+
   const fetchHostIp = async () => {
     try {
       const { status, data } = await getPipelineServiceHostIp();
@@ -96,7 +100,7 @@ const ConnectionConfigForm = ({
   };
 
   const customFields: RegistryFieldsType = {
-    BooleanField: BooleanFieldTemplate,
+    ...(isEmbeddedMode ? {} : { BooleanField: BooleanFieldTemplate }),
     ArrayField: WorkflowArrayFieldTemplate,
   };
 
@@ -153,61 +157,85 @@ const ConnectionConfigForm = ({
     }
   }, [formRef.current?.state?.formData]);
 
+  const formChildren = (
+    <>
+      {isEmpty(connSch.schema) && (
+        <div
+          className="text-grey-muted text-center"
+          data-testid="no-config-available">
+          {t('message.no-config-available')}
+        </div>
+      )}
+      {shouldShowIPAlert && (
+        <Alert
+          data-testid="ip-address"
+          description={
+            <Transi18next
+              i18nKey="message.airflow-host-ip-address"
+              renderElement={<strong />}
+              values={{ hostIp, brandName: brandClassBase.getPageTitle() }}
+            />
+          }
+          type="info"
+        />
+      )}
+      {!isEmpty(connSch.schema) &&
+        isAirflowAvailable &&
+        formRef.current?.state?.formData && (
+          <TestConnection
+            connectionType={serviceType}
+            getData={() => formRef.current?.state?.formData}
+            hostIp={hostIp}
+            isTestingDisabled={disableTestConnection}
+            serviceCategory={serviceCategory}
+            serviceName={data?.name}
+            onValidateFormRequiredFields={handleRequiredFieldsValidation}
+          />
+        )}
+      {!isUndefined(inlineAlertDetails) && (
+        <InlineAlert alertClassName="m-t-xs" {...inlineAlertDetails} />
+      )}
+    </>
+  );
+
   return (
     <Fragment>
       <AirflowMessageBanner />
-      <FormBuilder
-        useSelectWidget
-        cancelText={cancelText ?? ''}
-        fields={customFields}
-        formData={validConfig}
-        okText={okText ?? ''}
-        ref={formRef}
-        schema={schemaWithoutDefaultFilterPatternFields}
-        serviceCategory={serviceCategory}
-        status={status}
-        uiSchema={uiSchema}
-        validator={validator}
-        onCancel={onCancel}
-        onFocus={onFocus}
-        onSubmit={handleSave}>
-        {isEmpty(connSch.schema) && (
-          <div
-            className="text-grey-muted text-center"
-            data-testid="no-config-available">
-            {t('message.no-config-available')}
-          </div>
-        )}
-        {shouldShowIPAlert && (
-          <Alert
-            data-testid="ip-address"
-            description={
-              <Transi18next
-                i18nKey="message.airflow-host-ip-address"
-                renderElement={<strong />}
-                values={{ hostIp, brandName: brandClassBase.getPageTitle() }}
-              />
-            }
-            type="info"
-          />
-        )}
-        {!isEmpty(connSch.schema) &&
-          isAirflowAvailable &&
-          formRef.current?.state?.formData && (
-            <TestConnection
-              connectionType={serviceType}
-              getData={() => formRef.current?.state?.formData}
-              hostIp={hostIp}
-              isTestingDisabled={disableTestConnection}
-              serviceCategory={serviceCategory}
-              serviceName={data?.name}
-              onValidateFormRequiredFields={handleRequiredFieldsValidation}
-            />
-          )}
-        {!isUndefined(inlineAlertDetails) && (
-          <InlineAlert alertClassName="m-t-xs" {...inlineAlertDetails} />
-        )}
-      </FormBuilder>
+      {isEmbeddedMode ? (
+        <FormBuilderV1
+          cancelText={cancelText ?? ''}
+          fields={customFields}
+          formContext={{ handleFocus: onFocus }}
+          formData={validConfig}
+          okText={okText ?? ''}
+          ref={formRef}
+          schema={schemaWithoutDefaultFilterPatternFields}
+          status={status}
+          uiSchema={uiSchema}
+          onCancel={onCancel}
+          onFocus={onFocus}
+          onSubmit={handleSave}>
+          {formChildren}
+        </FormBuilderV1>
+      ) : (
+        <FormBuilder
+          useSelectWidget
+          cancelText={cancelText ?? ''}
+          fields={customFields}
+          formData={validConfig}
+          okText={okText ?? ''}
+          ref={formRef}
+          schema={schemaWithoutDefaultFilterPatternFields}
+          serviceCategory={serviceCategory}
+          status={status}
+          uiSchema={uiSchema}
+          validator={validator}
+          onCancel={onCancel}
+          onFocus={onFocus}
+          onSubmit={handleSave}>
+          {formChildren}
+        </FormBuilder>
+      )}
     </Fragment>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Services.tsx

@@ -44,16 +44,14 @@ import { DatabaseServiceSearchSource } from '../../../interface/search.interface
 import { ServicesType } from '../../../interface/service.interface';
 import { getServices, searchService } from '../../../rest/serviceAPI';
 import { getServiceLogo } from '../../../utils/CommonUtils';
+import connectionsRouterClassBase from '../../../utils/ConnectionsRouterClassBase';
 import {
   getColumnSorter,
   getEntityName,
   highlightSearchText,
 } from '../../../utils/EntityUtils';
 import { checkPermission } from '../../../utils/PermissionsUtils';
-import {
-  getAddServicePath,
-  getServiceDetailsPath,
-} from '../../../utils/RouterUtils';
+import { getServiceDetailsPath } from '../../../utils/RouterUtils';
 import serviceUtilClassBase from '../../../utils/ServiceUtilClassBase';
 import {
   getOptionalFields,
@@ -85,7 +83,7 @@ const Services = ({ serviceName }: ServicesProps) => {
 
   const navigate = useNavigate();
   const handleAddServiceClick = () => {
-    navigate(getAddServicePath(serviceName));
+    navigate(connectionsRouterClassBase.getAddServicePath(serviceName));
   };
 
   const [isLoading, setIsLoading] = useState(true);

openmetadata-ui/src/main/resources/ui/src/components/common/FormBuilderV1/FormBuilderV1.test.tsx

@@ -100,6 +100,10 @@ describe('FormBuilderV1', () => {
     jest.clearAllMocks();
   });
 
+  it('sets a displayName for React DevTools and linting', () => {
+    expect(FormBuilderV1.displayName).toBe('FormBuilderV1');
+  });
+
   it('renders with formatted form data and default actions', () => {
     render(<FormBuilderV1 formData={{ name: 'value' }} schema={schema} />);