From 626c48b78371e11a5dc760601a18694c9052bbf5 Mon Sep 17 00:00:00 2001
From: = <achintya.rajan03@gmail.com>
Date: Tue, 16 Sep 2025 14:48:41 -0700
Subject: [PATCH] removed problematic tooltips; used generic GuardrailSelector
 component

---
 .../components/organisms/create_key_button.tsx | 10 ----------
 .../src/components/templates/key_edit_view.tsx | 18 ++++--------------
 2 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
index 373fb18ade8..3771ea5b1bc 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@@ -857,10 +857,6 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                     className="mt-4"
                     help={premiumUser ? "Select existing guardrails or enter new ones" : "Premium feature - Upgrade to set guardrails by key"}
                   >
-                    <Tooltip 
-                      title={!premiumUser ? "Setting guardrails by key is a premium feature" : ""}
-                      placement="top"
-                    >
                       <Select
                         mode="tags"
                         style={{ width: '100%' }}
@@ -872,7 +868,6 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                         }
                         options={guardrailsList.map(name => ({ value: name, label: name }))}
                       />
-                    </Tooltip>
                   </Form.Item>
                   <Form.Item 
                     label={
@@ -894,10 +889,6 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                     className="mt-4"
                     help={premiumUser ? "Select existing prompts or enter new ones" : "Premium feature - Upgrade to set prompts by key"}
                   >
-                    <Tooltip 
-                      title={!premiumUser ? "Setting prompts by key is a premium feature" : ""}
-                      placement="top"
-                    >
                       <Select
                         mode="tags"
                         style={{ width: '100%' }}
@@ -909,7 +900,6 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                         }
                         options={promptsList.map(name => ({ value: name, label: name }))}
                       />
-                    </Tooltip>
                   </Form.Item>
                   <Form.Item 
                         label={
diff --git a/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx b/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
index 8e5c5e7069c..b758fac6643 100644
--- a/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
@@ -11,6 +11,7 @@ import EditLoggingSettings from "../team/EditLoggingSettings"
 import { extractLoggingSettings, formatMetadataForDisplay } from "../key_info_utils"
 import { fetchMCPAccessGroups } from "../networking"
 import { mapInternalToDisplayNames, mapDisplayToInternalNames } from "../callback_info_helpers"
+import GuardrailSelector from "@/components/guardrails/GuardrailSelector"
 
 interface KeyEditViewProps {
   keyData: KeyResponse
@@ -220,20 +221,9 @@ export function KeyEditView({
       </Form.Item>
 
       <Form.Item label="Guardrails" name="guardrails">
-        <Tooltip title={!premiumUser ? "Setting guardrails by key is a premium feature" : ""} placement="top">
-          <Select
-            mode="tags"
-            style={{ width: "100%" }}
-            disabled={!premiumUser}
-            placeholder={
-              !premiumUser
-                ? "Premium feature - Upgrade to set guardrails by key"
-                : Array.isArray(keyData.metadata?.guardrails) && keyData.metadata.guardrails.length > 0
-                  ? `Current: ${keyData.metadata.guardrails.join(", ")}`
-                  : "Select or enter guardrails"
-            }
-          />
-        </Tooltip>
+        { accessToken &&
+          <GuardrailSelector onChange={(v) => {form.setFieldValue("guardrails", v)}} accessToken={accessToken} />
+        }
       </Form.Item>
 
       <Form.Item label="Prompts" name="prompts">