fix(ui) Stop showing validation errors and enable "Next" when in YAML editor (#15783)

chriscollins3456 · web-flow · commit 68274db278a0 · 2025-12-31T13:09:35.000-05:00
diff --git a/datahub-web-react/src/app/ingestV2/source/multiStepBuilder/steps/step2ConnectionDetails/sections/recipeSection/RecipeSection.tsx b/datahub-web-react/src/app/ingestV2/source/multiStepBuilder/steps/step2ConnectionDetails/sections/recipeSection/RecipeSection.tsx
@@ -1,4 +1,4 @@
-import { message } from 'antd';
+import { Form, message } from 'antd';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import YAML from 'yamljs';
 
@@ -28,16 +28,31 @@ export function RecipeSection({ state, displayRecipe, sourceConfigs, setStagedRe
         setIsRecipeValid?.(!hasForm || isEditing || !!state.isConnectionDetailsValid);
     }, [hasForm, isEditing, setIsRecipeValid, state.isConnectionDetailsValid]);
 
+    const [form] = Form.useForm();
+    const runFormValidation = useCallback(() => {
+        form.validateFields()
+            .then(() => {
+                setIsRecipeValid?.(true);
+            })
+            .catch((error) => {
+                // FYI: `error` could be triggered with empty list of `errorFields` when form is valid
+                const hasErrors = (error.errorFields?.length ?? 0) > 0;
+                setIsRecipeValid?.(!hasErrors);
+            });
+    }, [form, setIsRecipeValid]);
+
     const onTabClick = useCallback(
         (activeKey) => {
             if (activeKey !== 'form') {
                 setSelectedTabKey(activeKey);
+                setIsRecipeValid?.(true); // no field validation when in yaml editor
                 return;
             }
 
             // Validate yaml content when switching from yaml tab to form
             try {
                 YAML.parse(displayRecipe);
+                setTimeout(runFormValidation, 0); // let form remount and then run validation
                 setSelectedTabKey(activeKey);
             } catch (e) {
                 message.destroy();
@@ -47,7 +62,7 @@ export function RecipeSection({ state, displayRecipe, sourceConfigs, setStagedRe
                 message.warn(`Found invalid YAML. ${messageText} in order to switch views.`);
             }
         },
-        [displayRecipe],
+        [displayRecipe, setIsRecipeValid, runFormValidation],
     );
 
     const tabs: Tab[] = useMemo(
@@ -58,10 +73,11 @@ export function RecipeSection({ state, displayRecipe, sourceConfigs, setStagedRe
                 component: (
                     <RecipeForm
                         state={state}
+                        form={form}
+                        runFormValidation={runFormValidation}
                         displayRecipe={displayRecipe}
                         sourceConfigs={sourceConfigs}
                         setStagedRecipe={setStagedRecipe}
-                        setIsRecipeValid={setIsRecipeValid}
                     />
                 ),
             },
@@ -71,7 +87,7 @@ export function RecipeSection({ state, displayRecipe, sourceConfigs, setStagedRe
                 component: <YamlEditor value={displayRecipe} onChange={setStagedRecipe} />,
             },
         ],
-        [displayRecipe, state, sourceConfigs, setStagedRecipe, setIsRecipeValid],
+        [displayRecipe, state, sourceConfigs, setStagedRecipe, form, runFormValidation],
     );
 
     if (hasForm) {
diff --git a/datahub-web-react/src/app/ingestV2/source/multiStepBuilder/steps/step2ConnectionDetails/sections/recipeSection/recipeForm/RecipeForm.tsx b/datahub-web-react/src/app/ingestV2/source/multiStepBuilder/steps/step2ConnectionDetails/sections/recipeSection/recipeForm/RecipeForm.tsx
@@ -1,5 +1,5 @@
 import { spacing } from '@components';
-import { Form, message } from 'antd';
+import { Form, FormInstance, message } from 'antd';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import styled from 'styled-components/macro';
 import YAML from 'yamljs';
@@ -56,14 +56,22 @@ function getInitialValues(displayRecipe: string, allFields: RecipeField[]) {
 interface Props {
     state: MultiStepSourceBuilderState;
     displayRecipe: string;
+    form: FormInstance<any>;
+    runFormValidation: () => void;
     sourceConfigs?: SourceConfig;
     setStagedRecipe: (recipe: string) => void;
     selectedSource?: IngestionSource;
-    setIsRecipeValid?: (isValid: boolean) => void;
 }
 
-function RecipeForm({ state, displayRecipe, sourceConfigs, setStagedRecipe, selectedSource, setIsRecipeValid }: Props) {
-    const [form] = Form.useForm();
+function RecipeForm({
+    state,
+    displayRecipe,
+    form,
+    runFormValidation,
+    sourceConfigs,
+    setStagedRecipe,
+    selectedSource,
+}: Props) {
     const areFormValuesChangedRef = useRef<boolean>(false);
 
     const formValues = Form.useWatch([], form);
@@ -79,18 +87,6 @@ function RecipeForm({ state, displayRecipe, sourceConfigs, setStagedRecipe, sele
         };
     }, [recipeFields, formValues]);
 
-    const runFormValidation = useCallback(() => {
-        form.validateFields()
-            .then(() => {
-                setIsRecipeValid?.(true);
-            })
-            .catch((error) => {
-                // FYI: `error` could be triggered with empty list of `errorFields` when form is valid
-                const hasErrors = (error.errorFields?.length ?? 0) > 0;
-                setIsRecipeValid?.(!hasErrors);
-            });
-    }, [form, setIsRecipeValid]);
-
     // Run validation when fields changed. Required to revalidate hidden/shown fields
     useEffect(() => {
         // Run validation when form values were changed
diff --git a/datahub-web-react/src/app/ingestV2/source/multiStepBuilder/steps/step2ConnectionDetails/sections/recipeSection/recipeForm/components/CustomFormItem.tsx b/datahub-web-react/src/app/ingestV2/source/multiStepBuilder/steps/step2ConnectionDetails/sections/recipeSection/recipeForm/components/CustomFormItem.tsx
@@ -5,11 +5,7 @@ import styled from 'styled-components';
 
 import { FieldLabel } from '@app/sharedV2/forms/FieldLabel';
 
-export const StyledFormItem = styled(Form.Item)<{
-    $alignLeft?: boolean;
-    $removeMargin?: boolean;
-    $isSecretField?: boolean;
-}>`
+const StyledFormItem = styled(Form.Item)<{ $showError: boolean }>`
     margin-bottom: 0;
 
     .ant-form-item-label > label {
@@ -23,6 +19,8 @@ export const StyledFormItem = styled(Form.Item)<{
 
     .ant-form-item-explain-error {
         color: ${colors.red[500]}; // Color of error message
+        display: none;
+        ${({ $showError }) => !$showError && 'display: none;'}
     }
 
     .ant-form-item-control {
@@ -34,17 +32,20 @@ export interface CustomLabelFormItemProps extends Omit<FormItemProps, 'label'> {
     label?: string;
     tooltip?: React.ReactNode;
     labelHelper?: React.ReactNode;
+    showError?: boolean;
 }
 
 export const CustomLabelFormItem: React.FC<CustomLabelFormItemProps> = ({
     label,
     tooltip,
     required,
     labelHelper,
+    showError = true,
     ...formItemProps
 }) => {
     return (
         <StyledFormItem
+            $showError={showError}
             label={
                 label ? (
                     <FieldLabel label={label} required={required} tooltip={tooltip} labelHelper={labelHelper} />
diff --git a/datahub-web-react/src/app/ingestV2/source/multiStepBuilder/steps/step2ConnectionDetails/sections/recipeSection/recipeForm/fields/RecipeFormItem.tsx b/datahub-web-react/src/app/ingestV2/source/multiStepBuilder/steps/step2ConnectionDetails/sections/recipeSection/recipeForm/fields/RecipeFormItem.tsx
@@ -51,6 +51,7 @@ export function RecipeFormItem({
                 name={recipeField?.name}
                 tooltip={showTooltip ? (recipeField?.tooltip ?? tooltip) : undefined}
                 rules={rules}
+                showError={false}
                 {...props}
             >
                 {children}
diff --git a/datahub-web-react/src/app/sharedV2/forms/multiStepForm/MultiStepFormBottomPanel.tsx b/datahub-web-react/src/app/sharedV2/forms/multiStepForm/MultiStepFormBottomPanel.tsx
@@ -1,4 +1,4 @@
-import { Button, Text } from '@components';
+import { Button, Text, Tooltip } from '@components';
 import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
@@ -90,16 +90,21 @@ export function MultiStepFormBottomPanel<TState, TStep extends Step>({
         );
 
         if (canGoToNext()) {
-            buttons.push(
-                <Button
-                    key="next"
-                    size="sm"
-                    disabled={!isCurrentStepCompleted()}
-                    onClick={goToNext}
-                    data-testid="next-button"
-                >
+            const isDisabled = !isCurrentStepCompleted();
+            const nextButton = (
+                <Button key="next" size="sm" disabled={isDisabled} onClick={goToNext} data-testid="next-button">
                     Next
-                </Button>,
+                </Button>
+            );
+
+            buttons.push(
+                isDisabled ? (
+                    <Tooltip key="next" title="Please complete all required fields before moving to the next step">
+                        <span>{nextButton}</span>
+                    </Tooltip>
+                ) : (
+                    nextButton
+                ),
             );
         }
 

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,7 @@ export function RecipeFormItem({`
`51`	`51`	`name={recipeField?.name}`
`52`	`52`	`tooltip={showTooltip ? (recipeField?.tooltip ?? tooltip) : undefined}`
`53`	`53`	`rules={rules}`
	`54`	`+ showError={false}`
`54`	`55`	`{...props}`
`55`	`56`	`>`
`56`	`57`	`{children}`