From 9d23c3d9e07a2feade6e428452b79bcad1427893 Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Tue, 11 Jun 2024 20:45:39 +0530
Subject: [PATCH] remove drag handles for labels and project sidebar develop

---
 .../gantt-chart/sidebar/issues/sidebar.tsx    |  4 +-
 .../gantt-chart/sidebar/modules/sidebar.tsx   |  9 +--
 .../labels/label-block/label-item-block.tsx   |  9 +--
 .../labels/label-block/label-name.tsx         |  2 +-
 .../labels/project-setting-label-group.tsx    |  5 +-
 .../labels/project-setting-label-item.tsx     |  5 +-
 .../components/project/sidebar-list-item.tsx  | 69 ++++++-------------
 web/core/components/project/sidebar-list.tsx  |  4 +-
 8 files changed, 32 insertions(+), 75 deletions(-)

diff --git a/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx b/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
index 58efd3d1b..786091ca1 100644
--- a/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/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}
                   />
                 )}
diff --git a/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx b/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
index 3fb3b188a..c7e70d073 100644
--- a/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
+++ b/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>) => (
-                <ModulesSidebarBlock
-                  block={block}
-                  enableReorder={enableReorder}
-                  isDragging={isDragging}
-                  dragHandleRef={dragHandleRef}
-                />
-              )}
+              {(isDragging: boolean) => <ModulesSidebarBlock block={block} isDragging={isDragging} />}
             </GanttDnDHOC>
           );
         })
diff --git a/web/core/components/labels/label-block/label-item-block.tsx b/web/core/components/labels/label-block/label-item-block.tsx
index 225b011bd..cfc9ae7c3 100644
--- a/web/core/components/labels/label-block/label-item-block.tsx
+++ b/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>
 
diff --git a/web/core/components/labels/label-block/label-name.tsx b/web/core/components/labels/label-block/label-name.tsx
index 9c84959cc..ae5ffbf2e 100644
--- a/web/core/components/labels/label-block/label-name.tsx
+++ b/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} />
       ) : (
diff --git a/web/core/components/labels/project-setting-label-group.tsx b/web/core/components/labels/project-setting-label-group.tsx
index 3302cb6bf..264c93e47 100644
--- a/web/core/components/labels/project-setting-label-group.tsx
+++ b/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}
                         />
                       )}
 
diff --git a/web/core/components/labels/project-setting-label-item.tsx b/web/core/components/labels/project-setting-label-item.tsx
index fbc812e12..f64e2cd7a 100644
--- a/web/core/components/labels/project-setting-label-item.tsx
+++ b/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>
diff --git a/web/core/components/project/sidebar-list-item.tsx b/web/core/components/project/sidebar-list-item.tsx
index a51239c8e..ceaa78dac 100644
--- a/web/core/components/project/sidebar-list-item.tsx
+++ b/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,
-        dragHandle: dragHandleElement ?? undefined,
+        canDrag: () => !disableDrag && !isSideBarCollapsed,
         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
-                  isMobile={isMobile}
-                  tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
-                  position="top-right"
-                  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}>
+              <Tooltip
+                tooltipContent={`${project.name}`}
+                position="right"
+                disabled={!isSideBarCollapsed}
+                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", {
-                      "justify-center": isCollapsed,
+                    className={cn("flex w-full h-7 flex-grow items-center gap-1 truncate", {
+                      "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>
diff --git a/web/core/components/project/sidebar-list.tsx b/web/core/components/project/sidebar-list.tsx
index 4bcc09369..1d9804592 100644
--- a/web/core/components/project/sidebar-list.tsx
+++ b/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}