diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.test.tsx index c5cfaf5d1f7..32db4424595 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.test.tsx @@ -79,14 +79,17 @@ const aggregations = [ { key: 'PII.Sensitive', doc_count: 1, + label: 'Sensitive', }, { key: 'PersonalData.Personal', doc_count: 1, + label: 'Personal', }, { key: 'User.Address', doc_count: 1, + label: 'Address', }, ], }, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx index b778f9c1196..4622ccc736a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx @@ -21,6 +21,7 @@ import { LIST_SIZE, } from '../../../constants/constants'; import { checkSelected } from '../../../utils/FilterUtils'; +import { getTagsWithLabel } from '../../../utils/TagsUtils'; import { FacetProp } from './FacetTypes'; import FilterContainer from './FilterContainer'; @@ -115,8 +116,7 @@ const FacetFilter: FunctionComponent = ({ case 'Service': return getBuckets(buckets, showAllServices, true); case 'Tags': - return getBuckets(buckets, showAllTags, true); - + return getTagsWithLabel(getBuckets(buckets, showAllTags, true)); case 'Tier': return getBuckets(buckets, showAllTier); case 'Database': @@ -142,6 +142,7 @@ const FacetFilter: FunctionComponent = ({ bucket.key.replace(/ /g, '+') )} key={index} + label={bucket.label} name={bucket.key} type={toLower(aggregation.title) as keyof FilterObject} onSelect={onSelectHandler} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetTypes.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetTypes.ts index d59978c2d2b..d86c1afcdd3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetTypes.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetTypes.ts @@ -37,4 +37,5 @@ export type FilterContainerProp = { isSelected: boolean; type?: keyof FilterObject; isDisabled?: boolean; + label?: string; }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx index 1fd306d329f..f248edeaaa9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx @@ -25,6 +25,7 @@ const FilterContainer: FunctionComponent = ({ isSelected, type = '', isDisabled = false, + label, }: FilterContainerProp) => { const getFilterName = (name = '') => { const formattedName = name.startsWith(`Tier${FQN_SEPARATOR_CHAR}Tier`) @@ -33,7 +34,7 @@ const FilterContainer: FunctionComponent = ({ return ( - <>{formattedName} + <>{label || formattedName} ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts index 0813151a373..20e4bdc8bfe 100644 --- a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts +++ b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts @@ -155,6 +155,7 @@ declare module 'Models' { export type Bucket = { key: string; doc_count: number; + label?: string; }; type AggregationType = { title: string; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TagsUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/TagsUtils.ts index 567fee1cf42..b053e880a85 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/TagsUtils.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/TagsUtils.ts @@ -12,8 +12,8 @@ */ import { AxiosError } from 'axios'; -import { flatten } from 'lodash'; -import { EntityTags, TableColumn, TagOption } from 'Models'; +import { flatten, isEmpty } from 'lodash'; +import { Bucket, EntityTags, TableColumn, TagOption } from 'Models'; import { getCategory, getTags } from '../axiosAPIs/tagAPI'; import { TagCategory, TagClass } from '../generated/entity/tags/tagCategory'; import { LabelType, State, TagSource } from '../generated/type/tagLabel'; @@ -100,3 +100,15 @@ export const getTagOptions = (tags: Array): Array => { }; }); }; + +// Will add a label of value in the data object without it's FQN +export const getTagsWithLabel = (tags: Array) => { + return tags.map((tag) => { + const containQuotes = tag.key.split('"')[1]; + + return { + ...tag, + label: isEmpty(containQuotes) ? tag.key.split('.').pop() : containQuotes, + }; + }); +};