Fix(ui): Text Overflow from Widget and Table (#21833)

* fixed widget overflow

* fixed comments

* fixed sonar test cases

* fixed tooltip

* removed maxwidth and resused userpopovercard

* removed maxwidth and increased width for overflow

* addressed comments

* removed extra div

---------

Co-authored-by: Ashish Gupta <ashish@getcollate.io>

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DomainLabelV2/DomainLabelV2.tsx

@@ -118,7 +118,7 @@ export const DomainLabelV2 = <
         ) : null;
 
         return (
-          <div className="d-flex items-center gap-1" key={domain.id}>
+          <div className="d-flex w-max-full items-center gap-1" key={domain.id}>
             <Typography.Text className="self-center text-xs whitespace-nowrap">
               <DomainIcon
                 className="d-flex"
@@ -132,7 +132,8 @@ export const DomainLabelV2 = <
               domain,
               getEntityName(domain),
               true,
-              'text-primary domain-link'
+              'text-primary domain-link',
+              true
             )}
             {inheritedIcon && <div className="d-flex">{inheritedIcon}</div>}
           </div>

openmetadata-ui/src/main/resources/ui/src/components/DataInsight/TopActiveUsers.tsx

@@ -11,12 +11,11 @@
  *  limitations under the License.
  */
 
-import { Card, Space, Typography } from 'antd';
+import { Card, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
 import { DataReportIndex } from '../../generated/dataInsight/dataInsightChart';
 import { DataInsightChartType } from '../../generated/dataInsight/dataInsightChartResult';
 import { MostActiveUsers } from '../../generated/dataInsight/type/mostActiveUsers';
@@ -27,9 +26,8 @@ import {
   formatTimeDurationFromSeconds,
 } from '../../utils/date-time/DateTimeUtils';
 import { getColumnSorter } from '../../utils/EntityUtils';
-import { getUserPath } from '../../utils/RouterUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
-import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
+import UserPopOverCard from '../common/PopOverCard/UserPopOverCard';
 import Table from '../common/Table/Table';
 import PageHeader from '../PageHeader/PageHeader.component';
 import './data-insight-detail.less';
@@ -76,10 +74,7 @@ const TopActiveUsers: FC<Props> = ({ chartFilter }) => {
         key: 'userName',
         sorter: getColumnSorter<MostActiveUsers, 'userName'>('userName'),
         render: (userName: string) => (
-          <Space>
-            <ProfilePicture name={userName} width="24" />
-            <Link to={getUserPath(userName)}>{userName}</Link>
-          </Space>
+          <UserPopOverCard showUserName profileWidth={24} userName={userName} />
         ),
       },
       {

openmetadata-ui/src/main/resources/ui/src/components/DataInsight/TopViewEntities.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Card, Space, Typography } from 'antd';
+import { Card, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
 import { isUndefined } from 'lodash';
@@ -25,7 +25,7 @@ import { ChartFilter } from '../../interface/data-insight.interface';
 import { getAggregateChartData } from '../../rest/DataInsightAPI';
 import { getDecodedFqn } from '../../utils/StringsUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
-import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
+import UserPopOverCard from '../common/PopOverCard/UserPopOverCard';
 import Table from '../common/Table/Table';
 import PageHeader from '../PageHeader/PageHeader.component';
 import './data-insight-detail.less';
@@ -96,10 +96,7 @@ const TopViewEntities: FC<Props> = ({ chartFilter }) => {
         key: 'owner',
         render: (owner: string) =>
           owner ? (
-            <Space>
-              <ProfilePicture name={owner} width="24" />
-              <Typography.Text>{owner}</Typography.Text>
-            </Space>
+            <UserPopOverCard showUserName profileWidth={24} userName={owner} />
           ) : (
             <Typography.Text>--</Typography.Text>
           ),

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuite/TestSuiteList/TestSuites.component.tsx

@@ -133,7 +133,7 @@ export const TestSuites = () => {
         sortDirections: ['ascend', 'descend'],
         render: (name, record) => {
           return (
-            <Typography.Paragraph className="m-0" style={{ maxWidth: 580 }}>
+            <Typography.Paragraph className="m-0">
               {record.basic ? (
                 <Link
                   data-testid={name}
@@ -354,7 +354,7 @@ export const TestSuites = () => {
           }}
           pagination={false}
           scroll={{
-            x: true,
+            x: '100%',
           }}
           size="small"
         />

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

@@ -396,7 +396,6 @@ const IncidentManager = ({
             <Link
               className="m-0 break-all text-primary"
               data-testid={`test-case-${record.testCaseReference?.name}`}
-              style={{ maxWidth: 280 }}
               to={getTestCaseDetailPagePath(
                 record.testCaseReference?.fullyQualifiedName ?? ''
               )}>
@@ -456,7 +455,7 @@ const IncidentManager = ({
         title: t('label.status'),
         dataIndex: 'testCaseResolutionStatusType',
         key: 'testCaseResolutionStatusType',
-        width: 100,
+        width: 120,
         render: (_, record: TestCaseResolutionStatus) => {
           if (isPermissionLoading) {
             return <Skeleton.Input size="small" />;
@@ -480,7 +479,7 @@ const IncidentManager = ({
         title: t('label.severity'),
         dataIndex: 'severity',
         key: 'severity',
-        width: 100,
+        width: 120,
         render: (value: Severities, record: TestCaseResolutionStatus) => {
           if (isPermissionLoading) {
             return <Skeleton.Input size="small" />;
@@ -618,7 +617,7 @@ const IncidentManager = ({
           pagination={false}
           rowKey="id"
           scroll={{
-            x: true,
+            x: '100%',
           }}
           size="small"
         />

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

@@ -10,6 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+import { Typography } from 'antd';
 import classNames from 'classnames';
 import { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
@@ -57,14 +58,16 @@ export const OwnerItem: React.FC<OwnerItemProps> = ({
         </div>
         <Link
           className={classNames(
-            'no-underline font-medium text-xs text-primary',
+            'truncate no-underline font-medium text-xs text-primary',
             className
           )}
           data-testid="owner-link"
           to={ownerPath}>
-          <span data-testid={getEntityName(owner)}>
+          <Typography.Text
+            data-testid={getEntityName(owner)}
+            ellipsis={{ tooltip: true }}>
             {ownerDisplayName ?? displayName}
-          </span>
+          </Typography.Text>
         </Link>
       </div>
     );

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/OwnerLabel.component.tsx

@@ -233,6 +233,7 @@ export const OwnerLabel = ({
                 <div
                   className={classNames({
                     'w-full': owner.type === OwnerType.TEAM,
+                    'w-max-full': isCompactView,
                   })}
                   key={owner.id}>
                   <OwnerItem

openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/UserPopOverCard.tsx

@@ -285,7 +285,9 @@ const UserPopOverCard: FC<Props> = ({
               : getUserPath(userName ?? '')
           }>
           {showUserProfile ? profilePicture : null}
-          {showUserName ? <span>{displayName ?? userName}</span> : null}
+          {showUserName ? (
+            <span className="truncate">{displayName ?? userName}</span>
+          ) : null}
         </Link>
       )}
     </Popover>

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

@@ -65,7 +65,7 @@ const ProfilePicture = ({
   const getAvatarByName = () => {
     return (
       <Avatar
-        className={classNames('flex-center', className)}
+        className={classNames('flex-center flex-shrink', className)}
         data-testid="profile-avatar"
         icon={character}
         shape={type}

openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCard.component.tsx

@@ -50,7 +50,7 @@ export const SummaryCard = ({
   }
 
   return (
-    <Space
+    <div
       className={classNames('summary-card', cardBackgroundClass, className)}
       data-testid="summary-card-container">
       <div
@@ -81,6 +81,6 @@ export const SummaryCard = ({
           width={65}
         />
       )}
-    </Space>
+    </div>
   );
 };

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

@@ -243,7 +243,7 @@ export const renderDomainLink = (
           'no-underline domain-link domain-link-text font-medium',
           {
             'text-sm': !showDomainHeading,
-            'text-truncate': trimLink,
+            'text-truncate truncate w-max-full': trimLink,
           },
           textClassName
         )}