feat(ui): Modified the drop down of Menu Items (#5301)

datahub-web-react/src/app/glossary/BusinessGlossaryPage.tsx

@@ -1,16 +1,18 @@
 import React, { useState } from 'react';
-import { Typography } from 'antd';
+import { Button, Typography } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 import styled from 'styled-components/macro';
+
 import { useGetRootGlossaryNodesQuery, useGetRootGlossaryTermsQuery } from '../../graphql/glossary.generated';
 import TabToolbar from '../entity/shared/components/styled/TabToolbar';
 import { SearchablePage } from '../search/SearchablePage';
-import EntityDropdown, { EntityMenuItems } from '../entity/shared/EntityDropdown/EntityDropdown';
 import GlossaryEntitiesPath from './GlossaryEntitiesPath';
 import GlossaryEntitiesList from './GlossaryEntitiesList';
 import GlossaryBrowser from './GlossaryBrowser/GlossaryBrowser';
 import GlossarySearch from './GlossarySearch';
 import { ProfileSidebarResizer } from '../entity/shared/containers/profile/sidebar/ProfileSidebarResizer';
 import EmptyGlossarySection from './EmptyGlossarySection';
+import CreateGlossaryEntityModal from '../entity/shared/EntityDropdown/CreateGlossaryEntityModal';
 import { EntityType } from '../../types.generated';
 
 export const HeaderWrapper = styled(TabToolbar)`
@@ -48,7 +50,11 @@ function BusinessGlossaryPage() {
 
     const hasTermsOrNodes = !!nodes?.length || !!terms?.length;
 
+    const [isCreateTermModalVisible, setIsCreateTermModalVisible] = useState(false);
+    const [isCreateNodeModalVisible, setIsCreateNodeModalVisible] = useState(false);
+
     return (
+        <>
             <SearchablePage>
                 <GlossaryWrapper>
                     <BrowserWrapper width={browserWidth}>
@@ -66,16 +72,14 @@ function BusinessGlossaryPage() {
                         <GlossaryEntitiesPath />
                         <HeaderWrapper>
                             <Typography.Title level={3}>Glossary</Typography.Title>
-                        {
+                            <div>
-                            // This is a hack -- TODO: Generalize EntityDropdown to support non-entity related items.
+                                <Button type="text" onClick={() => setIsCreateTermModalVisible(true)}>
-                        }
+                                    <PlusOutlined /> Add Term
-                        <EntityDropdown
+                                </Button>
-                            urn=""
+                                <Button type="text" onClick={() => setIsCreateNodeModalVisible(true)}>
-                            entityType={EntityType.GlossaryNode}
+                                    <PlusOutlined /> Add Term Group
-                            menuItems={new Set([EntityMenuItems.ADD_TERM_GROUP, EntityMenuItems.ADD_TERM])}
+                                </Button>
-                            refetchForTerms={refetchForTerms}
+                            </div>
-                            refetchForNodes={refetchForNodes}
-                        />
                         </HeaderWrapper>
                         {hasTermsOrNodes && <GlossaryEntitiesList nodes={nodes || []} terms={terms || []} />}
                         {!hasTermsOrNodes && (
@@ -84,6 +88,21 @@ function BusinessGlossaryPage() {
                     </MainContentWrapper>
                 </GlossaryWrapper>
             </SearchablePage>
+            {isCreateTermModalVisible && (
+                <CreateGlossaryEntityModal
+                    entityType={EntityType.GlossaryTerm}
+                    onClose={() => setIsCreateTermModalVisible(false)}
+                    refetchData={refetchForTerms}
+                />
+            )}
+            {isCreateNodeModalVisible && (
+                <CreateGlossaryEntityModal
+                    entityType={EntityType.GlossaryNode}
+                    onClose={() => setIsCreateNodeModalVisible(false)}
+                    refetchData={refetchForNodes}
+                />
+            )}
+        </>
     );
 }
 

datahub-web-react/src/app/shared/ManageAccount.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import Cookies from 'js-cookie';
 import { Menu, Dropdown } from 'antd';
 import { CaretDownOutlined } from '@ant-design/icons';
-import { Link } from 'react-router-dom';
 import styled, { useTheme } from 'styled-components';
 import { EntityType } from '../../types.generated';
 import { useEntityRegistry } from '../useEntityRegistry';
@@ -14,6 +13,9 @@ import { ANTD_GRAY } from '../entity/shared/constants';
 import { useAppConfig } from '../useAppConfig';
 
 const MenuItem = styled(Menu.Item)`
+    display: flex;
+    justify-content: start;
+    align-items: center;
     && {
         margin-top: 2px;
     }
@@ -32,10 +34,6 @@ const DownArrow = styled(CaretDownOutlined)`
     color: ${ANTD_GRAY[7]};
 `;
 
-const StyledLink = styled(Link)`
-    white-space: nowrap;
-`;
-
 interface Props {
     urn: string;
     pictureLink?: string;
@@ -57,8 +55,23 @@ export const ManageAccount = ({ urn: _urn, pictureLink: _pictureLink, name }: Pr
     };
     const version = config?.appVersion;
     const menu = (
-        <Menu>
+        <Menu style={{ width: '120px' }}>
-            {version && <MenuItem key="version">{version}</MenuItem>}
+            {version && (
+                <MenuItem key="version" disabled style={{ color: '#8C8C8C' }}>
+                    {version}
+                </MenuItem>
+            )}
+            <Menu.Divider />
+            <MenuItem key="profile">
+                <a
+                    href={`/${entityRegistry.getPathName(EntityType.CorpUser)}/${_urn}`}
+                    rel="noopener noreferrer"
+                    tabIndex={0}
+                >
+                    Your Profile
+                </a>
+            </MenuItem>
+            <Menu.Divider />
             {themeConfig.content.menu.items.map((value) => {
                 return (
                     <MenuItem key={value.label}>
@@ -79,21 +92,22 @@ export const ManageAccount = ({ urn: _urn, pictureLink: _pictureLink, name }: Pr
             <MenuItem key="openapiLink">
                 <a href="/openapi/swagger-ui/index.html">OpenAPI</a>
             </MenuItem>
+            <Menu.Divider />
             <MenuItem danger key="logout" tabIndex={0}>
                 <a href="/" onClick={handleLogout}>
-                    Logout
+                    Sign Out
                 </a>
             </MenuItem>
         </Menu>
     );
 
     return (
-        <Dropdown overlay={menu}>
+        <>
-            <StyledLink to={`/${entityRegistry.getPathName(EntityType.CorpUser)}/${_urn}`}>
             <CustomAvatar photoUrl={_pictureLink} style={{ marginRight: 4 }} name={name} />
+            <Dropdown overlay={menu} trigger={['click']}>
                 <DownArrow />
-            </StyledLink>
             </Dropdown>
+        </>
     );
 };