Fix #6356 Clicking tasks on My Tasks should open up the task details (#6399)

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>

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}

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}

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>

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} />
               )}

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}

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

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;

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}

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>

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 ? (