Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modified the drop down of Menu Items #5301

Merged
merged 4 commits into from
Jul 1, 2022
Merged

Modified the drop down of Menu Items #5301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0a4a06c
Modified the dropdown of manubar
Ankit-Keshari-Vituity Jun 30, 2022
305d026
Modify the menus items and Also add buttons instead of dropdown in gl…
Ankit-Keshari-Vituity Jul 1, 2022
50f272b
Chnaged the color of version text in menu item
Ankit-Keshari-Vituity Jul 1, 2022
be9fb0b
Merge branch 'master' into modify-menus
jjoyce0510 Jul 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 55 additions & 36 deletions datahub-web-react/src/app/glossary/BusinessGlossaryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)`
Expand Down Expand Up @@ -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}
/>
)}
</>
);
}

Expand Down
40 changes: 27 additions & 13 deletions datahub-web-react/src/app/shared/ManageAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
}
Expand All @@ -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;
Expand All @@ -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}>
Expand All @@ -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>
</>
);
};

Expand Down