This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch template_less
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/template_less by this push:
new 971715931b refactor(form): Migrate Form component to Ant Design 5
(#32729)
971715931b is described below
commit 971715931b586b34b68a2eb19d3e88ab4e393900
Author: Mehmet Salih Yavuz <[email protected]>
AuthorDate: Tue Apr 1 19:29:17 2025 +0300
refactor(form): Migrate Form component to Ant Design 5 (#32729)
---
.../e2e/dashboard/horizontalFilterBar.test.ts | 4 +-
.../cypress/e2e/database/modal.test.ts | 4 +-
.../src/components/Datasource/Field.tsx | 2 +-
.../src/components/Flex/Flex.stories.tsx | 86 +++++++++++++++++++++
.../{Form/index.tsx => Flex/Flex.test.tsx} | 17 +++--
.../src/components/{Form => Flex}/index.tsx | 14 ++--
superset-frontend/src/components/Form/Form.tsx | 18 +----
superset-frontend/src/components/Form/FormItem.tsx | 13 ++--
.../src/components/Form/FormLabel.tsx | 34 ++++-----
.../src/components/Form/LabeledErrorBoundInput.tsx | 6 +-
superset-frontend/src/components/Form/index.tsx | 4 +-
superset-frontend/src/components/index.ts | 4 -
.../dashboard/components/PropertiesModal/index.tsx | 10 +--
.../FilterBar/FilterControls/FilterControl.tsx | 25 +++---
.../nativeFilters/FilterBar/Horizontal.tsx | 2 -
.../nativeFilters/FilterBar/Vertical.tsx | 11 ++-
.../FiltersConfigForm/ColumnSelect.tsx | 7 +-
.../FiltersConfigForm/DefaultValue.tsx | 2 +-
.../FiltersConfigForm/FilterScope/FilterScope.tsx | 4 +-
.../__tests__/TreeInitialization.test.tsx | 2 +-
.../FilterScope/__tests__/TreeSelection.test.tsx | 2 +-
.../FilterScope/__tests__/utils.tsx | 8 +-
.../FiltersConfigForm/FiltersConfigForm.tsx | 88 +++++-----------------
.../FiltersConfigForm/getControlItemsMap.test.tsx | 6 +-
.../FiltersConfigForm/getControlItemsMap.tsx | 4 +-
.../FiltersConfigModal/FiltersConfigForm/state.ts | 2 +-
.../FiltersConfigModal/FiltersConfigForm/utils.ts | 2 +-
.../FiltersConfigModal/FiltersConfigModal.tsx | 12 ++-
.../nativeFilters/FiltersConfigModal/utils.ts | 2 +-
.../explore/components/PropertiesModal/index.tsx | 13 ++--
.../LayerConfigsPopoverContent.tsx | 2 +-
.../DatabaseConnectionForm/EncryptedField.tsx | 2 +-
.../DatabaseConnectionForm/TableCatalog.tsx | 2 +-
.../databases/DatabaseModal/SSHTunnelForm.tsx | 4 +-
.../features/databases/UploadDataModel/index.tsx | 16 ++--
.../filters/components/Range/RangeFilterPlugin.tsx | 7 +-
.../components/Select/SelectFilterPlugin.tsx | 7 +-
.../TimeColumn/TimeColumnFilterPlugin.tsx | 12 +--
.../components/TimeGrain/TimeGrainFilterPlugin.tsx | 12 +--
superset-frontend/src/filters/components/common.ts | 7 --
40 files changed, 248 insertions(+), 231 deletions(-)
diff --git
a/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts
b/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts
index b89e9f8a4b..4fe862b023 100644
---
a/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts
+++
b/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts
@@ -157,11 +157,11 @@ describe('Horizontal FilterBar', () => {
cy.get('.filter-item-wrapper').should('have.length', 3);
openMoreFilters();
cy.getBySel('form-item-value').should('have.length', 12);
-
cy.getBySel('filter-control-name').contains('test_10').should('be.visible');
+ cy.getBySel('filter-control-name').contains('test_9').should('be.visible');
cy.getBySel('filter-control-name')
.contains('test_12')
.should('not.be.visible');
- cy.get('.antd5-popover-inner').scrollTo('bottom');
+ cy.getBySel('filter-control-name').contains('test_12').scrollIntoView();
cy.getBySel('filter-control-name').contains('test_12').should('be.visible');
});
diff --git a/superset-frontend/cypress-base/cypress/e2e/database/modal.test.ts
b/superset-frontend/cypress-base/cypress/e2e/database/modal.test.ts
index 87a0bb9230..fac22596fc 100644
--- a/superset-frontend/cypress-base/cypress/e2e/database/modal.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/database/modal.test.ts
@@ -66,7 +66,7 @@ describe('Add database', () => {
cy.focused().type('badhost', { force: true });
cy.get('input[name="port"]').focus();
cy.focused().type('5432', { force: true });
- cy.get('.ant-form-item-explain-error').contains(
+ cy.get('.antd5-form-item-explain-error').contains(
"The hostname provided can't be resolved",
);
});
@@ -79,6 +79,6 @@ describe('Add database', () => {
cy.get('input[name="port"]').focus();
cy.focused().type('123', { force: true });
cy.get('input[name="database"]').focus();
- cy.get('.ant-form-item-explain-error').contains('The port is closed');
+ cy.get('.antd5-form-item-explain-error').contains('The port is closed');
});
});
diff --git a/superset-frontend/src/components/Datasource/Field.tsx
b/superset-frontend/src/components/Datasource/Field.tsx
index 5478ba0b2b..eeebe61273 100644
--- a/superset-frontend/src/components/Datasource/Field.tsx
+++ b/superset-frontend/src/components/Datasource/Field.tsx
@@ -23,7 +23,7 @@ import { Tooltip } from 'src/components/Tooltip';
import { FormItem, FormLabel } from 'src/components/Form';
const formItemInlineCss = css`
- .ant-form-item-control-input-content {
+ .antd5-form-item-control-input-content {
display: flex;
flex-direction: row;
}
diff --git a/superset-frontend/src/components/Flex/Flex.stories.tsx
b/superset-frontend/src/components/Flex/Flex.stories.tsx
new file mode 100644
index 0000000000..6766df7aa3
--- /dev/null
+++ b/superset-frontend/src/components/Flex/Flex.stories.tsx
@@ -0,0 +1,86 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Flex, FlexProps } from 'src/components/Flex';
+import { css } from '@superset-ui/core';
+
+export default {
+ title: 'Flex',
+ component: Flex,
+};
+
+export const InteractiveFlex = (args: FlexProps) => (
+ <Flex
+ {...args}
+ css={css`
+ width: 100%;
+ height: 90vh;
+ `}
+ >
+ {new Array(20).fill(null).map((_, i) => (
+ <p key={i}>Item</p>
+ ))}
+ </Flex>
+);
+
+InteractiveFlex.args = {
+ vertical: false,
+ wrap: 'nowrap',
+ justify: 'normal',
+ align: 'normal',
+ flex: 'normal',
+ gap: 'small',
+};
+
+InteractiveFlex.argTypes = {
+ vertical: {
+ control: { type: 'boolean' },
+ type: { name: 'boolean', required: false },
+ },
+ wrap: {
+ control: { type: 'select' },
+ options: ['nowrap', 'wrap', 'wrap-reverse', false, true],
+ type: { name: 'string', required: false },
+ },
+ justify: {
+ control: { type: 'select' },
+ options: [
+ 'start',
+ 'center',
+ 'space-between',
+ 'space-around',
+ 'space-evenly',
+ ],
+ type: { name: 'string', required: false },
+ },
+ align: {
+ control: { type: 'select' },
+ options: ['start', 'center', 'end', 'stretch'],
+ type: { name: 'string', required: false },
+ },
+ flex: {
+ control: { type: 'string' },
+ type: { name: 'string', required: false },
+ },
+ gap: {
+ control: { type: 'select' },
+ options: ['small', 'medium', 'large'],
+ type: { name: 'string', required: false },
+ },
+};
diff --git a/superset-frontend/src/components/Form/index.tsx
b/superset-frontend/src/components/Flex/Flex.test.tsx
similarity index 75%
copy from superset-frontend/src/components/Form/index.tsx
copy to superset-frontend/src/components/Flex/Flex.test.tsx
index ec198e0a82..863c3a012c 100644
--- a/superset-frontend/src/components/Form/index.tsx
+++ b/superset-frontend/src/components/Flex/Flex.test.tsx
@@ -16,10 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
-import Form, { FormProps } from './Form';
-import FormItem from './FormItem';
-import FormLabel from './FormLabel';
-import LabeledErrorBoundInput from './LabeledErrorBoundInput';
-export { Form, FormItem, FormLabel, LabeledErrorBoundInput };
-export type { FormProps };
+import { render } from 'spec/helpers/testing-library';
+import { Flex } from 'src/components/Flex';
+
+test('should render', () => {
+ const { container } = render(
+ <Flex>
+ <p>Item</p>
+ </Flex>,
+ );
+ expect(container).toBeInTheDocument();
+});
diff --git a/superset-frontend/src/components/Form/index.tsx
b/superset-frontend/src/components/Flex/index.tsx
similarity index 75%
copy from superset-frontend/src/components/Form/index.tsx
copy to superset-frontend/src/components/Flex/index.tsx
index ec198e0a82..bed64a5949 100644
--- a/superset-frontend/src/components/Form/index.tsx
+++ b/superset-frontend/src/components/Flex/index.tsx
@@ -16,10 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
-import Form, { FormProps } from './Form';
-import FormItem from './FormItem';
-import FormLabel from './FormLabel';
-import LabeledErrorBoundInput from './LabeledErrorBoundInput';
-export { Form, FormItem, FormLabel, LabeledErrorBoundInput };
-export type { FormProps };
+import { Flex as AntdFlex } from 'antd-v5';
+import { ComponentProps } from 'react';
+
+export type FlexProps = ComponentProps<typeof AntdFlex>;
+
+export function Flex(props: FlexProps) {
+ return <AntdFlex {...props} />;
+}
diff --git a/superset-frontend/src/components/Form/Form.tsx
b/superset-frontend/src/components/Form/Form.tsx
index b7e9403a4e..dcbcc173a3 100644
--- a/superset-frontend/src/components/Form/Form.tsx
+++ b/superset-frontend/src/components/Form/Form.tsx
@@ -16,21 +16,11 @@
* specific language governing permissions and limitations
* under the License.
*/
-// eslint-disable-next-line no-restricted-imports
-import AntdForm, { FormProps } from 'antd/lib/form'; // TODO: Remove antd
-import { styled } from '@superset-ui/core';
-
-const StyledForm = styled(AntdForm)`
- &.ant-form label {
- font-size: ${({ theme }) => theme.fontSizeSM}px;
- }
- .ant-form-item {
- margin-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
- }
-`;
+import { Form as AntdForm } from 'antd-v5';
+import { FormProps, FormInstance, FormItemProps } from 'antd-v5/es/form';
function Form(props: FormProps) {
- return <StyledForm {...props} />;
+ return <AntdForm {...props} />;
}
export default Object.assign(Form, {
@@ -41,4 +31,4 @@ export default Object.assign(Form, {
Provider: AntdForm.Provider,
});
-export type { FormProps };
+export type { FormProps, FormInstance, FormItemProps };
diff --git a/superset-frontend/src/components/Form/FormItem.tsx
b/superset-frontend/src/components/Form/FormItem.tsx
index 257987cbbe..84bd2b180d 100644
--- a/superset-frontend/src/components/Form/FormItem.tsx
+++ b/superset-frontend/src/components/Form/FormItem.tsx
@@ -16,24 +16,21 @@
* specific language governing permissions and limitations
* under the License.
*/
-// eslint-disable-next-line no-restricted-imports
-import Form from 'antd/lib/form'; // TODO: Remove antd
+import { Form } from 'antd-v5';
import { styled } from '@superset-ui/core';
const StyledItem = styled(Form.Item)`
${({ theme }) => `
- .ant-form-item-label {
- padding-bottom: ${theme.sizeUnit}px;
+ margin-bottom: 0;
+ .antd5-form-item-label {
& > label {
- font-size: ${theme.fontSizeSM}px;
- color: ${theme.colors.grayscale.base};
-
- &.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
+
&.antd5-form-item-required:not(.antd5-form-item-required-mark-optional) {
&::before {
display: none;
}
&::after {
display: inline-block;
+ visibility: visible;
color: ${theme.colorError};
font-size: ${theme.fontSizeSM}px;
content: '*';
diff --git a/superset-frontend/src/components/Form/FormLabel.tsx
b/superset-frontend/src/components/Form/FormLabel.tsx
index e14b56c94b..6e33fb98a6 100644
--- a/superset-frontend/src/components/Form/FormLabel.tsx
+++ b/superset-frontend/src/components/Form/FormLabel.tsx
@@ -26,23 +26,18 @@ export type FormLabelProps = {
className?: string;
};
-const Label = styled.label`
- font-size: ${({ theme }) => theme.fontSizeSM}px;
- color: ${({ theme }) => theme.colors.grayscale.dark2};
- margin-bottom: ${({ theme }) => theme.sizeUnit}px;
-`;
-
-const RequiredLabel = styled.label`
- font-size: ${({ theme }) => theme.fontSizeSM}px;
- color: ${({ theme }) => theme.colors.grayscale.dark2};
- margin-bottom: ${({ theme }) => theme.sizeUnit}px;
- &::after {
- display: inline-block;
- margin-left: ${({ theme }) => theme.sizeUnit}px;
- color: ${({ theme }) => theme.colorError};
- font-size: ${({ theme }) => theme.fontSize}px;
- content: '*';
- }
+const Label = styled.label<{ required?: boolean }>`
+ ${({ required, theme }) =>
+ required &&
+ `
+ &::after {
+ display: inline-block;
+ margin-left: ${theme.sizeUnit}px;
+ color: ${theme.colorError};
+ font-size: ${theme.fontSize}px;
+ content: '*';
+ }
+ `}
`;
export default function FormLabel({
@@ -51,10 +46,9 @@ export default function FormLabel({
required = false,
className,
}: FormLabelProps) {
- const StyledLabel = required ? RequiredLabel : Label;
return (
- <StyledLabel htmlFor={htmlFor} className={className}>
+ <Label htmlFor={htmlFor} className={className} required={required}>
{children}
- </StyledLabel>
+ </Label>
);
}
diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index 73ab7ad28c..a4f37676b6 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -51,11 +51,11 @@ const StyledInputPassword = styled(Input.Password)`
`;
const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
- .ant-form-item-children-icon {
+ .antd5-form-item-children-icon {
display: none;
}
${hasError &&
- `.ant-form-item-control-input-content {
+ `.antd5-form-item-control-input-content {
position: relative;
&:after {
content: ' ';
@@ -79,7 +79,7 @@ const StyledFormGroup = styled('div')`
margin: 0;
}
margin-bottom: ${({ theme }) => theme.sizeUnit * 3}px;
- .ant-form-item {
+ .antd5-form-item {
margin-bottom: 0;
}
`;
diff --git a/superset-frontend/src/components/Form/index.tsx
b/superset-frontend/src/components/Form/index.tsx
index ec198e0a82..7af2de0173 100644
--- a/superset-frontend/src/components/Form/index.tsx
+++ b/superset-frontend/src/components/Form/index.tsx
@@ -16,10 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
-import Form, { FormProps } from './Form';
+import Form, { FormProps, FormItemProps, FormInstance } from './Form';
import FormItem from './FormItem';
import FormLabel from './FormLabel';
import LabeledErrorBoundInput from './LabeledErrorBoundInput';
export { Form, FormItem, FormLabel, LabeledErrorBoundInput };
-export type { FormProps };
+export type { FormProps, FormItemProps, FormInstance };
diff --git a/superset-frontend/src/components/index.ts
b/superset-frontend/src/components/index.ts
index 3858ad83c2..ac130ae926 100644
--- a/superset-frontend/src/components/index.ts
+++ b/superset-frontend/src/components/index.ts
@@ -57,12 +57,8 @@ export {
Breadcrumb as AntdBreadcrumb,
Checkbox as AntdCheckbox,
Collapse as AntdCollapse,
- Form as AntdForm,
Select as AntdSelect,
} from 'antd';
-// Exported types
-// eslint-disable-next-line no-restricted-imports
-export type { FormInstance } from 'antd/lib/form'; // TODO: Remove antd
// eslint-disable-next-line no-restricted-imports
export type { RadioChangeEvent } from 'antd/lib/radio'; // TODO: Remove antd
diff --git
a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
index 27501b81a7..a2190d9cb9 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
@@ -19,10 +19,10 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { omit } from 'lodash';
import { Input } from 'src/components/Input';
-import { FormItem } from 'src/components/Form';
+import { Form, FormItem } from 'src/components/Form';
import jsonStringify from 'json-stringify-pretty-compact';
import Button from 'src/components/Button';
-import { AntdForm, AsyncSelect, Col, Row } from 'src/components';
+import { AsyncSelect, Col, Row } from 'src/components';
import rison from 'rison';
import {
ensureIsArray,
@@ -111,7 +111,7 @@ const PropertiesModal = ({
show = false,
}: PropertiesModalProps) => {
const dispatch = useDispatch();
- const [form] = AntdForm.useForm();
+ const [form] = Form.useForm();
const [isLoading, setIsLoading] = useState(false);
const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
const [colorScheme, setCurrentColorScheme] = useState(currentColorScheme);
@@ -631,7 +631,7 @@ const PropertiesModal = ({
}
responsive
>
- <AntdForm
+ <Form
form={form}
onFinish={onFinish}
data-test="dashboard-edit-properties-form"
@@ -775,7 +775,7 @@ const PropertiesModal = ({
)}
</Col>
</Row>
- </AntdForm>
+ </Form>
</Modal>
);
};
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index bb81b44dfe..554f1df468 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -42,7 +42,6 @@ const FilterStyledIcon = styled.div`
const VerticalFilterControlTitle = styled.h4`
font-size: ${({ theme }) => theme.fontSizeSM}px;
color: ${({ theme }) => theme.colorText};
- margin: 0;
overflow-wrap: anywhere;
`;
@@ -78,22 +77,22 @@ const HorizontalOverflowFilterControlTitleBox = styled(
const VerticalFilterControlContainer = styled(Form)`
width: 100%;
- && .ant-form-item-label > label {
+ && .antd5-form-item-label > label {
text-transform: none;
width: 100%;
padding-right: ${({ theme }) => theme.sizeUnit * 11}px;
}
- .ant-form-item-tooltip {
+ .antd5-form-item-tooltip {
margin-bottom: ${({ theme }) => theme.sizeUnit}px;
}
`;
const HorizontalFilterControlContainer = styled(Form)`
- && .ant-form-item-label > label {
+ && .antd5-form-item-label > label {
margin-bottom: 0;
text-transform: none;
}
- .ant-form-item-tooltip {
+ .antd5-form-item-tooltip {
margin-bottom: ${({ theme }) => theme.sizeUnit}px;
}
`;
@@ -101,7 +100,7 @@ const HorizontalFilterControlContainer = styled(Form)`
const HorizontalOverflowFilterControlContainer = styled(
VerticalFilterControlContainer,
)`
- && .ant-form-item-label {
+ && .antd5-form-item-label {
line-height: 1;
& > label {
padding-right: unset;
@@ -110,9 +109,11 @@ const HorizontalOverflowFilterControlContainer = styled(
`;
const VerticalFormItem = styled(StyledFormItem)`
- .ant-form-item-label {
+ .antd5-form-item-label {
overflow: visible;
- label.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
+ label.antd5-form-item-required:not(
+ .antd5-form-item-required-mark-optional
+ ) {
&::after {
display: none;
}
@@ -126,11 +127,13 @@ const HorizontalFormItem = styled(StyledFormItem)`
align-items: center;
}
- .ant-form-item-label {
+ .antd5-form-item-label {
overflow: visible;
padding-bottom: 0;
margin-right: ${({ theme }) => theme.sizeUnit * 2}px;
- label.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
+ label.antd5-form-item-required:not(
+ .antd5-form-item-required-mark-optional
+ ) {
&::after {
display: none;
}
@@ -141,7 +144,7 @@ const HorizontalFormItem = styled(StyledFormItem)`
}
}
- .ant-form-item-control {
+ .antd5-form-item-control {
width: ${({ theme }) => theme.sizeUnit * 41}px;
}
`;
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
index 8e3906a114..b4eb572a7a 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
@@ -47,8 +47,6 @@ const HorizontalBarContent = styled.div`
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
- line-height: 0;
-
.loading {
margin: ${theme.sizeUnit * 2}px auto ${theme.sizeUnit * 2}px;
padding: 0;
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
index d659d7d2c1..2b334a0bad 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
@@ -103,9 +103,14 @@ const FilterBarEmptyStateContainer = styled.div`
`;
const FilterControlsWrapper = styled.div`
- padding: ${({ theme }) => theme.sizeUnit * 4}px;
- // 108px padding to make room for buttons with position: absolute
- padding-bottom: ${({ theme }) => theme.sizeUnit * 27}px;
+ ${({ theme }) => `
+ display: flex;
+ flex-direction: column;
+ gap: ${theme.sizeUnit * 2}px;
+ padding: ${theme.sizeUnit * 4}px;
+ // 108px padding to make room for buttons with position: absolute
+ padding-bottom: ${theme.sizeUnit * 27}px;
+ `}
`;
export const FilterBarScrollContext = createContext(false);
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx
index 72d4197acc..a749496054 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/ColumnSelect.tsx
@@ -25,16 +25,17 @@ import {
useChangeEffect,
getClientErrorObject,
} from '@superset-ui/core';
-import { Select, FormInstance } from 'src/components';
+import { Select } from 'src/components';
+import { FormInstance } from 'src/components/Form';
import { useToasts } from 'src/components/MessageToasts/withToasts';
import { cachedSupersetGet } from 'src/utils/cachedSupersetGet';
-import { NativeFiltersForm } from '../types';
+import { NativeFiltersForm, NativeFiltersFormItem } from '../types';
interface ColumnSelectProps {
allowClear?: boolean;
filterValues?: (column: Column) => boolean;
form: FormInstance<NativeFiltersForm>;
- formField?: string;
+ formField?: keyof NativeFiltersFormItem;
filterId: string;
datasetId?: number;
value?: string | string[];
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
index 1fbda8cd24..b20d315c16 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
@@ -24,7 +24,7 @@ import {
AppSection,
t,
} from '@superset-ui/core';
-import { FormInstance } from 'src/components';
+import { FormInstance } from 'src/components/Form';
import Loading from 'src/components/Loading';
import { NativeFiltersForm } from '../types';
import { getFormData } from '../../utils';
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
index 89457db858..a19f6c977b 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
@@ -19,7 +19,7 @@
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { NativeFilterScope, styled } from '@superset-ui/core';
-import { AntdForm } from 'src/components';
+import { FormItem } from 'src/components/Form';
import ScopingTree from './ScopingTree';
import { getDefaultScopeValue } from './utils';
@@ -42,7 +42,7 @@ const Wrapper = styled.div`
padding: 0px ${({ theme }) => theme.sizeUnit * 4}px;
`;
-const CleanFormItem = styled(AntdForm.Item)`
+const CleanFormItem = styled(FormItem)`
margin-bottom: 0;
`;
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/TreeInitialization.test.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/TreeInitialization.test.tsx
index bd611519e9..f18c71ce95 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/TreeInitialization.test.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/TreeInitialization.test.tsx
@@ -23,7 +23,7 @@ import {
waitFor,
cleanup,
} from 'spec/helpers/testing-library';
-import { FormInstance } from 'antd/lib/form';
+import { FormInstance } from 'src/components/Form';
import { createMockModal } from './utils';
describe('FilterScope TreeInitialization', () => {
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/TreeSelection.test.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/TreeSelection.test.tsx
index 0d1e8e6535..148e478dc7 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/TreeSelection.test.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/TreeSelection.test.tsx
@@ -23,7 +23,7 @@ import {
waitFor,
cleanup,
} from 'spec/helpers/testing-library';
-import { FormInstance } from 'antd/lib/form';
+import { FormInstance } from 'src/components/Form';
import { createMockModal, getTreeSwitcher } from './utils';
describe('FilterScope TreeSelection', () => {
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/utils.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/utils.tsx
index 2f6aaf51a9..81427417bf 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/utils.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/__tests__/utils.tsx
@@ -18,11 +18,11 @@
*/
import { useEffect } from 'react';
import { Provider } from 'react-redux';
-import { AntdForm, FormInstance } from 'src/components';
import FiltersConfigForm, {
FilterPanels,
} from
'src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm';
import { mockStoreWithChartsInTabsAndRoot } from 'spec/fixtures/mockStore';
+import { Form, FormInstance } from 'src/components/Form';
export const createMockedProps = () => ({
expanded: false,
@@ -48,7 +48,7 @@ interface MockModalProps {
export const createMockModal = ({ scope, formRef }: MockModalProps) => {
const MockModalComponent = () => {
- const [form] = AntdForm.useForm();
+ const [form] = Form.useForm();
useEffect(() => {
// Create a new ref object instead of modifying the parameter
@@ -71,9 +71,9 @@ export const createMockModal = ({ scope, formRef }:
MockModalProps) => {
return (
<Provider store={mockStoreWithChartsInTabsAndRoot}>
- <AntdForm form={form}>
+ <Form form={form}>
<FiltersConfigForm form={form} {...createMockedProps()} />
- </AntdForm>
+ </Form>
</Provider>
);
};
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index 008ed703ee..1681ffadd8 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -59,11 +59,11 @@ import { PluginFilterSelectCustomizeProps } from
'src/filters/components/Select/
import { useSelector } from 'react-redux';
import { getChartDataRequest } from 'src/components/Chart/chartAction';
import { Input, TextArea } from 'src/components/Input';
-import { Select, FormInstance } from 'src/components';
+import { Select } from 'src/components';
import Collapse from 'src/components/Collapse';
import BasicErrorAlert from 'src/components/ErrorMessage/BasicErrorAlert';
import ErrorMessageWithStackTrace from
'src/components/ErrorMessage/ErrorMessageWithStackTrace';
-import { FormItem } from 'src/components/Form';
+import { FormItem, FormInstance } from 'src/components/Form';
import { Icons } from 'src/components/Icons';
import Loading from 'src/components/Loading';
import { addDangerToast } from 'src/components/MessageToasts/actions';
@@ -86,6 +86,7 @@ import {
mergeExtraFormData,
} from 'src/dashboard/components/nativeFilters/utils';
import { DatasetSelectLabel } from 'src/features/datasets/DatasetSelectLabel';
+import { Flex } from 'src/components/Flex';
import {
ALLOW_DEPENDENCIES as TYPES_SUPPORT_DEPENDENCIES,
getFiltersConfigModalTestId,
@@ -123,12 +124,8 @@ const StyledContainer = styled.div`
`}
`;
-const StyledRowContainer = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- width: 100%;
- padding: 0px ${({ theme }) => theme.sizeUnit * 4}px;
+const StyledRowContainer = styled(Flex)`
+ padding: ${({ theme }) => theme.sizeUnit * 4}px;
`;
type ControlKey = keyof PluginFilterSelectCustomizeProps;
@@ -143,66 +140,21 @@ const controlsOrder: ControlKey[] = [
export const StyledFormItem = styled(FormItem)<{ expanded: boolean }>`
width: ${({ expanded }) => (expanded ? '49%' : `${FORM_ITEM_WIDTH}px`)};
- margin-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
-
- & .ant-form-item-label {
- padding-bottom: 0;
- }
-
- & .ant-form-item-control-input {
- min-height: ${({ theme }) => theme.sizeUnit * 10}px;
- }
`;
export const StyledRowFormItem = styled(FormItem)<{ expanded: boolean }>`
- margin-bottom: 0;
- padding-bottom: 0;
min-width: ${({ expanded }) => (expanded ? '50%' : `${FORM_ITEM_WIDTH}px`)};
-
- & .ant-form-item-label {
- padding-bottom: 0;
- }
-
- .ant-form-item-control-input-content > div > div {
- height: auto;
- }
-
- & .ant-form-item-control-input {
- min-height: ${({ theme }) => theme.sizeUnit * 10}px;
- }
`;
export const StyledRowSubFormItem = styled(FormItem)<{ expanded: boolean }>`
min-width: ${({ expanded }) => (expanded ? '50%' : `${FORM_ITEM_WIDTH}px`)};
-
- & .ant-form-item-label {
- padding-bottom: 0;
- }
-
- .ant-form-item {
- margin-bottom: 0;
- }
-
- .ant-form-item-control-input-content > div > div {
- height: auto;
- }
-
- .ant-form-item-extra {
- display: none;
- }
-
- & .ant-form-item-control-input {
- height: auto;
- }
`;
export const StyledLabel = styled.span`
- color: ${({ theme }) => theme.colors.grayscale.base};
- font-size: ${({ theme }) => theme.fontSizeSM}px;
-`;
-
-const CleanFormItem = styled(FormItem)`
- margin-bottom: 0;
+ ${({ theme }) => `
+ font-size: ${theme.fontSizeSM}px;
+ color: ${theme.colorTextSecondary};
+ `}
`;
const DefaultValueContainer = styled.div`
@@ -249,7 +201,7 @@ const StyledTabs = styled(Tabs)`
padding: 0;
}
- .ant-form-item-label {
+ .ant-5-form-item-label {
padding-bottom: 0;
}
`;
@@ -901,7 +853,7 @@ const FiltersConfigForm = (
</FilterTypeInfo>
)}
{hasDataset && (
- <StyledRowContainer>
+ <StyledRowContainer justify="space-between">
{showDataset ? (
<StyledFormItem
expanded={expanded}
@@ -997,7 +949,7 @@ const FiltersConfigForm = (
</StyledRowFormItem>
)}
{hasDataset && hasAdditionalFilters && (
- <CleanFormItem name={['filters', filterId, 'preFilter']}>
+ <FormItem name={['filters', filterId, 'preFilter']}>
<CollapsibleControl
initialValue={hasPreFilter}
title={t('Pre-filter available values')}
@@ -1081,10 +1033,10 @@ const FiltersConfigForm = (
? timeColumn
: undefined}
</CollapsibleControl>
- </CleanFormItem>
+ </FormItem>
)}
{formFilter?.filterType !== 'filter_range' ? (
- <CleanFormItem name={['filters', filterId, 'sortFilter']}>
+ <FormItem name={['filters', filterId, 'sortFilter']}>
<CollapsibleControl
initialValue={hasSorting}
title={t('Sort filter values')}
@@ -1154,9 +1106,9 @@ const FiltersConfigForm = (
</StyledRowSubFormItem>
)}
</CollapsibleControl>
- </CleanFormItem>
+ </FormItem>
) : (
- <CleanFormItem name={['filters', filterId, 'rangeFilter']}>
+ <FormItem name={['filters', filterId, 'rangeFilter']}>
<CollapsibleControl
initialValue={hasEnableSingleValue}
title={t('Single Value')}
@@ -1199,7 +1151,7 @@ const FiltersConfigForm = (
/>
</StyledRowFormItem>
</CollapsibleControl>
- </CleanFormItem>
+ </FormItem>
)}
</Collapse.Panel>
)}
@@ -1216,12 +1168,12 @@ const FiltersConfigForm = (
>
<TextArea onChange={debouncedFormChanged} />
</StyledFormItem>
- <CleanFormItem
+ <FormItem
name={['filters', filterId, 'defaultValueQueriesData']}
hidden
initialValue={null}
/>
- <CleanFormItem name={['filters', filterId, 'defaultValue']}>
+ <FormItem name={['filters', filterId, 'defaultValue']}>
<CollapsibleControl
checked={hasDefaultValue}
disabled={isRequired || defaultToFirstItem}
@@ -1338,7 +1290,7 @@ const FiltersConfigForm = (
</StyledRowSubFormItem>
)}
</CollapsibleControl>
- </CleanFormItem>
+ </FormItem>
{Object.keys(controlItems)
.sort(
(a, b) =>
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
index 6d6966f709..b9703f4b96 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
@@ -18,7 +18,7 @@
*/
import { Filter, NativeFilterType } from '@superset-ui/core';
import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import { FormInstance } from 'src/components';
+import { FormInstance } from 'src/components/Form';
import getControlItemsMap, { ControlItemsProps } from './getControlItemsMap';
import { getControlItems, setNativeFilterFieldValues } from './utils';
@@ -28,7 +28,9 @@ jest.mock('./utils', () => ({
}));
const formMock: FormInstance = {
- __INTERNAL__: { itemRef: () => () => {} },
+ focusField: () => {},
+ getFieldWarning: () => [],
+ setFieldValue: () => {},
scrollToField: () => {},
getFieldInstance: () => {},
getFieldValue: () => {},
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
index ed92809988..b4ed135a8a 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
@@ -21,7 +21,7 @@ import {
InfoTooltipWithTrigger,
} from '@superset-ui/chart-controls';
import { ReactNode } from 'react';
-import { AntdCheckbox, FormInstance } from 'src/components';
+import { AntdCheckbox } from 'src/components';
import {
Filter,
getChartControlPanelRegistry,
@@ -29,7 +29,7 @@ import {
t,
} from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip';
-import { FormItem } from 'src/components/Form';
+import { FormItem, FormInstance } from 'src/components/Form';
import {
doesColumnMatchFilterType,
getControlItems,
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/state.ts
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/state.ts
index f71d60a134..4070a142c5 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/state.ts
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/state.ts
@@ -17,7 +17,7 @@
* under the License.
*/
import { useEffect, useState } from 'react';
-import { FormInstance } from 'src/components';
+import { FormInstance } from 'src/components/Form';
import { Filter, t } from '@superset-ui/core';
import { NativeFiltersForm, NativeFiltersFormItem } from '../types';
import { setNativeFilterFieldValues, useForceUpdate } from './utils';
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
index 09f515b63e..be51b40a95 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
@@ -17,7 +17,7 @@
* under the License.
*/
import { flatMapDeep } from 'lodash';
-import { FormInstance } from 'src/components';
+import { FormInstance } from 'src/components/Form';
import { useState, useCallback } from 'react';
import { CustomControlItem, Dataset } from '@superset-ui/chart-controls';
import { Column, ensureIsArray, GenericDataType } from '@superset-ui/core';
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
index a7004954f2..56715f936d 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
@@ -29,7 +29,7 @@ import {
useTheme,
} from '@superset-ui/core';
import { useDispatch } from 'react-redux';
-import { AntdForm } from 'src/components';
+import { Form } from 'src/components/Form';
import { Icons } from 'src/components/Icons';
import ErrorBoundary from 'src/components/ErrorBoundary';
import { StyledModal } from 'src/components/Modal';
@@ -101,7 +101,7 @@ export const StyledModalBody = styled.div<{ expanded:
boolean }>`
}
`;
-export const StyledForm = styled(AntdForm)`
+export const StyledForm = styled(Form)`
width: 100%;
`;
@@ -156,7 +156,7 @@ function FiltersConfigModal({
const dispatch = useDispatch();
const theme = useTheme();
- const [form] = AntdForm.useForm<NativeFiltersForm>();
+ const [form] = Form.useForm<NativeFiltersForm>();
const configFormRef = useRef<any>();
@@ -554,7 +554,11 @@ function FiltersConfigModal({
.forEach(filterId => {
const result = hasCircularDependency(dependencyMap, filterId);
const field = {
- name: ['filters', filterId, 'dependencies'],
+ name: ['filters', filterId, 'dependencies'] as [
+ 'filters',
+ string,
+ 'dependencies',
+ ],
errors: result ? [t('Cyclic dependency detected')] : [],
};
form.setFields([field]);
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
index af51dedbe6..fb702e8852 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { FormInstance } from 'src/components';
+import { FormInstance } from 'src/components/Form';
import { nanoid } from 'nanoid';
import { getInitialDataMask } from 'src/dataMask/reducer';
import {
diff --git a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
index 422ecc8257..928055fcc0 100644
--- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
@@ -21,7 +21,7 @@ import { ChangeEvent, useMemo, useState, useCallback,
useEffect } from 'react';
import Modal from 'src/components/Modal';
import { Input, TextArea } from 'src/components/Input';
import Button from 'src/components/Button';
-import { AsyncSelect, Row, Col, AntdForm } from 'src/components';
+import { AsyncSelect, Row, Col } from 'src/components';
// eslint-disable-next-line no-restricted-imports
import { SelectValue } from 'antd/lib/select'; // TODO: Remove antd
import rison from 'rison';
@@ -42,6 +42,7 @@ import withToasts from
'src/components/MessageToasts/withToasts';
import { loadTags } from 'src/components/Tags/utils';
import { fetchTags, OBJECT_TYPES } from 'src/features/tags/tags';
import TagType from 'src/types/TagType';
+import { Form } from 'src/components/Form';
export type PropertiesModalProps = {
slice: Slice;
@@ -53,9 +54,9 @@ export type PropertiesModalProps = {
addSuccessToast: (msg: string) => void;
};
-const FormItem = AntdForm.Item;
+const FormItem = Form.Item;
-const StyledFormItem = styled(AntdForm.Item)`
+const StyledFormItem = styled(Form.Item)`
margin-bottom: 0;
`;
@@ -72,7 +73,7 @@ function PropertiesModal({
}: PropertiesModalProps) {
const theme = useTheme();
const [submitting, setSubmitting] = useState(false);
- const [form] = AntdForm.useForm();
+ const [form] = Form.useForm();
// values of form inputs
const [name, setName] = useState(slice.slice_name || '');
const [selectedOwners, setSelectedOwners] = useState<SelectValue | null>(
@@ -294,7 +295,7 @@ function PropertiesModal({
responsive
wrapProps={{ 'data-test': 'properties-edit-modal' }}
>
- <AntdForm
+ <Form
form={form}
onFinish={onSubmit}
layout="vertical"
@@ -408,7 +409,7 @@ function PropertiesModal({
)}
</Col>
</Row>
- </AntdForm>
+ </Form>
</Modal>
);
}
diff --git
a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx
b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx
index c0331a204f..bcefbd4e00 100644
---
a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx
+++
b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx
@@ -98,7 +98,7 @@ export const StyledGeoStyler = styled(GeoStylerWrapper)`
font-weight: ${theme.fontWeightNormal};
font-size: ${theme.fontSizeXL}px;
}
- .ant-form-item-control {
+ .antd5-form-item-control {
flex: unset;
}
`}
diff --git
a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
index c10859993a..af8e64693d 100644
---
a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
+++
b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
@@ -19,7 +19,7 @@
import { useRef, useState } from 'react';
import { SupersetTheme, t } from '@superset-ui/core';
import { Button, AntdSelect } from 'src/components';
-import FormLabel from 'src/components/Form/FormLabel';
+import { FormLabel } from 'src/components/Form';
import { Icons } from 'src/components/Icons';
import { DatabaseParameters, FieldPropTypes } from '../../types';
import { infoTooltip, CredentialInfoForm } from '../styles';
diff --git
a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx
b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx
index cb30054364..fca72603e3 100644
---
a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx
+++
b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx
@@ -18,7 +18,7 @@
*/
import { css, SupersetTheme, t } from '@superset-ui/core';
import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
-import FormLabel from 'src/components/Form/FormLabel';
+import { FormLabel } from 'src/components/Form';
import { Icons } from 'src/components/Icons';
import { StyledFooterButton, StyledCatalogTable } from '../styles';
import { CatalogObject, FieldPropTypes } from '../../types';
diff --git
a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
index 7feb06aaf9..a0390cd0e0 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
@@ -18,7 +18,7 @@
*/
import { useState } from 'react';
import { t, styled } from '@superset-ui/core';
-import { AntdForm, Col, Row } from 'src/components';
+import { Col, Row } from 'src/components';
import { Form, FormLabel } from 'src/components/Form';
import { Radio } from 'src/components/Radio';
import { Input, TextArea } from 'src/components/Input';
@@ -40,7 +40,7 @@ const StyledRow = styled(Row)`
padding-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
`;
-const StyledFormItem = styled(AntdForm.Item)`
+const StyledFormItem = styled(Form.Item)`
margin-bottom: 0 !important;
`;
diff --git a/superset-frontend/src/features/databases/UploadDataModel/index.tsx
b/superset-frontend/src/features/databases/UploadDataModel/index.tsx
index 55681b5c1b..beb866d697 100644
--- a/superset-frontend/src/features/databases/UploadDataModel/index.tsx
+++ b/superset-frontend/src/features/databases/UploadDataModel/index.tsx
@@ -35,20 +35,14 @@ import Modal from 'src/components/Modal';
import Button from 'src/components/Button';
import { Switch, SwitchProps } from 'src/components/Switch';
import Collapse from 'src/components/Collapse';
-import {
- AntdForm,
- AsyncSelect,
- Col,
- Row,
- Select,
- Upload,
-} from 'src/components';
+import { AsyncSelect, Col, Row, Select, Upload } from 'src/components';
import { Icons } from 'src/components/Icons';
import { Input, InputNumber } from 'src/components/Input';
import rison from 'rison';
// eslint-disable-next-line no-restricted-imports
import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface'; //
TODO: Remove antd
import withToasts from 'src/components/MessageToasts/withToasts';
+import { Form } from 'src/components/Form';
import {
antdCollapseStyles,
antDModalNoPaddingStyles,
@@ -218,7 +212,7 @@ const UploadDataModal:
FunctionComponent<UploadDataModalProps> = ({
allowedExtensions,
type = 'csv',
}) => {
- const [form] = AntdForm.useForm();
+ const [form] = Form.useForm();
const [currentDatabaseId, setCurrentDatabaseId] = useState<number>(0);
const [fileList, setFileList] = useState<UploadFile[]>([]);
const [columns, setColumns] = useState<string[]>([]);
@@ -589,7 +583,7 @@ const UploadDataModal:
FunctionComponent<UploadDataModalProps> = ({
show={show}
title={<UploadTitle />}
>
- <AntdForm
+ <Form
form={form}
onFinish={onFinish}
data-test="dashboard-edit-properties-form"
@@ -1034,7 +1028,7 @@ const UploadDataModal:
FunctionComponent<UploadDataModalProps> = ({
</Collapse.Panel>
)}
</Collapse>
- </AntdForm>
+ </Form>
</Modal>
);
};
diff --git
a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 2ae9b4af32..6a7dda0f10 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -30,8 +30,9 @@ import { InputNumber } from 'src/components/Input';
import { FilterBarOrientation } from 'src/dashboard/types';
import Metadata from 'src/components/Metadata';
import { isNumber } from 'lodash';
+import { FormItem } from 'src/components/Form';
import { PluginFilterRangeProps } from './types';
-import { StatusMessage, StyledFormItem, FilterPluginStyle } from '../common';
+import { StatusMessage, FilterPluginStyle } from '../common';
import { getRangeExtraFormData } from '../../utils';
import { SingleValueType } from './SingleValueType';
@@ -340,7 +341,7 @@ export default function RangeFilterPlugin(props:
PluginFilterRangeProps) {
{Number.isNaN(Number(min)) || Number.isNaN(Number(max)) ? (
<h4>{t('Chosen non-numeric column')}</h4>
) : (
- <StyledFormItem
+ <FormItem
aria-labelledby={`filter-name-${formData.nativeFilterId}`}
extra={formItemExtra}
>
@@ -382,7 +383,7 @@ export default function RangeFilterPlugin(props:
PluginFilterRangeProps) {
{(rangeInput ||
filterBarOrientation === FilterBarOrientation.Vertical) &&
!filterState.validateStatus && <Metadata value={metadataText} />}
- </StyledFormItem>
+ </FormItem>
)}
</FilterPluginStyle>
);
diff --git
a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index 23447fb295..e8e0bd0d04 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -38,8 +38,9 @@ import { Select } from 'src/components';
import { SLOW_DEBOUNCE } from 'src/constants';
import { hasOption, propertyComparator } from 'src/components/Select/utils';
import { FilterBarOrientation } from 'src/dashboard/types';
+import { FormItem } from 'src/components/Form';
import { PluginFilterSelectProps, SelectValue } from './types';
-import { FilterPluginStyle, StatusMessage, StyledFormItem } from '../common';
+import { FilterPluginStyle, StatusMessage } from '../common';
import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
type DataMaskAction =
@@ -289,7 +290,7 @@ export default function PluginFilterSelect(props:
PluginFilterSelectProps) {
return (
<FilterPluginStyle height={height} width={width}>
- <StyledFormItem
+ <FormItem
validateStatus={filterState.validateStatus}
extra={formItemExtra}
>
@@ -326,7 +327,7 @@ export default function PluginFilterSelect(props:
PluginFilterSelectProps) {
sortComparator={sortComparator}
onDropdownVisibleChange={setFilterActive}
/>
- </StyledFormItem>
+ </FormItem>
</FilterPluginStyle>
);
}
diff --git
a/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
b/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
index 0e456b35c0..9f50e2103c 100644
---
a/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
+++
b/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
@@ -25,9 +25,8 @@ import {
} from '@superset-ui/core';
import { useEffect, useState } from 'react';
import { Select } from 'src/components';
-// eslint-disable-next-line no-restricted-imports
-import { FormItemProps } from 'antd/lib/form'; // TODO: Remove antd
-import { FilterPluginStyle, StyledFormItem, StatusMessage } from '../common';
+import { FormItem, FormItemProps } from 'src/components/Form';
+import { FilterPluginStyle, StatusMessage } from '../common';
import { PluginFilterTimeColumnProps } from './types';
export default function PluginFilterTimeColumn(
@@ -107,10 +106,7 @@ export default function PluginFilterTimeColumn(
return (
<FilterPluginStyle height={height} width={width}>
- <StyledFormItem
- validateStatus={filterState.validateStatus}
- {...formItemData}
- >
+ <FormItem validateStatus={filterState.validateStatus} {...formItemData}>
<Select
name={formData.nativeFilterId}
allowClear
@@ -126,7 +122,7 @@ export default function PluginFilterTimeColumn(
options={options}
onDropdownVisibleChange={setFilterActive}
/>
- </StyledFormItem>
+ </FormItem>
</FilterPluginStyle>
);
}
diff --git
a/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
b/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
index e8381f53e5..230823c7d7 100644
---
a/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
+++
b/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
@@ -25,9 +25,8 @@ import {
} from '@superset-ui/core';
import { useEffect, useMemo, useState } from 'react';
import { Select } from 'src/components';
-// eslint-disable-next-line no-restricted-imports
-import { FormItemProps } from 'antd/lib/form'; // TODO: Remove antd
-import { FilterPluginStyle, StyledFormItem, StatusMessage } from '../common';
+import { FormItem, FormItemProps } from 'src/components/Form';
+import { FilterPluginStyle, StatusMessage } from '../common';
import { PluginFilterTimeGrainProps } from './types';
export default function PluginFilterTimegrain(
@@ -117,10 +116,7 @@ export default function PluginFilterTimegrain(
return (
<FilterPluginStyle height={height} width={width}>
- <StyledFormItem
- validateStatus={filterState.validateStatus}
- {...formItemData}
- >
+ <FormItem validateStatus={filterState.validateStatus} {...formItemData}>
<Select
name={formData.nativeFilterId}
allowClear
@@ -136,7 +132,7 @@ export default function PluginFilterTimegrain(
options={options}
onDropdownVisibleChange={setFilterActive}
/>
- </StyledFormItem>
+ </FormItem>
</FilterPluginStyle>
);
}
diff --git a/superset-frontend/src/filters/components/common.ts
b/superset-frontend/src/filters/components/common.ts
index cb6d7f22f1..2074309526 100644
--- a/superset-frontend/src/filters/components/common.ts
+++ b/superset-frontend/src/filters/components/common.ts
@@ -18,7 +18,6 @@
*/
import { styled } from '@superset-ui/core';
import { PluginFilterStylesProps } from './types';
-import FormItem from '../../components/Form/FormItem';
export const RESPONSIVE_WIDTH = 0;
@@ -27,12 +26,6 @@ export const FilterPluginStyle =
styled.div<PluginFilterStylesProps>`
width: ${({ width }) => (width === RESPONSIVE_WIDTH ? '100%' :
`${width}px`)};
`;
-export const StyledFormItem = styled(FormItem)`
- &.ant-row.ant-form-item {
- margin: 0;
- }
-`;
-
export const StatusMessage = styled.div<{
status?: 'error' | 'warning' | 'info';
}>`
