(ui) add form for /key/gen params

ui/litellm-dashboard/src/components/create_key_button.tsx

@@ -1,11 +1,9 @@
-"use client";
-
-import React, { useState, useEffect, useRef } from "react";
-import { Button, TextInput, Grid, Col } from "@tremor/react";
-import { message } from "antd";
-import { Card, Metric, Text } from "@tremor/react";
+import React, { useState } from "react";
+import { Button, Modal, Form, Input, InputNumber, Select, message } from "antd";
 import { keyCreateCall } from "./networking";
-// Define the props type
+
+const { Option } = Select;
+
 interface CreateKeyProps {
   userID: string;
   accessToken: string;
@@ -14,8 +12,6 @@ interface CreateKeyProps {
   setData: React.Dispatch<React.SetStateAction<any[] | null>>;
 }
 
-import { Modal, Button as Button2 } from "antd";
-
 const CreateKey: React.FC<CreateKeyProps> = ({
   userID,
   accessToken,
@@ -23,68 +19,105 @@ const CreateKey: React.FC<CreateKeyProps> = ({
   data,
   setData,
 }) => {
+  const [form] = Form.useForm();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [apiKey, setApiKey] = useState(null);
+
   const handleOk = () => {
-    // Handle the OK action
-    console.log("OK Clicked");
     setIsModalVisible(false);
+    form.resetFields();
   };
 
   const handleCancel = () => {
-    // Handle the cancel action or closing the modal
-    console.log("Modal closed");
     setIsModalVisible(false);
     setApiKey(null);
   };
 
-  const handleCreate = async () => {
-    if (data == null) {
-      return;
-    }
+  const handleCreate = async (values) => {
     try {
       message.info("Making API Call");
       setIsModalVisible(true);
-      const response = await keyCreateCall(proxyBaseUrl, accessToken, userID);
-      // Successfully completed the deletion. Update the state to trigger a rerender.
+      const response = await keyCreateCall(proxyBaseUrl, accessToken, userID, values);
       setData([...data, response]);
       setApiKey(response["key"]);
       message.success("API Key Created");
     } catch (error) {
-      console.error("Error deleting the key:", error);
-      // Handle any error situations, such as displaying an error message to the user.
+      console.error("Error creating the key:", error);
     }
   };
 
   return (
     <div>
-      <Button className="mx-auto" onClick={handleCreate}>
+      <Button className="mx-auto" onClick={() => setIsModalVisible(true)}>
         + Create New Key
       </Button>
       <Modal
-        title="Save your key"
-        open={isModalVisible}
+        title="Create Key"
+        visible={isModalVisible}
         onOk={handleOk}
         onCancel={handleCancel}
       >
-        <Grid numItems={1} className="gap-2 w-full">
-          <Col numColSpan={1}>
-            <p>
-              Please save this secret key somewhere safe and accessible. For
-              security reasons, <b>you will not be able to view it again</b>{" "}
-              through your LiteLLM account. If you lose this secret key, you will
-              need to generate a new one.
-            </p>
-          </Col>
-          <Col numColSpan={1}>
-            {apiKey != null ? (
-              <Text>API Key: {apiKey}</Text>
-            ) : (
-              <Text>Key being created, this might take 30s</Text>
-            )}
-          </Col>
-        </Grid>
+        <Form form={form} onFinish={handleCreate}>
+          <Form.Item
+            label="Duration"
+            name="duration"
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label="Key Name"
+            name="key_alias"
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="Models"
+            name="models"
+          >
+            <Input placeholder="Enter models separated by commas" />
+          </Form.Item>
+          
+
+          <Form.Item
+            label="Max Budget"
+            name="max_budget"
+          >
+            <InputNumber />
+          </Form.Item>
+          <Form.Item
+            label="Max Parallel Requests"
+            name="max_parallel_requests"
+          >
+            <InputNumber />
+          </Form.Item>
+          <Form.Item
+            label="Metadata"
+            name="metadata"
+          >
+            <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+              Create Key
+            </Button>
+          </Form.Item>
+        </Form>
       </Modal>
+      {apiKey && (
+        <Modal
+          title="Save your key"
+          visible={isModalVisible}
+          onOk={handleOk}
+          onCancel={handleCancel}
+        >
+          {/* Display the result here */}
+          <p>
+            API Key: {apiKey} <br />
+            {/* Display other API response details here */}
+          </p>
+        </Modal>
+      )}
     </div>
   );
 };