From 32036e2093879403a1d89c99bd402b3821153c2e Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 1 Oct 2025 18:46:43 -0700
Subject: [PATCH] feat(ui/): add common rate limit type form, for reuse for
 tpm/rpm across create + edit key

---
 .../RateLimitTypeFormItem.tsx                 | 98 +++++++++++++++++++
 .../organisms/create_key_button.tsx           | 89 +++--------------
 .../components/templates/key_edit_view.tsx    | 13 +++
 3 files changed, 124 insertions(+), 76 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.tsx

diff --git a/ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.tsx b/ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.tsx
new file mode 100644
index 00000000000..e0607d50681
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.tsx
@@ -0,0 +1,98 @@
+import React from "react"
+import { Form, Select, Tooltip } from "antd"
+import { InfoCircleOutlined } from "@ant-design/icons"
+
+const { Option } = Select
+
+interface RateLimitTypeFormItemProps {
+  /** The type of rate limit - either 'tpm' or 'rpm' */
+  type: 'tpm' | 'rpm'
+  /** The form field name */
+  name: string
+  /** Whether to show detailed descriptions (default: true) */
+  showDetailedDescriptions?: boolean
+  /** Additional CSS classes */
+  className?: string
+  /** Initial value for the field */
+  initialValue?: string | null
+  /** Form instance for setting field values */
+  form?: any
+  /** Custom onChange handler */
+  onChange?: (value: string) => void
+}
+
+export const RateLimitTypeFormItem: React.FC<RateLimitTypeFormItemProps> = ({
+  type,
+  name,
+  showDetailedDescriptions = true,
+  className = "",
+  initialValue = null,
+  form,
+  onChange
+}) => {
+  const limitTypeUpper = type.toUpperCase()
+  const limitTypeLower = type.toLowerCase()
+
+  const handleChange = (value: string) => {
+    if (form) {
+      form.setFieldValue(name, value)
+    }
+    if (onChange) {
+      onChange(value)
+    }
+  }
+
+  const tooltipTitle = `Select 'guaranteed_throughput' to prevent overallocating ${limitTypeUpper} limit when the key belongs to a Team with specific ${limitTypeUpper} limits.`
+
+  return (
+    <Form.Item
+      label={
+        <span>
+          {limitTypeUpper} Rate Limit Type{' '}
+          <Tooltip title={tooltipTitle}>
+            <InfoCircleOutlined style={{ marginLeft: '4px' }} />
+          </Tooltip>
+        </span>
+      }
+      name={name}
+      initialValue={initialValue}
+      className={className}
+    >
+      <Select
+        defaultValue={showDetailedDescriptions ? "default" : undefined}
+        placeholder="Select rate limit type"
+        style={{ width: "100%" }}
+        optionLabelProp={showDetailedDescriptions ? "label" : undefined}
+        onChange={handleChange}
+      >
+        {showDetailedDescriptions ? (
+          <>
+            <Option value="best_effort_throughput" label="Default">
+              <div style={{ padding: '4px 0' }}>
+                <div style={{ fontWeight: 500 }}>Default</div>
+                <div style={{ fontSize: '11px', color: '#6b7280', marginTop: '2px' }}>
+                  Best effort throughput - no error if we're overallocating {limitTypeLower} (Team/Key Limits checked at runtime).
+                </div>
+              </div>
+            </Option>
+            <Option value="guaranteed_throughput" label="Guaranteed throughput">
+              <div style={{ padding: '4px 0' }}>
+                <div style={{ fontWeight: 500 }}>Guaranteed throughput</div>
+                <div style={{ fontSize: '11px', color: '#6b7280', marginTop: '2px' }}>
+                  Guaranteed throughput - raise an error if we're overallocating {limitTypeLower} (also checks model-specific limits)
+                </div>
+              </div>
+            </Option>
+          </>
+        ) : (
+          <>
+            <Option value="best_effort_throughput">Best effort throughput</Option>
+            <Option value="guaranteed_throughput">Guaranteed throughput</Option>
+          </>
+        )}
+      </Select>
+    </Form.Item>
+  )
+}
+
+export default RateLimitTypeFormItem
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 e367565bae0..4c26c6cb76b 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@@ -35,6 +35,7 @@ import MCPServerSelector from "../mcp_server_management/MCPServerSelector"
 import ModelAliasManager from "../common_components/ModelAliasManager"
 import NotificationsManager from "../molecules/notifications_manager"
 import KeyLifecycleSettings from "../common_components/KeyLifecycleSettings"
+import RateLimitTypeFormItem from "../common_components/RateLimitTypeFormItem"
 
 const { Option } = Select;
 
@@ -810,46 +811,14 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   >
                     <NumericalInput step={1} width={400} />
                   </Form.Item>
-                  <Form.Item
-                    label={
-                      <span>
-                        TPM Rate Limit Type {' '}
-                        <Tooltip title="Select 'guaranteed_throughput' to prevent overallocating TPM limit when the key belongs to a Team with specific TPM limits.">
-                          <InfoCircleOutlined style={{ marginLeft: '4px' }} />
-                        </Tooltip>
-                      </span>
-                    }
+                  <RateLimitTypeFormItem
+                    type="tpm"
                     name="tpm_limit_type"
-                    initialValue={null}
                     className="mt-4"
-                  >
-                    <Select 
-                      defaultValue="default" 
-                      placeholder="Select rate limit type" 
-                      style={{ width: "100%" }}
-                      optionLabelProp="label"
-                      onChange={(value) => {
-                        form.setFieldValue('tpm_limit_type', value);
-                      }}
-                    >
-                      <Option value="best_effort_throughput" label="Default">
-                        <div style={{ padding: '4px 0' }}>
-                          <div style={{ fontWeight: 500 }}>Default</div>
-                          <div style={{ fontSize: '11px', color: '#6b7280', marginTop: '2px' }}>
-                            Best effort throughput - no error if we're overallocating tpm (Team/Key Limits checked at runtim).
-                          </div>
-                        </div>
-                      </Option>
-                      <Option value="guaranteed_throughput" label="Guaranteed throughput">
-                        <div style={{ padding: '4px 0' }}>
-                          <div style={{ fontWeight: 500 }}>Guaranteed throughput</div>
-                          <div style={{ fontSize: '11px', color: '#6b7280', marginTop: '2px' }}>
-                            Guaranteed throughput - raise an error if we're overallocating tpm (also checks model-specific limits)
-                          </div>
-                        </div>
-                      </Option>
-                    </Select>
-                  </Form.Item>
+                    initialValue={null}
+                    form={form}
+                    showDetailedDescriptions={true}
+                  />
                   <Form.Item
                     className="mt-4"
                     label={
@@ -881,46 +850,14 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   >
                     <NumericalInput step={1} width={400} />
                   </Form.Item>
-                  <Form.Item
-                    label={
-                      <span>
-                        RPM Rate Limit Type {' '}
-                        <Tooltip title="Select 'guaranteed_throughput' to prevent overallocating RPM limit when the key belongs to a Team with specific RPM limits.">
-                          <InfoCircleOutlined style={{ marginLeft: '4px' }} />
-                        </Tooltip>
-                      </span>
-                    }
+                  <RateLimitTypeFormItem
+                    type="rpm"
                     name="rpm_limit_type"
-                    initialValue={null}
                     className="mt-4"
-                  >
-                    <Select 
-                      defaultValue="default" 
-                      placeholder="Select rate limit type" 
-                      style={{ width: "100%" }}
-                      optionLabelProp="label"
-                      onChange={(value) => {
-                        form.setFieldValue('rpm_limit_type', value);
-                      }}
-                    >
-                      <Option value="best_effort_throughput" label="Default">
-                        <div style={{ padding: '4px 0' }}>
-                          <div style={{ fontWeight: 500 }}>Default</div>
-                          <div style={{ fontSize: '11px', color: '#6b7280', marginTop: '2px' }}>
-                            Best effort throughput - no error if we're overallocating rpm (Team/Key Limits checked at runtim).
-                          </div>
-                        </div>
-                      </Option>
-                      <Option value="guaranteed_throughput" label="Guaranteed throughput">
-                        <div style={{ padding: '4px 0' }}>
-                          <div style={{ fontWeight: 500 }}>Guaranteed throughput</div>
-                          <div style={{ fontSize: '11px', color: '#6b7280', marginTop: '2px' }}>
-                            Guaranteed throughput - raise an error if we're overallocating rpm (also checks model-specific limits)
-                          </div>
-                        </div>
-                      </Option>
-                    </Select>
-                  </Form.Item>
+                    initialValue={null}
+                    form={form}
+                    showDetailedDescriptions={true}
+                  />
                   <Form.Item 
                     label={
                       <span>
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 07a311da893..89453274d6e 100644
--- a/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
@@ -13,6 +13,7 @@ import { fetchMCPAccessGroups } from "../networking"
 import { mapInternalToDisplayNames, mapDisplayToInternalNames } from "../callback_info_helpers"
 import GuardrailSelector from "@/components/guardrails/GuardrailSelector"
 import KeyLifecycleSettings from "../common_components/KeyLifecycleSettings"
+import RateLimitTypeFormItem from "../common_components/RateLimitTypeFormItem"
 
 interface KeyEditViewProps {
   keyData: KeyResponse
@@ -222,10 +223,22 @@ export function KeyEditView({
         <NumericalInput min={0} />
       </Form.Item>
 
+      <RateLimitTypeFormItem
+        type="tpm"
+        name="tpm_limit_type"
+        showDetailedDescriptions={false}
+      />
+
       <Form.Item label="RPM Limit" name="rpm_limit">
         <NumericalInput min={0} />
       </Form.Item>
 
+      <RateLimitTypeFormItem
+        type="rpm"
+        name="rpm_limit_type"
+        showDetailedDescriptions={false}
+      />
+
       <Form.Item label="Max Parallel Requests" name="max_parallel_requests">
         <NumericalInput min={0} />
       </Form.Item>