[WEB-1548] chore: Remove Drag Handles (#4769)

* gantt remove drag handles

* remove drag handles for labels and project sidebar develop

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"
+              ? "#f7ae59"
-            : cycleStatus === "completed"
+              : cycleStatus === "completed"
-            ? "#3f76ff"
+                ? "#3f76ff"
-            : cycleStatus === "draft"
+                : cycleStatus === "draft"
-            ? "rgb(var(--color-text-200))"
+                  ? "rgb(var(--color-text-200))"
-            : ""
+                  : ""
         }`}
       />
       <h6 className="flex-grow truncate text-sm font-medium">{cycleDetails?.name}</h6>

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

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>

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>
   );

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(

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

@@ -72,13 +72,11 @@ export const IssueGanttSidebar: React.FC<Props> = observer((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/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} />

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

@@ -42,14 +42,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/core/components/labels/label-block/label-item-block.tsx

@@ -27,11 +27,10 @@ interface ILabelItemBlock {
   customMenuItems: ICustomMenuItem[];
   handleLabelDelete: (label: IIssueLabel) => void;
   isLabelGroup?: boolean;
-  dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
 }
 
 export const LabelItemBlock = (props: ILabelItemBlock) => {
-  const { label, isDragging, customMenuItems, handleLabelDelete, isLabelGroup, dragHandleRef } = props;
+  const { label, customMenuItems, handleLabelDelete, isLabelGroup } = props;
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
   // refs
@@ -42,12 +41,6 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
   return (
     <div className="group flex items-center">
       <div className="flex items-center">
-        <DragHandle
-          className={cn("opacity-0 group-hover:opacity-100", {
-            "opacity-100": isDragging,
-          })}
-          ref={dragHandleRef}
-        />
         <LabelName color={label.color} name={label.name} isGroup={isLabelGroup ?? false} />
       </div>
 

web/core/components/labels/label-block/label-name.tsx

@@ -10,7 +10,7 @@ export const LabelName = (props: ILabelName) => {
   const { name, color, isGroup } = props;
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center gap-3 pl-2">
       {isGroup ? (
         <Component className="h-3.5 w-3.5" color={color} />
       ) : (

web/core/components/labels/project-setting-label-group.tsx

@@ -55,13 +55,13 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
 
   return (
     <LabelDndHOC label={label} isGroup isChild={false} isLastChild={isLastChild} onDrop={onDrop}>
-      {(isDragging, isDroppingInLabel, dragHandleRef) => (
+      {(isDragging, isDroppingInLabel) => (
         <div
           className={`rounded ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
         >
           <Disclosure
             as="div"
-            className={`rounded  text-custom-text-100 ${
+            className={`rounded  text-custom-text-100 cursor-grab ${
               !isDroppingInLabel ? "border-[0.5px] border-custom-border-200" : ""
             } ${isDragging ? "bg-custom-background-80" : "bg-custom-background-100"}`}
             defaultOpen
@@ -89,7 +89,6 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
                           customMenuItems={customMenuItems}
                           handleLabelDelete={handleLabelDelete}
                           isLabelGroup
-                          dragHandleRef={dragHandleRef}
                         />
                       )}
 

web/core/components/labels/project-setting-label-item.tsx

@@ -64,9 +64,9 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
 
   return (
     <LabelDndHOC label={label} isGroup={false} isChild={isChild} isLastChild={isLastChild} onDrop={onDrop}>
-      {(isDragging, isDroppingInLabel, dragHandleRef) => (
+      {(isDragging, isDroppingInLabel) => (
         <div
-          className={`rounded ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
+          className={`rounded cursor-grab ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
         >
           <div
             className={`py-3 px-1 group relative flex items-center justify-between gap-2 space-y-3 rounded  ${
@@ -90,7 +90,6 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
                 isDragging={isDragging}
                 customMenuItems={customMenuItems}
                 handleLabelDelete={handleLabelDelete}
-                dragHandleRef={dragHandleRef}
               />
             )}
           </div>

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>

web/core/components/project/sidebar-list-item.tsx

@@ -12,7 +12,6 @@ import { useParams, usePathname } from "next/navigation";
 import { createRoot } from "react-dom/client";
 // icons
 import {
-  MoreVertical,
   PenSquare,
   LinkIcon,
   Star,
@@ -111,7 +110,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   const { projectId, handleCopyText, disableDrag, disableDrop, isLastChild, handleOnProjectDrop, projectListType } =
     props;
   // store hooks
-  const { sidebarCollapsed: isCollapsed, toggleSidebar } = useAppTheme();
+  const { sidebarCollapsed: isSideBarCollapsed, toggleSidebar } = useAppTheme();
   const { setTrackElement } = useEventTracker();
   const { addProjectToFavorites, removeProjectFromFavorites, getProjectById } = useProject();
   const { isMobile } = usePlatformOS();
@@ -124,7 +123,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   // refs
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
   const projectRef = useRef<HTMLDivElement | null>(null);
-  const dragHandleRef = useRef<HTMLButtonElement | null>(null);
   // router params
   const { workspaceSlug, projectId: URLProjectId } = useParams();
   // pathname
@@ -187,15 +185,13 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
 
   useEffect(() => {
     const element = projectRef.current;
-    const dragHandleElement = dragHandleRef.current;
 
     if (!element) return;
 
     return combine(
       draggable({
         element,
-        canDrag: () => !disableDrag && !isCollapsed,
+        canDrag: () => !disableDrag && !isSideBarCollapsed,
-        dragHandle: dragHandleElement ?? undefined,
         getInitialData: () => ({ id: projectId, dragInstanceId: "PROJECTS" }),
         onDragStart: () => {
           setIsDragging(true);
@@ -211,7 +207,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
               const root = createRoot(container);
               root.render(
                 <div className="rounded flex items-center bg-custom-background-100 text-sm p-1 pr-2">
-                  <div className="h-7 w-7 grid place-items-center flex-shrink-0">
+                  <div className="h-6 w-6 grid place-items-center flex-shrink-0">
                     {project && <Logo logo={project?.logo_props} />}
                   </div>
                   <p className="truncate text-custom-sidebar-text-200">{project?.name}</p>
@@ -272,7 +268,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
         },
       })
     );
-  }, [projectRef?.current, dragHandleRef?.current, projectId, isLastChild, projectListType, handleOnProjectDrop]);
+  }, [projectRef?.current, projectId, isLastChild, projectListType, handleOnProjectDrop]);
 
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
   useOutsideClickDetector(projectRef, () => projectRef?.current?.classList?.remove(HIGHLIGHT_CLASS));
@@ -295,56 +291,35 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                 "group relative flex w-full items-center rounded-md py-1 text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80",
                 {
                   "bg-custom-sidebar-background-80": isMenuActive,
-                  "pl-7": disableDrag && !isCollapsed,
                 }
               )}
             >
-              {!disableDrag && (
+              <Tooltip
-                <Tooltip
+                tooltipContent={`${project.name}`}
-                  isMobile={isMobile}
+                position="right"
-                  tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
+                disabled={!isSideBarCollapsed}
-                  position="top-right"
+                isMobile={isMobile}
-                  disabled={isDragging}
+              >
-                >
-                  <button
-                    type="button"
-                    className={cn(
-                      "flex opacity-0 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 ml-2",
-                      {
-                        "group-hover:opacity-100": !isCollapsed,
-                        "cursor-not-allowed opacity-60": project.sort_order === null,
-                        flex: isMenuActive,
-                        hidden: isCollapsed,
-                      }
-                    )}
-                    ref={dragHandleRef}
-                  >
-                    <MoreVertical className="-ml-3 h-3.5" />
-                    <MoreVertical className="-ml-5 h-3.5" />
-                  </button>
-                </Tooltip>
-              )}
-              <Tooltip tooltipContent={`${project.name}`} position="right" disabled={!isCollapsed} isMobile={isMobile}>
                 <Disclosure.Button
                   as="div"
                   className={cn(
-                    "flex flex-grow cursor-pointer select-none items-center justify-between truncate text-left text-sm font-medium",
+                    "flex flex-grow cursor-pointer select-none items-center justify-between truncate text-left text-sm font-medium pl-2",
                     {
-                      "justify-center": isCollapsed,
+                      "justify-center": isSideBarCollapsed,
                     }
                   )}
                 >
                   <div
-                    className={cn("flex w-full flex-grow items-center gap-1 truncate", {
+                    className={cn("flex w-full h-7 flex-grow items-center gap-1 truncate", {
-                      "justify-center": isCollapsed,
+                      "justify-center": isSideBarCollapsed,
                     })}
                   >
-                    <div className="h-7 w-7 grid place-items-center flex-shrink-0">
+                    <div className="h-5 w-5 grid place-items-center flex-shrink-0 mr-1">
                       <Logo logo={project.logo_props} />
                     </div>
-                    {!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
+                    {!isSideBarCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
                   </div>
-                  {!isCollapsed && (
+                  {!isSideBarCollapsed && (
                     <ChevronDown
                       className={cn(
                         "mb-0.5 hidden h-4 w-4 flex-shrink-0 text-custom-sidebar-text-400 duration-300 group-hover:block",
@@ -358,7 +333,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                 </Disclosure.Button>
               </Tooltip>
 
-              {!isCollapsed && (
+              {!isSideBarCollapsed && (
                 <CustomMenu
                   customButton={
                     <div
@@ -457,7 +432,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
               leaveFrom="transform scale-100 opacity-100"
               leaveTo="transform scale-95 opacity-0"
             >
-              <Disclosure.Panel className={`mt-1 space-y-1 ${isCollapsed ? "" : "ml-[2.25rem]"}`}>
+              <Disclosure.Panel className={`mt-1 space-y-1 ${isSideBarCollapsed ? "" : "ml-[2.25rem]"}`}>
                 {navigation(workspaceSlug as string, project?.id).map((item) => {
                   if (
                     (item.name === "Cycles" && !project.cycle_view) ||
@@ -476,17 +451,17 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                           tooltipContent={`${project?.name}: ${item.name}`}
                           position="right"
                           className="ml-2"
-                          disabled={!isCollapsed}
+                          disabled={!isSideBarCollapsed}
                         >
                           <div
                             className={`group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-xs font-medium outline-none ${
                               pathname.includes(item.href)
                                 ? "bg-custom-primary-100/10 text-custom-primary-100"
                                 : "text-custom-sidebar-text-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                            } ${isCollapsed ? "justify-center" : ""}`}
+                            } ${isSideBarCollapsed ? "justify-center" : ""}`}
                           >
                             <item.Icon className="h-4 w-4 stroke-[1.5]" />
-                            {!isCollapsed && item.name}
+                            {!isSideBarCollapsed && item.name}
                           </div>
                         </Tooltip>
                       </span>

web/core/components/project/sidebar-list.tsx

@@ -207,7 +207,7 @@ export const ProjectSidebarList: FC = observer(() => {
                   leaveTo="transform scale-95 opacity-0"
                 >
                   {isFavoriteProjectsListOpen && (
-                    <Disclosure.Panel as="div" className={`space-y-2`} static>
+                    <Disclosure.Panel as="div" className={`space-y-2 pl-2`} static>
                       {favoriteProjects.map((projectId, index) => (
                         <ProjectSidebarListItem
                           key={projectId}
@@ -269,7 +269,7 @@ export const ProjectSidebarList: FC = observer(() => {
                   leaveTo="transform scale-95 opacity-0"
                 >
                   {isAllProjectsListOpen && (
-                    <Disclosure.Panel as="div" static>
+                    <Disclosure.Panel as="div" className="pl-2" static>
                       {joinedProjects.map((projectId, index) => (
                         <ProjectSidebarListItem
                           key={projectId}