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)} /> )}