This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new bc5da631c8 refactor(Switch): Upgrade Switch to Ant Design 5 (#30731)
bc5da631c8 is described below
commit bc5da631c879f8bd2d2f6f4dfee9eda38aee6415
Author: alexandrusoare <[email protected]>
AuthorDate: Wed Oct 30 20:18:49 2024 +0200
refactor(Switch): Upgrade Switch to Ant Design 5 (#30731)
---
.../src/SqlLab/components/SqlEditor/index.tsx | 7 ++---
.../src/components/Switch/Switch.stories.tsx | 5 +++-
.../Switch/{index.tsx => Switch.test.tsx} | 30 +++++++++++++++-------
superset-frontend/src/components/Switch/index.tsx | 12 +++------
superset-frontend/src/components/index.ts | 1 -
.../DatabaseConnectionForm/CommonParameters.tsx | 4 +--
.../DatabaseModal/SSHTunnelSwitch.test.tsx | 4 +--
.../databases/DatabaseModal/SSHTunnelSwitch.tsx | 4 +--
superset-frontend/src/pages/Home/index.tsx | 4 +--
superset-frontend/src/theme/index.ts | 4 +++
10 files changed, 44 insertions(+), 31 deletions(-)
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
index 731053ac0b..cab82cd02f 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
@@ -56,7 +56,8 @@ import Mousetrap from 'mousetrap';
import Button from 'src/components/Button';
import Timer from 'src/components/Timer';
import ResizableSidebar from 'src/components/ResizableSidebar';
-import { AntdDropdown, AntdSwitch, Skeleton } from 'src/components';
+import { AntdDropdown, Skeleton } from 'src/components';
+import { Switch } from 'src/components/Switch';
import { Input } from 'src/components/Input';
import { Menu } from 'src/components/Menu';
import Icons from 'src/components/Icons';
@@ -698,7 +699,7 @@ const SqlEditor: FC<Props> = ({
<Menu.Item css={{ display: 'flex', justifyContent: 'space-between' }}>
{' '}
<span>{t('Render HTML')}</span>{' '}
- <AntdSwitch
+ <Switch
checked={renderHTMLEnabled}
onChange={handleToggleRenderHTMLEnabled}
/>{' '}
@@ -706,7 +707,7 @@ const SqlEditor: FC<Props> = ({
<Menu.Item css={{ display: 'flex', justifyContent: 'space-between' }}>
{' '}
<span>{t('Autocomplete')}</span>{' '}
- <AntdSwitch
+ <Switch
checked={autocompleteEnabled}
onChange={handleToggleAutocompleteEnabled}
/>{' '}
diff --git a/superset-frontend/src/components/Switch/Switch.stories.tsx
b/superset-frontend/src/components/Switch/Switch.stories.tsx
index 9e6a4061a4..3e5d12d3ea 100644
--- a/superset-frontend/src/components/Switch/Switch.stories.tsx
+++ b/superset-frontend/src/components/Switch/Switch.stories.tsx
@@ -33,12 +33,15 @@ export const InteractiveSwitch = ({ checked, ...rest }:
SwitchProps) => {
/>
);
};
+const defaultCheckedValue = true;
InteractiveSwitch.args = {
- checked: false,
+ checked: defaultCheckedValue,
disabled: false,
loading: false,
title: 'Switch',
+ defaultChecked: defaultCheckedValue,
+ autoFocus: true,
};
InteractiveSwitch.argTypes = {
diff --git a/superset-frontend/src/components/Switch/index.tsx
b/superset-frontend/src/components/Switch/Switch.test.tsx
similarity index 59%
copy from superset-frontend/src/components/Switch/index.tsx
copy to superset-frontend/src/components/Switch/Switch.test.tsx
index 875b66f587..0e8e762d04 100644
--- a/superset-frontend/src/components/Switch/index.tsx
+++ b/superset-frontend/src/components/Switch/Switch.test.tsx
@@ -16,14 +16,26 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { styled } from '@superset-ui/core';
-import BaseSwitch, { SwitchProps } from 'antd/lib/switch';
-const StyledSwitch = styled(BaseSwitch)`
- .ant-switch-checked {
- background-color: ${({ theme }) => theme.colors.primary.base};
- }
-`;
+import { render, screen } from 'spec/helpers/testing-library';
+import { Switch } from '.';
-export const Switch = (props: SwitchProps) => <StyledSwitch {...props} />;
-export type { SwitchProps };
+const mockedProps = {
+ label: 'testLabel',
+ dataTest: 'dataTest',
+ checked: false,
+};
+
+test('should render', () => {
+ const { container } = render(<Switch {...mockedProps} />);
+ expect(container).toBeInTheDocument();
+});
+
+test('should have the correct checked prop', () => {
+ render(<Switch {...mockedProps} />);
+
+ const switchElement = screen.getByRole('switch');
+
+ expect(switchElement).toBeInTheDocument();
+ expect(switchElement).not.toBeChecked();
+});
diff --git a/superset-frontend/src/components/Switch/index.tsx
b/superset-frontend/src/components/Switch/index.tsx
index 875b66f587..b4d89e8505 100644
--- a/superset-frontend/src/components/Switch/index.tsx
+++ b/superset-frontend/src/components/Switch/index.tsx
@@ -16,14 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { styled } from '@superset-ui/core';
-import BaseSwitch, { SwitchProps } from 'antd/lib/switch';
+import { SwitchProps } from 'antd-v5/lib/switch';
+import { Switch as AntdSwitch } from 'antd-v5';
-const StyledSwitch = styled(BaseSwitch)`
- .ant-switch-checked {
- background-color: ${({ theme }) => theme.colors.primary.base};
- }
-`;
-
-export const Switch = (props: SwitchProps) => <StyledSwitch {...props} />;
+export const Switch = (props: SwitchProps) => <AntdSwitch {...props} />;
export type { SwitchProps };
diff --git a/superset-frontend/src/components/index.ts
b/superset-frontend/src/components/index.ts
index 16b6138c18..8b771da995 100644
--- a/superset-frontend/src/components/index.ts
+++ b/superset-frontend/src/components/index.ts
@@ -67,7 +67,6 @@ export {
Modal as AntdModal,
Select as AntdSelect,
Slider as AntdSlider,
- Switch as AntdSwitch,
Tabs as AntdTabs,
Tooltip as AntdTooltip,
} from 'antd';
diff --git
a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx
b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx
index d2170de6f8..33a258d724 100644
---
a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx
+++
b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/CommonParameters.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { SupersetTheme, t } from '@superset-ui/core';
-import { AntdSwitch } from 'src/components';
+import { Switch } from 'src/components/Switch';
import InfoTooltip from 'src/components/InfoTooltip';
import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
import { FieldPropTypes } from '../../types';
@@ -296,7 +296,7 @@ export const forceSSLField = ({
sslForced,
}: FieldPropTypes) => (
<div css={(theme: SupersetTheme) => infoTooltip(theme)}>
- <AntdSwitch
+ <Switch
disabled={sslForced && !isEditMode}
checked={db?.parameters?.encryption || sslForced}
onChange={changed => {
diff --git
a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.test.tsx
b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.test.tsx
index 3001867036..35fc05555b 100644
---
a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.test.tsx
+++
b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.test.tsx
@@ -26,8 +26,8 @@ jest.mock('@superset-ui/core', () => ({
isFeatureEnabled: jest.fn().mockReturnValue(true),
}));
-jest.mock('src/components', () => ({
- AntdSwitch: ({
+jest.mock('src/components/Switch', () => ({
+ Switch: ({
checked,
onChange,
}: {
diff --git
a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx
b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx
index fa0e8fe433..623091f397 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx
@@ -23,7 +23,7 @@ import {
isFeatureEnabled,
FeatureFlag,
} from '@superset-ui/core';
-import { AntdSwitch } from 'src/components';
+import { Switch } from 'src/components/Switch';
import InfoTooltip from 'src/components/InfoTooltip';
import { isEmpty } from 'lodash';
import { infoTooltip, toggleStyle } from './styles';
@@ -80,7 +80,7 @@ const SSHTunnelSwitch = ({
return isSSHTunnelEnabled ? (
<div css={(theme: SupersetTheme) => infoTooltip(theme)}>
- <AntdSwitch
+ <Switch
checked={isChecked}
onChange={handleOnChange}
data-test="ssh-tunnel-switch"
diff --git a/superset-frontend/src/pages/Home/index.tsx
b/superset-frontend/src/pages/Home/index.tsx
index b92e84f486..c5e2c794b5 100644
--- a/superset-frontend/src/pages/Home/index.tsx
+++ b/superset-frontend/src/pages/Home/index.tsx
@@ -46,7 +46,7 @@ import {
loadingCardCount,
mq,
} from 'src/views/CRUD/utils';
-import { AntdSwitch } from 'src/components';
+import { Switch } from 'src/components/Switch';
import getBootstrapData from 'src/utils/getBootstrapData';
import { TableTab } from 'src/views/CRUD/types';
import SubMenu, { SubMenuProps } from 'src/features/home/SubMenu';
@@ -340,7 +340,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
name: (
<WelcomeNav>
<div className="switch">
- <AntdSwitch checked={checked} onClick={handleToggle} />
+ <Switch checked={checked} onClick={handleToggle} />
<span>{t('Thumbnails')}</span>
</div>
</WelcomeNav>
diff --git a/superset-frontend/src/theme/index.ts
b/superset-frontend/src/theme/index.ts
index 857e95888f..1ed1cc21a6 100644
--- a/superset-frontend/src/theme/index.ts
+++ b/superset-frontend/src/theme/index.ts
@@ -75,6 +75,10 @@ const baseConfig: ThemeConfig = {
handleSizeHover: 10,
handleLineWidthHover: 2,
},
+ Switch: {
+ colorPrimaryHover: supersetTheme.colors.primary.base,
+ colorTextTertiary: supersetTheme.colors.grayscale.light1,
+ },
},
};
