Fix (ui) :- Tag dropdown overflow issue and added localisation (#8173)

* Fix Tag dropdown overflow issue and added localisation

* added missing colon

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

@@ -24,6 +24,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link, useHistory } from 'react-router-dom';
 import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants';
 import { getTableDetailsPath } from '../../constants/constants';
@@ -80,6 +81,7 @@ const EntityTable = ({
   entityFieldTasks,
 }: EntityTableProps) => {
   const history = useHistory();
+  const { t } = useTranslation();
 
   const [searchedColumns, setSearchedColumns] = useState<Column[]>([]);
 
@@ -391,14 +393,14 @@ const EntityTable = ({
           destroyTooltipOnHide
           content={
             hasDescription
-              ? 'Request update description'
+              ? t('label.request-update-description')
-              : 'Request description'
+              : t('label.request-description')
           }
           overlayClassName="ant-popover-request-description"
           trigger="hover"
           zIndex={9999}>
           <SVGIcons
-            alt="request-description"
+            alt={t('label.request-description')}
             icon={Icons.REQUEST}
             width="16px"
           />
@@ -409,7 +411,9 @@ const EntityTable = ({
 
   const getRequestTagsElement = (cell: Column) => {
     const hasTags = !isEmpty(cell?.tags || []);
-    const text = hasTags ? 'Update request tags' : 'Request tags';
+    const text = hasTags
+      ? t('label.update-request-tags')
+      : t('label.request-tags');
 
     return (
       <button
@@ -424,7 +428,11 @@ const EntityTable = ({
           overlayClassName="ant-popover-request-description"
           trigger="hover"
           zIndex={9999}>
-          <SVGIcons alt="request-tags" icon={Icons.REQUEST} width="16px" />
+          <SVGIcons
+            alt={t('label.request-tags')}
+            icon={Icons.REQUEST}
+            width="16px"
+          />
         </Popover>
       </button>
     );
@@ -489,7 +497,9 @@ const EntityTable = ({
               {record?.description ? (
                 <RichTextEditorPreviewer markdown={record?.description} />
               ) : (
-                <span className="tw-no-description">No description</span>
+                <span className="tw-no-description">
+                  {t('label.no-description')}
+                </span>
               )}
             </div>
             <div className="tw-flex tw--mt-1.5">
@@ -501,9 +511,9 @@ const EntityTable = ({
                         className="tw-self-start tw-w-7 tw-h-7 focus:tw-outline-none tw-flex-none hover-cell-icon"
                         onClick={() => handleUpdate(record, index)}>
                         <SVGIcons
-                          alt="edit"
+                          alt={t('label.edit')}
                           icon="icon-edit"
-                          title="Edit"
+                          title={t('label.edit')}
                           width="16px"
                         />
                       </button>
@@ -543,7 +553,7 @@ const EntityTable = ({
         {checkIfJoinsAvailable(record?.name) && (
           <div className="tw-mt-3" data-testid="frequently-joined-columns">
             <span className="tw-text-grey-muted tw-mr-1">
-              Frequently joined columns:
+              {t('label.frequently-joined-columns')}:
             </span>
             <span>
               {getFrequentlyJoinedWithColumns(record?.name)
@@ -640,6 +650,7 @@ const EntityTable = ({
               }
             }}>
             <TagsContainer
+              className="w-max-256"
               editable={editColumnTag?.index === index}
               isLoading={isTagLoading && editColumnTag?.index === index}
               selectedTags={record?.tags || []}
@@ -724,7 +735,7 @@ const EntityTable = ({
   const columns = useMemo(
     () => [
       {
-        title: 'Name',
+        title: t('label.name'),
         dataIndex: 'name',
         key: 'name',
         accessor: 'name',
@@ -734,7 +745,7 @@ const EntityTable = ({
           renderCell(TABLE_HEADERS_V1.name, record, index),
       },
       {
-        title: 'Type',
+        title: t('label.type'),
         dataIndex: 'dataTypeDisplay',
         key: 'dataTypeDisplay',
         accessor: 'dataTypeDisplay',
@@ -745,7 +756,7 @@ const EntityTable = ({
         },
       },
       {
-        title: 'Description',
+        title: t('label.description'),
         dataIndex: 'description',
         key: 'description',
         accessor: 'description',
@@ -753,7 +764,7 @@ const EntityTable = ({
           renderCell(TABLE_HEADERS_V1.description, record, index),
       },
       {
-        title: 'Tags',
+        title: t('label.tags'),
         dataIndex: 'tags',
         key: 'tags',
         accessor: 'tags',
@@ -801,8 +812,8 @@ const EntityTable = ({
       />
       {editColumn && (
         <ModalWithMarkdownEditor
-          header={`Edit column: "${editColumn.column.name}"`}
+          header={`${t('label:edit-column')}: "${editColumn.column.name}"`}
-          placeholder="Enter Column Description"
+          placeholder={t('label.enter-column-description')}
           value={editColumn.column.description as string}
           onCancel={closeEditColumnModal}
           onSave={handleEditColumnChange}

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

@@ -59,7 +59,7 @@ const Tags: FunctionComponent<TagProps> = ({
       );
     const tagName = showOnlyName
       ? tag.split(FQN_SEPARATOR_CHAR).slice(-2).join(FQN_SEPARATOR_CHAR)
-      : getTagDisplay(tag);
+      : tag;
 
     return (
       <span
@@ -81,7 +81,7 @@ const Tags: FunctionComponent<TagProps> = ({
           )}
           data-testid={editable && isRemovable ? `tag-${tag}` : `add-tag`}>
           {startIcon}
-          <span>{tagName}</span>
+          <span>{getTagDisplay(tagName)}</span>
         </span>
         {editable && isRemovable && (
           <span

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

@@ -29,7 +29,7 @@ export const SUCCESS_COLOR = '#008376';
 
 export const SUPPORTED_FIELD_TYPES = ['string', 'markdown', 'integer'];
 
-export const TAG_VIEW_CAP = 35;
+export const TAG_VIEW_CAP = 33;
 export const FOLLOWERS_VIEW_CAP = 20;
 export const INITIAL_PAGING_VALUE = 1;
 export const JSON_TAB_SIZE = 2;

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

@@ -1,5 +1,8 @@
 {
   "label": {
+    "name": "Name",
+    "type": "Type",
+    "description": "Description",
     "docs": "Docs",
     "api-uppercase": "API",
     "slack": "Slack",
@@ -9,6 +12,8 @@
     "glossary": "Glossary",
     "tags": "Tags",
     "settings": "Settings",
+    "edit": "Edit",
+    "edit-column": "Edit column",
     "search-global": "Search for Tables, Topics, Dashboards, Pipelines and ML Models",
     "om-description": "Centralized Metadata Store, Discover, Collaborate and get your Data Right",
     "login": "Login",
@@ -28,7 +33,14 @@
     "no-description": "No description",
     "data-type": "Data type",
     "table-metrics-summary": "Table Metrics Summary",
-    "table-tests-summary": "Table Tests Summary"
+    "table-tests-summary": "Table Tests Summary",
+    "frequently-joined-columns": "Frequently joined columns",
+    "no-description": "No description",
+    "request-tags": "Request tags",
+    "update-request-tags": "Update request tags",
+    "request-description": "Request description",
+    "request-update-description": "Request update description",
+    "enter-column-description": "Enter Column Description"
   },
   "message": {},
   "server": {},

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -99,6 +99,9 @@
 .w-full {
   width: 100%;
 }
+.w-max-256 {
+  max-width: 256px;
+}
 
 //Height
 .h-7 {