yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-10-16 19:28:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix : UI Improvements (#10259)

Browse Source 
* UI Improvements

* unit test fixes
This commit is contained in:
Ashish Gupta 2023-02-22 18:53:18 +05:30 committed by GitHub
parent 3cb872270c
commit 02d2390afc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 260 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
openmetadata-ui/src/main/resources/ui/src/assets/svg/menu.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.23743 1.51256C9.92085 2.19598 9.92085 3.30402 9.23743 3.98743C8.55402 4.67085 7.44598 4.67085 6.76256 3.98743C6.07915 3.30402 6.07915 2.19598 6.76256 1.51256C7.44595 0.829146 8.55399 0.829146 9.23743 1.51256Z" fill=
"currentColor"/>
<path d="M9.23743 6.76256C9.92085 7.44598 9.92085 8.55402 9.23743 9.23743C8.55402 9.92085 7.44598 9.92085 6.76256 9.23743C6.07915 8.55402 6.07915 7.44598 6.76256 6.76256C7.44595 6.07915 8.55399 6.07915 9.23743 6.76256" fill="currentColor"/>
<path d="M9.23743 12.0126C9.92085 12.696 9.92085 13.804 9.23743 14.4874C8.55402 15.1709 7.44598 15.1709 6.76256 14.4874C6.07915 13.804 6.07915 12.696 6.76256 12.0126C7.44595 11.3291 8.55399 11.3291 9.23743 12.0126" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 826 B

9
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { Button, Switch } from 'antd';
import { Button, Space, Switch } from 'antd';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import { Operation } from 'fast-json-patch';
@ -251,10 +251,13 @@ const ActivityThreadPanelBody: FC<ActivityThreadPanelBodyProp> = ({
/>
)}
{isTaskType && (
<div className="tw-flex tw-justify-end tw-mr-2 tw-mt-2">
<Space
align="center"
className="w-full justify-end p-r-xs m-t-xs"
size={4}>
<Switch size="small" onChange={onSwitchChange} />
<span className="tw-ml-1">{t('label.closed-task-plural')}</span>
</div>
</Space>
)}
{!isUndefined(selectedThread) ? (

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

@ -11,11 +11,7 @@
* limitations under the License.
*/
import {
CheckOutlined,
CloseOutlined,
EllipsisOutlined,
} from '@ant-design/icons';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import {
Button,
Col,
@ -42,6 +38,7 @@ import { Link } from 'react-router-dom';
import { restoreTeam } from 'rest/teamsAPI';
import AppState from '../../AppState';
import { ReactComponent as IconEdit } from '../../assets/svg/ic-edit.svg';
import { ReactComponent as IconDropdown } from '../../assets/svg/menu.svg';
import {
getTeamAndUserDetailsPath,
getUserPath,
@ -1089,14 +1086,13 @@ const TeamDetailsV1 = ({
trigger={['click']}
onOpenChange={setShowActions}>
<Button
className="rounded-4 w-6 manage-dropdown-button"
className="rounded-4 w-6 manage-dropdown-button d-flex justify-center"
data-testid="teams-dropdown"
size="small">
<EllipsisOutlined
className="text-primary self-center manage-dropdown-icon"
rotate={90}
icon={
<IconDropdown className="text-primary self-center manage-dropdown-icon" />
}
size="small"
/>
</Button>
</Dropdown>
)}
</div>

39
openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
View File

@ -11,16 +11,19 @@
* limitations under the License.
*/
import { EllipsisOutlined } from '@ant-design/icons';
import { Button, Col, Dropdown, Modal, Row, Tooltip, Typography } from 'antd';
import { ItemType } from 'antd/lib/menu/hooks/useItems';
import classNames from 'classnames';
import React, { FC, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as IconAnnouncementsBlack } from '../../../../assets/svg/announcements-black.svg';
import { ReactComponent as IconDelete } from '../../../../assets/svg/ic-delete.svg';
import { ReactComponent as IconRestore } from '../../../../assets/svg/ic-restore.svg';
import { ReactComponent as IconDropdown } from '../../../../assets/svg/menu.svg';
import { NO_PERMISSION_FOR_ACTION } from '../../../../constants/HelperTextUtil';
import { EntityType } from '../../../../enums/entity.enum';
import { ANNOUNCEMENT_ENTITIES } from '../../../../utils/AnnouncementsUtils';
import SVGIcons, { Icons } from '../../../../utils/SvgUtils';
import DeleteWidgetModal from '../../DeleteWidget/DeleteWidgetModal';
import './ManageButton.less';
@ -70,8 +73,8 @@ const ManageButton: FC<Props> = ({
label: (
<Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
<Row
className={classNames('tw-cursor-pointer manage-button', {
'tw-cursor-not-allowed tw-opacity-50': !canDelete,
className={classNames('cursor-pointer manage-button', {
'cursor-not-allowed opacity-50': !canDelete,
})}
onClick={(e) => {
if (canDelete) {
@ -81,7 +84,7 @@ const ManageButton: FC<Props> = ({
}
}}>
<Col span={3}>
<SVGIcons alt="Delete" icon={Icons.DELETE} width="20px" />
<IconDelete className="m-t-xss" name="Delete" width={20} />
</Col>
<Col span={21}>
<Row data-testid="delete-button">
@ -112,8 +115,8 @@ const ManageButton: FC<Props> = ({
label: (
<Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
<Row
className={classNames('tw-cursor-pointer manage-button', {
'tw-cursor-not-allowed tw-opacity-50': !canDelete,
className={classNames('cursor-pointer manage-button', {
'cursor-not-allowed opacity-50': !canDelete,
})}
onClick={(e) => {
if (canDelete) {
@ -123,8 +126,11 @@ const ManageButton: FC<Props> = ({
}
}}>
<Col span={3}>
{' '}
<SVGIcons alt="Restore" icon={Icons.RESTORE} width="20px" />
<IconRestore
className="m-t-xss"
name="Restore"
width={20}
/>
</Col>
<Col span={21}>
<Row data-testid="restore-button">
@ -157,17 +163,17 @@ const ManageButton: FC<Props> = ({
{
label: (
<Row
className="tw-cursor-pointer manage-button"
className="cursor-pointer manage-button"
onClick={(e) => {
e.stopPropagation();
setShowActions(false);
onAnnouncementClick && onAnnouncementClick();
}}>
<Col span={3}>
<SVGIcons
alt="announcement"
icon={Icons.ANNOUNCEMENT_BLACK}
width="20px"
<IconAnnouncementsBlack
className="m-t-xss"
name="announcement"
width={20}
/>
</Col>
<Col span={21}>
@ -213,10 +219,7 @@ const ManageButton: FC<Props> = ({
title="Manage"
type="default"
onClick={() => setShowActions(true)}>
<EllipsisOutlined
className="tw-text-primary tw-self-center manage-dropdown-icon"
rotate={90}
/>
<IconDropdown className="text-primary self-center manage-dropdown-icon" />
</Button>
</Dropdown>
{isDelete && (

9
openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
View File

@ -202,6 +202,7 @@ const RequestDescription = () => {
return (
<TaskPageLayout>
<Space className="w-full" direction="vertical" size="middle">
<TitleBreadcrumb
titleLinks={[
...getBreadCrumbList(entityData, entityType as EntityType),
@ -214,9 +215,9 @@ const RequestDescription = () => {
},
]}
/>
<div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
<Card
className="tw-col-span-2"
className="m-t-0"
key="request-description"
style={{ ...cardStyles }}
title={t('label.create-entity', {
@ -283,8 +284,9 @@ const RequestDescription = () => {
</Form.Item>
</Form>
</Card>
</Space>
<div className="tw-pl-2" data-testid="entity-details">
<div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
<h6 className="tw-text-base">
{capitalize(entityType)} {t('label.detail-plural')}
</h6>
@ -325,7 +327,6 @@ const RequestDescription = () => {
{getColumnDetails()}
</div>
</div>
</TaskPageLayout>
);
};

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

@ -190,6 +190,7 @@ const RequestTag = () => {
return (
<TaskPageLayout>
<Space className="w-full" direction="vertical" size="middle">
<TitleBreadcrumb
titleLinks={[
...getBreadCrumbList(entityData, entityType as EntityType),
@ -202,9 +203,8 @@ const RequestTag = () => {
},
]}
/>
<div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
<Card
className="tw-col-span-2"
className="m-t-0"
key="request-tags"
style={{ ...cardStyles }}
title={t('label.create-entity', {
@ -265,8 +265,9 @@ const RequestTag = () => {
</Form.Item>
</Form>
</Card>
</Space>
<div className="tw-pl-2" data-testid="entity-details">
<div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
<h6 className="tw-text-base">
{capitalize(entityType)} {t('label.detail-plural')}
</h6>
@ -307,7 +308,6 @@ const RequestTag = () => {
{getColumnDetails()}
</div>
</div>
</TaskPageLayout>
);
};

11
openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/TaskDetailPage/TaskDetailPage.tsx
View File

@ -12,7 +12,7 @@
*/
import { CheckOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons';
import { Button, Card, Dropdown, Layout, MenuProps, Tabs } from 'antd';
import { Button, Card, Dropdown, Layout, MenuProps, Space, Tabs } from 'antd';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import ActivityFeedEditor from 'components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor';
@ -668,9 +668,10 @@ const TaskDetailPage = () => {
/>
)}
<div
className="tw-flex tw-justify-end"
data-testid="task-cta-buttons">
<Space
className="m-t-xss"
data-testid="task-cta-buttons"
size="small">
{(hasEditAccess() || isCreator) && !isTaskClosed && (
<Button
className="ant-btn-link-custom"
@ -711,7 +712,7 @@ const TaskDetailPage = () => {
)}
</Fragment>
)}
</div>
</Space>
{isTaskClosed && <ClosedTask task={taskDetail.task} />}
</Card>

10
openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
View File

@ -208,6 +208,7 @@ const UpdateDescription = () => {
return (
<TaskPageLayout>
<Space className="w-full" direction="vertical" size="middle">
<TitleBreadcrumb
titleLinks={[
...getBreadCrumbList(entityData, entityType as EntityType),
@ -220,9 +221,9 @@ const UpdateDescription = () => {
},
]}
/>
<div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
<Card
className="tw-col-span-2"
className="m-t-0"
key="update-description"
style={{ ...cardStyles }}
title={t('label.create-entity', {
@ -280,8 +281,8 @@ const UpdateDescription = () => {
</Form.Item>
</Form>
</Card>
<div className="tw-pl-2" data-testid="entity-details">
</Space>
<div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
<h6 className="tw-text-base">
{capitalize(entityType)} {t('label.detail-plural')}
</h6>
@ -322,7 +323,6 @@ const UpdateDescription = () => {
{getColumnDetails()}
</div>
</div>
</TaskPageLayout>
);
};

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

@ -208,6 +208,7 @@ const UpdateTag = () => {
return (
<TaskPageLayout>
<Space className="w-full" direction="vertical" size="middle">
<TitleBreadcrumb
titleLinks={[
...getBreadCrumbList(entityData, entityType as EntityType),
@ -220,9 +221,8 @@ const UpdateTag = () => {
},
]}
/>
<div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
<Card
className="tw-col-span-2"
className="m-t-0"
key="update-tags"
style={{ ...cardStyles }}
title={t('label.create-entity', {
@ -285,8 +285,9 @@ const UpdateTag = () => {
</Form.Item>
</Form>
</Card>
</Space>
<div className="tw-pl-2" data-testid="entity-details">
<div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
<h6 className="tw-text-base">
{capitalize(entityType)} {t('label.detail-plural')}
</h6>
@ -327,7 +328,6 @@ const UpdateTag = () => {
{getColumnDetails()}
</div>
</div>
</TaskPageLayout>
);
};

5
openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.test.tsx
View File

@ -22,13 +22,8 @@ describe('Test TaskPageLayout Component', () => {
it('Should render the component', async () => {
render(<TaskPageLayout {...mockProps} />);
const leftSider = await screen.findByTestId('left-sider');
const rightSider = await screen.findByTestId('right-sider');
const children = await screen.findByTestId('children');
expect(leftSider).toBeInTheDocument();
expect(rightSider).toBeInTheDocument();
expect(children).toBeInTheDocument();
});
});

14
openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.tsx
View File

@ -11,22 +11,18 @@
* limitations under the License.
*/
import { Layout } from 'antd';
import PageContainerV1 from 'components/containers/PageContainerV1';
import PageLayoutV1 from 'components/containers/PageLayoutV1';
import React, { FC, HTMLAttributes } from 'react';
import { background, contentStyles } from '../TaskPage.styles';
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface Props extends HTMLAttributes<HTMLDivElement> {}
const TaskPageLayout: FC<Props> = ({ children }) => {
const { Content, Sider } = Layout;
return (
<Layout style={{ ...background, height: '100vh' }}>
<Sider data-testid="left-sider" style={background} width={180} />
<Content style={contentStyles}>{children}</Content>
<Sider data-testid="right-sider" style={background} width={180} />
</Layout>
<PageContainerV1>
<PageLayoutV1 center>{children}</PageLayoutV1>
</PageContainerV1>
);
};

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

@ -276,6 +276,9 @@
.opacity-0 {
opacity: 0;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-100 {
opacity: 1;
}

3
openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
View File

@ -50,6 +50,9 @@
.w-48 {
width: 12rem;
}
.w-500 {
width: 500px;
}
.w-800 {
width: 800px;
}