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}

web/helpers/state.helper.ts

@@ -8,7 +8,7 @@ export const orderStateGroups = (unorderedStateGroups: IStateResponse | undefine
 };
 
 export const sortStates = (states: IState[]) => {
-  if (!states || states.length === 0) return null;
+  if (!states || states.length === 0) return;
 
   return states.sort((stateA, stateB) => {
     if (stateA.group === stateB.group) {

web/store/issue/helpers/issue-helper.store.ts

@@ -167,7 +167,7 @@ export class IssueHelperStore implements TIssueHelperStore {
     array = reverse(sortBy(array, "created_at"));
     switch (key) {
       case "sort_order":
-        return reverse(sortBy(array, "sort_order"));
+        return sortBy(array, "sort_order");
 
       case "state__name":
         return reverse(sortBy(array, "state"));

web/store/issue/issue_kanban_view.store.ts

@@ -1,4 +1,5 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { action, computed, makeObservable, observable } from "mobx";
+import { computedFn } from "mobx-utils";
 import { IssueRootStore } from "./root.store";
 // types
 
@@ -8,7 +9,7 @@ export interface IIssueKanBanViewStore {
     subgroupByIssuesVisibility: string[];
   };
   // computed
-  canUserDragDrop: boolean;
+  getCanUserDragDrop: (order_by: string | null, group_by: string | null, sub_group_by?: string | null) => boolean;
   canUserDragDropVertically: boolean;
   canUserDragDropHorizontally: boolean;
   // actions
@@ -27,7 +28,6 @@ export class IssueKanBanViewStore implements IIssueKanBanViewStore {
     makeObservable(this, {
       kanBanToggle: observable,
       // computed
-      canUserDragDrop: computed,
       canUserDragDropVertically: computed,
       canUserDragDropHorizontally: computed,
 
@@ -38,25 +38,13 @@ export class IssueKanBanViewStore implements IIssueKanBanViewStore {
     this.rootStore = _rootStore;
   }
 
-  get canUserDragDrop() {
-    return true;
-    if (this.rootStore.issueDetail.peekIssue?.issueId) return false;
-    // FIXME: uncomment and fix
-    // if (
-    //   this.rootStore?.issueFilter?.userDisplayFilters?.order_by &&
-    //   this.rootStore?.issueFilter?.userDisplayFilters?.order_by === "sort_order" &&
-    //   this.rootStore?.issueFilter?.userDisplayFilters?.group_by &&
-    //   ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.group_by)
-    // ) {
-    //   if (!this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by) return true;
-    //   if (
-    //     this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by &&
-    //     ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by)
-    //   )
-    //     return true;
-    // }
-    // return false;
-  }
+  getCanUserDragDrop = computedFn((group_by: string | null, sub_group_by?: string | null) => {
+    if (group_by && ["state", "priority"].includes(group_by)) {
+      if (!sub_group_by) return true;
+      if (sub_group_by && ["state", "priority"].includes(sub_group_by)) return true;
+    }
+    return false;
+  });
 
   get canUserDragDropVertically() {
     return false;

web/store/state.store.ts

@@ -8,6 +8,8 @@ import { RootStore } from "./root.store";
 import { IState } from "@plane/types";
 // services
 import { ProjectStateService } from "services/project";
+// helpers
+import { sortStates } from "helpers/state.helper";
 
 export interface IStateStore {
   //Loaders
@@ -78,7 +80,7 @@ export class StateStore implements IStateStore {
     const projectId = this.router.projectId;
     const worksapceSlug = this.router.workspaceSlug || "";
     if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
-    return Object.values(this.stateMap).filter((state) => state.project_id === projectId);
+    return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
   }
 
   /**
@@ -106,7 +108,7 @@ export class StateStore implements IStateStore {
   getProjectStates = computedFn((projectId: string) => {
     const worksapceSlug = this.router.workspaceSlug || "";
     if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
-    return Object.values(this.stateMap).filter((state) => state.project_id === projectId);
+    return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
   });
 
   /**