ui: fixed glossary badge feedback (#13588)

* ui: fixed glossary badge feedback

* updated style for glossaryterm

* updated style

openmetadata-ui/src/main/resources/ui/src/components/AsyncSelectList/AsyncSelectList.tsx

@@ -20,7 +20,7 @@ import {
   Typography,
 } from 'antd';
 import { AxiosError } from 'axios';
-import { debounce, isEmpty, isUndefined } from 'lodash';
+import { debounce, isEmpty, isUndefined, pick } from 'lodash';
 import { CustomTagProps } from 'rc-select/lib/BaseSelect';
 import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
 import Loader from '../../components/Loader/Loader';
@@ -153,6 +153,17 @@ const AsyncSelectList: FC<AsyncSelectListProps> = ({
 
     const { label, onClose } = data;
     const tagLabel = getTagDisplay(label as string);
+    const tag = {
+      tagFQN: selectedTag?.data.fullyQualifiedName,
+      ...pick(
+        selectedTag?.data,
+        'description',
+        'displayName',
+        'name',
+        'style',
+        'tagFQN'
+      ),
+    } as TagLabel;
 
     const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
       event.preventDefault();
@@ -177,7 +188,7 @@ const AsyncSelectList: FC<AsyncSelectListProps> = ({
     return (
       <TagsV1
         startWith={TAG_START_WITH.SOURCE_ICON}
-        tag={selectedTag?.data as TagLabel}
+        tag={tag}
         tagProps={tagProps}
       />
     );

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx

@@ -67,7 +67,7 @@ const EntityHeaderTitle = ({
           data-testid="entity-header-display-name"
           ellipsis={{ tooltip: true }}
           style={{ color: color ?? TEXT_COLOR }}>
-          {stringToHTML(displayName ?? name)}
+          {stringToHTML(displayName || name)}
           {openEntityInNewPage && (
             <IconExternalLink
               className="anticon vertical-baseline m-l-xss"

openmetadata-ui/src/main/resources/ui/src/components/Glossary/AddGlossaryTermForm/AddGlossaryTermForm.interface.ts

@@ -43,4 +43,5 @@ export interface GlossaryTermForm {
   mutuallyExclusive: boolean;
   tags: TagLabel[];
   owner: EntityReference;
+  style: GlossaryTerm['style'];
 }

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx

@@ -106,12 +106,22 @@ const GlossaryTermTab = ({
           const name = getEntityName(record);
 
           return (
-            <Link
+            <Space align="center">
-              className="cursor-pointer help-text"
+              {record.style?.iconURL && (
-              data-testid={name}
+                <img
-              to={getGlossaryPath(record.fullyQualifiedName || record.name)}>
+                  data-testid="tag-icon"
-              {name}
+                  src={record.style.iconURL}
-            </Link>
+                  width={16}
+                />
+              )}
+              <Link
+                className="cursor-pointer help-text"
+                data-testid={name}
+                style={{ color: record.style?.color }}
+                to={getGlossaryPath(record.fullyQualifiedName || record.name)}>
+                {name}
+              </Link>
+            </Space>
           );
         },
       },

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx

@@ -265,9 +265,11 @@ const GlossaryV1 = ({
           reviewers,
           owner,
           relatedTerms,
+          style,
         } = formData || {};
 
         newTermData.name = name;
+        newTermData.style = style;
         newTermData.displayName = displayName;
         newTermData.description = description;
         newTermData.synonyms = synonyms;

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx

@@ -45,6 +45,7 @@ import TagSelectForm from '../TagsSelectForm/TagsSelectForm.component';
 import TagsV1 from '../TagsV1/TagsV1.component';
 import TagsViewer from '../TagsViewer/TagsViewer';
 import { LayoutType } from '../TagsViewer/TagsViewer.interface';
+import './tags-container.style.less';
 import { TagsContainerV2Props } from './TagsContainerV2.interface';
 
 const TagsContainerV2 = ({
@@ -404,7 +405,7 @@ const TagsContainerV2 = ({
 
   return (
     <div
-      className="w-full"
+      className="w-full tags-container"
       data-testid={isGlossaryType ? 'glossary-container' : 'tags-container'}>
       {header}
       {tagBody}

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/tags-container.style.less

@@ -0,0 +1,17 @@
+/*
+ *  Copyright 2023 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+.tags-container {
+  .ant-select-selector {
+    padding-top: 4px;
+  }
+}