fix: Kanban related issues (#3436)

* fix for drag and drop issues

* add horizontal scroll for kanban

* fix all issues quick action overlap

---------

Co-authored-by: Rahul R <rahul.ramesha@plane.so>

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -236,51 +236,53 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
         </div>
       )}
 
-      <div className="relative h-full w-max min-w-full bg-custom-background-90 px-2">
-        <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
-          {/* drag and delete component */}
-          <div
-            className={`fixed left-1/2 -translate-x-1/2 ${
-              isDragStarted ? "z-40" : ""
-            } top-3 mx-3 flex w-72 items-center justify-center`}
-          >
-            <Droppable droppableId="issue-trash-box" isDropDisabled={!isDragStarted}>
-              {(provided, snapshot) => (
-                <div
-                  className={`${
-                    isDragStarted ? `opacity-100` : `opacity-0`
-                  } flex w-full items-center justify-center rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
-                    snapshot.isDraggingOver ? "bg-red-500 opacity-70 blur-2xl" : ""
-                  } transition duration-300`}
-                  ref={provided.innerRef}
-                  {...provided.droppableProps}
-                >
-                  Drop here to delete the issue.
-                </div>
-              )}
-            </Droppable>
-          </div>
+      <div className="horizontal-scroll-enable relative h-full w-full overflow-auto bg-custom-background-90">
+        <div className="relative h-full w-max min-w-full bg-custom-background-90 px-2">
+          <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
+            {/* drag and delete component */}
+            <div
+              className={`fixed left-1/2 -translate-x-1/2 ${
+                isDragStarted ? "z-40" : ""
+              } top-3 mx-3 flex w-72 items-center justify-center`}
+            >
+              <Droppable droppableId="issue-trash-box" isDropDisabled={!isDragStarted}>
+                {(provided, snapshot) => (
+                  <div
+                    className={`${
+                      isDragStarted ? `opacity-100` : `opacity-0`
+                    } flex w-full items-center justify-center rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
+                      snapshot.isDraggingOver ? "bg-red-500 opacity-70 blur-2xl" : ""
+                    } transition duration-300`}
+                    ref={provided.innerRef}
+                    {...provided.droppableProps}
+                  >
+                    Drop here to delete the issue.
+                  </div>
+                )}
+              </Droppable>
+            </div>
 
-          <KanBanView
-            issuesMap={issueMap}
-            issueIds={issueIds}
-            displayProperties={displayProperties}
-            sub_group_by={sub_group_by}
-            group_by={group_by}
-            handleIssues={handleIssues}
-            quickActions={renderQuickActions}
-            handleKanbanFilters={handleKanbanFilters}
-            kanbanFilters={kanbanFilters}
-            enableQuickIssueCreate={enableQuickAdd}
-            showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
-            quickAddCallback={issues?.quickAddIssue}
-            viewId={viewId}
-            disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
-            canEditProperties={canEditProperties}
-            storeType={storeType}
-            addIssuesToView={addIssuesToView}
-          />
-        </DragDropContext>
+            <KanBanView
+              issuesMap={issueMap}
+              issueIds={issueIds}
+              displayProperties={displayProperties}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              handleIssues={handleIssues}
+              quickActions={renderQuickActions}
+              handleKanbanFilters={handleKanbanFilters}
+              kanbanFilters={kanbanFilters}
+              enableQuickIssueCreate={enableQuickAdd}
+              showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+              quickAddCallback={issues?.quickAddIssue}
+              viewId={viewId}
+              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+              canEditProperties={canEditProperties}
+              storeType={storeType}
+              addIssuesToView={addIssuesToView}
+            />
+          </DragDropContext>
+        </div>
       </div>
     </>
   );

web/components/issues/issue-layouts/kanban/blocks-list.tsx

@@ -4,7 +4,7 @@ import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
 import { EIssueActions } from "../types";
 // components
 import { KanbanIssueBlock } from "components/issues";
-import { Draggable } from "@hello-pangea/dnd";
+import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 
 interface IssueBlocksListProps {
   sub_group_id: string;
@@ -43,8 +43,8 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
             if (sub_group_id) draggableId = `${draggableId}__${sub_group_id}`;
 
             return (
-              <Draggable key={draggableId} draggableId={draggableId} index={index}>
-                {(provided, snapshot) => (
+              <Draggable key={draggableId} draggableId={draggableId} index={index} isDragDisabled={isDragDisabled}>
+                {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
                   <KanbanIssueBlock
                     key={`kanban-issue-block-${issueId}`}
                     issueId={issueId}

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

@@ -199,7 +199,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
       group_by={group_by}
       sub_group_by={sub_group_by}
       sub_group_id={sub_group_id}
-      isDragDisabled={!issueKanBanView?.canUserDragDrop}
+      isDragDisabled={!issueKanBanView?.getCanUserDragDrop(group_by, sub_group_by)}
       handleIssues={handleIssues}
       quickActions={quickActions}
       kanbanFilters={kanbanFilters}

web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx

@@ -100,6 +100,19 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
     [updateFilters, workspaceSlug]
   );
 
+  const renderQuickActions = useCallback(
+    (issue: TIssue, customActionButton?: React.ReactElement, portalElement?: HTMLDivElement | null) => (
+      <AllIssueQuickActions
+        customActionButton={customActionButton}
+        issue={issue}
+        handleUpdate={async () => handleIssues({ ...issue }, EIssueActions.UPDATE)}
+        handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
+        portalElement={portalElement}
+      />
+    ),
+    [handleIssues]
+  );
+
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
       {!globalViewId || globalViewId !== dataViewId || loader === "init-loader" || !issueIds ? (
@@ -119,13 +132,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
                 displayFilters={issueFilters?.displayFilters ?? {}}
                 handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
                 issueIds={issueIds}
-                quickActions={(issue) => (
-                  <AllIssueQuickActions
-                    issue={issue}
-                    handleUpdate={async () => handleIssues({ ...issue }, EIssueActions.UPDATE)}
-                    handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
-                  />
-                )}
+                quickActions={renderQuickActions}
                 handleIssues={handleIssues}
                 canEditProperties={canEditProperties}
                 viewId={globalViewId}