refactor(Dropdown): Migrate Dropdown to Ant Design 5

superset-frontend/src/GlobalStyles.tsx

@@ -99,11 +99,11 @@ export const GlobalStyles = () => (
           margin-right: 0;
         }
       }
-      .ant-dropdown-menu-sub .antd5-menu.antd5-menu-vertical {
+      .antd5-dropdown-menu-sub .antd5-menu.antd5-menu-vertical {
         box-shadow: none;
       }
-      .ant-dropdown-menu-submenu-title,
-      .ant-dropdown-menu-item {
+      .antd5-dropdown-menu-submenu-title,
+      .antd5-dropdown-menu-item {
         line-height: 1.5em !important;
       }
     `}

superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx

@@ -18,7 +18,7 @@
  */
 import { useDispatch } from 'react-redux';
 import { styled, useTheme, t } from '@superset-ui/core';
-import { AntdDropdown } from 'src/components';
+import { Dropdown } from 'src/components/Dropdown';
 import { Menu } from 'src/components/Menu';
 import Icons from 'src/components/Icons';
 import { queryEditorSetQueryLimit } from 'src/SqlLab/actions/sqlLab';
@@ -36,7 +36,7 @@ export function convertToNumWithSpaces(num: number) {
 
 const LimitSelectStyled = styled.span`
   ${({ theme }) => `
-    .ant-dropdown-trigger {
+    .antd5-dropdown-trigger {
       align-items: center;
       color: ${theme.colors.grayscale.dark2};
       display: flex;
@@ -95,8 +95,8 @@ const QueryLimitSelect = ({
 
   return (
     <LimitSelectStyled>
-      <AntdDropdown
-        overlay={renderQueryLimit(maxRow, setQueryLimit)}
+      <Dropdown
+        dropdownRender={() => renderQueryLimit(maxRow, setQueryLimit)}
         trigger={['click']}
       >
         <button type="button" onClick={e => e.preventDefault()}>
@@ -106,7 +106,7 @@ const QueryLimitSelect = ({
           </span>
           <Icons.TriangleDown iconColor={theme.colors.grayscale.base} />
         </button>
-      </AntdDropdown>
+      </Dropdown>
     </LimitSelectStyled>
   );
 };

superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx

@@ -16,12 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC } from 'react';
-import { t, useTheme, styled } from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { DropdownButton } from 'src/components/DropdownButton';
 import Button from 'src/components/Button';
-import { DropdownButtonProps } from 'antd/lib/dropdown';
 
 interface SaveDatasetActionButtonProps {
   setShowSave: (arg0: boolean) => void;
@@ -34,34 +32,14 @@ const SaveDatasetActionButton = ({
 }: SaveDatasetActionButtonProps) => {
   const theme = useTheme();
 
-  const StyledDropdownButton = styled(
-    DropdownButton as FC<DropdownButtonProps>,
-  )`
-    &.ant-dropdown-button button.ant-btn.ant-btn-default {
-      font-weight: ${theme.gridUnit * 150};
-      background-color: ${theme.colors.primary.light4};
-      color: ${theme.colors.primary.dark1};
-      &:nth-of-type(2) {
-        &:before,
-        &:hover:before {
-          border-left: 2px solid ${theme.colors.primary.dark2};
-        }
-      }
-    }
-    span[name='caret-down'] {
-      margin-left: ${theme.gridUnit * 1}px;
-      color: ${theme.colors.primary.dark2};
-    }
-  `;
-
   return !overlayMenu ? (
     <Button onClick={() => setShowSave(true)} buttonStyle="primary">
       {t('Save')}
     </Button>
   ) : (
-    <StyledDropdownButton
+    <DropdownButton
       onClick={() => setShowSave(true)}
-      overlay={overlayMenu}
+      dropdownRender={() => overlayMenu}
       icon={
         <Icons.CaretDown
           iconColor={theme.colors.grayscale.light5}
@@ -71,7 +49,7 @@ const SaveDatasetActionButton = ({
       trigger={['click']}
     >
       {t('Save')}
-    </StyledDropdownButton>
+    </DropdownButton>
   );
 };
 

superset-frontend/src/SqlLab/components/SqlEditor/index.tsx

@@ -56,7 +56,8 @@ import Mousetrap from 'mousetrap';
 import Button from 'src/components/Button';
 import Timer from 'src/components/Timer';
 import ResizableSidebar from 'src/components/ResizableSidebar';
-import { AntdDropdown, Skeleton } from 'src/components';
+import { Dropdown } from 'src/components/Dropdown';
+import { Skeleton } from 'src/components';
 import { Switch } from 'src/components/Switch';
 import { Input } from 'src/components/Input';
 import { Menu } from 'src/components/Menu';
@@ -860,9 +861,12 @@ const SqlEditor: FC<Props> = ({
               <span>
                 <ShareSqlLabQuery queryEditorId={queryEditor.id} />
               </span>
-              <AntdDropdown overlay={renderDropdown()} trigger={['click']}>
+              <Dropdown
+                dropdownRender={() => renderDropdown()}
+                trigger={['click']}
+              >
                 <Icons.MoreHoriz iconColor={theme.colors.grayscale.base} />
-              </AntdDropdown>
+              </Dropdown>
             </div>
           </>
         )}

superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx

@@ -20,7 +20,7 @@ import { useMemo, FC } from 'react';
 
 import { bindActionCreators } from 'redux';
 import { useSelector, useDispatch, shallowEqual } from 'react-redux';
-import { Dropdown } from 'src/components/Dropdown';
+import { MenuDotsDropdown } from 'src/components/Dropdown';
 import { Menu } from 'src/components/Menu';
 import { styled, t, QueryState } from '@superset-ui/core';
 import {
@@ -88,7 +88,7 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
 
   return (
     <TabTitleWrapper>
-      <Dropdown
+      <MenuDotsDropdown
         trigger={['click']}
         overlay={
           <Menu style={{ width: 176 }}>

superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx

@@ -42,7 +42,7 @@ import {
 import { RootState } from 'src/dashboard/types';
 import { Menu } from 'src/components/Menu';
 import { usePermissions } from 'src/hooks/usePermissions';
-import { AntdDropdown as Dropdown } from 'src/components/index';
+import { Dropdown } from 'src/components/Dropdown';
 import { updateDataMask } from 'src/dataMask/actions';
 import { DrillDetailMenuItems } from '../DrillDetail';
 import { getMenuAdjustedY } from '../utils';
@@ -115,7 +115,7 @@ const ChartContextMenu = (
 
   const [drillModalIsOpen, setDrillModalIsOpen] = useState(false);
 
-  const menuItems = [];
+  const menuItems: React.JSX.Element[] = [];
 
   const showDrillToDetail =
     isFeatureEnabled(FeatureFlag.DrillToDetail) &&
@@ -288,7 +288,7 @@ const ChartContextMenu = (
   return ReactDOM.createPortal(
     <>
       <Dropdown
-        overlay={
+        dropdownRender={() => (
           <Menu
             className="chart-context-menu"
             data-test="chart-context-menu"
@@ -304,15 +304,15 @@ const ChartContextMenu = (
               <Menu.Item disabled>{t('No actions')}</Menu.Item>
             )}
           </Menu>
-        }
+        )}
         trigger={['click']}
-        onVisibleChange={value => {
+        onOpenChange={value => {
           setVisible(value);
           if (!value) {
             setOpenKeys([]);
           }
         }}
-        visible={visible}
+        open={visible}
       >
         <span
           id={`hidden-span-${id}`}

superset-frontend/src/components/Dropdown/Dropdown.stories.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { Menu } from 'src/components/Menu';
-import { Dropdown, DropdownProps } from '.';
+import { MenuDotsDropdown, MenuDotsDropdownProps } from '.';
 
 export default {
   title: 'Dropdown',
@@ -50,8 +50,8 @@ const customOverlay = (
 export const InteractiveDropdown = ({
   overlayType,
   ...rest
-}: DropdownProps & { overlayType: string }) => (
-  <Dropdown
+}: MenuDotsDropdownProps & { overlayType: string }) => (
+  <MenuDotsDropdown
     {...rest}
     overlay={overlayType === 'custom' ? customOverlay : menu}
   />

superset-frontend/src/components/Dropdown/index.tsx

@@ -24,13 +24,7 @@ import {
   cloneElement,
 } from 'react';
 
-import { AntdDropdown } from 'src/components';
-// TODO: @geido - Remove these after dropdown is fully migrated to Antd v5
-import {
-  Dropdown as Antd5Dropdown,
-  DropDownProps as Antd5DropdownProps,
-} from 'antd-v5';
-import { DropDownProps } from 'antd/lib/dropdown';
+import { Dropdown as AntdDropdown, DropDownProps } from 'antd-v5';
 import { styled } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 
@@ -83,7 +77,8 @@ export enum IconOrientation {
   Vertical = 'vertical',
   Horizontal = 'horizontal',
 }
-export interface DropdownProps extends DropDownProps {
+
+export interface MenuDotsDropdownProps extends DropDownProps {
   overlay: ReactElement;
   iconOrientation?: IconOrientation;
 }
@@ -100,19 +95,19 @@ const RenderIcon = (
   return component;
 };
 
-export const Dropdown = ({
+export const MenuDotsDropdown = ({
   overlay,
   iconOrientation = IconOrientation.Vertical,
   ...rest
-}: DropdownProps) => (
-  <AntdDropdown overlay={overlay} {...rest}>
+}: MenuDotsDropdownProps) => (
+  <AntdDropdown dropdownRender={() => overlay} {...rest}>
     <MenuDotsWrapper data-test="dropdown-trigger">
       {RenderIcon(iconOrientation)}
     </MenuDotsWrapper>
   </AntdDropdown>
 );
 
-export interface NoAnimationDropdownProps extends Antd5DropdownProps {
+export interface NoAnimationDropdownProps extends DropDownProps {
   children: ReactNode;
   onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
   onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
@@ -126,8 +121,13 @@ export const NoAnimationDropdown = (props: NoAnimationDropdownProps) => {
   });
 
   return (
-    <Antd5Dropdown overlayStyle={props.overlayStyle} {...rest}>
+    <AntdDropdown overlayStyle={props.overlayStyle} {...rest}>
       {childrenWithProps}
-    </Antd5Dropdown>
+    </AntdDropdown>
   );
 };
+
+export const Dropdown = Object.assign(AntdDropdown, {
+  Button: AntdDropdown.Button,
+});
+export type DropdownProps = DropDownProps;