[842] chore: disable comments and reactions in archived issues. (#4101)

2024-04-03 18:02:07 +05:30 · 2024-04-03 18:02:07 +05:30 · 68ebcfd04e
commit 68ebcfd04e
parent fed5916907
9 changed files with 77 additions and 36 deletions
--- 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
--- 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>
      </>
--- 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>
--- 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>
--- 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} />
    </>
  );
 });
--- 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" : ""}>
--- 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" : ""}>
--- 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>
--- 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