fix(admin): show env values and fix env-override locking in system settings

- Show the actual value for non-secret env-overridden settings instead of
  "(set by environment variable)". Redact secrets server-side regardless of
  source so raw env-sourced secrets (e.g. MAPTILER_KEY) no longer reach the
  browser.
- Derive the panel's "env overrides" badge and Save-disabled state from the
  visible settings only, so a setting hidden by its showWhen predicate (e.g.
  the MapTiler key while the provider is self-hosted) no longer flags an
  otherwise-editable field.
- Remove the stray Accordion ::before divider line floating above each card.

Author: Medformatik

apps/api/src/routes/__tests__/admin-settings.test.ts

@@ -147,6 +147,35 @@ describe("GET /admin/settings", () => {
     selectResolveWith = [];
   });
 
+  it("redacts env-sourced secrets but exposes non-secret env values", async () => {
+    const origKey = process.env.MAPTILER_KEY;
+    const origLocale = process.env.DEFAULT_LOCALE;
+    process.env.MAPTILER_KEY = "super-secret-key";
+    process.env.DEFAULT_LOCALE = "de";
+
+    try {
+      const res = await app.inject({ method: "GET", url: "/admin/settings" });
+      const body = res.json();
+
+      // An env-sourced secret is flagged as set + locked, but its raw value
+      // must never reach the browser.
+      const map = body.groups.find((g: { id: string }) => g.id === "map");
+      const apiKey = map.settings.find((s: { key: string }) => s.key === "maptilerApiKey");
+      expect(apiKey).toMatchObject({ source: "env", envOverride: true, secret: true });
+      expect(apiKey.value).not.toBe("super-secret-key");
+
+      // A non-secret env override exposes its real value so the UI can show it.
+      const general = body.groups.find((g: { id: string }) => g.id === "general");
+      const locale = general.settings.find((s: { key: string }) => s.key === "defaultLocale");
+      expect(locale).toMatchObject({ value: "de", source: "env", envOverride: true });
+    } finally {
+      if (origKey === undefined) delete process.env.MAPTILER_KEY;
+      else process.env.MAPTILER_KEY = origKey;
+      if (origLocale === undefined) delete process.env.DEFAULT_LOCALE;
+      else process.env.DEFAULT_LOCALE = origLocale;
+    }
+  });
+
   it("rejects unauthenticated requests with 401", async () => {
     mockRequireAdmin.mockRejectedValueOnce(
       Object.assign(new Error("Authentication required"), { statusCode: 401 }),

apps/api/src/routes/admin-settings.ts

@@ -374,8 +374,11 @@ export async function resolveSettings(): Promise<SettingsGroup[]> {
       source = "default";
     }
 
-    if (def.secret && source !== "env" && value !== "") {
-      value = source === "database" ? "***" : "";
+    // Never send a raw secret to the client, whatever its source. "***" is a
+    // "configured" sentinel so the UI can show the field as set + locked
+    // without exposing the value (the real value stays in env / the DB).
+    if (def.secret && value !== "") {
+      value = "***";
     }
 
     if (!grouped[def.group]) grouped[def.group] = [];

apps/web/src/components/admin/settings/SystemSettings.tsx

@@ -215,20 +215,26 @@ function SettingField({
     );
   }
 
+  // Secrets resolved from an env var are redacted server-side ("***") and must
+  // never be displayed — show a readable note instead of masked dots. Every
+  // other field (including non-secret env overrides) shows its real value so
+  // the operator can see what's actually in effect.
+  const isEnvSecret = setting.envOverride && setting.secret;
+  const displayValue = isEnvSecret ? "(set by environment variable)" : String(value ?? "");
+  const inputType = isEnvSecret
+    ? "text"
+    : setting.secret && !showSecret
+      ? "password"
+      : setting.type === "number"
+        ? "number"
+        : "text";
+
   return (
     <TextField
       label={setting.label}
       size="small"
-      type={
-        setting.secret && !showSecret ? "password" : setting.type === "number" ? "number" : "text"
-      }
-      value={
-        disabled
-          ? setting.envOverride
-            ? "(set by environment variable)"
-            : String(value ?? "")
-          : String(value ?? "")
-      }
+      type={inputType}
+      value={displayValue}
       disabled={disabled}
       helperText={setting.description}
       onChange={(e) =>
@@ -304,8 +310,12 @@ function SettingsGroupPanel({
     },
   });
 
-  const hasEnvOverrides = group.settings.some((s) => s.envOverride);
   const visibleSettings = group.settings.filter((s) => isVisible(s, localValues));
+  // Reflect only the settings the operator can actually see: a setting hidden
+  // by its showWhen predicate (e.g. the MapTiler key while the provider is
+  // self-hosted) must not flag the whole panel as env-overridden, or the badge
+  // contradicts an otherwise-editable field.
+  const hasEnvOverrides = visibleSettings.some((s) => s.envOverride);
 
   return (
     <Accordion
@@ -318,6 +328,10 @@ function SettingsGroupPanel({
       // specificity to override every corner on every panel; without the
       // double-class scope our plain `&` rule loses the cascade.
       sx={{
+        // MUI draws a top divider via an ::before pseudo-element meant for
+        // flush-stacked accordions. With our spaced-out outlined cards it just
+        // floats as a stray line above each one — remove it.
+        "&::before": { display: "none" },
         "&.MuiAccordion-rounded": {
           borderRadius: 1,
           "&:first-of-type, &:last-of-type": { borderRadius: 1 },
@@ -443,7 +457,7 @@ function SettingsGroupPanel({
                 save.isPending ? <CircularProgress size={14} color="inherit" /> : <SaveIcon />
               }
               onClick={() => save.mutate()}
-              disabled={save.isPending || group.settings.every((s) => s.envOverride)}
+              disabled={save.isPending || visibleSettings.every((s) => s.envOverride)}
             >
               Save {group.label}
             </Button>

apps/web/src/components/admin/settings/__tests__/SystemSettings.test.tsx

@@ -0,0 +1,146 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createQueryWrapper, render, screen } from "@/test";
+
+vi.mock("@/lib/EnvProvider", () => ({
+  useEnv: () => ({ apiUrl: "http://test.local" }),
+}));
+
+const fetchMock = vi.fn();
+vi.stubGlobal("fetch", fetchMock);
+
+import { SystemSettings } from "../SystemSettings";
+
+interface TestSetting {
+  group: string;
+  key: string;
+  label: string;
+  description?: string;
+  type: string;
+  options?: string[];
+  secret: boolean;
+  value: unknown;
+  source: "default" | "database" | "env";
+  envVar?: string;
+  envOverride: boolean;
+  showWhen?: { key: string; equals: unknown };
+}
+
+// The panel renders expanded only for the "general" group, so every fixture
+// uses that id to make its fields (not just the summary badge) queryable.
+function mockGroup(label: string, settings: TestSetting[]) {
+  fetchMock.mockResolvedValue({
+    ok: true,
+    json: async () => ({ groups: [{ id: "general", label, settings }] }),
+  });
+}
+
+afterEach(() => {
+  fetchMock.mockReset();
+});
+
+describe("SystemSettings env-override handling", () => {
+  it("hides the env-overrides badge when the only override is hidden by showWhen", async () => {
+    // Mirrors the Map panel: Style Provider is DB-sourced and visible, while
+    // the env-overridden MapTiler key is hidden because the provider isn't
+    // "maptiler". The panel must not claim an env override the operator can't see.
+    mockGroup("Map", [
+      {
+        group: "map",
+        key: "styleProvider",
+        label: "Style Provider",
+        type: "select",
+        options: ["maptiler", "self-hosted", "custom"],
+        secret: false,
+        value: "self-hosted",
+        source: "database",
+        envVar: "MAP_STYLE_PROVIDER",
+        envOverride: false,
+      },
+      {
+        group: "map",
+        key: "maptilerApiKey",
+        label: "MapTiler API Key",
+        type: "string",
+        secret: true,
+        value: "***",
+        source: "env",
+        envVar: "MAPTILER_KEY",
+        envOverride: true,
+        showWhen: { key: "styleProvider", equals: "maptiler" },
+      },
+    ]);
+
+    render(<SystemSettings />, { wrapper: createQueryWrapper() });
+
+    await screen.findByRole("button", { name: /save map/i });
+    expect(screen.queryByText("env overrides")).toBeNull();
+  });
+
+  it("shows the env-overrides badge and disables a visible env-overridden field", async () => {
+    mockGroup("Data-Use Policy", [
+      {
+        group: "policy",
+        key: "allowGreyArea",
+        label: "Allow grey-area sources",
+        type: "boolean",
+        secret: false,
+        value: true,
+        source: "env",
+        envVar: "OPENMAPX_ALLOW_GREY_AREA",
+        envOverride: true,
+      },
+    ]);
+
+    render(<SystemSettings />, { wrapper: createQueryWrapper() });
+
+    await screen.findByText("Allow grey-area sources");
+    expect(screen.queryByText("env overrides")).not.toBeNull();
+    expect((screen.getByRole("switch") as HTMLInputElement).disabled).toBe(true);
+  });
+
+  it("displays the actual value of a non-secret env-overridden setting", async () => {
+    mockGroup("General", [
+      {
+        group: "general",
+        key: "instanceUrl",
+        label: "Instance URL",
+        type: "string",
+        secret: false,
+        value: "https://maps.example.com",
+        source: "env",
+        envVar: "PUBLIC_URL",
+        envOverride: true,
+      },
+    ]);
+
+    render(<SystemSettings />, { wrapper: createQueryWrapper() });
+
+    const input = (await screen.findByLabelText("Instance URL")) as HTMLInputElement;
+    expect(input.value).toBe("https://maps.example.com");
+    expect(input.disabled).toBe(true);
+  });
+
+  it("does not render a secret env value in the field", async () => {
+    mockGroup("Email", [
+      {
+        group: "email",
+        key: "smtpPassword",
+        label: "Password",
+        type: "string",
+        secret: true,
+        value: "***",
+        source: "env",
+        envVar: "SMTP_PASS",
+        envOverride: true,
+      },
+    ]);
+
+    render(<SystemSettings />, { wrapper: createQueryWrapper() });
+
+    const input = (await screen.findByLabelText("Password")) as HTMLInputElement;
+    expect(input.disabled).toBe(true);
+    expect(input.value).not.toBe("***");
+  });
+});