Put component and flow export into share modal

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

@@ -17,6 +17,7 @@ import {
 } from "../../controllers/API";
 import { FlowType } from "../../types/flow";
 import {
+  downloadNode,
   removeApiKeys,
   removeFileNameFromComponents,
 } from "../../utils/reactflowUtils";
@@ -39,7 +40,7 @@ export default function ShareModal({
   setOpen?: (open: boolean) => void;
   disabled?: boolean;
 }): JSX.Element {
-  const { version, addFlow } = useContext(FlowsContext);
+  const { version, addFlow, downloadFlow } = useContext(FlowsContext);
   const { hasApiKey, hasStore } = useContext(StoreContext);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const { reactFlowInstance } = useContext(typesContext);
@@ -155,6 +156,13 @@ export default function ShareModal({
     else internalSetOpen(false);
   };
 
+  const handleExportComponent = () => {
+    if (!checked) {
+      component = removeApiKeys(component);
+    }
+    downloadNode(component);
+  };
+
   let modalConfirmation = useMemo(() => {
     return (
       <>
@@ -205,7 +213,9 @@ export default function ShareModal({
         open={(!disabled && open) ?? internalOpen}
         setOpen={setOpen ?? internalSetOpen}
       >
-        <BaseModal.Trigger>{children ? children : <></>}</BaseModal.Trigger>
+        <BaseModal.Trigger asChild>
+          {children ? children : <></>}
+        </BaseModal.Trigger>
         <BaseModal.Header
           description={`Share your ${nameComponent} to the Langflow Store.`}
         >
@@ -262,10 +272,23 @@ export default function ShareModal({
         </BaseModal.Content>
 
         <BaseModal.Footer>
-          <div className="text-right">
+          <div className="flex w-full justify-between gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              className="gap-2"
+              onClick={() => {
+                handleExportComponent();
+                (setOpen || internalSetOpen)(false);
+              }}
+            >
+              <IconComponent name="Download" className="h-4 w-4" />
+              Export
+            </Button>
             <Button
               disabled={loadingNames}
               type="button"
+              className={is_component ? "w-40" : "w-28"}
               onClick={() => {
                 const isNameAvailable = !unavaliableNames.some(
                   (element) => element.name === name
@@ -281,7 +304,7 @@ export default function ShareModal({
             >
               {loadingNames ? (
                 <>
-                  <div className="center w-16">
+                  <div className="center">
                     <Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
                   </div>
                 </>

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

@@ -184,14 +184,18 @@ export default function ExtraSidebar(): JSX.Element {
   }, [getFilterEdge, data]);
 
   const ModalMemo = useMemo(
-    () =>
+    () => (
-      !hasApiKey || !validApiKey ? (
+      <ShareModal
+        is_component={false}
+        component={flow!}
+        disabled={!hasApiKey || !validApiKey || !hasStore}
+      >
         <button
           disabled={!hasApiKey || !validApiKey || !hasStore}
           className={classNames(
-            "extra-side-bar-buttons",
+            "extra-side-bar-buttons gap-2 text-sm",
             !hasApiKey || !validApiKey || !hasStore
-              ? "button-disable  cursor-default"
+              ? "button-disable  cursor-default text-muted-foreground"
               : ""
           )}
         >
@@ -204,34 +208,10 @@ export default function ExtraSidebar(): JSX.Element {
                 : ""
             )}
           />
+          Share
         </button>
-      ) : (
+      </ShareModal>
-        <ShareModal
+    ),
-          is_component={false}
-          component={flow!}
-          disabled={!hasApiKey || !validApiKey || !hasStore}
-        >
-          <button
-            disabled={!hasApiKey || !validApiKey || !hasStore}
-            className={classNames(
-              "extra-side-bar-buttons",
-              !hasApiKey || !validApiKey || !hasStore
-                ? "button-disable  cursor-default"
-                : ""
-            )}
-          >
-            <IconComponent
-              name="Share2"
-              className={classNames(
-                "side-bar-button-size",
-                !hasApiKey || !validApiKey || !hasStore
-                  ? "extra-side-bar-save-disable"
-                  : ""
-              )}
-            />
-          </button>
-        </ShareModal>
-      ),
     [hasApiKey, validApiKey, flow, hasStore]
   );
 
@@ -270,7 +250,7 @@ export default function ExtraSidebar(): JSX.Element {
             </button>
           </ShadTooltip>
         </div>
-        <div className="side-bar-button">{ExportMemo}</div>
+        {!hasStore && ExportMemo}
         <ShadTooltip content={"Code"} side="top">
           <div className="side-bar-button">
             {flow && flow.data && (
@@ -295,36 +275,44 @@ export default function ExtraSidebar(): JSX.Element {
         <div className="side-bar-button">
           {flow && flow.data && (
             <ShadTooltip content="Save" side="top">
-              <div>
+              <button
-                <button
+                disabled={flow?.data?.nodes.length === 0}
-                  disabled={flow?.data?.nodes.length === 0}
+                className={
+                  "extra-side-bar-buttons " +
+                  (isPending && flow!.data!.nodes?.length > 0
+                    ? ""
+                    : "button-disable")
+                }
+                onClick={(event) => {
+                  saveFlow(flow!);
+                }}
+              >
+                <IconComponent
+                  name="Save"
                   className={
-                    "extra-side-bar-buttons " +
+                    "side-bar-button-size" +
                     (isPending && flow!.data!.nodes?.length > 0
-                      ? ""
+                      ? " "
-                      : "button-disable")
+                      : " extra-side-bar-save-disable")
                   }
-                  onClick={(event) => {
+                />
-                    saveFlow(flow!);
+              </button>
-                  }}
-                >
-                  <IconComponent
-                    name="Save"
-                    className={
-                      "side-bar-button-size" +
-                      (isPending && flow!.data!.nodes?.length > 0
-                        ? " "
-                        : " extra-side-bar-save-disable")
-                    }
-                  />
-                </button>
-              </div>
             </ShadTooltip>
           )}
         </div>
-        <ShadTooltip content="Share" side="top" styleClasses="cursor-default">
+        {hasStore && (
-          <div className="side-bar-button">{ModalMemo}</div>
+          <ShadTooltip
-        </ShadTooltip>
+            content={
+              !hasApiKey || !validApiKey
+                ? "Please review your API key."
+                : "Share"
+            }
+            side="top"
+            styleClasses="cursor-default"
+          >
+            <div className="side-bar-button">{ModalMemo}</div>
+          </ShadTooltip>
+        )}
       </div>
       <Separator />
       <div className="side-bar-search-div-placement">

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

@@ -257,15 +257,17 @@ export default function NodeToolbarComponent({
                   </div>{" "}
                 </SelectItem>
               )}
-              <SelectItem value={"Download"}>
+              {!hasStore && (
-                <div className="flex">
+                <SelectItem value={"Download"}>
-                  <IconComponent
+                  <div className="flex">
-                    name="Download"
+                    <IconComponent
-                    className="relative top-0.5 mr-2 h-4 w-4"
+                      name="Download"
-                  />{" "}
+                      className="relative top-0.5 mr-2 h-4 w-4"
-                  Download{" "}
+                    />{" "}
-                </div>{" "}
+                    Download{" "}
-              </SelectItem>
+                  </div>{" "}
+                </SelectItem>
+              )}
               {isMinimal && (
                 <SelectItem value={"show"}>
                   <div className="flex">