From 523e16d8b7f46bbcd00ee42e84d2f593f44254a6 Mon Sep 17 00:00:00 2001
From: Saketh Varma <sakethvarma397@gmail.com>
Date: Tue, 10 Jun 2025 11:24:06 -0600
Subject: [PATCH] fix(ui): Move buttons outside the form (#13715)

---
 .../source/builder/RecipeForm/RecipeForm.tsx  | 159 +++++++++---------
 1 file changed, 82 insertions(+), 77 deletions(-)

diff --git a/datahub-web-react/src/app/ingest/source/builder/RecipeForm/RecipeForm.tsx b/datahub-web-react/src/app/ingest/source/builder/RecipeForm/RecipeForm.tsx
index f6da301793..007d1ae87e 100644
--- a/datahub-web-react/src/app/ingest/source/builder/RecipeForm/RecipeForm.tsx
+++ b/datahub-web-react/src/app/ingest/source/builder/RecipeForm/RecipeForm.tsx
@@ -148,99 +148,104 @@ function RecipeForm(props: Props) {
     }
 
     return (
-        <RequiredFieldForm
-            layout="vertical"
-            initialValues={getInitialValues(displayRecipe, allFields)}
-            onFinish={onClickNext}
-            form={form}
-            onValuesChange={updateFormValues}
-        >
-            <StyledCollapse defaultActiveKey="0">
-                <Collapse.Panel forceRender header={<SectionHeader icon={<ApiOutlined />} text="Connection" />} key="0">
-                    {fields.map((field, i) => (
-                        <FormField
-                            key={field.name}
-                            field={field}
-                            secrets={secrets}
-                            refetchSecrets={refetchSecrets}
-                            removeMargin={i === fields.length - 1}
-                            updateFormValue={updateFormValue}
-                        />
-                    ))}
-                    {CONNECTORS_WITH_TEST_CONNECTION.has(type as string) && (
-                        <TestConnectionWrapper>
-                            <TestConnectionButton
-                                recipe={displayRecipe}
-                                sourceConfigs={sourceConfigs}
-                                version={version}
+        <>
+            <RequiredFieldForm
+                layout="vertical"
+                initialValues={getInitialValues(displayRecipe, allFields)}
+                form={form}
+                onValuesChange={updateFormValues}
+            >
+                <StyledCollapse defaultActiveKey="0">
+                    <Collapse.Panel
+                        forceRender
+                        header={<SectionHeader icon={<ApiOutlined />} text="Connection" />}
+                        key="0"
+                    >
+                        {fields.map((field, i) => (
+                            <FormField
+                                key={field.name}
+                                field={field}
+                                secrets={secrets}
+                                refetchSecrets={refetchSecrets}
+                                removeMargin={i === fields.length - 1}
+                                updateFormValue={updateFormValue}
                             />
-                        </TestConnectionWrapper>
-                    )}
-                </Collapse.Panel>
-            </StyledCollapse>
-            {filterFields.length > 0 && (
-                <StyledCollapse defaultActiveKey={defaultOpenSections?.includes(RecipeSections.Filter) ? '1' : ''}>
+                        ))}
+                        {CONNECTORS_WITH_TEST_CONNECTION.has(type as string) && (
+                            <TestConnectionWrapper>
+                                <TestConnectionButton
+                                    recipe={displayRecipe}
+                                    sourceConfigs={sourceConfigs}
+                                    version={version}
+                                />
+                            </TestConnectionWrapper>
+                        )}
+                    </Collapse.Panel>
+                </StyledCollapse>
+                {filterFields.length > 0 && (
+                    <StyledCollapse defaultActiveKey={defaultOpenSections?.includes(RecipeSections.Filter) ? '1' : ''}>
+                        <Collapse.Panel
+                            forceRender
+                            header={
+                                <SectionHeader
+                                    icon={<FilterOutlined />}
+                                    text="Filter"
+                                    sectionTooltip={filterSectionTooltip}
+                                />
+                            }
+                            key="1"
+                        >
+                            {filterFields.map((field, i) => (
+                                <Fragment key={field.name}>
+                                    {shouldRenderFilterSectionHeader(field, i, filterFields) && (
+                                        <Typography.Title level={4}>{field.section}</Typography.Title>
+                                    )}
+                                    <MarginWrapper>
+                                        <FormField
+                                            field={field}
+                                            secrets={secrets}
+                                            refetchSecrets={refetchSecrets}
+                                            removeMargin={i === filterFields.length - 1}
+                                            updateFormValue={updateFormValue}
+                                        />
+                                    </MarginWrapper>
+                                </Fragment>
+                            ))}
+                        </Collapse.Panel>
+                    </StyledCollapse>
+                )}
+                <StyledCollapse defaultActiveKey={defaultOpenSections?.includes(RecipeSections.Advanced) ? '2' : ''}>
                     <Collapse.Panel
                         forceRender
                         header={
                             <SectionHeader
-                                icon={<FilterOutlined />}
-                                text="Filter"
-                                sectionTooltip={filterSectionTooltip}
+                                icon={<SettingOutlined />}
+                                text="Settings"
+                                sectionTooltip={advancedSectionTooltip}
                             />
                         }
-                        key="1"
+                        key="2"
                     >
-                        {filterFields.map((field, i) => (
-                            <Fragment key={field.name}>
-                                {shouldRenderFilterSectionHeader(field, i, filterFields) && (
-                                    <Typography.Title level={4}>{field.section}</Typography.Title>
-                                )}
-                                <MarginWrapper>
-                                    <FormField
-                                        field={field}
-                                        secrets={secrets}
-                                        refetchSecrets={refetchSecrets}
-                                        removeMargin={i === filterFields.length - 1}
-                                        updateFormValue={updateFormValue}
-                                    />
-                                </MarginWrapper>
-                            </Fragment>
+                        {advancedFields.map((field, i) => (
+                            <FormField
+                                key={field.name}
+                                field={field}
+                                secrets={secrets}
+                                refetchSecrets={refetchSecrets}
+                                removeMargin={i === advancedFields.length - 1}
+                                updateFormValue={updateFormValue}
+                            />
                         ))}
                     </Collapse.Panel>
                 </StyledCollapse>
-            )}
-            <StyledCollapse defaultActiveKey={defaultOpenSections?.includes(RecipeSections.Advanced) ? '2' : ''}>
-                <Collapse.Panel
-                    forceRender
-                    header={
-                        <SectionHeader
-                            icon={<SettingOutlined />}
-                            text="Settings"
-                            sectionTooltip={advancedSectionTooltip}
-                        />
-                    }
-                    key="2"
-                >
-                    {advancedFields.map((field, i) => (
-                        <FormField
-                            key={field.name}
-                            field={field}
-                            secrets={secrets}
-                            refetchSecrets={refetchSecrets}
-                            removeMargin={i === advancedFields.length - 1}
-                            updateFormValue={updateFormValue}
-                        />
-                    ))}
-                </Collapse.Panel>
-            </StyledCollapse>
+            </RequiredFieldForm>
             <ControlsContainer>
                 <Button variant="outline" color="gray" disabled={isEditing} onClick={goToPrevious}>
                     Previous
                 </Button>
-                <Button>Next</Button>
+                <Button onClick={onClickNext}>Next</Button>
             </ControlsContainer>
-        </RequiredFieldForm>
+        </>
     );
 }