fix(ui): replace ant dropdown overlay with menu (#11229)

Co-authored-by: salman <[email protected]>
datahub-project · Aug 27, 2024 · 12eb225 · 12eb225
1 parent 56a563b
commit 12eb225
Show file tree

Hide file tree

Showing 33 changed files with 774 additions and 685 deletions.
diff --git a/datahub-web-react/src/app/businessAttribute/BusinessAttributeItemMenu.tsx b/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>
     );

diff --git a/datahub-web-react/src/app/domain/DomainItemMenu.tsx b/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>
     );

diff --git a/datahub-web-react/src/app/entity/dataset/profile/schema/components/CustomPagination.tsx b/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

diff --git a/datahub-web-react/src/app/entity/glossaryTerm/profile/RelatedTerm.tsx b/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>
                 )}