From 12d97423f736aa2722877a015cb08dc0aa3ba55b Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Thu, 6 Oct 2022 20:01:39 +0530 Subject: [PATCH] UI :- Remove ellipses component (#7971) * Remove ellipses component * changes as per comments * remove tailwind css from ellipses component * fix unit test issue --- .../src/components/EntityList/EntityList.tsx | 7 +- .../component/ProfilerTab.tsx | 10 +- .../Component/ColumnProfileTable.test.tsx | 3 - .../Component/ColumnProfileTable.tsx | 7 +- .../components/TeamDetails/TeamDetailsV1.tsx | 5 +- .../src/components/Users/Users.component.tsx | 20 +-- .../ui/src/components/app-bar/Appbar.tsx | 26 ++-- .../components/common/Ellipses/Ellipses.tsx | 36 ------ .../TasksPage/shared/ColumnDetail.test.tsx | 6 - .../pages/TasksPage/shared/ColumnDetail.tsx | 8 +- .../src/pages/TestSuitePage/TestSuitePage.tsx | 7 +- .../resources/ui/src/pages/tags/index.tsx | 13 +- .../ui/src/pages/teams/AddUsersModal.tsx | 8 +- .../ui/src/pages/teams/AddUsersModalV1.tsx | 8 +- .../resources/ui/src/pages/teams/UserCard.tsx | 15 ++- .../src/main/resources/ui/src/styles/app.less | 118 +++++++++++------- 16 files changed, 152 insertions(+), 145 deletions(-) delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/Ellipses/Ellipses.tsx diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx index 51af9674650..003be15090c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx +++ b/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; @@ -113,9 +112,11 @@ export const EntityListWithAntd: FunctionComponent = ({ className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline" title={getEntityName(item as unknown as EntityReference)} type="text"> - + {getEntityName(item as unknown as EntityReference)} - + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/ProfilerTab.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/ProfilerTab.tsx index 10f8a097397..535918cf3cd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/ProfilerTab.tsx +++ b/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 = ({

Column summary

- + + {activeColumnDetails.description || 'No Description'} - + ({ jest.mock('../../../utils/CommonUtils', () => ({ formatNumberWithComma: jest.fn(), })); -jest.mock('../../common/Ellipses/Ellipses', () => { - return jest.fn().mockImplementation(({ children }) =>
{children}
); -}); jest.mock('../../common/searchbar/Searchbar', () => { return jest .fn() diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ColumnProfileTable.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ColumnProfileTable.tsx index 738288c9947..02a15406175 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ColumnProfileTable.tsx +++ b/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 = ({ key: 'dataType', render: (dataTypeDisplay: string) => { return ( - + {dataTypeDisplay || 'N/A'} - + ); }, sorter: (col1, col2) => col1.dataType.localeCompare(col2.dataType), diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx index 210a0eaa033..3950bc94b4b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx +++ b/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 = ({ ) : (
- + {heading} - + {isActionAllowed() && (
- + {getEntityName(team)} - +
))} {isEmpty(userData.teams) && ( @@ -520,9 +521,11 @@ const Users = ({ {userData.roles?.map((role, i) => (
- + {getEntityName(role)} - +
))} {!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}> - + + {getEntityName(inheritedRole)} - +
))} 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 5f24226bea8..a2948780d9b 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 @@ -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 => {
{name}
{userRoleArr.map((userRole, i) => ( - + {userRole} - + ))}
@@ -185,13 +188,11 @@ const Appbar: React.FC = (): JSX.Element => { data-testid="user-name" to={getUserPath(currentUser?.name as string)}> {' '} - + {name} - +
{roles.length > 0 ? getUsersRoles(roles, 'Roles') : null} @@ -202,11 +203,14 @@ const Appbar: React.FC = (): JSX.Element => {
Teams {teams.map((t, i) => ( - + {t.displayName || t.name} - + ))}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/Ellipses/Ellipses.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/Ellipses/Ellipses.tsx deleted file mode 100644 index 96ce4a74865..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/Ellipses/Ellipses.tsx +++ /dev/null @@ -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 = ({ children, className, style, ...props }) => { - return ( - - {children} - - ); -}; - -export default Ellipses; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ColumnDetail.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ColumnDetail.test.tsx index 152ecde7b21..84d0b067fe7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ColumnDetail.test.tsx +++ b/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

{children}

; - }) -); - describe('Test column detail component', () => { it('Should render the component', async () => { render(); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ColumnDetail.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ColumnDetail.tsx index dd6f541123a..8cc2171c41d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ColumnDetail.tsx +++ b/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: {' '} - + {column.dataTypeDisplay} - + {column.tags && column.tags.length ? (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx index f46ddb59e0d..369cfa23477 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TestSuitePage/TestSuitePage.tsx +++ b/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) => ( - + {record.description} - + ), }, { 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 f7c42c4f7fe..74389e8c7e7 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 @@ -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)); }}> - + ellipsis={{ rows: 1, tooltip: true }}> {getEntityName(category as unknown as EntityReference)} - - + {getCountBadge( currentCategory?.name === category.name ? currentCategory.children?.length 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 8904e256518..3b1a58484af 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 @@ -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 = ({
- + {header} - +
- + {header} - +
{ onTitleClick?.(item.fqn); }}> - {item.displayName} + + {item.displayName} + {item.name && item.name !== item.displayName && ( - + {isIconVisible ? item.name : capitalize(item.name)} - + )} diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less index fde8024869d..6d4883413ad 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less +++ b/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;