fix(ui): save routing groups as list

ui/litellm-dashboard/src/components/router_settings/index.test.tsx

@@ -8,13 +8,13 @@
   return {
     ...actual,
     Select: Object.assign(
       ({ value, onChange, children }: any) => (
         <select data-testid="strategy-select" value={value ?? ""} onChange={(e) => onChange(e.target.value)}>
           {children}
         </select>
       ),
       {
         Option: ({ value, children }: any) => <option value={value}>{children}</option>,
       },
     ),
   };
@@ -34,6 +34,7 @@
     routing_strategy: "simple-shuffle",
     num_retries: 3,
     timeout: 30,
+    routing_groups: [],
   },
 };
 
@@ -134,6 +135,34 @@
     );
   });
 
+  it("should send routing_groups as a list when saving load balancing settings", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<RouterSettings {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("textbox", { name: /routing_groups/i })).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole("button", { name: /save changes/i }));
+
+    expect(setCallbacksCall).toHaveBeenCalledWith(
+      "test-token",
+      expect.objectContaining({
+        router_settings: expect.objectContaining({
+          routing_groups: [],
+        }),
+      }),
+    );
+    expect(setCallbacksCall).not.toHaveBeenCalledWith(
+      "test-token",
+      expect.objectContaining({
+        router_settings: expect.objectContaining({
+          routing_groups: "[]",
+        }),
+      }),
+    );
+  });
+
   it("should show a success notification after saving", async () => {
     const user = userEvent.setup();
     renderWithProviders(<RouterSettings {...defaultProps} />);

ui/litellm-dashboard/src/components/router_settings/index.tsx

@@ -8,7 +8,7 @@
   accessToken: string | null;
   userRole: string | null;
   userID: string | null;
   modelData: any;
 }
 
 interface routingStrategyArgs {
@@ -23,7 +23,7 @@
     enableTagFiltering: false,
   });
   const [availableRoutingStrategies, setAvailableRoutingStrategies] = useState<string[]>([]);
   const [routerFieldsMetadata, setRouterFieldsMetadata] = useState<{ [key: string]: any }>({});
   const [routingStrategyDescriptions, setRoutingStrategyDescriptions] = useState<{ [key: string]: string }>({});
 
   useEffect(() => {
@@ -48,8 +48,8 @@
       console.log("router settings from API", data);
       if (data.fields) {
         // Build metadata map for easy lookup
         const fieldsMap: { [key: string]: any } = {};
         data.fields.forEach((field: any) => {
           fieldsMap[field.field_name] = {
             ui_field_name: field.ui_field_name,
             field_description: field.field_description,
@@ -60,7 +60,7 @@
         setRouterFieldsMetadata(fieldsMap);
 
         // Extract routing strategies from the routing_strategy field's options
         const routingStrategyField = data.fields.find((field: any) => field.field_name === "routing_strategy");
         if (routingStrategyField?.options) {
           setAvailableRoutingStrategies(routingStrategyField.options);
         }
@@ -71,7 +71,7 @@
         }
 
         // Set enable_tag_filtering value
         const tagFilteringField = data.fields.find((field: any) => field.field_name === "enable_tag_filtering");
         if (tagFilteringField?.field_value !== null && tagFilteringField?.field_value !== undefined) {
           setFormValue((prev) => ({
             ...prev,
@@ -91,7 +91,7 @@
     console.log("router_settings", router_settings);
 
     const numberKeys = new Set(["allowed_fails", "cooldown_time", "num_retries", "timeout", "retry_after"]);
-    const jsonKeys = new Set(["model_group_alias", "retry_policy"]);
+    const jsonKeys = new Set(["model_group_alias", "retry_policy", "routing_groups"]);
 
     const parseInputValue = (key: string, raw: string | undefined, fallback: unknown) => {
       if (raw === undefined) return fallback;