From 5d4b971252ed36329e23ce124a8c86134d168eaa Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 2 Oct 2023 19:30:28 -0300
Subject: [PATCH] refactor(sideBarDraggableComponent): improve code readability
 and add support for edit mode with select options
 feat(sideBarDraggableComponent): add functionality to edit the sidebar
 component with select options

---
 .../sideBarDraggableComponent/index.tsx       | 82 ++++++++++++++++++-
 1 file changed, 80 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
index 7d9351af4..e9d42132e 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -1,5 +1,11 @@
-import { DragEventHandler } from "react";
+import { DragEventHandler, useRef, useState } from "react";
 import IconComponent from "../../../../../components/genericIconComponent";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "../../../../../components/ui/select-custom";
 
 export default function SidebarDraggableComponent({
   display_name,
@@ -14,6 +20,10 @@ export default function SidebarDraggableComponent({
   color: string;
   onDragStart: DragEventHandler<HTMLDivElement>;
 }) {
+  const isOpen = useRef(false);
+  const [editMode, setEditMode] = useState(false);
+  const inside = useRef(false);
+
   return (
     <div key={itemName} data-tooltip-id={itemName}>
       <div
@@ -34,7 +44,75 @@ export default function SidebarDraggableComponent({
       >
         <div className="side-bar-components-div-form">
           <span className="side-bar-components-text">{display_name}</span>
-          <IconComponent name="Menu" className="side-bar-components-icon " />
+          <div
+            onMouseLeave={() => {
+              if (!isOpen.current) {
+                inside.current = false;
+                setEditMode(false);
+              }
+            }}
+            onMouseOver={() => {
+              inside.current = true;
+              setTimeout(() => {
+                if (inside.current) setEditMode(true);
+              }, 800);
+            }}
+          >
+            {editMode ? (
+              <Select
+                onOpenChange={(open) => {
+                  if (!open) {
+                    isOpen.current = false;
+                    inside.current = false;
+                    setEditMode(false);
+                  } else {
+                    isOpen.current = true;
+                  }
+                }}
+              >
+                <SelectTrigger>
+                  <IconComponent
+                    name="MoreHorizontal"
+                    className="side-bar-components-icon "
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={"share"}>
+                    <div className="flex">
+                      <IconComponent
+                        name="Settings2"
+                        className="relative top-0.5 mr-2 h-4 w-4"
+                      />{" "}
+                      Edit{" "}
+                    </div>{" "}
+                  </SelectItem>
+                  <SelectItem value={"download"}>
+                    <div className="flex">
+                      <IconComponent
+                        name="Settings2"
+                        className="relative top-0.5 mr-2 h-4 w-4"
+                      />{" "}
+                      Edit{" "}
+                    </div>{" "}
+                  </SelectItem>
+                  <SelectItem value={"delete"}>
+                    <div className="flex">
+                      <IconComponent
+                        name="Settings2"
+                        className="relative top-0.5 mr-2 h-4 w-4"
+                      />{" "}
+                      Edit{" "}
+                    </div>{" "}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            ) : (
+              <IconComponent
+                name="Menu"
+                className="side-bar-components-icon "
+              />
+            )}
+          </div>
         </div>
       </div>
     </div>