From bd0d0cb1b287baa2a1f83c8dd67445c03be5baad Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Wed, 17 Jan 2024 16:57:02 -0300
Subject: [PATCH] fix(sideBarDraggableComponent): fix alignment and positioning
 of select trigger and select content feat(sideBarDraggableComponent): add
 support for download option in select content
 feat(sideBarDraggableComponent): add support for delete option in select
 content for non-official items

---
 .../sideBarDraggableComponent/index.tsx       | 73 +++++++++----------
 1 file changed, 36 insertions(+), 37 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 d7d3ee925..455c488bc 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -1,3 +1,4 @@
+import { SelectTrigger } from "@radix-ui/react-select";
 import { DragEventHandler, forwardRef, useRef, useState } from "react";
 import IconComponent from "../../../../../components/genericIconComponent";
 import {
@@ -106,50 +107,48 @@ export const SidebarDraggableComponent = forwardRef(
               );
             }}
           >
-            <div
-              data-testid={sectionName + display_name}
-              id={sectionName + display_name}
-              className="side-bar-components-div-form"
-            >
-              <span className="side-bar-components-text">{display_name}</span>
-              <div ref={popoverRef}>
-                <IconComponent
-                  name="Menu"
-                  className="side-bar-components-icon "
-                />
-                <SelectContent
-                  position="popper"
-                  side="bottom"
-                  sideOffset={-25}
-                  style={{
-                    position: "absolute",
-                    left: cursorPos.x,
-                    top: cursorPos.y,
-                  }}
-                >
-                  <SelectItem value={"download"}>
-                    <div className="flex">
-                      <IconComponent
-                        name="Download"
-                        className="relative top-0.5 mr-2 h-4 w-4"
-                      />{" "}
-                      Download{" "}
-                    </div>{" "}
-                  </SelectItem>
-                  {!official && (
-                    <SelectItem value={"delete"}>
+            <SelectTrigger className="w-full text-left">
+              <div
+                data-testid={sectionName + display_name}
+                id={sectionName + display_name}
+                className="side-bar-components-div-form"
+              >
+                <span className="side-bar-components-text">{display_name}</span>
+                <div ref={popoverRef}>
+                  <IconComponent
+                    name="Menu"
+                    className="side-bar-components-icon "
+                  />
+                  <SelectContent
+                    position="popper"
+                    side="bottom"
+                    sideOffset={-15}
+                    alignOffset={25}
+                  >
+                    <SelectItem value={"download"}>
                       <div className="flex">
                         <IconComponent
-                          name="Trash2"
+                          name="Download"
                           className="relative top-0.5 mr-2 h-4 w-4"
                         />{" "}
-                        Delete{" "}
+                        Download{" "}
                       </div>{" "}
                     </SelectItem>
-                  )}
-                </SelectContent>
+                    {!official && (
+                      <SelectItem value={"delete"}>
+                        <div className="flex">
+                          <IconComponent
+                            name="Trash2"
+                            className="relative top-0.5 mr-2 h-4 w-4"
+                          />{" "}
+                          Delete{" "}
+                        </div>{" "}
+                      </SelectItem>
+                    )}
+                  </SelectContent>
+                </div>
               </div>
-            </div>
+            </SelectTrigger>
           </div>
         </div>
       </Select>