From bc5da631c879f8bd2d2f6f4dfee9eda38aee6415 Mon Sep 17 00:00:00 2001 From: alexandrusoare <37236580+alexandrusoare@users.noreply.github.com> Date: Wed, 30 Oct 2024 20:18:49 +0200 Subject: [PATCH] refactor(Switch): Upgrade Switch to Ant Design 5 (#30731) --- .../src/SqlLab/components/SqlEditor/index.tsx | 7 ++-- .../src/components/Switch/Switch.stories.tsx | 5 ++- .../src/components/Switch/Switch.test.tsx | 41 +++++++++++++++++++ .../src/components/Switch/index.tsx | 12 ++---- superset-frontend/src/components/index.ts | 1 - .../CommonParameters.tsx | 4 +- .../DatabaseModal/SSHTunnelSwitch.test.tsx | 4 +- .../DatabaseModal/SSHTunnelSwitch.tsx | 4 +- superset-frontend/src/pages/Home/index.tsx | 4 +- superset-frontend/src/theme/index.ts | 4 ++ 10 files changed, 64 insertions(+), 22 deletions(-) create mode 100644 superset-frontend/src/components/Switch/Switch.test.tsx diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx index 731053ac0..cab82cd02 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 = ({ {' '} {t('Render HTML')}{' '} - {' '} @@ -706,7 +707,7 @@ const SqlEditor: FC = ({ {' '} {t('Autocomplete')}{' '} - {' '} diff --git a/superset-frontend/src/components/Switch/Switch.stories.tsx b/superset-frontend/src/components/Switch/Switch.stories.tsx index 9e6a4061a..3e5d12d3e 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/Switch.test.tsx b/superset-frontend/src/components/Switch/Switch.test.tsx new file mode 100644 index 000000000..0e8e762d0 --- /dev/null +++ b/superset-frontend/src/components/Switch/Switch.test.tsx @@ -0,0 +1,41 @@ +/** + * 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 { render, screen } from 'spec/helpers/testing-library'; +import { Switch } from '.'; + +const mockedProps = { + label: 'testLabel', + dataTest: 'dataTest', + checked: false, +}; + +test('should render', () => { + const { container } = render(); + expect(container).toBeInTheDocument(); +}); + +test('should have the correct checked prop', () => { + render(); + + 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 875b66f58..b4d89e850 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) => ; +export const Switch = (props: SwitchProps) => ; export type { SwitchProps }; diff --git a/superset-frontend/src/components/index.ts b/superset-frontend/src/components/index.ts index 16b6138c1..8b771da99 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 d2170de6f..33a258d72 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) => (
infoTooltip(theme)}> - { diff --git a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.test.tsx b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.test.tsx index 300186703..35fc05555 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 fa0e8fe43..623091f39 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 ? (
infoTooltip(theme)}> -
- + {t('Thumbnails')}
diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts index 857e95888..1ed1cc21a 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, + }, }, };