adding confirmation modal and save flow integratio

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

@@ -547,9 +547,9 @@ export async function addApiKeyStore(key: string) {
  * @throws Will throw an error if saving fails.
  */
 export async function saveFlowStore(newFlow: {
-  name: string;
+  name?: string;
   data: ReactFlowJsonObject | null;
-  description: string;
+  description?: string;
   style?: FlowStyleType;
   is_component?: boolean;
 }): Promise<FlowType> {

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

@@ -1,5 +1,6 @@
 import { cloneDeep } from "lodash";
 import { useContext, useEffect, useState } from "react";
+import { ReactFlowJsonObject } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
 import { Input } from "../../../../components/ui/input";
@@ -7,7 +8,9 @@ import { Separator } from "../../../../components/ui/separator";
 import { alertContext } from "../../../../contexts/alertContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
+import { saveFlowStore } from "../../../../controllers/API";
 import ApiModal from "../../../../modals/ApiModal";
+import ConfirmationModal from "../../../../modals/ConfirmationModal";
 import ExportModal from "../../../../modals/exportModal";
 import { APIClassType, APIObjectType } from "../../../../types/api";
 import {
@@ -97,6 +100,29 @@ export default function ExtraSidebar(): JSX.Element {
     }
   }, [getFilterEdge, data]);
 
+  const handleShareFlow = () => {
+    const reactFlow = flow!.data as ReactFlowJsonObject;
+    const saveFlow = {
+      data: {
+        ...reactFlow,
+      },
+      is_component: false,
+    };
+    saveFlowStore(saveFlow).then(
+      () => {
+        setSuccessData({
+          title: "Flow shared successfully",
+        });
+      },
+      (err) => {
+        setErrorData({
+          title: "Error sharing flow",
+          list: [err["response"]["data"]["detail"]],
+        });
+      }
+    );
+  };
+
   useEffect(() => {
     if (getFilterEdge?.length > 0) {
       setFilterData((_) => {
@@ -145,7 +171,10 @@ export default function ExtraSidebar(): JSX.Element {
                 uploadFlow(false);
               }}
             >
-              <IconComponent name="FileUp" className="side-bar-button-size " />
+              <IconComponent
+                name="FileDown"
+                className="side-bar-button-size "
+              />
             </button>
           </ShadTooltip>
         </div>
@@ -153,10 +182,7 @@ export default function ExtraSidebar(): JSX.Element {
           <ExportModal>
             <ShadTooltip content="Export" side="top">
               <div className={classNames("extra-side-bar-buttons")}>
-                <IconComponent
-                  name="FileDown"
-                  className="side-bar-button-size"
-                />
+                <IconComponent name="FileUp" className="side-bar-button-size" />
               </div>
             </ShadTooltip>
           </ExportModal>
@@ -202,6 +228,28 @@ export default function ExtraSidebar(): JSX.Element {
             </button>
           </ShadTooltip>
         </div>
+
+        <div className="side-bar-button">
+          <ConfirmationModal
+            index={0}
+            modalContentTitle="Are you sure you want to share this flow?"
+            modalContent="This flow will be available for everyone to use."
+            title="Share Flow"
+            confirmationText="Share"
+            icon="Share2"
+            onConfirm={() => {
+              handleShareFlow();
+            }}
+            titleHeader=""
+            cancelText="Cancel"
+          >
+            <ShadTooltip content="Share" side="top">
+              <div className={classNames("extra-side-bar-buttons")}>
+                <IconComponent name="Share2" className="side-bar-button-size" />
+              </div>
+            </ShadTooltip>
+          </ConfirmationModal>
+        </div>
       </div>
       <Separator />
       <div className="side-bar-search-div-placement">

src/frontend/src/style/applies.css

@@ -66,7 +66,7 @@
     @apply fixed right-4;
   }
   .side-bar-arrangement {
-    @apply flex h-full w-52 flex-col overflow-hidden border-r scrollbar-hide;
+    @apply flex h-full w-[14.5rem] flex-col overflow-hidden border-r scrollbar-hide;
   }
   .side-bar-search-div-placement {
     @apply relative mx-auto mb-2 mt-2 flex items-center;

src/frontend/src/types/components/index.ts

@@ -283,7 +283,7 @@ export type ConfirmationModalType = {
   confirmationText: string;
   children: ReactElement;
   icon: string;
-  data: any;
+  data?: any;
   index: number;
   onConfirm: (index, data) => void;
 };