diff --git a/datahub-web-react/src/app/entityV2/glossaryNode/ChildrenTab.tsx b/datahub-web-react/src/app/entityV2/glossaryNode/ChildrenTab.tsx
index 3c6cec14df..072a60fefb 100644
--- a/datahub-web-react/src/app/entityV2/glossaryNode/ChildrenTab.tsx
+++ b/datahub-web-react/src/app/entityV2/glossaryNode/ChildrenTab.tsx
@@ -1,14 +1,16 @@
-import React from 'react';
+import { Plus } from 'phosphor-react';
+import React, { useState } from 'react';
import styled from 'styled-components';
import { useEntityData } from '@app/entity/shared/EntityContext';
+import CreateGlossaryEntityModal from '@app/entity/shared/EntityDropdown/CreateGlossaryEntityModal';
import useGlossaryChildren from '@app/entityV2/glossaryNode/useGlossaryChildren';
import { sortGlossaryNodes } from '@app/entityV2/glossaryNode/utils';
import { sortGlossaryTerms } from '@app/entityV2/glossaryTerm/utils';
import EmptyGlossarySection from '@app/glossaryV2/EmptyGlossarySection';
import GlossaryEntitiesList from '@app/glossaryV2/GlossaryEntitiesList';
import { useEntityRegistry } from '@app/useEntityRegistry';
-import { SearchBar } from '@src/alchemy-components';
+import { Button, SearchBar, Tooltip } from '@src/alchemy-components';
import Loading from '@src/app/shared/Loading';
import { EntityType, GlossaryNode, GlossaryTerm } from '@types';
@@ -26,11 +28,34 @@ const LoadingWrapper = styled.div`
justify-content: center;
`;
+const StyledPlusOutlined = styled(Plus)`
+ font-size: 12px;
+`;
+
+const CreateButtonWrapper = styled.div`
+ display: flex;
+ gap: 8px;
+ margin-left: 16px;
+ flex-direction: row;
+`;
+
+const HeaderWrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ margin: 16px;
+`;
+
function ChildrenTab() {
const { entityData } = useEntityData();
const entityRegistry = useEntityRegistry();
const entityUrn = entityData?.urn;
- const { scrollRef, data, loading, searchQuery, setSearchQuery } = useGlossaryChildren({ entityUrn });
+
+ const { scrollRef, data, loading, searchQuery, setSearchQuery, refetch } = useGlossaryChildren({ entityUrn });
+
+ const [isCreateNodeModalVisible, setIsCreateNodeModalVisible] = useState(false);
+ const [isCreateTermModalVisible, setIsCreateTermModalVisible] = useState(false);
if (!entityData) return <>>;
@@ -43,32 +68,75 @@ function ChildrenTab() {
const hasTermsOrNodes = !!childNodes?.length || !!childTerms?.length;
- if (searchQuery || hasTermsOrNodes) {
- return (
-
-
+ {searchQuery || hasTermsOrNodes ? (
+
+
+
+ {hasTermsOrNodes && (
+
+
+
+
+
+
+
+
+ )}
+
+
+ {loading && (
+
+
+
+ )}
+
+
+ ) : (
+ setIsCreateTermModalVisible(true)}
+ onAddtermGroup={() => setIsCreateNodeModalVisible(true)}
/>
-
- {loading && (
-
-
-
- )}
-
-
- );
- }
+ )}
- return ;
+ {isCreateTermModalVisible && (
+ setIsCreateTermModalVisible(false)}
+ refetchData={refetch}
+ />
+ )}
+ {isCreateNodeModalVisible && (
+ setIsCreateNodeModalVisible(false)}
+ refetchData={refetch}
+ />
+ )}
+ >
+ );
}
export default ChildrenTab;
diff --git a/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx b/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx
index 51a7b34d59..5a3c66340f 100644
--- a/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx
+++ b/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx
@@ -12,7 +12,6 @@ import { SidebarAboutSection } from '@app/entityV2/shared/containers/profile/sid
import { SidebarOwnerSection } from '@app/entityV2/shared/containers/profile/sidebar/Ownership/sidebar/SidebarOwnerSection';
import StatusSection from '@app/entityV2/shared/containers/profile/sidebar/shared/StatusSection';
import { getDataForEntityType } from '@app/entityV2/shared/containers/profile/utils';
-import { EntityActionItem } from '@app/entityV2/shared/entity/EntityActions';
import SidebarNotesSection from '@app/entityV2/shared/sidebarSection/SidebarNotesSection';
import SidebarStructuredProperties from '@app/entityV2/shared/sidebarSection/SidebarStructuredProperties';
import { DocumentationTab } from '@app/entityV2/shared/tabs/Documentation/DocumentationTab';
@@ -109,9 +108,12 @@ class GlossaryNodeEntity implements Entity {
},
]}
sidebarSections={this.getSidebarSections()}
- headerActionItems={
- new Set([EntityActionItem.ADD_CHILD_GLOSSARY_NODE, EntityActionItem.ADD_CHILD_GLOSSARY_TERM])
- }
+ // NOTE: Hiding this for now as we've moved the actions to the content of ChildrenTab.tsx
+ // The buttons are too big and causes other actions to overflow.
+ // This component requires deeper refactoring to dynamically adapt to smaller screens.
+ // headerActionItems={
+ // new Set([EntityActionItem.ADD_CHILD_GLOSSARY_NODE, EntityActionItem.ADD_CHILD_GLOSSARY_TERM])
+ // }
headerDropdownItems={headerDropdownItems}
sidebarTabs={this.getSidebarTabs()}
/>
diff --git a/datahub-web-react/src/app/entityV2/glossaryNode/useGlossaryChildren.ts b/datahub-web-react/src/app/entityV2/glossaryNode/useGlossaryChildren.ts
index 07ba4bb646..951d369e7d 100644
--- a/datahub-web-react/src/app/entityV2/glossaryNode/useGlossaryChildren.ts
+++ b/datahub-web-react/src/app/entityV2/glossaryNode/useGlossaryChildren.ts
@@ -44,7 +44,11 @@ export default function useGlossaryChildren({ entityUrn, skip }: Props) {
const [searchData, setSearchData] = useState([]);
const [dataUrnsSet, setDataUrnsSet] = useState>(new Set());
const [data, setData] = useState([]);
- const { data: scrollData, loading } = useScrollAcrossEntitiesQuery({
+ const {
+ data: scrollData,
+ loading,
+ refetch,
+ } = useScrollAcrossEntitiesQuery({
variables: {
...getGlossaryChildrenScrollInput(entityUrn || '', scrollId),
},
@@ -140,5 +144,6 @@ export default function useGlossaryChildren({ entityUrn, skip }: Props) {
loading: loading || (shouldDoAutoComplete && autoCompleteLoading),
searchQuery,
setSearchQuery,
+ refetch,
};
}
diff --git a/datahub-web-react/src/app/glossaryV2/BusinessGlossaryPage.tsx b/datahub-web-react/src/app/glossaryV2/BusinessGlossaryPage.tsx
index 3e0661a8a5..2a3e3330bc 100644
--- a/datahub-web-react/src/app/glossaryV2/BusinessGlossaryPage.tsx
+++ b/datahub-web-react/src/app/glossaryV2/BusinessGlossaryPage.tsx
@@ -99,13 +99,12 @@ const BusinessGlossaryPage = () => {
)}
diff --git a/datahub-web-react/src/app/glossaryV2/EmptyGlossarySection.tsx b/datahub-web-react/src/app/glossaryV2/EmptyGlossarySection.tsx
index 70c7ded434..efa35f1fea 100644
--- a/datahub-web-react/src/app/glossaryV2/EmptyGlossarySection.tsx
+++ b/datahub-web-react/src/app/glossaryV2/EmptyGlossarySection.tsx
@@ -1,14 +1,8 @@
import { PlusOutlined } from '@ant-design/icons';
import { Button, Empty, Typography } from 'antd';
-import React, { useState } from 'react';
+import React from 'react';
import styled from 'styled-components/macro';
-import { useUserContext } from '@app/context/useUserContext';
-import { useEntityData } from '@app/entity/shared/EntityContext';
-import CreateGlossaryEntityModal from '@app/entityV2/shared/EntityDropdown/CreateGlossaryEntityModal';
-
-import { EntityType } from '@types';
-
const StyledEmpty = styled(Empty)`
padding: 80px 40px;
.ant-empty-footer {
@@ -25,20 +19,12 @@ const StyledButton = styled(Button)`
interface Props {
title?: string;
description?: string;
- refetchForTerms?: () => void;
- refetchForNodes?: () => void;
+ onAddTerm: () => void;
+ onAddtermGroup: () => void;
}
function EmptyGlossarySection(props: Props) {
- const { title, description, refetchForTerms, refetchForNodes } = props;
-
- const [isCreateTermModalVisible, setIsCreateTermModalVisible] = useState(false);
- const [isCreateNodeModalVisible, setIsCreateNodeModalVisible] = useState(false);
-
- const user = useUserContext();
- const canManageGlossaries = user?.platformPrivileges?.manageGlossaries;
- const { entityData } = useEntityData();
- const canCreateGlossaryEntity = !!entityData?.privileges?.canManageChildren || canManageGlossaries;
+ const { title, description, onAddTerm, onAddtermGroup } = props;
return (
<>
@@ -51,29 +37,13 @@ function EmptyGlossarySection(props: Props) {
}
>
{/* not disabled on acryl-main due to ability to propose */}
- setIsCreateTermModalVisible(true)}>
+
Add Term
- setIsCreateNodeModalVisible(true)}>
+
Add Term Group
- {isCreateTermModalVisible && (
- setIsCreateTermModalVisible(false)}
- refetchData={refetchForTerms}
- />
- )}
- {isCreateNodeModalVisible && (
- setIsCreateNodeModalVisible(false)}
- refetchData={refetchForNodes}
- />
- )}
>
);
}
diff --git a/datahub-web-react/src/app/glossaryV2/GlossaryContentProvider.tsx b/datahub-web-react/src/app/glossaryV2/GlossaryContentProvider.tsx
index fe711bfbe5..aff7a269bf 100644
--- a/datahub-web-react/src/app/glossaryV2/GlossaryContentProvider.tsx
+++ b/datahub-web-react/src/app/glossaryV2/GlossaryContentProvider.tsx
@@ -36,25 +36,23 @@ const ListWrapper = styled.div`
interface Props {
setIsCreateNodeModalVisible: React.Dispatch>;
+ setIsCreateTermModalVisible: React.Dispatch>;
hasTermsOrNodes: boolean;
nodes: (GlossaryNode | GlossaryNodeFragment)[];
terms: (GlossaryTerm | ChildGlossaryTermFragment)[];
termsLoading: boolean;
nodesLoading: boolean;
- refetchForTerms: () => void;
- refetchForNodes: () => void;
}
const GlossaryContentProvider = (props: Props) => {
const {
setIsCreateNodeModalVisible,
+ setIsCreateTermModalVisible,
hasTermsOrNodes,
nodes,
terms,
termsLoading,
nodesLoading,
- refetchForTerms,
- refetchForNodes,
} = props;
return (
@@ -84,8 +82,8 @@ const GlossaryContentProvider = (props: Props) => {
setIsCreateTermModalVisible(true)}
+ onAddtermGroup={() => setIsCreateNodeModalVisible(true)}
/>
)}