From dd3d4cb926e20262bae63c803ab4dac026ac8a2c Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Thu, 28 Jul 2022 15:13:33 +0530
Subject: [PATCH] Fix #6356 Clicking tasks on My Tasks should open up the task
 details (#6399)

---
 .../FeedCardHeader/FeedCardHeader.tsx              |  5 ++++-
 .../ActivityFeedCard/PopoverContent.tsx            |  8 +++++---
 .../ActivityFeedEditor/ActivityFeedEditor.tsx      |  4 +++-
 .../ActivityFeed/ActivityFeedEditor/SendButton.tsx |  4 +++-
 .../ActivityFeed/ActivityFeedList/FeedListBody.tsx | 14 +++++++++++++-
 .../ActivityThreadPanel/ActivityThreadList.tsx     | 14 +++++++++++++-
 .../ui/src/components/Reactions/Emoji.jsx          |  3 ++-
 .../ui/src/components/Reactions/Reaction.jsx       |  3 ++-
 .../ui/src/components/Reactions/Reactions.jsx      |  3 ++-
 .../common/PopOverCard/EntityPopOverCard.tsx       |  5 ++++-
 .../common/PopOverCard/UserPopOverCard.tsx         |  5 ++++-
 11 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardHeader/FeedCardHeader.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardHeader/FeedCardHeader.tsx
index 8464507fa98..568f2e3b38f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardHeader/FeedCardHeader.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/FeedCardHeader/FeedCardHeader.tsx
@@ -138,7 +138,10 @@ const FeedCardHeader: FC<FeedHeaderProp> = ({
         <UserPopOverCard userName={createdBy}>
           <span
             className="thread-author tw-cursor-pointer"
-            onClick={() => onTitleClickHandler(createdBy)}>
+            onClick={(e) => {
+              e.stopPropagation();
+              onTitleClickHandler(createdBy);
+            }}>
             {createdBy}
           </span>
         </UserPopOverCard>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx
index 24394841c89..0e79c13e39f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx
@@ -62,12 +62,14 @@ const PopoverContent: FC<Props> = ({
   const deleteButtonCheck =
     threadId && postId && onConfirmation && isAuthor && !isThread;
 
-  const handleDelete = () => {
+  const handleDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     onConfirmation && onConfirmation({ state: true, postId: postId, threadId });
     onPopoverHide();
   };
 
-  const handleReply = () => {
+  const handleReply = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     onReply && onReply();
     onPopoverHide();
 
@@ -142,7 +144,7 @@ const PopoverContent: FC<Props> = ({
         visible={visible}
         zIndex={9999}
         onVisibleChange={handleVisibleChange}>
-        <button>
+        <button onClick={(e) => e.stopPropagation()}>
           <SVGIcons
             alt="add-reaction"
             icon={Icons.REACTION}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor.tsx
index 0091161cb34..809fc5ff359 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor.tsx
@@ -55,7 +55,9 @@ const ActivityFeedEditor: FC<ActivityFeedEditorProp> = ({
   };
 
   return (
-    <div className={classNames('tw-relative', className)}>
+    <div
+      className={classNames('tw-relative', className)}
+      onClick={(e) => e.stopPropagation()}>
       <FeedEditor
         defaultValue={defaultValue}
         placeHolder={placeHolder}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.tsx
index 236af205615..6519c68beb4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/SendButton.tsx
@@ -33,7 +33,9 @@ export const SendButton: FC<SendButtonProp> = ({
   onSaveHandler,
 }) => {
   return (
-    <div className="tw-absolute tw-right-2 tw-bottom-2 tw-flex tw-flex-row tw-items-center tw-justify-end">
+    <div
+      className="tw-absolute tw-right-2 tw-bottom-2 tw-flex tw-flex-row tw-items-center tw-justify-end"
+      onClick={(e) => e.stopPropagation()}>
       <PopOver
         html={
           <Fragment>
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 7eec11f263e..2c003f8b8bc 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,11 +14,13 @@
 import { Card } from 'antd';
 import { isEqual } from 'lodash';
 import React, { FC, Fragment } from 'react';
+import { useHistory } from 'react-router-dom';
 import {
   Post,
   ThreadTaskStatus,
   ThreadType,
 } from '../../../generated/entity/feed/thread';
+import { getTaskDetailPath } from '../../../utils/TasksUtils';
 import AssigneeList from '../../common/AssigneeList/AssigneeList';
 import { leftPanelAntCardStyle } from '../../containers/PageLayout';
 import ActivityFeedCard from '../ActivityFeedCard/ActivityFeedCard';
@@ -39,6 +41,7 @@ const FeedListBody: FC<FeedListBodyProp> = ({
   onConfirmation,
   updateThreadHandler,
 }) => {
+  const history = useHistory();
   const toggleReplyEditor = (id: string) => {
     onThreadIdSelect(selectedThreadId === id ? '' : id);
   };
@@ -89,6 +92,12 @@ const FeedListBody: FC<FeedListBodyProp> = ({
     );
   };
 
+  const handleCardClick = (taskId: number, isTask: boolean) => {
+    if (isTask) {
+      history.push(getTaskDetailPath(String(taskId)));
+    }
+  };
+
   return (
     <Fragment>
       {updatedFeedList
@@ -124,7 +133,10 @@ const FeedListBody: FC<FeedListBodyProp> = ({
                 border: isTask
                   ? '1px solid #C6B5F6'
                   : leftPanelAntCardStyle.border,
-              }}>
+              }}
+              onClick={() =>
+                feed.task && handleCardClick(feed.task.id, isTask)
+              }>
               {isTask && (
                 <TaskBadge status={feed.task?.status as ThreadTaskStatus} />
               )}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadList.tsx
index 11f54b552b6..0571f3f2158 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadList.tsx
@@ -13,12 +13,14 @@
 import { Card } from 'antd';
 import { isEqual } from 'lodash';
 import React, { FC, Fragment } from 'react';
+import { useHistory } from 'react-router-dom';
 import {
   Post,
   ThreadTaskStatus,
   ThreadType,
 } from '../../../generated/entity/feed/thread';
 import { getFeedListWithRelativeDays } from '../../../utils/FeedUtils';
+import { getTaskDetailPath } from '../../../utils/TasksUtils';
 import AssigneeList from '../../common/AssigneeList/AssigneeList';
 import { leftPanelAntCardStyle } from '../../containers/PageLayout';
 import ActivityFeedCard from '../ActivityFeedCard/ActivityFeedCard';
@@ -38,6 +40,7 @@ const ActivityThreadList: FC<ActivityThreadListProp> = ({
   onConfirmation,
   updateThreadHandler,
 }) => {
+  const history = useHistory();
   const { updatedFeedList: updatedThreads, relativeDays } =
     getFeedListWithRelativeDays(threads);
 
@@ -45,6 +48,12 @@ const ActivityThreadList: FC<ActivityThreadListProp> = ({
     onThreadIdSelect(selectedThreadId === id ? '' : id);
   };
 
+  const handleCardClick = (taskId: number, isTask: boolean) => {
+    if (isTask) {
+      history.push(getTaskDetailPath(String(taskId)));
+    }
+  };
+
   return (
     <div className={className}>
       {relativeDays.map((d, i) => {
@@ -88,7 +97,10 @@ const ActivityThreadList: FC<ActivityThreadListProp> = ({
                         border: isTask
                           ? '1px solid #C6B5F6'
                           : leftPanelAntCardStyle.border,
-                      }}>
+                      }}
+                      onClick={() =>
+                        thread.task && handleCardClick(thread.task.id, isTask)
+                      }>
                       {isTask && (
                         <TaskBadge
                           status={thread.task?.status as ThreadTaskStatus}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.jsx b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.jsx
index fe558ba61c3..4f2a419195a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.jsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Emoji.jsx
@@ -50,7 +50,8 @@ const Emoji = ({ reaction, reactionList, onReactionSelect }) => {
     (reactionItem) => reactionItem.user.name
   );
 
-  const handleEmojiOnClick = () => {
+  const handleEmojiOnClick = (e) => {
+    e.stopPropagation();
     if (!isClicked) {
       const operation = isReacted
         ? ReactionOperation.REMOVE
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reaction.jsx b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reaction.jsx
index b8bdda04129..971f96f07e0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reaction.jsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reaction.jsx
@@ -23,7 +23,8 @@ import useImage from '../../hooks/useImage';
 const Reaction = ({ reaction, isReacted, onReactionSelect, onHide }) => {
   const { image } = useImage(`emojis/${reaction.reaction}.png`);
 
-  const handleOnClick = () => {
+  const handleOnClick = (e) => {
+    e.stopPropagation();
     const operation = isReacted
       ? ReactionOperation.REMOVE
       : ReactionOperation.ADD;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reactions.jsx b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reactions.jsx
index 29fbe1f42fa..d459c53237b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reactions.jsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Reactions/Reactions.jsx
@@ -104,7 +104,8 @@ const Reactions = ({ reactions, onReactionSelect }) => {
           <Button
             className="ant-btn-reaction ant-btn-add-reactions"
             data-testid="add-reactions"
-            shape="round">
+            shape="round"
+            onClick={(e) => e.stopPropagation()}>
             <SVGIcons
               alt="add-reaction"
               icon={Icons.ADD_REACTION}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
index 71c065b22cb..809a63df434 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
@@ -161,7 +161,10 @@ const EntityPopOverCard: FC<Props> = ({ children, entityType, entityFQN }) => {
   const PopoverTitle = () => {
     return (
       <Link data-testid="entitylink" to={getEntityLink(entityType, entityFQN)}>
-        <button className="tw-text-info" disabled={AppState.isTourOpen}>
+        <button
+          className="tw-text-info"
+          disabled={AppState.isTourOpen}
+          onClick={(e) => e.stopPropagation()}>
           <span>{entityFQN}</span>
         </button>
       </Link>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/UserPopOverCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/UserPopOverCard.tsx
index 464ff9eac1f..7e403e893f9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/UserPopOverCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/UserPopOverCard.tsx
@@ -119,7 +119,10 @@ const UserPopOverCard: FC<Props> = ({ children, userName, type = 'user' }) => {
         <div className="tw-self-center">
           <button
             className="tw-text-info"
-            onClick={() => onTitleClickHandler(getUserPath(name))}>
+            onClick={(e) => {
+              e.stopPropagation();
+              onTitleClickHandler(getUserPath(name));
+            }}>
             <span className="tw-font-medium tw-mr-2">{displayName}</span>
           </button>
           {displayName !== name ? (