From 9b10d2a96f7f4138cf9e1a74e42ac9e8b8994290 Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Wed, 21 Jun 2023 09:14:14 -0700 Subject: [PATCH 1/2] 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 | 2 +- .../search/sidebar/useAggregationsQuery.ts | 26 ++++++++++++------- 4 files changed, 24 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 3c13b8786ca56..a8ede6a6fb1ee 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={ {showEnvironments - ? environmentAggregations.map((environmentAggregation) => ( + ? environmentAggregations?.map((environmentAggregation) => ( { )) - : platformAggregations.map((platformAggregation) => ( + : platformAggregations?.map((platformAggregation) => ( props.color}; + padding-right: 8px; `; const EnvironmentNode = () => { @@ -64,7 +65,7 @@ const EnvironmentNode = () => { } body={ - {platformAggregations.map((platformAggregation) => ( + {platformAggregations?.map((platformAggregation) => ( props.color}; + padding-right: 8px; `; 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 c72b027519cae..d50deb8a2d1b3 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, From 28c9edd25dec67d7f831570a470762cd3c910b1d Mon Sep 17 00:00:00 2001 From: Josh Eilers Date: Wed, 21 Jun 2023 12:53:31 -0700 Subject: [PATCH 2/2] harden code against possible missing platform entity --- datahub-web-react/src/app/search/filters/utils.tsx | 2 +- .../src/app/search/sidebar/useAggregationsQuery.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/datahub-web-react/src/app/search/filters/utils.tsx b/datahub-web-react/src/app/search/filters/utils.tsx index 6341f8c4c2bab..fbde71d6a2e9a 100644 --- a/datahub-web-react/src/app/search/filters/utils.tsx +++ b/datahub-web-react/src/app/search/filters/utils.tsx @@ -183,7 +183,7 @@ export function getFilterIconAndLabel( ) : ( entityRegistry.getIcon(EntityType.DataPlatform, size || 12, IconStyleType.ACCENT, ANTD_GRAY[9]) ); - label = entityRegistry.getDisplayName(EntityType.DataPlatform, filterEntity); + label = filterEntity ? entityRegistry.getDisplayName(EntityType.DataPlatform, filterEntity) : filterValue; } else if (filterField === BROWSE_PATH_V2_FILTER_NAME) { icon = ; label = getLastBrowseEntryFromFilterValue(filterValue); diff --git a/datahub-web-react/src/app/search/sidebar/useAggregationsQuery.ts b/datahub-web-react/src/app/search/sidebar/useAggregationsQuery.ts index d50deb8a2d1b3..a9dd383e192c1 100644 --- a/datahub-web-react/src/app/search/sidebar/useAggregationsQuery.ts +++ b/datahub-web-react/src/app/search/sidebar/useAggregationsQuery.ts @@ -62,8 +62,8 @@ const useAggregationsQuery = ({ facets, skip }: Props) => { ?.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); + const nameA = a.entity ? registry.getDisplayName(EntityType.DataPlatform, a.entity) : a.value; + const nameB = b.entity ? registry.getDisplayName(EntityType.DataPlatform, b.entity) : b.value; return nameA.localeCompare(nameB); });