From d4e84888d539493824e24818d20ed13daf1c2a49 Mon Sep 17 00:00:00 2001
From: Josh Eilers <josh.eilers@acryl.io>
Date: Wed, 21 Jun 2023 09:14:14 -0700
Subject: [PATCH] fix(browsev2): sort aggregations by display name

---
 .../src/app/search/sidebar/EntityNode.tsx     |  7 ++---
 .../app/search/sidebar/EnvironmentNode.tsx    |  3 ++-
 .../src/app/search/sidebar/PlatformNode.tsx   |  1 -
 .../search/sidebar/useAggregationsQuery.ts    | 26 ++++++++++++-------
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/datahub-web-react/src/app/search/sidebar/EntityNode.tsx b/datahub-web-react/src/app/search/sidebar/EntityNode.tsx
index 3c13b8786ca56a..a8ede6a6fb1ee6 100644
--- 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
index a34251408f2025..de01e131879101 100644
--- 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
index 74222819361cc3..8f1b79023c5b0e 100644
--- 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
index c72b027519caed..d50deb8a2d1b3d 100644
--- 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,