gantt remove drag handles

web/components/cycles/gantt-chart/blocks.tsx

@@ -76,6 +76,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"

web/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} />

web/components/gantt-chart/sidebar/cycles/sidebar.tsx

@@ -37,14 +37,7 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
             isDragEnabled={enableReorder}
             onDrop={handleOnDrop}
           >
-            {(isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => (
+            {(isDragging: boolean) => <CyclesSidebarBlock block={block} isDragging={isDragging} />}
-              <CyclesSidebarBlock
-                block={block}
-                enableReorder={enableReorder}
-                isDragging={isDragging}
-                dragHandleRef={dragHandleRef}
-              />
-            )}
           </GanttDnDHOC>
         ))
       ) : (

web/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx

@@ -3,7 +3,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";
 
@@ -11,7 +11,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;
 };
 
@@ -22,11 +22,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;
 
@@ -34,7 +32,6 @@ export const GanttDnDHOC = observer((props: Props) => {
       draggable({
         element,
         canDrag: () => isDragEnabled,
-        dragHandle: dragHandleElement ?? undefined,
         getInitialData: () => ({ id }),
         onDragStart: () => {
           setIsDragging(true);
@@ -90,14 +87,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>
   );

web/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();
@@ -58,16 +56,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(

web/components/gantt-chart/sidebar/issues/sidebar.tsx

@@ -47,13 +47,11 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
               isDragEnabled={enableReorder}
               onDrop={handleOnDrop}
             >
-              {(isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => (
+              {(isDragging: boolean) => (
                 <IssuesSidebarBlock
                   block={block}
-                  enableReorder={enableReorder}
                   enableSelection={enableSelection}
                   isDragging={isDragging}
-                  dragHandleRef={dragHandleRef}
                   selectionHelpers={selectionHelpers}
                 />
               )}

web/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} />

web/components/gantt-chart/sidebar/modules/sidebar.tsx

@@ -37,14 +37,7 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
             isDragEnabled={enableReorder}
             onDrop={handleOnDrop}
           >
-            {(isDragging: boolean, dragHandleRef: MutableRefObject<HTMLButtonElement | null>) => (
+            {(isDragging: boolean) => <ModulesSidebarBlock block={block} isDragging={isDragging} />}
-              <ModulesSidebarBlock
-                block={block}
-                enableReorder={enableReorder}
-                isDragging={isDragging}
-                dragHandleRef={dragHandleRef}
-              />
-            )}
           </GanttDnDHOC>
         ))
       ) : (

web/components/modules/gantt-chart/blocks.tsx

@@ -67,6 +67,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>