Fix : Fixing long team name issues #2280 #2279 #2277 (#2286)

* Fix : Fixing #2280 #2279 #2277

* Addressing review comments

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

@@ -12,6 +12,7 @@
  */
 
 import { AxiosResponse } from 'axios';
+import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 import { observer } from 'mobx-react';
 import { TableDetail } from 'Models';
@@ -181,6 +182,8 @@ const ManageTab: FunctionComponent<Props> = ({
     });
   };
 
+  const ownerName = getOwnerById();
+
   useEffect(() => {
     getTierData();
   }, []);
@@ -225,7 +228,17 @@ const ManageTab: FunctionComponent<Props> = ({
             theme="primary"
             variant="link"
             onClick={() => setListVisible((visible) => !visible)}>
-            {getOwnerById() || 'Select Owner'}
+            {ownerName ? (
+              <span
+                className={classNames('tw-truncate', {
+                  'tw-w-52': ownerName.length > 32,
+                })}
+                title={ownerName}>
+                {ownerName}
+              </span>
+            ) : (
+              'Select Owner'
+            )}
             <SVGIcons
               alt="edit"
               className="tw-ml-1"

openmetadata-ui/src/main/resources/ui/src/components/dropdown/CheckBoxDropDownList.tsx

@@ -47,8 +47,15 @@ const CheckBoxDropDownList = ({
                   checked={selectedItems?.includes(item.value as string)}
                   className="tw-ml-3 tw-mr-2 tw-align-middle custom-checkbox"
                   type="checkbox"
+                  onChange={() => {
+                    return;
+                  }}
                 />
-                <p className="tw-inline-block">{item.name}</p>
+                <p
+                  className="tw-inline-block tw-truncate tw-w-52 tw-align-middle"
+                  title={item.name as string}>
+                  {item.name}
+                </p>
               </div>
             ) : (
               <Fragment />

openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx

@@ -85,9 +85,10 @@ const DropDown: React.FC<DropDownProp> = ({
                       if (selectedItems?.includes(item.value as string)) {
                         return (
                           <p
-                            className="tw-bg-gray-200 tw-rounded tw-px-1 tw-text-grey-body"
+                            className="tw-bg-gray-200 tw-rounded tw-px-1 tw-text-grey-body tw-truncate tw-w-52 tw-align-middle"
                             key={item.value}
-                            style={{ margin: '2px' }}>
+                            style={{ margin: '2px' }}
+                            title={item.name as string}>
                             {item.name}
                           </p>
                         );

openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx

@@ -69,7 +69,7 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
 
   const getDropDownElement = (item: DropDownListItem, index: number) => {
     return (
-      <span
+      <div
         aria-disabled={item.disabled as boolean}
         className={classNames(
           'tw-text-gray-700 tw-block tw-px-4 tw-py-2 tw-text-sm hover:tw-bg-body-hover tw-cursor-pointer',
@@ -80,8 +80,10 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
         key={index}
         role="menuitem"
         onClick={(e) => onSelect && onSelect(e, item.value)}>
-        {item.name}
+        <p className="tw-truncate tw-w-52" title={item.name as string}>
-      </span>
+          {item.name}
+        </p>
+      </div>
     );
   };
 

openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx

@@ -120,9 +120,13 @@ const TeamsPage = () => {
         )
       ) {
         errData['name'] = 'Name already exists';
+      } else if (data.name.length < 1 || data.name.length > 128) {
+        errData['name'] = 'Name size must be between 1 and 128';
       }
       if (!data.displayName?.trim()) {
         errData['displayName'] = 'Display name is required';
+      } else if (data.displayName.length < 1 || data.displayName.length > 128) {
+        errData['displayName'] = 'Display name size must be between 1 and 128';
       }
       setErrorData(errData);
 
@@ -424,7 +428,9 @@ const TeamsPage = () => {
                     <div
                       className="tw-flex tw-justify-between tw-items-center"
                       data-testid="header">
-                      <div className="tw-heading tw-text-link tw-text-base">
+                      <div
+                        className="tw-heading tw-text-link tw-text-base tw-truncate tw-w-52"
+                        title={currentTeam?.displayName}>
                         {currentTeam?.displayName}
                       </div>
                       <NonAdminAction

openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import classNames from 'classnames';
 import { isEmpty, isNil, isString } from 'lodash';
 import { Bucket, ExtraInfo, LeafNodes, LineagePos } from 'Models';
 import React from 'react';
@@ -432,7 +433,13 @@ export const getInfoElements = (data: ExtraInfo) => {
               rel="noopener noreferrer"
               target={data.openInNewTab ? '_blank' : '_self'}>
               <>
-                <span className="tw-mr-1">{displayVal}</span>
+                <span
+                  className={classNames('tw-mr-1 tw-inline-block tw-truncate', {
+                    'tw-w-52': (displayVal as string).length > 32,
+                  })}
+                  title={displayVal as string}>
+                  {displayVal}
+                </span>
                 {data.openInNewTab && (
                   <SVGIcons
                     alt="external-link"
@@ -444,7 +451,20 @@ export const getInfoElements = (data: ExtraInfo) => {
               </>
             </a>
           ) : (
-            displayVal
+            <>
+              {data.key === 'Owner' ? (
+                <span
+                  className={classNames(
+                    'tw-mr-1 tw-inline-block tw-truncate tw-align-text-bottom',
+                    { 'tw-w-52': (displayVal as string).length > 32 }
+                  )}
+                  title={displayVal as string}>
+                  {displayVal}
+                </span>
+              ) : (
+                <span>{displayVal}</span>
+              )}
+            </>
           )}
         </span>
       ) : null}

openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx

@@ -356,6 +356,9 @@ export const feedSummaryFromatter = (
     }
 
     case fieldChange?.name === 'owner': {
+      const ownerName =
+        getOwnerName(newValue?.id as string) ||
+        getOwnerName(value?.id as string);
       const ownerText =
         !isEmpty(oldValue) && !isEmpty(newValue) ? (
           <Fragment>
@@ -363,11 +366,11 @@ export const feedSummaryFromatter = (
               <Link
                 className="tw-pl-1"
                 to={getTeamDetailsPath(newValue?.name || '')}>
-                {getOwnerName(newValue?.id as string)}
+                <span title={ownerName}>{ownerName}</span>
               </Link>
             ) : (
-              <span className="tw-pl-1">
+              <span className="tw-pl-1" title={ownerName}>
-                {getOwnerName(newValue?.id as string)}
+                {ownerName}
               </span>
             )}
           </Fragment>
@@ -377,17 +380,21 @@ export const feedSummaryFromatter = (
               <Link
                 className="tw-pl-1"
                 to={getTeamDetailsPath(value?.name || '')}>
-                {getOwnerName(value?.id as string)}
+                <span title={ownerName}>{ownerName}</span>
               </Link>
             ) : (
-              <span className="tw-pl-1">
+              <span className="tw-pl-1" title={ownerName}>
-                {getOwnerName(value?.id as string)}
+                {ownerName}
               </span>
             )}
           </Fragment>
         );
       summary = (
-        <p key={uniqueId()}>
+        <p
+          className={classNames('tw-truncate', {
+            'tw-w-52': ownerName.length > 32,
+          })}
+          key={uniqueId()}>
           {`Assigned ownership to`}
           {ownerText}
         </p>