fix(ui) Fix query tab filter dropdowns showing raw urns (#5230) (#13132)

datahub-web-react/src/app/searchV2/filters/__tests__/utils.test.tsx

@@ -21,8 +21,10 @@ import {
     canCreateViewFromFilters,
     isAnyOptionSelected,
     getStructuredPropFilterDisplayName,
+    getFilterDisplayName,
 } from '../utils';
 import { ENTITY_SUB_TYPE_FILTER_NAME } from '../../utils/constants';
+import { FieldType, FilterField } from '../types';
 
 describe('filter utils - getNewFilters', () => {
     it('should get the correct list of filters when adding filters where the filter field did not already exist', () => {
@@ -467,3 +469,23 @@ describe('filter utils - getStructuredPropFilterDisplayName', () => {
         ).toBe('test value for a rich text situation right here!');
     });
 });
+
+describe('filter utils - getFilterDisplayName', () => {
+    it('should return the displayName for an option if it exists', () => {
+        const option = { value: 'testValue', displayName: 'test name' };
+        const field: FilterField = { type: FieldType.ENUM, field: 'test', displayName: 'test' };
+        expect(getFilterDisplayName(option, field)).toBe('test name');
+    });
+
+    it('should return undefined if no display name and field is not a structured property filter', () => {
+        const option = { value: 'testValue' };
+        const field: FilterField = { type: FieldType.ENUM, field: 'structuredProperties.test', displayName: 'test' };
+        expect(getFilterDisplayName(option, field)).toBe('testValue');
+    });
+
+    it('should return the structured property value properly if this is a structured property filter (structured prop value is tested above)', () => {
+        const option = { value: 'testValue' };
+        const field: FilterField = { type: FieldType.ENUM, field: 'test', displayName: 'test' };
+        expect(getFilterDisplayName(option, field)).toBe(undefined);
+    });
+});

datahub-web-react/src/app/searchV2/filters/utils.tsx

@@ -52,7 +52,14 @@ import { EntityRegistry } from '../../../entityRegistryContext';
 import { ANTD_GRAY } from '../../entity/shared/constants';
 import { GetAutoCompleteMultipleResultsQuery } from '../../../graphql/search.generated';
 import { FACETS_TO_ENTITY_TYPES } from './constants';
-import { FieldType, FilterField, FilterOperatorType, FilterOptionType, FilterPredicate } from './types';
+import {
+    FieldType,
+    FilterField,
+    FilterOperatorType,
+    FilterOptionType,
+    FilterPredicate,
+    FilterValueOption,
+} from './types';
 import { capitalizeFirstLetterOnly, forcePluralize, pluralizeIfIrregular } from '../../shared/textUtil';
 import { convertBackendToFrontendOperatorType } from './operator/operator';
 import { ALL_FILTER_FIELDS, STRUCTURED_PROPERTY_FILTER } from './field/fields';
@@ -672,3 +679,13 @@ export function getIsDateRangeFilter(field: FilterField | FacetMetadata) {
     }
     return false;
 }
+
+export function getFilterDisplayName(option: FilterValueOption, field: FilterField) {
+    if (option.displayName) {
+        return option.displayName;
+    }
+
+    return field.field.startsWith(STRUCTURED_PROPERTIES_FILTER_NAME)
+        ? getStructuredPropFilterDisplayName(field.field, option.value)
+        : undefined;
+}

datahub-web-react/src/app/searchV2/filters/value/EnumValueMenu.tsx

@@ -5,8 +5,7 @@ import { useEntityRegistry } from '../../../useEntityRegistry';
 import OptionsDropdownMenu from '../OptionsDropdownMenu';
 import { deduplicateOptions, useFilterOptionsBySearchQuery, useLoadAggregationOptions } from './utils';
 import { OptionMenu } from './styledComponents';
-import { getStructuredPropFilterDisplayName, useFilterDisplayName } from '../utils';
+import { getFilterDisplayName, useFilterDisplayName } from '../utils';
-import { STRUCTURED_PROPERTIES_FILTER_NAME } from '../../utils/constants';
 
 interface Props {
     field: FilterField;
@@ -52,10 +51,7 @@ export default function EnumValueMenu({
                 value: option.value,
                 count: option.count,
                 entity: option.entity,
-                displayName:
+                displayName: getFilterDisplayName(option, field),
-                    option.displayName || field.field.startsWith(STRUCTURED_PROPERTIES_FILTER_NAME)
-                        ? getStructuredPropFilterDisplayName(field.field, option.value)
-                        : undefined,
             },
             entityRegistry,
             selectedFilterOptions: values.map((value) => {