UI :- Remove ellipses component (#7971)

* Remove ellipses component

* changes as per comments

* remove tailwind css from ellipses component

* fix unit test issue

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

@@ -17,7 +17,6 @@ import { Link } from 'react-router-dom';
 import { EntityReference } from '../../generated/type/entityReference';
 import { getEntityName } from '../../utils/CommonUtils';
 import { getEntityIcon, getEntityLink } from '../../utils/TableUtils';
-import Ellipses from '../common/Ellipses/Ellipses';
 import { leftPanelAntCardStyle } from '../containers/PageLayout';
 interface Prop {
   entityList: Array<EntityReference>;
@@ -113,9 +112,11 @@ export const EntityListWithAntd: FunctionComponent<AntdEntityListProp> = ({
                       className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
                       title={getEntityName(item as unknown as EntityReference)}
                       type="text">
-                      <Ellipses className="tw-w-48 tw-text-left">
+                      <Typography.Text
+                        className="ant-typography-ellipsis-custom w-48 text-left"
+                        ellipsis={{ tooltip: true }}>
                         {getEntityName(item as unknown as EntityReference)}
-                      </Ellipses>
+                      </Typography.Text>
                     </Button>
                   </Link>
                 </div>

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/ProfilerTab.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Card, Col, Row, Statistic } from 'antd';
+import { Card, Col, Row, Statistic, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { sortBy } from 'lodash';
 import moment from 'moment';
@@ -30,7 +30,6 @@ import { getTableFQNFromColumnFQN } from '../../../utils/CommonUtils';
 import { updateTestResults } from '../../../utils/DataQualityAndProfilerUtils';
 import { generateEntityLink } from '../../../utils/TableUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
-import Ellipses from '../../common/Ellipses/Ellipses';
 import { TableTestsType } from '../../TableProfiler/TableProfiler.interface';
 import {
   MetricChartType,
@@ -226,9 +225,12 @@ const ProfilerTab: React.FC<ProfilerTabProps> = ({
           <Row gutter={16}>
             <Col span={16}>
               <p className="tw-font-medium tw-text-base">Column summary</p>
-              <Ellipses className="tw-text-grey-muted" rows={4}>
+
+              <Typography.Paragraph
+                className="ant-typography-ellipsis-custom tw-text-grey-muted"
+                ellipsis={{ tooltip: true, rows: 4 }}>
                 {activeColumnDetails.description || 'No Description'}
-              </Ellipses>
+              </Typography.Paragraph>
             </Col>
             <Col span={8}>
               <Statistic

openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ColumnProfileTable.test.tsx

@@ -74,9 +74,6 @@ jest.mock('antd', () => ({
 jest.mock('../../../utils/CommonUtils', () => ({
   formatNumberWithComma: jest.fn(),
 }));
-jest.mock('../../common/Ellipses/Ellipses', () => {
-  return jest.fn().mockImplementation(({ children }) => <div>{children}</div>);
-});
 jest.mock('../../common/searchbar/Searchbar', () => {
   return jest
     .fn()

openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ColumnProfileTable.tsx

@@ -36,7 +36,6 @@ import {
 } from '../../../utils/RouterUtils';
 import { getEncodedFqn } from '../../../utils/StringsUtils';
 import SVGIcons, { Icons } from '../../../utils/SvgUtils';
-import Ellipses from '../../common/Ellipses/Ellipses';
 import Searchbar from '../../common/searchbar/Searchbar';
 import TestIndicator from '../../common/TestIndicator/TestIndicator';
 import { ProfilerDashboardTab } from '../../ProfilerDashboard/profilerDashboard.interface';
@@ -82,9 +81,11 @@ const ColumnProfileTable: FC<ColumnProfileTableProps> = ({
         key: 'dataType',
         render: (dataTypeDisplay: string) => {
           return (
-            <Ellipses tooltip className="tw-w-24">
+            <Typography.Text
+              className="ant-typography-ellipsis-custom w-24"
+              ellipsis={{ tooltip: true }}>
               {dataTypeDisplay || 'N/A'}
-            </Ellipses>
+            </Typography.Text>
           );
         },
         sorter: (col1, col2) => col1.dataType.localeCompare(col2.dataType),

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx

@@ -75,7 +75,6 @@ import {
 import { showErrorToast } from '../../utils/ToastUtils';
 import { Button } from '../buttons/Button/Button';
 import Description from '../common/description/Description';
-import Ellipses from '../common/Ellipses/Ellipses';
 import ManageButton from '../common/entityPageInfo/ManageButton/ManageButton';
 import EntitySummaryDetails from '../common/EntitySummaryDetails/EntitySummaryDetails';
 import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
@@ -821,9 +820,9 @@ const TeamDetailsV1 = ({
           </div>
         ) : (
           <div className="tw-flex tw-group" data-testid="team-heading">
-            <Ellipses tooltip rows={1}>
+            <Typography.Title ellipsis={{ rows: 1, tooltip: true }} level={5}>
               {heading}
-            </Ellipses>
+            </Typography.Title>
             {isActionAllowed() && (
               <div className={classNames('tw-w-5 tw-min-w-max')}>
                 <Tooltip

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

@@ -68,7 +68,6 @@ 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';
@@ -387,9 +386,11 @@ const Users = ({
             data-testid={team.name}
             key={i}>
             <SVGIcons alt="icon" className="tw-w-4" icon={Icons.TEAMS_GREY} />
-            <Ellipses tooltip className="tw-w-48">
+            <Typography.Text
+              className="ant-typography-ellipsis-custom w-48"
+              ellipsis={{ tooltip: true }}>
               {getEntityName(team)}
-            </Ellipses>
+            </Typography.Text>
           </div>
         ))}
         {isEmpty(userData.teams) && (
@@ -520,9 +521,11 @@ 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} />
-            <Ellipses tooltip className="tw-w-48">
+            <Typography.Text
+              className="ant-typography-ellipsis-custom w-48"
+              ellipsis={{ tooltip: true }}>
               {getEntityName(role)}
-            </Ellipses>
+            </Typography.Text>
           </div>
         ))}
         {!userData.isAdmin && isEmpty(userData.roles) && (
@@ -660,9 +663,12 @@ 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} />
-                  <Ellipses tooltip className="tw-w-48">
+
+                  <Typography.Text
+                    className="ant-typography-ellipsis-custom w-48"
+                    ellipsis={{ tooltip: true }}>
                     {getEntityName(inheritedRole)}
-                  </Ellipses>
+                  </Typography.Text>
                 </div>
               ))}
             </div>

openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { CookieStorage } from 'cookie-storage';
 import { isEmpty } from 'lodash';
@@ -43,7 +44,6 @@ 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';
 
@@ -147,9 +147,12 @@ const Appbar: React.FC = (): JSX.Element => {
       <div>
         <div className="tw-text-grey-muted tw-text-xs">{name}</div>
         {userRoleArr.map((userRole, i) => (
-          <Ellipses tooltip className="tw-font-medium" key={i}>
+          <Typography.Paragraph
+            className="ant-typography-ellipsis-custom font-medium"
+            ellipsis={{ tooltip: true }}
+            key={i}>
             {userRole}
-          </Ellipses>
+          </Typography.Paragraph>
         ))}
         <hr className="tw-my-1.5" />
       </div>
@@ -185,13 +188,11 @@ const Appbar: React.FC = (): JSX.Element => {
           data-testid="user-name"
           to={getUserPath(currentUser?.name as string)}>
           {' '}
-          <Ellipses
+          <Typography.Paragraph
-            tooltip
+            className="ant-typography-ellipsis-custom font-medium cursor-pointer text-primary"
-            className="tw-font-medium tw-cursor-pointer"
+            ellipsis={{ rows: 1, tooltip: true }}>
-            rows={1}
-            style={{ color: '#7147E8' }}>
             {name}
-          </Ellipses>
+          </Typography.Paragraph>
         </Link>
         <hr className="tw-my-1.5" />
         {roles.length > 0 ? getUsersRoles(roles, 'Roles') : null}
@@ -202,11 +203,14 @@ const Appbar: React.FC = (): JSX.Element => {
           <div>
             <span className="tw-text-grey-muted tw-text-xs">Teams</span>
             {teams.map((t, i) => (
-              <Ellipses tooltip className="tw-text-xs" key={i}>
+              <Typography.Paragraph
+                className="ant-typography-ellipsis-custom text-xs"
+                ellipsis={{ tooltip: true }}
+                key={i}>
                 <Link to={getTeamAndUserDetailsPath(t.name as string)}>
                   {t.displayName || t.name}
                 </Link>
-              </Ellipses>
+              </Typography.Paragraph>
             ))}
             <hr className="tw-mt-1.5" />
           </div>

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

@@ -1,36 +0,0 @@
-/*
- *  Copyright 2021 Collate
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *  http://www.apache.org/licenses/LICENSE-2.0
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-import { Typography } from 'antd';
-import { EllipsisConfig } from 'antd/lib/typography/Base';
-import classNames from 'classnames';
-import React, { CSSProperties, FC } from 'react';
-
-interface Props extends EllipsisConfig {
-  children: React.ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
-
-const Ellipses: FC<Props> = ({ children, className, style, ...props }) => {
-  return (
-    <Typography.Paragraph
-      className={classNames('ant-typography-ellipsis-custom', className)}
-      ellipsis={props}
-      style={style}>
-      {children}
-    </Typography.Paragraph>
-  );
-};
-
-export default Ellipses;

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ColumnDetail.test.tsx

@@ -40,12 +40,6 @@ const mockColumnData = {
   ordinalPosition: 2,
 } as Column;
 
-jest.mock('../../../components/common/Ellipses/Ellipses', () =>
-  jest.fn().mockImplementation(({ children }) => {
-    return <p>{children}</p>;
-  })
-);
-
 describe('Test column detail component', () => {
   it('Should render the component', async () => {
     render(<ColumnDetail column={mockColumnData} />);

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ColumnDetail.tsx

@@ -11,9 +11,9 @@
  *  limitations under the License.
  */
 
+import { Typography } from 'antd';
 import { isEmpty, isUndefined } from 'lodash';
 import React from 'react';
-import Ellipses from '../../../components/common/Ellipses/Ellipses';
 import { Column } from '../../../generated/entity/data/table';
 import SVGIcons from '../../../utils/SvgUtils';
 
@@ -26,9 +26,11 @@ const ColumnDetail = ({ column }: { column: Column }) => {
           data-testid="column-type">
           Column type:
         </span>{' '}
-        <Ellipses tooltip rows={1}>
+        <Typography.Paragraph
+          className="ant-typography-ellipsis-custom"
+          ellipsis={{ rows: 1, tooltip: true }}>
           {column.dataTypeDisplay}
-        </Ellipses>
+        </Typography.Paragraph>
       </div>
       {column.tags && column.tags.length ? (
         <div className="tw-flex tw-mt-4" data-testid="column-tags">

openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx

@@ -16,7 +16,6 @@ import { ColumnsType } from 'antd/lib/table';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { getListTestSuites } from '../../axiosAPIs/testAPI';
-import Ellipses from '../../components/common/Ellipses/Ellipses';
 import NextPrevious from '../../components/common/next-previous/NextPrevious';
 import {
   INITIAL_PAGING_VALUE,
@@ -70,9 +69,11 @@ const TestSuitePage = () => {
         key: 'description',
         width: 300,
         render: (_, record) => (
-          <Ellipses tooltip className="tw-w-11/12">
+          <Typography.Paragraph
+            className="ant-typography-ellipsis-custom w-11-12"
+            ellipsis={{ tooltip: true }}>
             {record.description}
-          </Ellipses>
+          </Typography.Paragraph>
         ),
       },
       {

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

@@ -12,7 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Tooltip } from 'antd';
+import { Button, Tooltip, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { isEmpty, isUndefined, toLower } from 'lodash';
 import { FormErrorData, LoadingState } from 'Models';
@@ -28,7 +28,6 @@ import {
   updateTagCategory,
 } from '../../axiosAPIs/tagAPI';
 import Description from '../../components/common/description/Description';
-import Ellipses from '../../components/common/Ellipses/Ellipses';
 import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
 import LeftPanelCard from '../../components/common/LeftPanelCard/LeftPanelCard';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
@@ -494,14 +493,12 @@ const TagsPage = () => {
                 onClick={() => {
                   history.push(getTagPath(category.name));
                 }}>
-                <Ellipses
+                <Typography.Paragraph
-                  tooltip
+                  className="ant-typography-ellipsis-custom tag-category label-category self-center w-32"
-                  className="tag-category label-category tw-self-center tw-w-32"
                   data-testid="tag-name"
-                  rows={1}>
+                  ellipsis={{ rows: 1, tooltip: true }}>
                   {getEntityName(category as unknown as EntityReference)}
-                </Ellipses>
+                </Typography.Paragraph>
-
                 {getCountBadge(
                   currentCategory?.name === category.name
                     ? currentCategory.children?.length

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

@@ -11,10 +11,10 @@
  *  limitations under the License.
  */
 
+import { Typography } from 'antd';
 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';
@@ -98,9 +98,11 @@ const AddUsersModal = ({
       <div className="tw-modal-backdrop" />
       <div className="tw-modal-container tw-max-h-90vh tw-max-w-3xl">
         <div className="tw-modal-header" data-testid="header">
-          <Ellipses tooltip className="tw-modal-title">
+          <Typography.Text
+            className="ant-typography-ellipsis-custom tw-modal-title"
+            ellipsis={{ tooltip: true }}>
             {header}
-          </Ellipses>
+          </Typography.Text>
         </div>
         <div className="tw-modal-body">
           <Searchbar

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

@@ -11,12 +11,12 @@
  *  limitations under the License.
  */
 
+import { Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { toLower } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { getUsers } from '../../axiosAPIs/userAPI';
 import { Button } from '../../components/buttons/Button/Button';
-import Ellipses from '../../components/common/Ellipses/Ellipses';
 import Searchbar from '../../components/common/searchbar/Searchbar';
 import Loader from '../../components/Loader/Loader';
 import { API_RES_MAX_SIZE } from '../../constants/constants';
@@ -158,9 +158,11 @@ const AddUsersModalV1 = ({
       <div className="tw-modal-backdrop" />
       <div className="tw-modal-container tw-max-h-90vh tw-max-w-3xl">
         <div className="tw-modal-header" data-testid="header">
-          <Ellipses tooltip className="tw-modal-title">
+          <Typography.Text
+            className="ant-typography-ellipsis-custom tw-modal-title"
+            ellipsis={{ tooltip: true }}>
             {header}
-          </Ellipses>
+          </Typography.Text>
         </div>
         <div className="tw-modal-body">
           <Searchbar

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

@@ -12,12 +12,11 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Tooltip } from 'antd';
+import { Button, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import { capitalize } from 'lodash';
 import React, { Fragment, useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import Ellipses from '../../components/common/Ellipses/Ellipses';
 import ProfilePicture from '../../components/common/ProfilePicture/ProfilePicture';
 import { usePermissionProvider } from '../../components/PermissionProvider/PermissionProvider';
 import { ResourceEntity } from '../../components/PermissionProvider/PermissionProvider.interface';
@@ -202,7 +201,11 @@ const UserCard = ({
                 onClick={() => {
                   onTitleClick?.(item.fqn);
                 }}>
-                <Ellipses tooltip>{item.displayName}</Ellipses>
+                <Typography.Text
+                  className="ant-typography-ellipsis-custom"
+                  ellipsis={{ tooltip: true }}>
+                  {item.displayName}
+                </Typography.Text>
               </span>
               {item.name && item.name !== item.displayName && (
                 <span
@@ -210,9 +213,11 @@ const UserCard = ({
                     isActionVisible ? 'tw-w-32' : 'tw-w-52'
                   )}
                   title={isIconVisible ? item.name : capitalize(item.name)}>
-                  <Ellipses tooltip>
+                  <Typography.Text
+                    className="ant-typography-ellipsis-custom"
+                    ellipsis={{ tooltip: true }}>
                     {isIconVisible ? item.name : capitalize(item.name)}
-                  </Ellipses>
+                  </Typography.Text>
                 </span>
               )}
             </Fragment>

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

@@ -16,6 +16,14 @@
 @primary: #7147e8;
 @primary-light: rgb(244, 240, 253);
 
+//font weight
+.font-medium {
+  font-weight: 500;
+}
+.text-600 {
+  font-weight: 600;
+}
+
 // font size
 .text-xs {
   font-size: 12px;
@@ -32,19 +40,76 @@
   color: #ff4c3b;
 }
 
+// text alignment
+
+.text-center {
+  text-align: center;
+}
+.text-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
+
 // Width
 .w-8 {
   width: 32px;
 }
-
 .w-16 {
   width: 64px;
 }
+.w-24 {
+  width: 6rem;
+}
+.w-32 {
+  width: 8rem;
+}
+.w-48 {
+  width: 12rem;
+}
+.w-11-12 {
+  width: 91.666667%;
+}
+.w-min-0 {
+  min-width: 0;
+}
+.w-max-20 {
+  max-width: 20%;
+}
+.w-max-200 {
+  max-width: 200px;
+}
+.w-max-500 {
+  max-width: 500px;
+}
+.w-500 {
+  width: 500px;
+}
+.w-300 {
+  width: 300px;
+}
+.w-60 {
+  width: 60%;
+}
+.w-full {
+  width: 100%;
+}
 
 //Height
 .h-7 {
   height: 28px;
 }
+.h-min-100 {
+  min-height: 100vh;
+}
+.h-min-50 {
+  min-height: 50vh;
+}
+
+.h-full {
+  height: 100%;
+}
 
 // Text alignment
 .text-left {
@@ -73,6 +138,9 @@
 .justify-center {
   justify-content: center;
 }
+.self-center {
+  align-self: center;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -94,50 +162,10 @@
   font-weight: 500;
 }
 
-.h-min-100 {
-  min-height: 100vh;
-}
-.h-min-50 {
-  min-height: 50vh;
-}
-.w-min-0 {
-  min-width: 0;
-}
-.w-max-20 {
-  max-width: 20%;
-}
-.w-max-200 {
-  max-width: 200px;
-}
-.w-max-500 {
-  max-width: 500px;
-}
-.w-500 {
-  width: 500px;
-}
-.w-300 {
-  width: 300px;
-}
-.w-60 {
-  width: 60%;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.h-full {
-  height: 100%;
-}
-
 .border-l-2 {
   border-left: 2px;
 }
 
-.mr-2 {
-  margin-right: 8px;
-}
-
 .border-primary {
   border-color: @primary;
 }
@@ -152,6 +180,8 @@
   font-weight: 600;
 }
 
+// Margin
+
 .mt-0 {
   margin-top: 0;
 }
@@ -204,6 +234,9 @@
 .m-52 {
   margin: 13rem;
 }
+.mr-2 {
+  margin-right: 8px;
+}
 
 // padding
 .p-16 {
@@ -222,9 +255,6 @@
 .opacity-60 {
   opacity: 0.6;
 }
-.text-600 {
-  font-weight: 600;
-}
 
 .cursor-pointer {
   cursor: pointer;