Merge pull request #14622 from ARajan1084/guardrail-key-configuration-fix

Fix: 14473: Guardrail view, edit, and delete behavior

Author: krrishdholakia

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={

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">