fix(chore): UI feedback fixes

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'];
+}

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();
+  });
+});

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;

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

@@ -288,8 +288,10 @@ const AddGlossaryTermForm = ({
       required: false,
       placeholder: t('label.icon-url'),
       type: FieldTypes.TEXT,
+      helperText: t('message.govern-url-size-message'),
       props: {
         'data-testid': 'icon-url',
+        tooltipPlacement: 'right',
       },
     },
     {

openmetadata-ui/src/main/resources/ui/src/components/Modals/StyleModal/StyleModal.component.tsx

@@ -17,6 +17,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 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) => {
@@ -55,7 +56,16 @@ const StyleModal = ({ open, onCancel, onSubmit, style }: StyleModalProps) => {
             form.setFieldValue('color', value.colorInput);
           }
         }}>
-        <Form.Item label={t('label.icon-url')} name="iconURL">
+        <Form.Item
+          label={
+            <FormItemLabel
+              align={{ targetOffset: [18, 0] }}
+              helperText={t('message.govern-url-size-message')}
+              label={t('label.icon-url')}
+              placement="topLeft"
+            />
+          }
+          name="iconURL">
           <Input
             data-testid="icon-url"
             placeholder={t('label.enter-entity', {

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

openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json

@@ -1151,12 +1151,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": "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",
@@ -1336,6 +1336,7 @@
     "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}}.",
     "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.",
@@ -1393,6 +1394,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",

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -1151,12 +1151,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}}",
@@ -1336,6 +1336,7 @@
     "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}}.",
     "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",
@@ -1393,6 +1394,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",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -1151,12 +1151,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": "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}}",
@@ -1336,6 +1336,7 @@
     "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}}.",
     "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",
@@ -1393,6 +1394,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",