From 3f19dbdbfd7c32411d25071e5d697ec785932dfa Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Mon, 6 Nov 2023 16:09:40 +0530
Subject: [PATCH 1/5] fix(chore): change errorplaceholder in explore and added
 tooltip around url style url

---
 .../StyleModal/StyleModal.component.tsx       | 23 +++++++++++++++++--
 .../ErrorPlaceHolderES.tsx                    | 13 +++++++++--
 .../ui/src/locale/languages/de-de.json        |  4 +++-
 .../ui/src/locale/languages/en-us.json        |  4 +++-
 .../ui/src/locale/languages/es-es.json        |  4 +++-
 .../ui/src/locale/languages/fr-fr.json        |  4 +++-
 .../ui/src/locale/languages/ja-jp.json        |  4 +++-
 .../ui/src/locale/languages/pt-br.json        |  4 +++-
 .../ui/src/locale/languages/ru-ru.json        |  4 +++-
 .../ui/src/locale/languages/zh-cn.json        |  4 +++-
 .../resources/ui/src/utils/CommonUtils.tsx    |  7 ++++--
 11 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx
index 0f32a271a601..0f6dd5b0fb56 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx
@@ -10,11 +10,13 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Form, FormProps, Input, Modal } from 'antd';
+import { Form, FormProps, Input, Modal, Tooltip } from 'antd';
 
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { isUndefined, omit } from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { GRAYED_OUT_COLOR } from '../../../constants/constants';
 import { HEX_COLOR_CODE_REGEX } from '../../../constants/regex.constants';
 import ColorPicker from '../../common/ColorPicker/ColorPicker.component';
 import { StyleModalProps, StyleWithInput } from './StyleModal.interface';
@@ -22,6 +24,7 @@ import { StyleModalProps, StyleWithInput } from './StyleModal.interface';
 const StyleModal = ({ open, onCancel, onSubmit, style }: StyleModalProps) => {
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const popupRef = React.useRef<HTMLElement>(null);
 
   const handleSubmit: FormProps<StyleWithInput>['onFinish'] = (value) => {
     onSubmit(omit(value, 'colorInput'));
@@ -55,7 +58,23 @@ const StyleModal = ({ open, onCancel, onSubmit, style }: StyleModalProps) => {
             form.setFieldValue('color', value.colorInput);
           }
         }}>
-        <Form.Item label={t('label.icon-url')} name="iconURL">
+        <Form.Item
+          label={
+            <>
+              {t('label.icon-url')}
+              <Tooltip
+                align={{ targetOffset: [18, 0] }}
+                placement="topLeft"
+                title={t('message.glossary-url-size-message')}>
+                <InfoCircleOutlined
+                  className="m-x-xss"
+                  data-testid="glossary-url"
+                  style={{ color: GRAYED_OUT_COLOR }}
+                />
+              </Tooltip>
+            </>
+          }
+          name="iconURL">
           <Input
             data-testid="icon-url"
             placeholder={t('label.enter-entity', {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx
index 87b9af16e32a..94881c3aaae8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx
@@ -32,6 +32,7 @@ import {
 } from '../../../enums/common.enum';
 import { Transi18next } from '../../../utils/CommonUtils';
 import i18n from '../../../utils/i18next/LocalUtil';
+import { useDomainProvider } from '../../Domain/DomainProvider/DomainProvider';
 import ErrorPlaceHolder from './ErrorPlaceHolder';
 
 type Props = {
@@ -72,6 +73,7 @@ const ErrorPlaceHolderES = ({ type, errorMessage, query }: Props) => {
   const { tab } = useParams<{ tab: string }>();
   const { t } = useTranslation();
   const history = useHistory();
+  const { activeDomain } = useDomainProvider();
 
   const isQuery = useMemo(
     () =>
@@ -97,9 +99,16 @@ const ErrorPlaceHolderES = ({ type, errorMessage, query }: Props) => {
             }
           />
         ) : (
-          <ErrorPlaceHolder>
+          <ErrorPlaceHolder type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
             <Typography.Paragraph style={{ marginBottom: '0' }}>
-              {t('message.add-service-connection')}
+              {t('message.no-data-available-entity', {
+                entity: activeDomain,
+              })}
+            </Typography.Paragraph>
+            <Typography.Paragraph style={{ marginBottom: '0' }}>
+              {t('message.add-data-asset-domain', {
+                domain: activeDomain,
+              })}
             </Typography.Paragraph>
             <Typography.Paragraph>
               <Transi18next
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
index 0cdc863b719a..f55d1c6a4d20 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
@@ -1149,12 +1149,12 @@
     "action-has-been-done-but-deploy-successfully": "{{action}} wurde erfolgreich durchgeführt und bereitgestellt.",
     "action-has-been-done-but-failed-to-deploy": "{{action}} wurde durchgeführt, aber die Bereitstellung ist fehlgeschlagen.",
     "active-users": "Zeigen Sie die Anzahl der aktiven Benutzer an.",
+    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Identifizieren Sie die Key Performance Indicators (KPIs), die den Zustand Ihrer Datenvermögenswerte am besten widerspiegeln. Überprüfen Sie Ihre Datenvermögenswerte anhand von Beschreibung, Eigentum und Stufe. Definieren Sie Ihre Zielmetriken absolut oder prozentual, um Ihren Fortschritt zu verfolgen. Legen Sie schließlich ein Start- und Enddatum fest, um Ihre Datenziele zu erreichen.",
     "add-new-service-description": "Wählen Sie aus dem Bereich der Dienste aus, die OpenMetadata integriert. Um einen neuen Dienst hinzuzufügen, wählen Sie zunächst eine Dienstkategorie (Datenbank, Messaging, Dashboard oder Pipeline) aus. Wählen Sie aus der Liste der verfügbaren Dienste denjenigen aus, den Sie integrieren möchten.",
     "add-policy-message": "Richtlinien werden Teams zugewiesen. In OpenMetadata ist eine Richtlinie eine Sammlung von Regeln, die den Zugriff basierend auf bestimmten Bedingungen definieren. Wir unterstützen reichhaltige SpEL (Spring Expression Language)-basierte Bedingungen. Alle von einer Entität unterstützten Operationen werden veröffentlicht. Verwenden Sie diese feinkörnigen Operationen, um die bedingten Regeln für jede Richtlinie zu definieren. Erstellen Sie gut definierte Richtlinien basierend auf bedingten Regeln, um umfangreiche Zugriffssteuerungsrollen zu erstellen.",
     "add-query-helper-message": "Fügen Sie eine SQL-Abfrage zur Ausführung in der Datenbank hinzu. Die gleiche Abfrage kann mehreren Tabellen hinzugefügt werden, indem Sie aus den Tabellen in der Option 'Verwendete Abfrage' auswählen. Wählen Sie aus, Ihre Abfrage für zukünftige Referenz zu beschreiben.",
     "add-role-message": "Rollen werden Benutzern zugewiesen. In OpenMetadata sind Rollen Sammlungen von Richtlinien. Jede Rolle muss mindestens eine Richtlinie angehängt haben. Eine Rolle unterstützt mehrere Richtlinien mit einer Eins-zu-vielen-Beziehung. Stellen Sie sicher, dass die erforderlichen Richtlinien erstellt sind, bevor Sie eine neue Rolle erstellen. Erstellen Sie umfangreiche Zugriffssteuerungsrollen mit gut definierten Richtlinien basierend auf bedingten Regeln.",
-    "add-service-connection": "Beginnen Sie damit, eine Dienstverbindung hinzuzufügen, um Daten in OpenMetadata einzuführen.",
     "adding-new-entity-is-easy-just-give-it-a-spin": "Das Hinzufügen einer neuen {{entity}} ist einfach, probieren Sie es einfach aus!",
     "adding-new-tag": "Neuen Tag zu {{categoryName}} hinzufügen",
     "adding-new-user-to-entity": "Neue Benutzer zu {{entity}} hinzufügen",
@@ -1330,6 +1330,7 @@
     "get-started-with-open-metadata": "Erste Schritte mit OpenMetadata",
     "glossary-term-description": "Jeder Begriff im Glossar hat eine eindeutige Definition. Neben der Definition des Standardbegriffs für ein Konzept können auch Synonyme sowie verwandte Begriffe (z. B. übergeordnete und untergeordnete Begriffe) angegeben werden. Es können Referenzen zu den Assets hinzugefügt werden, die sich auf die Begriffe beziehen. Neue Begriffe können dem Glossar hinzugefügt oder aktualisiert werden. Die Glossarbegriffe können von bestimmten Benutzern überprüft werden, die die Begriffe akzeptieren oder ablehnen können.",
     "glossary-term-status": "Glossary Term was {{status}}.",
+    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Zurück zur Anmeldeseite",
     "group-team-type-change-message": "Der Teamtyp 'Gruppe' kann nicht geändert werden. Erstellen Sie bitte ein neues Team mit dem gewünschten Typ.",
     "group-type-team-not-allowed-to-have-sub-team": "Teams, die als Gruppen-Typ klassifiziert sind, dürfen keine Unterteams in ihrer Struktur haben.",
@@ -1388,6 +1389,7 @@
     "no-config-available": "Keine Verbindungskonfigurationen verfügbar.",
     "no-data": "Keine Daten",
     "no-data-available": "Keine Daten verfügbar.",
+    "no-data-available-entity": "No data is available in the {{entity}}.",
     "no-data-available-for-selected-filter": "Keine Daten gefunden. Versuchen Sie, die Filter zu ändern.",
     "no-domain-assigned-to-entity": "No Domains are Assigned to {{entity}}",
     "no-domain-available": "No Domains are available to configure. Click on <0>{{link}}</0> to add Domains",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
index ccbb26bbbe21..c4e5fc747b40 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
@@ -1149,12 +1149,12 @@
     "action-has-been-done-but-deploy-successfully": "has been {{action}} and deployed successfully",
     "action-has-been-done-but-failed-to-deploy": "has been {{action}}, but failed to deploy",
     "active-users": "Display the number of active users.",
+    "add-data-asset-domain": "Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Identify the Key Performance Indicators (KPI) that best reflect the health of your data assets. Review your data assets based on Description, Ownership, and Tier. Define your target metrics in absolute or percentage to track your progress. Finally, set a start and end date to achieve your data goals.",
     "add-new-service-description": "Choose from the range of services that OpenMetadata integrates with. To add a new service, start by selecting a Service Category (Database, Messaging, Dashboard, or Pipeline). From the list of available services, select the one you'd want to integrate with.",
     "add-policy-message": "Policies are assigned to teams. In OpenMetadata, a policy is a collection of rules, which define access based on certain conditions. We support rich SpEL (Spring Expression Language) based conditions. All the operations supported by an entity are published. Use these fine grained operations to define the conditional rules for each policy. Create well-defined policies based on conditional rules to build rich access control roles.",
     "add-query-helper-message": "Add a SQL query to execute in the database. The same query can be added to multiple tables by selecting from the tables in the option ‘Query used in’. Choose to describe your query for future reference.",
     "add-role-message": "Roles are assigned to Users. In OpenMetadata, Roles are a collection of Policies. Each Role must have at least one policy attached to it. A Role supports multiple policies with a one to many relationship. Ensure that the necessary policies are created before creating a new role. Build rich access control roles with well-defined policies based on conditional rules.",
-    "add-service-connection": "Start by adding a service connection to ingest data into OpenMetadata.",
     "adding-new-entity-is-easy-just-give-it-a-spin": "Adding a new {{entity}} is easy, just give it a spin!",
     "adding-new-tag": "Adding new tag on {{categoryName}}",
     "adding-new-user-to-entity": "Adding new users to {{entity}}",
@@ -1330,6 +1330,7 @@
     "get-started-with-open-metadata": "Get started with OpenMetadata",
     "glossary-term-description": "Every term in the glossary has a unique definition. Along with defining the standard term for a concept, the synonyms as well as related terms (for e.g., parent and child terms) can be specified. References can be added to the assets related to the terms. New terms can be added or updated to the Glossary. The glossary terms can be reviewed by certain users, who can accept or reject the terms.",
     "glossary-term-status": "Glossary Term was {{status}}.",
+    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Go back to Login page",
     "group-team-type-change-message": "The team type 'Group' cannot be changed. Please create a new team with the preferred type.",
     "group-type-team-not-allowed-to-have-sub-team": "Teams classified as Group type are not permitted to have any sub-teams within their structure.",
@@ -1388,6 +1389,7 @@
     "no-config-available": "No Connection Configs available.",
     "no-data": "No data",
     "no-data-available": "No data available.",
+    "no-data-available-entity": "No data is available in the {{entity}}.",
     "no-data-available-for-selected-filter": "No data found. Try changing the filters.",
     "no-domain-assigned-to-entity": "No Domains are Assigned to {{entity}}",
     "no-domain-available": "No Domains are available to configure. Click on <0>{{link}}</0> to add Domains",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
index 8c1a72672213..99180bea6b3a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
@@ -1149,12 +1149,12 @@
     "action-has-been-done-but-deploy-successfully": "se ha {{action}} y se ha deployado correctamente",
     "action-has-been-done-but-failed-to-deploy": "se ha {{action}}, pero no se ha podido deployar",
     "active-users": "Mostrar el número de usuarios activos.",
+    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Identifique los Indicadores Clave de Rendimiento (KPI) que mejor reflejen la salud de sus activos de datos. Revise sus activos de datos según su Descripción, Propiedad y Nivel. Defina sus métricas objetivas en valor absoluto o porcentaje para realizar un seguimiento de su progreso. Por último, establezca una fecha de inicio y de finalización para alcanzar sus objetivos de datos.",
     "add-new-service-description": "Elija entre la gama de servicios con los que se integra OpenMetadata. Para añadir un nuevo servicio, comience seleccionando una Categoría de Servicio (Base de datos, Streaming, Dashboards o Pipelines). De la lista de servicios disponibles, seleccione el que desea ingestar.",
     "add-policy-message": "Las políticas se asignan a los equipos. En OpenMetadata, una política es una colección de reglas que definen el acceso en función de ciertas condiciones. Admitimos condiciones ricas basadas en SpEL (Lenguaje de Expresión de Spring). Todas las operaciones admitidas por una entidad se publican. Utilice estas operaciones finamente detalladas para definir las reglas condicionales para cada política. Cree políticas bien definidas basadas en reglas condicionales para construir roles de control de acceso ricos.",
     "add-query-helper-message": "Add a SQL query to execute in the database. The same query can be added to multiple tables by selecting from the tables in the option ‘Query used in’. Choose to describe your query for future reference.",
     "add-role-message": "Los roles se asignan a los usuarios. En OpenMetadata, los Roles son una colección de Políticas. Cada rol debe tener al menos una política adjunta a él. Un Rol admite varias políticas con una relación de uno a muchos. Asegúrese de que se hayan creado las políticas necesarias antes de crear un nuevo rol. Cree roles de control de acceso ricos con políticas bien definidas basadas en reglas condicionales.",
-    "add-service-connection": "Comienza añadiendo una conexión de servicio para ingestar datos en OpenMetadata.",
     "adding-new-entity-is-easy-just-give-it-a-spin": "Añadir una nueva {{entity}} es fácil, ¡pruébalo!",
     "adding-new-tag": "Añadir nueva etiqueta en {{categoryName}}",
     "adding-new-user-to-entity": "Añadir nuevos usuarios a {{entity}}",
@@ -1330,6 +1330,7 @@
     "get-started-with-open-metadata": "Empezar con OpenMetadata",
     "glossary-term-description": "Cada término en el glosario tiene una definición única. Además de definir el término estándar para un concepto, se pueden especificar sinónimos y términos relacionados (por ejemplo, términos padre e hijo). Se pueden agregar referencias a los activos relacionados con los términos. Se pueden agregar o actualizar nuevos términos al glosario. Los términos del glosario pueden ser revisados por ciertos usuarios, quienes pueden aceptar o rechazar los términos.",
     "glossary-term-status": "Glossary Term was {{status}}.",
+    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Volver a la página de inicio de sesión",
     "group-team-type-change-message": "El tipo de equipo 'Grupo' no se puede cambiar. Por favor, cree un nuevo equipo con el tipo preferido.",
     "group-type-team-not-allowed-to-have-sub-team": "Teams classified as Group type are not permitted to have any sub-teams within their structure.",
@@ -1388,6 +1389,7 @@
     "no-config-available": "No hay configuraciones de conexión disponibles.",
     "no-data": "No hay datos",
     "no-data-available": "No hay datos disponibles.",
+    "no-data-available-entity": "No data is available in the {{entity}}.",
     "no-data-available-for-selected-filter": "No se encontraron datos. Intenta cambiar los filtros.",
     "no-domain-assigned-to-entity": "No Domains are Assigned to {{entity}}",
     "no-domain-available": "No Domains are available to configure. Click on <0>{{link}}</0> to add Domains",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
index 15304cc0e932..4692109466b1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
@@ -1149,12 +1149,12 @@
     "action-has-been-done-but-deploy-successfully": "{{action}} avec succès et déployé avec succès",
     "action-has-been-done-but-failed-to-deploy": "{{action}} avec succès, mais n'a pu être déployé",
     "active-users": "Montre le nombre d'utilisateurs actifs.",
+    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Identifiez les Key Performance Indicators (KPI) qui représentent le mieux la santé de votre plateforme. Évaluez vos ressources de données selon la Description, la Propriété et le Rang. Définissez les indicateurs en pourcentage ou en absolu pour suivre vos progrès. Enfin, ajoutez une date de début et de fin pour l'accomplissement de vos objectifs",
     "add-new-service-description": "Choisissez le service que vous souhaitez intégrer à OpenMetadata. Pour ajouter un nouveau service, commencez par sélectionner une catégorie de service (base de données, messagerie, tableau de bord ou pipeline). Dans la liste des services disponibles, sélectionnez celui que vous souhaitez intégrer.",
     "add-policy-message": "Les stratégies sont attribuées aux équipes. Dans OpenMetadata, une police est une collection de règles qui définissent les accès selon certaines conditions. Nous supportons les conditions SpEL (Spring Expression Language). Toutes les opérations supportées par une ressource sont publiées. Utilisez ces opérations pour définir les règles conditionnelles pour les polices. Créez des polices bien définies fondées sur des règles conditionnelles pour construire des contrôles d'accès riches.",
     "add-query-helper-message": "Ajoutez une requête SQL à exécuter dans la base de données. La même requête peut être ajoutée à plusieurs tables en sélectionnant les tables dans l'option « Requête utilisée dans ». Choisissez de décrire votre requête pour référence future.",
     "add-role-message": "Les Rôles sont attribués aux Utilisateurs. Dans OpenMetadata, les rôles représentent une collection de polices. Chaque rôle doit avoir au moins une police. Un rôle supporte plusieurs polices avec une relation de un-à-plusieurs. Soyez sûr que les polices ont bien été créées avant de créer un nouveau rôle. Créez des polices bien définies fondées sur des règles conditionnelles pour construire des contrôles d'accès riches.",
-    "add-service-connection": "Commencez par ajouter une connexion de service pour ingérer des données dans OpenMetadata.",
     "adding-new-entity-is-easy-just-give-it-a-spin": "Ajouter un nouveau {{entity}} est facile, il suffit de lui donner un tour !",
     "adding-new-tag": "Ajouter un nouveau tag pour {{categoryName}}",
     "adding-new-user-to-entity": "Ajouter de nouveaux utilisateurs à {{entity}}",
@@ -1330,6 +1330,7 @@
     "get-started-with-open-metadata": "Commencez votre Journée avec OpenMetadata",
     "glossary-term-description": "Chaque terme du glossaire a une définition unique. En plus de définir le terme standard pour un concept, les synonymes ainsi que les termes associés (par exemple, les termes parent et enfant) peuvent être spécifiés. Des références peuvent être ajoutées aux actifs liés aux termes. De nouveaux termes peuvent être ajoutés ou mis à jour dans le glossaire. Les termes du glossaire peuvent être examinés par certains utilisateurs, qui peuvent accepter ou rejeter les termes.",
     "glossary-term-status": "Glossary Term was {{status}}.",
+    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Retour à la page d'accueil",
     "group-team-type-change-message": "Le type 'Group' pour l'équipe ne peut pas être changé. Merci de créer une nouvelle équipe avec le type préférentiel.",
     "group-type-team-not-allowed-to-have-sub-team": "Les équipes classées comme de type 'Groupe' ne sont pas autorisées à avoir des sous-équipes dans leur structure.",
@@ -1388,6 +1389,7 @@
     "no-config-available": "Aucun paramètre de connexion disponible.",
     "no-data": "Aucune donnée",
     "no-data-available": "Aucune donnée disponible",
+    "no-data-available-entity": "No data is available in the {{entity}}.",
     "no-data-available-for-selected-filter": "Aucune donnée trouvée. Essayez de modifier les filtres.",
     "no-domain-assigned-to-entity": "No Domains are Assigned to {{entity}}",
     "no-domain-available": "No Domains are available to configure. Click on <0>{{link}}</0> to add Domains",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
index 31e8c9f1f14c..eaac0299b996 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
@@ -1149,12 +1149,12 @@
     "action-has-been-done-but-deploy-successfully": "has been {{action}} and deployed successfully",
     "action-has-been-done-but-failed-to-deploy": "has been {{action}}, but failed to deploy",
     "active-users": "アクティブなユーザ数を表示",
+    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Identify the Key Performance Indicators (KPI) that best reflect the health of your data assets. Review your data assets based on Description, Ownership, and Tier. Define your target metrics in absolute or percentage to track your progress. Finally, set a start and end date to achieve your data goals.",
     "add-new-service-description": "Choose from the range of services that OpenMetadata integrates with. To add a new service, start by selecting a Service Category (Database, Messaging, Dashboard, or Pipeline). From the list of available services, select the one you'd want to integrate with.",
     "add-policy-message": "Policies are assigned to teams. In OpenMetadata, a policy is a collection of rules, which define access based on certain conditions. We support rich SpEL (Spring Expression Language) based conditions. All the operations supported by an entity are published. Use these fine grained operations to define the conditional rules for each policy. Create well-defined policies based on conditional rules to build rich access control roles.",
     "add-query-helper-message": "Add a SQL query to execute in the database. The same query can be added to multiple tables by selecting from the tables in the option ‘Query used in’. Choose to describe your query for future reference.",
     "add-role-message": "Roles are assigned to Users. In OpenMetadata, Roles are a collection of Policies. Each Role must have at least one policy attached to it. A Role supports multiple policies with a one to many relationship. Ensure that the necessary policies are created before creating a new role. Build rich access control roles with well-defined policies based on conditional rules.",
-    "add-service-connection": "OpenMetadataにデータを取り込むためにサービスとの接続を追加しましょう。",
     "adding-new-entity-is-easy-just-give-it-a-spin": "新しい{{entity}}の追加は簡単です。試してみてください！",
     "adding-new-tag": "{{categoryName}}に新しいタグを追加します",
     "adding-new-user-to-entity": "{{entity}}に新しいユーザを追加します",
@@ -1330,6 +1330,7 @@
     "get-started-with-open-metadata": "Get started with OpenMetadata",
     "glossary-term-description": "Every term in the glossary has a unique definition. Along with defining the standard term for a concept, the synonyms as well as related terms (for e.g., parent and child terms) can be specified. References can be added to the assets related to the terms. New terms can be added or updated to the Glossary. The glossary terms can be reviewed by certain users, who can accept or reject the terms.",
     "glossary-term-status": "Glossary Term was {{status}}.",
+    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "ログインページに戻る",
     "group-team-type-change-message": "The team type 'Group' cannot be changed. Please create a new team with the preferred type.",
     "group-type-team-not-allowed-to-have-sub-team": "Teams classified as Group type are not permitted to have any sub-teams within their structure.",
@@ -1388,6 +1389,7 @@
     "no-config-available": "利用可能な接続の設定はありません。",
     "no-data": "データがありません",
     "no-data-available": "利用できるデータがありません",
+    "no-data-available-entity": "No data is available in the {{entity}}.",
     "no-data-available-for-selected-filter": "No data found. Try changing the filters.",
     "no-domain-assigned-to-entity": "No Domains are Assigned to {{entity}}",
     "no-domain-available": "No Domains are available to configure. Click on <0>{{link}}</0> to add Domains",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
index df0b0d704abd..82f5c28a46a0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
@@ -1149,12 +1149,12 @@
     "action-has-been-done-but-deploy-successfully": "foi {{action}} e implantado com sucesso",
     "action-has-been-done-but-failed-to-deploy": "foi {{action}}, mas falhou ao implantar",
     "active-users": "Exibir o número de usuários ativos.",
+    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Identifique os Indicadores-Chave de Desempenho (KPI) que melhor refletem a saúde dos seus ativos de dados. Revise seus ativos de dados com base na Descrição, Propriedade e Nível. Defina suas métricas de destino em valores absolutos ou percentuais para acompanhar seu progresso. Finalmente, defina uma data de início e de término para alcançar seus objetivos de dados.",
     "add-new-service-description": "Escolha entre a variedade de serviços que o OpenMetadata integra. Para adicionar um novo serviço, comece selecionando uma categoria de serviço (Banco de dados, Mensagens, Painel ou Canalização). Na lista de serviços disponíveis, selecione o que você deseja integrar.",
     "add-policy-message": "As políticas são atribuídas às equipes. No OpenMetadata, uma política é uma coleção de regras que definem o acesso com base em determinadas condições. Suportamos condições ricas baseadas em SpEL (Spring Expression Language). Todas as operações suportadas por uma entidade são publicadas. Use essas operações detalhadas para definir as regras condicionais para cada política. Crie políticas bem definidas com base em regras condicionais para construir funções de controle de acesso.",
     "add-query-helper-message": "Add a SQL query to execute in the database. The same query can be added to multiple tables by selecting from the tables in the option ‘Query used in’. Choose to describe your query for future reference.",
     "add-role-message": "As funções são atribuídas aos usuários. No OpenMetadata, as funções são uma coleção de políticas. Cada função deve ter pelo menos uma política anexada a ela. Uma função suporta várias políticas com uma relação um-para-muitos. Certifique-se de que as políticas necessárias sejam criadas antes de criar uma nova função. Construa funções de controle de acesso com políticas bem definidas baseadas em regras condicionais.",
-    "add-service-connection": "Comece adicionando uma conexão de serviço para ingestão de dados no OpenMetadata.",
     "adding-new-entity-is-easy-just-give-it-a-spin": "Adicionar uma nova {{entity}} é fácil, apenas experimente!",
     "adding-new-tag": "Adicionando nova tag em {{categoryName}}",
     "adding-new-user-to-entity": "Adicionando novos usuários a {{entity}}",
@@ -1330,6 +1330,7 @@
     "get-started-with-open-metadata": "Comece com o OpenMetadata",
     "glossary-term-description": "Cada termo do glossário tem uma definição única. Além de definir o termo padrão para um conceito, podem ser especificados sinônimos, bem como termos relacionados (por exemplo, termos pai e filho). Referências podem ser adicionadas aos ativos relacionados aos termos. Novos termos podem ser adicionados ou atualizados no glossário. Os termos do glossário podem ser revisados por determinados usuários, que podem aceitar ou rejeitar os termos.",
     "glossary-term-status": "Glossary Term was {{status}}.",
+    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Voltar para a página de login",
     "group-team-type-change-message": "O tipo de equipe 'Grupo' não pode ser alterado. Por favor, crie uma nova equipe com o tipo preferido.",
     "group-type-team-not-allowed-to-have-sub-team": "Teams classified as Group type are not permitted to have any sub-teams within their structure.",
@@ -1388,6 +1389,7 @@
     "no-config-available": "Nenhuma configuração de conexão disponível.",
     "no-data": "Nenhum dado",
     "no-data-available": "Nenhum dado disponível.",
+    "no-data-available-entity": "No data is available in the {{entity}}.",
     "no-data-available-for-selected-filter": "Nenhum dado encontrado. Tente alterar os filtros.",
     "no-domain-assigned-to-entity": "No Domains are Assigned to {{entity}}",
     "no-domain-available": "No Domains are available to configure. Click on <0>{{link}}</0> to add Domains",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
index 6ddf4dede7fa..ee0c6b876de1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
@@ -1149,12 +1149,12 @@
     "action-has-been-done-but-deploy-successfully": "было выполнено {{action}} и успешно развернуто",
     "action-has-been-done-but-failed-to-deploy": "было {{action}}, но не удалось развернуть",
     "active-users": "Отображение количества активных пользователей.",
+    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Определите ключевые показатели эффективности (KPI), которые лучше всего отражают состояние ваших объектов данных. Просмотрите свои объекты данных на основе описания, принадлежности и уровня. Определите целевые показатели в абсолютном выражении или в процентах, чтобы отслеживать свой прогресс. Наконец, установите дату начала и окончания для достижения ваших целей в сфере данных.",
     "add-new-service-description": "Выбирайте из множества сервисов, с которыми интегрируется OpenMetadata. Чтобы добавить новый сервис, начните с выбора категории сервиса (база данных, обмен сообщениями, информационная панель или пайплайн). Из списка доступных сервисов выберите тот, с которым вы хотите интегрироваться.",
     "add-policy-message": "Политики назначаются командам. В OpenMetadata политика — это набор правил, которые определяют доступ на основе определенных условий. Мы поддерживаем обширные условия на основе SpEL (Spring Expression Language). Публикуются все операции, поддерживаемые объектом. Используйте эти детализированные операции для определения условных правил для каждой политики. Создавайте четко определенные политики на основе условных правил для создания расширенных ролей управления доступом.",
     "add-query-helper-message": "Добавьте запрос SQL для выполнения в базе данных. Один и тот же запрос можно добавить в несколько таблиц, выбрав из таблиц параметр «Запрос, используемый в». Выберите, чтобы описать свой запрос для дальнейшего использования.",
     "add-role-message": "Роли назначаются пользователям. В OpenMetadata роли представляют собой набор политик. К каждой роли должна быть привязана хотя бы одна политика. Роль поддерживает несколько политик с отношением один ко многим. Перед созданием новой роли убедитесь, что созданы необходимые политики. Создавайте расширенные роли управления доступом с четко определенными политиками на основе условных правил.",
-    "add-service-connection": "Начните с добавления подключения к сервису для приема данных в OpenMetadata.",
     "adding-new-entity-is-easy-just-give-it-a-spin": "Добавить новый \"{{entity}}\" легко, просто попробуй!",
     "adding-new-tag": "Добавление нового тега в {{categoryName}}",
     "adding-new-user-to-entity": "Добавление новых пользователей в {{entity}}",
@@ -1330,6 +1330,7 @@
     "get-started-with-open-metadata": "Начните работу с OpenMetadata",
     "glossary-term-description": "Каждый термин в глоссарии имеет уникальное определение. Наряду с определением стандартного термина для понятия можно указать синонимы, а также связанные термины (например, родительские и дочерние термины). Ссылки могут быть добавлены к объектам данных, связанным с терминами. Новые термины могут быть добавлены или обновлены в Глоссарий. Термины глоссария могут быть просмотрены определенными пользователями, которые могут принять или отклонить термины.",
     "glossary-term-status": "Glossary Term was {{status}}.",
+    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Вернуться на страницу входа",
     "group-team-type-change-message": "Тип команды «Группа» изменить нельзя. Пожалуйста, создайте новую команду с предпочтительным типом.",
     "group-type-team-not-allowed-to-have-sub-team": "Командам, относящимся к групповому типу, не разрешается иметь какие-либо подкоманды в своей структуре.",
@@ -1388,6 +1389,7 @@
     "no-config-available": "Нет доступных конфигураций подключения.",
     "no-data": "Нет данных",
     "no-data-available": "Данные недоступны.",
+    "no-data-available-entity": "No data is available in the {{entity}}.",
     "no-data-available-for-selected-filter": "Данные не найдены. Попробуйте поменять фильтры.",
     "no-domain-assigned-to-entity": "No Domains are Assigned to {{entity}}",
     "no-domain-available": "No Domains are available to configure. Click on <0>{{link}}</0> to add Domains",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
index cc2f8e8f7486..c12d10799b69 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
@@ -1149,12 +1149,12 @@
     "action-has-been-done-but-deploy-successfully": "{{action}}已完成并成功部署",
     "action-has-been-done-but-failed-to-deploy": "{{action}}已完成，但未能部署",
     "active-users": "显示活跃用户数量",
+    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "确定最能反映数据资产健康状况的关键绩效指标 (KPI)。基于描述信息、所有权和数据分级来审查数据资产。定义您的目标指标（绝对值或百分比），以跟踪您的进展。最后，设置开始和结束日期以实现您的数据目标。",
     "add-new-service-description": "从 OpenMetadata 集成的服务范围中选择要添加新服务。请首先选择服务类别（数据库、消息队列、仪表板或工作流），再从可用服务列表中选择要集成的服务。",
     "add-policy-message": "策略可以被分配给团队。在 OpenMetadata 中，策略是一组规则的集合，基于某些条件定义访问权限。我们支持基于 SpEL（Spring Expression Language）的丰富条件规则，已发布支持实体的所有操作。使用这些细粒度操作权限为每个策略定义条件规则。基于条件规则创建明确定义的策略，以构建丰富的访问控制角色。",
     "add-query-helper-message": "添加一个在数据库中可执行的 SQL 查询语句。通过设置‘查询语句被使用在’选项，该语句可被添加到多个数据表中。请准确描述您的查询语句，便于将来参考和引用。",
     "add-role-message": "角色可以被分配给用户。在 OpenMetadata 中，角色是一组策略的集合。每个角色必须至少有一个策略。一个角色支持具有一对多关系的多个策略。在创建新角色之前，请确保已创建必要的策略。基于条件规则创建明确定义的策略，以构建丰富的访问控制角色。",
-    "add-service-connection": "首先添加服务连接以将数据导入 OpenMetadata",
     "adding-new-entity-is-easy-just-give-it-a-spin": "添加新的{{entity}}很容易，马上尝试一下！",
     "adding-new-tag": "在{{categoryName}}上添加新标签",
     "adding-new-user-to-entity": "添加新用户到{{entity}}",
@@ -1330,6 +1330,7 @@
     "get-started-with-open-metadata": "开始使用 OpenMetadata",
     "glossary-term-description": "术语库中的每个术语都有一个唯一的定义。除了为概念定义标准术语之外，还可以指定同义词以及相关术语（例如，父项和子项）。可以向与术语相关的资产添加引用。可以向术语库添加或更新新术语。某些用户可以审查术语，并接受或拒绝这些术语。",
     "glossary-term-status": "Glossary Term was {{status}}.",
+    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "返回登录页面",
     "group-team-type-change-message": "团队类型“组”无法更改，请创建一个具有所需类型的新团队",
     "group-type-team-not-allowed-to-have-sub-team": "被设为“组”的团队类型，无法再拥有子团队",
@@ -1388,6 +1389,7 @@
     "no-config-available": "没有可用的连接配置",
     "no-data": "没有数据",
     "no-data-available": "没有可用的数据",
+    "no-data-available-entity": "No data is available in the {{entity}}.",
     "no-data-available-for-selected-filter": "未找到数据，请尝试更改筛选条件",
     "no-domain-assigned-to-entity": "No Domains are Assigned to {{entity}}",
     "no-domain-available": "No Domains are available to configure. Click on <0>{{link}}</0> to add Domains",
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
index d3c1084264c2..10f7bdd95de5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx
@@ -228,11 +228,14 @@ export const getCountBadge = (
   return (
     <span
       className={classNames(
-        'p-x-xss m-x-xss global-border rounded-4 text-xs text-center',
+        'p-x-xss m-x-xss global-border rounded-4 text-center',
         clsBG,
         className
       )}>
-      <span data-testid="filter-count" title={count.toString()}>
+      <span
+        className="text-xs"
+        data-testid="filter-count"
+        title={count.toString()}>
         {count}
       </span>
     </span>

From fed0fd10b12f33d2b041e2686efb3c9b164cf8ff Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Mon, 6 Nov 2023 16:42:28 +0530
Subject: [PATCH 2/5] supported helper text in add form for glossary and
 classification tags

---
 .../AddGlossaryTermForm.component.tsx         |  1 +
 .../StyleModal/StyleModal.component.tsx       |  5 ++--
 .../ui/src/interface/FormUtils.interface.ts   |  3 +++
 .../ui/src/locale/languages/de-de.json        |  2 +-
 .../ui/src/locale/languages/en-us.json        |  2 +-
 .../ui/src/locale/languages/es-es.json        |  2 +-
 .../ui/src/locale/languages/fr-fr.json        |  2 +-
 .../ui/src/locale/languages/ja-jp.json        |  2 +-
 .../ui/src/locale/languages/pt-br.json        |  2 +-
 .../ui/src/locale/languages/ru-ru.json        |  2 +-
 .../ui/src/locale/languages/zh-cn.json        |  2 +-
 .../ui/src/pages/TagsPage/TagsForm.tsx        |  1 +
 .../main/resources/ui/src/utils/formUtils.tsx | 26 ++++++++++++++++++-
 13 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/AddGlossaryTermForm/AddGlossaryTermForm.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/AddGlossaryTermForm/AddGlossaryTermForm.component.tsx
index d89e0b0fabaf..c2cb2044d21e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/AddGlossaryTermForm/AddGlossaryTermForm.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/AddGlossaryTermForm/AddGlossaryTermForm.component.tsx
@@ -288,6 +288,7 @@ const AddGlossaryTermForm = ({
       required: false,
       placeholder: t('label.icon-url'),
       type: FieldTypes.TEXT,
+      help: t('message.govern-url-size-message'),
       props: {
         'data-testid': 'icon-url',
       },
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx
index 0f6dd5b0fb56..5bdbbf2898d6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx
@@ -24,7 +24,6 @@ import { StyleModalProps, StyleWithInput } from './StyleModal.interface';
 const StyleModal = ({ open, onCancel, onSubmit, style }: StyleModalProps) => {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const popupRef = React.useRef<HTMLElement>(null);
 
   const handleSubmit: FormProps<StyleWithInput>['onFinish'] = (value) => {
     onSubmit(omit(value, 'colorInput'));
@@ -65,10 +64,10 @@ const StyleModal = ({ open, onCancel, onSubmit, style }: StyleModalProps) => {
               <Tooltip
                 align={{ targetOffset: [18, 0] }}
                 placement="topLeft"
-                title={t('message.glossary-url-size-message')}>
+                title={t('message.govern-url-size-message')}>
                 <InfoCircleOutlined
                   className="m-x-xss"
-                  data-testid="glossary-url"
+                  data-testid="glossary-url-helper-icon"
                   style={{ color: GRAYED_OUT_COLOR }}
                 />
               </Tooltip>
diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts b/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts
index 9eae8a0e6302..6294a1ccb59e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts
@@ -12,6 +12,7 @@
  */
 
 import { FormItemProps, FormRule } from 'antd';
+import { TooltipPlacement } from 'antd/lib/tooltip';
 import { ReactNode } from 'react';
 import { FormValidationRulesType } from '../enums/form.enum';
 
@@ -47,6 +48,7 @@ export interface FieldProp {
   type: FieldTypes;
   required: boolean;
   id: string;
+  help?: string;
   props?: Record<string, unknown> & { children?: ReactNode };
   formItemProps?: FormItemProps;
   rules?: FormRule[];
@@ -54,4 +56,5 @@ export interface FieldProp {
   placeholder?: string;
   hasSeparator?: boolean;
   formItemLayout?: FormItemLayout;
+  toolTipPlacement?: TooltipPlacement;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
index f55d1c6a4d20..fe89eec5c6b2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
@@ -1330,8 +1330,8 @@
     "get-started-with-open-metadata": "Erste Schritte mit OpenMetadata",
     "glossary-term-description": "Jeder Begriff im Glossar hat eine eindeutige Definition. Neben der Definition des Standardbegriffs für ein Konzept können auch Synonyme sowie verwandte Begriffe (z. B. übergeordnete und untergeordnete Begriffe) angegeben werden. Es können Referenzen zu den Assets hinzugefügt werden, die sich auf die Begriffe beziehen. Neue Begriffe können dem Glossar hinzugefügt oder aktualisiert werden. Die Glossarbegriffe können von bestimmten Benutzern überprüft werden, die die Begriffe akzeptieren oder ablehnen können.",
     "glossary-term-status": "Glossary Term was {{status}}.",
-    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Zurück zur Anmeldeseite",
+    "govern-url-size-message": "Icon aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "group-team-type-change-message": "Der Teamtyp 'Gruppe' kann nicht geändert werden. Erstellen Sie bitte ein neues Team mit dem gewünschten Typ.",
     "group-type-team-not-allowed-to-have-sub-team": "Teams, die als Gruppen-Typ klassifiziert sind, dürfen keine Unterteams in ihrer Struktur haben.",
     "has-been-created-successfully": "wurde erfolgreich erstellt.",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
index c4e5fc747b40..896c961b02be 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
@@ -1330,8 +1330,8 @@
     "get-started-with-open-metadata": "Get started with OpenMetadata",
     "glossary-term-description": "Every term in the glossary has a unique definition. Along with defining the standard term for a concept, the synonyms as well as related terms (for e.g., parent and child terms) can be specified. References can be added to the assets related to the terms. New terms can be added or updated to the Glossary. The glossary terms can be reviewed by certain users, who can accept or reject the terms.",
     "glossary-term-status": "Glossary Term was {{status}}.",
-    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Go back to Login page",
+    "govern-url-size-message": "Icon aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "group-team-type-change-message": "The team type 'Group' cannot be changed. Please create a new team with the preferred type.",
     "group-type-team-not-allowed-to-have-sub-team": "Teams classified as Group type are not permitted to have any sub-teams within their structure.",
     "has-been-created-successfully": "has been created successfully",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
index 99180bea6b3a..365025efa25d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
@@ -1330,8 +1330,8 @@
     "get-started-with-open-metadata": "Empezar con OpenMetadata",
     "glossary-term-description": "Cada término en el glosario tiene una definición única. Además de definir el término estándar para un concepto, se pueden especificar sinónimos y términos relacionados (por ejemplo, términos padre e hijo). Se pueden agregar referencias a los activos relacionados con los términos. Se pueden agregar o actualizar nuevos términos al glosario. Los términos del glosario pueden ser revisados por ciertos usuarios, quienes pueden aceptar o rechazar los términos.",
     "glossary-term-status": "Glossary Term was {{status}}.",
-    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Volver a la página de inicio de sesión",
+    "govern-url-size-message": "Icon aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "group-team-type-change-message": "El tipo de equipo 'Grupo' no se puede cambiar. Por favor, cree un nuevo equipo con el tipo preferido.",
     "group-type-team-not-allowed-to-have-sub-team": "Teams classified as Group type are not permitted to have any sub-teams within their structure.",
     "has-been-created-successfully": "se ha creado exitosamente",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
index 4692109466b1..181ab3b895ec 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
@@ -1330,8 +1330,8 @@
     "get-started-with-open-metadata": "Commencez votre Journée avec OpenMetadata",
     "glossary-term-description": "Chaque terme du glossaire a une définition unique. En plus de définir le terme standard pour un concept, les synonymes ainsi que les termes associés (par exemple, les termes parent et enfant) peuvent être spécifiés. Des références peuvent être ajoutées aux actifs liés aux termes. De nouveaux termes peuvent être ajoutés ou mis à jour dans le glossaire. Les termes du glossaire peuvent être examinés par certains utilisateurs, qui peuvent accepter ou rejeter les termes.",
     "glossary-term-status": "Glossary Term was {{status}}.",
-    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Retour à la page d'accueil",
+    "govern-url-size-message": "Icon aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "group-team-type-change-message": "Le type 'Group' pour l'équipe ne peut pas être changé. Merci de créer une nouvelle équipe avec le type préférentiel.",
     "group-type-team-not-allowed-to-have-sub-team": "Les équipes classées comme de type 'Groupe' ne sont pas autorisées à avoir des sous-équipes dans leur structure.",
     "has-been-created-successfully": "a été créé avec succès",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
index eaac0299b996..2401be639e7a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
@@ -1330,8 +1330,8 @@
     "get-started-with-open-metadata": "Get started with OpenMetadata",
     "glossary-term-description": "Every term in the glossary has a unique definition. Along with defining the standard term for a concept, the synonyms as well as related terms (for e.g., parent and child terms) can be specified. References can be added to the assets related to the terms. New terms can be added or updated to the Glossary. The glossary terms can be reviewed by certain users, who can accept or reject the terms.",
     "glossary-term-status": "Glossary Term was {{status}}.",
-    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "ログインページに戻る",
+    "govern-url-size-message": "Icon aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "group-team-type-change-message": "The team type 'Group' cannot be changed. Please create a new team with the preferred type.",
     "group-type-team-not-allowed-to-have-sub-team": "Teams classified as Group type are not permitted to have any sub-teams within their structure.",
     "has-been-created-successfully": "正常に作成されました",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
index 82f5c28a46a0..c016f84541eb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
@@ -1330,8 +1330,8 @@
     "get-started-with-open-metadata": "Comece com o OpenMetadata",
     "glossary-term-description": "Cada termo do glossário tem uma definição única. Além de definir o termo padrão para um conceito, podem ser especificados sinônimos, bem como termos relacionados (por exemplo, termos pai e filho). Referências podem ser adicionadas aos ativos relacionados aos termos. Novos termos podem ser adicionados ou atualizados no glossário. Os termos do glossário podem ser revisados por determinados usuários, que podem aceitar ou rejeitar os termos.",
     "glossary-term-status": "Glossary Term was {{status}}.",
-    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Voltar para a página de login",
+    "govern-url-size-message": "Icon aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "group-team-type-change-message": "O tipo de equipe 'Grupo' não pode ser alterado. Por favor, crie uma nova equipe com o tipo preferido.",
     "group-type-team-not-allowed-to-have-sub-team": "Teams classified as Group type are not permitted to have any sub-teams within their structure.",
     "has-been-created-successfully": "foi criado com sucesso",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
index ee0c6b876de1..d66adfc31ad7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
@@ -1330,8 +1330,8 @@
     "get-started-with-open-metadata": "Начните работу с OpenMetadata",
     "glossary-term-description": "Каждый термин в глоссарии имеет уникальное определение. Наряду с определением стандартного термина для понятия можно указать синонимы, а также связанные термины (например, родительские и дочерние термины). Ссылки могут быть добавлены к объектам данных, связанным с терминами. Новые термины могут быть добавлены или обновлены в Глоссарий. Термины глоссария могут быть просмотрены определенными пользователями, которые могут принять или отклонить термины.",
     "glossary-term-status": "Glossary Term was {{status}}.",
-    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "Вернуться на страницу входа",
+    "govern-url-size-message": "Icon aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "group-team-type-change-message": "Тип команды «Группа» изменить нельзя. Пожалуйста, создайте новую команду с предпочтительным типом.",
     "group-type-team-not-allowed-to-have-sub-team": "Командам, относящимся к групповому типу, не разрешается иметь какие-либо подкоманды в своей структуре.",
     "has-been-created-successfully": "успешно создан",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
index c12d10799b69..1d5b007362be 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
@@ -1330,8 +1330,8 @@
     "get-started-with-open-metadata": "开始使用 OpenMetadata",
     "glossary-term-description": "术语库中的每个术语都有一个唯一的定义。除了为概念定义标准术语之外，还可以指定同义词以及相关术语（例如，父项和子项）。可以向与术语相关的资产添加引用。可以向术语库添加或更新新术语。某些用户可以审查术语，并接受或拒绝这些术语。",
     "glossary-term-status": "Glossary Term was {{status}}.",
-    "glossary-url-size-message": "Glossary logo aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "go-back-to-login-page": "返回登录页面",
+    "govern-url-size-message": "Icon aspect ratio should be 1:1 and Recommended size should be 64 x 64 px",
     "group-team-type-change-message": "团队类型“组”无法更改，请创建一个具有所需类型的新团队",
     "group-type-team-not-allowed-to-have-sub-team": "被设为“组”的团队类型，无法再拥有子团队",
     "has-been-created-successfully": "已成功创建",
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.tsx
index 3efdc43e1979..556992fd65d3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.tsx
@@ -136,6 +136,7 @@ const TagsForm = ({
             required: false,
             placeholder: t('label.icon-url'),
             type: FieldTypes.TEXT,
+            help: t('message.govern-url-size-message'),
             props: {
               'data-testid': 'icon-url',
             },
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx
index 7b9a7cb50e99..5fdcd7a07d07 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx
@@ -10,6 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { ErrorTransformer } from '@rjsf/utils';
 import {
   Divider,
@@ -19,6 +20,7 @@ import {
   InputNumber,
   Select,
   Switch,
+  Tooltip,
 } from 'antd';
 import classNames from 'classnames';
 import { compact, startCase } from 'lodash';
@@ -36,6 +38,7 @@ import { UserTeamSelectableList } from '../components/common/UserTeamSelectableL
 import { UserSelectDropdownProps } from '../components/common/UserTeamSelectableList/UserTeamSelectableList.interface';
 import SliderWithInput from '../components/SliderWithInput/SliderWithInput';
 import { SliderWithInputProps } from '../components/SliderWithInput/SliderWithInput.interface';
+import { GRAYED_OUT_COLOR } from '../constants/constants';
 import { FieldProp, FieldTypes } from '../interface/FormUtils.interface';
 import TagSuggestion, {
   TagSuggestionProps,
@@ -47,6 +50,7 @@ export const getField = (field: FieldProp) => {
     label,
     name,
     type,
+    help,
     required,
     props = {},
     rules = [],
@@ -55,8 +59,28 @@ export const getField = (field: FieldProp) => {
     formItemProps,
     hasSeparator = false,
     formItemLayout = 'vertical',
+    toolTipPlacement = 'top',
   } = field;
 
+  const formItemLabel = () => {
+    if (help) {
+      return (
+        <>
+          {label}
+          <Tooltip placement={toolTipPlacement} title={help}>
+            <InfoCircleOutlined
+              className="m-x-xss"
+              data-testid="helper-text-icon"
+              style={{ color: GRAYED_OUT_COLOR }}
+            />
+          </Tooltip>
+        </>
+      );
+    }
+
+    return label;
+  };
+
   let internalFormItemProps: FormItemProps = {};
   let fieldElement: ReactNode = null;
   let fieldRules = [...rules];
@@ -190,7 +214,7 @@ export const getField = (field: FieldProp) => {
         })}
         id={id}
         key={id}
-        label={label}
+        label={formItemLabel()}
         name={name}
         rules={fieldRules}
         {...internalFormItemProps}

From fdef131f8bb14d683d31db094aa989054105a0ec Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Tue, 7 Nov 2023 12:28:07 +0530
Subject: [PATCH 3/5] created separate formLabel component

---
 .../components/Form/FormItemLabel.test.tsx    | 53 +++++++++++++++++++
 .../ui/src/components/Form/FormItemLabel.tsx  | 42 +++++++++++++++
 .../ui/src/components/Form/form.interface.ts  | 22 ++++++++
 .../AddGlossaryTermForm.component.tsx         |  3 +-
 .../StyleModal/StyleModal.component.tsx       | 24 +++------
 .../ui/src/interface/FormUtils.interface.ts   |  3 --
 .../ui/src/pages/TagsPage/TagsForm.tsx        |  3 +-
 .../main/resources/ui/src/utils/formUtils.tsx | 37 +++++--------
 8 files changed, 141 insertions(+), 46 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.test.tsx
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.tsx
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/Form/form.interface.ts

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.test.tsx
new file mode 100644
index 000000000000..d8ec5500d1fc
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.test.tsx
@@ -0,0 +1,53 @@
+/*
+ *  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.
+ */
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { FormItemLabelProps } from './form.interface';
+import FormItemLabel from './FormItemLabel';
+
+const mockProps: FormItemLabelProps = {
+  label: 'name',
+};
+
+describe('Test FormItemLabel Component', () => {
+  it('Should render FormItemLabel component', async () => {
+    render(<FormItemLabel {...mockProps} />);
+
+    const label = screen.getByTestId('form-item-label');
+
+    expect(label).toContainHTML(mockProps.label as string);
+  });
+
+  it('Should not render helper icon if no helper text passed', async () => {
+    render(<FormItemLabel {...mockProps} />);
+
+    const label = screen.getByTestId('form-item-label');
+
+    const helpIcon = screen.queryByTestId('helper-icon');
+
+    expect(label).toContainHTML(mockProps.label as string);
+    expect(helpIcon).not.toBeInTheDocument();
+  });
+
+  it('Should render helper icon if helper text passed', async () => {
+    render(<FormItemLabel {...mockProps} helperText="help" />);
+
+    const label = screen.getByTestId('form-item-label');
+
+    const helpIcon = screen.getByTestId('helper-icon');
+
+    expect(label).toContainHTML(mockProps.label as string);
+    expect(helpIcon).toBeInTheDocument();
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.tsx
new file mode 100644
index 000000000000..93c26e557089
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.tsx
@@ -0,0 +1,42 @@
+/*
+ *  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.
+ */
+
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import React from 'react';
+import { GRAYED_OUT_COLOR } from '../../constants/constants';
+import { FormItemLabelProps } from './form.interface';
+
+const FormItemLabel = ({
+  label,
+  helperText,
+  align,
+  placement = 'top',
+}: FormItemLabelProps) => {
+  return (
+    <>
+      <span data-testid="form-item-label">{label}</span>
+      {helperText && (
+        <Tooltip align={align} placement={placement} title={helperText}>
+          <InfoCircleOutlined
+            className="m-l-xs"
+            data-testid="helper-icon"
+            style={{ color: GRAYED_OUT_COLOR }}
+          />
+        </Tooltip>
+      )}
+    </>
+  );
+};
+
+export default FormItemLabel;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Form/form.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Form/form.interface.ts
new file mode 100644
index 000000000000..f094e89810be
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Form/form.interface.ts
@@ -0,0 +1,22 @@
+/*
+ *  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.
+ */
+
+import { TooltipPlacement, TooltipProps } from 'antd/lib/tooltip';
+import { ReactNode } from 'react';
+
+export interface FormItemLabelProps {
+  label: ReactNode;
+  helperText?: string;
+  placement?: TooltipPlacement;
+  align?: TooltipProps['align'];
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/AddGlossaryTermForm/AddGlossaryTermForm.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/AddGlossaryTermForm/AddGlossaryTermForm.component.tsx
index c2cb2044d21e..818b88655dad 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/AddGlossaryTermForm/AddGlossaryTermForm.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/AddGlossaryTermForm/AddGlossaryTermForm.component.tsx
@@ -288,9 +288,10 @@ const AddGlossaryTermForm = ({
       required: false,
       placeholder: t('label.icon-url'),
       type: FieldTypes.TEXT,
-      help: t('message.govern-url-size-message'),
+      helperText: t('message.govern-url-size-message'),
       props: {
         'data-testid': 'icon-url',
+        tooltipPlacement: 'right',
       },
     },
     {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx
index 5bdbbf2898d6..a598fa2626da 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx
@@ -10,15 +10,14 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Form, FormProps, Input, Modal, Tooltip } from 'antd';
+import { Form, FormProps, Input, Modal } from 'antd';
 
-import { InfoCircleOutlined } from '@ant-design/icons';
 import { isUndefined, omit } from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { GRAYED_OUT_COLOR } from '../../../constants/constants';
 import { HEX_COLOR_CODE_REGEX } from '../../../constants/regex.constants';
 import ColorPicker from '../../common/ColorPicker/ColorPicker.component';
+import FormItemLabel from '../../Form/FormItemLabel';
 import { StyleModalProps, StyleWithInput } from './StyleModal.interface';
 
 const StyleModal = ({ open, onCancel, onSubmit, style }: StyleModalProps) => {
@@ -59,19 +58,12 @@ const StyleModal = ({ open, onCancel, onSubmit, style }: StyleModalProps) => {
         }}>
         <Form.Item
           label={
-            <>
-              {t('label.icon-url')}
-              <Tooltip
-                align={{ targetOffset: [18, 0] }}
-                placement="topLeft"
-                title={t('message.govern-url-size-message')}>
-                <InfoCircleOutlined
-                  className="m-x-xss"
-                  data-testid="glossary-url-helper-icon"
-                  style={{ color: GRAYED_OUT_COLOR }}
-                />
-              </Tooltip>
-            </>
+            <FormItemLabel
+              align={{ targetOffset: [18, 0] }}
+              helperText={t('message.govern-url-size-message')}
+              label={t('label.icon-url')}
+              placement="topLeft"
+            />
           }
           name="iconURL">
           <Input
diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts b/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts
index 6294a1ccb59e..9eae8a0e6302 100644
--- a/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts
@@ -12,7 +12,6 @@
  */
 
 import { FormItemProps, FormRule } from 'antd';
-import { TooltipPlacement } from 'antd/lib/tooltip';
 import { ReactNode } from 'react';
 import { FormValidationRulesType } from '../enums/form.enum';
 
@@ -48,7 +47,6 @@ export interface FieldProp {
   type: FieldTypes;
   required: boolean;
   id: string;
-  help?: string;
   props?: Record<string, unknown> & { children?: ReactNode };
   formItemProps?: FormItemProps;
   rules?: FormRule[];
@@ -56,5 +54,4 @@ export interface FieldProp {
   placeholder?: string;
   hasSeparator?: boolean;
   formItemLayout?: FormItemLayout;
-  toolTipPlacement?: TooltipPlacement;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.tsx
index 556992fd65d3..e280db6cb4bb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.tsx
@@ -136,9 +136,10 @@ const TagsForm = ({
             required: false,
             placeholder: t('label.icon-url'),
             type: FieldTypes.TEXT,
-            help: t('message.govern-url-size-message'),
+            helperText: t('message.govern-url-size-message'),
             props: {
               'data-testid': 'icon-url',
+              tooltipPlacement: 'right',
             },
           },
           {
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx
index 5fdcd7a07d07..170ace09197a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx
@@ -10,7 +10,6 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { InfoCircleOutlined } from '@ant-design/icons';
 import { ErrorTransformer } from '@rjsf/utils';
 import {
   Divider,
@@ -20,8 +19,9 @@ import {
   InputNumber,
   Select,
   Switch,
-  Tooltip,
+  TooltipProps,
 } from 'antd';
+import { TooltipPlacement } from 'antd/lib/tooltip';
 import classNames from 'classnames';
 import { compact, startCase } from 'lodash';
 import React, { Fragment, ReactNode } from 'react';
@@ -36,9 +36,9 @@ import { UserSelectableList } from '../components/common/UserSelectableList/User
 import { UserSelectableListProps } from '../components/common/UserSelectableList/UserSelectableList.interface';
 import { UserTeamSelectableList } from '../components/common/UserTeamSelectableList/UserTeamSelectableList.component';
 import { UserSelectDropdownProps } from '../components/common/UserTeamSelectableList/UserTeamSelectableList.interface';
+import FormItemLabel from '../components/Form/FormItemLabel';
 import SliderWithInput from '../components/SliderWithInput/SliderWithInput';
 import { SliderWithInputProps } from '../components/SliderWithInput/SliderWithInput.interface';
-import { GRAYED_OUT_COLOR } from '../constants/constants';
 import { FieldProp, FieldTypes } from '../interface/FormUtils.interface';
 import TagSuggestion, {
   TagSuggestionProps,
@@ -50,7 +50,7 @@ export const getField = (field: FieldProp) => {
     label,
     name,
     type,
-    help,
+    helperText,
     required,
     props = {},
     rules = [],
@@ -59,28 +59,8 @@ export const getField = (field: FieldProp) => {
     formItemProps,
     hasSeparator = false,
     formItemLayout = 'vertical',
-    toolTipPlacement = 'top',
   } = field;
 
-  const formItemLabel = () => {
-    if (help) {
-      return (
-        <>
-          {label}
-          <Tooltip placement={toolTipPlacement} title={help}>
-            <InfoCircleOutlined
-              className="m-x-xss"
-              data-testid="helper-text-icon"
-              style={{ color: GRAYED_OUT_COLOR }}
-            />
-          </Tooltip>
-        </>
-      );
-    }
-
-    return label;
-  };
-
   let internalFormItemProps: FormItemProps = {};
   let fieldElement: ReactNode = null;
   let fieldRules = [...rules];
@@ -214,7 +194,14 @@ export const getField = (field: FieldProp) => {
         })}
         id={id}
         key={id}
-        label={formItemLabel()}
+        label={
+          <FormItemLabel
+            align={props.tooltipAlign as TooltipProps['align']}
+            helperText={helperText}
+            label={label}
+            placement={props.tooltipPlacement as TooltipPlacement}
+          />
+        }
         name={name}
         rules={fieldRules}
         {...internalFormItemProps}

From 080dc8b9ac5b7c231e6ef4499bcccf511a334a7a Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Tue, 7 Nov 2023 12:40:29 +0530
Subject: [PATCH 4/5] minor changes

---
 .../src/main/resources/ui/src/locale/languages/de-de.json       | 2 +-
 .../src/main/resources/ui/src/locale/languages/es-es.json       | 2 +-
 .../src/main/resources/ui/src/locale/languages/fr-fr.json       | 2 +-
 .../src/main/resources/ui/src/locale/languages/ja-jp.json       | 2 +-
 .../src/main/resources/ui/src/locale/languages/pt-br.json       | 2 +-
 .../src/main/resources/ui/src/locale/languages/ru-ru.json       | 2 +-
 .../src/main/resources/ui/src/locale/languages/zh-cn.json       | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
index fe89eec5c6b2..1995b9048324 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json
@@ -1149,7 +1149,7 @@
     "action-has-been-done-but-deploy-successfully": "{{action}} wurde erfolgreich durchgeführt und bereitgestellt.",
     "action-has-been-done-but-failed-to-deploy": "{{action}} wurde durchgeführt, aber die Bereitstellung ist fehlgeschlagen.",
     "active-users": "Zeigen Sie die Anzahl der aktiven Benutzer an.",
-    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
+    "add-data-asset-domain": "Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Identifizieren Sie die Key Performance Indicators (KPIs), die den Zustand Ihrer Datenvermögenswerte am besten widerspiegeln. Überprüfen Sie Ihre Datenvermögenswerte anhand von Beschreibung, Eigentum und Stufe. Definieren Sie Ihre Zielmetriken absolut oder prozentual, um Ihren Fortschritt zu verfolgen. Legen Sie schließlich ein Start- und Enddatum fest, um Ihre Datenziele zu erreichen.",
     "add-new-service-description": "Wählen Sie aus dem Bereich der Dienste aus, die OpenMetadata integriert. Um einen neuen Dienst hinzuzufügen, wählen Sie zunächst eine Dienstkategorie (Datenbank, Messaging, Dashboard oder Pipeline) aus. Wählen Sie aus der Liste der verfügbaren Dienste denjenigen aus, den Sie integrieren möchten.",
     "add-policy-message": "Richtlinien werden Teams zugewiesen. In OpenMetadata ist eine Richtlinie eine Sammlung von Regeln, die den Zugriff basierend auf bestimmten Bedingungen definieren. Wir unterstützen reichhaltige SpEL (Spring Expression Language)-basierte Bedingungen. Alle von einer Entität unterstützten Operationen werden veröffentlicht. Verwenden Sie diese feinkörnigen Operationen, um die bedingten Regeln für jede Richtlinie zu definieren. Erstellen Sie gut definierte Richtlinien basierend auf bedingten Regeln, um umfangreiche Zugriffssteuerungsrollen zu erstellen.",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
index 365025efa25d..90d68db9eb63 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json
@@ -1149,7 +1149,7 @@
     "action-has-been-done-but-deploy-successfully": "se ha {{action}} y se ha deployado correctamente",
     "action-has-been-done-but-failed-to-deploy": "se ha {{action}}, pero no se ha podido deployar",
     "active-users": "Mostrar el número de usuarios activos.",
-    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
+    "add-data-asset-domain": "Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Identifique los Indicadores Clave de Rendimiento (KPI) que mejor reflejen la salud de sus activos de datos. Revise sus activos de datos según su Descripción, Propiedad y Nivel. Defina sus métricas objetivas en valor absoluto o porcentaje para realizar un seguimiento de su progreso. Por último, establezca una fecha de inicio y de finalización para alcanzar sus objetivos de datos.",
     "add-new-service-description": "Elija entre la gama de servicios con los que se integra OpenMetadata. Para añadir un nuevo servicio, comience seleccionando una Categoría de Servicio (Base de datos, Streaming, Dashboards o Pipelines). De la lista de servicios disponibles, seleccione el que desea ingestar.",
     "add-policy-message": "Las políticas se asignan a los equipos. En OpenMetadata, una política es una colección de reglas que definen el acceso en función de ciertas condiciones. Admitimos condiciones ricas basadas en SpEL (Lenguaje de Expresión de Spring). Todas las operaciones admitidas por una entidad se publican. Utilice estas operaciones finamente detalladas para definir las reglas condicionales para cada política. Cree políticas bien definidas basadas en reglas condicionales para construir roles de control de acceso ricos.",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
index 181ab3b895ec..65d31a1e79d6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json
@@ -1149,7 +1149,7 @@
     "action-has-been-done-but-deploy-successfully": "{{action}} avec succès et déployé avec succès",
     "action-has-been-done-but-failed-to-deploy": "{{action}} avec succès, mais n'a pu être déployé",
     "active-users": "Montre le nombre d'utilisateurs actifs.",
-    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
+    "add-data-asset-domain": "Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Identifiez les Key Performance Indicators (KPI) qui représentent le mieux la santé de votre plateforme. Évaluez vos ressources de données selon la Description, la Propriété et le Rang. Définissez les indicateurs en pourcentage ou en absolu pour suivre vos progrès. Enfin, ajoutez une date de début et de fin pour l'accomplissement de vos objectifs",
     "add-new-service-description": "Choisissez le service que vous souhaitez intégrer à OpenMetadata. Pour ajouter un nouveau service, commencez par sélectionner une catégorie de service (base de données, messagerie, tableau de bord ou pipeline). Dans la liste des services disponibles, sélectionnez celui que vous souhaitez intégrer.",
     "add-policy-message": "Les stratégies sont attribuées aux équipes. Dans OpenMetadata, une police est une collection de règles qui définissent les accès selon certaines conditions. Nous supportons les conditions SpEL (Spring Expression Language). Toutes les opérations supportées par une ressource sont publiées. Utilisez ces opérations pour définir les règles conditionnelles pour les polices. Créez des polices bien définies fondées sur des règles conditionnelles pour construire des contrôles d'accès riches.",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
index 2401be639e7a..850282796ffb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json
@@ -1149,7 +1149,7 @@
     "action-has-been-done-but-deploy-successfully": "has been {{action}} and deployed successfully",
     "action-has-been-done-but-failed-to-deploy": "has been {{action}}, but failed to deploy",
     "active-users": "アクティブなユーザ数を表示",
-    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
+    "add-data-asset-domain": "Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Identify the Key Performance Indicators (KPI) that best reflect the health of your data assets. Review your data assets based on Description, Ownership, and Tier. Define your target metrics in absolute or percentage to track your progress. Finally, set a start and end date to achieve your data goals.",
     "add-new-service-description": "Choose from the range of services that OpenMetadata integrates with. To add a new service, start by selecting a Service Category (Database, Messaging, Dashboard, or Pipeline). From the list of available services, select the one you'd want to integrate with.",
     "add-policy-message": "Policies are assigned to teams. In OpenMetadata, a policy is a collection of rules, which define access based on certain conditions. We support rich SpEL (Spring Expression Language) based conditions. All the operations supported by an entity are published. Use these fine grained operations to define the conditional rules for each policy. Create well-defined policies based on conditional rules to build rich access control roles.",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
index c016f84541eb..4eaaf3236241 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json
@@ -1149,7 +1149,7 @@
     "action-has-been-done-but-deploy-successfully": "foi {{action}} e implantado com sucesso",
     "action-has-been-done-but-failed-to-deploy": "foi {{action}}, mas falhou ao implantar",
     "active-users": "Exibir o número de usuários ativos.",
-    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
+    "add-data-asset-domain": "Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Identifique os Indicadores-Chave de Desempenho (KPI) que melhor refletem a saúde dos seus ativos de dados. Revise seus ativos de dados com base na Descrição, Propriedade e Nível. Defina suas métricas de destino em valores absolutos ou percentuais para acompanhar seu progresso. Finalmente, defina uma data de início e de término para alcançar seus objetivos de dados.",
     "add-new-service-description": "Escolha entre a variedade de serviços que o OpenMetadata integra. Para adicionar um novo serviço, comece selecionando uma categoria de serviço (Banco de dados, Mensagens, Painel ou Canalização). Na lista de serviços disponíveis, selecione o que você deseja integrar.",
     "add-policy-message": "As políticas são atribuídas às equipes. No OpenMetadata, uma política é uma coleção de regras que definem o acesso com base em determinadas condições. Suportamos condições ricas baseadas em SpEL (Spring Expression Language). Todas as operações suportadas por uma entidade são publicadas. Use essas operações detalhadas para definir as regras condicionais para cada política. Crie políticas bem definidas com base em regras condicionais para construir funções de controle de acesso.",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
index d66adfc31ad7..bfdad63701f4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json
@@ -1149,7 +1149,7 @@
     "action-has-been-done-but-deploy-successfully": "было выполнено {{action}} и успешно развернуто",
     "action-has-been-done-but-failed-to-deploy": "было {{action}}, но не удалось развернуть",
     "active-users": "Отображение количества активных пользователей.",
-    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
+    "add-data-asset-domain": "Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "Определите ключевые показатели эффективности (KPI), которые лучше всего отражают состояние ваших объектов данных. Просмотрите свои объекты данных на основе описания, принадлежности и уровня. Определите целевые показатели в абсолютном выражении или в процентах, чтобы отслеживать свой прогресс. Наконец, установите дату начала и окончания для достижения ваших целей в сфере данных.",
     "add-new-service-description": "Выбирайте из множества сервисов, с которыми интегрируется OpenMetadata. Чтобы добавить новый сервис, начните с выбора категории сервиса (база данных, обмен сообщениями, информационная панель или пайплайн). Из списка доступных сервисов выберите тот, с которым вы хотите интегрироваться.",
     "add-policy-message": "Политики назначаются командам. В OpenMetadata политика — это набор правил, которые определяют доступ на основе определенных условий. Мы поддерживаем обширные условия на основе SpEL (Spring Expression Language). Публикуются все операции, поддерживаемые объектом. Используйте эти детализированные операции для определения условных правил для каждой политики. Создавайте четко определенные политики на основе условных правил для создания расширенных ролей управления доступом.",
diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
index 1d5b007362be..f7723c691548 100644
--- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
+++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json
@@ -1149,7 +1149,7 @@
     "action-has-been-done-but-deploy-successfully": "{{action}}已完成并成功部署",
     "action-has-been-done-but-failed-to-deploy": "{{action}}已完成，但未能部署",
     "active-users": "显示活跃用户数量",
-    "add-data-asset-domain": "No data is available in the {{domain}} . Start by adding a service or data asset to the {{domain}}.",
+    "add-data-asset-domain": "Start by adding a service or data asset to the {{domain}}.",
     "add-kpi-message": "确定最能反映数据资产健康状况的关键绩效指标 (KPI)。基于描述信息、所有权和数据分级来审查数据资产。定义您的目标指标（绝对值或百分比），以跟踪您的进展。最后，设置开始和结束日期以实现您的数据目标。",
     "add-new-service-description": "从 OpenMetadata 集成的服务范围中选择要添加新服务。请首先选择服务类别（数据库、消息队列、仪表板或工作流），再从可用服务列表中选择要集成的服务。",
     "add-policy-message": "策略可以被分配给团队。在 OpenMetadata 中，策略是一组规则的集合，基于某些条件定义访问权限。我们支持基于 SpEL（Spring Expression Language）的丰富条件规则，已发布支持实体的所有操作。使用这些细粒度操作权限为每个策略定义条件规则。基于条件规则创建明确定义的策略，以构建丰富的访问控制角色。",

From d7ca728fa5e8246247e1d3c49bea9f5aba8ecbb6 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Wed, 8 Nov 2023 14:21:19 +0530
Subject: [PATCH 5/5] changes as per comments

---
 .../components/Form/{form.interface.ts => Form.interface.ts}    | 0
 .../resources/ui/src/components/Form/FormItemLabel.test.tsx     | 2 +-
 .../src/main/resources/ui/src/components/Form/FormItemLabel.tsx | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename openmetadata-ui/src/main/resources/ui/src/components/Form/{form.interface.ts => Form.interface.ts} (100%)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Form/form.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Form/Form.interface.ts
similarity index 100%
rename from openmetadata-ui/src/main/resources/ui/src/components/Form/form.interface.ts
rename to openmetadata-ui/src/main/resources/ui/src/components/Form/Form.interface.ts
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.test.tsx
index d8ec5500d1fc..d8c9c8495fbb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.test.tsx
@@ -13,7 +13,7 @@
 
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { FormItemLabelProps } from './form.interface';
+import { FormItemLabelProps } from './Form.interface';
 import FormItemLabel from './FormItemLabel';
 
 const mockProps: FormItemLabelProps = {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.tsx
index 93c26e557089..51eb9060deb8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.tsx
@@ -15,7 +15,7 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import React from 'react';
 import { GRAYED_OUT_COLOR } from '../../constants/constants';
-import { FormItemLabelProps } from './form.interface';
+import { FormItemLabelProps } from './Form.interface';
 
 const FormItemLabel = ({
   label,