From 49d47524eae8dc49c49463fbb343d2de8944a6e4 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Thu, 30 Jun 2022 18:05:33 +0530 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20UI=20:=20Add=20task=20status=20icon?= =?UTF-8?q?=20to=20the=20task=20card=20(#5786)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ UI : Add task status icon in task card * Add tooltip for task badge * Change icon size --- .../resources/ui/src/assets/svg/complete.svg | 4 ++ .../ui/src/assets/svg/in-progress.svg | 5 ++ .../ActivityFeedList/FeedListBody.tsx | 12 +++-- .../ActivityThreadList.tsx | 14 ++++-- .../ActivityFeed/Shared/TaskBadge.tsx | 46 +++++++++++++------ .../main/resources/ui/src/styles/x-master.css | 2 + .../main/resources/ui/src/utils/SvgUtils.tsx | 12 +++++ 7 files changed, 76 insertions(+), 19 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/complete.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/in-progress.svg diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/complete.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/complete.svg new file mode 100644 index 00000000000..39cbb27fca4 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/complete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/in-progress.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/in-progress.svg new file mode 100644 index 00000000000..3013c273939 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/in-progress.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListBody.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListBody.tsx index 46356542345..b1087c5fd12 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListBody.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListBody.tsx @@ -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 = ({ marginTop: '20px', paddingTop: isTask ? '8px' : '', border: isTask - ? '1px solid #E3DAFA' + ? '1px solid #C6B5F6' : leftPanelAntCardStyle.border, }}> - {isTask && } + {isTask && ( + + )}
= ({ marginTop: '20px', paddingTop: isTask ? '8px' : '', border: isTask - ? '1px solid #E3DAFA' + ? '1px solid #C6B5F6' : leftPanelAntCardStyle.border, }}> - {isTask && } + {isTask && ( + + )}
{ + const isTaskOpen = isEqual(status, ThreadTaskStatus.Open); + + const popoverContent = isTaskOpen ? 'Status: open' : 'Status: closed'; -const TaskBadge = () => { return ( - - Task - + + + + Task + + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css index adaeee3268e..a91455c646f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css +++ b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css @@ -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; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx index ef506233201..bf0ab10a714 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx @@ -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 = ({ @@ -921,6 +925,14 @@ const SVGIcons: FunctionComponent = ({ case Icons.COMMENT_GREY: IconComponent = IconCommentGrey; + break; + case Icons.TASK_CLOSED: + IconComponent = IconTaskClose; + + break; + case Icons.TASK_OPEN: + IconComponent = IconTaskOpen; + break; default: