This is an automated email from the ASF dual-hosted git repository. rusackas pushed a commit to branch fix/console-noise-cleanup in repository https://gitbox.apache.org/repos/asf/superset.git
commit 78f0d289ecf1f913b34ca60a915a42b4117628b9 Author: Evan Rusackas <[email protected]> AuthorDate: Sun Feb 8 02:47:48 2026 -0800 fix(frontend): address console deprecation warnings - Convert antd Menu from children to items prop pattern (SubMenu.tsx) - Migrate Select dropdownStyle to popupStyle with new styles API - Add proper async cleanup in ActivityTable useEffect - Add isMounted check and debounce.cancel() in SubMenu resize handler Co-Authored-By: Claude Opus 4.5 <[email protected]> --- .../src/components/ListView/Filters/Select.tsx | 8 +- .../src/components/ListView/Filters/index.tsx | 4 +- superset-frontend/src/components/ListView/types.ts | 2 +- .../src/features/databases/DatabaseModal/index.tsx | 2 +- .../src/features/home/ActivityTable.tsx | 24 +++-- superset-frontend/src/features/home/SubMenu.tsx | 114 ++++++++++++--------- .../src/pages/AlertReportList/index.tsx | 4 +- .../src/pages/AnnotationLayerList/index.tsx | 2 +- superset-frontend/src/pages/ChartList/index.tsx | 8 +- .../src/pages/DashboardList/index.tsx | 4 +- superset-frontend/src/pages/DatabaseList/index.tsx | 2 +- superset-frontend/src/pages/DatasetList/index.tsx | 8 +- superset-frontend/src/pages/GroupsList/index.tsx | 4 +- superset-frontend/src/pages/RolesList/index.tsx | 6 +- 14 files changed, 104 insertions(+), 88 deletions(-) diff --git a/superset-frontend/src/components/ListView/Filters/Select.tsx b/superset-frontend/src/components/ListView/Filters/Select.tsx index 0d309b1b255..15fec4c9523 100644 --- a/superset-frontend/src/components/ListView/Filters/Select.tsx +++ b/superset-frontend/src/components/ListView/Filters/Select.tsx @@ -38,7 +38,7 @@ interface SelectFilterProps extends BaseFilter { paginate?: boolean; selects: Filter['selects']; loading?: boolean; - dropdownStyle?: React.CSSProperties; + popupStyle?: React.CSSProperties; } function SelectFilter( @@ -50,7 +50,7 @@ function SelectFilter( onSelect, selects = [], loading = false, - dropdownStyle, + popupStyle, }: SelectFilterProps, ref: RefObject<FilterHandler>, ) { @@ -109,7 +109,7 @@ function SelectFilter( onClear={onClear} options={fetchAndFormatSelects} placeholder={placeholder} - dropdownStyle={dropdownStyle} + styles={popupStyle ? { popup: { root: popupStyle } } : undefined} showSearch value={selectedOption} /> @@ -123,7 +123,7 @@ function SelectFilter( onClear={onClear} options={selects} placeholder={placeholder} - dropdownStyle={dropdownStyle} + styles={popupStyle ? { popup: { root: popupStyle } } : undefined} showSearch value={selectedOption} loading={loading} diff --git a/superset-frontend/src/components/ListView/Filters/index.tsx b/superset-frontend/src/components/ListView/Filters/index.tsx index de85669a717..4e44c15da84 100644 --- a/superset-frontend/src/components/ListView/Filters/index.tsx +++ b/superset-frontend/src/components/ListView/Filters/index.tsx @@ -80,7 +80,7 @@ function UIFilters( dateFilterValueType, min, max, - dropdownStyle, + popupStyle, autoComplete, inputName, }, @@ -112,7 +112,7 @@ function UIFilters( paginate={paginate} selects={selects} loading={loading ?? false} - dropdownStyle={dropdownStyle} + popupStyle={popupStyle} /> ); } diff --git a/superset-frontend/src/components/ListView/types.ts b/superset-frontend/src/components/ListView/types.ts index 1d7042798ac..91164d4ab2e 100644 --- a/superset-frontend/src/components/ListView/types.ts +++ b/superset-frontend/src/components/ListView/types.ts @@ -64,7 +64,7 @@ export interface ListViewFilter { dateFilterValueType?: 'unix' | 'iso'; min?: number; max?: number; - dropdownStyle?: React.CSSProperties; + popupStyle?: React.CSSProperties; autoComplete?: string; inputName?: string; } diff --git a/superset-frontend/src/features/databases/DatabaseModal/index.tsx b/superset-frontend/src/features/databases/DatabaseModal/index.tsx index bbb4dd6bf5c..8ba63775024 100644 --- a/superset-frontend/src/features/databases/DatabaseModal/index.tsx +++ b/superset-frontend/src/features/databases/DatabaseModal/index.tsx @@ -1147,7 +1147,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({ getPopupContainer={triggerNode => triggerNode.parentElement || document.body } - dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} + styles={{ popup: { root: { maxHeight: 400, overflow: 'auto' } } }} /> <Alert showIcon diff --git a/superset-frontend/src/features/home/ActivityTable.tsx b/superset-frontend/src/features/home/ActivityTable.tsx index a2f53a23b8d..e853d23c890 100644 --- a/superset-frontend/src/features/home/ActivityTable.tsx +++ b/superset-frontend/src/features/home/ActivityTable.tsx @@ -126,19 +126,23 @@ export default function ActivityTable({ const [editedCards, setEditedCards] = useState<ActivityData[]>(); const [isFetchingEditedCards, setIsFetchingEditedCards] = useState(false); - const getEditedCards = () => { - setIsFetchingEditedCards(true); - getEditedObjects(user.userId).then(r => { - setEditedCards([...r.editedChart, ...r.editedDash]); - setIsFetchingEditedCards(false); - }); - }; - useEffect(() => { + let isMounted = true; + if (activeChild === TableTab.Edited) { - getEditedCards(); + setIsFetchingEditedCards(true); + getEditedObjects(user.userId).then(r => { + if (isMounted) { + setEditedCards([...r.editedChart, ...r.editedDash]); + setIsFetchingEditedCards(false); + } + }); } - }, [activeChild]); + + return () => { + isMounted = false; + }; + }, [activeChild, user.userId]); const tabs = [ { diff --git a/superset-frontend/src/features/home/SubMenu.tsx b/superset-frontend/src/features/home/SubMenu.tsx index 107700a2539..be265a9d22d 100644 --- a/superset-frontend/src/features/home/SubMenu.tsx +++ b/superset-frontend/src/features/home/SubMenu.tsx @@ -23,7 +23,7 @@ import { t } from '@apache-superset/core'; import { styled, SupersetTheme, css, useTheme } from '@apache-superset/core/ui'; import cx from 'classnames'; import { debounce } from 'lodash'; -import { Menu, MenuMode, MainNav } from '@superset-ui/core/components/Menu'; +import { Menu, MenuMode } from '@superset-ui/core/components/Menu'; import { Button, Tooltip, @@ -161,8 +161,6 @@ export interface SubMenuProps { backgroundColor?: string; } -const { SubMenu } = MainNav; - const SubMenuComponent: FunctionComponent<SubMenuProps> = props => { const [showMenu, setMenu] = useState<MenuMode>('horizontal'); const [navRightStyle, setNavRightStyle] = useState('nav-right'); @@ -178,7 +176,10 @@ const SubMenuComponent: FunctionComponent<SubMenuProps> = props => { } useEffect(() => { + let isMounted = true; + function handleResize() { + if (!isMounted) return; if (window.innerWidth <= 767) setMenu('inline'); else setMenu('horizontal'); @@ -187,7 +188,6 @@ const SubMenuComponent: FunctionComponent<SubMenuProps> = props => { props.buttons.length >= 3 && window.innerWidth >= 795 ) { - // eslint-disable-next-line no-unused-expressions setNavRightStyle('nav-right'); } else if ( props.buttons && @@ -200,7 +200,11 @@ const SubMenuComponent: FunctionComponent<SubMenuProps> = props => { handleResize(); const resize = debounce(handleResize, 10); window.addEventListener('resize', resize); - return () => window.removeEventListener('resize', resize); + return () => { + isMounted = false; + resize.cancel(); + window.removeEventListener('resize', resize); + }; }, [props.buttons]); return ( @@ -249,52 +253,60 @@ const SubMenuComponent: FunctionComponent<SubMenuProps> = props => { })} /> <div className={navRightStyle}> - <Menu mode="horizontal" triggerSubMenuAction="click" disabledOverflow> - {props.dropDownLinks?.map((link, i) => ( - <SubMenu - css={css` - [data-icon='caret-down'] { - color: ${theme.colorIcon}; - font-size: ${theme.fontSizeXS}px; - margin-left: ${theme.sizeUnit}px; - } - `} - key={i} - title={link.label} - icon={<Icons.CaretDownOutlined />} - popupOffset={[10, 20]} - className="dropdown-menu-links" - > - {link.childs?.map(item => { - if (typeof item === 'object') { - return item.disable ? ( - <MainNav.Item - key={item.label} - css={styledDisabled} - disabled - > - <Tooltip - placement="top" - title={t( - "Enable 'Allow file uploads to database' in any database's settings", - )} - > - {item.label} - </Tooltip> - </MainNav.Item> - ) : ( - <MainNav.Item key={item.label}> - <Typography.Link href={item.url} onClick={item.onClick}> - {item.label} - </Typography.Link> - </MainNav.Item> - ); - } - return null; - })} - </SubMenu> - ))} - </Menu> + <Menu + mode="horizontal" + triggerSubMenuAction="click" + disabledOverflow + css={css` + [data-icon='caret-down'] { + color: ${theme.colorIcon}; + font-size: ${theme.fontSizeXS}px; + margin-left: ${theme.sizeUnit}px; + } + `} + items={props.dropDownLinks?.map((link, i) => ({ + key: `dropdown-${i}`, + label: link.label, + icon: <Icons.CaretDownOutlined />, + popupOffset: [10, 20], + className: 'dropdown-menu-links', + children: link.childs + ?.filter( + (item): item is Exclude<typeof item, string> => + typeof item === 'object', + ) + .map(item => + item.disable + ? { + key: item.label, + disabled: true, + label: ( + <Tooltip + placement="top" + title={t( + "Enable 'Allow file uploads to database' in any database's settings", + )} + > + <span css={styledDisabled(theme)}> + {item.label} + </span> + </Tooltip> + ), + } + : { + key: item.label, + label: ( + <Typography.Link + href={item.url} + onClick={item.onClick} + > + {item.label} + </Typography.Link> + ), + }, + ), + }))} + /> {props.buttons?.map((btn, i) => ( <Button key={i} diff --git a/superset-frontend/src/pages/AlertReportList/index.tsx b/superset-frontend/src/pages/AlertReportList/index.tsx index 174b9564042..274e4e318a1 100644 --- a/superset-frontend/src/pages/AlertReportList/index.tsx +++ b/superset-frontend/src/pages/AlertReportList/index.tsx @@ -489,7 +489,7 @@ function AlertList({ user, ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, { Header: t('Status'), @@ -531,7 +531,7 @@ function AlertList({ user, ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, ], [], diff --git a/superset-frontend/src/pages/AnnotationLayerList/index.tsx b/superset-frontend/src/pages/AnnotationLayerList/index.tsx index 4b57dc11968..b9c6386eec1 100644 --- a/superset-frontend/src/pages/AnnotationLayerList/index.tsx +++ b/superset-frontend/src/pages/AnnotationLayerList/index.tsx @@ -277,7 +277,7 @@ function AnnotationLayersList({ user, ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, ], [], diff --git a/superset-frontend/src/pages/ChartList/index.tsx b/superset-frontend/src/pages/ChartList/index.tsx index 560fb82b30f..f4753f6602b 100644 --- a/superset-frontend/src/pages/ChartList/index.tsx +++ b/superset-frontend/src/pages/ChartList/index.tsx @@ -654,7 +654,7 @@ function ChartList(props: ChartListProps) { unfilteredLabel: t('All'), fetchSelects: createFetchDatasets, paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, ...(isFeatureEnabled(FeatureFlag.TaggingSystem) && canReadTag ? [ @@ -690,7 +690,7 @@ function ChartList(props: ChartListProps) { props.user, ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, { Header: t('Dashboard'), @@ -701,7 +701,7 @@ function ChartList(props: ChartListProps) { unfilteredLabel: t('All'), fetchSelects: fetchDashboards, paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, ...(userId ? [favoritesFilter] : []), { @@ -736,7 +736,7 @@ function ChartList(props: ChartListProps) { props.user, ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, ] as ListViewFilters; return filters_list; diff --git a/superset-frontend/src/pages/DashboardList/index.tsx b/superset-frontend/src/pages/DashboardList/index.tsx index 6b9454f7adc..312faa1eec9 100644 --- a/superset-frontend/src/pages/DashboardList/index.tsx +++ b/superset-frontend/src/pages/DashboardList/index.tsx @@ -596,7 +596,7 @@ function DashboardList(props: DashboardListProps) { props.user, ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, ...(user?.userId ? [favoritesFilter] : []), { @@ -631,7 +631,7 @@ function DashboardList(props: DashboardListProps) { user, ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, ] as ListViewFilters; return filters_list; diff --git a/superset-frontend/src/pages/DatabaseList/index.tsx b/superset-frontend/src/pages/DatabaseList/index.tsx index 84baa209bbe..27c5293bc16 100644 --- a/superset-frontend/src/pages/DatabaseList/index.tsx +++ b/superset-frontend/src/pages/DatabaseList/index.tsx @@ -631,7 +631,7 @@ function DatabaseList({ user, ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, ], [], diff --git a/superset-frontend/src/pages/DatasetList/index.tsx b/superset-frontend/src/pages/DatasetList/index.tsx index 7822e15a9e5..611f353abae 100644 --- a/superset-frontend/src/pages/DatasetList/index.tsx +++ b/superset-frontend/src/pages/DatasetList/index.tsx @@ -553,7 +553,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({ ), ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, { Header: t('Schema'), @@ -570,7 +570,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({ ), ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, { Header: t('Owner'), @@ -591,7 +591,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({ user, ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, { Header: t('Certified'), @@ -625,7 +625,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({ user, ), paginate: true, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, ], [user], diff --git a/superset-frontend/src/pages/GroupsList/index.tsx b/superset-frontend/src/pages/GroupsList/index.tsx index b19fe494eb4..1151ea2fc72 100644 --- a/superset-frontend/src/pages/GroupsList/index.tsx +++ b/superset-frontend/src/pages/GroupsList/index.tsx @@ -327,7 +327,7 @@ function GroupsList({ user }: GroupsListProps) { value: role.id, })), loading: loadingState.roles, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, { Header: t('Users'), @@ -338,7 +338,7 @@ function GroupsList({ user }: GroupsListProps) { unfilteredLabel: t('All'), fetchSelects: async (filterValue, page, pageSize) => fetchUserOptions(filterValue, page, pageSize, addDangerToast), - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, ], [loadingState.roles, roles], diff --git a/superset-frontend/src/pages/RolesList/index.tsx b/superset-frontend/src/pages/RolesList/index.tsx index af309fdbfb9..075e8f28a96 100644 --- a/superset-frontend/src/pages/RolesList/index.tsx +++ b/superset-frontend/src/pages/RolesList/index.tsx @@ -312,7 +312,7 @@ function RolesList({ addDangerToast, addSuccessToast, user }: RolesListProps) { unfilteredLabel: t('All'), fetchSelects: async (filterValue, page, pageSize) => fetchUserOptions(filterValue, page, pageSize, addDangerToast), - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, { Header: t('Permissions'), @@ -326,7 +326,7 @@ function RolesList({ addDangerToast, addSuccessToast, user }: RolesListProps) { value: permission.id, })), loading: loadingState.permissions, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, { Header: t('Groups'), @@ -340,7 +340,7 @@ function RolesList({ addDangerToast, addSuccessToast, user }: RolesListProps) { value: group.id, })), loading: loadingState.groups, - dropdownStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, + popupStyle: { minWidth: WIDER_DROPDOWN_WIDTH }, }, ], [permissions, groups, loadingState.groups, loadingState.permissions],
