changed sideBarDraggableComponent to forwardRef

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx

@@ -1,12 +1,12 @@
-import { DragEventHandler, useContext, useRef, useState } from "react";
+import { DragEventHandler, forwardRef, useRef, useState } from "react";
 import IconComponent from "../../../../../components/genericIconComponent";
 import {
   Select,
   SelectContent,
   SelectItem,
-  SelectTrigger,
 } from "../../../../../components/ui/select-custom";
-import { AuthContext } from "../../../../../contexts/authContext";
+import { useDarkStore } from "../../../../../stores/darkStore";
+import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
 import { APIClassType } from "../../../../../types/api";
 import {
   createFlowComponent,
@@ -14,10 +14,10 @@ import {
   getNodeId,
 } from "../../../../../utils/reactflowUtils";
 import { removeCountFromString } from "../../../../../utils/utils";
-import { useDarkStore } from "../../../../../stores/darkStore";
-import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
 
-export default function SidebarDraggableComponent({
+export const SidebarDraggableComponent = forwardRef(
+  (
+    {
       sectionName,
       display_name,
       itemName,
@@ -26,7 +26,7 @@ export default function SidebarDraggableComponent({
       onDragStart,
       apiClass,
       official,
-}: {
+    }: {
       sectionName: string;
       apiClass: APIClassType;
       display_name: string;
@@ -35,7 +35,9 @@ export default function SidebarDraggableComponent({
       color: string;
       onDragStart: DragEventHandler<HTMLDivElement>;
       official: boolean;
-}) {
+    },
+    ref
+  ) => {
     const [open, setOpen] = useState(false);
     const deleteComponent = useFlowsManagerStore(
       (state) => state.deleteComponent
@@ -115,7 +117,6 @@ export default function SidebarDraggableComponent({
                   name="Menu"
                   className="side-bar-components-icon "
                 />
-              <SelectTrigger></SelectTrigger>
                 <SelectContent
                   position="popper"
                   side="bottom"
@@ -153,4 +154,7 @@ export default function SidebarDraggableComponent({
         </div>
       </Select>
     );
-}
+  }
+);
+
+export default SidebarDraggableComponent;