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,42 +50,59 @@ function BusinessGlossaryPage() {
 
     const hasTermsOrNodes = !!nodes?.length || !!terms?.length;
 
+    const [isCreateTermModalVisible, setIsCreateTermModalVisible] = useState(false);
+    const [isCreateNodeModalVisible, setIsCreateNodeModalVisible] = useState(false);
+
     return (
-        <SearchablePage>
-            <GlossaryWrapper>
-                <BrowserWrapper width={browserWidth}>
-                    <GlossarySearch />
-                    <GlossaryBrowser rootNodes={nodes} rootTerms={terms} />
-                </BrowserWrapper>
-                <ProfileSidebarResizer
-                    setSidePanelWidth={(width) =>
-                        setBrowserWidth(Math.min(Math.max(width, MIN_BROWSWER_WIDTH), MAX_BROWSER_WIDTH))
-                    }
-                    initialSize={browserWidth}
-                    isSidebarOnLeft
-                />
-                <MainContentWrapper>
-                    <GlossaryEntitiesPath />
-                    <HeaderWrapper>
-                        <Typography.Title level={3}>Glossary</Typography.Title>
-                        {
-                            // This is a hack -- TODO: Generalize EntityDropdown to support non-entity related items.
+        <>
+            <SearchablePage>
+                <GlossaryWrapper>
+                    <BrowserWrapper width={browserWidth}>
+                        <GlossarySearch />
+                        <GlossaryBrowser rootNodes={nodes} rootTerms={terms} />
+                    </BrowserWrapper>
+                    <ProfileSidebarResizer
+                        setSidePanelWidth={(width) =>
+                            setBrowserWidth(Math.min(Math.max(width, MIN_BROWSWER_WIDTH), MAX_BROWSER_WIDTH))
                         }
-                        <EntityDropdown
-                            urn=""
-                            entityType={EntityType.GlossaryNode}
-                            menuItems={new Set([EntityMenuItems.ADD_TERM_GROUP, EntityMenuItems.ADD_TERM])}
-                            refetchForTerms={refetchForTerms}
-                            refetchForNodes={refetchForNodes}
-                        />
-                    </HeaderWrapper>
-                    {hasTermsOrNodes && <GlossaryEntitiesList nodes={nodes || []} terms={terms || []} />}
-                    {!hasTermsOrNodes && (
-                        <EmptyGlossarySection refetchForTerms={refetchForTerms} refetchForNodes={refetchForNodes} />
-                    )}
-                </MainContentWrapper>
-            </GlossaryWrapper>
-        </SearchablePage>
+                        initialSize={browserWidth}
+                        isSidebarOnLeft
+                    />
+                    <MainContentWrapper>
+                        <GlossaryEntitiesPath />
+                        <HeaderWrapper>
+                            <Typography.Title level={3}>Glossary</Typography.Title>
+                            <div>
+                                <Button type="text" onClick={() => setIsCreateTermModalVisible(true)}>
+                                    <PlusOutlined /> Add Term
+                                </Button>
+                                <Button type="text" onClick={() => setIsCreateNodeModalVisible(true)}>
+                                    <PlusOutlined /> Add Term Group
+                                </Button>
+                            </div>
+                        </HeaderWrapper>
+                        {hasTermsOrNodes && <GlossaryEntitiesList nodes={nodes || []} terms={terms || []} />}
+                        {!hasTermsOrNodes && (
+                            <EmptyGlossarySection refetchForTerms={refetchForTerms} refetchForNodes={refetchForNodes} />
+                        )}
+                    </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>
-            {version && <MenuItem key="version">{version}</MenuItem>}
+        <Menu style={{ width: '120px' }}>
+            {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} />
+        <>
+            <CustomAvatar photoUrl={_pictureLink} style={{ marginRight: 4 }} name={name} />
+            <Dropdown overlay={menu} trigger={['click']}>
                 <DownArrow />
-            </StyledLink>
-        </Dropdown>
+            </Dropdown>
+        </>
     );
 };