yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-05 07:04:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): Move buttons outside the form (#13715)

Browse Source
This commit is contained in:
Saketh Varma 2025-06-10 11:24:06 -06:00 committed by GitHub
parent f632f970a4
commit 523e16d8b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 82 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
datahub-web-react/src/app/ingest/source/builder/RecipeForm/RecipeForm.tsx
View File

@ -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>
</>
);
}