From eaf5bf06aae4b397e85a0eefad614b7f051628b9 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Fri, 24 Jan 2025 18:22:11 +0100 Subject: [PATCH 01/17] refactor(radio) Migrates Radio to Ant Design 5 --- .../src/components/Radio/index.ts | 26 ++++++++ .../src/components/Radio/index.tsx | 61 ------------------- 2 files changed, 26 insertions(+), 61 deletions(-) create mode 100644 superset-frontend/src/components/Radio/index.ts delete mode 100644 superset-frontend/src/components/Radio/index.tsx diff --git a/superset-frontend/src/components/Radio/index.ts b/superset-frontend/src/components/Radio/index.ts new file mode 100644 index 0000000000000..2c416288fb814 --- /dev/null +++ b/superset-frontend/src/components/Radio/index.ts @@ -0,0 +1,26 @@ +/** + * 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 { Radio as Antd5Radio } from 'antd-v5'; + +export type { RadioChangeEvent, RadioGroupProps, RadioProps } from 'antd-v5'; + +export const Radio = Object.assign(Antd5Radio, { + Group: Antd5Radio.Group, + Button: Antd5Radio.Button, +}); diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx deleted file mode 100644 index f06392d27879e..0000000000000 --- a/superset-frontend/src/components/Radio/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/** - * 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 { styled } from '@superset-ui/core'; -import { Radio as AntdRadio } from 'antd'; - -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}; - } - - .ant-radio.ant-radio-checked { - .ant-radio-inner { - border-width: ${({ theme }) => theme.gridUnit + 1}px; - border-color: ${({ theme }) => theme.colors.primary.base}; - } - - .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, -}); From 52aba75836ce565bc9aca2d3f517332e0fdae703 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Sat, 25 Jan 2025 18:29:33 +0100 Subject: [PATCH 02/17] refactor(CalendarFrame): Implements Radio from Antd5 --- .../components/Radio/{index.ts => index.tsx} | 17 ++++++++++++++++- .../components/CalendarFrame.tsx | 16 ++++++---------- 2 files changed, 22 insertions(+), 11 deletions(-) rename superset-frontend/src/components/Radio/{index.ts => index.tsx} (67%) diff --git a/superset-frontend/src/components/Radio/index.ts b/superset-frontend/src/components/Radio/index.tsx similarity index 67% rename from superset-frontend/src/components/Radio/index.ts rename to superset-frontend/src/components/Radio/index.tsx index 2c416288fb814..73be66487c83d 100644 --- a/superset-frontend/src/components/Radio/index.ts +++ b/superset-frontend/src/components/Radio/index.tsx @@ -17,10 +17,25 @@ * under the License. */ import { Radio as Antd5Radio } from 'antd-v5'; +import React from 'react'; +import type { RadioChangeEvent, RadioGroupProps, RadioProps } from 'antd-v5'; -export type { RadioChangeEvent, RadioGroupProps, RadioProps } from 'antd-v5'; +const verticalStyle: React.CSSProperties = { + display: 'flex', + flexDirection: 'column', + gap: '15px' +} +// Wrapper for GroupVertical +const VerticalGroup = (props: RadioGroupProps) => { + return ( + ) +} + +export type { RadioChangeEvent, RadioGroupProps, RadioProps }; export const Radio = Object.assign(Antd5Radio, { Group: Antd5Radio.Group, Button: Antd5Radio.Button, + VerticalGroup: VerticalGroup }); + 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 8900e213f4b95..56f369159cfc4 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,12 @@ export function CalendarFrame({ onChange, value }: FrameComponentProps) {
{t('Configure Time Range: Previous...')}
- onChange(e.target.value)} - > - {CALENDAR_RANGE_OPTIONS.map(({ value, label }) => ( - - {label} - - ))} - + onChange(e.target.value)} + options={CALENDAR_RANGE_OPTIONS} + /> ); } From aaaad9028d728cb2a00fd0a2cb78db5bb49c0ef8 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Sat, 25 Jan 2025 18:33:22 +0100 Subject: [PATCH 03/17] refactor(CommonFrame): Implements Radio from Antd5 --- .../DateFilterControl/components/CommonFrame.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) 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 30365ffc28c90..24a0c54d9f338 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,12 @@ 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} + /> ); } From 64a2a3c723c66697da4b98d456565ff52e600060 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Sat, 25 Jan 2025 18:41:55 +0100 Subject: [PATCH 04/17] refactor(CurrentCalendarFrame): Implements Radio from Antd5 --- .../DateFilterControl/DateFilterLabel.tsx | 6 ------ .../components/CurrentCalendarFrame.tsx | 18 +++++------------- 2 files changed, 5 insertions(+), 19 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx index a4b0ca3a3ee99..dc4057f33ba80 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/CurrentCalendarFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx index 7d1a3a7b78ea5..4f1babfd5ac53 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,17 @@ 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} + /> ); } From f233d2405dda155478c7391a4ba5eab3739b4882 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Sat, 25 Jan 2025 20:06:46 +0100 Subject: [PATCH 05/17] refactor(DisplayModeToggle): - Implements Radio from Antd5 - Update types in constants file for options constants --- .../Chart/DrillBy/useDisplayModeToggle.tsx | 37 ++++++++----------- .../src/components/Radio/index.tsx | 3 +- .../DateFilterControl/utils/constants.ts | 13 ++++--- 3 files changed, 25 insertions(+), 28 deletions(-) diff --git a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx index bd2729633e645..48a90aafc7789 100644 --- a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx +++ b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx @@ -19,49 +19,44 @@ import { useMemo, useState } from 'react'; import { css, SupersetTheme, t } from '@superset-ui/core'; -import { Radio } from 'src/components/Radio'; +import { Radio, CheckboxGroupProps } from 'src/components/Radio'; import { DrillByType } from '../types'; export const useDisplayModeToggle = () => { const [drillByDisplayMode, setDrillByDisplayMode] = useState( DrillByType.Chart, ); - - const displayModeToggle = useMemo( +const customButtons: CheckboxGroupProps['options'] = [ + { label: t('Chart'), value: DrillByType.Chart }, + { label: t('Table'), value: DrillByType.Table }, +]; + const displayModeToggle = useMemo( () => (
css` margin-bottom: ${theme.gridUnit * 6}px; - .ant-radio-button-wrapper-checked:not( + .antd5-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')} - - + defaultValue={DrillByType.Chart} + options={customButtons} + value={drillByDisplayMode} + optionType="button" + buttonStyle="outline" + />
), - [], + [drillByDisplayMode], ); return { displayModeToggle, drillByDisplayMode }; }; + diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index 73be66487c83d..ce87e5b45cf13 100644 --- a/superset-frontend/src/components/Radio/index.tsx +++ b/superset-frontend/src/components/Radio/index.tsx @@ -19,6 +19,7 @@ import { Radio as Antd5Radio } from 'antd-v5'; import React from 'react'; import type { RadioChangeEvent, RadioGroupProps, RadioProps } from 'antd-v5'; +import type { CheckboxGroupProps } from 'antd-v5/es/checkbox'; const verticalStyle: React.CSSProperties = { display: 'flex', @@ -32,7 +33,7 @@ const VerticalGroup = (props: RadioGroupProps) => { ) } -export type { RadioChangeEvent, RadioGroupProps, RadioProps }; +export type { RadioChangeEvent, RadioGroupProps, RadioProps, CheckboxGroupProps }; export const Radio = Object.assign(Antd5Radio, { Group: Antd5Radio.Group, Button: Antd5Radio.Button, 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 16b24d7a0b322..584f420428f4d 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 { CheckboxGroupProps } 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: CheckboxGroupProps['options'] = [ { 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), ); -export const CALENDAR_RANGE_OPTIONS: SelectOptionType[] = [ +export const CALENDAR_RANGE_OPTIONS: CheckboxGroupProps['options'] = [ { 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), ); -export const CURRENT_RANGE_OPTIONS: SelectOptionType[] = [ +export const CURRENT_RANGE_OPTIONS: CheckboxGroupProps['options'] = [ { 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), ); const GRAIN_OPTIONS = [ From 4ee62faee1d815633600c6aa078f8b705c8c9ed1 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Sat, 25 Jan 2025 21:32:32 +0100 Subject: [PATCH 06/17] refactor(HeaderWithRadioGroup): Implements Radio.Group from Antd5 --- .../header-renderers/HeaderWithRadioGroup.tsx | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx index b80d5445f58b0..352f0f807f8c0 100644 --- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx +++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx @@ -19,10 +19,8 @@ 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'; - export interface HeaderWithRadioGroupProps { headerTitle: string; groupTitle: string; @@ -56,21 +54,14 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) { > {groupTitle} - { onChange(e.target.value); setPopoverVisible(false); }} - > - - {groupOptions.map(option => ( - - {option.label} - - ))} - - + options={groupOptions} + /> } placement="bottomLeft" From a62bb6d3dbfaf46c157b9f0de4da04569f410fa1 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Mon, 27 Jan 2025 15:26:49 +0100 Subject: [PATCH 07/17] Lint fix --- .../cypress-base/cypress/support/e2e.ts | 2 +- .../Chart/DrillBy/useDisplayModeToggle.tsx | 25 ++++++++-------- .../src/components/Radio/index.tsx | 29 ++++++++++++------- .../header-renderers/HeaderWithRadioGroup.tsx | 1 + .../components/CalendarFrame.tsx | 12 ++++---- .../components/CommonFrame.tsx | 2 +- .../components/CurrentCalendarFrame.tsx | 2 +- .../tests/CalendarFrame.test.tsx | 14 +++++++-- .../DateFilterControl/utils/constants.ts | 14 ++++----- 9 files changed, 59 insertions(+), 42 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/support/e2e.ts b/superset-frontend/cypress-base/cypress/support/e2e.ts index 4a471c87d1b05..87229278b7ee5 100644 --- a/superset-frontend/cypress-base/cypress/support/e2e.ts +++ b/superset-frontend/cypress-base/cypress/support/e2e.ts @@ -169,7 +169,7 @@ Cypress.Commands.add('login', () => { }).then(response => { if (response.status === 302) { // If there's a redirect, follow it manually - const redirectUrl = response.headers['location']; + const redirectUrl = response.headers.location; cy.request({ method: 'GET', url: redirectUrl, diff --git a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx index 48a90aafc7789..acc87a75b5896 100644 --- a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx +++ b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx @@ -26,11 +26,11 @@ export const useDisplayModeToggle = () => { const [drillByDisplayMode, setDrillByDisplayMode] = useState( DrillByType.Chart, ); -const customButtons: CheckboxGroupProps['options'] = [ - { label: t('Chart'), value: DrillByType.Chart }, - { label: t('Table'), value: DrillByType.Table }, -]; - const displayModeToggle = useMemo( + const customButtons: CheckboxGroupProps['options'] = [ + { label: t('Chart'), value: DrillByType.Chart }, + { label: t('Table'), value: DrillByType.Table }, + ]; + const displayModeToggle = useMemo( () => (
css` @@ -42,21 +42,20 @@ const customButtons: CheckboxGroupProps['options'] = [ } `} data-test="drill-by-display-toggle" - > + > { setDrillByDisplayMode(value); }} - defaultValue={DrillByType.Chart} - options={customButtons} - value={drillByDisplayMode} - optionType="button" - buttonStyle="outline" - /> + defaultValue={DrillByType.Chart} + options={customButtons} + value={drillByDisplayMode} + optionType="button" + buttonStyle="outline" + />
), [drillByDisplayMode], ); return { displayModeToggle, drillByDisplayMode }; }; - diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index ce87e5b45cf13..70643fe5b088d 100644 --- a/superset-frontend/src/components/Radio/index.tsx +++ b/superset-frontend/src/components/Radio/index.tsx @@ -18,25 +18,34 @@ */ import { Radio as Antd5Radio } from 'antd-v5'; import React from 'react'; -import type { RadioChangeEvent, RadioGroupProps, RadioProps } from 'antd-v5'; +import type { + RadioChangeEvent, + RadioGroupProps, + RadioProps, + CheckboxOptionType, +} from 'antd-v5'; import type { CheckboxGroupProps } from 'antd-v5/es/checkbox'; const verticalStyle: React.CSSProperties = { display: 'flex', flexDirection: 'column', - gap: '15px' -} + gap: '15px', +}; // Wrapper for GroupVertical -const VerticalGroup = (props: RadioGroupProps) => { - return ( - ) -} +const VerticalGroup = (props: RadioGroupProps) => ( + +); -export type { RadioChangeEvent, RadioGroupProps, RadioProps, CheckboxGroupProps }; +export type { + RadioChangeEvent, + RadioGroupProps, + RadioProps, + CheckboxGroupProps, + CheckboxOptionType, +}; export const Radio = Object.assign(Antd5Radio, { Group: Antd5Radio.Group, Button: Antd5Radio.Button, - VerticalGroup: VerticalGroup + VerticalGroup, }); - diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx index 352f0f807f8c0..6b9c26020adde 100644 --- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx +++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx @@ -21,6 +21,7 @@ import { css, useTheme } from '@superset-ui/core'; import { Radio } from 'src/components/Radio'; import Icons from 'src/components/Icons'; import Popover from 'src/components/Popover'; + export interface HeaderWithRadioGroupProps { headerTitle: string; groupTitle: string; 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 56f369159cfc4..7f792bf4c4a53 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx @@ -45,12 +45,12 @@ export function CalendarFrame({ onChange, value }: FrameComponentProps) {
{t('Configure Time Range: Previous...')}
- onChange(e.target.value)} - options={CALENDAR_RANGE_OPTIONS} - /> + onChange(e.target.value)} + 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 24a0c54d9f338..21b301f32bd04 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx @@ -42,7 +42,7 @@ export function CommonFrame(props: FrameComponentProps) { {t('Configure Time Range: Last...')} props.onChange(e.target.value)} 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 4f1babfd5ac53..5dfd7eef29d05 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx @@ -42,7 +42,7 @@ export function CurrentCalendarFrame({ onChange, value }: FrameComponentProps) { {t('Configure Time Range: Current...')} { let newValue = e.target.value; 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 163ce4caf1a4a..d82da2a30cffe 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,13 @@ 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(); + if ( + typeof option === 'object' && + 'label' in option && + typeof option.label === 'string' + ) { + expect(screen.getByText(option.label)).toBeInTheDocument(); + } }); }); @@ -56,7 +62,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 +91,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/utils/constants.ts b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts index 584f420428f4d..e76b778fc6589 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts @@ -32,7 +32,7 @@ import { CurrentQuarter, CurrentDay, } from 'src/explore/components/controls/DateFilterControl/types'; -import { CheckboxGroupProps } from 'src/components/Radio'; +import { CheckboxOptionType } from 'src/components/Radio'; import { extendedDayjs } from 'src/utils/dates'; export const FRAME_OPTIONS: SelectOptionType[] = [ @@ -44,7 +44,7 @@ export const FRAME_OPTIONS: SelectOptionType[] = [ { value: 'No filter', label: t('No filter') }, ]; -export const COMMON_RANGE_OPTIONS: CheckboxGroupProps['options'] = [ +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') }, @@ -52,20 +52,20 @@ export const COMMON_RANGE_OPTIONS: CheckboxGroupProps['options'] = [ { 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: CheckboxGroupProps['options'] = [ +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: CheckboxGroupProps['options'] = [ +export const CURRENT_RANGE_OPTIONS: CheckboxOptionType[] = [ { value: CurrentDay, label: t('Current day') }, { value: CurrentWeek, label: t('Current week') }, { value: CurrentMonth, label: t('Current month') }, @@ -73,7 +73,7 @@ export const CURRENT_RANGE_OPTIONS: CheckboxGroupProps['options'] = [ { 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 = [ From 6b10a5e1eca24e24d19ed97e474c71406900c059 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Mon, 27 Jan 2025 21:02:33 +0100 Subject: [PATCH 08/17] refactor(Radio): - Radio.GroupWrapper customization for Radio.Group component - Replaces Radio.Group in the base code with Radio.GroupWrapper - Optimizes by removing excess code --- .../Chart/DrillBy/useDisplayModeToggle.tsx | 11 ++-- .../src/components/Radio/index.tsx | 52 ++++++++++++++----- .../header-renderers/HeaderWithRadioGroup.tsx | 5 +- .../FiltersConfigForm/FiltersConfigForm.tsx | 8 +-- .../components/DataTableControl/index.tsx | 16 +++--- .../components/CalendarFrame.tsx | 5 +- .../components/CommonFrame.tsx | 5 +- .../components/CurrentCalendarFrame.tsx | 6 ++- .../components/CustomFrame.tsx | 4 +- .../tests/CalendarFrame.test.tsx | 8 +-- 10 files changed, 73 insertions(+), 47 deletions(-) diff --git a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx index acc87a75b5896..3b305178538e8 100644 --- a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx +++ b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx @@ -19,14 +19,14 @@ import { useMemo, useState } from 'react'; import { css, SupersetTheme, t } from '@superset-ui/core'; -import { Radio, CheckboxGroupProps } from 'src/components/Radio'; +import { Radio, CheckboxOptionType } from 'src/components/Radio'; import { DrillByType } from '../types'; export const useDisplayModeToggle = () => { const [drillByDisplayMode, setDrillByDisplayMode] = useState( DrillByType.Chart, ); - const customButtons: CheckboxGroupProps['options'] = [ + const customButtons: CheckboxOptionType[] = [ { label: t('Chart'), value: DrillByType.Chart }, { label: t('Table'), value: DrillByType.Table }, ]; @@ -35,15 +35,10 @@ export const useDisplayModeToggle = () => {
css` margin-bottom: ${theme.gridUnit * 6}px; - .antd5-radio-button-wrapper-checked:not( - .ant-radio-button-wrapper-disabled - ):focus-within { - box-shadow: none; - } `} data-test="drill-by-display-toggle" > - { setDrillByDisplayMode(value); }} diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index 70643fe5b088d..3a4c796f72fec 100644 --- a/superset-frontend/src/components/Radio/index.tsx +++ b/superset-frontend/src/components/Radio/index.tsx @@ -17,35 +17,59 @@ * under the License. */ import { Radio as Antd5Radio } from 'antd-v5'; -import React from 'react'; import type { RadioChangeEvent, - RadioGroupProps, RadioProps, + RadioGroupProps, CheckboxOptionType, } from 'antd-v5'; -import type { CheckboxGroupProps } from 'antd-v5/es/checkbox'; +import { Space, SpaceProps } from 'src/components/Space'; -const verticalStyle: React.CSSProperties = { - display: 'flex', - flexDirection: 'column', - gap: '15px', +export type RadioGroupWrapperProps = RadioGroupProps & { + useSpace?: boolean; + direction?: SpaceProps['direction']; + spaceSize?: SpaceProps['size']; + align?: SpaceProps['align']; + options?: CheckboxOptionType[]; + children?: React.ReactNode; }; -// Wrapper for GroupVertical -const VerticalGroup = (props: RadioGroupProps) => ( - -); +const RadioGroup = ({ + useSpace, + direction, + spaceSize, + options, + children, + ...props +}: RadioGroupWrapperProps) => { + const content = options + ? options.map((option: CheckboxOptionType) => ( + + {option.label} + + )) + : children; + + return ( + + {useSpace ? ( + + {content} + + ) : ( + content + )} + + ); +}; export type { RadioChangeEvent, RadioGroupProps, RadioProps, - CheckboxGroupProps, CheckboxOptionType, }; export const Radio = Object.assign(Antd5Radio, { - Group: Antd5Radio.Group, + GroupWrapper: RadioGroup, Button: Antd5Radio.Button, - VerticalGroup, }); diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx index 6b9c26020adde..aef121e01d42d 100644 --- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx +++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx @@ -55,7 +55,10 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) { > {groupTitle}
- { onChange(e.target.value); 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 ccf763e393127..3c68560c9ecd5 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx @@ -1106,7 +1106,7 @@ const FiltersConfigForm = ( initialValue={sort} label={{t('Sort type')}} > - { onSortChanged(value.target.value); formChanged(); @@ -1114,7 +1114,7 @@ const FiltersConfigForm = ( > {t('Sort ascending')} {t('Sort descending')} - + {hasMetrics && ( {t('Single value type')} } > - { onEnableSingleValueChanged(value.target.value); formChanged(); @@ -1196,7 +1196,7 @@ const FiltersConfigForm = ( {t('Maximum')} - + diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx index f351ab717c78a..2fe6784d86519 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,15 @@ const FormatPicker = ({ onChange: any; value: FormatPickerValue; }) => ( - - - {t('Formatted date')} - {t('Original value')} - - + + {t('Formatted date')} + {t('Original value')} + ); const FormatPickerContainer = styled.div` 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 7f792bf4c4a53..a31373e0416f3 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx @@ -45,8 +45,11 @@ export function CalendarFrame({ onChange, value }: FrameComponentProps) {
{t('Configure Time Range: Previous...')}
- onChange(e.target.value)} 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 21b301f32bd04..3bf35749922f3 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx @@ -41,8 +41,11 @@ export function CommonFrame(props: FrameComponentProps) {
{t('Configure Time Range: Last...')}
- props.onChange(e.target.value)} 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 5dfd7eef29d05..f3ca3d504bbaf 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx @@ -41,9 +41,11 @@ export function CurrentCalendarFrame({ onChange, value }: FrameComponentProps) {
{t('Configure Time Range: Current...')}
- { let newValue = e.target.value; newValue = newValue.trim(); 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 378956c64528f..1d37f0c85a172 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx @@ -238,7 +238,7 @@ export function CustomFrame(props: FrameComponentProps) {
{t('Anchor to')}
- {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 d82da2a30cffe..b859d737b5281 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,13 +42,7 @@ describe('CalendarFrame', () => { const radios = screen.getAllByRole('radio'); expect(radios).toHaveLength(CALENDAR_RANGE_OPTIONS.length); CALENDAR_RANGE_OPTIONS.forEach(option => { - if ( - typeof option === 'object' && - 'label' in option && - typeof option.label === 'string' - ) { - expect(screen.getByText(option.label)).toBeInTheDocument(); - } + expect(screen.getByText(option.label as string)).toBeInTheDocument(); }); }); From a90ed3585e8049db20ace1e0a4021d384d3ec39b Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Tue, 28 Jan 2025 22:08:31 +0100 Subject: [PATCH 09/17] refactor(Radio stories): Upgrade radio's stories --- .../src/components/Radio/Radio.stories.tsx | 148 +++++++++++++++--- 1 file changed, 124 insertions(+), 24 deletions(-) diff --git a/superset-frontend/src/components/Radio/Radio.stories.tsx b/superset-frontend/src/components/Radio/Radio.stories.tsx index e518e48baf29e..cc5e094bba61e 100644 --- a/superset-frontend/src/components/Radio/Radio.stories.tsx +++ b/superset-frontend/src/components/Radio/Radio.stories.tsx @@ -16,40 +16,140 @@ * 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 = { + onChange: { action: 'changed' }, + checked: { control: 'boolean' }, + disabled: { control: 'boolean' }, + defaultChecked: { control: 'boolean' }, +}; + +const radioGroupWrapperArgsType = { + onChange: { action: 'changed' }, + disabled: { control: 'boolean' }, + direction: { + control: 'select', + options: ['horizontal', 'vertical'], }, - argTypes: { - theme: { - table: { - disable: true, - }, - }, - checked: { control: 'boolean' }, - disabled: { control: 'boolean' }, + size: { + control: 'select', + options: ['small', 'middle', 'large'], }, + spaceSize: { + control: 'select', + options: ['small', 'middle', 'large', 'custom'], + }, + customSpaceSize: { + control: 'number', + if: { arg: 'spaceSize', eq: 'custom' }, + defaultValue: 8, + }, + useSpace: { control: 'boolean' }, + options: { control: 'object' }, }; -export const SupersetRadio = () => { - const [{ checked, ...rest }, updateArgs] = useArgs(); - return ( - updateArgs({ checked: !checked })} - {...rest} - > - Example - - ); +// Radio story +export const RadioStory = { + args: { + children: 'Radio', + value: 'radio1', + disabled: false, + checked: false, + }, + argTypes: RadioArgsType, }; -SupersetRadio.args = { +// Radio Button story +export const RadioButtonStory = (args: RadioProps) => ( + Radio Button +); +RadioButtonStory.args = { + value: 'button1', + disabled: false, checked: false, +}; +RadioButtonStory.argTypes = RadioArgsType; + +// Radio Group with Custom Radio story +export const RadioGroupWithCustomRadioStory = ( + args: RadioGroupWrapperProps, +) => ( + + Custom Option 1 + Custom Option 2 + Custom Option 3 + +); +RadioGroupWithCustomRadioStory.args = { + useSpace: true, + direction: 'vertical', + spaceSize: 'middle', + size: 'middle', + options: undefined, + disabled: false, +}; +RadioGroupWithCustomRadioStory.argTypes = radioGroupWrapperArgsType; + +// Radio Group with Options story +export const RadioGroupWithOptionsStory = (args: RadioGroupWrapperProps) => ( + +); +RadioGroupWithOptionsStory.args = { + useSpace: false, + direction: 'horizontal', + size: 'middle', + options: [ + { + value: 1, + label: ( + + + LineChart + + ), + }, + { + value: 2, + label: ( + + + DotChart + + ), + }, + { + value: 3, + label: ( + + + BarChart + + ), + }, + { + value: 4, + label: ( + + + PieChart + + ), + }, + ], disabled: false, }; +RadioGroupWithOptionsStory.argTypes = radioGroupWrapperArgsType; From 570aadbb4dbe94c5547bf3f134400e91d65baf7c Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Tue, 28 Jan 2025 22:59:36 +0100 Subject: [PATCH 10/17] refactor(Radio): - Improves reusability for the Radio Component - Aligns storybook with component changes --- .../src/components/Radio/Radio.stories.tsx | 38 +++++++++---------- .../src/components/Radio/index.tsx | 22 ++++------- .../header-renderers/HeaderWithRadioGroup.tsx | 4 +- .../components/DataTableControl/index.tsx | 4 +- .../components/CalendarFrame.tsx | 4 +- .../components/CommonFrame.tsx | 4 +- .../components/CurrentCalendarFrame.tsx | 4 +- 7 files changed, 31 insertions(+), 49 deletions(-) diff --git a/superset-frontend/src/components/Radio/Radio.stories.tsx b/superset-frontend/src/components/Radio/Radio.stories.tsx index cc5e094bba61e..f7866e991e4af 100644 --- a/superset-frontend/src/components/Radio/Radio.stories.tsx +++ b/superset-frontend/src/components/Radio/Radio.stories.tsx @@ -41,28 +41,31 @@ const RadioArgsType = { const radioGroupWrapperArgsType = { onChange: { action: 'changed' }, disabled: { control: 'boolean' }, - direction: { + size: { + control: 'select', + options: ['small', 'middle', 'large'], + }, + options: { control: 'object' }, + 'spaceConfig.direction': { control: 'select', options: ['horizontal', 'vertical'], + description: 'Direzione del layout Space', + if: { arg: 'enableSpaceConfig', truthy: true }, }, - size: { + 'spaceConfig.size': { control: 'select', options: ['small', 'middle', 'large'], + description: 'Dimensione del layout Space', + if: { arg: 'enableSpaceConfig', truthy: true }, }, - spaceSize: { + 'spaceConfig.align': { control: 'select', - options: ['small', 'middle', 'large', 'custom'], + options: ['start', 'center', 'end'], + description: 'Allineamento del layout Space', + if: { arg: 'enableSpaceConfig', truthy: true }, }, - customSpaceSize: { - control: 'number', - if: { arg: 'spaceSize', eq: 'custom' }, - defaultValue: 8, - }, - useSpace: { control: 'boolean' }, - options: { control: 'object' }, }; -// Radio story export const RadioStory = { args: { children: 'Radio', @@ -73,7 +76,6 @@ export const RadioStory = { argTypes: RadioArgsType, }; -// Radio Button story export const RadioButtonStory = (args: RadioProps) => ( Radio Button ); @@ -84,7 +86,6 @@ RadioButtonStory.args = { }; RadioButtonStory.argTypes = RadioArgsType; -// Radio Group with Custom Radio story export const RadioGroupWithCustomRadioStory = ( args: RadioGroupWrapperProps, ) => ( @@ -95,22 +96,17 @@ export const RadioGroupWithCustomRadioStory = ( ); RadioGroupWithCustomRadioStory.args = { - useSpace: true, - direction: 'vertical', - spaceSize: 'middle', + spaceConfig: { direction: 'vertical', size: 'middle', align: 'center' }, size: 'middle', - options: undefined, disabled: false, }; RadioGroupWithCustomRadioStory.argTypes = radioGroupWrapperArgsType; -// Radio Group with Options story export const RadioGroupWithOptionsStory = (args: RadioGroupWrapperProps) => ( ); RadioGroupWithOptionsStory.args = { - useSpace: false, - direction: 'horizontal', + spaceConfig: { direction: 'vertical', size: 'middle', align: 'center' }, size: 'middle', options: [ { diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index 3a4c796f72fec..db89dc0026fcb 100644 --- a/superset-frontend/src/components/Radio/index.tsx +++ b/superset-frontend/src/components/Radio/index.tsx @@ -26,18 +26,18 @@ import type { import { Space, SpaceProps } from 'src/components/Space'; export type RadioGroupWrapperProps = RadioGroupProps & { - useSpace?: boolean; - direction?: SpaceProps['direction']; - spaceSize?: SpaceProps['size']; - align?: SpaceProps['align']; + spaceConfig?: { + direction?: SpaceProps['direction']; + size?: SpaceProps['size']; + align?: SpaceProps['align']; + wrap?: SpaceProps['wrap']; + }; options?: CheckboxOptionType[]; children?: React.ReactNode; }; const RadioGroup = ({ - useSpace, - direction, - spaceSize, + spaceConfig = { direction: 'horizontal', size: 'middle', align: 'center', wrap: false }, options, children, ...props @@ -52,13 +52,7 @@ const RadioGroup = ({ return ( - {useSpace ? ( - - {content} - - ) : ( - content - )} + {spaceConfig ? {content} : content} ); }; diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx index aef121e01d42d..73c0481baaaea 100644 --- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx +++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx @@ -56,9 +56,7 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) { {groupTitle} { onChange(e.target.value); diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx index 2fe6784d86519..1fdc1c88cf346 100644 --- a/superset-frontend/src/explore/components/DataTableControl/index.tsx +++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx @@ -141,8 +141,8 @@ const FormatPicker = ({ value: FormatPickerValue; }) => ( 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 a31373e0416f3..a47a6e59fb515 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx @@ -46,10 +46,8 @@ export function CalendarFrame({ onChange, value }: FrameComponentProps) { {t('Configure Time Range: Previous...')} onChange(e.target.value)} 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 3bf35749922f3..0268c7583503d 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx @@ -42,10 +42,8 @@ export function CommonFrame(props: FrameComponentProps) { {t('Configure Time Range: Last...')} props.onChange(e.target.value)} 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 f3ca3d504bbaf..73e49cc424e50 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx @@ -42,10 +42,8 @@ export function CurrentCalendarFrame({ onChange, value }: FrameComponentProps) { {t('Configure Time Range: Current...')} { let newValue = e.target.value; newValue = newValue.trim(); From 6d8c21ffc4cfd45db7e5cc0feb7a025c3b8cc8e1 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Tue, 28 Jan 2025 23:00:02 +0100 Subject: [PATCH 11/17] lint --- superset-frontend/src/components/Radio/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index db89dc0026fcb..765da1806c9a7 100644 --- a/superset-frontend/src/components/Radio/index.tsx +++ b/superset-frontend/src/components/Radio/index.tsx @@ -37,7 +37,12 @@ export type RadioGroupWrapperProps = RadioGroupProps & { }; const RadioGroup = ({ - spaceConfig = { direction: 'horizontal', size: 'middle', align: 'center', wrap: false }, + spaceConfig = { + direction: 'horizontal', + size: 'middle', + align: 'center', + wrap: false, + }, options, children, ...props From 39b192b11e96d43bc70f73f59fc71494084c8063 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Wed, 29 Jan 2025 17:50:45 +0100 Subject: [PATCH 12/17] refactor(Radio): small changes from PR reviews --- superset-frontend/src/components/Radio/Radio.stories.tsx | 6 +++--- superset-frontend/src/components/Radio/index.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/superset-frontend/src/components/Radio/Radio.stories.tsx b/superset-frontend/src/components/Radio/Radio.stories.tsx index f7866e991e4af..8a697d6ca109f 100644 --- a/superset-frontend/src/components/Radio/Radio.stories.tsx +++ b/superset-frontend/src/components/Radio/Radio.stories.tsx @@ -49,19 +49,19 @@ const radioGroupWrapperArgsType = { 'spaceConfig.direction': { control: 'select', options: ['horizontal', 'vertical'], - description: 'Direzione del layout Space', + description: 'Direction of the Space layout', if: { arg: 'enableSpaceConfig', truthy: true }, }, 'spaceConfig.size': { control: 'select', options: ['small', 'middle', 'large'], - description: 'Dimensione del layout Space', + description: 'Layout size Space', if: { arg: 'enableSpaceConfig', truthy: true }, }, 'spaceConfig.align': { control: 'select', options: ['start', 'center', 'end'], - description: 'Allineamento del layout Space', + description: 'Alignment of the Space layout', if: { arg: 'enableSpaceConfig', truthy: true }, }, }; diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index 765da1806c9a7..8740a5aeaffee 100644 --- a/superset-frontend/src/components/Radio/index.tsx +++ b/superset-frontend/src/components/Radio/index.tsx @@ -16,13 +16,13 @@ * specific language governing permissions and limitations * under the License. */ -import { Radio as Antd5Radio } from 'antd-v5'; +import { Radio as Antd5Radio, CheckboxOptionType } from 'antd-v5'; import type { RadioChangeEvent, RadioProps, RadioGroupProps, - CheckboxOptionType, -} from 'antd-v5'; +} from 'antd-v5/lib/radio'; + import { Space, SpaceProps } from 'src/components/Space'; export type RadioGroupWrapperProps = RadioGroupProps & { From 58ec0795125f6d9c97696a4607fde161f24e98de Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Wed, 29 Jan 2025 22:56:17 +0100 Subject: [PATCH 13/17] Removes styled components from Report Modal --- .../features/reports/ReportModal/index.tsx | 21 +++++++++---------- .../features/reports/ReportModal/styles.tsx | 4 ---- 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/superset-frontend/src/features/reports/ReportModal/index.tsx b/superset-frontend/src/features/reports/ReportModal/index.tsx index 47f11dfa5bbef..14fc3eba005f7 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,25 @@ 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')} - - + +
); diff --git a/superset-frontend/src/features/reports/ReportModal/styles.tsx b/superset-frontend/src/features/reports/ReportModal/styles.tsx index ad30adce8f79e..0f5c12bd3850e 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; From 96306afad11123789456c92004cdd9a3c0af497c Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Wed, 29 Jan 2025 23:16:47 +0100 Subject: [PATCH 14/17] small clean up --- .../src/SqlLab/components/SaveDatasetModal/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx index 5df4d0c304457..379b0726ac73b 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'; From 5dead351dc9fd5baece15eccd4e0e4f8e0bc2c56 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Thu, 30 Jan 2025 20:02:39 +0100 Subject: [PATCH 15/17] refactor(Radio): - small changes from PR reviews - removes children from Radio.GroupWrapper --- .../Chart/DrillBy/useDisplayModeToggle.tsx | 15 +++--- .../src/components/Radio/Radio.stories.tsx | 47 ++++++++++--------- .../src/components/Radio/index.tsx | 25 +++------- .../header-renderers/HeaderWithRadioGroup.tsx | 7 ++- .../FiltersConfigForm/FiltersConfigForm.tsx | 32 +++++++------ .../components/DataTableControl/index.tsx | 16 +++++-- .../components/CalendarFrame.tsx | 7 ++- .../components/CommonFrame.tsx | 7 ++- .../components/CurrentCalendarFrame.tsx | 7 ++- .../components/CustomFrame.tsx | 13 ++--- .../features/reports/ReportModal/index.tsx | 35 ++++++++------ 11 files changed, 117 insertions(+), 94 deletions(-) diff --git a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx index 3b305178538e8..12d186a25f42a 100644 --- a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx +++ b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx @@ -19,17 +19,14 @@ import { useMemo, useState } from 'react'; import { css, SupersetTheme, t } from '@superset-ui/core'; -import { Radio, CheckboxOptionType } from 'src/components/Radio'; +import { Radio } from 'src/components/Radio'; import { DrillByType } from '../types'; export const useDisplayModeToggle = () => { const [drillByDisplayMode, setDrillByDisplayMode] = useState( DrillByType.Chart, ); - const customButtons: CheckboxOptionType[] = [ - { label: t('Chart'), value: DrillByType.Chart }, - { label: t('Table'), value: DrillByType.Table }, - ]; + const displayModeToggle = useMemo( () => (
{ setDrillByDisplayMode(value); }} defaultValue={DrillByType.Chart} - options={customButtons} - value={drillByDisplayMode} + options={[ + { label: t('Chart'), value: DrillByType.Chart }, + { label: t('Table'), value: DrillByType.Table }, + ]} optionType="button" buttonStyle="outline" />
), - [drillByDisplayMode], + [], ); return { displayModeToggle, drillByDisplayMode }; }; diff --git a/superset-frontend/src/components/Radio/Radio.stories.tsx b/superset-frontend/src/components/Radio/Radio.stories.tsx index 8a697d6ca109f..4329322b40923 100644 --- a/superset-frontend/src/components/Radio/Radio.stories.tsx +++ b/superset-frontend/src/components/Radio/Radio.stories.tsx @@ -32,10 +32,18 @@ export default { }; const RadioArgsType = { - onChange: { action: 'changed' }, - checked: { control: 'boolean' }, - disabled: { control: 'boolean' }, - defaultChecked: { control: 'boolean' }, + value: { + control: 'text', + description: 'The value of the radio button.', + }, + disabled: { + control: 'boolean', + description: 'Whether the radio button is disabled or not.', + }, + checked: { + control: 'boolean', + description: 'The checked state of the radio button.', + }, }; const radioGroupWrapperArgsType = { @@ -64,14 +72,20 @@ const radioGroupWrapperArgsType = { 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 }, + }, }; export const RadioStory = { args: { - children: 'Radio', value: 'radio1', disabled: false, checked: false, + children: 'Radio', }, argTypes: RadioArgsType, }; @@ -86,27 +100,16 @@ RadioButtonStory.args = { }; RadioButtonStory.argTypes = RadioArgsType; -export const RadioGroupWithCustomRadioStory = ( - args: RadioGroupWrapperProps, -) => ( - - Custom Option 1 - Custom Option 2 - Custom Option 3 - -); -RadioGroupWithCustomRadioStory.args = { - spaceConfig: { direction: 'vertical', size: 'middle', align: 'center' }, - size: 'middle', - disabled: false, -}; -RadioGroupWithCustomRadioStory.argTypes = radioGroupWrapperArgsType; - export const RadioGroupWithOptionsStory = (args: RadioGroupWrapperProps) => ( ); RadioGroupWithOptionsStory.args = { - spaceConfig: { direction: 'vertical', size: 'middle', align: 'center' }, + spaceConfig: { + direction: 'vertical', + size: 'middle', + align: 'center', + wrap: false, + }, size: 'middle', options: [ { diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index 8740a5aeaffee..9311cdde5ad55 100644 --- a/superset-frontend/src/components/Radio/index.tsx +++ b/superset-frontend/src/components/Radio/index.tsx @@ -32,36 +32,25 @@ export type RadioGroupWrapperProps = RadioGroupProps & { align?: SpaceProps['align']; wrap?: SpaceProps['wrap']; }; - options?: CheckboxOptionType[]; - children?: React.ReactNode; + options: CheckboxOptionType[]; }; const RadioGroup = ({ - spaceConfig = { - direction: 'horizontal', - size: 'middle', - align: 'center', - wrap: false, - }, + spaceConfig, options, - children, ...props }: RadioGroupWrapperProps) => { - const content = options - ? options.map((option: CheckboxOptionType) => ( - - {option.label} - - )) - : children; - + const content = options.map((option: CheckboxOptionType) => ( + + {option.label} + + )); return ( {spaceConfig ? {content} : content} ); }; - export type { RadioChangeEvent, RadioGroupProps, diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx index 73c0481baaaea..0626b2da90f3a 100644 --- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx +++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx @@ -56,7 +56,12 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) { {groupTitle} { onChange(e.target.value); 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 3c68560c9ecd5..5b843a370b728 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx @@ -1107,14 +1107,15 @@ const FiltersConfigForm = ( label={{t('Sort type')}} > { onSortChanged(value.target.value); formChanged(); }} - > - {t('Sort ascending')} - {t('Sort descending')} - + /> {hasMetrics && ( - - {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 bbbeab3c6f732..6c4e54e7cdfc8 100644 --- a/superset-frontend/src/explore/components/DataTableControl/index.tsx +++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx @@ -141,14 +141,20 @@ const FormatPicker = ({ value: FormatPickerValue; }) => ( - {t('Formatted date')} - {t('Original value')} - + options={[ + { label: t('Formatted date'), value: FormatPickerValue.Formatted }, + { label: t('Original value'), value: FormatPickerValue.Original }, + ]} + /> ); const FormatPickerContainer = styled.div` 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 a47a6e59fb515..3815f06f5c2d2 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CalendarFrame.tsx @@ -46,7 +46,12 @@ export function CalendarFrame({ onChange, value }: FrameComponentProps) { {t('Configure Time Range: Previous...')} onChange(e.target.value)} 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 0268c7583503d..9902f8d2c5403 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx @@ -42,7 +42,12 @@ export function CommonFrame(props: FrameComponentProps) { {t('Configure Time Range: Last...')} props.onChange(e.target.value)} 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 73e49cc424e50..1058968b4ee3e 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CurrentCalendarFrame.tsx @@ -42,7 +42,12 @@ export function CurrentCalendarFrame({ onChange, value }: FrameComponentProps) { {t('Configure Time Range: Current...')} { let newValue = e.target.value; 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 1d37f0c85a172..969b46855e584 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx @@ -239,17 +239,14 @@ export function CustomFrame(props: FrameComponentProps) { - - {t('NOW')} - - - {t('Date/Time')} - - + /> {anchorMode !== 'now' && ( diff --git a/superset-frontend/src/features/reports/ReportModal/index.tsx b/superset-frontend/src/features/reports/ReportModal/index.tsx index 14fc3eba005f7..ce49379afcd71 100644 --- a/superset-frontend/src/features/reports/ReportModal/index.tsx +++ b/superset-frontend/src/features/reports/ReportModal/index.tsx @@ -256,24 +256,31 @@ function ReportModal({
{ 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, + }, + ]} + />
); From 45f6c35aedeab39237f89a9c775c99045beffcc0 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Thu, 30 Jan 2025 20:19:57 +0100 Subject: [PATCH 16/17] Radios alignment --- .../Table/header-renderers/HeaderWithRadioGroup.tsx | 2 +- .../src/explore/components/DataTableControl/index.tsx | 2 +- .../controls/DateFilterControl/components/CalendarFrame.tsx | 2 +- .../controls/DateFilterControl/components/CommonFrame.tsx | 2 +- .../DateFilterControl/components/CurrentCalendarFrame.tsx | 4 ++-- superset-frontend/src/features/reports/ReportModal/index.tsx | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx index 0626b2da90f3a..3aedff2b4702d 100644 --- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx +++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx @@ -60,7 +60,7 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) { direction: 'vertical', size: 4, wrap: false, - align: 'center', + align: 'start', }} value={value} onChange={e => { diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx index 6c4e54e7cdfc8..20e2a4775a101 100644 --- a/superset-frontend/src/explore/components/DataTableControl/index.tsx +++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx @@ -143,8 +143,8 @@ const FormatPicker = ({ { diff --git a/superset-frontend/src/features/reports/ReportModal/index.tsx b/superset-frontend/src/features/reports/ReportModal/index.tsx index ce49379afcd71..59f9263a32a9a 100644 --- a/superset-frontend/src/features/reports/ReportModal/index.tsx +++ b/superset-frontend/src/features/reports/ReportModal/index.tsx @@ -259,7 +259,7 @@ function ReportModal({ spaceConfig={{ direction: 'vertical', size: 'middle', - align: 'center', + align: 'start', wrap: false, }} onChange={(event: RadioChangeEvent) => { From ea82532b5bcc99b93e88a45f707864e15c75e9c9 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Fri, 31 Jan 2025 15:27:37 +0100 Subject: [PATCH 17/17] Edits the file customFrame.test --- .../controls/DateFilterControl/tests/CustomFrame.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 ab8fc5bb35bb4..f8afe15998bab 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(); });