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

2025-08-23 00:18:06 +00:00 · 2022-07-28 15:13:33 +05:30 · 2022-07-28 15:13:33 +05:30 · dd3d4cb926
commit dd3d4cb926
parent 92597fc265
11 changed files with 55 additions and 13 deletions
--- 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>
--- 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}
--- 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}
--- 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>
--- 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} />
              )}
--- 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}
--- 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
--- 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;
--- 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}
--- 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>
--- 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 ? (