Fixed secret key modal, made it congruent with existing design

src/frontend/src/modals/secretKeyModal/index.tsx

@@ -11,15 +11,10 @@ import { nodeIconsLucide } from "../../utils/styleUtils";
 import BaseModal from "../baseModal";
 
 export default function SecretKeyModal({
-  title,
-  cancelText,
-  confirmationText,
   children,
-  icon,
   data,
   onCloseModal,
 }: ApiKeyType) {
-  const Icon: any = nodeIconsLucide[icon];
   const [open, setOpen] = useState(false);
   const [apiKeyName, setApiKeyName] = useState(data?.apikeyname ?? "");
   const [apiKeyValue, setApiKeyValue] = useState("");
@@ -66,38 +61,60 @@ export default function SecretKeyModal({
       .catch((err) => {});
   }
 
+  function handleSubmitForm() {
+    if (!renderKey) {
+      setRenderKey(true);
+      handleAddNewKey();
+    } else {
+      setOpen(false);
+    }
+  }
+
   return (
-    <BaseModal size="small-h-full" open={open} setOpen={setOpen}>
+    <BaseModal
+      onSubmit={handleSubmitForm}
+      size="small-h-full"
+      open={open}
+      setOpen={setOpen}
+    >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
-      <BaseModal.Header description={""}>
+      <BaseModal.Header
-        <span className="pr-2">{title}</span>
+        description={
-        <Icon
+          renderKey ? (
-          name="icon"
-          className="h-6 w-6 pl-1 text-foreground"
-          aria-hidden="true"
-        />
-      </BaseModal.Header>
-      <BaseModal.Content>
-        {renderKey === true && (
             <>
-            <span className="text-xs">
+              {" "}
               Please save this secret key somewhere safe and accessible. For
               security reasons,{" "}
               <strong>you won't be able to view it again</strong> through your
               account. If you lose this secret key, you'll need to generate a
               new one.
-            </span>
+            </>
-            <div className="flex pt-3">
+          ) : (
+            <>Create a secret API Key to use Langflow API.</>
+          )
+        }
+      >
+        <span className="pr-2">Create API Key</span>
+        <IconComponent
+          name="Key"
+          className="h-6 w-6 pl-1 text-foreground"
+          aria-hidden="true"
+        />
+      </BaseModal.Header>
+      <BaseModal.Content>
+        {renderKey ? (
+          <>
+            <div className="flex items-center gap-3">
               <div className="w-full">
                 <Input ref={inputRef} readOnly={true} value={apiKeyValue} />
               </div>
 
-              <div>
               <Button
-                  className="ml-3"
                 onClick={() => {
                   handleCopyClick();
                 }}
+                variant="none"
+                size="none"
               >
                 {textCopied ? (
                   <IconComponent name="Copy" className="h-4 w-4" />
@@ -106,78 +123,29 @@ export default function SecretKeyModal({
                 )}
               </Button>
             </div>
-            </div>
           </>
-        )}
+        ) : (
-
+          <Form.Field name="apikey">
-        <Form.Root
+            <div className="flex items-center justify-between gap-2">
-          onSubmit={(event) => {
-            setRenderKey(true);
-            handleAddNewKey();
-            event.preventDefault();
-          }}
-        >
-          {renderKey === false && (
-            <div className="grid gap-5">
-              <Form.Field name="username">
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "baseline",
-                    justifyContent: "space-between",
-                  }}
-                >
-                  <Form.Label className="data-[invalid]:label-invalid">
-                    Name (optional){" "}
-                  </Form.Label>
-                </div>
               <Form.Control asChild>
-                  <input
+                <Input
+                  //fake api key
+                  id="primary-input"
+                  value={apiKeyName}
+                  ref={inputRef}
                   onChange={({ target: { value } }) => {
                     setApiKeyName(value);
                   }}
-                    value={apiKeyName}
+                  placeholder="Insert a name for your API Key"
-                    className="primary-input"
-                    placeholder="My key name"
                 />
               </Form.Control>
+            </div>
           </Form.Field>
-            </div>
         )}
-          {renderKey === false && (
-            <div className="float-right">
-              <Button
-                type="button"
-                className="mr-3"
-                variant="outline"
-                onClick={() => {
-                  setOpen(false);
-                }}
-              >
-                {cancelText}
-              </Button>
-
-              <Form.Submit asChild>
-                <Button className="mt-8">{confirmationText}</Button>
-              </Form.Submit>
-            </div>
-          )}
-
-          {renderKey === true && (
-            <div className="float-right">
-              <Button
-                onClick={() => {
-                  setOpen(false);
-                  setRenderKey(false);
-                }}
-                className="mt-8"
-              >
-                Done
-              </Button>
-            </div>
-          )}
-        </Form.Root>
       </BaseModal.Content>
+      <BaseModal.Footer
+        submit={{ label: renderKey ? "Done" : "Create Secret Key" }}
+      />
     </BaseModal>
   );
 }

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

@@ -393,11 +393,7 @@ export type UserInputType = {
 };
 
 export type ApiKeyType = {
-  title: string;
-  cancelText: string;
-  confirmationText: string;
   children: ReactElement;
-  icon: string;
   data?: any;
   onCloseModal: () => void;
 };
@@ -547,7 +543,7 @@ export type iconsType = {
 
 export type modalHeaderType = {
   children: ReactNode;
-  description: string | null;
+  description: string | JSX.Element | null;
 };
 
 export type codeAreaModalPropsType = {