From 226170bf9d3ec8966fcf7e89981fe2d819ce26f0 Mon Sep 17 00:00:00 2001
From: Dimitris Spachos <dimitris.spachos@amazee.io>
Date: Thu, 9 Jul 2026 11:18:00 +0300
Subject: [PATCH] fix(ui): replace nested ternaries in alerting form with
 render helpers

The alerting settings form used nested ternary chains to pick the input
component per field type and to render the premium and stored-in-db cells.
Adding the List field type pushed the field-type chain past the point
where no-nested-ternary surfaced unsuppressed errors on CI.

Extract renderFieldInput, renderSettingCell, and renderStoredBadge, each
using early returns, which also removes the field-type block that was
duplicated across the premium and non-premium branches. Prune the now-stale
no-nested-ternary suppression for the file and refresh eslint-metrics.json
for the post-merge no-large-inline-object-arg count.
---
 ui/litellm-dashboard/eslint-metrics.json      |   2 +-
 ui/litellm-dashboard/eslint-suppressions.json |   3 -
 .../src/components/alerting/dynamic_form.tsx  | 153 +++++++++---------
 3 files changed, 74 insertions(+), 84 deletions(-)

diff --git a/ui/litellm-dashboard/eslint-metrics.json b/ui/litellm-dashboard/eslint-metrics.json
index ded6ab97e1e..37bad071081 100644
--- a/ui/litellm-dashboard/eslint-metrics.json
+++ b/ui/litellm-dashboard/eslint-metrics.json
@@ -1,7 +1,7 @@
 {
   "@typescript-eslint/no-explicit-any": 1982,
   "complexity": 128,
-  "local/no-large-inline-object-arg": 512,
+  "local/no-large-inline-object-arg": 519,
   "local/no-long-condition-chain": 233,
   "max-depth": 59,
   "no-console": 15
diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json
index fe8f182c106..ca0ceea4166 100644
--- a/ui/litellm-dashboard/eslint-suppressions.json
+++ b/ui/litellm-dashboard/eslint-suppressions.json
@@ -1309,9 +1309,6 @@
     }
   },
   "src/components/alerting/dynamic_form.tsx": {
-    "no-nested-ternary": {
-      "count": 4
-    },
     "no-restricted-imports": {
       "count": 1
     }
diff --git a/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx b/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
index 29dc398ee6a..33df174070e 100644
--- a/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
+++ b/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
@@ -60,6 +60,77 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
     return "";
   };
 
+  const renderFieldInput = (value: AlertingSetting): React.ReactNode => {
+    if (value.field_type === "Integer") {
+      return (
+        <InputNumber
+          step={1}
+          value={value.field_value}
+          onChange={(e) => handleInputChange(value.field_name, e)}
+          className="p-0"
+        />
+      );
+    }
+    if (value.field_type === "Boolean") {
+      return (
+        <Switch
+          checked={value.field_value}
+          onChange={(checked) => {
+            handleInputChange(value.field_name, checked);
+            form.setFieldsValue({ [value.field_name]: checked });
+          }}
+        />
+      );
+    }
+    if (value.field_type === "List") {
+      return (
+        <Input
+          value={listDisplayValue(value.field_value)}
+          onChange={(e) => handleInputChange(value.field_name, e.target.value)}
+          placeholder="e.g. 0.8, 0.85, 0.95"
+        />
+      );
+    }
+    return <Input value={value.field_value} onChange={(e) => handleInputChange(value.field_name, e)} />;
+  };
+
+  const renderSettingCell = (value: AlertingSetting): React.ReactNode => {
+    if (value.premium_field && !premiumUser) {
+      return (
+        <TableCell>
+          <Button className="flex items-center justify-center">
+            <a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
+              ✨ Enterprise Feature
+            </a>
+          </Button>
+        </TableCell>
+      );
+    }
+    return (
+      <Form.Item
+        name={value.field_name}
+        className="mb-0"
+        valuePropName={value.field_type === "Boolean" ? "checked" : "value"}
+      >
+        <TableCell>{renderFieldInput(value)}</TableCell>
+      </Form.Item>
+    );
+  };
+
+  const renderStoredBadge = (storedInDb: boolean | null): React.ReactNode => {
+    if (storedInDb === true) {
+      return (
+        <Badge icon={CheckCircleIcon} className="text-white">
+          In DB
+        </Badge>
+      );
+    }
+    if (storedInDb === false) {
+      return <Badge className="text-gray bg-white outline-solid">In Config</Badge>;
+    }
+    return <Badge className="text-gray bg-white outline-solid">Not Set</Badge>;
+  };
+
   return (
     <Form form={form} onFinish={onFinish} labelAlign="left">
       {alertingSettings.map((value, index) => (
@@ -77,86 +148,8 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
               {value.field_description}
             </p>
           </TableCell>
-          {value.premium_field ? (
-            premiumUser ? (
-              <Form.Item name={value.field_name}>
-                <TableCell>
-                  {value.field_type === "Integer" ? (
-                    <InputNumber
-                      step={1}
-                      value={value.field_value}
-                      onChange={(e) => handleInputChange(value.field_name, e)}
-                    />
-                  ) : value.field_type === "Boolean" ? (
-                    <Switch
-                      checked={value.field_value}
-                      onChange={(checked) => handleInputChange(value.field_name, checked)}
-                    />
-                  ) : value.field_type === "List" ? (
-                    <Input
-                      value={listDisplayValue(value.field_value)}
-                      onChange={(e) => handleInputChange(value.field_name, e.target.value)}
-                      placeholder="e.g. 0.8, 0.85, 0.95"
-                    />
-                  ) : (
-                    <Input value={value.field_value} onChange={(e) => handleInputChange(value.field_name, e)} />
-                  )}
-                </TableCell>
-              </Form.Item>
-            ) : (
-              <TableCell>
-                <Button className="flex items-center justify-center">
-                  <a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
-                    ✨ Enterprise Feature
-                  </a>
-                </Button>
-              </TableCell>
-            )
-          ) : (
-            <Form.Item
-              name={value.field_name}
-              className="mb-0"
-              valuePropName={value.field_type === "Boolean" ? "checked" : "value"}
-            >
-              <TableCell>
-                {value.field_type === "Integer" ? (
-                  <InputNumber
-                    step={1}
-                    value={value.field_value}
-                    onChange={(e) => handleInputChange(value.field_name, e)}
-                    className="p-0"
-                  />
-                ) : value.field_type === "Boolean" ? (
-                  <Switch
-                    checked={value.field_value}
-                    onChange={(checked) => {
-                      handleInputChange(value.field_name, checked);
-                      form.setFieldsValue({ [value.field_name]: checked });
-                    }}
-                  />
-                ) : value.field_type === "List" ? (
-                  <Input
-                    value={listDisplayValue(value.field_value)}
-                    onChange={(e) => handleInputChange(value.field_name, e.target.value)}
-                    placeholder="e.g. 0.8, 0.85, 0.95"
-                  />
-                ) : (
-                  <Input value={value.field_value} onChange={(e) => handleInputChange(value.field_name, e)} />
-                )}
-              </TableCell>
-            </Form.Item>
-          )}
-          <TableCell>
-            {value.stored_in_db == true ? (
-              <Badge icon={CheckCircleIcon} className="text-white">
-                In DB
-              </Badge>
-            ) : value.stored_in_db == false ? (
-              <Badge className="text-gray bg-white outline-solid">In Config</Badge>
-            ) : (
-              <Badge className="text-gray bg-white outline-solid">Not Set</Badge>
-            )}
-          </TableCell>
+          {renderSettingCell(value)}
+          <TableCell>{renderStoredBadge(value.stored_in_db)}</TableCell>
           <TableCell>
             <Icon icon={TrashIcon} color="red" onClick={() => handleResetField(value.field_name, index)}>
               Reset