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

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, {

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);