yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-10-17 03:38:18 +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. * limitations under the License.
*/ */
import { Button, Switch } from 'antd'; import { Button, Space, Switch } from 'antd';
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import classNames from 'classnames'; import classNames from 'classnames';
import { Operation } from 'fast-json-patch'; import { Operation } from 'fast-json-patch';
@ -251,10 +251,13 @@ const ActivityThreadPanelBody: FC<ActivityThreadPanelBodyProp> = ({
/> />
)} )}
{isTaskType && ( {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} /> <Switch size="small" onChange={onSwitchChange} />
<span className="tw-ml-1">{t('label.closed-task-plural')}</span> <span className="tw-ml-1">{t('label.closed-task-plural')}</span>
</div> </Space>
)} )}
{!isUndefined(selectedThread) ? ( {!isUndefined(selectedThread) ? (

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

@ -11,11 +11,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
CheckOutlined,
CloseOutlined,
EllipsisOutlined,
} from '@ant-design/icons';
import { import {
Button, Button,
Col, Col,
@ -42,6 +38,7 @@ import { Link } from 'react-router-dom';
import { restoreTeam } from 'rest/teamsAPI'; import { restoreTeam } from 'rest/teamsAPI';
import AppState from '../../AppState'; import AppState from '../../AppState';
import { ReactComponent as IconEdit } from '../../assets/svg/ic-edit.svg'; import { ReactComponent as IconEdit } from '../../assets/svg/ic-edit.svg';
import { ReactComponent as IconDropdown } from '../../assets/svg/menu.svg';
import { import {
getTeamAndUserDetailsPath, getTeamAndUserDetailsPath,
getUserPath, getUserPath,
@ -1089,14 +1086,13 @@ const TeamDetailsV1 = ({
trigger={['click']} trigger={['click']}
onOpenChange={setShowActions}> onOpenChange={setShowActions}>
<Button <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" data-testid="teams-dropdown"
size="small"> icon={
<EllipsisOutlined <IconDropdown className="text-primary self-center manage-dropdown-icon" />
className="text-primary self-center manage-dropdown-icon" }
rotate={90} size="small"
/> />
</Button>
</Dropdown> </Dropdown>
)} )}
</div> </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. * limitations under the License.
*/ */
import { EllipsisOutlined } from '@ant-design/icons';
import { Button, Col, Dropdown, Modal, Row, Tooltip, Typography } from 'antd'; import { Button, Col, Dropdown, Modal, Row, Tooltip, Typography } from 'antd';
import { ItemType } from 'antd/lib/menu/hooks/useItems'; import { ItemType } from 'antd/lib/menu/hooks/useItems';
import classNames from 'classnames'; import classNames from 'classnames';
import React, { FC, useState } from 'react'; import React, { FC, useState } from 'react';
import { useTranslation } from 'react-i18next'; 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 { NO_PERMISSION_FOR_ACTION } from '../../../../constants/HelperTextUtil';
import { EntityType } from '../../../../enums/entity.enum'; import { EntityType } from '../../../../enums/entity.enum';
import { ANNOUNCEMENT_ENTITIES } from '../../../../utils/AnnouncementsUtils'; import { ANNOUNCEMENT_ENTITIES } from '../../../../utils/AnnouncementsUtils';
import SVGIcons, { Icons } from '../../../../utils/SvgUtils';
import DeleteWidgetModal from '../../DeleteWidget/DeleteWidgetModal'; import DeleteWidgetModal from '../../DeleteWidget/DeleteWidgetModal';
import './ManageButton.less'; import './ManageButton.less';
@ -70,8 +73,8 @@ const ManageButton: FC<Props> = ({
label: ( label: (
<Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}> <Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
<Row <Row
className={classNames('tw-cursor-pointer manage-button', { className={classNames('cursor-pointer manage-button', {
'tw-cursor-not-allowed tw-opacity-50': !canDelete, 'cursor-not-allowed opacity-50': !canDelete,
})} })}
onClick={(e) => { onClick={(e) => {
if (canDelete) { if (canDelete) {
@ -81,7 +84,7 @@ const ManageButton: FC<Props> = ({
} }
}}> }}>
<Col span={3}> <Col span={3}>
<SVGIcons alt="Delete" icon={Icons.DELETE} width="20px" /> <IconDelete className="m-t-xss" name="Delete" width={20} />
</Col> </Col>
<Col span={21}> <Col span={21}>
<Row data-testid="delete-button"> <Row data-testid="delete-button">
@ -112,8 +115,8 @@ const ManageButton: FC<Props> = ({
label: ( label: (
<Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}> <Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
<Row <Row
className={classNames('tw-cursor-pointer manage-button', { className={classNames('cursor-pointer manage-button', {
'tw-cursor-not-allowed tw-opacity-50': !canDelete, 'cursor-not-allowed opacity-50': !canDelete,
})} })}
onClick={(e) => { onClick={(e) => {
if (canDelete) { if (canDelete) {
@ -123,8 +126,11 @@ const ManageButton: FC<Props> = ({
} }
}}> }}>
<Col span={3}> <Col span={3}>
{' '} <IconRestore
<SVGIcons alt="Restore" icon={Icons.RESTORE} width="20px" /> className="m-t-xss"
name="Restore"
width={20}
/>
</Col> </Col>
<Col span={21}> <Col span={21}>
<Row data-testid="restore-button"> <Row data-testid="restore-button">
@ -157,17 +163,17 @@ const ManageButton: FC<Props> = ({
{ {
label: ( label: (
<Row <Row
className="tw-cursor-pointer manage-button" className="cursor-pointer manage-button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setShowActions(false); setShowActions(false);
onAnnouncementClick && onAnnouncementClick(); onAnnouncementClick && onAnnouncementClick();
}}> }}>
<Col span={3}> <Col span={3}>
<SVGIcons <IconAnnouncementsBlack
alt="announcement" className="m-t-xss"
icon={Icons.ANNOUNCEMENT_BLACK} name="announcement"
width="20px" width={20}
/> />
</Col> </Col>
<Col span={21}> <Col span={21}>
@ -213,10 +219,7 @@ const ManageButton: FC<Props> = ({
title="Manage" title="Manage"
type="default" type="default"
onClick={() => setShowActions(true)}> onClick={() => setShowActions(true)}>
<EllipsisOutlined <IconDropdown className="text-primary self-center manage-dropdown-icon" />
className="tw-text-primary tw-self-center manage-dropdown-icon"
rotate={90}
/>
</Button> </Button>
</Dropdown> </Dropdown>
{isDelete && ( {isDelete && (

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

@ -202,21 +202,22 @@ const RequestDescription = () => {
return ( return (
<TaskPageLayout> <TaskPageLayout>
<TitleBreadcrumb <Space className="w-full" direction="vertical" size="middle">
titleLinks={[ <TitleBreadcrumb
...getBreadCrumbList(entityData, entityType as EntityType), titleLinks={[
{ ...getBreadCrumbList(entityData, entityType as EntityType),
name: t('label.create-entity', { {
entity: t('label.task'), name: t('label.create-entity', {
}), entity: t('label.task'),
activeTitle: true, }),
url: '', activeTitle: true,
}, url: '',
]} },
/> ]}
<div className="tw-grid tw-grid-cols-3 tw-gap-x-2"> />
<Card <Card
className="tw-col-span-2" className="m-t-0"
key="request-description" key="request-description"
style={{ ...cardStyles }} style={{ ...cardStyles }}
title={t('label.create-entity', { title={t('label.create-entity', {
@ -283,48 +284,48 @@ const RequestDescription = () => {
</Form.Item> </Form.Item>
</Form> </Form>
</Card> </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"> <h6 className="tw-text-base">
{capitalize(entityType)} {t('label.detail-plural')} {capitalize(entityType)} {t('label.detail-plural')}
</h6> </h6>
<div className="tw-flex tw-mb-4"> <div className="tw-flex tw-mb-4">
<span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '} <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
<span> <span>
{entityData.owner ? ( {entityData.owner ? (
<span className="tw-flex tw-ml-1"> <span className="tw-flex tw-ml-1">
<ProfilePicture <ProfilePicture
displayName={getEntityName(entityData.owner)} displayName={getEntityName(entityData.owner)}
id="" id=""
name={getEntityName(entityData.owner)} name={getEntityName(entityData.owner)}
width="20" width="20"
/> />
<span className="tw-ml-1"> <span className="tw-ml-1">
{getEntityName(entityData.owner)} {getEntityName(entityData.owner)}
</span>
</span> </span>
) : ( </span>
<span className="tw-text-grey-muted tw-ml-1">
{t('label.no-entity', { entity: t('label.owner') })}
</span>
)}
</span>
</div>
<p data-testid="tier">
{entityTier ? (
entityTier
) : ( ) : (
<span className="tw-text-grey-muted"> <span className="tw-text-grey-muted tw-ml-1">
{t('label.no-entity', { entity: t('label.tier') })} {t('label.no-entity', { entity: t('label.owner') })}
</span> </span>
)} )}
</p> </span>
<p data-testid="tags">{entityTags}</p>
{getColumnDetails()}
</div> </div>
<p data-testid="tier">
{entityTier ? (
entityTier
) : (
<span className="tw-text-grey-muted">
{t('label.no-entity', { entity: t('label.tier') })}
</span>
)}
</p>
<p data-testid="tags">{entityTags}</p>
{getColumnDetails()}
</div> </div>
</TaskPageLayout> </TaskPageLayout>
); );

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

@ -190,21 +190,21 @@ const RequestTag = () => {
return ( return (
<TaskPageLayout> <TaskPageLayout>
<TitleBreadcrumb <Space className="w-full" direction="vertical" size="middle">
titleLinks={[ <TitleBreadcrumb
...getBreadCrumbList(entityData, entityType as EntityType), titleLinks={[
{ ...getBreadCrumbList(entityData, entityType as EntityType),
name: t('label.create-entity', { {
entity: t('label.task'), name: t('label.create-entity', {
}), entity: t('label.task'),
activeTitle: true, }),
url: '', activeTitle: true,
}, url: '',
]} },
/> ]}
<div className="tw-grid tw-grid-cols-3 tw-gap-x-2"> />
<Card <Card
className="tw-col-span-2" className="m-t-0"
key="request-tags" key="request-tags"
style={{ ...cardStyles }} style={{ ...cardStyles }}
title={t('label.create-entity', { title={t('label.create-entity', {
@ -265,48 +265,48 @@ const RequestTag = () => {
</Form.Item> </Form.Item>
</Form> </Form>
</Card> </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"> <h6 className="tw-text-base">
{capitalize(entityType)} {t('label.detail-plural')} {capitalize(entityType)} {t('label.detail-plural')}
</h6> </h6>
<div className="tw-flex tw-mb-4"> <div className="tw-flex tw-mb-4">
<span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '} <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
<span> <span>
{entityData.owner ? ( {entityData.owner ? (
<span className="tw-flex tw-ml-1"> <span className="tw-flex tw-ml-1">
<ProfilePicture <ProfilePicture
displayName={getEntityName(entityData.owner)} displayName={getEntityName(entityData.owner)}
id="" id=""
name={getEntityName(entityData.owner)} name={getEntityName(entityData.owner)}
width="20" width="20"
/> />
<span className="tw-ml-1"> <span className="tw-ml-1">
{getEntityName(entityData.owner)} {getEntityName(entityData.owner)}
</span>
</span> </span>
) : ( </span>
<span className="tw-text-grey-muted tw-ml-1">
{t('label.no-entity', { entity: t('label.owner') })}
</span>
)}
</span>
</div>
<p data-testid="tier">
{entityTier ? (
entityTier
) : ( ) : (
<span className="tw-text-grey-muted"> <span className="tw-text-grey-muted tw-ml-1">
{t('label.no-entity', { entity: t('label.tier') })} {t('label.no-entity', { entity: t('label.owner') })}
</span> </span>
)} )}
</p> </span>
<p data-testid="tags">{entityTags}</p>
{getColumnDetails()}
</div> </div>
<p data-testid="tier">
{entityTier ? (
entityTier
) : (
<span className="tw-text-grey-muted">
{t('label.no-entity', { entity: t('label.tier') })}
</span>
)}
</p>
<p data-testid="tags">{entityTags}</p>
{getColumnDetails()}
</div> </div>
</TaskPageLayout> </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 { 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 { AxiosError } from 'axios';
import classNames from 'classnames'; import classNames from 'classnames';
import ActivityFeedEditor from 'components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor'; import ActivityFeedEditor from 'components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor';
@ -668,9 +668,10 @@ const TaskDetailPage = () => {
/> />
)} )}
<div <Space
className="tw-flex tw-justify-end" className="m-t-xss"
data-testid="task-cta-buttons"> data-testid="task-cta-buttons"
size="small">
{(hasEditAccess() || isCreator) && !isTaskClosed && ( {(hasEditAccess() || isCreator) && !isTaskClosed && (
<Button <Button
className="ant-btn-link-custom" className="ant-btn-link-custom"
@ -711,7 +712,7 @@ const TaskDetailPage = () => {
)} )}
</Fragment> </Fragment>
)} )}
</div> </Space>
{isTaskClosed && <ClosedTask task={taskDetail.task} />} {isTaskClosed && <ClosedTask task={taskDetail.task} />}
</Card> </Card>

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

@ -208,21 +208,22 @@ const UpdateDescription = () => {
return ( return (
<TaskPageLayout> <TaskPageLayout>
<TitleBreadcrumb <Space className="w-full" direction="vertical" size="middle">
titleLinks={[ <TitleBreadcrumb
...getBreadCrumbList(entityData, entityType as EntityType), titleLinks={[
{ ...getBreadCrumbList(entityData, entityType as EntityType),
name: t('label.create-entity', { {
entity: t('label.task'), name: t('label.create-entity', {
}), entity: t('label.task'),
activeTitle: true, }),
url: '', activeTitle: true,
}, url: '',
]} },
/> ]}
<div className="tw-grid tw-grid-cols-3 tw-gap-x-2"> />
<Card <Card
className="tw-col-span-2" className="m-t-0"
key="update-description" key="update-description"
style={{ ...cardStyles }} style={{ ...cardStyles }}
title={t('label.create-entity', { title={t('label.create-entity', {
@ -280,48 +281,47 @@ const UpdateDescription = () => {
</Form.Item> </Form.Item>
</Form> </Form>
</Card> </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"> <h6 className="tw-text-base">
{capitalize(entityType)} {t('label.detail-plural')} {capitalize(entityType)} {t('label.detail-plural')}
</h6> </h6>
<div className="tw-flex tw-mb-4"> <div className="tw-flex tw-mb-4">
<span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '} <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
<span> <span>
{entityData.owner ? ( {entityData.owner ? (
<span className="tw-flex tw-ml-1"> <span className="tw-flex tw-ml-1">
<ProfilePicture <ProfilePicture
displayName={getEntityName(entityData.owner)} displayName={getEntityName(entityData.owner)}
id="" id=""
name={getEntityName(entityData.owner)} name={getEntityName(entityData.owner)}
width="20" width="20"
/> />
<span className="tw-ml-1"> <span className="tw-ml-1">
{getEntityName(entityData.owner)} {getEntityName(entityData.owner)}
</span>
</span> </span>
) : ( </span>
<span className="tw-text-grey-muted tw-ml-1">
{t('label.no-entity', { entity: t('label.owner') })}
</span>
)}
</span>
</div>
<p data-testid="tier">
{entityTier ? (
entityTier
) : ( ) : (
<span className="tw-text-grey-muted"> <span className="tw-text-grey-muted tw-ml-1">
{t('label.no-entity', { entity: t('label.tier') })} {t('label.no-entity', { entity: t('label.owner') })}
</span> </span>
)} )}
</p> </span>
<p data-testid="tags">{entityTags}</p>
{getColumnDetails()}
</div> </div>
<p data-testid="tier">
{entityTier ? (
entityTier
) : (
<span className="tw-text-grey-muted">
{t('label.no-entity', { entity: t('label.tier') })}
</span>
)}
</p>
<p data-testid="tags">{entityTags}</p>
{getColumnDetails()}
</div> </div>
</TaskPageLayout> </TaskPageLayout>
); );

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

@ -208,21 +208,21 @@ const UpdateTag = () => {
return ( return (
<TaskPageLayout> <TaskPageLayout>
<TitleBreadcrumb <Space className="w-full" direction="vertical" size="middle">
titleLinks={[ <TitleBreadcrumb
...getBreadCrumbList(entityData, entityType as EntityType), titleLinks={[
{ ...getBreadCrumbList(entityData, entityType as EntityType),
name: t('label.create-entity', { {
entity: t('label.task'), name: t('label.create-entity', {
}), entity: t('label.task'),
activeTitle: true, }),
url: '', activeTitle: true,
}, url: '',
]} },
/> ]}
<div className="tw-grid tw-grid-cols-3 tw-gap-x-2"> />
<Card <Card
className="tw-col-span-2" className="m-t-0"
key="update-tags" key="update-tags"
style={{ ...cardStyles }} style={{ ...cardStyles }}
title={t('label.create-entity', { title={t('label.create-entity', {
@ -285,48 +285,48 @@ const UpdateTag = () => {
</Form.Item> </Form.Item>
</Form> </Form>
</Card> </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"> <h6 className="tw-text-base">
{capitalize(entityType)} {t('label.detail-plural')} {capitalize(entityType)} {t('label.detail-plural')}
</h6> </h6>
<div className="tw-flex tw-mb-4"> <div className="tw-flex tw-mb-4">
<span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '} <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
<span> <span>
{entityData.owner ? ( {entityData.owner ? (
<span className="tw-flex tw-ml-1"> <span className="tw-flex tw-ml-1">
<ProfilePicture <ProfilePicture
displayName={getEntityName(entityData.owner)} displayName={getEntityName(entityData.owner)}
id="" id=""
name={getEntityName(entityData.owner)} name={getEntityName(entityData.owner)}
width="20" width="20"
/> />
<span className="tw-ml-1"> <span className="tw-ml-1">
{getEntityName(entityData.owner)} {getEntityName(entityData.owner)}
</span>
</span> </span>
) : ( </span>
<span className="tw-text-grey-muted tw-ml-1">
{t('label.no-entity', { entity: t('label.owner') })}
</span>
)}
</span>
</div>
<p data-testid="tier">
{entityTier ? (
entityTier
) : ( ) : (
<span className="tw-text-grey-muted"> <span className="tw-text-grey-muted tw-ml-1">
{t('label.no-entity', { entity: t('label.tier') })} {t('label.no-entity', { entity: t('label.owner') })}
</span> </span>
)} )}
</p> </span>
<p data-testid="tags">{entityTags}</p>
{getColumnDetails()}
</div> </div>
<p data-testid="tier">
{entityTier ? (
entityTier
) : (
<span className="tw-text-grey-muted">
{t('label.no-entity', { entity: t('label.tier') })}
</span>
)}
</p>
<p data-testid="tags">{entityTags}</p>
{getColumnDetails()}
</div> </div>
</TaskPageLayout> </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 () => { it('Should render the component', async () => {
render(<TaskPageLayout {...mockProps} />); render(<TaskPageLayout {...mockProps} />);
const leftSider = await screen.findByTestId('left-sider');
const rightSider = await screen.findByTestId('right-sider');
const children = await screen.findByTestId('children'); const children = await screen.findByTestId('children');
expect(leftSider).toBeInTheDocument();
expect(rightSider).toBeInTheDocument();
expect(children).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. * 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 React, { FC, HTMLAttributes } from 'react';
import { background, contentStyles } from '../TaskPage.styles';
// eslint-disable-next-line @typescript-eslint/no-empty-interface // eslint-disable-next-line @typescript-eslint/no-empty-interface
interface Props extends HTMLAttributes<HTMLDivElement> {} interface Props extends HTMLAttributes<HTMLDivElement> {}
const TaskPageLayout: FC<Props> = ({ children }) => { const TaskPageLayout: FC<Props> = ({ children }) => {
const { Content, Sider } = Layout;
return ( return (
<Layout style={{ ...background, height: '100vh' }}> <PageContainerV1>
<Sider data-testid="left-sider" style={background} width={180} /> <PageLayoutV1 center>{children}</PageLayoutV1>
<Content style={contentStyles}>{children}</Content> </PageContainerV1>
<Sider data-testid="right-sider" style={background} width={180} />
</Layout>
); );
}; };

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

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

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

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