fix(browsev2): sort aggregations by display name

datahub-project · Jun 21, 2023 · d4e8488 · d4e8488
1 parent af6973e
commit d4e8488
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 14 deletions.
diff --git a/datahub-web-react/src/app/search/sidebar/EntityNode.tsx b/datahub-web-react/src/app/search/sidebar/EntityNode.tsx
@@ -46,7 +46,8 @@ const EntityNode = () => {
     });
 
     const showEnvironments =
-        environmentAggregations.length > 1 || (hasEnvironmentFilter && !!environmentAggregations.length);
+        environmentAggregations &&
+        (environmentAggregations.length > 1 || (hasEnvironmentFilter && !!environmentAggregations.length));
     const color = count > 0 ? '#000' : ANTD_GRAY[8];
 
     return (
@@ -75,7 +76,7 @@ const EntityNode = () => {
             body={
                 <ExpandableNode.Body>
                     {showEnvironments
-                        ? environmentAggregations.map((environmentAggregation) => (
+                        ? environmentAggregations?.map((environmentAggregation) => (
                               <BrowseProvider
                                   key={environmentAggregation.value}
                                   entityAggregation={entityAggregation}
@@ -84,7 +85,7 @@ const EntityNode = () => {
                                   <EnvironmentNode />
                               </BrowseProvider>
                           ))
-                        : platformAggregations.map((platformAggregation) => (
+                        : platformAggregations?.map((platformAggregation) => (
                               <BrowseProvider
                                   key={platformAggregation.value}
                                   entityAggregation={entityAggregation}

diff --git a/datahub-web-react/src/app/search/sidebar/EnvironmentNode.tsx b/datahub-web-react/src/app/search/sidebar/EnvironmentNode.tsx
@@ -19,6 +19,7 @@ import useSidebarAnalytics from './useSidebarAnalytics';
 const Count = styled(Typography.Text)`
     font-size: 12px;
     color: ${(props) => props.color};
+    padding-right: 8px;
 `;
 
 const EnvironmentNode = () => {
@@ -64,7 +65,7 @@ const EnvironmentNode = () => {
             }
             body={
                 <ExpandableNode.Body>
-                    {platformAggregations.map((platformAggregation) => (
+                    {platformAggregations?.map((platformAggregation) => (
                         <BrowseProvider
                             key={platformAggregation.value}
                             entityAggregation={entityAggregation}

diff --git a/datahub-web-react/src/app/search/sidebar/PlatformNode.tsx b/datahub-web-react/src/app/search/sidebar/PlatformNode.tsx
@@ -33,7 +33,6 @@ const Count = styled(Typography.Text)`
 const BrowseGroupListContainer = styled.div`
     background: white;
     border-radius: 8px;
-    padding-bottom: 8px;
     padding-right: 8px;
 `;
 

diff --git a/datahub-web-react/src/app/search/sidebar/useAggregationsQuery.ts b/datahub-web-react/src/app/search/sidebar/useAggregationsQuery.ts
@@ -47,17 +47,25 @@ const useAggregationsQuery = ({ facets, skip }: Props) => {
             const type = aggregation.value as EntityType;
             return registry.getEntity(type).isBrowseEnabled() && !GLOSSARY_ENTITY_TYPES.includes(type);
         })
-        .sort((a, b) => a.value.localeCompare(b.value));
+        .sort((a, b) => {
+            const nameA = registry.getCollectionName(a.value as EntityType);
+            const nameB = registry.getCollectionName(b.value as EntityType);
+            return nameA.localeCompare(nameB);
+        });
 
-    const environmentAggregations =
-        data?.aggregateAcrossEntities?.facets
-            ?.find((facet) => facet.field === ORIGIN_FILTER_NAME)
-            ?.aggregations.filter((aggregation) => aggregation.count) ?? [];
+    const environmentAggregations = data?.aggregateAcrossEntities?.facets
+        ?.find((facet) => facet.field === ORIGIN_FILTER_NAME)
+        ?.aggregations.filter((aggregation) => aggregation.count)
+        .sort((a, b) => a.value.localeCompare(b.value));
 
-    const platformAggregations =
-        data?.aggregateAcrossEntities?.facets
-            ?.find((facet) => facet.field === PLATFORM_FILTER_NAME)
-            ?.aggregations.filter((aggregation) => aggregation.count) ?? [];
+    const platformAggregations = data?.aggregateAcrossEntities?.facets
+        ?.find((facet) => facet.field === PLATFORM_FILTER_NAME)
+        ?.aggregations.filter((aggregation) => aggregation.count)
+        .sort((a, b) => {
+            const nameA = registry.getDisplayName(EntityType.DataPlatform, a.entity);
+            const nameB = registry.getDisplayName(EntityType.DataPlatform, b.entity);
+            return nameA.localeCompare(nameB);
+        });
 
     return {
         loading,