Fix(ui): Force Test Connection (#21734)

* added force test connection

* fixed test connection appearns on input field click

* fixed test connection

* removed blocker when ingestion is off

* made test connection consistent

* fixed test cases

* removed condition on test

* removed delete initiated condition

* fixed custom service condition

openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/ApiServiceRest.spec.ts

@@ -19,6 +19,7 @@ import {
   toastNotification,
   uuid,
 } from '../../utils/common';
+import { testConnection } from '../../utils/serviceIngestion';
 import { settingClick } from '../../utils/sidebar';
 
 const apiServiceConfig = {
@@ -55,6 +56,7 @@ test.describe('API service', () => {
       .fill(apiServiceConfig.openAPISchemaURL);
 
     await page.locator('#root\\/token').fill(apiServiceConfig.token);
+    await testConnection(page);
     await page.getByTestId('submit-btn').click();
 
     const autoPilotApplicationRequest = page.waitForRequest(

openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/MlFlowIngestionClass.ts

@@ -26,7 +26,7 @@ class MlFlowIngestionClass extends ServiceBaseClass {
     shouldAddDefaultFilters?: boolean;
   }) {
     const {
-      shouldTestConnection = false,
+      shouldTestConnection = true,
       shouldAddIngestion = false,
       shouldAddDefaultFilters = false,
     } = extraParams ?? {};

openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/ServiceBaseClass.ts

@@ -104,6 +104,8 @@ class ServiceBaseClass {
     await this.fillConnectionDetails(page);
 
     if (this.shouldTestConnection) {
+      expect(page.getByTestId('next-button')).not.toBeVisible();
+
       await testConnection(page);
     }
 

openmetadata-ui/src/main/resources/ui/playwright/utils/serviceIngestion.ts

@@ -159,12 +159,19 @@ export const testConnection = async (page: Page) => {
 
   const warningBadge = page.locator('[data-testid="warning-badge"]');
 
-  await expect(successBadge.or(warningBadge)).toBeVisible({
+  const failBadge = page.locator('[data-testid="fail-badge"]');
+
+  await expect(successBadge.or(warningBadge).or(failBadge)).toBeVisible({
     timeout: 2.5 * 60 * 1000,
   });
 
   await expect(page.getByTestId('messag-text')).toContainText(
-    /Connection test was successful.|Test connection partially successful: Some steps had failures, we will only ingest partial metadata. Click here to view details./g
+    new RegExp(
+      'Connection test was successful.|' +
+        'Test connection partially successful: Some steps had failures, we will only ingest partial metadata. Click here to view details.|' +
+        'Test connection failed, please validate your connection and permissions for the failed steps.',
+      'g'
+    )
   );
 };
 

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

@@ -37,6 +37,7 @@ import {
   getFilteredSchema,
   getUISchemaWithNestedDefaultFilterFieldsHidden,
 } from '../../../../utils/ServiceConnectionUtils';
+import { shouldTestConnection } from '../../../../utils/ServiceUtils';
 import AirflowMessageBanner from '../../../common/AirflowMessageBanner/AirflowMessageBanner';
 import BooleanFieldTemplate from '../../../common/Form/JSONSchema/JSONSchemaTemplate/BooleanFieldTemplate';
 import WorkflowArrayFieldTemplate from '../../../common/Form/JSONSchema/JSONSchemaTemplate/WorkflowArrayFieldTemplate';
@@ -60,10 +61,17 @@ const ConnectionConfigForm = ({
   const { inlineAlertDetails } = useApplicationStore();
   const { t } = useTranslation();
   const [ingestionRunner, setIngestionRunner] = useState<string | undefined>();
+  const { isAirflowAvailable, platform } = useAirflowStatus();
+  const allowTestConn = useMemo(() => {
+    return shouldTestConnection(serviceType);
+  }, [serviceType]);
+
+  const [hasTestedConnection, setHasTestedConnection] = useState(
+    !isAirflowAvailable || !allowTestConn || disableTestConnection
+  );
 
   const formRef = useRef<Form<ConfigData>>(null);
 
-  const { isAirflowAvailable, platform } = useAirflowStatus();
   const [hostIp, setHostIp] = useState<string>();
 
   const fetchHostIp = async () => {
@@ -153,6 +161,10 @@ const ConnectionConfigForm = ({
     }
   }, [formRef.current?.state?.formData]);
 
+  const handleTestConnection = () => {
+    setHasTestedConnection(true);
+  };
+
   return (
     <Fragment>
       <AirflowMessageBanner />
@@ -160,6 +172,7 @@ const ConnectionConfigForm = ({
         cancelText={cancelText ?? ''}
         fields={customFields}
         formData={validConfig}
+        hasTestedConnection={hasTestedConnection}
         okText={okText ?? ''}
         ref={formRef}
         schema={schemaWithoutDefaultFilterPatternFields}
@@ -190,19 +203,18 @@ const ConnectionConfigForm = ({
             type="info"
           />
         )}
-        {!isEmpty(connSch.schema) &&
+        {!isEmpty(connSch.schema) && (
-          isAirflowAvailable &&
+          <TestConnection
-          formRef.current?.state?.formData && (
+            connectionType={serviceType}
-            <TestConnection
+            getData={() => formRef.current?.state?.formData}
-              connectionType={serviceType}
+            hostIp={hostIp}
-              getData={() => formRef.current?.state?.formData}
+            isTestingDisabled={disableTestConnection}
-              hostIp={hostIp}
+            serviceCategory={serviceCategory}
-              isTestingDisabled={disableTestConnection}
+            serviceName={data?.name}
-              serviceCategory={serviceCategory}
+            onTestConnection={handleTestConnection}
-              serviceName={data?.name}
+            onValidateFormRequiredFields={handleRequiredFieldsValidation}
-              onValidateFormRequiredFields={handleRequiredFieldsValidation}
+          />
-            />
+        )}
-          )}
         {!isUndefined(inlineAlertDetails) && (
           <InlineAlert alertClassName="m-t-xs" {...inlineAlertDetails} />
         )}

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

@@ -42,6 +42,7 @@ export interface Props extends FormProps {
   status?: LoadingState;
   onCancel?: () => void;
   useSelectWidget?: boolean;
+  hasTestedConnection?: boolean;
 }
 
 const FormBuilder = forwardRef<Form, Props>(
@@ -61,6 +62,7 @@ const FormBuilder = forwardRef<Form, Props>(
       onFocus,
       useSelectWidget = false,
       children,
+      hasTestedConnection,
       ...props
     },
     ref
@@ -94,6 +96,9 @@ const FormBuilder = forwardRef<Form, Props>(
     };
 
     const submitButton = useMemo(() => {
+      if (hasTestedConnection === false) {
+        return null;
+      }
       if (status === 'waiting') {
         return (
           <Button
@@ -124,7 +129,7 @@ const FormBuilder = forwardRef<Form, Props>(
           </Button>
         );
       }
-    }, [status, isLoading, okText]);
+    }, [status, isLoading, okText, hasTestedConnection]);
 
     return (
       <Form

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

@@ -23,6 +23,7 @@ export interface TestConnectionProps {
   serviceName?: string;
   shouldValidateForm?: boolean;
   onValidateFormRequiredFields?: () => boolean;
+  onTestConnection?: () => void;
   hostIp?: string;
 }
 

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

@@ -70,6 +70,7 @@ const TestConnection: FC<TestConnectionProps> = ({
   onValidateFormRequiredFields,
   shouldValidateForm = true,
   showDetails = true,
+  onTestConnection,
   hostIp,
 }) => {
   const { t } = useTranslation();
@@ -372,6 +373,8 @@ const TestConnection: FC<TestConnectionProps> = ({
       if (workflowId) {
         await handleDeleteWorkflow(workflowId);
       }
+    } finally {
+      onTestConnection?.();
     }
   };
 

openmetadata-ui/src/main/resources/ui/src/pages/AddServicePage/AddServicePage.component.tsx

@@ -80,7 +80,6 @@ const AddServicePage = () => {
   const [saveServiceState, setSaveServiceState] =
     useState<LoadingState>('initial');
   const [activeField, setActiveField] = useState<string>('');
-
   const slashedBreadcrumb = getAddServiceEntityBreadcrumb(serviceCategory);
 
   const handleServiceTypeClick = (type: string) => {