sort domains by name (datahub-project#1741)

chriscollins3456 · Sep 7, 2023 · b101f41 · b101f41
2 parents 7ce14da + 06ba5e8
commit b101f41
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/datahub-web-react/src/app/domain/nestedDomains/RootDomains.tsx b/datahub-web-react/src/app/domain/nestedDomains/RootDomains.tsx
@@ -19,15 +19,15 @@ const DomainsWrapper = styled.div`
 
 export default function RootDomains() {
     const entityRegistry = useEntityRegistry();
-    const { loading, error, data } = useListDomains({});
+    const { loading, error, data, sortedDomains } = useListDomains({});
 
     return (
         <>
             <RootDomainsHeader>Your Domains</RootDomainsHeader>
             {!data && loading && <Message type="loading" content="Loading domains..." />}
             {error && <Message type="error" content="Failed to load domains. An unexpected error occurred." />}
             <DomainsWrapper>
-                {data?.listDomains?.domains.map((domain) => (
+                {sortedDomains?.map((domain) => (
                     <ResultWrapper showUpdatedStyles>
                         {entityRegistry.renderSearchResult(EntityType.Domain, { entity: domain, matchedFields: [] })}
                     </ResultWrapper>

diff --git a/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNavigator.tsx b/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNavigator.tsx
@@ -18,12 +18,12 @@ interface Props {
 }
 
 export default function DomainNavigator({ domainUrnToHide, selectDomainOverride }: Props) {
-    const { data, error } = useListDomains({});
+    const { sortedDomains, error } = useListDomains({});
 
     return (
         <NavigatorWrapper>
             {error && <Alert message="Loading Domains failed." showIcon type="error" />}
-            {data?.listDomains?.domains.map((domain) => (
+            {sortedDomains?.map((domain) => (
                 <DomainNode
                     key={domain.urn}
                     domain={domain as Domain}

diff --git a/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNode.tsx b/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNode.tsx
@@ -76,7 +76,7 @@ export default function DomainNode({ domain, numDomainChildren, domainUrnToHide,
         initialValue: false,
         closeDelay: 250,
     });
-    const { data } = useListDomains({ parentDomain: domain.urn, skip: !isOpen || shouldHideDomain });
+    const { sortedDomains } = useListDomains({ parentDomain: domain.urn, skip: !isOpen || shouldHideDomain });
     const isOnEntityPage = entityData && entityData.urn === domain.urn;
     const displayName = entityRegistry.getDisplayName(domain.type, isOnEntityPage ? entityData : domain);
     const isInSelectMode = !!selectDomainOverride;
@@ -121,7 +121,7 @@ export default function DomainNode({ domain, numDomainChildren, domainUrnToHide,
             </RowWrapper>
             <StyledExpander isOpen={isOpen && !isClosing}>
                 <BodyContainer style={{ overflow: 'hidden' }}>
-                    {data?.listDomains?.domains.map((childDomain) => (
+                    {sortedDomains?.map((childDomain) => (
                         <DomainNode
                             key={domain.urn}
                             domain={childDomain as Domain}

diff --git a/datahub-web-react/src/app/domain/useListDomains.tsx b/datahub-web-react/src/app/domain/useListDomains.tsx
@@ -1,11 +1,13 @@
 import { useListDomainsQuery } from '../../graphql/domain.generated';
+import { useSortedDomains } from './utils';
 
 interface Props {
     parentDomain?: string;
     skip?: boolean;
+    sortBy?: 'displayName';
 }
 
-export default function useListDomains({ parentDomain, skip }: Props) {
+export default function useListDomains({ parentDomain, skip, sortBy = 'displayName' }: Props) {
     const { data, error, loading, refetch } = useListDomainsQuery({
         skip,
         variables: {
@@ -19,5 +21,7 @@ export default function useListDomains({ parentDomain, skip }: Props) {
         nextFetchPolicy: 'cache-first', // then use cache after that so we can manipulate it
     });
 
-    return { data, error, loading, refetch };
+    const sortedDomains = useSortedDomains(data?.listDomains?.domains, sortBy);
+
+    return { data, sortedDomains, error, loading, refetch };
 }
diff --git a/datahub-web-react/src/app/domain/utils.ts b/datahub-web-react/src/app/domain/utils.ts
@@ -2,10 +2,11 @@ import { ApolloClient } from '@apollo/client';
 import { useEffect } from 'react';
 import { isEqual } from 'lodash';
 import { ListDomainsDocument, ListDomainsQuery } from '../../graphql/domain.generated';
-import { EntityType } from '../../types.generated';
+import { Entity, EntityType } from '../../types.generated';
 import { GenericEntityProperties } from '../entity/shared/types';
 import usePrevious from '../shared/usePrevious';
 import { useDomainsContext } from './DomainsContext';
+import { useEntityRegistry } from '../useEntityRegistry';
 
 /**
  * Add an entry to the list domains cache.
@@ -126,3 +127,13 @@ export function useUpdateDomainEntityDataOnChange(entityData: GenericEntityPrope
         }
     });
 }
+
+export function useSortedDomains<T extends Entity>(domains?: Array<T>, sortBy?: 'displayName') {
+    const entityRegistry = useEntityRegistry();
+    if (!domains || !sortBy) return domains;
+    return [...domains].sort((a, b) => {
+        const nameA = entityRegistry.getDisplayName(EntityType.Domain, a) || '';
+        const nameB = entityRegistry.getDisplayName(EntityType.Domain, b) || '';
+        return nameA.localeCompare(nameB);
+    });
+}