diff --git a/apps/app/helpers/activity.helper.tsx b/apps/app/components/core/activity.tsx
similarity index 62%
rename from apps/app/helpers/activity.helper.tsx
rename to apps/app/components/core/activity.tsx
index af5d9bf12..078941b02 100644
--- a/apps/app/helpers/activity.helper.tsx
+++ b/apps/app/components/core/activity.tsx
@@ -1,5 +1,7 @@
+import { useRouter } from "next/router";
+
// icons
-import { Icon } from "components/ui";
+import { Icon, Tooltip } from "components/ui";
import { Squares2X2Icon } from "@heroicons/react/24/outline";
import { BlockedIcon, BlockerIcon } from "components/icons";
// helpers
@@ -8,26 +10,65 @@ import { capitalizeFirstLetter } from "helpers/string.helper";
// types
import { IIssueActivity } from "types";
-export const activityDetails: {
+const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
+ const router = useRouter();
+ const { workspaceSlug } = router.query;
+
+ return (
+
+
+ {activity.issue_detail
+ ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
+ : "Issue"}
+
+
+
+ );
+};
+
+const activityDetails: {
[key: string]: {
- message: (activity: IIssueActivity) => React.ReactNode;
+ message: (activity: IIssueActivity, showIssue: boolean) => React.ReactNode;
icon: React.ReactNode;
};
} = {
assignees: {
- message: (activity) => {
+ message: (activity, showIssue) => {
if (activity.old_value === "")
return (
<>
added a new assignee{" "}
- {activity.new_value}.
+ {activity.new_value}
+ {showIssue && (
+ <>
+ {" "}
+ to
+ >
+ )}
+ .
>
);
else
return (
<>
removed the assignee{" "}
- {activity.old_value}.
+ {activity.old_value}
+ {showIssue && (
+ <>
+ {" "}
+ from
+ >
+ )}
+ .
>
);
},
@@ -41,7 +82,7 @@ export const activityDetails: {
icon: ,
},
attachment: {
- message: (activity) => {
+ message: (activity, showIssue) => {
if (activity.verb === "created")
return (
<>
@@ -55,9 +96,27 @@ export const activityDetails: {
attachment
+ {showIssue && (
+ <>
+ {" "}
+ to
+ >
+ )}
+ >
+ );
+ else
+ return (
+ <>
+ removed an attachment
+ {showIssue && (
+ <>
+ {" "}
+ from
+ >
+ )}
+ .
>
);
- else return "removed an attachment.";
},
icon: ,
},
@@ -126,17 +185,47 @@ export const activityDetails: {
icon: ,
},
description: {
- message: (activity) => "updated the description.",
+ message: (activity, showIssue) => (
+ <>
+ updated the description
+ {showIssue && (
+ <>
+ {" "}
+ of
+ >
+ )}
+ .
+ >
+ ),
icon: ,
},
estimate_point: {
- message: (activity) => {
- if (!activity.new_value) return "removed the estimate point.";
+ message: (activity, showIssue) => {
+ if (!activity.new_value)
+ return (
+ <>
+ removed the estimate point
+ {showIssue && (
+ <>
+ {" "}
+ from
+ >
+ )}
+ .
+ >
+ );
else
return (
<>
set the estimate point to{" "}
- {activity.new_value}.
+ {activity.new_value}
+ {showIssue && (
+ <>
+ {" "}
+ for
+ >
+ )}
+ .
>
);
},
@@ -150,7 +239,7 @@ export const activityDetails: {
icon: ,
},
labels: {
- message: (activity) => {
+ message: (activity, showIssue) => {
if (activity.old_value === "")
return (
<>
@@ -165,6 +254,12 @@ export const activityDetails: {
/>
{activity.new_value}
+ {showIssue && (
+ <>
+ {" "}
+ to
+ >
+ )}
>
);
else
@@ -181,13 +276,19 @@ export const activityDetails: {
/>
{activity.old_value}
+ {showIssue && (
+ <>
+ {" "}
+ from
+ >
+ )}
>
);
},
icon: ,
},
link: {
- message: (activity) => {
+ message: (activity, showIssue) => {
if (activity.verb === "created")
return (
<>
@@ -200,8 +301,14 @@ export const activityDetails: {
>
link
- {" "}
- to the issue.
+
+ {showIssue && (
+ <>
+ {" "}
+ to
+ >
+ )}
+ .
>
);
else
@@ -216,8 +323,14 @@ export const activityDetails: {
>
link
- {" "}
- from the issue.
+
+ {showIssue && (
+ <>
+ {" "}
+ from
+ >
+ )}
+ .
>
);
},
@@ -250,52 +363,102 @@ export const activityDetails: {
icon: ,
},
name: {
- message: (activity) => `set the name to ${activity.new_value}.`,
+ message: (activity, showIssue) => (
+ <>
+ set the name to {activity.new_value}
+ {showIssue && (
+ <>
+ {" "}
+ of
+ >
+ )}
+ .
+ >
+ ),
icon: ,
},
parent: {
- message: (activity) => {
+ message: (activity, showIssue) => {
if (!activity.new_value)
return (
<>
removed the parent{" "}
- {activity.old_value}.
+ {activity.old_value}
+ {showIssue && (
+ <>
+ {" "}
+ from
+ >
+ )}
+ .
>
);
else
return (
<>
set the parent to{" "}
- {activity.new_value}.
+ {activity.new_value}
+ {showIssue && (
+ <>
+ {" "}
+ for
+ >
+ )}
+ .
>
);
},
icon: ,
},
priority: {
- message: (activity) => (
+ message: (activity, showIssue) => (
<>
set the priority to{" "}
{activity.new_value ? capitalizeFirstLetter(activity.new_value) : "None"}
+ {showIssue && (
+ <>
+ {" "}
+ for
+ >
+ )}
.
>
),
icon: ,
},
state: {
- message: (activity) => (
+ message: (activity, showIssue) => (
<>
set the state to{" "}
- {activity.new_value}.
+ {activity.new_value}
+ {showIssue && (
+ <>
+ {" "}
+ for
+ >
+ )}
+ .
>
),
icon: ,
},
target_date: {
- message: (activity) => {
- if (!activity.new_value) return "removed the due date.";
+ message: (activity, showIssue) => {
+ if (!activity.new_value)
+ return (
+ <>
+ removed the due date
+ {showIssue && (
+ <>
+ {" "}
+ from
+ >
+ )}
+ .
+ >
+ );
else
return (
<>
@@ -303,6 +466,12 @@ export const activityDetails: {
{renderShortDateWithYearFormat(activity.new_value)}
+ {showIssue && (
+ <>
+ {" "}
+ for
+ >
+ )}
.
>
);
@@ -310,3 +479,19 @@ export const activityDetails: {
icon: ,
},
};
+
+export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
+ <>{activityDetails[activity.field as keyof typeof activityDetails].icon}>
+);
+
+export const ActivityMessage = ({
+ activity,
+ showIssue = false,
+}: {
+ activity: IIssueActivity;
+ showIssue?: boolean;
+}) => (
+ <>
+ {activityDetails[activity.field as keyof typeof activityDetails].message(activity, showIssue)}
+ >
+);
diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts
index 4baefbd5b..259655ae7 100644
--- a/apps/app/components/core/index.ts
+++ b/apps/app/components/core/index.ts
@@ -3,6 +3,7 @@ export * from "./modals";
export * from "./sidebar";
export * from "./theme";
export * from "./views";
+export * from "./activity";
export * from "./feeds";
export * from "./reaction-selector";
export * from "./image-picker-popover";
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index 540d81df9..54dc39613 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -8,12 +8,12 @@ import useSWR from "swr";
// services
import issuesService from "services/issues.service";
// components
+import { ActivityIcon, ActivityMessage } from "components/core";
import { CommentCard } from "components/issues/comment";
// ui
import { Icon, Loader } from "components/ui";
// helpers
import { timeAgo } from "helpers/date-time.helper";
-import { activityDetails } from "helpers/activity.helper";
// types
import { ICurrentUserResponse, IIssueComment } from "types";
// fetch-keys
@@ -91,11 +91,11 @@ export const IssueActivitySection: React.FC = ({ issueId, user }) => {
{issueActivities.map((activityItem, index) => {
// determines what type of action is performed
- const message = activityItem.field
- ? activityDetails[activityItem.field as keyof typeof activityDetails]?.message(
- activityItem
- )
- : "created the issue.";
+ const message = activityItem.field ? (
+
+ ) : (
+ "created the issue."
+ );
if ("field" in activityItem && activityItem.field !== "updated_by") {
return (
@@ -116,8 +116,7 @@ export const IssueActivitySection: React.FC = ({ issueId, user }) => {
activityItem.new_value === "restore" ? (
) : (
- activityDetails[activityItem.field as keyof typeof activityDetails]
- ?.icon
+
)
) : activityItem.actor_detail.avatar &&
activityItem.actor_detail.avatar !== "" ? (
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index a78be0fa1..987254f3b 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -140,11 +140,7 @@ export const CommentCard: React.FC = ({ comment, onSubmit, handleCommentD
ref={showEditorRef}
/>
-
+
diff --git a/apps/app/components/issues/comment/comment-reaction.tsx b/apps/app/components/issues/comment/comment-reaction.tsx
index 33e12bc6f..b6ce3bbbc 100644
--- a/apps/app/components/issues/comment/comment-reaction.tsx
+++ b/apps/app/components/issues/comment/comment-reaction.tsx
@@ -1,5 +1,7 @@
import React from "react";
+import { useRouter } from "next/router";
+
// hooks
import useUser from "hooks/use-user";
import useCommentReaction from "hooks/use-comment-reaction";
@@ -9,13 +11,15 @@ import { ReactionSelector } from "components/core";
import { renderEmoji } from "helpers/emoji.helper";
type Props = {
- workspaceSlug?: string | string[];
projectId?: string | string[];
commentId: string;
};
export const CommentReaction: React.FC = (props) => {
- const { workspaceSlug, projectId, commentId } = props;
+ const { projectId, commentId } = props;
+
+ const router = useRouter();
+ const { workspaceSlug } = router.query;
const { user } = useUser();
diff --git a/apps/app/components/profile/overview/activity.tsx b/apps/app/components/profile/overview/activity.tsx
index 28801ed8f..eb3478020 100644
--- a/apps/app/components/profile/overview/activity.tsx
+++ b/apps/app/components/profile/overview/activity.tsx
@@ -1,14 +1,14 @@
import { useRouter } from "next/router";
-import Link from "next/link";
import useSWR from "swr";
// services
import userService from "services/user.service";
+// components
+import { ActivityMessage } from "components/core";
// ui
import { Icon, Loader } from "components/ui";
// helpers
-import { activityDetails } from "helpers/activity.helper";
import { timeAgo } from "helpers/date-time.helper";
// fetch-keys
import { USER_PROFILE_ACTIVITY } from "constants/fetch-keys";
@@ -55,12 +55,12 @@ export const ProfileActivity = () => {
{activity.actor_detail.first_name} {activity.actor_detail.last_name}{" "}
{activity.field ? (
- activityDetails[activity.field]?.message(activity as any)
+
) : (
created this{" "}