feat(API): add updateFlowStore function to update an existing flow in the Store

feat(shareModal): add functionality to update a shared component or flow

src/frontend/src/controllers/API/index.ts

@@ -817,3 +817,46 @@ export async function getStoreTags() {
 export const postLikeComponent = (componentId: string) => {
   return api.post(`${BASE_URL_API}store/users/likes/${componentId}`);
 };
+
+/**
+ * Updates an existing flow in the Store.
+ *
+ * @param {FlowType} updatedFlow - The updated flow data.
+ * @returns {Promise<any>} The updated flow data.
+ * @throws Will throw an error if the update fails.
+ */
+export async function updateFlowStore(
+  newFlow: {
+    name?: string;
+    data: ReactFlowJsonObject | null;
+    description?: string;
+    style?: FlowStyleType;
+    is_component?: boolean;
+    parent?: string;
+    last_tested_version?: string;
+  },
+  tags: string[],
+  publicFlow = false,
+  id: string
+): Promise<FlowType> {
+  try {
+    const response = await api.patch(`${BASE_URL_API}store/components/${id}`, {
+      name: newFlow.name,
+      data: newFlow.data,
+      description: newFlow.description,
+      is_component: newFlow.is_component,
+      parent: newFlow.parent,
+      tags: tags,
+      private: !publicFlow,
+      last_tested_version: newFlow.last_tested_version,
+    });
+
+    if (response.status !== 201) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}

src/frontend/src/modals/shareModal/index.tsx

@@ -11,6 +11,7 @@ import {
   getStoreComponents,
   getStoreTags,
   saveFlowStore,
+  updateFlowStore,
 } from "../../controllers/API";
 import { FlowType } from "../../types/flow";
 import {
@@ -50,7 +51,9 @@ export default function ShareModal({
   const [loadingTags, setLoadingTags] = useState<boolean>(false);
   const [sharePublic, setSharePublic] = useState(true);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
-  const [unavaliableNames, setUnavaliableNames] = useState<string[]>([]);
+  const [unavaliableNames, setUnavaliableNames] = useState<
+    { id: string; name: string }[]
+  >([]);
   const { saveFlow, flows, tabId } = useContext(FlowsContext);
 
   useEffect(() => {
@@ -70,13 +73,15 @@ export default function ShareModal({
     });
   }
   function handleGetNames() {
-    const unavaliableNames: Array<string> = [];
+    const unavaliableNames: Array<{ id: string; name: string }> = [];
-    getStoreComponents({ fields: ["name"], filterByUser: true }).then((res) => {
+    getStoreComponents({ fields: ["name", "id"], filterByUser: true }).then(
-      res?.results?.forEach((element: any) => {
+      (res) => {
-        unavaliableNames.push(element.name);
+        res?.results?.forEach((element: any) => {
-      });
+          unavaliableNames.push({ name: element.name, id: element.id });
-      setUnavaliableNames(unavaliableNames);
+        });
-    });
+        setUnavaliableNames(unavaliableNames);
+      }
+    );
   }
 
   useEffect(() => {
@@ -84,7 +89,7 @@ export default function ShareModal({
     setDescription(component?.description ?? "");
   }, [component, open, internalOpen]);
 
-  const handleShareComponent = () => {
+  const handleShareComponent = (update = false) => {
     //remove file names from flows before sharing
     removeFileNameFromComponents(component);
     const flow: FlowType = checked
@@ -105,28 +110,42 @@ export default function ShareModal({
           is_component: is_component,
         });
 
-    saveFlow(flows.find((flow) => flow.id === tabId)!, true);
+    function successShare() {
+      if (is_component) {
+        addFlow(true, flow);
+      }
+      setSuccessData({
+        title: `${nameComponent} shared successfully`,
+      });
+    }
 
-    saveFlowStore(flow!, getTagsIds(selectedTags, tags), sharePublic).then(
+    saveFlow(flows.find((flow) => flow.id === tabId)!, true);
-      () => {
+    if (!update)
-        if (is_component) {
+      saveFlowStore(flow!, getTagsIds(selectedTags, tags), sharePublic).then(
-          addFlow(true, flow);
+        successShare,
+        (err) => {
+          setErrorData({
+            title: "Error sharing " + is_component ? "component" : "flow",
+            list: [err["response"]["data"]["detail"]],
+          });
         }
-        setSuccessData({
+      );
-          title: `${nameComponent} shared successfully`,
+    else
-        });
+      updateFlowStore(
-      },
+        flow!,
-      (err) => {
+        getTagsIds(selectedTags, tags),
+        sharePublic,
+        unavaliableNames.find((e) => e.name === name)!.id
+      ).then(successShare, (err) => {
         setErrorData({
           title: "Error sharing " + is_component ? "component" : "flow",
           list: [err["response"]["data"]["detail"]],
         });
-      }
+      });
-    );
   };
 
   const handleUpdateComponent = () => {
-    handleShareComponent();
+    handleShareComponent(true);
     if (setOpen) setOpen(false);
     else internalSetOpen(false);
   };
@@ -134,7 +153,7 @@ export default function ShareModal({
   let modalConfirmationButton = useMemo(() => {
     return (
       <>
-        {unavaliableNames.includes(name) ? (
+        {unavaliableNames.find((element) => element.name === name) ? (
           <ConfirmationModal
             title="Update"
             titleHeader={name}
@@ -183,7 +202,7 @@ export default function ShareModal({
         )}
       </>
     );
-  }, [unavaliableNames]);
+  }, [unavaliableNames, name]);
 
   return (
     <BaseModal
@@ -205,7 +224,7 @@ export default function ShareModal({
       <BaseModal.Content>
         <EditFlowSettings
           name={name}
-          invalidNameList={unavaliableNames}
+          invalidNameList={unavaliableNames.map((element) => element.name)}
           description={description}
           setName={setName}
           setDescription={setDescription}