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

✨ UI : Add task status icon to the task card (#5786)

Browse Source 
* ✨ UI : Add task status icon in task card

* Add tooltip for task badge

* Change icon size
This commit is contained in:
Sachin Chaurasiya 2022-06-30 18:05:33 +05:30 committed by GitHub
parent cdb135aab8
commit 49d47524ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 76 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openmetadata-ui/src/main/resources/ui/src/assets/svg/complete.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.0711 2.55057C14.8504 2.32952 14.4924 2.32914 14.2717 2.54963L7.48968 9.31375L5.04274 6.65614C4.83131 6.42663 4.47383 6.41175 4.24393 6.62315C4.01422 6.83459 3.99951 7.19225 4.21094 7.42196L7.05644 10.5122C7.16064 10.6255 7.30648 10.6913 7.46026 10.6945C7.46439 10.6946 7.46838 10.6946 7.47233 10.6946C7.62178 10.6946 7.76554 10.6353 7.87145 10.5297L15.07 3.35011C15.2912 3.12965 15.2916 2.77161 15.0711 2.55057Z" fill="#7147E8" stroke="#7147E8" stroke-width="0.2"/>
<path d="M14.9347 7.43466C14.6224 7.43466 14.3693 7.68772 14.3693 8C14.3693 11.5122 11.5122 14.3693 8 14.3693C4.48801 14.3693 1.63065 11.5122 1.63065 8C1.63065 4.48801 4.48801 1.63065 8 1.63065C8.31225 1.63065 8.56534 1.37759 8.56534 1.06534C8.56534 0.753066 8.31225 0.5 8 0.5C3.86445 0.5 0.5 3.86445 0.5 8C0.5 12.1354 3.86445 15.5 8 15.5C12.1354 15.5 15.5 12.1354 15.5 8C15.5 7.68775 15.2469 7.43466 14.9347 7.43466Z" fill="#7147E8" stroke="#7147E8" stroke-width="0.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

5
openmetadata-ui/src/main/resources/ui/src/assets/svg/in-progress.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6 8C15.6 7.66863 15.3314 7.4 15 7.4C14.6686 7.4 14.4 7.66863 14.4 8H15.6ZM8 1.6C8.33137 1.6 8.6 1.33137 8.6 1C8.6 0.668629 8.33137 0.4 8 0.4V1.6ZM6.6803 0.514273L6.0893 0.617804L6.29636 1.7998L6.88736 1.69627L6.6803 0.514273ZM4.32925 2.7566L4.82044 2.41203L4.1313 1.42964L3.64011 1.77421L4.32925 2.7566ZM1.77421 3.64011L1.42964 4.1313L2.41203 4.82044L2.7566 4.32925L1.77421 3.64011ZM1.69627 6.88736L1.7998 6.29636L0.617804 6.0893L0.514273 6.6803L1.69627 6.88736ZM0.514273 9.3197L0.617804 9.9107L1.7998 9.70364L1.69627 9.11264L0.514273 9.3197ZM2.7566 11.6708L2.41203 11.1796L1.42964 11.8687L1.77421 12.3599L2.7566 11.6708ZM3.64011 14.2258L4.1313 14.5704L4.82044 13.588L4.32925 13.2434L3.64011 14.2258ZM6.88736 14.3037L6.29636 14.2002L6.0893 15.3822L6.6803 15.4857L6.88736 14.3037ZM9.3197 15.4857L9.9107 15.3822L9.70364 14.2002L9.11264 14.3037L9.3197 15.4857ZM11.6708 13.2434L11.1796 13.588L11.8687 14.5704L12.3599 14.2258L11.6708 13.2434ZM14.2258 12.3599L14.5704 11.8687L13.588 11.1796L13.2434 11.6708L14.2258 12.3599ZM14.3037 9.11264L14.2002 9.70364L15.3822 9.9107L15.4857 9.3197L14.3037 9.11264ZM8 0.4C7.55034 0.4 7.10932 0.439118 6.6803 0.514273L6.88736 1.69627C7.24831 1.63304 7.62005 1.6 8 1.6V0.4ZM3.64011 1.77421C2.91497 2.28289 2.28289 2.91497 1.77421 3.64011L2.7566 4.32925C3.18529 3.71814 3.71814 3.18529 4.32925 2.7566L3.64011 1.77421ZM0.514273 6.6803C0.439117 7.10932 0.4 7.55034 0.4 8H1.6C1.6 7.62005 1.63304 7.24831 1.69627 6.88736L0.514273 6.6803ZM0.4 8C0.4 8.44966 0.439118 8.89068 0.514273 9.3197L1.69627 9.11264C1.63304 8.75169 1.6 8.37995 1.6 8H0.4ZM1.77421 12.3599C2.28289 13.085 2.91497 13.7171 3.64011 14.2258L4.32925 13.2434C3.71814 12.8147 3.18529 12.2819 2.7566 11.6708L1.77421 12.3599ZM6.6803 15.4857C7.10932 15.5609 7.55034 15.6 8 15.6V14.4C7.62005 14.4 7.24831 14.367 6.88736 14.3037L6.6803 15.4857ZM8 15.6C8.44966 15.6 8.89068 15.5609 9.3197 15.4857L9.11264 14.3037C8.75169 14.367 8.37995 14.4 8 14.4V15.6ZM12.3599 14.2258C13.085 13.7171 13.7171 13.085 14.2258 12.3599L13.2434 11.6708C12.8147 12.2819 12.2819 12.8147 11.6708 13.2434L12.3599 14.2258ZM15.4857 9.3197C15.5609 8.89068 15.6 8.44966 15.6 8H14.4C14.4 8.37995 14.367 8.75169 14.3037 9.11264L15.4857 9.3197Z" fill="#7147E8"/>
<path d="M15.6 8C15.6 7.66863 15.3314 7.4 15 7.4C14.6686 7.4 14.4 7.66863 14.4 8H15.6ZM8 14.4H7.4V15.6H8V14.4ZM14.4 8C14.4 11.5346 11.5346 14.4 8 14.4V15.6C12.1974 15.6 15.6 12.1974 15.6 8H14.4Z" fill="#7147E8"/>
<path d="M15.0711 2.55057C14.8504 2.32952 14.4924 2.32914 14.2717 2.54963L7.48968 9.31375L5.04274 6.65614C4.83131 6.42663 4.47383 6.41175 4.24393 6.62315C4.01422 6.83459 3.99951 7.19225 4.21094 7.42196L7.05644 10.5122C7.16064 10.6255 7.30648 10.6913 7.46026 10.6945C7.46439 10.6946 7.46838 10.6946 7.47233 10.6946C7.62178 10.6946 7.76554 10.6353 7.87145 10.5297L15.07 3.35011C15.2912 3.12965 15.2916 2.77161 15.0711 2.55057Z" fill="#7147E8" stroke="#7147E8" stroke-width="0.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

12
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListBody.tsx
View File

@ -14,7 +14,11 @@
import { Card } from 'antd';
import { isEqual } from 'lodash';
import React, { FC, Fragment } from 'react';
import { Post, ThreadType } from '../../../generated/entity/feed/thread';
import {
Post,
ThreadTaskStatus,
ThreadType,
} from '../../../generated/entity/feed/thread';
import AssigneeList from '../../common/AssigneeList/AssigneeList';
import { leftPanelAntCardStyle } from '../../containers/PageLayout';
import ActivityFeedCard from '../ActivityFeedCard/ActivityFeedCard';
@ -114,10 +118,12 @@ const FeedListBody: FC<FeedListBodyProp> = ({
marginTop: '20px',
paddingTop: isTask ? '8px' : '',
border: isTask
? '1px solid #E3DAFA'
? '1px solid #C6B5F6'
: leftPanelAntCardStyle.border,
}}>
{isTask && <TaskBadge />}
{isTask && (
<TaskBadge status={feed.task?.status as ThreadTaskStatus} />
)}
<div data-testid="message-container" key={index}>
<ActivityFeedCard
isThread

14
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadList.tsx
View File

@ -13,7 +13,11 @@
import { Card } from 'antd';
import { isEqual } from 'lodash';
import React, { FC, Fragment } from 'react';
import { Post, ThreadType } from '../../../generated/entity/feed/thread';
import {
Post,
ThreadTaskStatus,
ThreadType,
} from '../../../generated/entity/feed/thread';
import { getFeedListWithRelativeDays } from '../../../utils/FeedUtils';
import AssigneeList from '../../common/AssigneeList/AssigneeList';
import { leftPanelAntCardStyle } from '../../containers/PageLayout';
@ -78,10 +82,14 @@ const ActivityThreadList: FC<ActivityThreadListProp> = ({
marginTop: '20px',
paddingTop: isTask ? '8px' : '',
border: isTask
? '1px solid #E3DAFA'
? '1px solid #C6B5F6'
: leftPanelAntCardStyle.border,
}}>
{isTask && <TaskBadge />}
{isTask && (
<TaskBadge
status={thread.task?.status as ThreadTaskStatus}
/>
)}
<div data-testid="main-message">
<ActivityFeedCard
isEntityFeed

46
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/Shared/TaskBadge.tsx
View File

@ -11,22 +11,42 @@
* limitations under the License.
*/
import { Popover } from 'antd';
import { isEqual } from 'lodash';
import React from 'react';
import { ThreadTaskStatus } from '../../../generated/entity/feed/thread';
import SVGIcons, { Icons } from '../../../utils/SvgUtils';
const TaskBadge = ({ status }: { status: ThreadTaskStatus }) => {
const isTaskOpen = isEqual(status, ThreadTaskStatus.Open);
const popoverContent = isTaskOpen ? 'Status: open' : 'Status: closed';
const TaskBadge = () => {
return (
<span
className="tw-rounded tw-px-2 tw-absolute tw-left-4 tw--top-3"
style={{
background: '#F1EDFD',
border: '1px solid #E3DAFA',
boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.06)',
borderRadius: '2px',
color: '#7147E8',
fontSize: '12px',
}}>
Task
</span>
<Popover
align={{ targetOffset: [0, -15] }}
content={popoverContent}
overlayClassName="ant-popover-task-status"
trigger="hover"
zIndex={9999}>
<span
className="tw-rounded tw-px-2 tw-absolute tw-left-4 tw--top-3 tw-flex"
style={{
background: '#F1EDFD',
border: '1px solid #C6B5F6',
boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.06)',
borderRadius: '2px',
color: '#7147E8',
fontSize: '12px',
}}>
<SVGIcons
alt="task-status"
icon={isTaskOpen ? Icons.TASK_OPEN : Icons.TASK_CLOSED}
width="12px"
/>
<span className="tw-pl-1">Task</span>
</span>
</Popover>
);
};

2
openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
View File

@ -1127,11 +1127,13 @@ code {
.ant-popover-feed > .ant-popover-content > .ant-popover-arrow,
.ant-popover-card > .ant-popover-content > .ant-popover-arrow,
.ant-popover-task-status > .ant-popover-content > .ant-popover-arrow,
.ant-popover-feed-reactions > .ant-popover-content > .ant-popover-arrow {
display: none;
}
.ant-popover-feed > .ant-popover-content > .ant-popover-inner,
.ant-popover-card > .ant-popover-content > .ant-popover-inner,
.ant-popover-task-status > .ant-popover-content > .ant-popover-inner,
.ant-popover-request-description > .ant-popover-content > .ant-popover-inner,
.ant-popover-feed-reactions > .ant-popover-content > .ant-popover-inner {
border-radius: 6px;

12
openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
View File

@ -32,6 +32,7 @@ import IconSuccess from '../assets/svg/check.svg';
import IconCheckboxPrimary from '../assets/svg/checkbox-primary.svg';
import IconCircleCheckbox from '../assets/svg/circle-checkbox.svg';
import IconComments from '../assets/svg/comment.svg';
import IconTaskClose from '../assets/svg/complete.svg';
import IconConfigColor from '../assets/svg/config-color.svg';
import IconConfig from '../assets/svg/config.svg';
import IconControlMinus from '../assets/svg/control-minus.svg';
@ -110,6 +111,7 @@ import IconNotNull from '../assets/svg/icon-notnull.svg';
import IconTour from '../assets/svg/icon-tour.svg';
import IconUnique from '../assets/svg/icon-unique.svg';
import IconUp from '../assets/svg/icon-up.svg';
import IconTaskOpen from '../assets/svg/in-progress.svg';
import IconInfo from '../assets/svg/info.svg';
import IconIngestion from '../assets/svg/ingestion.svg';
import IconLineageColor from '../assets/svg/lineage-color.svg';
@ -315,6 +317,8 @@ export const Icons = {
MENTIONS: 'ic-mentions',
COMMENT_GREY: 'ic-comment-grey',
TASK_ICON: 'task-icon',
TASK_CLOSED: 'task-closed',
TASK_OPEN: 'task-open',
};
const SVGIcons: FunctionComponent<Props> = ({
@ -921,6 +925,14 @@ const SVGIcons: FunctionComponent<Props> = ({
case Icons.COMMENT_GREY:
IconComponent = IconCommentGrey;
break;
case Icons.TASK_CLOSED:
IconComponent = IconTaskClose;
break;
case Icons.TASK_OPEN:
IconComponent = IconTaskOpen;
break;
default: