From f7d6219bd158e9c164ce1d113a130b0d3b7b2ba0 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 23 Apr 2024 13:03:30 +0530
Subject: [PATCH] [WEB-1038] fix: kanban layout drag permission validation
 (#4255)

* fix: kanban layout drag permission validation

* chore: code refactor
---
 web/components/issues/issue-layouts/kanban/block.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 195bb09b7..d12e28914 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -124,6 +124,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
   const [isDraggingOverBlock, setIsDraggingOverBlock] = useState(false);
   const [isCurrentBlockDragging, setIsCurrentBlockDragging] = useState(false);
 
+  const canEditIssueProperties = canEditProperties(issue?.project_id);
+
+  const isDragAllowed = !isDragDisabled && !issue?.tempId && canEditIssueProperties;
+
   // Make Issue block both as as Draggable and,
   // as a DropTarget for other issues being dragged to get the location of drop
   useEffect(() => {
@@ -134,7 +138,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
     return combine(
       draggable({
         element,
-        canDrag: () => !isDragDisabled,
+        canDrag: () => isDragAllowed,
         getInitialData: () => ({ id: issue?.id, type: "ISSUE" }),
         onDragStart: () => {
           setIsCurrentBlockDragging(true);
@@ -164,15 +168,13 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
 
   if (!issue) return null;
 
-  const canEditIssueProperties = canEditProperties(issue.project_id);
-
   return (
     <>
       <DropIndicator isVisible={!isCurrentBlockDragging && isDraggingOverBlock} />
       <div
         // make Z-index higher at the beginning of drag, to have a issue drag image of issue block without any overlaps
         className={cn("group/kanban-block relative p-1.5", { "z-[1]": isCurrentBlockDragging })}
-        onDragStart={() => !isDragDisabled && setIsCurrentBlockDragging(true)}
+        onDragStart={() => isDragAllowed && setIsCurrentBlockDragging(true)}
       >
         <ControlLink
           id={`issue-${issue.id}`}
@@ -186,7 +188,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
           <div
             className={cn(
               "rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
-              { "hover:cursor-pointer": !isDragDisabled },
+              { "hover:cursor-pointer": isDragAllowed },
               { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id },
               { "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
             )}