Added Export handler on Main Page

src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx

@@ -18,6 +18,8 @@ import { getNameByType } from "../../utils/get-name-by-type";
 import { sortFlows } from "../../utils/sort-flows";
 import EmptyComponent from "../emptyComponent";
 import HeaderComponent from "../headerComponent";
+import { downloadFlow, removeApiKeys } from "../../../../utils/reactflowUtils";
+import { useDarkStore } from "../../../../stores/darkStore";
 
 export default function ComponentsComponent({
   type = "all",
@@ -31,22 +33,22 @@ export default function ComponentsComponent({
   const allFlows = useFlowsManagerStore((state) => state.allFlows);
 
   const flowsFromFolder = useFolderStore(
-    (state) => state.selectedFolder?.flows
+    (state) => state.selectedFolder?.flows,
   );
 
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [openDelete, setOpenDelete] = useState(false);
   const searchFlowsComponents = useFlowsManagerStore(
-    (state) => state.searchFlowsComponents
+    (state) => state.searchFlowsComponents,
   );
 
   const setSelectedFlowsComponentsCards = useFlowsManagerStore(
-    (state) => state.setSelectedFlowsComponentsCards
+    (state) => state.setSelectedFlowsComponentsCards,
   );
 
   const selectedFlowsComponentsCards = useFlowsManagerStore(
-    (state) => state.selectedFlowsComponentsCards
+    (state) => state.selectedFlowsComponentsCards,
   );
 
   const [handleFileDrop] = useFileDrop(uploadFlow, type)!;
@@ -82,7 +84,7 @@ export default function ComponentsComponent({
         f.name.toLowerCase().includes(searchFlowsComponents.toLowerCase()) ||
         f.description
           .toLowerCase()
-          .includes(searchFlowsComponents.toLowerCase())
+          .includes(searchFlowsComponents.toLowerCase()),
     );
 
     if (searchFlowsComponents === "") {
@@ -129,6 +131,8 @@ export default function ComponentsComponent({
       setOpenDelete(true);
     } else if (action === "duplicate") {
       handleDuplicate();
+    } else if (action === "exprot") {
+      handleExport();
     }
   };
 
@@ -137,9 +141,9 @@ export default function ComponentsComponent({
       selectedFlowsComponentsCards.map((selectedFlow) =>
         addFlow(
           true,
-          allFlows.find((flow) => flow.id === selectedFlow)
-        )
-      )
+          allFlows.find((flow) => flow.id === selectedFlow),
+        ),
+      ),
     ).then(() => {
       resetFilter();
       getFoldersApi(true);
@@ -152,6 +156,26 @@ export default function ComponentsComponent({
     });
   };
 
+  const version = useDarkStore((state) => state.version);
+
+  const handleExport = () => {
+    selectedFlowsComponentsCards.map((selectedFlowId) => {
+      const selectedFlow = allFlows.find((flow) => flow.id === selectedFlowId);
+      downloadFlow(
+        removeApiKeys({
+          id: selectedFlow!.id,
+          data: selectedFlow!.data!,
+          description: selectedFlow!.description,
+          name: selectedFlow!.name,
+          last_tested_version: version,
+          is_component: false,
+        }),
+        selectedFlow!.name,
+        selectedFlow!.description,
+      );
+    });
+  };
+
   const handleDeleteMultiple = () => {
     removeFlow(selectedFlowsComponentsCards)
       .then(() => {
@@ -180,7 +204,7 @@ export default function ComponentsComponent({
           return true;
         }
         return false;
-      }
+      },
     );
 
     setSelectedFlowsComponentsCards(selectedFlows);
@@ -215,7 +239,7 @@ export default function ComponentsComponent({
     if (type === "all") return allFlows?.length;
 
     return allFlows?.filter(
-      (f) => (f.is_component ?? false) === (type === "component")
+      (f) => (f.is_component ?? false) === (type === "component"),
     )?.length;
   };
 
@@ -226,6 +250,7 @@ export default function ComponentsComponent({
           handleDelete={() => handleSelectOptionsChange("delete")}
           handleSelectAll={handleSelectAll}
           handleDuplicate={() => handleSelectOptionsChange("duplicate")}
+          handleExport={() => handleSelectOptionsChange("export")}
           disableFunctions={!(selectedFlowsComponentsCards?.length > 0)}
         />
       )}