From 37238ca2ca4284db6b41d3077a27ce9aa055fccf Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 4 Jun 2024 18:52:10 -0300
Subject: [PATCH] Fixed secret key modal, made it congruent with existing
 design

---
 .../src/modals/secretKeyModal/index.tsx       | 170 +++++++-----------
 src/frontend/src/types/components/index.ts    |   6 +-
 2 files changed, 70 insertions(+), 106 deletions(-)

diff --git a/src/frontend/src/modals/secretKeyModal/index.tsx b/src/frontend/src/modals/secretKeyModal/index.tsx
index 879280dd5..f700501d1 100644
--- a/src/frontend/src/modals/secretKeyModal/index.tsx
+++ b/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,118 +61,91 @@ 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={""}>
-        <span className="pr-2">{title}</span>
-        <Icon
-          name="icon"
-          className="h-6 w-6 pl-1 text-foreground"
-          aria-hidden="true"
-        />
-      </BaseModal.Header>
-      <BaseModal.Content>
-        {renderKey === true && (
-          <>
-            <span className="text-xs">
+      <BaseModal.Header
+        description={
+          renderKey ? (
+            <>
+              {" "}
               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();
-                  }}
-                >
-                  {textCopied ? (
-                    <IconComponent name="Copy" className="h-4 w-4" />
-                  ) : (
-                    <IconComponent name="Check" className="h-4 w-4" />
-                  )}
-                </Button>
-              </div>
+              <Button
+                onClick={() => {
+                  handleCopyClick();
+                }}
+                variant="none"
+                size="none"
+              >
+                {textCopied ? (
+                  <IconComponent name="Copy" className="h-4 w-4" />
+                ) : (
+                  <IconComponent name="Check" className="h-4 w-4" />
+                )}
+              </Button>
             </div>
           </>
-        )}
-
-        <Form.Root
-          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.Field name="apikey">
+            <div className="flex items-center justify-between gap-2">
+              <Form.Control asChild>
+                <Input
+                  //fake api key
+                  id="primary-input"
+                  value={apiKeyName}
+                  ref={inputRef}
+                  onChange={({ target: { value } }) => {
+                    setApiKeyName(value);
                   }}
-                >
-                  <Form.Label className="data-[invalid]:label-invalid">
-                    Name (optional){" "}
-                  </Form.Label>
-                </div>
-                <Form.Control asChild>
-                  <input
-                    onChange={({ target: { value } }) => {
-                      setApiKeyName(value);
-                    }}
-                    value={apiKeyName}
-                    className="primary-input"
-                    placeholder="My key name"
-                  />
-                </Form.Control>
-              </Form.Field>
+                  placeholder="Insert a name for your API Key"
+                />
+              </Form.Control>
             </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>
+          </Form.Field>
+        )}
       </BaseModal.Content>
+      <BaseModal.Footer
+        submit={{ label: renderKey ? "Done" : "Create Secret Key" }}
+      />
     </BaseModal>
   );
 }
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 199cbb1f2..b87f3c57d 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/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 = {