Fix UI : Change tags label to Value and tooltip to it's FQN in Explorer Page (#7624)

* Change tags label to Value and tooltip to it's FQN in Explorer Page

* fix unit test issue

* fix unit test issue

* move function to tags utlis and added comments

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',
       },
     ],
   },

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<FacetProp> = ({
       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<FacetProp> = ({
                 bucket.key.replace(/ /g, '+')
               )}
               key={index}
+              label={bucket.label}
               name={bucket.key}
               type={toLower(aggregation.title) as keyof FilterObject}
               onSelect={onSelectHandler}

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;
 };

openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx

@@ -25,6 +25,7 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
   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<FilterContainerProp> = ({
 
     return (
       <PopOver position="top" title={formattedName} trigger="mouseenter">
-        <>{formattedName}</>
+        <>{label || formattedName}</>
       </PopOver>
     );
   };

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;

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<string>): Array<EntityTags> => {
     };
   });
 };
+
+// Will add a label of value in the data object without it's FQN
+export const getTagsWithLabel = (tags: Array<Bucket>) => {
+  return tags.map((tag) => {
+    const containQuotes = tag.key.split('"')[1];
+
+    return {
+      ...tag,
+      label: isEmpty(containQuotes) ? tag.key.split('.').pop() : containQuotes,
+    };
+  });
+};