fix(ui): supported tooltip descriptions for domain types

openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx

@@ -35,9 +35,11 @@ import {
   FieldTypes,
   FormItemLayout,
 } from '../../../interface/FormUtils.interface';
+import { domainTypeTooltipDataRender } from '../../../utils/DomainUtils';
 import { getEntityName } from '../../../utils/EntityUtils';
 import { generateFormFields, getField } from '../../../utils/formUtils';
 import { checkPermission } from '../../../utils/PermissionsUtils';
+import '../domain.less';
 import { DomainFormType } from '../DomainPage.interface';
 import { AddDomainFormProps } from './AddDomainForm.interface';
 
@@ -139,9 +141,13 @@ const AddDomainForm = ({
       label: t('label.domain-type'),
       id: 'root/domainType',
       type: FieldTypes.SELECT,
+      helperText: domainTypeTooltipDataRender(),
       props: {
         'data-testid': 'domainType',
         options: domainTypeArray,
+        overlayClassName: 'domain-type-tooltip-container',
+        tooltipPlacement: 'topLeft',
+        tooltipAlign: { targetOffset: [18, 0] },
       },
     };
 

openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainTabs/DocumentationTab/DocumentationTab.component.tsx

@@ -37,10 +37,14 @@ import {
   ChangeDescription,
   EntityReference,
 } from '../../../../generated/entity/type';
-import { getUserNames } from '../../../../utils/DomainUtils';
+import {
+  domainTypeTooltipDataRender,
+  getUserNames,
+} from '../../../../utils/DomainUtils';
 import { getEntityName } from '../../../../utils/EntityUtils';
 import { getEntityVersionByField } from '../../../../utils/EntityVersionUtils';
 import { checkPermission } from '../../../../utils/PermissionsUtils';
+import FormItemLabel from '../../../Form/FormItemLabel';
 import '../../domain.less';
 import {
   DocumentationEntity,
@@ -281,8 +285,15 @@ const DocumentationTab = ({
                 <Typography.Text
                   className="right-panel-label"
                   data-testid="domainType-heading-name">
-                  {t('label.domain-type')}
+                  <FormItemLabel
+                    align={{ targetOffset: [18, 0] }}
+                    helperText={domainTypeTooltipDataRender()}
+                    label={t('label.domain-type')}
+                    overlayClassName="domain-type-tooltip-container"
+                    placement="topLeft"
+                  />
                 </Typography.Text>
+
                 {editAllPermission && (domain as Domain).domainType && (
                   <Button
                     className="cursor-pointer flex-center m-l-xss"

openmetadata-ui/src/main/resources/ui/src/components/Domain/domain.less

@@ -57,3 +57,14 @@
     min-height: 150px;
   }
 }
+
+.ant-tooltip.domain-type-tooltip-container {
+  max-width: 750px;
+  .ant-tooltip-arrow-content::before {
+    background: @white;
+  }
+  .ant-tooltip-inner {
+    background: @white;
+    padding: 20px;
+  }
+}

openmetadata-ui/src/main/resources/ui/src/components/Form/Form.interface.ts

@@ -16,7 +16,9 @@ import { ReactNode } from 'react';
 
 export interface FormItemLabelProps {
   label: ReactNode;
-  helperText?: string;
+  helperText?: ReactNode;
   placement?: TooltipPlacement;
+  overlayClassName?: string;
+  overlayInnerStyle?: React.CSSProperties;
   align?: TooltipProps['align'];
 }

openmetadata-ui/src/main/resources/ui/src/components/Form/FormItemLabel.tsx

@@ -21,13 +21,21 @@ const FormItemLabel = ({
   label,
   helperText,
   align,
+  overlayInnerStyle,
+  overlayClassName,
   placement = 'top',
 }: FormItemLabelProps) => {
   return (
     <>
       <span data-testid="form-item-label">{label}</span>
       {helperText && (
-        <Tooltip align={align} placement={placement} title={helperText}>
+        <Tooltip
+          destroyTooltipOnHide
+          align={align}
+          overlayClassName={overlayClassName}
+          overlayInnerStyle={overlayInnerStyle}
+          placement={placement}
+          title={helperText}>
           <InfoCircleOutlined
             className="m-l-xs"
             data-testid="helper-icon"

openmetadata-ui/src/main/resources/ui/src/constants/Domain.constants.ts

@@ -0,0 +1,29 @@
+/*
+ *  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 i18n from '../utils/i18next/LocalUtil';
+
+export const DOMAIN_TYPE_DATA = [
+  {
+    type: i18n.t('label.aggregate'),
+    description: i18n.t('message.aggregate-domain-type-description'),
+  },
+  {
+    type: i18n.t('label.consumer-aligned'),
+    description: i18n.t('message.consumer-aligned-domain-type-description'),
+  },
+  {
+    type: i18n.t('label.source-aligned'),
+    description: i18n.t('message.source-aligned-domain-type-description'),
+  },
+];

openmetadata-ui/src/main/resources/ui/src/interface/FormUtils.interface.ts

@@ -50,7 +50,7 @@ export interface FieldProp {
   props?: Record<string, unknown> & { children?: ReactNode };
   formItemProps?: FormItemProps;
   rules?: FormRule[];
-  helperText?: string;
+  helperText?: ReactNode;
   placeholder?: string;
   hasSeparator?: boolean;
   formItemLayout?: FormItemLayout;

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

@@ -43,6 +43,7 @@
     "advanced-configuration": "Erweiterte Konfiguration",
     "advanced-entity": "Erweitertes {{entity}}",
     "advanced-search": "Erweiterte Suche",
+    "aggregate": "Aggregate",
     "airflow-config-plural": "Airflow-Konfigurationen",
     "alert": "Warnung",
     "alert-lowercase": "warnung",
@@ -182,6 +183,7 @@
     "connection-timeout": "Verbindungszeitüberschreitung",
     "connection-timeout-plural": "Verbindungszeitüberschreitungen",
     "connector": "Connector",
+    "consumer-aligned": "Consumer-aligned",
     "container": "Container",
     "container-plural": "Container",
     "conversation": "Konversation",
@@ -942,6 +944,7 @@
     "soft-delete": "Soft-Löschung",
     "soft-lowercase": "soft",
     "source": "Quelle",
+    "source-aligned": "Source-aligned",
     "source-column": "Quellenspalte",
     "source-match": "Quellenübereinstimmung",
     "source-plural": "Quellen",
@@ -1169,6 +1172,7 @@
     "adding-new-user-to-entity": "Neue Benutzer zu {{entity}} hinzufügen",
     "admin-only-action": "Diese Aktion kann nur von einem Administrator durchgeführt werden.",
     "advanced-search-message": "Finden Sie die richtigen Datenvermögenswerte mithilfe des Syntax-Editors mit und/oder-Bedingungen.",
+    "aggregate-domain-type-description": "Domains closer to online services and transactional databases that include events, and transactional data.",
     "airflow-guide-message": "OpenMetadata verwendet Airflow, um Ingestion Connectors auszuführen. Wir haben verwaltete APIs entwickelt, um Ingestion Connectors bereitzustellen. Verwenden Sie bitte die OpenMetadata Airflow-Instanz oder beziehen Sie sich auf die unten stehende Anleitung, um die verwalteten APIs in Ihrer Airflow-Installation zu installieren.",
     "airflow-host-ip-address": "OpenMetadata wird sich von der IP {{hostIp}} mit Ihrer Ressource verbinden. Stellen Sie sicher, dass eingehender Datenverkehr in Ihren Netzwerksicherheitseinstellungen zugelassen ist.",
     "alerts-description": "Bleiben Sie mit zeitnahen Benachrichtigungen über Webhooks auf dem neuesten Stand.",
@@ -1223,6 +1227,7 @@
     "connection-test-failed": "Der Test der Verbindung ist fehlgeschlagen. Bitte überprüfen Sie Ihre Verbindung und Berechtigungen für die fehlgeschlagenen Schritte.",
     "connection-test-successful": "Der Test der Verbindung war erfolgreich.",
     "connection-test-warning": "Der Test der Verbindung war teilweise erfolgreich: Einige Schritte hatten Fehler, es werden nur teilweise Metadaten übernommen.",
+    "consumer-aligned-domain-type-description": "Domains that collect and curate the data from multiple source-aligned to provide aggregated data and data products, such as Customer 360, Customers sessions, etc., for other domains to consume.",
     "copied-to-clipboard": "In die Zwischenablage kopiert",
     "copy-to-clipboard": "Link in die Zwischenablage kopiert",
     "create-new-domain-guide": "A data mesh is a decentralized data architecture that organizes data by a specific business domain following the concepts of domain-oriented design. Teams take ownership of both operational and analytical data that belongs to the domain. Based on the Data Contract, consumers are provided with Data as a Product. It is powered by Domain-agnostic self-serve data infrastructure. There are three types of domains: Consumer-aligned, Aggregate, and Source-aligned. Domains have Enabling Teams for consulting.",
@@ -1546,6 +1551,7 @@
     "size-evolution-description": "Size evolution of assets in organization.",
     "soft-delete-message-for-entity": "Durch das Soft-Löschen wird {{entity}} deaktiviert. Dadurch werden alle Entdeckungs-, Lese- oder Schreibvorgänge auf {{entity}} deaktiviert.",
     "something-went-wrong": "Etwas ist schiefgelaufen",
+    "source-aligned-domain-type-description": "Domains that are user-facing where the end product of a combination of data from various domains are available for business users or data citizens for data-driven decision-making.",
     "special-character-not-allowed": "Sonderzeichen sind nicht erlaubt.",
     "sql-query-tooltip": "Abfragen, die eine oder mehrere Zeilen zurückgeben, führen dazu, dass der Test fehlschlägt.",
     "sso-provider-not-supported": "SSO-Provider {{provider}} wird nicht unterstützt.",

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

@@ -43,6 +43,7 @@
     "advanced-configuration": "Advanced Configuration",
     "advanced-entity": "Advanced {{entity}}",
     "advanced-search": "Advanced Search",
+    "aggregate": "Aggregate",
     "airflow-config-plural": "airflow configs",
     "alert": "Alert",
     "alert-lowercase": "alert",
@@ -182,6 +183,7 @@
     "connection-timeout": "Connection Timeout",
     "connection-timeout-plural": "Connection Timeout",
     "connector": "Connector",
+    "consumer-aligned": "Consumer-aligned",
     "container": "Container",
     "container-plural": "Containers",
     "conversation": "Conversation",
@@ -942,6 +944,7 @@
     "soft-delete": "Soft Delete",
     "soft-lowercase": "soft",
     "source": "Source",
+    "source-aligned": "Source-aligned",
     "source-column": "Source Column",
     "source-match": "Match By Event Source",
     "source-plural": "Sources",
@@ -1169,6 +1172,7 @@
     "adding-new-user-to-entity": "Adding new users to {{entity}}",
     "admin-only-action": "Only an Admin can perform this action.",
     "advanced-search-message": "Discover the right data assets using the syntax editor with and/or conditions.",
+    "aggregate-domain-type-description": "Domains closer to online services and transactional databases that include events, and transactional data.",
     "airflow-guide-message": "OpenMetadata uses Airflow to run Ingestion Connectors. We developed Managed APIs to deploy ingestion connectors. Please use OpenMetadata Airflow instance or refer to the guide below to install the managed APIs in your Airflow installation.",
     "airflow-host-ip-address": "OpenMetadata will connect to your resource from the IP {{hostIp}}. Make sure to allow inbound traffic in your network security settings.",
     "alerts-description": "Stay current with timely alerts using webhooks.",
@@ -1223,6 +1227,7 @@
     "connection-test-failed": "Test connection failed, please validate your connection and permissions for the failed steps.",
     "connection-test-successful": "Connection test was successful.",
     "connection-test-warning": "Test connection partially successful: Some steps had failures, we will only ingest partial metadata.",
+    "consumer-aligned-domain-type-description": "Domains that collect and curate the data from multiple source-aligned to provide aggregated data and data products, such as Customer 360, Customers sessions, etc., for other domains to consume.",
     "copied-to-clipboard": "Copied to the clipboard",
     "copy-to-clipboard": "Link copied to clipboard",
     "create-new-domain-guide": "A data mesh is a decentralized data architecture that organizes data by a specific business domain following the concepts of domain-oriented design. Teams take ownership of both operational and analytical data that belongs to the domain. Based on the Data Contract, consumers are provided with Data as a Product. It is powered by Domain-agnostic self-serve data infrastructure. There are three types of domains: Consumer-aligned, Aggregate, and Source-aligned. Domains have Enabling Teams for consulting.",
@@ -1546,6 +1551,7 @@
     "size-evolution-description": "Size evolution of assets in organization.",
     "soft-delete-message-for-entity": "Soft deleting will deactivate the {{entity}}. This will disable any discovery, read or write operations on {{entity}}.",
     "something-went-wrong": "Something went wrong",
+    "source-aligned-domain-type-description": "Domains that are user-facing where the end product of a combination of data from various domains are available for business users or data citizens for data-driven decision-making.",
     "special-character-not-allowed": "Special characters are not allowed.",
     "sql-query-tooltip": "Queries returning one or more rows will result in the test failing.",
     "sso-provider-not-supported": "SSO Provider {{provider}} is not supported.",

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

@@ -43,6 +43,7 @@
     "advanced-configuration": "Advanced Configuration",
     "advanced-entity": "{{entity}} avanzado",
     "advanced-search": "Advanced Search",
+    "aggregate": "Aggregate",
     "airflow-config-plural": "Configuraciones de airflow",
     "alert": "Alerta",
     "alert-lowercase": "alert",
@@ -182,6 +183,7 @@
     "connection-timeout": "Connection Timeout",
     "connection-timeout-plural": "Tiempo de conexión expirado",
     "connector": "Conector",
+    "consumer-aligned": "Consumer-aligned",
     "container": "Contenedor",
     "container-plural": "Contenedores",
     "conversation": "Conversación",
@@ -942,6 +944,7 @@
     "soft-delete": "Borrado Suave",
     "soft-lowercase": "suave",
     "source": "Fuente",
+    "source-aligned": "Source-aligned",
     "source-column": "Columna de Origen",
     "source-match": "Coincidir por Fuente de Eventos",
     "source-plural": "Fuentes",
@@ -1169,6 +1172,7 @@
     "adding-new-user-to-entity": "Añadir nuevos usuarios a {{entity}}",
     "admin-only-action": "Solo un administrador puede realizar esta acción.",
     "advanced-search-message": "Descubre los activos de datos correctos usando el editor de sintaxis con condiciones y/o.",
+    "aggregate-domain-type-description": "Domains closer to online services and transactional databases that include events, and transactional data.",
     "airflow-guide-message": "OpenMetadata utiliza Airflow para ejecutar las ingestas. Hemos desarrollado APIs para deployar los conectores dinámicamente a Airflow. Puede utilizar la instancia de Airflow de OpenMetadata o consultar la guía de Airflow para instalar las APIs.",
     "airflow-host-ip-address": "OpenMetadata se conectará a su servicio desde la dirección IP {{hostIp}}. Asegúrese de permitir el tráfico entrante en la configuración de seguridad de su red.",
     "alerts-description": "Manténgase actualizado con alertas oportunas utilizando webhooks.",
@@ -1223,6 +1227,7 @@
     "connection-test-failed": "Falló la prueba de conexión.",
     "connection-test-successful": "La prueba de conexión fue un éxito.",
     "connection-test-warning": "Test connection partially successful: Some steps had failures, we will only ingest partial metadata.",
+    "consumer-aligned-domain-type-description": "Domains that collect and curate the data from multiple source-aligned to provide aggregated data and data products, such as Customer 360, Customers sessions, etc., for other domains to consume.",
     "copied-to-clipboard": "Copiado al portapapeles",
     "copy-to-clipboard": "Link copied to clipboard",
     "create-new-domain-guide": "A data mesh is a decentralized data architecture that organizes data by a specific business domain following the concepts of domain-oriented design. Teams take ownership of both operational and analytical data that belongs to the domain. Based on the Data Contract, consumers are provided with Data as a Product. It is powered by Domain-agnostic self-serve data infrastructure. There are three types of domains: Consumer-aligned, Aggregate, and Source-aligned. Domains have Enabling Teams for consulting.",
@@ -1546,6 +1551,7 @@
     "size-evolution-description": "Size evolution of assets in organization.",
     "soft-delete-message-for-entity": "La eliminación suave desactivará la {{entity}}. Esto deshabilitará cualquier operación de descubrimiento, lectura o escritura en {{entity}}.",
     "something-went-wrong": "Algo salió mal",
+    "source-aligned-domain-type-description": "Domains that are user-facing where the end product of a combination of data from various domains are available for business users or data citizens for data-driven decision-making.",
     "special-character-not-allowed": "No se permiten caracteres especiales.",
     "sql-query-tooltip": "Las consultas que devuelvan una o varias filas provocarán el fallo del test.",
     "sso-provider-not-supported": "No se admite el proveedor SSO {{provider}}.",