This is an automated email from the ASF dual-hosted git repository. enzomartellucci pushed a commit to branch refactor/antd5-radio in repository https://gitbox.apache.org/repos/asf/superset.git
commit a62bb6d3dbfaf46c157b9f0de4da04569f410fa1 Author: Enzo Martellucci <[email protected]> AuthorDate: Mon Jan 27 15:26:49 2025 +0100 Lint fix --- .../cypress-base/cypress/support/e2e.ts | 2 +- .../Chart/DrillBy/useDisplayModeToggle.tsx | 25 +++++++++---------- superset-frontend/src/components/Radio/index.tsx | 29 ++++++++++++++-------- .../header-renderers/HeaderWithRadioGroup.tsx | 1 + .../DateFilterControl/components/CalendarFrame.tsx | 12 ++++----- .../DateFilterControl/components/CommonFrame.tsx | 2 +- .../components/CurrentCalendarFrame.tsx | 2 +- .../DateFilterControl/tests/CalendarFrame.test.tsx | 14 ++++++++--- .../controls/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 4a471c87d1..87229278b7 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 48a90aafc7..acc87a75b5 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>( DrillByType.Chart, ); -const customButtons: CheckboxGroupProps<number>['options'] = [ - { label: t('Chart'), value: DrillByType.Chart }, - { label: t('Table'), value: DrillByType.Table }, -]; - const displayModeToggle = useMemo( + const customButtons: CheckboxGroupProps<number>['options'] = [ + { label: t('Chart'), value: DrillByType.Chart }, + { label: t('Table'), value: DrillByType.Table }, + ]; + const displayModeToggle = useMemo( () => ( <div css={(theme: SupersetTheme) => css` @@ -42,21 +42,20 @@ const customButtons: CheckboxGroupProps<number>['options'] = [ } `} data-test="drill-by-display-toggle" - > + > <Radio.Group onChange={({ target: { value } }) => { setDrillByDisplayMode(value); }} - defaultValue={DrillByType.Chart} - options={customButtons} - value={drillByDisplayMode} - optionType="button" - buttonStyle="outline" - /> + defaultValue={DrillByType.Chart} + options={customButtons} + value={drillByDisplayMode} + optionType="button" + buttonStyle="outline" + /> </div> ), [drillByDisplayMode], ); return { displayModeToggle, drillByDisplayMode }; }; - diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index ce87e5b45c..70643fe5b0 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 ( - <Antd5Radio.Group {...props} style={{ ...verticalStyle, ...props.style }} />) -} +const VerticalGroup = (props: RadioGroupProps) => ( + <Antd5Radio.Group {...props} style={{ ...verticalStyle, ...props.style }} /> +); -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 352f0f807f..6b9c26020a 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 56f369159c..7f792bf4c4 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) { <div className="section-title"> {t('Configure Time Range: Previous...')} </div> - <Radio.VerticalGroup - size='large' - value={value} - onChange={(e: any) => onChange(e.target.value)} - options={CALENDAR_RANGE_OPTIONS} - /> + <Radio.VerticalGroup + size="large" + value={value} + onChange={(e: any) => 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 24a0c54d9f..21b301f32b 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...')} </div> <Radio.VerticalGroup - size='large' + size="large" value={commonRange} onChange={(e: any) => 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 4f1babfd5a..5dfd7eef29 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...')} </div> <Radio.VerticalGroup - size='large' + size="large" value={value} onChange={(e: any) => { 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 163ce4caf1..d82da2a30c 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 584f420428..e76b778fc6 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<string>['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<string>['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<string>['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<string>['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<string>['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 = [
