yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-27 02:16:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI :- Remove ellipses component (#7971)

Browse Source 
* Remove ellipses component

* changes as per comments

* remove tailwind css from ellipses component

* fix unit test issue
This commit is contained in:
Ashish Gupta 2022-10-06 20:01:39 +05:30 committed by GitHub
parent d3cb6d52ed
commit 12d97423f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 152 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
View File

@ -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>

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

@ -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

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

@ -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()

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

@ -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),

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

@ -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

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

@ -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>

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

@ -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
tooltip
className="tw-font-medium tw-cursor-pointer"
rows={1}
style={{ color: '#7147E8' }}>
<Typography.Paragraph
className="ant-typography-ellipsis-custom font-medium cursor-pointer text-primary"
ellipsis={{ rows: 1, tooltip: true }}>
{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>

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

@ -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;

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

@ -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} />);

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

@ -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">

7
openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx
View File

@ -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>
),
},
{

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

@ -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
tooltip
className="tag-category label-category tw-self-center tw-w-32"
<Typography.Paragraph
className="ant-typography-ellipsis-custom tag-category label-category self-center 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

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

@ -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

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

@ -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

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

@ -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>

118
openmetadata-ui/src/main/resources/ui/src/styles/app.less
View File

@ -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;