From 1ffd29e266cb2996c09c3e612089d9e17f5d67d7 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 8 Jul 2022 21:05:53 +0530
Subject: [PATCH] Fix #5956 Long team names go out of the box (#5959)

* Fix #5956 Long team names go out of the box

* Fix unit test

* Minor change

* Fix roles page issue

* Revert policy change

* Fix Long name issue

* Minor change

* Fix unit test
---
 .../EntityDeleteModal/EntityDeleteModal.tsx   |  4 ++--
 .../components/TeamDetails/TeamDetails.tsx    | 11 +++++-----
 .../TeamsAndUsers/TeamsAndUsers.component.tsx | 14 +++++++-----
 .../src/components/Users/Users.component.tsx  | 13 ++++++++---
 .../ui/src/components/app-bar/Appbar.tsx      | 15 ++++++++-----
 .../common/DeleteWidget/DeleteWidgetBody.tsx  | 13 ++++++-----
 .../pages/RolesPage/RolesPage.component.tsx   | 22 ++++++++++---------
 .../resources/ui/src/pages/tags/index.tsx     | 13 ++++++++---
 .../ui/src/pages/teams/AddUsersModal.tsx      |  7 +++---
 .../resources/ui/src/pages/teams/UserCard.tsx | 11 ++++++----
 .../main/resources/ui/src/styles/tailwind.css |  6 ++++-
 11 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
index 0ea6ddeef68..a8b9e5a34cb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
@@ -60,7 +60,7 @@ const EntityDeleteModal: FC<Prop> = ({
       <div className="tw-modal-backdrop" />
       <div className="tw-modal-container tw-w-120">
         <div className={classNames('tw-modal-header')}>
-          <p className="tw-modal-title" data-testid="modal-header">
+          <p className="tw-modal-title tw-break-all" data-testid="modal-header">
             {softDelete ? (
               <span>
                 Soft delete <strong>{entityName}</strong>
@@ -73,7 +73,7 @@ const EntityDeleteModal: FC<Prop> = ({
           </p>
         </div>
         <div className={classNames('tw-modal-body')} data-testid="body-text">
-          <p className="tw-mb-2">
+          <p className="tw-mb-2 tw-break-all">
             {bodyText ||
               `Once you delete this ${getTitleCase(
                 entityType
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
index b232850434a..913b3dde3ff 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
@@ -43,6 +43,7 @@ import { filterEntityAssets, getInfoElements } from '../../utils/EntityUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import { Button } from '../buttons/Button/Button';
 import Description from '../common/description/Description';
+import Ellipses from '../common/Ellipses/Ellipses';
 import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
 import NextPrevious from '../common/next-previous/NextPrevious';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
@@ -516,9 +517,7 @@ const TeamDetails = ({
 
   const getTeamHeading = () => {
     return (
-      <div
-        className="tw-heading tw-text-link tw-text-base tw-truncate tw-w-120"
-        title={heading}>
+      <div className="tw-heading tw-text-link tw-text-base">
         {isHeadingEditing ? (
           <div className="tw-flex tw-items-center tw-gap-1">
             <input
@@ -553,8 +552,10 @@ const TeamDetails = ({
             </div>
           </div>
         ) : (
-          <div className="tw-flex tw-group">
-            <span data-testid="team-heading">{heading}</span>
+          <div className="tw-flex tw-group" data-testid="team-heading">
+            <Ellipses tooltip className="tw-w-120" rows={1}>
+              {heading}
+            </Ellipses>
             {isActionAllowed() && (
               <div className={classNames('tw-w-5 tw-min-w-max')}>
                 <NonAdminAction
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
index 33ecbed34b5..10e2f9df96f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
@@ -22,6 +22,7 @@ import AddUsersModal from '../../pages/teams/AddUsersModal';
 import { getActiveCatClass, getCountBadge } from '../../utils/CommonUtils';
 import { getActiveUsers } from '../../utils/TeamUtils';
 import { Button } from '../buttons/Button/Button';
+import Ellipses from '../common/Ellipses/Ellipses';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
 import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
 import Loader from '../Loader/Loader';
@@ -130,13 +131,14 @@ const TeamsAndUsers = ({
                   className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-flex tw-justify-between ${getActiveCatClass(
                     team.name,
                     currentTeam?.name
-                  )}`}>
-                  <p
-                    className="tag-category label-category tw-self-center tw-truncate"
-                    data-testid="team-name"
-                    title={team.displayName ?? team.name}>
+                  )}`}
+                  data-testid="team-name">
+                  <Ellipses
+                    tooltip
+                    className="tag-category label-category tw-self-center tw-w-32"
+                    rows={1}>
                     {team.displayName ?? team.name}
-                  </p>
+                  </Ellipses>
                 </div>
                 {getCountBadge(
                   getActiveUsers(team.users).length,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
index dd8c1fb4b24..38aed32a6a9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
@@ -57,6 +57,7 @@ import ActivityFeedList from '../ActivityFeed/ActivityFeedList/ActivityFeedList'
 import { filterListTasks } from '../ActivityFeed/ActivityFeedList/ActivityFeedList.util';
 import { Button } from '../buttons/Button/Button';
 import Description from '../common/description/Description';
+import Ellipses from '../common/Ellipses/Ellipses';
 import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
 import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle';
 import TabsPane from '../common/TabsPane/TabsPane';
@@ -326,7 +327,9 @@ const Users = ({
             data-testid={team.name}
             key={i}>
             <SVGIcons alt="icon" className="tw-w-4" icon={Icons.TEAMS_GREY} />
-            <span>{getEntityName(team)}</span>
+            <Ellipses tooltip className="tw-w-48">
+              {getEntityName(team)}
+            </Ellipses>
           </div>
         ))}
         {isEmpty(userData.teams) && (
@@ -456,7 +459,9 @@ const Users = ({
         {userData.roles?.map((role, i) => (
           <div className="tw-mb-2 tw-flex tw-items-center tw-gap-2" key={i}>
             <SVGIcons alt="icon" className="tw-w-4" icon={Icons.USERS} />
-            <span>{getEntityName(role)}</span>
+            <Ellipses tooltip className="tw-w-48">
+              {getEntityName(role)}
+            </Ellipses>
           </div>
         ))}
         {!userData.isAdmin && isEmpty(userData.roles) && (
@@ -593,7 +598,9 @@ const Users = ({
                   className="tw-mb-2 tw-flex tw-items-center tw-gap-2"
                   key={i}>
                   <SVGIcons alt="icon" className="tw-w-4" icon={Icons.USERS} />
-                  <span>{getEntityName(inheritedRole)}</span>
+                  <Ellipses tooltip className="tw-w-48">
+                    {getEntityName(inheritedRole)}
+                  </Ellipses>
                 </div>
               ))}
             </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx
index 037ff222695..34bd0ca6396 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx
@@ -45,6 +45,7 @@ import {
 } from '../../utils/CommonUtils';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
+import Ellipses from '../common/Ellipses/Ellipses';
 import { COOKIE_VERSION } from '../Modals/WhatsNewModal/whatsNewData';
 import NavBar from '../nav-bar/NavBar';
 import { useWebSocketConnector } from '../web-scoket/web-scoket.provider';
@@ -151,9 +152,9 @@ const Appbar: React.FC = (): JSX.Element => {
       <div>
         <div className="tw-text-grey-muted tw-text-xs">{name}</div>
         {userRoleArr.map((userRole, i) => (
-          <p className="tw-font-medium" key={i}>
+          <Ellipses tooltip className="tw-font-medium" key={i}>
             {userRole}
-          </p>
+          </Ellipses>
         ))}
         <hr className="tw-my-1.5" />
       </div>
@@ -199,10 +200,12 @@ const Appbar: React.FC = (): JSX.Element => {
     const teams = getNonDeletedTeams(currentUser?.teams ?? []);
 
     return (
-      <div data-testid="greeting-text">
+      <div className="tw-max-w-xs" data-testid="greeting-text">
         <Link to={getUserPath(currentUser?.name as string)}>
           {' '}
-          <span className="tw-font-medium tw-cursor-pointer">{name}</span>
+          <Ellipses tooltip className="tw-font-medium tw-cursor-pointer">
+            {name}
+          </Ellipses>
         </Link>
         <hr className="tw-my-1.5" />
         {roles.length > 0 ? getUsersRoles(roles, 'Roles') : null}
@@ -213,11 +216,11 @@ const Appbar: React.FC = (): JSX.Element => {
           <div>
             <span className="tw-text-grey-muted tw-text-xs">Teams</span>
             {teams.map((t, i) => (
-              <p key={i}>
+              <Ellipses tooltip className="tw-text-xs" key={i}>
                 <Link to={getTeamAndUserDetailsPath(t.name as string)}>
                   {t.displayName || t.name}
                 </Link>
-              </p>
+              </Ellipses>
             ))}
             <hr className="tw-mt-1.5" />
           </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DeleteWidget/DeleteWidgetBody.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DeleteWidget/DeleteWidgetBody.tsx
index a8ba800bf31..cb1d7893025 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DeleteWidget/DeleteWidgetBody.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DeleteWidget/DeleteWidgetBody.tsx
@@ -13,6 +13,7 @@
 
 import React from 'react';
 import { TITLE_FOR_NON_ADMIN_ACTION } from '../../../constants/constants';
+import Ellipses from '../Ellipses/Ellipses';
 import NonAdminAction from '../non-admin-action/NonAdminAction';
 
 type DeleteWidgetBodyProps = {
@@ -35,13 +36,15 @@ const DeleteWidgetBody = ({
   return (
     <div className="tw-flex tw-justify-between tw-px-5 tw-py-3">
       <div data-testid="danger-zone-text">
-        <p
-          className="tw-text-sm tw-mb-1 tw-font-medium"
-          data-testid="danger-zone-text-title">
+        <Ellipses
+          tooltip
+          className="tw-text-sm tw-mb-1 tw-font-medium tw-w-120"
+          data-testid="danger-zone-text-title"
+          rows={1}>
           {header}
-        </p>
+        </Ellipses>
         <p
-          className="tw-text-grey-muted tw-text-xs"
+          className="tw-text-grey-muted tw-text-xs tw-break-all"
           data-testid="danger-zone-text-para">
           {description}
         </p>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
index 147f284ae65..ae89dea207d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
@@ -35,6 +35,7 @@ import { getTeams, patchTeamDetail } from '../../axiosAPIs/teamsAPI';
 import { getUserCounts } from '../../axiosAPIs/userAPI';
 import { Button } from '../../components/buttons/Button/Button';
 import Description from '../../components/common/description/Description';
+import Ellipses from '../../components/common/Ellipses/Ellipses';
 import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
@@ -605,11 +606,12 @@ const RolesPage = () => {
                 data-testid="role-name-container"
                 key={role.name}
                 onClick={() => setCurrentRole(role)}>
-                <span
-                  className="tag-category label-category tw-self-center tw-truncate tw-w-52"
-                  title={role.displayName}>
+                <Ellipses
+                  tooltip
+                  className="tag-category label-category tw-self-center tw-w-52"
+                  rows={1}>
                   <span>{role.displayName}</span>{' '}
-                </span>
+                </Ellipses>
                 {role.defaultRole ? getDefaultBadge() : null}
               </div>
             ))}
@@ -994,16 +996,16 @@ const RolesPage = () => {
   const getRolesComponent = () => {
     return (
       <Fragment>
-        <div
-          className="tw-flex tw-justify-between tw-items-center"
-          data-testid="header">
+        <div className="tw-flex tw-justify-between" data-testid="header">
           <div
-            className="tw-heading tw-text-link tw-text-base"
+            className="tw-flex tw-items-start tw-max-w-75"
             data-testid="header-title">
-            {currentRole?.displayName}
+            <Ellipses tooltip className="tw-heading tw-text-link tw-text-base">
+              {currentRole?.displayName}
+            </Ellipses>
             {currentRole?.defaultRole ? getDefaultBadge('tw-ml-2') : null}
           </div>
-          <div className="tw-flex">
+          <div className="tw-flex tw-items-start">
             {!currentRole?.defaultRole ? (
               <NonAdminAction
                 position="bottom"
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
index 948fb9ff876..7c74aafb42d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
@@ -31,6 +31,7 @@ import {
 } from '../../axiosAPIs/tagAPI';
 import { Button } from '../../components/buttons/Button/Button';
 import Description from '../../components/common/description/Description';
+import Ellipses from '../../components/common/Ellipses/Ellipses';
 import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
@@ -50,11 +51,13 @@ import {
 } from '../../generated/api/tags/createTagCategory';
 import { Operation } from '../../generated/entity/policies/accessControl/rule';
 import { TagCategory, TagClass } from '../../generated/entity/tags/tagCategory';
+import { EntityReference } from '../../generated/type/entityReference';
 import { useAuth } from '../../hooks/authHooks';
 import jsonData from '../../jsons/en';
 import {
   getActiveCatClass,
   getCountBadge,
+  getEntityName,
   isEven,
   isUrlFriendlyName,
 } from '../../utils/CommonUtils';
@@ -448,9 +451,13 @@ const TagsPage = () => {
                 onClick={() => {
                   fetchCurrentCategory(category.name);
                 }}>
-                <p className="tw-text-center tw-self-center tag-category label-category">
-                  {category.displayName ?? category.name}
-                </p>
+                <Ellipses
+                  tooltip
+                  className="tag-category label-category tw-self-center tw-w-32"
+                  data-testid="tag-name"
+                  rows={1}>
+                  {getEntityName(category as unknown as EntityReference)}
+                </Ellipses>
 
                 {getCountBadge(
                   currentCategory?.name === category.name
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddUsersModal.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddUsersModal.tsx
index 32ff2b3acf1..8904e256518 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddUsersModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/AddUsersModal.tsx
@@ -14,6 +14,7 @@
 import { toLower } from 'lodash';
 import React, { useState } from 'react';
 import { Button } from '../../components/buttons/Button/Button';
+import Ellipses from '../../components/common/Ellipses/Ellipses';
 import Searchbar from '../../components/common/searchbar/Searchbar';
 import { EntityReference as UserTeams } from '../../generated/entity/teams/user';
 import { getEntityName } from '../../utils/CommonUtils';
@@ -96,10 +97,10 @@ const AddUsersModal = ({
     <dialog className="tw-modal " data-testid="modal-container">
       <div className="tw-modal-backdrop" />
       <div className="tw-modal-container tw-max-h-90vh tw-max-w-3xl">
-        <div className="tw-modal-header">
-          <p className="tw-modal-title" data-testid="header">
+        <div className="tw-modal-header" data-testid="header">
+          <Ellipses tooltip className="tw-modal-title">
             {header}
-          </p>
+          </Ellipses>
         </div>
         <div className="tw-modal-body">
           <Searchbar
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
index 64568ef63f9..d7737ba7c42 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
@@ -17,6 +17,7 @@ import { capitalize } from 'lodash';
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
+import Ellipses from '../../components/common/Ellipses/Ellipses';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import ProfilePicture from '../../components/common/ProfilePicture/ProfilePicture';
 import { AssetsType, FqnPart } from '../../enums/entity.enum';
@@ -187,7 +188,7 @@ const UserCard = ({
               <span
                 className={classNames(
                   'tw-font-normal',
-                  isActionVisible ? 'tw-truncate tw-w-32' : null,
+                  isActionVisible ? 'tw-w-32' : 'tw-w-52',
                   {
                     'tw-cursor-pointer hover:tw-underline':
                       Boolean(onTitleClick),
@@ -197,15 +198,17 @@ const UserCard = ({
                 onClick={() => {
                   onTitleClick?.(item.fqn);
                 }}>
-                {item.displayName}
+                <Ellipses tooltip>{item.displayName}</Ellipses>
               </span>
               {item.name && item.name !== item.displayName && (
                 <span
                   className={classNames(
-                    isActionVisible ? 'tw-truncate tw-w-32' : null
+                    isActionVisible ? 'tw-w-32' : 'tw-w-52'
                   )}
                   title={isIconVisible ? item.name : capitalize(item.name)}>
-                  {isIconVisible ? item.name : capitalize(item.name)}
+                  <Ellipses tooltip>
+                    {isIconVisible ? item.name : capitalize(item.name)}
+                  </Ellipses>
                 </span>
               )}
             </Fragment>
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css b/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
index ef52d123bfa..3b7542b0131 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
@@ -496,7 +496,7 @@
 
   /* New Feed Button style */
   .tw-refreshButton {
-    @apply tw-w-full tw-rounded tw-text-info tw-w-full tw-py-1 tw-rounded tw-bg-feed-background tw-border tw-border-feed hover:tw-bg-feed-hover;
+    @apply tw-w-full tw-rounded tw-text-info tw-py-1 tw-bg-feed-background tw-border tw-border-feed hover:tw-bg-feed-hover;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
     transition: background-color 100ms linear;
   }
@@ -510,4 +510,8 @@
     top: 0.4rem;
     left: 1.3rem;
   }
+
+  .tw-max-w-75 {
+    max-width: 75%;
+  }
 }