From 0c513abf24a77f8226d4ddb4d1d31b0744248afa Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 3 Oct 2023 20:24:40 -0300
Subject: [PATCH] feat(extraSidebarComponent): add support for passing apiClass
 prop to SidebarDraggableComponent to enable dynamic rendering of API class
 components feat(sideBarDraggableComponent): add support for downloading node
 on "download" option click in the sidebar fix(sideBarDraggableComponent): fix
 missing import statements and add missing type annotations

---
 .../components/extraSidebarComponent/index.tsx     |  1 +
 .../sideBarDraggableComponent/index.tsx            | 14 ++++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 5ab13bc84..50f5f9645 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -250,6 +250,7 @@ export default function ExtraSidebar(): JSX.Element {
                         key={index}
                       >
                         <SidebarDraggableComponent
+                          apiClass={dataFilter[SBSectionName][SBItemName]}
                           key={SBItemName}
                           onDragStart={(event) =>
                             onDragStart(event, {
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 0eef601d2..a4c726480 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -6,7 +6,14 @@ import {
   SelectItem,
   SelectTrigger,
 } from "../../../../../components/ui/select-custom";
+import { TabsContext } from "../../../../../contexts/tabsContext";
 import { typesContext } from "../../../../../contexts/typesContext";
+import { APIClassType } from "../../../../../types/api";
+import {
+  createFlowComponent,
+  downloadNode,
+} from "../../../../../utils/reactflowUtils";
+import { removeCountFromString } from "../../../../../utils/utils";
 
 export default function SidebarDraggableComponent({
   display_name,
@@ -14,7 +21,9 @@ export default function SidebarDraggableComponent({
   error,
   color,
   onDragStart,
+  apiClass,
 }: {
+  apiClass: APIClassType;
   display_name: string;
   itemName: string;
   error: boolean;
@@ -23,12 +32,17 @@ export default function SidebarDraggableComponent({
 }) {
   const open = useRef(false);
   const { deleteComponent } = useContext(typesContext);
+  const { getNodeId } = useContext(TabsContext);
 
   function handleSelectChange(value: string) {
     switch (value) {
       case "share":
         break;
       case "download":
+        const type = removeCountFromString(itemName);
+        downloadNode(
+          createFlowComponent({ id: getNodeId(type), type, node: apiClass })
+        );
         break;
       case "delete":
         deleteComponent(itemName);