Passed duplicate flow function to main page

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -35,21 +35,11 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const navigate = useNavigate();
   const isBuilding = useFlowStore((state) => state.isBuilding);
 
-  function handleAddFlow(duplicate?: boolean) {
+  function handleAddFlow() {
     try {
-      if (duplicate) {
+      addFlow(true).then((id) => {
-        if (!currentFlow) {
+        navigate("/flow/" + id);
-          throw new Error("No flow to duplicate");
+      });
-        }
-        addFlow(true, currentFlow).then((id) => {
-          setSuccessData({ title: "Flow duplicated successfully" });
-          navigate("/flow/" + id);
-        });
-      } else {
-        addFlow(true).then((id) => {
-          navigate("/flow/" + id);
-        });
-      }
     } catch (err) {
       setErrorData(err as { title: string; list?: Array<string> });
     }
@@ -89,15 +79,6 @@ export const MenuBar = ({}: {}): JSX.Element => {
               <IconComponent name="Plus" className="header-menu-options" />
               New
             </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => {
-                handleAddFlow(true);
-              }}
-              className="cursor-pointer"
-            >
-              <IconComponent name="Copy" className="header-menu-options" />
-              Duplicate
-            </DropdownMenuItem>
 
             <DropdownMenuItem
               onClick={() => {

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

@@ -66,6 +66,7 @@ export default function ComponentsComponent({
   const myCollectionId = useFolderStore((state) => state.myCollectionId);
   const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
   const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
+  const addFlow = useFlowsManagerStore((state) => state.addFlow);
 
   useEffect(() => {
     setFolderUrl(folderId ?? "");
@@ -115,7 +116,7 @@ export default function ComponentsComponent({
     });
   };
 
-  const handleSelectOptionsChange = () => {
+  const handleSelectOptionsChange = (action: string) => {
     const hasSelected = selectedFlowsComponentsCards?.length > 0;
     if (!hasSelected) {
       setErrorData({
@@ -124,7 +125,31 @@ export default function ComponentsComponent({
       });
       return;
     }
-    setOpenDelete(true);
+    if (action === "delete") {
+      setOpenDelete(true);
+    } else if (action === "duplicate") {
+      handleDuplicate();
+    }
+  };
+
+  const handleDuplicate = () => {
+    Promise.all(
+      selectedFlowsComponentsCards.map((selectedFlow) =>
+        addFlow(
+          true,
+          allFlows.find((flow) => flow.id === selectedFlow),
+        ),
+      ),
+    ).then(() => {
+      resetFilter();
+      getFoldersApi(true);
+      if (!folderId || folderId === myCollectionId) {
+        getFolderById(folderId ? folderId : myCollectionId);
+      }
+      setSelectedFlowsComponentsCards([]);
+
+      setSuccessData({ title: "Flows duplicated successfully" });
+    });
   };
 
   const handleDeleteMultiple = () => {
@@ -198,9 +223,10 @@ export default function ComponentsComponent({
     <>
       {allFlows?.length > 0 && (
         <HeaderComponent
-          handleDelete={handleSelectOptionsChange}
+          handleDelete={() => handleSelectOptionsChange("delete")}
           handleSelectAll={handleSelectAll}
-          disableDelete={!(selectedFlowsComponentsCards?.length > 0)}
+          handleDuplicate={() => handleSelectOptionsChange("duplicate")}
+          disableFunctions={!(selectedFlowsComponentsCards?.length > 0)}
         />
       )}
 

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

@@ -16,13 +16,15 @@ import ShadTooltip from "../../../../components/shadTooltipComponent";
 type HeaderComponentProps = {
   handleSelectAll: (select) => void;
   handleDelete: () => void;
-  disableDelete: boolean;
+  handleDuplicate: () => void;
+  disableFunctions: boolean;
 };
 
 const HeaderComponent = ({
   handleSelectAll,
   handleDelete,
-  disableDelete,
+  handleDuplicate,
+  disableFunctions,
 }: HeaderComponentProps) => {
   const [shouldSelectAll, setShouldSelectAll] = useState(true);
 
@@ -55,23 +57,41 @@ const HeaderComponent = ({
             </div>
           </a>
         </div>
-        <div className="col-span-2 grid-cols-1 justify-self-end">
+        <div className="col-span-2 flex grid-cols-1 gap-2 justify-self-end">
           <div>
             <ShadTooltip
               content={
-                disableDelete ? (
+                disableFunctions ? (
+                  <span>Select items to duplicate</span>
+                ) : (
+                  <span>Duplicate selected items</span>
+                )
+              }
+            >
+              <button onClick={handleDuplicate} disabled={disableFunctions}>
+                <IconComponent
+                  name="Copy"
+                  className={cn("h-5 w-5 text-primary transition-all")}
+                />
+              </button>
+            </ShadTooltip>
+          </div>
+          <div>
+            <ShadTooltip
+              content={
+                disableFunctions ? (
                   <span>Select items to delete</span>
                 ) : (
                   <span>Delete selected items</span>
                 )
               }
             >
-              <button onClick={handleDelete} disabled={disableDelete}>
+              <button onClick={handleDelete} disabled={disableFunctions}>
                 <IconComponent
                   name="Trash2"
                   className={cn(
                     "h-5 w-5 text-primary transition-all",
-                    disableDelete ? "" : "hover:text-destructive",
+                    disableFunctions ? "" : "hover:text-destructive",
                   )}
                 />
               </button>