fix(tabsContext.tsx): change return type of saveComponent function to Promise<String | undefined> for better error handling and consistency

fix(nodeToolbarComponent/index.tsx): fix saveComponent function call to return a Promise and handle success and error cases properly
fix(types/tabs/index.ts): change return type of saveComponent function to void for consistency with implementation
feat(reactflowUtils.ts): add updateComponentNameAndType function to update component name and type

src/frontend/src/contexts/tabsContext.tsx

@@ -80,7 +80,7 @@ const TabsContextInitialValue: TabsContextType = {
     selection: { nodes: any; edges: any },
     position: { x: number; y: number; paneX?: number; paneY?: number }
   ) => {},
-  saveComponent: (component: NodeDataType) => {},
+  saveComponent: async (component: NodeDataType) => "",
   deleteComponent: (id: string, key: string) => {},
 };
 
@@ -700,7 +700,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           ` (${increment})`;
       }
     }
-    addFlow(true, createFlowComponent(component));
+    return addFlow(true, createFlowComponent(component));
   }
 
   function deleteComponent(id: string, key: string) {

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -70,20 +70,21 @@ export default function NodeToolbarComponent({
 
   function handleShareComponent() {
     const componentFlow = cloneDeep(data);
-    saveFlowStore(createFlowComponent(componentFlow)).then(
+    saveComponent(componentFlow).then(() => {
-      () => {
+      saveFlowStore(createFlowComponent(componentFlow)).then(
-        saveComponent(componentFlow);
+        (_) => {
-        setSuccessData({
+          setSuccessData({
-          title: "Component shared successfully",
+            title: "Component shared successfully",
-        });
+          });
-      },
+        },
-      (err) => {
+        (err) => {
-        setErrorData({
+          setErrorData({
-          title: "Error sharing component",
+            title: "Error sharing component",
-          list: [err["response"]["data"]["detail"]],
+            list: [err["response"]["data"]["detail"]],
-        });
+          });
-      }
+        }
-    );
+      );
+    });
   }
   const handleSelectChange = (event) => {
     switch (event) {
@@ -98,7 +99,6 @@ export default function NodeToolbarComponent({
         downloadNode(createFlowComponent(cloneDeep(data)));
         break;
       case "Share":
-        console.log("Share");
         setShowconfirmShare(true);
         break;
       case "SaveAll":

src/frontend/src/types/tabs/index.ts

@@ -36,7 +36,7 @@ export type TabsContextType = {
   setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
   setTweak: (tweak: tweakType) => tweakType | void;
   getTweak: tweakType;
-  saveComponent: (component: NodeDataType) => void;
+  saveComponent: (component: NodeDataType) => Promise<String | undefined>;
   deleteComponent: (id: string, key: string) => void;
 };
 

src/frontend/src/utils/reactflowUtils.ts

@@ -1097,3 +1097,8 @@ export function downloadNode(NodeFLow: FlowType) {
   element.download = `${NodeFLow.name}.json`;
   element.click();
 }
+
+export function updateComponentNameAndType(
+  data: any,
+  component: NodeDataType
+) {}