Type
diff --git a/datahub-web-react/src/app/permissions/roles/ManageRoles.tsx b/datahub-web-react/src/app/permissions/roles/ManageRoles.tsx
index 4982be27fa421..7c2cec63071ad 100644
--- a/datahub-web-react/src/app/permissions/roles/ManageRoles.tsx
+++ b/datahub-web-react/src/app/permissions/roles/ManageRoles.tsx
@@ -284,7 +284,7 @@ export const ManageRoles = () => {
showSizeChanger={false}
/>
-
+
);
};
diff --git a/datahub-web-react/src/app/permissions/roles/RoleDetailsModal.tsx b/datahub-web-react/src/app/permissions/roles/RoleDetailsModal.tsx
index c32e9c07823da..7bca62c040c2d 100644
--- a/datahub-web-react/src/app/permissions/roles/RoleDetailsModal.tsx
+++ b/datahub-web-react/src/app/permissions/roles/RoleDetailsModal.tsx
@@ -7,7 +7,7 @@ import AvatarsGroup from '../AvatarsGroup';
type Props = {
role: DataHubRole;
- visible: boolean;
+ open: boolean;
onClose: () => void;
};
@@ -34,7 +34,7 @@ const ThinDivider = styled(Divider)`
/**
* Component used for displaying the details about an existing Role.
*/
-export default function RoleDetailsModal({ role, visible, onClose }: Props) {
+export default function RoleDetailsModal({ role, open, onClose }: Props) {
const entityRegistry = useEntityRegistry();
const actionButtons = (
@@ -49,7 +49,7 @@ export default function RoleDetailsModal({ role, visible, onClose }: Props) {
const policies = castedRole?.policies?.relationships.map((relationship) => relationship.entity as DataHubPolicy);
return (
-
+
Description
diff --git a/datahub-web-react/src/app/preview/EntityPaths/EntityPathsModal.tsx b/datahub-web-react/src/app/preview/EntityPaths/EntityPathsModal.tsx
index 2bb76714d6119..68c754b6b21d3 100644
--- a/datahub-web-react/src/app/preview/EntityPaths/EntityPathsModal.tsx
+++ b/datahub-web-react/src/app/preview/EntityPaths/EntityPathsModal.tsx
@@ -47,7 +47,7 @@ export default function EntityPathsModal({ paths, resultEntityUrn, hideModal }:
}
width="75vw"
- visible
+ open
onCancel={hideModal}
onOk={hideModal}
footer={null}
diff --git a/datahub-web-react/src/app/search/AdvancedFilterSelectValueModal.tsx b/datahub-web-react/src/app/search/AdvancedFilterSelectValueModal.tsx
index c562fc6e8349a..056aca56c1313 100644
--- a/datahub-web-react/src/app/search/AdvancedFilterSelectValueModal.tsx
+++ b/datahub-web-react/src/app/search/AdvancedFilterSelectValueModal.tsx
@@ -187,7 +187,7 @@ export const AdvancedFilterSelectValueModal = ({
{
onSelect(urns);
@@ -211,7 +211,7 @@ export const AdvancedFilterSelectValueModal = ({
{
onSelect(urns);
diff --git a/datahub-web-react/src/app/search/ChooseEntityTypeModal.tsx b/datahub-web-react/src/app/search/ChooseEntityTypeModal.tsx
index 1e31bd74ee06f..dd611bba346c1 100644
--- a/datahub-web-react/src/app/search/ChooseEntityTypeModal.tsx
+++ b/datahub-web-react/src/app/search/ChooseEntityTypeModal.tsx
@@ -29,7 +29,7 @@ export const ChooseEntityTypeModal = ({ defaultValues, onCloseModal, onOk, title
return (
void;
accessToken: string;
expiresInText: string;
};
-export const AccessTokenModal = ({ visible, onClose, accessToken, expiresInText }: Props) => {
+export const AccessTokenModal = ({ open, onClose, accessToken, expiresInText }: Props) => {
const baseUrl = window.location.origin;
const accessTokenCurl = `curl -X POST '${baseUrl}/api/graphql' \\
--header 'Authorization: Bearer ${accessToken}' \\
@@ -56,7 +56,7 @@ export const AccessTokenModal = ({ visible, onClose, accessToken, expiresInText
New Personal Access Token
}
- visible={visible}
+ open={open}
onCancel={onClose}
footer={
<>
diff --git a/datahub-web-react/src/app/settings/AccessTokens.tsx b/datahub-web-react/src/app/settings/AccessTokens.tsx
index ef58a1b84c140..6ccca8dd360d7 100644
--- a/datahub-web-react/src/app/settings/AccessTokens.tsx
+++ b/datahub-web-react/src/app/settings/AccessTokens.tsx
@@ -419,7 +419,7 @@ export const AccessTokens = () => {
setIsCreatingToken(false)}
onCreateToken={() => {
// Hack to deal with eventual consistency.
diff --git a/datahub-web-react/src/app/settings/CreateTokenModal.tsx b/datahub-web-react/src/app/settings/CreateTokenModal.tsx
index 3cc446651efcb..e53de77b54e15 100644
--- a/datahub-web-react/src/app/settings/CreateTokenModal.tsx
+++ b/datahub-web-react/src/app/settings/CreateTokenModal.tsx
@@ -12,7 +12,7 @@ import analytics, { EventType } from '../analytics';
type Props = {
currentUserUrn: string;
- visible: boolean;
+ open: boolean;
onClose: () => void;
onCreateToken: () => void;
};
@@ -39,7 +39,7 @@ const OptionText = styled.span<{ isRed: boolean }>`
${(props) => props.isRed && `color: ${red[5]};`}
`;
-export default function CreateTokenModal({ currentUserUrn, visible, onClose, onCreateToken }: Props) {
+export default function CreateTokenModal({ currentUserUrn, open, onClose, onCreateToken }: Props) {
const [selectedTokenDuration, setSelectedTokenDuration] = useState(null);
const [showModal, setShowModal] = useState(false);
@@ -113,7 +113,7 @@ export default function CreateTokenModal({ currentUserUrn, visible, onClose, onC
<>
@@ -192,7 +192,7 @@ export default function CreateTokenModal({ currentUserUrn, visible, onClose, onC
+ Delete
+
+ ),
+ },
+ {
+ key: 'edit',
+ label: (
+
+ Edit
+
+ ),
+ },
+ ];
+
return (
-
-
- Delete
-
-
- Edit
-
-
- }
- >
+
);
diff --git a/datahub-web-react/src/app/shared/ManageAccount.tsx b/datahub-web-react/src/app/shared/ManageAccount.tsx
index 6d496b40362e5..359a7d77dd02c 100644
--- a/datahub-web-react/src/app/shared/ManageAccount.tsx
+++ b/datahub-web-react/src/app/shared/ManageAccount.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import Cookies from 'js-cookie';
-import { Menu, Dropdown } from 'antd';
+import { Dropdown } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';
import styled, { useTheme } from 'styled-components';
import { EntityType } from '../../types.generated';
@@ -12,22 +12,7 @@ import analytics, { EventType } from '../analytics';
import { ANTD_GRAY } from '../entity/shared/constants';
import { useAppConfig } from '../useAppConfig';
import { useUserContext } from '../context/useUserContext';
-
-const MenuItem = styled(Menu.Item)`
- display: flex;
- justify-content: start;
- align-items: center;
- && {
- margin-top: 2px;
- }
- & > a:visited,
- & > a:active,
- & > a:focus {
- clear: both;
- border: none;
- outline: 0;
- }
-`;
+import { MenuItemStyle } from '../entity/view/menu/item/styledComponent';
const DownArrow = styled(CaretDownOutlined)`
vertical-align: -1px;
@@ -63,55 +48,88 @@ export const ManageAccount = ({ urn: _urn, pictureLink: _pictureLink, name }: Pr
userContext.updateLocalState({ selectedViewUrn: undefined });
};
const version = config?.appVersion;
- const menu = (
-
- );
+
+ const themeConfigItems = themeConfig.content.menu.items.map((value) => {
+ return {
+ key: value.label,
+ label: (
+
+
+ {value.label}
+
+
+ ),
+ };
+ });
+
+ const divider = {
+ key: 'divider',
+ type: 'divider',
+ };
+
+ const items = [
+ version
+ ? {
+ key: 'version',
+ label: (
+
+ {version}
+
+ ),
+ }
+ : null,
+ divider,
+ {
+ key: 'profile',
+ label: (
+
+
+ Your Profile
+
+
+ ),
+ },
+ ...themeConfigItems,
+ {
+ key: 'graphiQLLink',
+ label: (
+
+ GraphiQL
+
+ ),
+ },
+ {
+ key: 'openapiLink',
+ label: (
+
+ OpenAPI
+
+ ),
+ },
+ divider,
+ {
+ key: 'logout',
+ label: (
+
+
+ Sign Out
+
+
+ ),
+ },
+ ];
return (
-
+
diff --git a/datahub-web-react/src/app/shared/admin/HeaderLinks.tsx b/datahub-web-react/src/app/shared/admin/HeaderLinks.tsx
index cce2a2336515d..8936a935735c5 100644
--- a/datahub-web-react/src/app/shared/admin/HeaderLinks.tsx
+++ b/datahub-web-react/src/app/shared/admin/HeaderLinks.tsx
@@ -10,7 +10,7 @@ import {
GlobalOutlined,
} from '@ant-design/icons';
import { Link } from 'react-router-dom';
-import { Button, Dropdown, Menu, Tooltip } from 'antd';
+import { Button, Dropdown, Tooltip } from 'antd';
import { useAppConfig, useBusinessAttributesFlag } from '../../useAppConfig';
import { ANTD_GRAY } from '../../entity/shared/constants';
import { HOME_PAGE_INGESTION_ID } from '../../onboarding/config/HomePageOnboardingConfig';
@@ -35,12 +35,6 @@ const LinksWrapper = styled.div<{ areLinksHidden?: boolean }>`
`}
`;
-const MenuItem = styled(Menu.Item)`
- font-size: 12px;
- font-weight: bold;
- max-width: 240px;
-`;
-
const NavTitleContainer = styled.span`
display: flex;
align-items: center;
@@ -50,6 +44,7 @@ const NavTitleContainer = styled.span`
const NavTitleText = styled.span`
margin-left: 6px;
+ font-weight: bold;
`;
const NavTitleDescription = styled.div`
@@ -79,6 +74,59 @@ export function HeaderLinks(props: Props) {
useToggleEducationStepIdsAllowList(!!showIngestion, HOME_PAGE_INGESTION_ID);
+ const items = [
+ {
+ key: 0,
+ label: (
+
+
+
+ Glossary
+
+ View and modify your data dictionary
+
+ ),
+ },
+ {
+ key: 1,
+ label: (
+
+
+
+ Domains
+
+ Manage related groups of data assets
+
+ ),
+ },
+ ...(businessAttributesFlag
+ ? [
+ {
+ key: 2,
+ label: (
+
+
+
+ Business Attribute
+
+ Universal field for data consistency
+
+ ),
+ },
+ ]
+ : []),
+ ];
+
return (
{showAnalytics && (
@@ -95,52 +143,7 @@ export function HeaderLinks(props: Props) {
)}
-
-
-
- {businessAttributesFlag && (
-
- )}
-
- }
- >
+