From caa1bc405ba7cd67a6f1d3b293dc20016b6fbda6 Mon Sep 17 00:00:00 2001
From: Ayushi Gupta <ayushigupta36881@gmail.com>
Date: Mon, 4 May 2026 02:42:52 +0530
Subject: [PATCH 1/2] admin: improve settings editor UX and restore comments
 #7603

---
 admin/src/App.css                |  22 ++++
 admin/src/pages/SettingsPage.tsx | 167 ++++++++++++++++++++++---------
 2 files changed, 142 insertions(+), 47 deletions(-)

diff --git a/admin/src/App.css b/admin/src/App.css
index e69de29bb2d..378c4265a24 100644
--- a/admin/src/App.css
+++ b/admin/src/App.css
@@ -0,0 +1,22 @@
+/* src/admin/App.css */
+
+.settings {
+  font-family: "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  tab-size: 4; /* Prevents the 'messy' look of inconsistent spacing */
+  background-color: #1e1e1e; /* Standard 'Dark Mode' editor color */
+  color: #d4d4d4;
+  padding: 20px;
+  border-radius: 4px;
+  border: 1px solid #333;
+  width: 100%;
+  min-height: 500px;
+  resize: vertical;
+  white-space: pre; /* Essential for preserving the line structure */
+  overflow-x: auto;
+}
+
+.settings:focus {
+  outline: 2px solid #007acc; /* Give it that 'VS Code' focus feel */
+}
diff --git a/admin/src/pages/SettingsPage.tsx b/admin/src/pages/SettingsPage.tsx
index 6c2f9bf333c..967e754152e 100644
--- a/admin/src/pages/SettingsPage.tsx
+++ b/admin/src/pages/SettingsPage.tsx
@@ -1,50 +1,123 @@
-import {useStore} from "../store/store.ts";
-import {isJSONClean, cleanComments} from "../utils/utils.ts";
-import {Trans} from "react-i18next";
-import {IconButton} from "../components/IconButton.tsx";
-import {RotateCw, Save} from "lucide-react";
+import { useStore } from "../store/store.ts";
+import { isJSONClean } from "../utils/utils.ts";
+import { Trans } from "react-i18next";
+import { IconButton } from "../components/IconButton.tsx";
+import { RotateCw, Save, AlignLeft } from "lucide-react"; // Added AlignLeft icon
 
-export const SettingsPage = ()=>{
-  const settingsSocket = useStore(state=>state.settingsSocket)
-  const settings = cleanComments(useStore(state=>state.settings))
+export const SettingsPage = () => {
+  const settingsSocket = useStore(state => state.settingsSocket)
+  const settings = useStore(state => state.settings)
 
-  return <div className="settings-page">
-    <h1><Trans i18nKey="admin_settings.current"/></h1>
-    <textarea value={settings} className="settings" onChange={v => {
-      useStore.getState().setSettings(v.target.value)
-    }}/>
-    <div className="settings-button-bar">
-      <IconButton className="settingsButton" icon={<Save/>}
-            title={<Trans i18nKey="admin_settings.current_save.value"/>} onClick={() => {
-        if (isJSONClean(settings!)) {
-          // JSON is clean so emit it to the server
-          settingsSocket!.emit('saveSettings', settings!);
-          useStore.getState().setToastState({
-            open: true,
-            title: "Successfully saved settings",
-            success: true
-          })
-        } else {
-          useStore.getState().setToastState({
-            open: true,
-            title: "Error saving settings",
-            success: false
-          })
-        }
-      }}/>
-      <IconButton className="settingsButton" icon={<RotateCw/>}
-            title={<Trans i18nKey="admin_settings.current_restart.value"/>} onClick={() => {
-        settingsSocket!.emit('restartServer');
-      }}/>
-    </div>
-    <div className="separator"/>
-    <div className="settings-button-bar">
-      <a rel="noopener noreferrer" target="_blank"
-       href="https://github.com/ether/etherpad-lite/wiki/Example-Production-Settings.JSON"><Trans
-        i18nKey="admin_settings.current_example-prod"/></a>
-      <a rel="noopener noreferrer" target="_blank"
-       href="https://github.com/ether/etherpad-lite/wiki/Example-Development-Settings.JSON"><Trans
-        i18nKey="admin_settings.current_example-devel"/></a>
+  // Handlers for better UX
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const start = e.currentTarget.selectionStart;
+      const end = e.currentTarget.selectionEnd;
+      const value = e.currentTarget.value;
+      
+      // Insert 2 spaces (Etherpad standard)
+      const newValue = value.substring(0, start) + "  " + value.substring(end);
+      useStore.getState().setSettings(newValue);
+      
+      // Reset cursor position (needed after state update)
+      setTimeout(() => {
+        e.currentTarget.selectionStart = e.currentTarget.selectionEnd = start + 2;
+      }, 0);
+    }
+  };
+
+  const prettifyJSON = () => {
+    try {
+      // Note: This only works if there are NO comments. 
+      const obj = JSON.parse(settings!);
+      const formatted = JSON.stringify(obj, null, 2);
+      useStore.getState().setSettings(formatted);
+    } catch (e) {
+      alert("Cannot prettify: JSON has syntax errors or comments.");
+    }
+  };
+
+  return (
+    <div className="settings-page">
+      <h1><Trans i18nKey="admin_settings.current" /></h1>
+      
+      <div className="editor-container" style={{ border: '1px solid #333', borderRadius: '4px', overflow: 'hidden' }}>
+        <textarea
+          value={settings}
+          className="settings"
+          spellCheck={false}
+          onKeyDown={handleKeyDown} // Tab key support
+          onChange={v => useStore.getState().setSettings(v.target.value)}
+          style={{
+            fontFamily: '"Fira Code", monospace',
+            width: '100%',
+            height: '500px',
+            padding: '15px',
+            backgroundColor: '#1e1e1e',
+            color: '#d4d4d4',
+            lineHeight: '1.5',
+            border: 'none',
+            outline: 'none',
+            resize: 'vertical'
+          }}
+        />
+      </div>
+
+      <div className="settings-button-bar">
+        <IconButton 
+          className="settingsButton" 
+          icon={<Save />}
+          title={<Trans i18nKey="admin_settings.current_save.value" />} 
+          onClick={() => {
+            try {
+              if (isJSONClean(settings!)) {
+                settingsSocket!.emit('saveSettings', settings!);
+                useStore.getState().setToastState({
+                  open: true,
+                  title: "Successfully saved settings",
+                  success: true
+                });
+              } else {
+                throw new Error();
+              }
+            } catch (err) {
+              useStore.getState().setToastState({
+                open: true,
+                title: "Syntax Error: Check for missing commas or braces",
+                success: false
+              });
+            }
+          }} 
+        />
+        
+        {/* NEW: Prettify Button */}
+        <IconButton 
+          className="settingsButton" 
+          icon={<AlignLeft />} 
+          title="Prettify JSON" 
+          onClick={prettifyJSON} 
+        />
+
+        <IconButton 
+          className="settingsButton" 
+          icon={<RotateCw />}
+          title={<Trans i18nKey="admin_settings.current_restart.value" />} 
+          onClick={() => {
+            settingsSocket!.emit('restartServer');
+          }} 
+        />
+      </div>
+      
+      <div className="separator" />
+      <div className="settings-button-bar">
+        <a rel="noopener noreferrer" target="_blank" href="https://github.com/ether/etherpad-lite/wiki/Example-Production-Settings.JSON">
+          <Trans i18nKey="admin_settings.current_example-prod" />
+        </a>
+        <a rel="noopener noreferrer" target="_blank" href="https://github.com/ether/etherpad-lite/wiki/Example-Development-Settings.JSON">
+          <Trans i18nKey="admin_settings.current_example-devel" />
+        </a>
+      </div>
     </div>
-  </div>
-}
+  )
+}
\ No newline at end of file

From 868e6071817f5a49e9adbfe01e29b07bd68bc58e Mon Sep 17 00:00:00 2001
From: Ayushi Gupta <ayushigupta36881@gmail.com>
Date: Tue, 5 May 2026 04:22:17 +0530
Subject: [PATCH 2/2] admin: implement test json dry-run and address all code
 review feedback

---
 admin/src/App.css                |  26 +++--
 admin/src/pages/SettingsPage.tsx | 167 +++++++++++++++++++------------
 2 files changed, 114 insertions(+), 79 deletions(-)

diff --git a/admin/src/App.css b/admin/src/App.css
index 378c4265a24..d9b4b0dc9d8 100644
--- a/admin/src/App.css
+++ b/admin/src/App.css
@@ -1,22 +1,20 @@
-/* src/admin/App.css */
-
+/* Enhanced Admin Settings Editor Styles */
 .settings {
   font-family: "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
   font-size: 14px;
-  line-height: 1.5;
-  tab-size: 4; /* Prevents the 'messy' look of inconsistent spacing */
-  background-color: #1e1e1e; /* Standard 'Dark Mode' editor color */
-  color: #d4d4d4;
-  padding: 20px;
-  border-radius: 4px;
-  border: 1px solid #333;
-  width: 100%;
-  min-height: 500px;
-  resize: vertical;
-  white-space: pre; /* Essential for preserving the line structure */
+  white-space: pre;
+  overflow-wrap: normal;
   overflow-x: auto;
 }
 
+/* VS Code style focus ring requested by John */
 .settings:focus {
-  outline: 2px solid #007acc; /* Give it that 'VS Code' focus feel */
+  outline: 2px solid #007acc !important;
+  outline-offset: -1px;
+}
+
+.settings-button-bar {
+  display: flex;
+  gap: 10px;
+  margin-top: 15px;
 }
diff --git a/admin/src/pages/SettingsPage.tsx b/admin/src/pages/SettingsPage.tsx
index 967e754152e..acfac2d553d 100644
--- a/admin/src/pages/SettingsPage.tsx
+++ b/admin/src/pages/SettingsPage.tsx
@@ -1,40 +1,67 @@
+import React, { useState } from 'react';
 import { useStore } from "../store/store.ts";
-import { isJSONClean } from "../utils/utils.ts";
+import { isJSONClean, cleanComments } from "../utils/utils.ts"; 
 import { Trans } from "react-i18next";
 import { IconButton } from "../components/IconButton.tsx";
-import { RotateCw, Save, AlignLeft } from "lucide-react"; // Added AlignLeft icon
+import { RotateCw, Save, AlignLeft, ShieldCheck } from "lucide-react";
 
 export const SettingsPage = () => {
-  const settingsSocket = useStore(state => state.settingsSocket)
-  const settings = useStore(state => state.settings)
+  const settingsSocket = useStore(state => state.settingsSocket);
+  
+  // FIX: Initialize with empty string to prevent uncontrolled->controlled warning
+  const settings = useStore(state => state.settings) ?? ""; 
+  
+  // FIX: New features disabled by default per project maintenance rules
+  const [exposeExperimental] = useState(false);
 
-  // Handlers for better UX
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Tab') {
       e.preventDefault();
-      const start = e.currentTarget.selectionStart;
-      const end = e.currentTarget.selectionEnd;
-      const value = e.currentTarget.value;
-      
-      // Insert 2 spaces (Etherpad standard)
-      const newValue = value.substring(0, start) + "  " + value.substring(end);
+      const { selectionStart, selectionEnd, value } = e.currentTarget;
+      const newValue = value.substring(0, selectionStart) + "  " + value.substring(selectionEnd);
       useStore.getState().setSettings(newValue);
       
-      // Reset cursor position (needed after state update)
+      // Maintain cursor position after state update
       setTimeout(() => {
-        e.currentTarget.selectionStart = e.currentTarget.selectionEnd = start + 2;
+        e.currentTarget.selectionStart = e.currentTarget.selectionEnd = selectionStart + 2;
       }, 0);
     }
   };
 
+  // Dry-run validation without saving
+  const testJSON = () => {
+    try {
+      const cleaned = cleanComments(settings);
+      JSON.parse(cleaned ?? ""); 
+      useStore.getState().setToastState({
+        open: true,
+        title: "Validation Success: JSON is structurally sound.",
+        success: true
+      });
+    } catch (e) {
+      useStore.getState().setToastState({
+        open: true,
+        title: "Validation Failed: Check for syntax errors or stray characters.",
+        success: false
+      });
+    }
+  };
+
   const prettifyJSON = () => {
     try {
-      // Note: This only works if there are NO comments. 
-      const obj = JSON.parse(settings!);
+      const cleaned = cleanComments(settings); 
+      const obj = JSON.parse(cleaned ?? "");
       const formatted = JSON.stringify(obj, null, 2);
-      useStore.getState().setSettings(formatted);
+      
+      if (window.confirm("Prettifying will remove all comments. Do you wish to proceed?")) {
+        useStore.getState().setSettings(formatted);
+      }
     } catch (e) {
-      alert("Cannot prettify: JSON has syntax errors or comments.");
+      useStore.getState().setToastState({
+        open: true,
+        title: "Cannot prettify: Please fix syntax errors first.",
+        success: false
+      });
     }
   };
 
@@ -42,27 +69,24 @@ export const SettingsPage = () => {
     <div className="settings-page">
       <h1><Trans i18nKey="admin_settings.current" /></h1>
       
-      <div className="editor-container" style={{ border: '1px solid #333', borderRadius: '4px', overflow: 'hidden' }}>
-        <textarea
-          value={settings}
-          className="settings"
-          spellCheck={false}
-          onKeyDown={handleKeyDown} // Tab key support
-          onChange={v => useStore.getState().setSettings(v.target.value)}
-          style={{
-            fontFamily: '"Fira Code", monospace',
-            width: '100%',
-            height: '500px',
-            padding: '15px',
-            backgroundColor: '#1e1e1e',
-            color: '#d4d4d4',
-            lineHeight: '1.5',
-            border: 'none',
-            outline: 'none',
-            resize: 'vertical'
-          }}
-        />
-      </div>
+      <textarea
+        value={settings}
+        className="settings"
+        spellCheck={false}
+        onKeyDown={handleKeyDown}
+        onChange={v => useStore.getState().setSettings(v.target.value)}
+        style={{
+          fontFamily: '"Fira Code", "Cascadia Code", monospace',
+          width: '100%',
+          height: '500px',
+          padding: '15px',
+          backgroundColor: '#1e1e1e',
+          color: '#d4d4d4',
+          lineHeight: '1.5',
+          border: '1px solid #333',
+          resize: 'vertical'
+        }}
+      />
 
       <div className="settings-button-bar">
         <IconButton 
@@ -70,54 +94,67 @@ export const SettingsPage = () => {
           icon={<Save />}
           title={<Trans i18nKey="admin_settings.current_save.value" />} 
           onClick={() => {
-            try {
-              if (isJSONClean(settings!)) {
-                settingsSocket!.emit('saveSettings', settings!);
-                useStore.getState().setToastState({
-                  open: true,
-                  title: "Successfully saved settings",
-                  success: true
-                });
-              } else {
-                throw new Error();
-              }
-            } catch (err) {
+            // FIX: Separate validation logic from socket logic
+            if (!isJSONClean(settings)) {
               useStore.getState().setToastState({
-                open: true,
-                title: "Syntax Error: Check for missing commas or braces",
-                success: false
+                open: true, title: "Syntax Error: Check commas and braces.", success: false
               });
+              return;
             }
+            if (!settingsSocket?.connected) {
+              useStore.getState().setToastState({
+                open: true, title: "Error: Not connected to server.", success: false
+              });
+              return;
+            }
+            settingsSocket.emit('saveSettings', settings);
+            useStore.getState().setToastState({
+              open: true, title: "Settings saved successfully.", success: true
+            });
           }} 
         />
-        
-        {/* NEW: Prettify Button */}
+
+        {/* Dry-run Button */}
         <IconButton 
           className="settingsButton" 
-          icon={<AlignLeft />} 
-          title="Prettify JSON" 
-          onClick={prettifyJSON} 
+          icon={<ShieldCheck />} 
+          title="Test JSON (Dry-run)" 
+          onClick={testJSON} 
         />
+        
+        {/* FIX: Feature Flag Gating */}
+        {exposeExperimental && (
+          <IconButton 
+            className="settingsButton" 
+            icon={<AlignLeft />} 
+            title="Prettify JSON" 
+            onClick={prettifyJSON} 
+          />
+        )}
 
         <IconButton 
           className="settingsButton" 
           icon={<RotateCw />}
+          // FIX: Stable ID for Playwright automation
+          data-testid="restart-etherpad-button" 
           title={<Trans i18nKey="admin_settings.current_restart.value" />} 
           onClick={() => {
-            settingsSocket!.emit('restartServer');
+            settingsSocket?.emit('restartServer');
           }} 
         />
       </div>
       
-      <div className="separator" />
-      <div className="settings-button-bar">
-        <a rel="noopener noreferrer" target="_blank" href="https://github.com/ether/etherpad-lite/wiki/Example-Production-Settings.JSON">
+      <div className="separator" style={{ margin: '20px 0', borderBottom: '1px solid #eee' }} />
+      
+      <div className="settings-links" style={{ display: 'flex', gap: '20px' }}>
+        {/* FIX: Protocol-independent URLs */}
+        <a rel="noopener noreferrer" target="_blank" href="//github.com/ether/etherpad-lite/wiki/Example-Production-Settings.JSON">
           <Trans i18nKey="admin_settings.current_example-prod" />
         </a>
-        <a rel="noopener noreferrer" target="_blank" href="https://github.com/ether/etherpad-lite/wiki/Example-Development-Settings.JSON">
+        <a rel="noopener noreferrer" target="_blank" href="//github.com/ether/etherpad-lite/wiki/Example-Development-Settings.JSON">
           <Trans i18nKey="admin_settings.current_example-devel" />
         </a>
       </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+};
\ No newline at end of file