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,6 +236,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
         </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 */}
@@ -282,6 +283,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
             />
           </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}>
+              <Draggable key={draggableId} draggableId={draggableId} index={index} isDragDisabled={isDragDisabled}>
-                {(provided, snapshot) => (
+                {(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) => (
+                quickActions={renderQuickActions}
-                  <AllIssueQuickActions
-                    issue={issue}
-                    handleUpdate={async () => handleIssues({ ...issue }, EIssueActions.UPDATE)}
-                    handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
-                  />
-                )}
                 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() {
+  getCanUserDragDrop = computedFn((group_by: string | null, sub_group_by?: string | null) => {
-    return true;
+    if (group_by && ["state", "priority"].includes(group_by)) {
-    if (this.rootStore.issueDetail.peekIssue?.issueId) return false;
+      if (!sub_group_by) return true;
-    // FIXME: uncomment and fix
+      if (sub_group_by && ["state", "priority"].includes(sub_group_by)) return true;
-    // 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;
     }
+    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));
   });
 
   /**