Update webstudio settings logic

Author: ferpasri

docs/webstudio/WEBSTUDIO_BUG_BACKLOG.md

@@ -311,3 +311,60 @@ Acceptance:
 - folder selection is stored in the parent Test Goals state
 - selecting a folder clears the selected YAML file after the unsaved-change guard is resolved
 - regression test `testGoalFolderSelectionState` passes
+
+### WS-012 Save Buttons Stayed Disabled After Editor Changes
+
+- Area: Test Configuration / CLI Mode
+- Status: fixed
+
+Reproduction:
+
+1. Open `Edit composition.properties` and modify the raw properties content.
+2. Observe that `Save composition.properties` remains disabled.
+3. Repeat with `Edit policies.properties`.
+4. Open CLI Mode, modify `Agent CLI Settings`, save once, then modify the settings again.
+
+Expected:
+
+- save buttons enable immediately when the corresponding editor content differs from the saved baseline
+- after saving Agent CLI settings, a later edit is detected as dirty again
+- unsaved-change guards and save-button enablement use the same dirty-state semantics
+
+Bug:
+
+- nested bound values changed inside child components without reliably invalidating parent dirty props
+- after saving Agent CLI settings, the editable settings object and saved baseline shared the same object reference, so later edits mutated both and were not detected
+
+Acceptance:
+
+- raw composition, raw policies, raw settings, and Agent CLI save buttons compute dirty state from local editor content against saved snapshots
+- Agent CLI settings save stores independent editable and saved object snapshots
+- regression test `editorDirtyState.test.js` passes
+
+### WS-013 Java Source Modal Could Close During Save And Compile
+
+- Area: Test Configuration / Java Composition and Java Policies
+- Status: fixed
+
+Reproduction:
+
+1. Open a Java composition or policy source editor modal.
+2. Modify the Java source.
+3. Click `Save and Compile`.
+4. Immediately click `Close` or click the modal backdrop.
+
+Expected:
+
+- source editor modal remains open while save and compile is running
+- `Close` is disabled during the operation
+- backdrop click-away is ignored during the operation
+- compile diagnostics remain visible after the operation completes
+
+Bug:
+
+- the modal close button and backdrop close handler were still active while save and compile was running
+
+Acceptance:
+
+- Java composition and policy source modals use the same close guard while `saving` is active
+- regression test `editorModalState.test.js` passes

docs/webstudio/WEBSTUDIO_FUNCTIONAL_SPEC.md

@@ -46,7 +46,6 @@ The configuration area exposes multiple editors:
 - `Edit policies.properties file`
 - `Edit Java Policies`
 
-- `Edit test.settings file`
 - `Edit Settings`
 
 - source editors for the related Composition and Policies Java files
@@ -71,15 +70,24 @@ The `Edit policies.properties file` view is treated as one logical editing area
 - `Edit Java Policies` renders the existing Java policies and lists them as active or available.
 The `Edit Java Policies` view is treated as one logical editing area for unsaved-change and uncompiled-change behavior.
 
-### Settings Views
+### Settings View
 
-The two settings views are:
+The settings editor is exposed as one left-sidebar entry:
 
-- `Edit test.settings file` allows users to edit the file content directly.
-The `Edit test.settings file` view is treated as one logical editing area for unsaved-change behavior.
+- `Edit Settings`
+
+The `Edit Settings` view has two internal representations of the same selected workspace `test.settings` data:
+
+- visual settings form
+- raw `test.settings` text editor
+
+The visual settings form is the default representation.
+
+The user can switch between the two representations using a toggle inside the `Edit Settings` view header.
+
+Both representations share the same `Save Settings` action.
 
-- `Edit Settings` renders the content of the `test.settings` file into a visual grouped form of settings.
-The `Edit Settings` view is treated as one logical editing area for unsaved-change behavior.
+The `Edit Settings` view is treated as one logical editing area for unsaved-change behavior, regardless of which internal representation is active.
 
 ### CLI State Projection Mode
 
@@ -266,35 +274,49 @@ Invalid compilation:
 
 ### Unsaved Settings Behavior
 
-Unsaved settings protection applies to the settings editing areas.
+Unsaved settings protection applies to the `Edit Settings` view.
 
 Protected views:
 
-- `Edit test.settings file`
 - `Edit Settings`
 
-The unsaved dialog must appear when leaving one of the settings editing areas, or switching between settings views while there are unsaved changes.
+The unsaved dialog must appear when leaving or toggling `Edit Settings` while there are unsaved changes.
 
 It must appear when:
 
-- leaving the settings configuration view for another top-level page while one of the settings views is dirty
-- changing workspace while one of the settings views is dirty
-- switching from a settings view to a non-settings configuration editor
-- switching from `Edit test.settings` to `Edit Settings`
-- switching from `Edit Settings` to `Edit test.settings`
+- leaving `Edit Settings` for another top-level page while settings are dirty
+- changing workspace while settings are dirty
+- switching from `Edit Settings` to a non-settings configuration editor
+- toggling between the visual settings form and raw `test.settings` text editor while settings are dirty
 
 It must not appear when:
 
 - switching to another view without changing anything
-- navigating to a settings view after the user already left the settings page
-- changing settings without leaving the `Edit Settings` form view
+- navigating to `Edit Settings` after the user already left the settings page
+- changing settings without leaving or toggling inside `Edit Settings`
 
 Dialog actions:
 
 - `Save`: persist current settings changes, then continue the pending navigation
 - `Discard`: restore persisted settings state, then continue the pending navigation
 - `Cancel`: keep the user in the current settings editor and abort the pending navigation
 
+### Save Action Enablement
+
+Configuration save actions are enabled only when their corresponding editor is dirty.
+
+Examples:
+
+- `Save Settings` is enabled only when the selected workspace settings differ from the persisted settings state
+- composition file save actions are enabled only when `composition.properties` differs from the persisted composition state
+- Java composition `Save and Compile` is enabled only when the selected Java composition source or composition flow state differs from the persisted/compiled state
+- policies file save actions are enabled only when `policies.properties` differs from the persisted policies state
+- Java policy `Save and Compile` is enabled only when the selected Java policy source or Java policies state differs from the persisted/compiled state
+
+Dirty-state save enablement must use the same underlying change detection as the unsaved-change guards.
+
+If a user attempts to leave a dirty editor without saving, the guard dialog must still appear even when the save action is enabled.
+
 ## Generate Mode
 
 Generate Mode allows launching and stopping scriptless TESTAR execution.

docs/webstudio/WEBSTUDIO_UX_SPEC.md

@@ -147,8 +147,7 @@ The left sidebar is the primary navigation for:
 - Java composition flow
 - policy files
 - Java policies
-- test settings
-- settings groups
+- Edit Settings
 
 The default Test Configuration landing view is `Edit Java Composition Flow`.
 
@@ -179,10 +178,18 @@ Expected behavior:
 
 ### Settings
 
-The settings area has two representations of the same data:
+The left sidebar shows a single `Edit Settings` entry for workspace settings.
+
+The `Edit Settings` panel has two representations of the same data:
+
+- visual settings form
+- raw `test.settings` text editor
+
+The visual settings form is shown by default.
+
+A compact toggle near the `Edit Settings` heading switches between the visual form and raw text editor.
 
-- raw `test.settings` text
-- structured `Edit Settings` form
+The toggle must not add a second left-sidebar entry and must not resize the surrounding layout.
 
 Expected behavior:
 
@@ -193,6 +200,21 @@ Expected behavior:
 - setting-specific feedback appears near the corresponding setting
 - restore actions only appear for settings that support restore behavior
 - enum settings use dropdowns with concrete values only and must not include a leading blank option
+- both settings representations share one `Save Settings` action
+- `Save Settings` is disabled while settings match the persisted state
+- `Save Settings` becomes enabled when either representation changes settings
+- toggling between representations while settings are dirty uses the same save/discard/cancel guard pattern
+
+### Save Buttons
+
+Save actions should communicate whether there is work to persist.
+
+Expected behavior:
+
+- save buttons are disabled when the corresponding editor has no detected changes
+- save buttons become enabled when the same dirty-state logic used by guard dialogs detects changes
+- disabled save buttons remain visible to preserve layout stability
+- guard dialogs still appear when users leave dirty editors without saving
 
 ## Runtime UX Contract
 

webstudio/frontend/src/App.svelte

@@ -12,6 +12,7 @@
     import { shouldGuardConfigurationTransition } from "./configurationGuard.js";
     import { clearSelectedSourceState } from "./policyEditorState.js";
     import { stateModelWorkspaceDialog } from "./stateModelNavigation.js";
+    import { objectSnapshot } from "./editorDirtyState.js";
 
     const STATE_MODEL_URL = "http://localhost:8090/models";
     const CLI_AGENT_SETTING_KEYS = {
@@ -347,6 +348,16 @@
         }
     }
 
+    async function openVisualSettingsGroup(groupId) {
+        await guardConfigurationTransition(async () => {
+            openEditorImmediate("settings-form");
+            selectedSettingsGroupId = groupId || selectedSettingsGroupId;
+            if (!selectedSettingsGroupId && workspaceDocument?.settingsGroups?.length > 0) {
+                selectedSettingsGroupId = workspaceDocument.settingsGroups[0].id;
+            }
+        }, "settings-form");
+    }
+
     async function openPoliciesProperties() {
         await openEditor("policies-properties");
     }
@@ -962,6 +973,14 @@
         return (selectedSourceFile.content || "") !== (savedSourceContents[selectedSourceFile.name] || "");
     }
 
+    function hasCurrentSelectedSourceChanges() {
+        if (!selectedSourceFile?.category) {
+            return false;
+        }
+
+        return hasSelectedSourceChanges([selectedSourceFile.category]);
+    }
+
     function configurationDirtyAreas() {
         return {
             settings: hasSettingsChanges(),
@@ -1675,8 +1694,9 @@
         currentEditorDocument = null;
     } else if (selectedEditor === "test-settings") {
         currentEditorDocument = {
-            title: "Edit test.settings file",
-            saveLabel: "Save test.settings",
+            title: "Edit Settings",
+            saveLabel: "Save Settings",
+            dirty: hasSettingsChanges(),
             save: () => saveWorkspaceFile(
                 `/api/workspaces/${selectedWorkspaceName}/test-settings`,
                 workspaceDocument.testSettings.content
@@ -1685,13 +1705,15 @@
     } else if (selectedEditor === "settings-form") {
         currentEditorDocument = {
             title: "Edit Settings",
-            saveLabel: "Save settings",
+            saveLabel: "Save Settings",
+            dirty: hasSettingsChanges(),
             save: saveVisualSettings
         };
     } else if (selectedEditor === "policies-properties") {
         currentEditorDocument = {
             title: "Edit policies.properties",
             saveLabel: "Save policies.properties",
+            dirty: hasPoliciesPropertiesChanges(),
             save: () => saveWorkspaceFile(
                 `/api/workspaces/${selectedWorkspaceName}/policies-properties`,
                 workspaceDocument.policiesProperties.content
@@ -1701,6 +1723,7 @@
         currentEditorDocument = {
             title: "Edit composition.properties",
             saveLabel: "Save composition.properties",
+            dirty: hasCompositionPropertiesChanges(),
             save: () => saveWorkspaceFile(
                 `/api/workspaces/${selectedWorkspaceName}/composition-properties`,
                 workspaceDocument.compositionProperties.content
@@ -1710,16 +1733,13 @@
         currentEditorDocument = {
             title: selectedSourceFile.name,
             saveLabel: "Save source",
+            dirty: hasSelectedSourceChanges([selectedSourceFile.category]),
             save: saveSelectedSource
         };
     } else {
         currentEditorDocument = null;
     }
 
-    function selectSettingsGroup(groupId) {
-        selectedSettingsGroupId = groupId || "";
-    }
-
     $: if (selectedEditor === "settings-form" && !selectedSettingsGroupId && workspaceDocument?.settingsGroups?.length > 0) {
         selectedSettingsGroupId = workspaceDocument.settingsGroups[0].id;
     }
@@ -2127,8 +2147,8 @@
             setWorkspaceSettingByKey(CLI_AGENT_SETTING_KEYS.promptTitle, normalizedSettings.promptTitle);
             setWorkspaceSettingByKey(CLI_AGENT_SETTING_KEYS.promptText, normalizedSettings.promptText);
             await saveVisualSettings();
-            cliAgentSettings = normalizedSettings;
-            savedCliAgentSettings = normalizedSettings;
+            cliAgentSettings = objectSnapshot(normalizedSettings);
+            savedCliAgentSettings = objectSnapshot(normalizedSettings);
             showTemporaryMessage("Agent CLI settings saved.");
             return true;
         } catch (cliError) {
@@ -2225,6 +2245,7 @@
             openPoliciesProperties={openPoliciesProperties}
             openTestSettings={openTestSettings}
             openVisualSettings={openVisualSettings}
+            openVisualSettingsGroup={openVisualSettingsGroup}
             policySourceFiles={policySourceFiles}
             closeCompositionSourceEditor={closeCompositionSourceEditor}
             closePolicySourceEditor={closePolicySourceEditor}
@@ -2234,15 +2255,19 @@
             createPolicySource={createPolicySource}
             javaCompileResult={javaCompileResult}
             regexValidationResults={regexValidationResults}
+            savedCompositionPropertiesContent={savedCompositionPropertiesContent}
+            savedPoliciesPropertiesContent={savedPoliciesPropertiesContent}
+            savedTestSettingsContent={savedTestSettingsContent}
             saving={saving}
             setSettingValue={setSettingValue}
             selectSource={selectSource}
             selectCompositionFlowNode={selectCompositionFlowNode}
-            selectSettingsGroup={selectSettingsGroup}
             selectedEditor={selectedEditor}
             selectedCompositionFlowNode={selectedCompositionFlowNode}
             selectedSettingsGroupId={selectedSettingsGroupId}
             selectedSourceFile={selectedSourceFile}
+            selectedSourceDirty={hasCurrentSelectedSourceChanges()}
+            selectedSourceSavedContent={selectedSourceFile?.name ? savedSourceContents[selectedSourceFile.name] || "" : ""}
             restoreSettingDefault={restoreSettingDefault}
             togglePolicySourceActivation={togglePolicySourceActivation}
             validateRegexExpression={validateRegexExpression}
@@ -2284,6 +2309,7 @@
             <CliModeView
                 cliAgentSettings={cliAgentSettings}
                 cliStatus={cliStatus}
+                savedCliAgentSettings={savedCliAgentSettings}
                 saving={saving}
                 saveCliAgentSettings={saveCliAgentSettings}
                 selectedWorkspaceSutConnector={selectedWorkspaceSutConnector}

webstudio/frontend/src/CliModeView.svelte

@@ -1,6 +1,9 @@
 <script>
+    import { objectChanged } from "./editorDirtyState.js";
+
     export let cliAgentSettings = null;
     export let cliStatus = null;
+    export let savedCliAgentSettings = null;
     export let saving = false;
     export let selectedWorkspaceAvailableInCli = false;
     export let selectedWorkspaceCliStateProjectionMode = "";
@@ -18,6 +21,7 @@
     $: manualSessionRunning = cliStatus?.status === "running" && cliStatus?.mode === "manual";
     $: agentSessionRunning = cliStatus?.status === "running" && cliStatus?.mode === "agent";
     $: cliSessionRunning = manualSessionRunning || agentSessionRunning;
+    $: cliAgentSettingsDirty = objectChanged(cliAgentSettings, savedCliAgentSettings);
 
     function startSession() {
         startCliManualSession();
@@ -192,7 +196,7 @@
                 <label class="field-label" for="cli-agent-prompt">Prompt</label>
                 <textarea id="cli-agent-prompt" bind:value={cliAgentSettings.promptText} rows="4"></textarea>
                 <div class="button-row cli-mode-section-footer">
-                    <button type="button" on:click={saveCliAgentSettings} disabled={saving}>
+                    <button type="button" on:click={saveCliAgentSettings} disabled={saving || !cliAgentSettingsDirty}>
                         Save Agent CLI Settings
                     </button>
                 </div>