You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by en...@apache.org on 2025/01/25 21:54:33 UTC
(superset) branch refactor/antd5-radio created (now 4ee62faee1)
This is an automated email from the ASF dual-hosted git repository.
enzomartellucci pushed a change to branch refactor/antd5-radio
in repository https://gitbox.apache.org/repos/asf/superset.git
at 4ee62faee1 refactor(HeaderWithRadioGroup): Implements Radio.Group from Antd5
This branch includes the following new commits:
new eaf5bf06aa refactor(radio) Migrates Radio to Ant Design 5
new 52aba75836 refactor(CalendarFrame): Implements Radio from Antd5
new aaaad9028d refactor(CommonFrame): Implements Radio from Antd5
new 64a2a3c723 refactor(CurrentCalendarFrame): Implements Radio from Antd5
new f233d2405d refactor(DisplayModeToggle): - Implements Radio from Antd5 - Update types in constants file for options constants
new 4ee62faee1 refactor(HeaderWithRadioGroup): Implements Radio.Group from Antd5
The 6 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(superset) 03/06: refactor(CommonFrame): Implements Radio from Antd5
Posted by en...@apache.org.
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 aaaad9028d728cb2a00fd0a2cb78db5bb49c0ef8
Author: Enzo Martellucci <en...@gmail.com>
AuthorDate: Sat Jan 25 18:33:22 2025 +0100
refactor(CommonFrame): Implements Radio from Antd5
---
.../controls/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 30365ffc28..24a0c54d9f 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) {
<div className="section-title" data-test={DateFilterTestKey.CommonFrame}>
{t('Configure Time Range: Last...')}
</div>
- <Radio.Group
+ <Radio.VerticalGroup
+ size='large'
value={commonRange}
onChange={(e: any) => props.onChange(e.target.value)}
- >
- {COMMON_RANGE_OPTIONS.map(({ value, label }) => (
- <Radio key={value} value={value} className="vertical-radio">
- {label}
- </Radio>
- ))}
- </Radio.Group>
+ options={COMMON_RANGE_OPTIONS}
+ />
</>
);
}
(superset) 01/06: refactor(radio) Migrates Radio to Ant Design 5
Posted by en...@apache.org.
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 eaf5bf06aae4b397e85a0eefad614b7f051628b9
Author: Enzo Martellucci <en...@gmail.com>
AuthorDate: Fri Jan 24 18:22:11 2025 +0100
refactor(radio) Migrates Radio to Ant Design 5
---
superset-frontend/src/components/Radio/index.ts | 26 ++++++++++
superset-frontend/src/components/Radio/index.tsx | 61 ------------------------
2 files changed, 26 insertions(+), 61 deletions(-)
diff --git a/superset-frontend/src/components/Radio/index.ts b/superset-frontend/src/components/Radio/index.ts
new file mode 100644
index 0000000000..2c416288fb
--- /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 f06392d278..0000000000
--- 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,
-});
(superset) 06/06: refactor(HeaderWithRadioGroup): Implements Radio.Group from Antd5
Posted by en...@apache.org.
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 4ee62faee1d815633600c6aa078f8b705c8c9ed1
Author: Enzo Martellucci <en...@gmail.com>
AuthorDate: Sat Jan 25 21:32:32 2025 +0100
refactor(HeaderWithRadioGroup): Implements Radio.Group from Antd5
---
.../Table/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 b80d5445f5..352f0f807f 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}
</div>
- <Radio.Group
+ <Radio.VerticalGroup
value={value}
onChange={e => {
onChange(e.target.value);
setPopoverVisible(false);
}}
- >
- <Space direction="vertical">
- {groupOptions.map(option => (
- <Radio key={option.value} value={option.value}>
- {option.label}
- </Radio>
- ))}
- </Space>
- </Radio.Group>
+ options={groupOptions}
+ />
</div>
}
placement="bottomLeft"
(superset) 05/06: refactor(DisplayModeToggle): - Implements Radio from Antd5 - Update types in constants file for options constants
Posted by en...@apache.org.
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 f233d2405dda155478c7391a4ba5eab3739b4882
Author: Enzo Martellucci <en...@gmail.com>
AuthorDate: Sat Jan 25 20:06:46 2025 +0100
refactor(DisplayModeToggle):
- Implements Radio from Antd5
- Update types in constants file for options constants
---
.../Chart/DrillBy/useDisplayModeToggle.tsx | 37 ++++++++++------------
superset-frontend/src/components/Radio/index.tsx | 3 +-
.../controls/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 bd2729633e..48a90aafc7 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>(
DrillByType.Chart,
);
-
- 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`
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"
- >
+ >
<Radio.Group
onChange={({ target: { value } }) => {
setDrillByDisplayMode(value);
}}
- defaultValue={DrillByType.Chart}
- >
- <Radio.Button
- value={DrillByType.Chart}
- data-test="drill-by-chart-radio"
- >
- {t('Chart')}
- </Radio.Button>
- <Radio.Button
- value={DrillByType.Table}
- data-test="drill-by-table-radio"
- >
- {t('Table')}
- </Radio.Button>
- </Radio.Group>
+ 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 73be66487c..ce87e5b45c 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) => {
<Antd5Radio.Group {...props} style={{ ...verticalStyle, ...props.style }} />)
}
-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 16b24d7a0b..584f420428 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<string>['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<string>['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<string>['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 = [
(superset) 02/06: refactor(CalendarFrame): Implements Radio from Antd5
Posted by en...@apache.org.
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 52aba75836ce565bc9aca2d3f517332e0fdae703
Author: Enzo Martellucci <en...@gmail.com>
AuthorDate: Sat Jan 25 18:29:33 2025 +0100
refactor(CalendarFrame): Implements Radio from Antd5
---
.../src/components/Radio/{index.ts => index.tsx} | 17 ++++++++++++++++-
.../DateFilterControl/components/CalendarFrame.tsx | 16 ++++++----------
2 files changed, 22 insertions(+), 11 deletions(-)
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 2c416288fb..73be66487c 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 (
+ <Antd5Radio.Group {...props} style={{ ...verticalStyle, ...props.style }} />)
+}
+
+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 8900e213f4..56f369159c 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) {
<div className="section-title">
{t('Configure Time Range: Previous...')}
</div>
- <Radio.Group
- value={value}
- onChange={(e: any) => onChange(e.target.value)}
- >
- {CALENDAR_RANGE_OPTIONS.map(({ value, label }) => (
- <Radio key={value} value={value} className="vertical-radio">
- {label}
- </Radio>
- ))}
- </Radio.Group>
+ <Radio.VerticalGroup
+ size='large'
+ value={value}
+ onChange={(e: any) => onChange(e.target.value)}
+ options={CALENDAR_RANGE_OPTIONS}
+ />
</>
);
}
(superset) 04/06: refactor(CurrentCalendarFrame): Implements Radio from Antd5
Posted by en...@apache.org.
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 64a2a3c723c66697da4b98d456565ff52e600060
Author: Enzo Martellucci <en...@gmail.com>
AuthorDate: Sat Jan 25 18:41:55 2025 +0100
refactor(CurrentCalendarFrame): Implements Radio from Antd5
---
.../controls/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 a4b0ca3a3e..dc4057f33b 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 7d1a3a7b78..4f1babfd5a 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) {
<div className="section-title">
{t('Configure Time Range: Current...')}
</div>
- <Radio.Group
+ <Radio.VerticalGroup
+ size='large'
value={value}
onChange={(e: any) => {
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 }) => (
- <Radio key={value} value={value} className="vertical-radio">
- {label}
- </Radio>
- ))}
- </Radio.Group>
+ options={CURRENT_RANGE_OPTIONS}
+ />
</>
);
}