Added Submit buttons in every modal, except confirmation

src/frontend/src/components/fetchErrorComponent/index.tsx

@@ -1,7 +1,6 @@
 import BaseModal from "../../modals/baseModal";
 import { fetchErrorComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
-import { Button } from "../ui/button";
 
 export default function FetchErrorComponent({
   message,
@@ -12,7 +11,14 @@ export default function FetchErrorComponent({
 }: fetchErrorComponentType) {
   return (
     <>
-      <BaseModal size="small-h-full" open={openModal} type="modal">
+      <BaseModal
+        size="small-h-full"
+        open={openModal}
+        type="modal"
+        onSubmit={() => {
+          setRetry();
+        }}
+      >
         <BaseModal.Content>
           <div role="status" className="m-auto flex flex-col items-center">
             <IconComponent
@@ -27,24 +33,9 @@ export default function FetchErrorComponent({
           </div>
         </BaseModal.Content>
 
-        <BaseModal.Footer>
+        <BaseModal.Footer
-          <div className="m-auto">
+          submit={{ label: "Retry", loading: isLoadingHealth }}
-            <Button
+        />
-              disabled={isLoadingHealth}
-              onClick={() => {
-                setRetry();
-              }}
-            >
-              {isLoadingHealth ? (
-                <div>
-                  <IconComponent name={"Loader2"} className={"animate-spin"} />
-                </div>
-              ) : (
-                "Retry"
-              )}
-            </Button>
-          </div>
-        </BaseModal.Footer>
       </BaseModal>
     </>
   );

src/frontend/src/modals/IOModal/index.tsx

@@ -3,7 +3,6 @@ import AccordionComponent from "../../components/accordionComponent";
 import IconComponent from "../../components/genericIconComponent";
 import ShadTooltip from "../../components/shadTooltipComponent";
 import { Badge } from "../../components/ui/badge";
-import { Button } from "../../components/ui/button";
 import {
   Tabs,
   TabsContent,
@@ -121,6 +120,7 @@ export default function IOModal({
       open={open}
       setOpen={setOpen}
       disable={disable}
+      onSubmit={() => sendMessage(1)}
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
@@ -371,13 +371,10 @@ export default function IOModal({
         </div>
       </BaseModal.Content>
       {!haveChat ? (
-        <BaseModal.Footer>
+        <BaseModal.Footer
-          <div className="flex w-full justify-end  pt-2">
+          submit={{
-            <Button
+            label: "Run Flow",
-              variant={"outline"}
+            icon: (
-              className="flex gap-2 px-3"
-              onClick={() => sendMessage(1)}
-            >
               <IconComponent
                 name={isBuilding ? "Loader2" : "Zap"}
                 className={cn(
@@ -387,10 +384,9 @@ export default function IOModal({
                     : "fill-current text-medium-indigo",
                 )}
               />
-              Run Flow
+            ),
-            </Button>
+          }}
-          </div>
+        />
-        </BaseModal.Footer>
       ) : (
         <></>
       )}

src/frontend/src/modals/baseModal/index.tsx

@@ -16,6 +16,7 @@ import {
 } from "../../components/ui/dialog-with-no-close";
 
 import { DialogClose } from "@radix-ui/react-dialog";
+import ForwardedIconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { modalHeaderType } from "../../types/components";
 import { cn } from "../../utils/utils";
@@ -65,7 +66,12 @@ const Header: React.FC<{ children: ReactNode; description: string | null }> = ({
 
 const Footer: React.FC<{
   children?: ReactNode;
-  submit?: { label: string; icon?: ReactNode };
+  submit?: {
+    label: string;
+    icon?: ReactNode;
+    loading?: boolean;
+    disabled?: boolean;
+  };
 }> = ({ children, submit }) => {
   return submit ? (
     <div className="flex w-full items-center justify-between">
@@ -76,9 +82,26 @@ const Footer: React.FC<{
             Cancel
           </Button>
         </DialogClose>
-        <Button type="submit">
+        <Button
+          type="submit"
+          disabled={submit.loading || submit.disabled}
+          className="relative"
+        >
+          <div
+            className={cn(
+              submit.loading ? "opacity-100" : "opacity-0",
+              "absolute self-center",
+            )}
+          >
+            <ForwardedIconComponent
+              name={"Loader2"}
+              className={"animate-spin"}
+            />
+          </div>
+          <div className={cn(submit.loading ? "opacity-0" : "opacity-100")}>
             {submit.icon && submit.icon}
             {submit.label}
+          </div>
         </Button>
       </div>
     </div>
@@ -242,7 +265,7 @@ function BaseModal({
                   event.preventDefault();
                   onSubmit();
                 }}
-                className="flex flex-col gap-4"
+                className="flex flex-col gap-6"
               >
                 <div
                   className={`flex flex-col ${height} w-full transition-all duration-300`}

src/frontend/src/modals/editNodeModal/index.tsx

@@ -15,7 +15,6 @@ import ShadTooltip from "../../components/shadTooltipComponent";
 import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
 import { Badge } from "../../components/ui/badge";
-import { Button } from "../../components/ui/button";
 import {
   Table,
   TableBody,
@@ -98,6 +97,16 @@ const EditNodeModal = forwardRef(
         onChangeOpenModal={(open) => {
           setMyData(data);
         }}
+        onSubmit={() => {
+          setNode(data.id, (old) => ({
+            ...old,
+            data: {
+              ...old.data,
+              node: myData.node,
+            },
+          }));
+          setOpen(false);
+        }}
       >
         <BaseModal.Trigger>
           <></>
@@ -608,26 +617,7 @@ const EditNodeModal = forwardRef(
           </div>
         </BaseModal.Content>
 
-        <BaseModal.Footer>
+        <BaseModal.Footer submit={{ label: "Save Changes" }} />
-          <Button
-            data-test-id="saveChangesBtn"
-            id={"saveChangesBtn"}
-            className="mt-3"
-            onClick={() => {
-              setNode(data.id, (old) => ({
-                ...old,
-                data: {
-                  ...old.data,
-                  node: myData.node,
-                },
-              }));
-              setOpen(false);
-            }}
-            type="submit"
-          >
-            Save Changes
-          </Button>
-        </BaseModal.Footer>
       </BaseModal>
     );
   },

src/frontend/src/modals/exportModal/index.tsx

@@ -1,7 +1,6 @@
 import { ReactNode, forwardRef, useEffect, useState } from "react";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
-import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { API_WARNING_NOTICE_ALERT } from "../../constants/alerts_constants";
 import {
@@ -30,7 +29,43 @@ const ExportModal = forwardRef(
     const [open, setOpen] = useState(false);
 
     return (
-      <BaseModal size="smaller-h-full" open={open} setOpen={setOpen}>
+      <BaseModal
+        size="smaller-h-full"
+        open={open}
+        setOpen={setOpen}
+        onSubmit={() => {
+          if (checked) {
+            downloadFlow(
+              {
+                id: currentFlow!.id,
+                data: currentFlow!.data!,
+                description,
+                name,
+                last_tested_version: version,
+                is_component: false,
+              },
+              name!,
+              description,
+            );
+            setNoticeData({
+              title: API_WARNING_NOTICE_ALERT,
+            });
+          } else
+            downloadFlow(
+              removeApiKeys({
+                id: currentFlow!.id,
+                data: currentFlow!.data!,
+                description,
+                name,
+                last_tested_version: version,
+                is_component: false,
+              }),
+              name!,
+              description,
+            );
+          setOpen(false);
+        }}
+      >
         <BaseModal.Trigger asChild>{props.children}</BaseModal.Trigger>
         <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
           <span className="pr-2">Export</span>
@@ -64,47 +99,9 @@ const ExportModal = forwardRef(
           </span>
         </BaseModal.Content>
 
-        <BaseModal.Footer>
+        <BaseModal.Footer submit={{ label: "Download Flow" }} />
-          <Button
-            onClick={() => {
-              if (checked) {
-                downloadFlow(
-                  {
-                    id: currentFlow!.id,
-                    data: currentFlow!.data!,
-                    description,
-                    name,
-                    last_tested_version: version,
-                    is_component: false,
-                  },
-                  name!,
-                  description
-                );
-                setNoticeData({
-                  title: API_WARNING_NOTICE_ALERT,
-                });
-              } else
-                downloadFlow(
-                  removeApiKeys({
-                    id: currentFlow!.id,
-                    data: currentFlow!.data!,
-                    description,
-                    name,
-                    last_tested_version: version,
-                    is_component: false,
-                  }),
-                  name!,
-                  description
-                );
-              setOpen(false);
-            }}
-            type="submit"
-          >
-            Download Flow
-          </Button>
-        </BaseModal.Footer>
       </BaseModal>
     );
-  }
+  },
 );
 export default ExportModal;

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -41,7 +41,12 @@ export default function FlowSettingsModal({
   }, [flows]);
 
   return (
-    <BaseModal open={open} setOpen={setOpen} size="smaller">
+    <BaseModal
+      open={open}
+      setOpen={setOpen}
+      size="smaller"
+      onSubmit={handleClick}
+    >
       <BaseModal.Header description={SETTINGS_DIALOG_SUBTITLE}>
         <span className="pr-2">Settings</span>
         <IconComponent name="Settings2" className="mr-2 h-4 w-4 " />
@@ -56,15 +61,12 @@ export default function FlowSettingsModal({
         />
       </BaseModal.Content>
 
-      <BaseModal.Footer>
+      <BaseModal.Footer
-        <Button
+        submit={{
-          disabled={nameLists.includes(name) && name !== currentFlow!.name}
+          label: "Save",
-          onClick={handleClick}
+          disabled: nameLists.includes(name) && name !== currentFlow!.name,
-          type="submit"
+        }}
-        >
+      />
-          Save
-        </Button>
-      </BaseModal.Footer>
     </BaseModal>
   );
 }

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

@@ -1,4 +1,3 @@
-import { Loader2 } from "lucide-react";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -202,6 +201,18 @@ export default function ShareModal({
         size="smaller-h-full"
         open={(!disabled && open) ?? internalOpen}
         setOpen={setOpen ?? internalSetOpen}
+        onSubmit={() => {
+          const isNameAvailable = !unavaliableNames.some(
+            (element) => element.name === name,
+          );
+
+          if (isNameAvailable) {
+            handleShareComponent();
+            (setOpen || internalSetOpen)(false);
+          } else {
+            setOpenConfirmationModal(true);
+          }
+        }}
       >
         <BaseModal.Trigger asChild>
           {children ? children : <></>}
@@ -250,8 +261,15 @@ export default function ShareModal({
           </span>
         </BaseModal.Content>
 
-        <BaseModal.Footer>
+        <BaseModal.Footer
-          <div className="flex w-full justify-between gap-2">
+          submit={{
+            label: `Share ${
+              !loadingNames && (!is_component ? " Flow" : " Component")
+            }`,
+            loading: loadingNames,
+          }}
+        >
+          <>
             {!is_component && (
               <ExportModal>
                 <Button
@@ -281,37 +299,7 @@ export default function ShareModal({
                 Export
               </Button>
             )}
-            <Button
-              disabled={loadingNames}
-              type="button"
-              className={is_component ? "w-40" : "w-28"}
-              onClick={() => {
-                const isNameAvailable = !unavaliableNames.some(
-                  (element) => element.name === name,
-                );
-
-                if (isNameAvailable) {
-                  handleShareComponent();
-                  (setOpen || internalSetOpen)(false);
-                } else {
-                  setOpenConfirmationModal(true);
-                }
-              }}
-            >
-              {loadingNames ? (
-                <>
-                  <div className="center">
-                    <Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
-                  </div>
           </>
-              ) : (
-                <>
-                  Share{" "}
-                  {!loadingNames && (!is_component ? "Flow" : "Component")}
-                </>
-              )}
-            </Button>
-          </div>
         </BaseModal.Footer>
       </BaseModal>
       <>{modalConfirmation}</>