UI : fix add owner and tier functionality on Translated entity page (#9244)

* fix add owner and tier functionality on Translated entity page

* get entity info keys from enum

* remove unwanted translation keys

* minor changes

openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx

@@ -31,7 +31,7 @@ import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { EntityField } from '../../constants/Feeds.constants';
 import { observerOptions } from '../../constants/Mydata.constants';
 import { SettledStatus } from '../../enums/axios.enum';
-import { EntityType } from '../../enums/entity.enum';
+import { EntityInfo, EntityType } from '../../enums/entity.enum';
 import { OwnerType } from '../../enums/user.enum';
 import { Dashboard } from '../../generated/entity/data/dashboard';
 import { ThreadType } from '../../generated/entity/feed/thread';
@@ -230,7 +230,7 @@ const DashboardDetails = ({
 
   const extraInfo: Array<ExtraInfo> = [
     {
-      key: 'Owner',
+      key: EntityInfo.OWNER,
       value: getOwnerValue(owner),
       placeholderText: getEntityPlaceHolder(
         getEntityName(owner),
@@ -241,11 +241,11 @@ const DashboardDetails = ({
       profileName: owner?.type === OwnerType.USER ? owner?.name : undefined,
     },
     {
-      key: 'Tier',
+      key: EntityInfo.TIER,
       value: tier?.tagFQN ? tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1] : '',
     },
     {
-      key: `${serviceType} Url`,
+      key: `${serviceType} ${EntityInfo.URL}`,
       value: dashboardUrl,
       placeholderText: entityName,
       isLink: true,

openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx

@@ -24,7 +24,7 @@ import { ROUTES } from '../../constants/constants';
 import { EntityField } from '../../constants/Feeds.constants';
 import { observerOptions } from '../../constants/Mydata.constants';
 import { CSMode } from '../../enums/codemirror.enum';
-import { EntityType, FqnPart } from '../../enums/entity.enum';
+import { EntityInfo, EntityType, FqnPart } from '../../enums/entity.enum';
 import { OwnerType } from '../../enums/user.enum';
 import {
   JoinedWith,
@@ -382,7 +382,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
 
   const extraInfo: Array<ExtraInfo> = [
     {
-      key: t('label.owner'),
+      key: EntityInfo.OWNER,
       value: getOwnerValue(owner),
       placeholderText: getEntityPlaceHolder(
         getEntityName(owner),
@@ -395,23 +395,23 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
       profileName: owner?.type === OwnerType.USER ? owner?.name : undefined,
     },
     {
-      key: t('label.tier'),
+      key: EntityInfo.TIER,
       value: tier?.tagFQN ? tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1] : '',
     },
-    { key: t('label.type'), value: `${tableType}`, showLabel: true },
+    { key: EntityInfo.TYPE, value: `${tableType}`, showLabel: true },
     { value: usage },
-    { value: `${weeklyUsageCount} Queries` },
+    { value: `${weeklyUsageCount} ${t('label.query-plural')}` },
     {
-      key: t('label.column-plural'),
+      key: EntityInfo.COLUMNS,
       value:
         tableProfile && tableProfile?.columnCount
-          ? `${tableProfile.columnCount} Columns`
+          ? `${tableProfile.columnCount} ${t('label.columns-plural')}`
           : columns.length
-          ? `${columns.length} Columns`
+          ? `${columns.length} ${t('label.columns-plural')}`
           : '',
     },
     {
-      key: t('label.row-plural'),
+      key: EntityInfo.ROWS,
       value: prepareTableRowInfo(),
     },
   ];

openmetadata-ui/src/main/resources/ui/src/components/MlModelDetail/MlModelDetail.component.tsx

@@ -36,7 +36,7 @@ import {
 } from '../../constants/constants';
 import { EntityField } from '../../constants/Feeds.constants';
 import { observerOptions } from '../../constants/Mydata.constants';
-import { EntityType } from '../../enums/entity.enum';
+import { EntityInfo, EntityType } from '../../enums/entity.enum';
 import { ServiceCategory } from '../../enums/service.enum';
 import { OwnerType } from '../../enums/user.enum';
 import { MlHyperParameter } from '../../generated/api/data/createMlModel';
@@ -173,7 +173,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
 
   const mlModelPageInfo: ExtraInfo[] = [
     {
-      key: t('label.owner'),
+      key: EntityInfo.OWNER,
       value: getOwnerValue(mlModelDetail.owner ?? ({} as EntityReference)),
       placeholderText: getEntityPlaceHolder(
         getEntityName(mlModelDetail.owner),
@@ -187,23 +187,23 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
           : undefined,
     },
     {
-      key: t('label.tier'),
+      key: EntityInfo.TIER,
       value: mlModelTier?.tagFQN
         ? mlModelTier.tagFQN.split(FQN_SEPARATOR_CHAR)[1]
         : '',
     },
     {
-      key: t('label.algorithm'),
+      key: EntityInfo.ALGORITHM,
       value: mlModelDetail.algorithm,
       showLabel: true,
     },
     {
-      key: t('label.target'),
+      key: EntityInfo.TARGET,
       value: mlModelDetail.target,
       showLabel: true,
     },
     {
-      key: t('label.server'),
+      key: EntityInfo.SERVER,
       value: mlModelDetail.server,
       showLabel: true,
       isLink: true,
@@ -211,7 +211,7 @@ const MlModelDetail: FC<MlModelDetailProp> = ({
     ...(!isUndefined(mlModelDetail.dashboard)
       ? [
           {
-            key: t('label.dashboard'),
+            key: EntityInfo.DASHBOARD,
             value: getDashboardDetailsPath(
               mlModelDetail.dashboard?.fullyQualifiedName as string
             ),

openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx

@@ -47,7 +47,7 @@ import {
   PIPELINE_DETAILS_TABS,
   PIPELINE_TASK_TABS,
 } from '../../constants/pipeline.constants';
-import { EntityType } from '../../enums/entity.enum';
+import { EntityInfo, EntityType } from '../../enums/entity.enum';
 import { FeedFilter } from '../../enums/mydata.enum';
 import { OwnerType } from '../../enums/user.enum';
 import { CreateThread } from '../../generated/api/feed/createThread';
@@ -251,7 +251,7 @@ const PipelineDetails = ({
 
   const extraInfo: Array<ExtraInfo> = [
     {
-      key: 'Owner',
+      key: EntityInfo.OWNER,
       value: owner && getOwnerValue(owner),
       placeholderText: getEntityPlaceHolder(
         getEntityName(owner),
@@ -262,11 +262,11 @@ const PipelineDetails = ({
       profileName: owner?.type === OwnerType.USER ? owner?.name : undefined,
     },
     {
-      key: 'Tier',
+      key: EntityInfo.TIER,
       value: tier?.tagFQN ? tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1] : '',
     },
     {
-      key: `${serviceType} Url`,
+      key: `${serviceType} ${EntityInfo.URL}`,
       value: pipelineUrl,
       placeholderText: entityName,
       isLink: true,

openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx

@@ -26,7 +26,7 @@ import { restoreTopic } from '../../axiosAPIs/topicsAPI';
 import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { EntityField } from '../../constants/Feeds.constants';
 import { observerOptions } from '../../constants/Mydata.constants';
-import { EntityType } from '../../enums/entity.enum';
+import { EntityInfo, EntityType } from '../../enums/entity.enum';
 import { OwnerType } from '../../enums/user.enum';
 import { Topic } from '../../generated/entity/data/topic';
 import { ThreadType } from '../../generated/entity/feed/thread';
@@ -167,22 +167,25 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
 
   const getConfigDetails = () => {
     return [
-      { key: 'Partitions', value: `${partitions} partitions` },
       {
-        key: 'Replication Factor',
+        key: EntityInfo.PARTITIONS,
-        value: `${replicationFactor} replication factor`,
+        value: `${partitions} ${t('label.partitions')}`,
       },
       {
-        key: 'Retention Size',
+        key: EntityInfo.REPLICATION_FACTOR,
-        value: `${bytesToSize(retentionSize)} retention size`,
+        value: `${replicationFactor} ${t('label.replication-factor')}`,
       },
       {
-        key: 'Clean-up Policies',
+        key: EntityInfo.RETENTION_SIZE,
-        value: `${cleanupPolicies.join(', ')} clean-up policies`,
+        value: `${bytesToSize(retentionSize)}  ${t('label.retention-size')}`,
       },
       {
-        key: 'Max Message Size',
+        key: EntityInfo.CLEAN_UP_POLICIES,
-        value: `${bytesToSize(maximumMessageSize)} maximum size`,
+        value: `${cleanupPolicies.join(', ')} ${t('label.clean-up-policies')}`,
+      },
+      {
+        key: EntityInfo.MAX_MESSAGE_SIZE,
+        value: `${bytesToSize(maximumMessageSize)} ${t('label.maximum-size')} `,
       },
     ];
   };
@@ -262,7 +265,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
 
   const extraInfo: Array<ExtraInfo> = [
     {
-      key: t('label.owner'),
+      key: EntityInfo.OWNER,
       value: getOwnerValue(owner),
       placeholderText: getEntityPlaceHolder(
         getEntityName(owner),
@@ -273,7 +276,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
       profileName: owner?.type === OwnerType.USER ? owner?.name : undefined,
     },
     {
-      key: t('label.tier'),
+      key: EntityInfo.TIER,
       value: tier?.tagFQN ? tier.tagFQN.split(FQN_SEPARATOR_CHAR)[1] : '',
     },
     ...getConfigDetails(),

openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx

@@ -14,7 +14,7 @@
 import { Button as AntdButton, Dropdown, Space } from 'antd';
 import Tooltip, { RenderFunction } from 'antd/lib/tooltip';
 import classNames from 'classnames';
-import { isString, isUndefined } from 'lodash';
+import { isString, isUndefined, toLower } from 'lodash';
 import { ExtraInfo } from 'Models';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -138,7 +138,7 @@ const EntitySummaryDetails = ({
             )
           ) : (
             <>
-              {t('label.no-entity', { entity: 'Owner' })}
+              {t('label.no-entity', { entity: t('label.owner') })}
               <span
                 data-testid={`edit-${data.key}-icon`}
                 onClick={() => setShow(!show)}>
@@ -155,7 +155,7 @@ const EntitySummaryDetails = ({
         retVal =
           !displayVal || displayVal === '--' ? (
             <>
-              {t('label.no-entity', { entity: 'Tier' })}
+              {t('label.no-entity', { entity: t('label.tier') })}
               <Dropdown
                 overlay={
                   <TierCard
@@ -198,9 +198,11 @@ const EntitySummaryDetails = ({
             {data.key
               ? displayVal
                 ? data.showLabel
-                  ? `${data.key}: `
+                  ? `${t(`label.${toLower(data.key)}`)} : `
                   : null
-                : `${t('label.no-entity', { entity: data.key })}`
+                : `${t('label.no-entity', {
+                    entity: t(`label.${toLower(data.key)}`),
+                  })}`
               : null}
           </>
         );

openmetadata-ui/src/main/resources/ui/src/enums/entity.enum.ts

@@ -97,3 +97,21 @@ export enum FqnPart {
   Column,
   NestedColumn,
 }
+
+export enum EntityInfo {
+  OWNER = 'Owner',
+  TIER = 'Tier',
+  TYPE = 'Type',
+  COLUMNS = 'Columns',
+  ROWS = 'row-plural',
+  URL = 'Url',
+  ALGORITHM = 'Algorithm',
+  TARGET = 'Target',
+  SERVER = 'Server',
+  DASHBOARD = 'Dashboard',
+  PARTITIONS = 'Partitions',
+  REPLICATION_FACTOR = 'Replication Factor',
+  RETENTION_SIZE = 'Retention Size',
+  CLEAN_UP_POLICIES = 'Clean-up Policies',
+  MAX_MESSAGE_SIZE = 'Max Message Size',
+}

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

@@ -310,7 +310,6 @@
     "clear-all": "Clear All",
     "view-less": "View less",
     "view-more": "View more",
-    "column-plural": "Columns",
     "field-plural": "Fields",
     "delete-group": "Delete Group",
     "add-display-name": "Add display name",
@@ -463,7 +462,12 @@
     "pipeline-lowercase": "pipeline",
     "service-lowercase": "service",
     "query-lowercase": "query",
-    "table-lowercase": "table"
+    "table-lowercase": "table",
+    "partitions": "Partitions",
+    "replication-factor": "replication factor",
+    "retention-size": "retention-size",
+    "clean-up-policies": "clean-up policies",
+    "maximum-size": "maximum size"
   },
   "message": {
     "service-email-required": "Service account Email is required",

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

@@ -313,7 +313,6 @@
     "clear-all": "Effacer tout",
     "view-less": "Voir moins",
     "view-more": "Voir plus",
-    "column-plural": "Colonnes",
     "field-plural": "Champs",
     "delete-group": "Supprimer le Groupe",
     "add-display-name": "Ajouter un nom d'affichage",