From 790c3ab71bf4849d7b54c394855fefca355b5e6d Mon Sep 17 00:00:00 2001
From: ryan-crabbe-berri <ryan@berri.ai>
Date: Thu, 17 Sep 2026 16:32:17 -0700
Subject: [PATCH] refactor(ui): move the model team selector into
 ModelTeamSelect to keep ModelInfoEditForm under the eslint line cap

---
 .../src/components/ModelInfoEditForm.tsx      | 28 +++--------------
 .../components/view_model/ModelTeamSelect.tsx | 31 +++++++++++++++++++
 2 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/view_model/ModelTeamSelect.tsx

diff --git a/ui/litellm-dashboard/src/components/ModelInfoEditForm.tsx b/ui/litellm-dashboard/src/components/ModelInfoEditForm.tsx
index d76d7c88437..f0186ff4500 100644
--- a/ui/litellm-dashboard/src/components/ModelInfoEditForm.tsx
+++ b/ui/litellm-dashboard/src/components/ModelInfoEditForm.tsx
@@ -28,6 +28,7 @@ import type { Team } from "./key_team_helpers/key_list";
 import type { CredentialItem } from "./networking";
 import NumericalInput from "./shared/numerical_input";
 import type { Tag } from "./tag_management/types";
+import { ModelTeamSelect } from "./view_model/ModelTeamSelect";
 import VectorStoreSelector from "./vector_store_management/VectorStoreSelector";
 import { formatPtuUtcDisplay, utcIsoToPickerValue } from "../utils/ptuDatetime";
 import { isMaskedSecret } from "../utils/maskedSecretUtils";
@@ -810,30 +811,9 @@ const ModelInfoEditForm: React.FC<ModelInfoEditFormProps> = ({
               <FieldLabel>Team</FieldLabel>
               {isEditing ? (
                 <FormField control={form.control} name="team_id">
-                  {({ id, value, onChange, onBlur }) => {
-                    const items = (teams ?? []).map((team) => ({
-                      value: team.team_id,
-                      label: team.team_alias ? `${team.team_alias} (${team.team_id})` : team.team_id,
-                    }));
-                    return (
-                      <Select
-                        items={items}
-                        value={(value as string | undefined) || null}
-                        onValueChange={(selected: string | null) => onChange(selected ?? "")}
-                      >
-                        <SelectTrigger id={id} className="w-full" onBlur={onBlur}>
-                          <SelectValue placeholder="Select a team" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {items.map((item) => (
-                            <SelectItem key={item.value} value={item.value}>
-                              {item.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    );
-                  }}
+                  {({ id, value, onChange, onBlur }) => (
+                    <ModelTeamSelect id={id} value={value} onChange={onChange} onBlur={onBlur} teams={teams} />
+                  )}
                 </FormField>
               ) : (
                 <Display>
diff --git a/ui/litellm-dashboard/src/components/view_model/ModelTeamSelect.tsx b/ui/litellm-dashboard/src/components/view_model/ModelTeamSelect.tsx
new file mode 100644
index 00000000000..e00626ea132
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_model/ModelTeamSelect.tsx
@@ -0,0 +1,31 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import type { Team } from "../key_team_helpers/key_list";
+
+interface ModelTeamSelectProps {
+  id: string;
+  value: string | undefined;
+  onChange: (teamId: string) => void;
+  onBlur: () => void;
+  teams: Team[] | null;
+}
+
+export const ModelTeamSelect: React.FC<ModelTeamSelectProps> = ({ id, value, onChange, onBlur, teams }) => {
+  const items = (teams ?? []).map((team) => ({
+    value: team.team_id,
+    label: team.team_alias ? `${team.team_alias} (${team.team_id})` : team.team_id,
+  }));
+  return (
+    <Select items={items} value={value || null} onValueChange={(selected: string | null) => onChange(selected ?? "")}>
+      <SelectTrigger id={id} className="w-full" onBlur={onBlur}>
+        <SelectValue placeholder="Select a team" />
+      </SelectTrigger>
+      <SelectContent>
+        {items.map((item) => (
+          <SelectItem key={item.value} value={item.value}>
+            {item.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};