admin(settings): inline-edit ${VAR:default} env placeholders

Sam reported that on a Docker deploy (settings.json.docker, ~122 env
placeholders) the new form view showed only labels and no editable
controls — every value rendered as a read-only EnvPill, so editing
was only possible via Raw mode. The frontend-admin-tests workflow
uses settings.json.template (~28 env placeholders) and the keys it
asserts against (title, requireAuthentication, sso.issuer) still
rendered editable widgets there, so the regression was silent.

EnvPill is now an inline <input> over the placeholder's default
value. On change it emits "\${VAR:newDefault}" via jsoncEdit, so
the surrounding placeholder syntax, key order, and comments are
preserved end-to-end.

Tests:
- env-pill spec flipped from "read-only assertion" to an editing
  round-trip (raw shows \${SSO_ISSUER:edited}).
- new docker-like spec seeds a settings.json where every value is
  a "\${VAR:default}" placeholder and asserts each visible env
  control is an <input> + editing one persists. Protects against
  future "form view degrades on env-heavy configs" regressions.

i18n: tooltip and aria strings updated; new default_label and
input_aria keys.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: JohnMcLear

admin/src/App.css

@@ -203,7 +203,6 @@ textarea.settings:focus {
   border-radius: 12px;
   padding: 2px 10px;
   font-size: 13px;
-  cursor: help;
 }
 .settings-widget-env-icon {
   font-style: normal;
@@ -213,10 +212,26 @@ textarea.settings:focus {
   font-family: "Fira Code", monospace;
   font-weight: 600;
 }
-.settings-widget-env code {
-  background: transparent;
-  color: #804;
+.settings-widget-env-default-label {
+  color: #557;
+  font-size: 12px;
+  text-transform: lowercase;
+}
+.settings-widget-env-default-input {
+  background: white;
+  border: 1px solid #ccd;
+  border-radius: 6px;
+  padding: 1px 6px;
   font-family: "Fira Code", monospace;
+  font-size: 13px;
+  color: #804;
+  min-width: 80px;
+  max-width: 240px;
+  width: auto;
+}
+.settings-widget-env-default-input:focus {
+  outline: 2px solid var(--accent, #2b8a3e);
+  outline-offset: 1px;
 }
 
 /* Radix switch (boolean) */

admin/src/components/settings/JsoncNode.tsx

@@ -40,7 +40,15 @@ const renderLeaf = (
   if (node.type === 'string') {
     const raw = text.slice(node.offset, node.offset + node.length);
     const env = matchEnvPlaceholder(raw);
-    if (env) return <EnvPill placeholder={env} path={path} />;
+    if (env) {
+      return (
+        <EnvPill
+          placeholder={env}
+          path={path}
+          onChange={(d) => onEdit(path, `\${${env.variable}:${d}}`)}
+        />
+      );
+    }
     return (
       <StringInput
         value={String(node.value)}

admin/src/components/settings/widgets/EnvPill.tsx

@@ -1,28 +1,57 @@
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { JSONPath } from 'jsonc-parser';
 import type { EnvPlaceholder } from '../envPill';
 
 type Props = {
   placeholder: EnvPlaceholder;
   path: JSONPath;
+  onChange: (newDefault: string) => void;
 };
 
-export const EnvPill = ({ placeholder, path }: Props) => {
+const sanitize = (s: string) => s.replace(/[}]/g, '');
+
+export const EnvPill = ({ placeholder, path, onChange }: Props) => {
   const { t } = useTranslation();
+  const initial = placeholder.defaultValue ?? '';
+  const [draft, setDraft] = useState(initial);
+  const focused = useRef(false);
+
+  // Sync local draft from upstream (server canonicalisation, raw-mode edit)
+  // only while the input isn't focused so we don't trample mid-typing.
+  useEffect(() => {
+    if (!focused.current) setDraft(initial);
+  }, [initial]);
+
+  const id = `field-${path.join('.')}`;
+  const testid = `env-${path.join('.')}`;
+
   return (
     <span
       className="settings-widget settings-widget-env"
-      role="note"
-      title={t('admin_settings.env_pill.tooltip')}
-      data-testid={`env-${path.join('.')}`}
+      title={t('admin_settings.env_pill.tooltip', { variable: placeholder.variable })}
     >
       <span className="settings-widget-env-icon" aria-hidden>ⓔ</span>
       <span className="settings-widget-env-name">{placeholder.variable}</span>
-      {placeholder.defaultValue !== null && (
-        <span className="settings-widget-env-default">
-          {' '}default: <code>{placeholder.defaultValue}</code>
-        </span>
-      )}
+      <span className="settings-widget-env-default-label" aria-hidden>
+        {t('admin_settings.env_pill.default_label')}
+      </span>
+      <input
+        id={id}
+        data-testid={testid}
+        className="settings-widget-env-default-input"
+        type="text"
+        value={draft}
+        spellCheck={false}
+        aria-label={t('admin_settings.env_pill.input_aria', { variable: placeholder.variable })}
+        onFocus={() => { focused.current = true; }}
+        onBlur={() => { focused.current = false; }}
+        onChange={e => {
+          const v = sanitize(e.target.value);
+          setDraft(v);
+          onChange(v);
+        }}
+      />
     </span>
   );
 };

src/locales/en.json

@@ -49,7 +49,9 @@
   "admin_settings.section.general": "General",
   "admin_settings.parse_error.title": "Cannot parse settings.json",
   "admin_settings.parse_error.cta": "Switch to raw to edit",
-  "admin_settings.env_pill.tooltip": "Environment variable. Edit in raw mode.",
+  "admin_settings.env_pill.tooltip": "Reads from the {{variable}} environment variable. The value below is used when {{variable}} is unset.",
+  "admin_settings.env_pill.default_label": "default",
+  "admin_settings.env_pill.input_aria": "Default value for {{variable}}",
   "admin_settings.page-title": "Settings - Etherpad",
 
   "update.banner.title": "Update available",

src/tests/frontend-new/admin-spec/adminsettings.spec.ts

@@ -232,16 +232,90 @@ test.describe('admin settings',()=> {
     await expect(page.locator('.ToastRootSuccess')).toBeVisible({timeout: 5000});
   });
 
-  test('env placeholder renders as read-only pill (no input)', async ({page}) => {
+  test('env placeholder default value is editable inline and persists to raw', async ({page}) => {
     await page.goto('http://localhost:9001/admin/settings');
-    // Form is the default; wait for settings to load before interacting.
     await page.waitForSelector('[data-testid="settings-form-view"]', {timeout: 30000});
-    // settings.json ships "${SSO_ISSUER:http://localhost:9001}" on sso.issuer.
-    // Locate the sso group, open it, then find the env pill.
-    const pill = page.getByTestId('env-sso.issuer').first();
-    await expect(pill).toBeVisible({timeout: 10000});
-    // No <input> exists for that path
-    await expect(page.getByTestId('field-sso.issuer')).toHaveCount(0);
+
+    // Grab the original raw content so we can restore at the end.
+    await page.getByTestId('mode-toggle-raw').click();
+    const raw = page.getByTestId('settings-raw-textarea');
+    await expect(raw).toBeVisible({timeout: 10000});
+    const original = await raw.inputValue();
+
+    // Switch to form and edit sso.issuer's env-placeholder default inline.
+    await page.getByTestId('mode-toggle-form').click();
+    const input = page.getByTestId('env-sso.issuer').first();
+    await expect(input).toBeVisible({timeout: 10000});
+    // Sanity: this IS the editable <input> (env pill no longer read-only).
+    expect(await input.evaluate((el) => el.tagName.toLowerCase())).toBe('input');
+    await input.fill('http://edited.example:9001');
+    await page.getByTestId('save-settings-button').click();
+    await expect(page.locator('.ToastRootSuccess')).toBeVisible({timeout: 5000});
+
+    // Reload and confirm the raw JSON now embeds the new default.
+    await page.reload();
+    await page.waitForSelector('[data-testid="settings-form-view"]', {timeout: 30000});
+    await page.getByTestId('mode-toggle-raw').click();
+    const after = await page.getByTestId('settings-raw-textarea').inputValue();
+    expect(after).toContain('${SSO_ISSUER:http://edited.example:9001}');
+
+    // Restore.
+    await page.getByTestId('settings-raw-textarea').fill(original);
+    await page.getByTestId('save-settings-button').click();
+    await expect(page.locator('.ToastRootSuccess')).toBeVisible({timeout: 5000});
+  });
+
+  test('docker-like env-placeholder-heavy settings.json still has editable controls', async ({page}) => {
+    // Regression: a settings.json where every value is "${VAR:default}"
+    // (the shape of settings.json.docker) must NOT degrade the form into a
+    // read-only viewer. Editing any env default round-trips through save.
+    await page.goto('http://localhost:9001/admin/settings');
+    await page.waitForSelector('[data-testid="settings-form-view"]', {timeout: 30000});
+
+    await page.getByTestId('mode-toggle-raw').click();
+    const raw = page.getByTestId('settings-raw-textarea');
+    await expect(raw).toBeVisible({timeout: 10000});
+    const original = await raw.inputValue();
+
+    // Replace with a minimal env-placeholder-heavy document.
+    const envHeavy = JSON.stringify({
+      title: '${TITLE:Etherpad-EnvHeavy}',
+      port: '${PORT:9001}',
+      ip: '${IP:0.0.0.0}',
+      requireAuthentication: '${REQUIRE_AUTHENTICATION:false}',
+      enableAdminUITests: true,
+      users: {admin: {password: 'changeme1', is_admin: true}},
+    });
+    await raw.fill(envHeavy);
+    await page.getByTestId('save-settings-button').click();
+    await expect(page.locator('.ToastRootSuccess')).toBeVisible({timeout: 5000});
+
+    await page.reload();
+    await page.waitForSelector('[data-testid="settings-form-view"]', {timeout: 30000});
+
+    // Every visible env-pill row must expose an editable <input>, not a
+    // read-only span.
+    for (const id of ['env-title', 'env-port', 'env-ip', 'env-requireAuthentication']) {
+      const el = page.getByTestId(id).first();
+      await expect(el).toBeVisible({timeout: 10000});
+      expect(await el.evaluate((n) => n.tagName.toLowerCase())).toBe('input');
+    }
+
+    // Editing one of them round-trips.
+    await page.getByTestId('env-title').fill('Etherpad-EnvEdit');
+    await page.getByTestId('save-settings-button').click();
+    await expect(page.locator('.ToastRootSuccess')).toBeVisible({timeout: 5000});
+
+    await page.reload();
+    await page.waitForSelector('[data-testid="settings-form-view"]', {timeout: 30000});
+    await page.getByTestId('mode-toggle-raw').click();
+    const after = await page.getByTestId('settings-raw-textarea').inputValue();
+    expect(after).toContain('${TITLE:Etherpad-EnvEdit}');
+
+    // Restore original.
+    await page.getByTestId('settings-raw-textarea').fill(original);
+    await page.getByTestId('save-settings-button').click();
+    await expect(page.locator('.ToastRootSuccess')).toBeVisible({timeout: 5000});
   });
 
   test('toggling form on broken raw JSON shows parse error banner', async ({page}) => {