fix: align config value validation with API

Author: CuteHorse

src/__tests__/integration/ProjectPage.test.tsx

@@ -99,6 +99,36 @@ describe('ProjectPage', () => {
     });
   });
 
+  it('shows backend validation message when parameter creation fails', async () => {
+    server.use(
+      http.put(
+        'http://localhost:5027/admin/projects/:projectId/environments/:envName/config-entries/:key',
+        () =>
+          HttpResponse.json(
+            { error: "Value must be 'true' or 'false' when contentType is 'boolean'." },
+            { status: 400 },
+          ),
+      ),
+    );
+
+    renderProjectPage('my-app');
+
+    const addParamButton = await screen.findByRole('button', { name: /add parameter/i });
+    fireEvent.click(addParamButton);
+
+    fireEvent.input(await screen.findByTestId('parameter-key-input'), {
+      target: { value: 'sdfgsdfg' },
+    });
+    fireEvent.input(await screen.findByTestId('parameter-value-input'), {
+      target: { value: 'not-a-boolean' },
+    });
+    fireEvent.click(screen.getByTestId('parameter-create-submit-button'));
+
+    expect(
+      await screen.findByText("Value must be 'true' or 'false' when contentType is 'boolean'."),
+    ).toBeInTheDocument();
+  });
+
   it('shows the Projects fallback when slug does not match any project', async () => {
     renderProjectPage('nonexistent-project');
 

src/__tests__/unit/project-param-create-form.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { isValidConfigEntryValue } from "../../features/project-param-edit/ProjectParamCreateForm";
+
+describe("isValidConfigEntryValue", () => {
+  it("matches backend value validation for config entry content types", () => {
+    expect(isValidConfigEntryValue("text", "hello")).toBe(true);
+    expect(isValidConfigEntryValue("text", "")).toBe(false);
+
+    expect(isValidConfigEntryValue("number", "42")).toBe(true);
+    expect(isValidConfigEntryValue("number", "1.5")).toBe(true);
+    expect(isValidConfigEntryValue("number", "abc")).toBe(false);
+    expect(isValidConfigEntryValue("number", "")).toBe(false);
+
+    expect(isValidConfigEntryValue("boolean", "true")).toBe(true);
+    expect(isValidConfigEntryValue("boolean", "false")).toBe(true);
+    expect(isValidConfigEntryValue("boolean", "")).toBe(false);
+    expect(isValidConfigEntryValue("boolean", "yes")).toBe(false);
+
+    expect(isValidConfigEntryValue("json", '{"enabled":true}')).toBe(true);
+    expect(isValidConfigEntryValue("json", "{bad")).toBe(false);
+  });
+});

src/features/project-param-edit/ProjectParamCreateForm.tsx

@@ -4,23 +4,54 @@ import { Select } from "../../shared/ui/select";
 import { VisualJsonEditor } from "../../shared/ui/visual-json-editor";
 import { FormField } from "../../widgets/auth-shell/FormField";
 
+type ConfigEntryContentType = "text" | "number" | "boolean" | "json";
+type ConfigEntryScope = "client" | "server" | "all";
+
 interface ProjectParamCreateFormProps {
   onCancel: () => void;
   onSubmit: (data: {
     key: string;
     value: string;
-    contentType: "text" | "number" | "boolean" | "json";
-    scope: "client" | "server" | "all";
+    contentType: ConfigEntryContentType;
+    scope: ConfigEntryScope;
     displayName: string;
     description: string;
   }) => void;
   isPending: boolean;
 }
 
+export function isValidConfigEntryValue(contentType: ConfigEntryContentType, value: string): boolean {
+  const trimmed = value.trim();
+
+  if (trimmed.length === 0) {
+    return false;
+  }
+
+  if (contentType === "text") {
+    return true;
+  }
+
+  try {
+    const parsed = JSON.parse(trimmed) as unknown;
+
+    if (contentType === "json") {
+      return true;
+    }
+
+    if (contentType === "number") {
+      return typeof parsed === "number" && Number.isFinite(parsed);
+    }
+
+    return typeof parsed === "boolean";
+  } catch {
+    return false;
+  }
+}
+
 export function ProjectParamCreateForm(props: ProjectParamCreateFormProps) {
   const [cfgKey, setCfgKey] = createSignal("");
   const [cfgValue, setCfgValue] = createSignal("");
-  const [cfgType, setCfgType] = createSignal<"text" | "number" | "boolean" | "json">("text");
+  const [cfgType, setCfgType] = createSignal<ConfigEntryContentType>("text");
   const [cfgDisplayName, setCfgDisplayName] = createSignal("");
   const [cfgDescription, setCfgDescription] = createSignal("");
 
@@ -30,21 +61,7 @@ export function ProjectParamCreateForm(props: ProjectParamCreateFormProps) {
     }
   };
 
-  const isValidJson = (str: string): boolean => {
-    try {
-      JSON.parse(str);
-      return true;
-    } catch {
-      return false;
-    }
-  };
-
-  const isAddInvalid = () => {
-    if (cfgType() === "json") {
-      return !isValidJson(cfgValue());
-    }
-    return false;
-  };
+  const isAddInvalid = () => !isValidConfigEntryValue(cfgType(), cfgValue());
 
   const handleSubmit = (e: Event) => {
     e.preventDefault();
@@ -92,7 +109,7 @@ export function ProjectParamCreateForm(props: ProjectParamCreateFormProps) {
             <Select
               value={cfgType()}
               onChange={(val: string) => {
-                setCfgType(val as "text" | "number" | "boolean" | "json");
+                setCfgType(val as ConfigEntryContentType);
                 setCfgValue("");
               }}
               options={["text", "number", "boolean", "json"]}

src/pages/projects/ProjectPage.tsx

@@ -39,6 +39,9 @@ import type {
   Project
 } from "../../types";
 
+const errorMessage = (caught: unknown, fallback: string) =>
+  caught instanceof Error && caught.message ? caught.message : fallback;
+
 export default function ProjectPage() {
   const params = useParams<{ slug: string }>();
   const queryClient = useQueryClient();
@@ -185,7 +188,7 @@ export default function ProjectPage() {
       setShowConfigForm(false);
       addToast(MSG.PARAM_CREATED, "success");
     },
-    onError: () => addToast(MSG.PARAM_CREATE_FAILED, "error")
+    onError: error => addToast(errorMessage(error, MSG.PARAM_CREATE_FAILED), "error")
   }));
 
   // Param deletion mutation
@@ -251,7 +254,7 @@ export default function ProjectPage() {
       setEditingEntry(null);
       addToast(MSG.PARAM_UPDATED, "success");
     },
-    onError: () => addToast(MSG.PARAM_UPDATE_FAILED, "error")
+    onError: error => addToast(errorMessage(error, MSG.PARAM_UPDATE_FAILED), "error")
   }));
 
   // Bulk import callback
@@ -293,7 +296,7 @@ export default function ProjectPage() {
       setEditingEntry(entry);
       addToast(MSG.PARAM_ROLLED_BACK, "success");
     },
-    onError: () => addToast(MSG.PARAM_ROLLBACK_FAILED, "error")
+    onError: error => addToast(errorMessage(error, MSG.PARAM_ROLLBACK_FAILED), "error")
   }));
 
   const handleRollbackVersion = (version: ConfigEntryVersion) => {