fix(ui) Fix UI flickering when switching between glossary entities (d…

…atahub-project#7432)
Gerrit-K · Mar 6, 2023 · 4f78de6 · 4f78de6
1 parent 036983c
commit 4f78de6
Show file tree

Hide file tree

Showing 23 changed files with 292 additions and 87 deletions.
diff --git a/datahub-web-react/src/app/SearchRoutes.tsx b/datahub-web-react/src/app/SearchRoutes.tsx
@@ -10,7 +10,7 @@ import { SearchPage } from './search/SearchPage';
 import { AnalyticsPage } from './analyticsDashboard/components/AnalyticsPage';
 import { ManageDomainsPage } from './domain/ManageDomainsPage';
 import { ManageIngestionPage } from './ingest/ManageIngestionPage';
-import BusinessGlossaryPage from './glossary/BusinessGlossaryPage';
+import GlossaryRoutes from './glossary/GlossaryRoutes';
 import { SettingsPage } from './settings/SettingsPage';
 
 /**
@@ -21,7 +21,7 @@ export const SearchRoutes = (): JSX.Element => {
     return (
         <SearchablePage>
             <Switch>
-                {entityRegistry.getEntities().map((entity) => (
+                {entityRegistry.getNonGlossaryEntities().map((entity) => (
                     <Route
                         key={entity.getPathName()}
                         path={`/${entity.getPathName()}/:urn`}
@@ -41,7 +41,7 @@ export const SearchRoutes = (): JSX.Element => {
                 <Route path={PageRoutes.DOMAINS} render={() => <ManageDomainsPage />} />
                 <Route path={PageRoutes.INGESTION} render={() => <ManageIngestionPage />} />
                 <Route path={PageRoutes.SETTINGS} render={() => <SettingsPage />} />
-                <Route path={PageRoutes.GLOSSARY} render={() => <BusinessGlossaryPage />} />
+                <GlossaryRoutes />
                 <Route component={NoPageFound} />
             </Switch>
         </SearchablePage>

diff --git a/datahub-web-react/src/app/entity/EntityRegistry.tsx b/datahub-web-react/src/app/entity/EntityRegistry.tsx
@@ -1,6 +1,7 @@
 import { Entity as EntityInterface, EntityType, SearchResult } from '../../types.generated';
 import { FetchedEntity } from '../lineage/types';
 import { Entity, EntityCapabilityType, IconStyleType, PreviewType } from './Entity';
+import { GLOSSARY_ENTITY_TYPES } from './shared/constants';
 import { GenericEntityProperties } from './shared/types';
 import { dictToQueryStringParams, urlEncodeUrn } from './shared/utils';
 
@@ -38,6 +39,14 @@ export default class EntityRegistry {
         return this.entities;
     }
 
+    getNonGlossaryEntities(): Array<Entity<any>> {
+        return this.entities.filter((entity) => !GLOSSARY_ENTITY_TYPES.includes(entity.type));
+    }
+
+    getGlossaryEntities(): Array<Entity<any>> {
+        return this.entities.filter((entity) => GLOSSARY_ENTITY_TYPES.includes(entity.type));
+    }
+
     getSearchEntityTypes(): Array<EntityType> {
         return this.entities.filter((entity) => entity.isSearchEnabled()).map((entity) => entity.type);
     }

diff --git a/datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx b/datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx
@@ -2,7 +2,6 @@ import { FolderFilled, FolderOutlined } from '@ant-design/icons';
 import React from 'react';
 import { useGetGlossaryNodeQuery } from '../../../graphql/glossaryNode.generated';
 import { EntityType, GlossaryNode, SearchResult } from '../../../types.generated';
-import GlossaryEntitiesPath from '../../glossary/GlossaryEntitiesPath';
 import { Entity, EntityCapabilityType, IconStyleType, PreviewType } from '../Entity';
 import { EntityProfile } from '../shared/containers/profile/EntityProfile';
 import { SidebarOwnerSection } from '../shared/containers/profile/sidebar/Ownership/SidebarOwnerSection';
@@ -56,8 +55,8 @@ class GlossaryNodeEntity implements Entity<GlossaryNode> {
                 entityType={EntityType.GlossaryNode}
                 useEntityQuery={useGetGlossaryNodeQuery}
                 getOverrideProperties={this.getOverridePropertiesFromEntity}
-                displayGlossaryBrowser
                 isNameEditable
+                hideBrowseBar
                 tabs={[
                     {
                         name: 'Contents',
@@ -82,7 +81,6 @@ class GlossaryNodeEntity implements Entity<GlossaryNode> {
                         component: SidebarOwnerSection,
                     },
                 ]}
-                customNavBar={<GlossaryEntitiesPath />}
                 headerDropdownItems={
                     new Set([
                         EntityMenuItems.ADD_TERM_GROUP,

diff --git a/datahub-web-react/src/app/entity/glossaryTerm/GlossaryTermEntity.tsx b/datahub-web-react/src/app/entity/glossaryTerm/GlossaryTermEntity.tsx
@@ -14,7 +14,6 @@ import { SidebarOwnerSection } from '../shared/containers/profile/sidebar/Owners
 import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab';
 import { DocumentationTab } from '../shared/tabs/Documentation/DocumentationTab';
 import { SidebarAboutSection } from '../shared/containers/profile/sidebar/AboutSection/SidebarAboutSection';
-import GlossaryEntitiesPath from '../../glossary/GlossaryEntitiesPath';
 import { EntityMenuItems } from '../shared/EntityDropdown/EntityDropdown';
 import { EntityActionItem } from '../shared/entity/EntityActions';
 import { SidebarDomainSection } from '../shared/containers/profile/sidebar/Domain/SidebarDomainSection';
@@ -68,8 +67,8 @@ export class GlossaryTermEntity implements Entity<GlossaryTerm> {
                 headerDropdownItems={
                     new Set([EntityMenuItems.UPDATE_DEPRECATION, EntityMenuItems.MOVE, EntityMenuItems.DELETE])
                 }
-                displayGlossaryBrowser
                 isNameEditable
+                hideBrowseBar
                 tabs={[
                     {
                         name: 'Documentation',
@@ -116,7 +115,6 @@ export class GlossaryTermEntity implements Entity<GlossaryTerm> {
                     },
                 ]}
                 getOverrideProperties={this.getOverridePropertiesFromEntity}
-                customNavBar={<GlossaryEntitiesPath />}
             />
         );
     };

diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/CreateGlossaryEntityModal.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/CreateGlossaryEntityModal.tsx
@@ -14,6 +14,8 @@ import { useEntityData, useRefetch } from '../EntityContext';
 import analytics, { EventType } from '../../../analytics';
 import DescriptionModal from '../components/legacy/DescriptionModal';
 import { validateCustomUrnId } from '../../../shared/textUtil';
+import { useGlossaryEntityData } from '../GlossaryEntityContext';
+import { getGlossaryRootToUpdate, updateGlossarySidebar } from '../../../glossary/utils';
 
 const StyledItem = styled(Form.Item)`
     margin-bottom: 0;
@@ -36,6 +38,7 @@ interface Props {
 function CreateGlossaryEntityModal(props: Props) {
     const { entityType, onClose, refetchData } = props;
     const entityData = useEntityData();
+    const { isInGlossaryContext, urnsToUpdate, setUrnsToUpdate } = useGlossaryEntityData();
     const [form] = Form.useForm();
     const entityRegistry = useEntityRegistry();
     const [stagedId, setStagedId] = useState<string | undefined>(undefined);
@@ -77,6 +80,11 @@ function CreateGlossaryEntityModal(props: Props) {
                         duration: 2,
                     });
                     refetch();
+                    if (isInGlossaryContext) {
+                        // either refresh this current glossary node or the root nodes or root terms
+                        const nodeToUpdate = entityData?.urn || getGlossaryRootToUpdate(entityType);
+                        updateGlossarySidebar([nodeToUpdate], urnsToUpdate, setUrnsToUpdate);
+                    }
                     if (refetchData) {
                         refetchData();
                     }

diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/EntityDropdown.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/EntityDropdown.tsx
@@ -71,7 +71,6 @@ interface Props {
     refetchForEntity?: () => void;
     refetchForTerms?: () => void;
     refetchForNodes?: () => void;
-    refreshBrowser?: () => void;
     onDeleteEntity?: () => void;
 }
 
@@ -84,7 +83,6 @@ function EntityDropdown(props: Props) {
         refetchForEntity,
         refetchForTerms,
         refetchForNodes,
-        refreshBrowser,
         onDeleteEntity: onDelete,
         size,
         options,
@@ -252,9 +250,7 @@ function EntityDropdown(props: Props) {
                     refetch={refetchForEntity}
                 />
             )}
-            {isMoveModalVisible && (
-                <MoveGlossaryEntityModal onClose={() => setIsMoveModalVisible(false)} refetchData={refreshBrowser} />
-            )}
+            {isMoveModalVisible && <MoveGlossaryEntityModal onClose={() => setIsMoveModalVisible(false)} />}
             {hasBeenDeleted && !onDelete && deleteRedirectPath && <Redirect to={deleteRedirectPath} />}
         </>
     );

diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/MoveGlossaryEntityModal.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/MoveGlossaryEntityModal.tsx
@@ -5,6 +5,8 @@ import { useEntityData, useRefetch } from '../EntityContext';
 import { useEntityRegistry } from '../../../useEntityRegistry';
 import { useUpdateParentNodeMutation } from '../../../../graphql/glossary.generated';
 import NodeParentSelect from './NodeParentSelect';
+import { useGlossaryEntityData } from '../GlossaryEntityContext';
+import { getGlossaryRootToUpdate, getParentNodeToUpdate, updateGlossarySidebar } from '../../../glossary/utils';
 
 const StyledItem = styled(Form.Item)`
     margin-bottom: 0;
@@ -16,12 +18,12 @@ const OptionalWrapper = styled.span`
 
 interface Props {
     onClose: () => void;
-    refetchData?: () => void;
 }
 
 function MoveGlossaryEntityModal(props: Props) {
-    const { onClose, refetchData } = props;
-    const { urn: entityDataUrn, entityType } = useEntityData();
+    const { onClose } = props;
+    const { urn: entityDataUrn, entityData, entityType } = useEntityData();
+    const { isInGlossaryContext, urnsToUpdate, setUrnsToUpdate } = useGlossaryEntityData();
     const [form] = Form.useForm();
     const entityRegistry = useEntityRegistry();
     const [selectedParentUrn, setSelectedParentUrn] = useState('');
@@ -46,8 +48,10 @@ function MoveGlossaryEntityModal(props: Props) {
                         duration: 2,
                     });
                     refetch();
-                    if (refetchData) {
-                        refetchData();
+                    if (isInGlossaryContext) {
+                        const oldParentToUpdate = getParentNodeToUpdate(entityData, entityType);
+                        const newParentToUpdate = selectedParentUrn || getGlossaryRootToUpdate(entityType);
+                        updateGlossarySidebar([oldParentToUpdate, newParentToUpdate], urnsToUpdate, setUrnsToUpdate);
                     }
                 }, 2000);
             })

diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/useDeleteEntity.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/useDeleteEntity.tsx
@@ -4,6 +4,8 @@ import { EntityType } from '../../../../types.generated';
 import { useEntityRegistry } from '../../../useEntityRegistry';
 import { getDeleteEntityMutation } from '../../../shared/deleteUtils';
 import analytics, { EventType } from '../../../analytics';
+import { useGlossaryEntityData } from '../GlossaryEntityContext';
+import { getParentNodeToUpdate, updateGlossarySidebar } from '../../../glossary/utils';
 
 /**
  * Performs the flow for deleting an entity of a given type.
@@ -22,6 +24,7 @@ function useDeleteEntity(
 ) {
     const [hasBeenDeleted, setHasBeenDeleted] = useState(false);
     const entityRegistry = useEntityRegistry();
+    const { isInGlossaryContext, urnsToUpdate, setUrnsToUpdate } = useGlossaryEntityData();
 
     const maybeDeleteEntity = getDeleteEntityMutation(type)();
     const deleteEntity = (maybeDeleteEntity && maybeDeleteEntity[0]) || undefined;
@@ -48,6 +51,10 @@ function useDeleteEntity(
                     () => {
                         setHasBeenDeleted(true);
                         onDelete?.();
+                        if (isInGlossaryContext) {
+                            const parentNodeToUpdate = getParentNodeToUpdate(entityData, type);
+                            updateGlossarySidebar([parentNodeToUpdate], urnsToUpdate, setUrnsToUpdate);
+                        }
                         if (!hideMessage) {
                             message.success({
                                 content: `Deleted ${entityRegistry.getEntityName(type)}!`,

diff --git a/datahub-web-react/src/app/entity/shared/GlossaryEntityContext.tsx b/datahub-web-react/src/app/entity/shared/GlossaryEntityContext.tsx
@@ -0,0 +1,27 @@
+import React, { useContext } from 'react';
+import { GenericEntityProperties } from './types';
+
+export interface GlossaryEntityContextType {
+    isInGlossaryContext: boolean;
+    entityData: GenericEntityProperties | null;
+    setEntityData: (entityData: GenericEntityProperties | null) => void;
+    // Since we have glossary data in the profile and in the sidebar browser, we need to communicate to the
+    // sidebar when to refetch for a given node or at the root level (if we're editing a term or node without a parent).
+    // This will happen when you edit a name, move a term/group, create a new term/group, and delete a term/group
+    urnsToUpdate: string[];
+    setUrnsToUpdate: (updatdUrns: string[]) => void;
+}
+
+export const GlossaryEntityContext = React.createContext<GlossaryEntityContextType>({
+    isInGlossaryContext: false,
+    entityData: null,
+    setEntityData: () => {},
+    urnsToUpdate: [],
+    setUrnsToUpdate: () => {},
+});
+
+export const useGlossaryEntityData = () => {
+    const { isInGlossaryContext, entityData, setEntityData, urnsToUpdate, setUrnsToUpdate } =
+        useContext(GlossaryEntityContext);
+    return { isInGlossaryContext, entityData, setEntityData, urnsToUpdate, setUrnsToUpdate };
+};
diff --git a/datahub-web-react/src/app/entity/shared/constants.ts b/datahub-web-react/src/app/entity/shared/constants.ts
@@ -84,6 +84,8 @@ export const ENTITY_TYPES_WITH_MANUAL_LINEAGE = new Set([
     EntityType.DataJob,
 ]);
 
+export const GLOSSARY_ENTITY_TYPES = [EntityType.GlossaryTerm, EntityType.GlossaryNode];
+
 export const DEFAULT_SYSTEM_ACTOR_URNS = ['urn:li:corpuser:__datahub_system', 'urn:li:corpuser:unknown'];
 
 export const VIEW_ENTITY_PAGE = 'VIEW_ENTITY_PAGE';
diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx
@@ -5,7 +5,12 @@ import styled from 'styled-components/macro';
 import { useHistory } from 'react-router';
 import { EntityType, Exact } from '../../../../../types.generated';
 import { Message } from '../../../../shared/Message';
-import { getEntityPath, getOnboardingStepIdsForEntityType, useRoutedTab } from './utils';
+import {
+    getEntityPath,
+    getOnboardingStepIdsForEntityType,
+    useRoutedTab,
+    useUpdateGlossaryEntityDataOnChange,
+} from './utils';
 import {
     EntitySidebarSection,
     EntitySubHeaderSection,
@@ -27,9 +32,6 @@ import DynamicTab from '../../tabs/Entity/weaklyTypedAspects/DynamicTab';
 import analytics, { EventType } from '../../../../analytics';
 import { ProfileSidebarResizer } from './sidebar/ProfileSidebarResizer';
 import { EntityMenuItems } from '../../EntityDropdown/EntityDropdown';
-import GlossaryBrowser from '../../../../glossary/GlossaryBrowser/GlossaryBrowser';
-import GlossarySearch from '../../../../glossary/GlossarySearch';
-import { BrowserWrapper, MAX_BROWSER_WIDTH, MIN_BROWSWER_WIDTH } from '../../../../glossary/BusinessGlossaryPage';
 import { useIsSeparateSiblingsMode } from '../../siblingUtils';
 import { EntityActionItem } from '../../entity/EntityActions';
 import { ErrorSection } from '../../../../shared/error/ErrorSection';
@@ -64,11 +66,10 @@ type Props<T, U> = {
     getOverrideProperties: (T) => GenericEntityProperties;
     tabs: EntityTab[];
     sidebarSections: EntitySidebarSection[];
-    customNavBar?: React.ReactNode;
     subHeader?: EntitySubHeaderSection;
     headerDropdownItems?: Set<EntityMenuItems>;
     headerActionItems?: Set<EntityActionItem>;
-    displayGlossaryBrowser?: boolean;
+    hideBrowseBar?: boolean;
     isNameEditable?: boolean;
 };
 
@@ -150,11 +151,10 @@ export const EntityProfile = <T, U>({
     getOverrideProperties,
     tabs,
     sidebarSections,
-    customNavBar,
     headerDropdownItems,
     headerActionItems,
-    displayGlossaryBrowser,
     isNameEditable,
+    hideBrowseBar,
     subHeader,
 }: Props<T, U>): JSX.Element => {
     const isLineageMode = useIsLineageMode();
@@ -169,17 +169,10 @@ export const EntityProfile = <T, U>({
     }));
 
     const [sidebarWidth, setSidebarWidth] = useState(window.innerWidth * 0.25);
-    const [browserWidth, setBrowserWith] = useState(window.innerWidth * 0.2);
-    const [shouldUpdateBrowser, setShouldUpdateBrowser] = useState(false);
     const entityStepIds: string[] = getOnboardingStepIdsForEntityType(entityType);
     const lineageGraphStepIds: string[] = [LINEAGE_GRAPH_INTRO_ID, LINEAGE_GRAPH_TIME_FILTER_ID];
     const stepIds = isLineageMode ? lineageGraphStepIds : entityStepIds;
 
-    function refreshBrowser() {
-        setShouldUpdateBrowser(true);
-        setTimeout(() => setShouldUpdateBrowser(false), 0);
-    }
-
     const routeToTab = useCallback(
         ({
             tabName,
@@ -206,6 +199,8 @@ export const EntityProfile = <T, U>({
     const { entityData, dataPossiblyCombinedWithSiblings, dataNotCombinedWithSiblings, loading, error, refetch } =
         useGetDataForProfile({ urn, entityType, useEntityQuery, getOverrideProperties });
 
+    useUpdateGlossaryEntityDataOnChange(entityData, entityType);
+
     const maybeUpdateEntity = useUpdateQuery?.({
         onCompleted: () => refetch(),
     });
@@ -283,7 +278,7 @@ export const EntityProfile = <T, U>({
 
     const isBrowsable = entityRegistry.getBrowseEntityTypes().includes(entityType);
     const isLineageEnabled = entityRegistry.getLineageEntityTypes().includes(entityType);
-    const showBrowseBar = isBrowsable || isLineageEnabled;
+    const showBrowseBar = (isBrowsable || isLineageEnabled) && !hideBrowseBar;
 
     return (
         <EntityContext.Provider
@@ -303,8 +298,7 @@ export const EntityProfile = <T, U>({
             <>
                 <OnboardingTour stepIds={stepIds} />
                 <EntityHead />
-                {customNavBar}
-                {showBrowseBar && !customNavBar && <EntityProfileNavBar urn={urn} entityType={entityType} />}
+                {showBrowseBar && <EntityProfileNavBar urn={urn} entityType={entityType} />}
                 {entityData?.status?.removed === true && (
                     <Alert
                         message="This entity is not discoverable via search or lineage graph. Contact your DataHub admin for more information."
@@ -318,23 +312,6 @@ export const EntityProfile = <T, U>({
                             <LineageExplorer type={entityType} urn={urn} />
                         ) : (
                             <>
-                                {displayGlossaryBrowser && (
-                                    <>
-                                        <BrowserWrapper width={browserWidth}>
-                                            <GlossarySearch />
-                                            <GlossaryBrowser openToEntity refreshBrowser={shouldUpdateBrowser} />
-                                        </BrowserWrapper>
-                                        <ProfileSidebarResizer
-                                            setSidePanelWidth={(width) =>
-                                                setBrowserWith(
-                                                    Math.min(Math.max(width, MIN_BROWSWER_WIDTH), MAX_BROWSER_WIDTH),
-                                                )
-                                            }
-                                            initialSize={browserWidth}
-                                            isSidebarOnLeft
-                                        />
-                                    </>
-                                )}
                                 <HeaderAndTabs>
                                     <HeaderAndTabsFlex>
                                         <Header>
@@ -343,7 +320,6 @@ export const EntityProfile = <T, U>({
                                                 headerActionItems={headerActionItems}
                                                 isNameEditable={isNameEditable}
                                                 subHeader={subHeader}
-                                                refreshBrowser={refreshBrowser}
                                             />
                                             <EntityTabs tabs={visibleTabs} selectedTab={routedTab} />
                                         </Header>