Replacing ant dropdown 'overlay' with 'menu'

datahub-web-react/src/app/businessAttribute/BusinessAttributeItemMenu.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
-import { Dropdown, Menu, message, Modal } from 'antd';
+import { Dropdown, message, Modal } from 'antd';
 import { MenuIcon } from '../entity/shared/EntityDropdown/EntityDropdown';
 import { useDeleteBusinessAttributeMutation } from '../../graphql/businessAttribute.generated';
+import { MenuItemStyle } from '../entity/view/menu/item/styledComponent';
 
 type Props = {
  urn: string;
@@ -48,17 +49,19 @@ export default function BusinessAttributeItemMenu({ title, urn, onDelete }: Prop
  });
  };
 
+ const items = [
+ {
+ key: 'delete',
+ label: (
+ <MenuItemStyle onClick={onConfirmDelete}>
+ <DeleteOutlined /> &nbsp;Delete
+ </MenuItemStyle>
+ ),
+ },
+ ];
+
  return (
- <Dropdown
- trigger={['click']}
- overlay={
- <Menu>
- <Menu.Item onClick={onConfirmDelete} key="delete">
- <DeleteOutlined /> &nbsp;Delete
- </Menu.Item>
- </Menu>
- }
- >
+ <Dropdown trigger={['click']} menu={{ items }}>
  <MenuIcon data-testid={`dropdown-menu-${urn}`} fontSize={20} />
  </Dropdown>
  );

datahub-web-react/src/app/domain/DomainItemMenu.tsx

@@ -48,17 +48,19 @@ export default function DomainItemMenu({ name, urn, onDelete }: Props) {
  });
  };
 
+ const items = [
+ {
+ key: 0,
+ label: (
+ <Menu.Item onClick={onConfirmDelete} key="delete">
+ <DeleteOutlined /> &nbsp;Delete
+ </Menu.Item>
+ ),
+ },
+ ];
+
  return (
- <Dropdown
- trigger={['click']}
- overlay={
- <Menu>
- <Menu.Item onClick={onConfirmDelete} key="delete">
- <DeleteOutlined /> &nbsp;Delete
- </Menu.Item>
- </Menu>
- }
- >
+ <Dropdown trigger={['click']} menu={{ items }}>
  <MenuIcon data-testid={`dropdown-menu-${urn}`} fontSize={20} />
  </Dropdown>
  );

datahub-web-react/src/app/entity/dataset/profile/schema/components/CustomPagination.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { Button, Menu, Dropdown, Typography } from 'antd';
+import { Button, Dropdown, Typography } from 'antd';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
+import { MenuItemStyle } from '../../../../view/menu/item/styledComponent';
 
 const CustomPaginationContainer = styled.div`
  display: flex;
@@ -60,27 +61,29 @@ export default function CustomPagination({ onChange, maxVersion }: Props) {
  onChange(version1, parseInt(key, 10));
  };
 
- const menu1 = (
- <Menu onClick={onVersion1Click} selectedKeys={[`${version1}`]}>
- {[...Array(maxVersion)].map((_, i) => (
- // eslint-disable-next-line react/no-array-index-key
- <Menu.Item key={maxVersion - i}>
+ const items1 = [...Array(maxVersion)].map((_, i) => {
+ // eslint-disable-next-line react/no-array-index-key
+ return {
+ key: maxVersion - i,
+ label: (
+ <MenuItemStyle onClick={() => onVersion1Click({ key: maxVersion - i })}>
  <Typography.Text>{i === 0 ? 'latest' : `version ${maxVersion + 1 - i}`}</Typography.Text>
- </Menu.Item>
- ))}
- </Menu>
- );
+ </MenuItemStyle>
+ ),
+ };
+ });
 
- const menu2 = (
- <Menu onClick={onVersion2Click} selectedKeys={[`${version2}`]}>
- {[...Array(version1)].map((_, i) => (
- // eslint-disable-next-line react/no-array-index-key
- <Menu.Item key={version1 - i - 1}>
+ const items2 = [...Array(version1)].map((_, i) => {
+ // eslint-disable-next-line react/no-array-index-key
+ return {
+ key: version1 - i - 1,
+ label: (
+ <MenuItemStyle onClick={() => onVersion2Click({ key: version1 - i - 1 })}>
  <Typography.Text>{`version ${version1 - i}`}</Typography.Text>
- </Menu.Item>
- ))}
- </Menu>
- );
+ </MenuItemStyle>
+ ),
+ };
+ });
 
  return (
  <CustomPaginationContainer>
@@ -92,13 +95,13 @@ export default function CustomPagination({ onChange, maxVersion }: Props) {
  disabled={version1 >= maxVersion}
  />
  <DescriptionText>Comparing</DescriptionText>
- <Dropdown overlay={menu1} trigger={['click']}>
+ <Dropdown menu={{ items: items1 }} trigger={['click']}>
  <VersionText strong type="success">
  {version1 === maxVersion ? 'latest' : `version ${version1 + 1}`}
  </VersionText>
  </Dropdown>
  <DescriptionText>to</DescriptionText>
- <Dropdown overlay={menu2} trigger={['click']}>
+ <Dropdown menu={{ items: items2 }} trigger={['click']}>
  <VersionRightText strong type="success">{`version ${version2 + 1}`}</VersionRightText>
  </Dropdown>
  <NavButton

datahub-web-react/src/app/entity/glossaryTerm/profile/RelatedTerm.tsx

@@ -1,5 +1,5 @@
 import { DeleteOutlined, MoreOutlined } from '@ant-design/icons';
-import { Divider, Dropdown, Menu } from 'antd';
+import { Divider, Dropdown } from 'antd';
 import React from 'react';
 import styled from 'styled-components/macro';
 import { useGetGlossaryTermQuery } from '../../../../graphql/glossaryTerm.generated';
@@ -51,23 +51,23 @@ function RelatedTerm(props: Props) {
 
  if (loading) return null;
 
+ const items = [
+ {
+ key: '0',
+ label: (
+ <MenuItem onClick={onRemove}>
+ <DeleteOutlined /> &nbsp; Remove Term
+ </MenuItem>
+ ),
+ },
+ ];
+
  return (
  <ListItem>
  <Profile>
  {entityRegistry.renderPreview(EntityType.GlossaryTerm, PreviewType.PREVIEW, data?.glossaryTerm)}
  {isEditable && (
- <Dropdown
- overlay={
- <Menu>
- <Menu.Item key="0">
- <MenuItem onClick={onRemove}>
- <DeleteOutlined /> &nbsp; Remove Term
- </MenuItem>
- </Menu.Item>
- </Menu>
- }
- trigger={['click']}
- >
+ <Dropdown menu={{ items }} trigger={['click']}>
  <MenuIcon />
  </Dropdown>
  )}