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,28 +184,7 @@ export default function ExtraSidebar(): JSX.Element {
   }, [getFilterEdge, data]);
 
   const ModalMemo = useMemo(
-    () =>
+    () => (
-      !hasApiKey || !validApiKey ? (
-        <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
         is_component={false}
         component={flow!}
@@ -214,9 +193,9 @@ export default function ExtraSidebar(): JSX.Element {
         <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"
               : ""
           )}
         >
@@ -229,6 +208,7 @@ export default function ExtraSidebar(): JSX.Element {
                 : ""
             )}
           />
+          Share
         </button>
       </ShareModal>
     ),
@@ -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,7 +275,6 @@ export default function ExtraSidebar(): JSX.Element {
         <div className="side-bar-button">
           {flow && flow.data && (
             <ShadTooltip content="Save" side="top">
-              <div>
               <button
                 disabled={flow?.data?.nodes.length === 0}
                 className={
@@ -318,13 +297,22 @@ export default function ExtraSidebar(): JSX.Element {
                   }
                 />
               </button>
-              </div>
             </ShadTooltip>
           )}
         </div>
-        <ShadTooltip content="Share" side="top" styleClasses="cursor-default">
+        {hasStore && (
+          <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,6 +257,7 @@ export default function NodeToolbarComponent({
                   </div>{" "}
                 </SelectItem>
               )}
+              {!hasStore && (
                 <SelectItem value={"Download"}>
                   <div className="flex">
                     <IconComponent
@@ -266,6 +267,7 @@ export default function NodeToolbarComponent({
                     Download{" "}
                   </div>{" "}
                 </SelectItem>
+              )}
               {isMinimal && (
                 <SelectItem value={"show"}>
                   <div className="flex">