From 468bb5f47a81f6b3773db2cd1a75f01ae9a32b5f Mon Sep 17 00:00:00 2001 From: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com> Date: Fri, 31 Jan 2025 17:45:06 +0100 Subject: [PATCH] refactor(Radio): Upgrade Radio Component to Ant Design 5 (#32004) --- .../components/SaveDatasetModal/index.tsx | 4 +- .../Chart/DrillBy/useDisplayModeToggle.tsx | 28 +--- .../src/components/Radio/Radio.stories.tsx | 147 +++++++++++++++--- .../src/components/Radio/index.tsx | 80 +++++----- .../header-renderers/HeaderWithRadioGroup.tsx | 20 ++- .../FiltersConfigForm/FiltersConfigForm.tsx | 36 +++-- .../components/DataTableControl/index.tsx | 22 ++- .../DateFilterControl/DateFilterLabel.tsx | 6 - .../components/CalendarFrame.tsx | 18 ++- .../components/CommonFrame.tsx | 18 ++- .../components/CurrentCalendarFrame.tsx | 25 ++- .../components/CustomFrame.tsx | 15 +- .../tests/CalendarFrame.test.tsx | 8 +- .../tests/CustomFrame.test.tsx | 8 +- .../DateFilterControl/utils/constants.ts | 13 +- .../features/reports/ReportModal/index.tsx | 40 +++-- .../features/reports/ReportModal/styles.tsx | 4 - 17 files changed, 293 insertions(+), 199 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx index 5df4d0c30..379b0726a 100644 --- a/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx +++ b/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx @@ -19,8 +19,8 @@ import { useCallback, useState, FormEvent } from 'react'; -import { Radio } from 'src/components/Radio'; -import { RadioChangeEvent, AsyncSelect } from 'src/components'; +import { Radio, RadioChangeEvent } from 'src/components/Radio'; +import { AsyncSelect } from 'src/components'; import { Input } from 'src/components/Input'; import StyledModal from 'src/components/Modal'; import Button from 'src/components/Button'; diff --git a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx index bd2729633..12d186a25 100644 --- a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx +++ b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx @@ -32,33 +32,21 @@ export const useDisplayModeToggle = () => {
css` margin-bottom: ${theme.gridUnit * 6}px; - .ant-radio-button-wrapper-checked:not( - .ant-radio-button-wrapper-disabled - ):focus-within { - box-shadow: none; - } `} data-test="drill-by-display-toggle" > - { setDrillByDisplayMode(value); }} defaultValue={DrillByType.Chart} - > - - {t('Chart')} - - - {t('Table')} - - + options={[ + { label: t('Chart'), value: DrillByType.Chart }, + { label: t('Table'), value: DrillByType.Table }, + ]} + optionType="button" + buttonStyle="outline" + />
), [], diff --git a/superset-frontend/src/components/Radio/Radio.stories.tsx b/superset-frontend/src/components/Radio/Radio.stories.tsx index e518e48ba..4329322b4 100644 --- a/superset-frontend/src/components/Radio/Radio.stories.tsx +++ b/superset-frontend/src/components/Radio/Radio.stories.tsx @@ -16,40 +16,139 @@ * specific language governing permissions and limitations * under the License. */ -import { useArgs } from '@storybook/preview-api'; -import { Radio } from './index'; +import { Space } from 'src/components/Space'; +import { + BarChartOutlined, + DotChartOutlined, + LineChartOutlined, + PieChartOutlined, +} from '@ant-design/icons'; +import { Radio, RadioProps, RadioGroupWrapperProps } from './index'; export default { title: 'Radio', component: Radio, - parameters: { - controls: { hideNoControlsWarning: true }, + tags: ['autodocs'], +}; + +const RadioArgsType = { + value: { + control: 'text', + description: 'The value of the radio button.', }, - argTypes: { - theme: { - table: { - disable: true, - }, - }, - checked: { control: 'boolean' }, - disabled: { control: 'boolean' }, + disabled: { + control: 'boolean', + description: 'Whether the radio button is disabled or not.', + }, + checked: { + control: 'boolean', + description: 'The checked state of the radio button.', }, }; -export const SupersetRadio = () => { - const [{ checked, ...rest }, updateArgs] = useArgs(); - return ( - updateArgs({ checked: !checked })} - {...rest} - > - Example - - ); +const radioGroupWrapperArgsType = { + onChange: { action: 'changed' }, + disabled: { control: 'boolean' }, + size: { + control: 'select', + options: ['small', 'middle', 'large'], + }, + options: { control: 'object' }, + 'spaceConfig.direction': { + control: 'select', + options: ['horizontal', 'vertical'], + description: 'Direction of the Space layout', + if: { arg: 'enableSpaceConfig', truthy: true }, + }, + 'spaceConfig.size': { + control: 'select', + options: ['small', 'middle', 'large'], + description: 'Layout size Space', + if: { arg: 'enableSpaceConfig', truthy: true }, + }, + 'spaceConfig.align': { + control: 'select', + options: ['start', 'center', 'end'], + description: 'Alignment of the Space layout', + if: { arg: 'enableSpaceConfig', truthy: true }, + }, + 'spaceConfig.wrap': { + control: 'boolean', + description: + 'Controls whether the items inside the Space component should wrap to the next line when space is insufficient', + if: { arg: 'enableSpaceConfig', truthy: true }, + }, }; -SupersetRadio.args = { +export const RadioStory = { + args: { + value: 'radio1', + disabled: false, + checked: false, + children: 'Radio', + }, + argTypes: RadioArgsType, +}; + +export const RadioButtonStory = (args: RadioProps) => ( + Radio Button +); +RadioButtonStory.args = { + value: 'button1', + disabled: false, checked: false, +}; +RadioButtonStory.argTypes = RadioArgsType; + +export const RadioGroupWithOptionsStory = (args: RadioGroupWrapperProps) => ( + +); +RadioGroupWithOptionsStory.args = { + spaceConfig: { + direction: 'vertical', + size: 'middle', + align: 'center', + wrap: false, + }, + size: 'middle', + options: [ + { + value: 1, + label: ( + + + LineChart + + ), + }, + { + value: 2, + label: ( + + + DotChart + + ), + }, + { + value: 3, + label: ( + + + BarChart + + ), + }, + { + value: 4, + label: ( + + + PieChart + + ), + }, + ], disabled: false, }; +RadioGroupWithOptionsStory.argTypes = radioGroupWrapperArgsType; diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index f06392d27..9311cdde5 100644 --- a/superset-frontend/src/components/Radio/index.tsx +++ b/superset-frontend/src/components/Radio/index.tsx @@ -16,46 +16,48 @@ * specific language governing permissions and limitations * under the License. */ -import { styled } from '@superset-ui/core'; -import { Radio as AntdRadio } from 'antd'; +import { Radio as Antd5Radio, CheckboxOptionType } from 'antd-v5'; +import type { + RadioChangeEvent, + RadioProps, + RadioGroupProps, +} from 'antd-v5/lib/radio'; -const StyledRadio = styled(AntdRadio)` - .ant-radio-inner { - top: -1px; - left: 2px; - width: ${({ theme }) => theme.gridUnit * 4}px; - height: ${({ theme }) => theme.gridUnit * 4}px; - border-width: 2px; - border-color: ${({ theme }) => theme.colors.grayscale.light2}; - } +import { Space, SpaceProps } from 'src/components/Space'; - .ant-radio.ant-radio-checked { - .ant-radio-inner { - border-width: ${({ theme }) => theme.gridUnit + 1}px; - border-color: ${({ theme }) => theme.colors.primary.base}; - } +export type RadioGroupWrapperProps = RadioGroupProps & { + spaceConfig?: { + direction?: SpaceProps['direction']; + size?: SpaceProps['size']; + align?: SpaceProps['align']; + wrap?: SpaceProps['wrap']; + }; + options: CheckboxOptionType[]; +}; - .ant-radio-inner::after { - background-color: ${({ theme }) => theme.colors.grayscale.light5}; - top: 0; - left: 0; - width: ${({ theme }) => theme.gridUnit + 2}px; - height: ${({ theme }) => theme.gridUnit + 2}px; - } - } - - .ant-radio:hover, - .ant-radio:focus { - .ant-radio-inner { - border-color: ${({ theme }) => theme.colors.primary.dark1}; - } - } -`; -const StyledGroup = styled(AntdRadio.Group)` - font-size: inherit; -`; - -export const Radio = Object.assign(StyledRadio, { - Group: StyledGroup, - Button: AntdRadio.Button, +const RadioGroup = ({ + spaceConfig, + options, + ...props +}: RadioGroupWrapperProps) => { + const content = options.map((option: CheckboxOptionType) => ( + + {option.label} + + )); + return ( + + {spaceConfig ? {content} : content} + + ); +}; +export type { + RadioChangeEvent, + RadioGroupProps, + RadioProps, + CheckboxOptionType, +}; +export const Radio = Object.assign(Antd5Radio, { + GroupWrapper: RadioGroup, + Button: Antd5Radio.Button, }); diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx index b80d5445f..3aedff2b4 100644 --- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx +++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx @@ -19,7 +19,6 @@ import { useState } from 'react'; import { css, useTheme } from '@superset-ui/core'; import { Radio } from 'src/components/Radio'; -import { Space } from 'src/components/Space'; import Icons from 'src/components/Icons'; import Popover from 'src/components/Popover'; @@ -56,21 +55,20 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) { > {groupTitle} - { onChange(e.target.value); setPopoverVisible(false); }} - > - - {groupOptions.map(option => ( - - {option.label} - - ))} - - + options={groupOptions} + /> } placement="bottomLeft" 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 ccf763e39..5b843a370 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx @@ -1106,15 +1106,16 @@ const FiltersConfigForm = ( initialValue={sort} label={{t('Sort type')}} > - { onSortChanged(value.target.value); formChanged(); }} - > - {t('Sort ascending')} - {t('Sort descending')} - + /> {hasMetrics && ( {t('Single value type')} } > - { onEnableSingleValueChanged(value.target.value); formChanged(); }} - > - - {t('Minimum')} - - - {t('Exact')} - - - {t('Maximum')} - - + options={[ + { + label: t('Minimum'), + value: SingleValueType.Minimum, + }, + { label: t('Exact'), value: SingleValueType.Exact }, + { + label: t('Maximum'), + value: SingleValueType.Maximum, + }, + ]} + /> diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx index 012b89e8d..20e2a4775 100644 --- a/superset-frontend/src/explore/components/DataTableControl/index.tsx +++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx @@ -30,7 +30,6 @@ import { import { Global } from '@emotion/react'; import { Column } from 'react-table'; import { debounce } from 'lodash'; -import { Space } from 'src/components/Space'; import { Input } from 'src/components/Input'; import { BOOL_FALSE_DISPLAY, @@ -141,12 +140,21 @@ const FormatPicker = ({ onChange: any; value: FormatPickerValue; }) => ( - - - {t('Formatted date')} - {t('Original value')} - - + ); const FormatPickerContainer = styled.div` diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx index a4b0ca3a3..dc4057f33 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx @@ -87,12 +87,6 @@ const ContentStyleWrapper = styled.div` margin: 8px 0; } - .vertical-radio { - display: block; - height: 40px; - line-height: 40px; - } - .section-title { font-style: normal; font-weight: ${theme.typography.weights.bold}; diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx index 8900e213f..4fb48cf52 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx @@ -45,16 +45,18 @@ export function CalendarFrame({ onChange, value }: FrameComponentProps) {
{t('Configure Time Range: Previous...')}
- onChange(e.target.value)} - > - {CALENDAR_RANGE_OPTIONS.map(({ value, label }) => ( - - {label} - - ))} - + options={CALENDAR_RANGE_OPTIONS} + /> ); } diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx index 30365ffc2..633066a4f 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx @@ -41,16 +41,18 @@ export function CommonFrame(props: FrameComponentProps) {
{t('Configure Time Range: Last...')}
- props.onChange(e.target.value)} - > - {COMMON_RANGE_OPTIONS.map(({ value, label }) => ( - - {label} - - ))} - + options={COMMON_RANGE_OPTIONS} + /> ); } diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx index 7d1a3a7b7..27fc77818 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx @@ -41,25 +41,22 @@ export function CurrentCalendarFrame({ onChange, value }: FrameComponentProps) {
{t('Configure Time Range: Current...')}
- { let newValue = e.target.value; - // Sanitization: Trim whitespace newValue = newValue.trim(); - // Validation: Check if the value is non-empty - if (newValue === '') { - return; - } + if (newValue === '') return; onChange(newValue); }} - > - {CURRENT_RANGE_OPTIONS.map(({ value, label }) => ( - - {label} - - ))} - + options={CURRENT_RANGE_OPTIONS} + /> ); } diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx index 378956c64..969b46855 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx @@ -238,18 +238,15 @@ export function CustomFrame(props: FrameComponentProps) {
{t('Anchor to')}
- - - {t('NOW')} - - - {t('Date/Time')} - - + /> {anchorMode !== 'now' && ( diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CalendarFrame.test.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CalendarFrame.test.tsx index 163ce4caf..b859d737b 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CalendarFrame.test.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CalendarFrame.test.tsx @@ -42,7 +42,7 @@ describe('CalendarFrame', () => { const radios = screen.getAllByRole('radio'); expect(radios).toHaveLength(CALENDAR_RANGE_OPTIONS.length); CALENDAR_RANGE_OPTIONS.forEach(option => { - expect(screen.getByText(option.label)).toBeInTheDocument(); + expect(screen.getByText(option.label as string)).toBeInTheDocument(); }); }); @@ -56,7 +56,7 @@ describe('CalendarFrame', () => { ); const secondOption = CALENDAR_RANGE_OPTIONS[1]; - const radio = screen.getByLabelText(secondOption.label); + const radio = screen.getByLabelText(secondOption.label as string); fireEvent.click(radio); expect(mockOnChange).toHaveBeenCalledWith(secondOption.value); @@ -85,6 +85,8 @@ describe('CalendarFrame', () => { const thirdOption = CALENDAR_RANGE_OPTIONS[2]; expect(thirdOption.value).toBe(PreviousCalendarQuarter); - expect(screen.getByLabelText(thirdOption.label)).toBeInTheDocument(); + expect( + screen.getByLabelText(thirdOption.label as string), + ).toBeInTheDocument(); }); }); diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx index ab8fc5bb3..f8afe1599 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx @@ -167,8 +167,8 @@ test('renders anchor with now option', async () => { ); await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading')); expect(screen.getByText('Anchor to')).toBeInTheDocument(); - expect(screen.getByRole('radio', { name: 'NOW' })).toBeInTheDocument(); - expect(screen.getByRole('radio', { name: 'Date/Time' })).toBeInTheDocument(); + expect(screen.getByLabelText('Now')).toBeInTheDocument(); + expect(screen.getByLabelText('Date/Time')).toBeInTheDocument(); expect(screen.queryByPlaceholderText('Select date')).not.toBeInTheDocument(); }); @@ -180,8 +180,8 @@ test('renders anchor with date/time option', async () => { ); await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading')); expect(screen.getByText('Anchor to')).toBeInTheDocument(); - expect(screen.getByRole('radio', { name: 'NOW' })).toBeInTheDocument(); - expect(screen.getByRole('radio', { name: 'Date/Time' })).toBeInTheDocument(); + expect(screen.getByLabelText('Now')).toBeInTheDocument(); + expect(screen.getByLabelText('Date/Time')).toBeInTheDocument(); expect(screen.getByPlaceholderText('Select date')).toBeInTheDocument(); }); diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts index 16b24d7a0..e76b778fc 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts @@ -32,6 +32,7 @@ import { CurrentQuarter, CurrentDay, } from 'src/explore/components/controls/DateFilterControl/types'; +import { CheckboxOptionType } from 'src/components/Radio'; import { extendedDayjs } from 'src/utils/dates'; export const FRAME_OPTIONS: SelectOptionType[] = [ @@ -43,7 +44,7 @@ export const FRAME_OPTIONS: SelectOptionType[] = [ { value: 'No filter', label: t('No filter') }, ]; -export const COMMON_RANGE_OPTIONS: SelectOptionType[] = [ +export const COMMON_RANGE_OPTIONS: CheckboxOptionType[] = [ { value: 'Last day', label: t('Last day') }, { value: 'Last week', label: t('Last week') }, { value: 'Last month', label: t('Last month') }, @@ -51,20 +52,20 @@ export const COMMON_RANGE_OPTIONS: SelectOptionType[] = [ { value: 'Last year', label: t('Last year') }, ]; export const COMMON_RANGE_VALUES_SET = new Set( - COMMON_RANGE_OPTIONS.map(({ value }) => value), + COMMON_RANGE_OPTIONS.map(value => value.value), ); -export const CALENDAR_RANGE_OPTIONS: SelectOptionType[] = [ +export const CALENDAR_RANGE_OPTIONS: CheckboxOptionType[] = [ { value: PreviousCalendarWeek, label: t('previous calendar week') }, { value: PreviousCalendarMonth, label: t('previous calendar month') }, { value: PreviousCalendarQuarter, label: t('previous calendar quarter') }, { value: PreviousCalendarYear, label: t('previous calendar year') }, ]; export const CALENDAR_RANGE_VALUES_SET = new Set( - CALENDAR_RANGE_OPTIONS.map(({ value }) => value), + CALENDAR_RANGE_OPTIONS.map(value => value.value), ); -export const CURRENT_RANGE_OPTIONS: SelectOptionType[] = [ +export const CURRENT_RANGE_OPTIONS: CheckboxOptionType[] = [ { value: CurrentDay, label: t('Current day') }, { value: CurrentWeek, label: t('Current week') }, { value: CurrentMonth, label: t('Current month') }, @@ -72,7 +73,7 @@ export const CURRENT_RANGE_OPTIONS: SelectOptionType[] = [ { value: CurrentYear, label: t('Current year') }, ]; export const CURRENT_RANGE_VALUES_SET = new Set( - CURRENT_RANGE_OPTIONS.map(({ value }) => value), + CURRENT_RANGE_OPTIONS.map(value => value.value), ); const GRAIN_OPTIONS = [ diff --git a/superset-frontend/src/features/reports/ReportModal/index.tsx b/superset-frontend/src/features/reports/ReportModal/index.tsx index 47f11dfa5..59f9263a3 100644 --- a/superset-frontend/src/features/reports/ReportModal/index.tsx +++ b/superset-frontend/src/features/reports/ReportModal/index.tsx @@ -41,7 +41,7 @@ import TimezoneSelector from 'src/components/TimezoneSelector'; import LabeledErrorBoundInput from 'src/components/Form/LabeledErrorBoundInput'; import Icons from 'src/components/Icons'; import { CronError } from 'src/components/CronPicker'; -import { RadioChangeEvent } from 'src/components'; +import { Radio, RadioChangeEvent } from 'src/components/Radio'; import { Input } from 'src/components/Input'; import withToasts from 'src/components/MessageToasts/withToasts'; import { ChartState } from 'src/explore/types'; @@ -68,8 +68,6 @@ import { TimezoneHeaderStyle, SectionHeaderStyle, StyledMessageContentTitle, - StyledRadio, - StyledRadioGroup, } from './styles'; interface ReportProps { @@ -257,24 +255,32 @@ function ReportModal({

{t('Message content')}

- { setCurrentReport({ report_format: event.target.value }); }} value={currentReport.report_format || defaultNotificationFormat} - > - {isTextBasedChart && ( - - {t('Text embedded in email')} - - )} - - {t('Image (PNG) embedded in email')} - - - {t('Formatted CSV attached in email')} - - + options={[ + { + label: t('Text embedded in email'), + value: NotificationFormats.Text, + }, + { + label: t('Image (PNG) embedded in email'), + value: NotificationFormats.PNG, + }, + { + label: t('Formatted CSV attached in email'), + value: NotificationFormats.CSV, + }, + ]} + />
); diff --git a/superset-frontend/src/features/reports/ReportModal/styles.tsx b/superset-frontend/src/features/reports/ReportModal/styles.tsx index ad30adce8..0f5c12bd3 100644 --- a/superset-frontend/src/features/reports/ReportModal/styles.tsx +++ b/superset-frontend/src/features/reports/ReportModal/styles.tsx @@ -108,10 +108,6 @@ export const StyledRadio = styled(Radio)` line-height: ${({ theme }) => theme.gridUnit * 8}px; `; -export const StyledRadioGroup = styled(Radio.Group)` - margin-left: ${({ theme }) => theme.gridUnit * 0.5}px; -`; - export const antDErrorAlertStyles = (theme: SupersetTheme) => css` margin: ${theme.gridUnit * 4}px; margin-top: 0;