From 68ebcfd04ee608772d134e806cd6d62fceada080 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 3 Apr 2024 18:02:07 +0530
Subject: [PATCH] [842] chore: disable comments and reactions in archived
 issues. (#4101)

---
 .../issue-activity/activity-comment-root.tsx  |  4 ++-
 .../issue-activity/comments/comment-card.tsx  |  6 ++--
 .../issue-activity/comments/root.tsx          |  4 ++-
 .../issue-detail/issue-activity/root.tsx      | 29 +++++++++-------
 .../issues/issue-detail/main-content.tsx      |  2 +-
 .../issue-detail/reactions/issue-comment.tsx  | 33 ++++++++++++-------
 .../issues/issue-detail/reactions/issue.tsx   | 20 +++++++----
 .../issues/peek-overview/issue-detail.tsx     |  1 +
 web/components/issues/peek-overview/view.tsx  | 14 ++++++--
 9 files changed, 77 insertions(+), 36 deletions(-)

diff --git a/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx b/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
index c7842a8db..17794a618 100644
--- a/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
@@ -13,10 +13,11 @@ type TIssueActivityCommentRoot = {
   issueId: string;
   activityOperations: TActivityOperations;
   showAccessSpecifier?: boolean;
+  disabled?: boolean;
 };
 
 export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer((props) => {
-  const { workspaceSlug, issueId, activityOperations, showAccessSpecifier } = props;
+  const { workspaceSlug, issueId, activityOperations, showAccessSpecifier, disabled } = props;
   // hooks
   const {
     activity: { getActivityCommentByIssueId },
@@ -37,6 +38,7 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
             activityOperations={activityOperations}
             ends={index === 0 ? "top" : index === activityComments.length - 1 ? "bottom" : undefined}
             showAccessSpecifier={showAccessSpecifier}
+            disabled={disabled}
           />
         ) : activityComment.activity_type === "ACTIVITY" ? (
           <IssueActivityList
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
index 883bb6716..8f694af09 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
@@ -25,10 +25,11 @@ type TIssueCommentCard = {
   activityOperations: TActivityOperations;
   ends: "top" | "bottom" | undefined;
   showAccessSpecifier?: boolean;
+  disabled?: boolean;
 };
 
 export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
-  const { workspaceSlug, commentId, activityOperations, ends, showAccessSpecifier = false } = props;
+  const { workspaceSlug, commentId, activityOperations, ends, showAccessSpecifier = false, disabled = false } = props;
   // hooks
   const {
     comment: { getCommentById },
@@ -81,7 +82,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
       commentId={commentId}
       quickActions={
         <>
-          {currentUser?.id === comment.actor && (
+          {!disabled && currentUser?.id === comment.actor && (
             <CustomMenu ellipsis>
               <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
                 <Pencil className="h-3 w-3" />
@@ -184,6 +185,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
             projectId={comment?.project_detail?.id}
             commentId={comment.id}
             currentUser={currentUser}
+            disabled={disabled}
           />
         </div>
       </>
diff --git a/web/components/issues/issue-detail/issue-activity/comments/root.tsx b/web/components/issues/issue-detail/issue-activity/comments/root.tsx
index 52a500a16..d374da875 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/root.tsx
@@ -12,10 +12,11 @@ type TIssueCommentRoot = {
   issueId: string;
   activityOperations: TActivityOperations;
   showAccessSpecifier?: boolean;
+  disabled?: boolean;
 };
 
 export const IssueCommentRoot: FC<TIssueCommentRoot> = observer((props) => {
-  const { workspaceSlug, issueId, activityOperations, showAccessSpecifier } = props;
+  const { workspaceSlug, issueId, activityOperations, showAccessSpecifier, disabled } = props;
   // hooks
   const {
     comment: { getCommentsByIssueId },
@@ -34,6 +35,7 @@ export const IssueCommentRoot: FC<TIssueCommentRoot> = observer((props) => {
           ends={index === 0 ? "top" : index === commentIds.length - 1 ? "bottom" : undefined}
           activityOperations={activityOperations}
           showAccessSpecifier={showAccessSpecifier}
+          disabled={disabled}
         />
       ))}
     </div>
diff --git a/web/components/issues/issue-detail/issue-activity/root.tsx b/web/components/issues/issue-detail/issue-activity/root.tsx
index 75c8bfd4c..1056ecf77 100644
--- a/web/components/issues/issue-detail/issue-activity/root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/root.tsx
@@ -14,6 +14,7 @@ type TIssueActivity = {
   workspaceSlug: string;
   projectId: string;
   issueId: string;
+  disabled?: boolean;
 };
 
 type TActivityTabs = "all" | "activity" | "comments";
@@ -43,7 +44,7 @@ export type TActivityOperations = {
 };
 
 export const IssueActivity: FC<TIssueActivity> = observer((props) => {
-  const { workspaceSlug, projectId, issueId } = props;
+  const { workspaceSlug, projectId, issueId, disabled = false } = props;
   // hooks
   const { createComment, updateComment, removeComment } = useIssueDetail();
   const { getProjectById } = useProject();
@@ -145,12 +146,15 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
                 issueId={issueId}
                 activityOperations={activityOperations}
                 showAccessSpecifier={project.is_deployed}
+                disabled={disabled}
               />
-              <IssueCommentCreate
-                workspaceSlug={workspaceSlug}
-                activityOperations={activityOperations}
-                showAccessSpecifier={project.is_deployed}
-              />
+              {!disabled && (
+                <IssueCommentCreate
+                  workspaceSlug={workspaceSlug}
+                  activityOperations={activityOperations}
+                  showAccessSpecifier={project.is_deployed}
+                />
+              )}
             </div>
           ) : activityTab === "activity" ? (
             <IssueActivityRoot issueId={issueId} />
@@ -161,12 +165,15 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
                 issueId={issueId}
                 activityOperations={activityOperations}
                 showAccessSpecifier={project.is_deployed}
+                disabled={disabled}
               />
-              <IssueCommentCreate
-                workspaceSlug={workspaceSlug}
-                activityOperations={activityOperations}
-                showAccessSpecifier={project.is_deployed}
-              />
+              {!disabled && (
+                <IssueCommentCreate
+                  workspaceSlug={workspaceSlug}
+                  activityOperations={activityOperations}
+                  showAccessSpecifier={project.is_deployed}
+                />
+              )}
             </div>
           )}
         </div>
diff --git a/web/components/issues/issue-detail/main-content.tsx b/web/components/issues/issue-detail/main-content.tsx
index 50d168dca..241c96109 100644
--- a/web/components/issues/issue-detail/main-content.tsx
+++ b/web/components/issues/issue-detail/main-content.tsx
@@ -132,7 +132,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
         disabled={!is_editable}
       />
 
-      <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
+      <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={!is_editable} />
     </>
   );
 });
diff --git a/web/components/issues/issue-detail/reactions/issue-comment.tsx b/web/components/issues/issue-detail/reactions/issue-comment.tsx
index 2925a593d..5461e35c4 100644
--- a/web/components/issues/issue-detail/reactions/issue-comment.tsx
+++ b/web/components/issues/issue-detail/reactions/issue-comment.tsx
@@ -3,10 +3,12 @@ import { observer } from "mobx-react-lite";
 import { IUser } from "@plane/types";
 // components
 import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
+// helper
+import { cn } from "@/helpers/common.helper";
 import { renderEmoji } from "@/helpers/emoji.helper";
 import { formatTextList } from "@/helpers/issue.helper";
+// hooks
 import { useIssueDetail, useMember } from "@/hooks/store";
-// helper
 // types
 import { ReactionSelector } from "./reaction-selector";
 
@@ -15,10 +17,11 @@ export type TIssueCommentReaction = {
   projectId: string;
   commentId: string;
   currentUser: IUser;
+  disabled?: boolean;
 };
 
 export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props) => {
-  const { workspaceSlug, projectId, commentId, currentUser } = props;
+  const { workspaceSlug, projectId, commentId, currentUser, disabled = false } = props;
 
   // hooks
   const {
@@ -88,12 +91,14 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
 
   return (
     <div className="mt-4 relative flex items-center gap-1.5">
-      <ReactionSelector
-        size="md"
-        position="top"
-        value={userReactions}
-        onSelect={issueCommentReactionOperations.react}
-      />
+      {!disabled && (
+        <ReactionSelector
+          size="md"
+          position="top"
+          value={userReactions}
+          onSelect={issueCommentReactionOperations.react}
+        />
+      )}
 
       {reactionIds &&
         Object.keys(reactionIds || {}).map(
@@ -103,11 +108,15 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
                 <Tooltip tooltipContent={getReactionUsers(reaction)}>
                   <button
                     type="button"
-                    onClick={() => issueCommentReactionOperations.react(reaction)}
+                    onClick={() => !disabled && issueCommentReactionOperations.react(reaction)}
                     key={reaction}
-                    className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
-                      userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-custom-background-80"
-                    }`}
+                    className={cn(
+                      "flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100",
+                      userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-custom-background-80",
+                      {
+                        "cursor-not-allowed": disabled,
+                      }
+                    )}
                   >
                     <span>{renderEmoji(reaction)}</span>
                     <span className={userReactions.includes(reaction) ? "text-custom-primary-100" : ""}>
diff --git a/web/components/issues/issue-detail/reactions/issue.tsx b/web/components/issues/issue-detail/reactions/issue.tsx
index 27b463813..26e51fe61 100644
--- a/web/components/issues/issue-detail/reactions/issue.tsx
+++ b/web/components/issues/issue-detail/reactions/issue.tsx
@@ -5,6 +5,7 @@ import { IUser } from "@plane/types";
 // ui
 import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // helpers
+import { cn } from "@/helpers/common.helper";
 import { renderEmoji } from "@/helpers/emoji.helper";
 import { formatTextList } from "@/helpers/issue.helper";
 import { useIssueDetail, useMember } from "@/hooks/store";
@@ -16,10 +17,11 @@ export type TIssueReaction = {
   projectId: string;
   issueId: string;
   currentUser: IUser;
+  disabled?: boolean;
 };
 
 export const IssueReaction: FC<TIssueReaction> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, currentUser } = props;
+  const { workspaceSlug, projectId, issueId, currentUser, disabled = false } = props;
   // hooks
   const {
     reaction: { getReactionsByIssueId, reactionsByUser, getReactionById },
@@ -89,7 +91,9 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
 
   return (
     <div className="mt-4 relative flex items-center gap-1.5">
-      <ReactionSelector size="md" position="top" value={userReactions} onSelect={issueReactionOperations.react} />
+      {!disabled && (
+        <ReactionSelector size="md" position="top" value={userReactions} onSelect={issueReactionOperations.react} />
+      )}
 
       {reactionIds &&
         Object.keys(reactionIds || {}).map(
@@ -99,11 +103,15 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
                 <Tooltip tooltipContent={getReactionUsers(reaction)}>
                   <button
                     type="button"
-                    onClick={() => issueReactionOperations.react(reaction)}
+                    onClick={() => !disabled && issueReactionOperations.react(reaction)}
                     key={reaction}
-                    className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
-                      userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-custom-background-80"
-                    }`}
+                    className={cn(
+                      "flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100",
+                      userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-custom-background-80",
+                      {
+                        "cursor-not-allowed": disabled,
+                      }
+                    )}
                   >
                     <span>{renderEmoji(reaction)}</span>
                     <span className={userReactions.includes(reaction) ? "text-custom-primary-100" : ""}>
diff --git a/web/components/issues/peek-overview/issue-detail.tsx b/web/components/issues/peek-overview/issue-detail.tsx
index b3dd7808e..ab84dc3c0 100644
--- a/web/components/issues/peek-overview/issue-detail.tsx
+++ b/web/components/issues/peek-overview/issue-detail.tsx
@@ -87,6 +87,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
           projectId={issue.project_id}
           issueId={issueId}
           currentUser={currentUser}
+          disabled={disabled}
         />
       )}
     </div>
diff --git a/web/components/issues/peek-overview/view.tsx b/web/components/issues/peek-overview/view.tsx
index 35925d6cd..0366fbb61 100644
--- a/web/components/issues/peek-overview/view.tsx
+++ b/web/components/issues/peek-overview/view.tsx
@@ -177,7 +177,12 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           disabled={disabled || is_archived}
                         />
 
-                        <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
+                        <IssueActivity
+                          workspaceSlug={workspaceSlug}
+                          projectId={projectId}
+                          issueId={issueId}
+                          disabled={disabled || is_archived}
+                        />
                       </div>
                     ) : (
                       <div className="vertical-scrollbar flex h-full w-full overflow-auto">
@@ -210,7 +215,12 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                               workspaceSlug={workspaceSlug}
                             />
 
-                            <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
+                            <IssueActivity
+                              workspaceSlug={workspaceSlug}
+                              projectId={projectId}
+                              issueId={issueId}
+                              disabled={disabled || is_archived}
+                            />
                           </div>
                         </div>
                         <div