From fae700da369dad400359419962354a815b6c8557 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Tue, 18 Aug 2026 15:35:35 -0700
Subject: [PATCH] refactor(ui): tokenise the access group selector and drop its
 stale binding note

The selector takes value and onChange, which is exactly what lets it sit
inside both an antd Form.Item and a react-hook-form FormField, so the doc
bullet naming only antd was about to describe half the truth. The props
interface already states the contract.

That bullet was also the only Form.Item match in the file, and it has twice
inflated the migration's canonical tag count, which now needs no subtraction.

Its four hardcoded colours move to tokens for the same reason as the rest of
the sweep. Its antd Select stays.
---
 .../components/common_components/AccessGroupSelector.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/common_components/AccessGroupSelector.tsx b/ui/litellm-dashboard/src/components/common_components/AccessGroupSelector.tsx
index 4b73fb561d0..fb8629dc8fa 100644
--- a/ui/litellm-dashboard/src/components/common_components/AccessGroupSelector.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/AccessGroupSelector.tsx
@@ -22,7 +22,6 @@ export interface AccessGroupSelectorProps {
  * - Displays the **access_group_name** in the dropdown.
  * - Returns an array of **access_group_id** values.
  * - Always multi-select since users can assign multiple access groups.
- * - Integrates with Ant Design `<Form.Item>` out of the box via `value` / `onChange`.
  */
 const AccessGroupSelector: React.FC<AccessGroupSelectorProps> = ({
   value,
@@ -42,7 +41,7 @@ const AccessGroupSelector: React.FC<AccessGroupSelectorProps> = ({
     return (
       <div>
         {showLabel && (
-          <p className="text-sm font-medium block mb-2 text-gray-700 flex items-center">
+          <p className="mb-2 flex items-center text-sm font-medium text-foreground">
             <TeamOutlined className="mr-2" /> {labelText}
           </p>
         )}
@@ -56,7 +55,7 @@ const AccessGroupSelector: React.FC<AccessGroupSelectorProps> = ({
     label: (
       <span>
         <span className="font-medium">{group.access_group_name}</span>{" "}
-        <span className="text-gray-400 text-xs">({group.access_group_id})</span>
+        <span className="text-xs text-muted-foreground">({group.access_group_id})</span>
       </span>
     ),
     value: group.access_group_id,
@@ -68,7 +67,7 @@ const AccessGroupSelector: React.FC<AccessGroupSelectorProps> = ({
   return (
     <div>
       {showLabel && (
-        <p className="text-sm font-medium block mb-2 text-gray-700 flex items-center">
+        <p className="mb-2 flex items-center text-sm font-medium text-foreground">
           <TeamOutlined className="mr-2" /> {labelText}
         </p>
       )}
@@ -83,7 +82,7 @@ const AccessGroupSelector: React.FC<AccessGroupSelectorProps> = ({
         style={{ width: "100%", ...style }}
         className={`rounded-md ${className ?? ""}`}
         notFoundContent={
-          isError ? <span className="text-red-500">Failed to load access groups</span> : "No access groups found"
+          isError ? <span className="text-destructive">Failed to load access groups</span> : "No access groups found"
         }
         filterOption={(input, option) => {
           const searchText = options.find((opt) => opt.value === option?.value)?.searchText ?? "";