From 6e6537367f4852198276e8af2dbba94d04416485 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 20 Apr 2024 17:40:53 -0700
Subject: [PATCH] ui - fix create key flow

---
 .../src/components/create_key_button.tsx      | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index d8716d304..d950c3be5 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -147,6 +147,17 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   mode="multiple"
                   placeholder="Select models"
                   style={{ width: "100%" }}
+                  onChange={(values) => {
+                    // Check if "All Team Models" is selected
+                    const isAllTeamModelsSelected = values.includes("all-team-models");
+              
+                    // If "All Team Models" is selected, deselect all other models
+                    if (isAllTeamModelsSelected) {
+                      const newValues = ["all-team-models"];
+                      // You can call the form's setFieldsValue method to update the value
+                      form.setFieldsValue({ models: newValues });
+                    }
+                  }}
                 >
                     <Option key="all-team-models" value="all-team-models">
                       All Team Models
@@ -270,6 +281,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
               <Form.Item 
                 label="Models" 
                 name="models"
+                className="mb-12"
                 rules={[{ required: true, message: 'Please select a model' }]}
                 help="required"
               >
@@ -277,6 +289,15 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   mode="multiple"
                   placeholder="Select models"
                   style={{ width: "100%" }}
+                  onChange={(values) => {
+                    const isAllTeamModelsSelected = values.includes("all-team-models");
+              
+                    if (isAllTeamModelsSelected) {
+                      const newValues = ["all-team-models"];
+                      form.setFieldsValue({ models: newValues });
+                    }
+                  }}
+
                 >
                     <Option key="all-team-models" value="all-team-models">
                       All Team Models
@@ -308,7 +329,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                 </Select>
               </Form.Item>
 
-              <Accordion className="mt-8">
+              <Accordion className="mt-20 mb-8" >
                 <AccordionHeader>
                   <b>Optional Settings</b>
                 </AccordionHeader>