From 91447e2e4daf9bfce5b7c3e480dc7eb43f08f8cc Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Tue, 11 Jun 2024 19:08:55 +0530
Subject: [PATCH] gantt remove drag handles

---
 .../components/cycles/gantt-chart/blocks.tsx  | 13 +++++-----
 .../gantt-chart/sidebar/cycles/block.tsx      | 14 +---------
 .../gantt-chart/sidebar/cycles/sidebar.tsx    |  4 +--
 .../gantt-chart/sidebar/gantt-dnd-HOC.tsx     | 26 +++++++++++++------
 .../gantt-chart/sidebar/issues/block.tsx      | 14 +---------
 .../gantt-chart/sidebar/modules/block.tsx     | 14 +---------
 .../components/modules/gantt-chart/blocks.tsx |  1 +
 7 files changed, 30 insertions(+), 56 deletions(-)

diff --git a/web/core/components/cycles/gantt-chart/blocks.tsx b/web/core/components/cycles/gantt-chart/blocks.tsx
index 20c5cd4c6..3d312d3fe 100644
--- a/web/core/components/cycles/gantt-chart/blocks.tsx
+++ b/web/core/components/cycles/gantt-chart/blocks.tsx
@@ -78,6 +78,7 @@ export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
     <Link
       className="relative flex h-full w-full items-center gap-2"
       href={`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`}
+      draggable={false}
     >
       <ContrastIcon
         className="h-5 w-5 flex-shrink-0"
@@ -85,12 +86,12 @@ export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
           cycleStatus === "current"
             ? "#09a953"
             : cycleStatus === "upcoming"
-            ? "#f7ae59"
-            : cycleStatus === "completed"
-            ? "#3f76ff"
-            : cycleStatus === "draft"
-            ? "rgb(var(--color-text-200))"
-            : ""
+              ? "#f7ae59"
+              : cycleStatus === "completed"
+                ? "#3f76ff"
+                : cycleStatus === "draft"
+                  ? "rgb(var(--color-text-200))"
+                  : ""
         }`}
       />
       <h6 className="flex-grow truncate text-sm font-medium">{cycleDetails?.name}</h6>
diff --git a/web/core/components/gantt-chart/sidebar/cycles/block.tsx b/web/core/components/gantt-chart/sidebar/cycles/block.tsx
index 7922e86a6..8247dcacf 100644
--- a/web/core/components/gantt-chart/sidebar/cycles/block.tsx
+++ b/web/core/components/gantt-chart/sidebar/cycles/block.tsx
@@ -15,13 +15,11 @@ import { findTotalDaysInRange } from "@/helpers/date-time.helper";
 
 type Props = {
   block: IGanttBlock;
-  enableReorder: boolean;
   isDragging: boolean;
-  dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
 };
 
 export const CyclesSidebarBlock: React.FC<Props> = observer((props) => {
-  const { block, enableReorder, isDragging, dragHandleRef } = props;
+  const { block, isDragging } = props;
   // store hooks
   const { updateActiveBlockId, isBlockActive } = useGanttChart();
 
@@ -44,16 +42,6 @@ export const CyclesSidebarBlock: React.FC<Props> = observer((props) => {
           height: `${BLOCK_HEIGHT}px`,
         }}
       >
-        {enableReorder && (
-          <button
-            type="button"
-            className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
-            ref={dragHandleRef}
-          >
-            <MoreVertical className="h-3.5 w-3.5" />
-            <MoreVertical className="-ml-5 h-3.5 w-3.5" />
-          </button>
-        )}
         <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
           <div className="flex-grow truncate">
             <CycleGanttSidebarBlock cycleId={block.data.id} />
diff --git a/web/core/components/gantt-chart/sidebar/cycles/sidebar.tsx b/web/core/components/gantt-chart/sidebar/cycles/sidebar.tsx
index 1f1497dd4..4df76eb46 100644
--- a/web/core/components/gantt-chart/sidebar/cycles/sidebar.tsx
+++ b/web/core/components/gantt-chart/sidebar/cycles/sidebar.tsx
@@ -43,12 +43,10 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
               isDragEnabled={enableReorder}
               onDrop={handleOnDrop}
             >
-              {(isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => (
+              {(isDragging: boolean) => (
                 <CyclesSidebarBlock
                   block={block}
-                  enableReorder={enableReorder}
                   isDragging={isDragging}
-                  dragHandleRef={dragHandleRef}
                 />
               )}
             </GanttDnDHOC>
diff --git a/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx b/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
index d4f89eafe..eff7dcc56 100644
--- a/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
+++ b/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
@@ -5,7 +5,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
-import { DropIndicator } from "@plane/ui";
+import { DropIndicator, TOAST_TYPE, setToast } from "@plane/ui";
 import { HIGHLIGHT_WITH_LINE, highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 
@@ -13,7 +13,7 @@ type Props = {
   id: string;
   isLastChild: boolean;
   isDragEnabled: boolean;
-  children: (isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => JSX.Element;
+  children: (isDragging: boolean) => JSX.Element;
   onDrop: (draggingBlockId: string | undefined, droppedBlockId: string | undefined, dropAtEndOfList: boolean) => void;
 };
 
@@ -24,11 +24,9 @@ export const GanttDnDHOC = observer((props: Props) => {
   const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
   // refs
   const blockRef = useRef<HTMLDivElement | null>(null);
-  const dragHandleRef = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
     const element = blockRef.current;
-    const dragHandleElement = dragHandleRef.current;
 
     if (!element) return;
 
@@ -36,7 +34,6 @@ export const GanttDnDHOC = observer((props: Props) => {
       draggable({
         element,
         canDrag: () => isDragEnabled,
-        dragHandle: dragHandleElement ?? undefined,
         getInitialData: () => ({ id }),
         onDragStart: () => {
           setIsDragging(true);
@@ -92,14 +89,27 @@ export const GanttDnDHOC = observer((props: Props) => {
         },
       })
     );
-  }, [blockRef?.current, dragHandleRef?.current, isLastChild, onDrop]);
+  }, [blockRef?.current, isLastChild, onDrop]);
 
   useOutsideClickDetector(blockRef, () => blockRef?.current?.classList?.remove(HIGHLIGHT_WITH_LINE));
 
   return (
-    <div id={`issue-draggable-${id}`} className={"relative"} ref={blockRef}>
+    <div
+      id={`draggable-${id}`}
+      className={"relative"}
+      ref={blockRef}
+      onDragStart={() => {
+        if (!isDragEnabled) {
+          setToast({
+            title: "Warning!",
+            type: TOAST_TYPE.WARNING,
+            message: "Drag and drop is only enabled when sorted by manual",
+          });
+        }
+      }}
+    >
       <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
-      {children(isDragging, dragHandleRef)}
+      {children(isDragging)}
       {isLastChild && <DropIndicator isVisible={instruction === "DRAG_BELOW"} />}
     </div>
   );
diff --git a/web/core/components/gantt-chart/sidebar/issues/block.tsx b/web/core/components/gantt-chart/sidebar/issues/block.tsx
index 8509df010..598a550e7 100644
--- a/web/core/components/gantt-chart/sidebar/issues/block.tsx
+++ b/web/core/components/gantt-chart/sidebar/issues/block.tsx
@@ -18,15 +18,13 @@ import { IGanttBlock } from "../../types";
 
 type Props = {
   block: IGanttBlock;
-  enableReorder: boolean;
   enableSelection: boolean;
   isDragging: boolean;
-  dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
   selectionHelpers?: TSelectionHelper;
 };
 
 export const IssuesSidebarBlock = observer((props: Props) => {
-  const { block, enableReorder, enableSelection, isDragging, dragHandleRef, selectionHelpers } = props;
+  const { block, enableSelection, isDragging, selectionHelpers } = props;
   // store hooks
   const { updateActiveBlockId, isBlockActive } = useGanttChart();
   const { getIsIssuePeeked } = useIssueDetail();
@@ -60,16 +58,6 @@ export const IssuesSidebarBlock = observer((props: Props) => {
         }}
       >
         <div className="flex items-center gap-2">
-          {enableReorder && (
-            <button
-              type="button"
-              className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
-              ref={dragHandleRef}
-            >
-              <MoreVertical className="h-3.5 w-3.5" />
-              <MoreVertical className="-ml-5 h-3.5 w-3.5" />
-            </button>
-          )}
           {enableSelection && selectionHelpers && (
             <MultipleSelectEntityAction
               className={cn(
diff --git a/web/core/components/gantt-chart/sidebar/modules/block.tsx b/web/core/components/gantt-chart/sidebar/modules/block.tsx
index e6b28d54a..7ee9e53a4 100644
--- a/web/core/components/gantt-chart/sidebar/modules/block.tsx
+++ b/web/core/components/gantt-chart/sidebar/modules/block.tsx
@@ -15,13 +15,11 @@ import { findTotalDaysInRange } from "@/helpers/date-time.helper";
 
 type Props = {
   block: IGanttBlock;
-  enableReorder: boolean;
   isDragging: boolean;
-  dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
 };
 
 export const ModulesSidebarBlock: React.FC<Props> = observer((props) => {
-  const { block, enableReorder, isDragging, dragHandleRef } = props;
+  const { block, isDragging } = props;
   // store hooks
   const { updateActiveBlockId, isBlockActive } = useGanttChart();
 
@@ -44,16 +42,6 @@ export const ModulesSidebarBlock: React.FC<Props> = observer((props) => {
           height: `${BLOCK_HEIGHT}px`,
         }}
       >
-        {enableReorder && (
-          <button
-            type="button"
-            className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
-            ref={dragHandleRef}
-          >
-            <MoreVertical className="h-3.5 w-3.5" />
-            <MoreVertical className="-ml-5 h-3.5 w-3.5" />
-          </button>
-        )}
         <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
           <div className="flex-grow truncate">
             <ModuleGanttSidebarBlock moduleId={block.data.id} />
diff --git a/web/core/components/modules/gantt-chart/blocks.tsx b/web/core/components/modules/gantt-chart/blocks.tsx
index a99aa0132..788b360db 100644
--- a/web/core/components/modules/gantt-chart/blocks.tsx
+++ b/web/core/components/modules/gantt-chart/blocks.tsx
@@ -69,6 +69,7 @@ export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
     <Link
       className="relative flex h-full w-full items-center gap-2"
       href={`/${workspaceSlug}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
+      draggable={false}
     >
       <ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
       <h6 className="flex-grow truncate text-sm font-medium">{moduleDetails?.name}</h6>