chore: role restriction to issue detail & peek-overview (#3146)

* chore: disabled interaction with title & description in peekview & issue detail

* chore: restriction to attachments delete for lower roles

* chore: kanban & calendar block drag restriction for lower roles

* fix: module/issue sidebar links access for lower roles

* fix: issue detail role validation

* fix: user role validation condition

web/components/core/sidebar/links-list.tsx

@@ -50,8 +50,8 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
               </Tooltip>
             </div>
 
-            {!isNotAllowed && (
+            <div className="z-[1] flex flex-shrink-0 items-center gap-2">
-              <div className="z-[1] flex flex-shrink-0 items-center gap-2">
+              {!isNotAllowed && (
                 <button
                   type="button"
                   className="flex items-center justify-center p-1 hover:bg-custom-background-80"
@@ -63,14 +63,16 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
                 >
                   <Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
                 </button>
-                <a
+              )}
-                  href={link.url}
+              <a
-                  target="_blank"
+                href={link.url}
-                  rel="noopener noreferrer"
+                target="_blank"
-                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                rel="noopener noreferrer"
-                >
+                className="flex items-center justify-center p-1 hover:bg-custom-background-80"
-                  <ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+              >
-                </a>
+                <ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+              </a>
+              {!isNotAllowed && (
                 <button
                   type="button"
                   className="flex items-center justify-center p-1 hover:bg-custom-background-80"
@@ -82,8 +84,8 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
                 >
                   <Trash2 className="h-3 w-3" />
                 </button>
-              </div>
+              )}
-            )}
+            </div>
           </div>
           <div className="px-5">
             <p className="mt-0.5 stroke-[1.5] text-xs text-custom-text-300">

web/components/issues/attachment/attachments.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useSWR from "swr";
@@ -24,7 +24,14 @@ import { IIssueAttachment } from "types";
 const issueAttachmentService = new IssueAttachmentService();
 const projectMemberService = new ProjectMemberService();
 
-export const IssueAttachments = () => {
+type Props = {
+  editable: boolean;
+};
+
+export const IssueAttachments: React.FC<Props> = (props) => {
+  const { editable } = props;
+
+  // states
   const [deleteAttachment, setDeleteAttachment] = useState<IIssueAttachment | null>(null);
   const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
 
@@ -86,14 +93,16 @@ export const IssueAttachments = () => {
               </div>
             </Link>
 
-            <button
+            {editable && (
-              onClick={() => {
+              <button
-                setDeleteAttachment(file);
+                onClick={() => {
-                setAttachmentDeleteModal(true);
+                  setDeleteAttachment(file);
-              }}
+                  setAttachmentDeleteModal(true);
-            >
+                }}
-              <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
+              >
-            </button>
+                <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
+              </button>
+            )}
           </div>
         ))}
     </>

web/components/issues/description-form.tsx

@@ -135,7 +135,9 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
                   debouncedFormSave();
                 }}
                 required
-                className="min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
+                className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${
+                  !isAllowed ? "hover:cursor-not-allowed" : ""
+                }`}
                 hasError={Boolean(errors?.description)}
                 role="textbox"
                 disabled={!isAllowed}
@@ -170,7 +172,9 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
               setShouldShowAlert={setShowAlert}
               setIsSubmitting={setIsSubmitting}
               dragDropEnabled
-              customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
+              customClassName={
+                isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200 pointer-events-none"
+              }
               noBorder={!isAllowed}
               onChange={(description: Object, description_html: string) => {
                 setShowAlert(true);

web/components/issues/issue-layouts/calendar/issue-blocks.tsx

@@ -10,6 +10,9 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // types
 import { IIssue } from "types";
 import { IIssueResponse } from "store/issues/types";
+import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
   issues: IIssueResponse | undefined;
@@ -26,6 +29,11 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
 
+  // mobx store
+  const {
+    user: { currentProjectRole },
+  } = useMobxStore();
+
   const menuActionRef = useRef<HTMLDivElement | null>(null);
 
   const handleIssuePeekOverview = (issue: IIssue) => {
@@ -51,6 +59,8 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
     </div>
   );
 
+  const isEditable = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <>
       {issueIdList?.slice(0, showAllIssues ? issueIdList.length : 4).map((issueId, index) => {
@@ -58,7 +68,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
 
         const issue = issues?.[issueId];
         return (
-          <Draggable key={issue.id} draggableId={issue.id} index={index}>
+          <Draggable key={issue.id} draggableId={issue.id} index={index} isDragDisabled={!isEditable}>
             {(provided, snapshot) => (
               <div
                 className="relative cursor-pointer p-1 px-2"

web/components/issues/issue-layouts/kanban/block.tsx

@@ -121,10 +121,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
 
   return (
     <>
-      <Draggable draggableId={draggableId} index={index}>
+      <Draggable draggableId={draggableId} index={index} isDragDisabled={!canEditIssueProperties}>
         {(provided, snapshot) => (
           <div
-            className="group/kanban-block relative p-1.5 hover:cursor-default"
+            className="group/kanban-block relative p-1.5"
             {...provided.draggableProps}
             {...provided.dragHandleProps}
             ref={provided.innerRef}

web/components/issues/main-content.tsx

@@ -41,7 +41,7 @@ const issueService = new IssueService();
 const issueCommentService = new IssueCommentService();
 
 export const IssueMainContent: React.FC<Props> = observer((props) => {
-  const { issueDetails, submitChanges, uneditable = false } = props;
+  const { issueDetails, submitChanges, uneditable } = props;
   // states
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   // router
@@ -152,7 +152,9 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
       );
   };
 
-  const isAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+  const isAllowed =
+    (!!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER) ||
+    (uneditable !== undefined && !uneditable);
 
   return (
     <>
@@ -232,7 +234,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           workspaceSlug={workspaceSlug as string}
           issue={issueDetails}
           handleFormSubmit={submitChanges}
-          isAllowed={isAllowed || !uneditable}
+          isAllowed={isAllowed}
         />
 
         {workspaceSlug && projectId && (
@@ -250,8 +252,8 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
       <div className="flex flex-col gap-3 py-3">
         <h3 className="text-lg">Attachments</h3>
         <div className="grid  grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-          <IssueAttachmentUpload disabled={uneditable} />
+          <IssueAttachmentUpload disabled={!isAllowed} />
-          <IssueAttachments />
+          <IssueAttachments editable={isAllowed} />
         </div>
       </div>
       <div className="space-y-5 pt-3">
@@ -264,7 +266,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
         />
         <AddComment
           onSubmit={handleAddComment}
-          disabled={uneditable}
+          disabled={!isAllowed}
           showAccessSpecifier={projectDetails && projectDetails.is_deployed}
         />
       </div>

web/components/issues/peek-overview/issue-detail.tsx

@@ -153,10 +153,12 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
                   debouncedFormSave();
                 }}
                 required={true}
-                className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent  !p-0 text-xl outline-none ring-0 focus:!px-3 focus:!py-2 focus:ring-1 focus:ring-custom-primary"
+                className={`min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent  !p-0 text-xl outline-none ring-0 focus:!px-3 focus:!py-2 focus:ring-1 focus:ring-custom-primary ${
+                  !isAllowed ? "hover:cursor-not-allowed" : ""
+                }`}
                 hasError={Boolean(errors?.description)}
                 role="textbox"
-                disabled={!true}
+                disabled={!isAllowed}
               />
             )}
           />
@@ -188,7 +190,9 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
               setShouldShowAlert={setShowAlert}
               setIsSubmitting={setIsSubmitting}
               dragDropEnabled
-              customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
+              customClassName={
+                isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200 pointer-events-none"
+              }
               noBorder={!isAllowed}
               onChange={(description: Object, description_html: string) => {
                 setShowAlert(true);