@metricinsights/pp-dev 1.5.0-beta.34 → 1.5.0-beta.36

package/dist/client/variables-editor.js

@@ -364,6 +364,70 @@ const find = (root, selector) => root.querySelector(selector);
 // Enter on a focused button is that button's own click (Cancel, ✕, the diff's ←/→), not the
 // dialog's confirmation: as the latter, it saved or discarded on a Cancel reached by Shift+Tab.
 const isButton = (target) => target instanceof HTMLButtonElement;
+const FOCUSABLE = 'button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])';
+/**
+ * Listens for `overlay`'s keys on the document while it is the dialog on top, and returns the
+ * function that stops listening (also stopped once the overlay leaves the page).
+ *
+ * On the overlay itself, the keys reached a dialog only while the focus was inside it: a click on
+ * the diff's text or the dialog's body put the focus on `<body>`, and Escape (or ←/→) did nothing.
+ * Tab cycles within the dialog: it left it for the page behind (the toolbar's Save).
+ */
+function bindModalKeys(overlay, onKey) {
+    const listener = (ev) => {
+        if (!overlay.isConnected) {
+            document.removeEventListener('keydown', listener);
+            return;
+        }
+        const overlays = document.querySelectorAll('.ve-modal-overlay');
+        if (overlays[overlays.length - 1] !== overlay) {
+            return;
+        }
+        if (ev.key === 'Tab') {
+            trapTab(overlay, ev);
+            return;
+        }
+        onKey(ev);
+    };
+    document.addEventListener('keydown', listener);
+    return () => document.removeEventListener('keydown', listener);
+}
+/**
+ * Whether `el` can take the focus: not hidden, itself or by an element between it and `overlay`
+ * (the import picker hides the pages its filter leaves out with `display: none`). A hidden last
+ * control let Tab leave the dialog, and Shift+Tab tried to focus it.
+ */
+function isTabbable(el, overlay) {
+    for (let node = el; node && node !== overlay; node = node.parentElement) {
+        if (node.hidden) {
+            return false;
+        }
+        const style = getComputedStyle(node);
+        if (style.display === 'none' || style.visibility === 'hidden') {
+            return false;
+        }
+    }
+    return true;
+}
+function trapTab(overlay, ev) {
+    const focusable = Array.from(overlay.querySelectorAll(FOCUSABLE)).filter((el) => isTabbable(el, overlay));
+    if (focusable.length === 0) {
+        ev.preventDefault();
+        return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    const inside = active instanceof Node && overlay.contains(active);
+    if (ev.shiftKey && (!inside || active === first)) {
+        ev.preventDefault();
+        last.focus();
+    }
+    else if (!ev.shiftKey && (!inside || active === last)) {
+        ev.preventDefault();
+        first.focus();
+    }
+}
 // Asks for a value (in place of window.prompt()); `onDone` gets `null` when the user cancels.
 function showCustomValueModal(title, initialValue, onDone) {
     const overlay = openOverlay('<div class="ve-modal">' +
@@ -382,6 +446,7 @@ function showCustomValueModal(title, initialValue, onDone) {
     inputEl.focus();
     inputEl.select();
     function close(value) {
+        unbindKeys();
         overlay.remove();
         onDone(value);
     }
@@ -392,8 +457,8 @@ function showCustomValueModal(title, initialValue, onDone) {
             close(null);
         }
     });
-    inputEl.addEventListener('keydown', (ev) => {
-        if (ev.key === 'Enter') {
+    const unbindKeys = bindModalKeys(overlay, (ev) => {
+        if (ev.key === 'Enter' && !isButton(ev.target)) {
             ev.preventDefault();
             close(inputEl.value);
         }
@@ -417,6 +482,7 @@ function showConfirmModal(message, onConfirm) {
         '</div>');
     find(overlay, '.ve-modal-ok').focus();
     function close(confirmed) {
+        unbindKeys();
         overlay.remove();
         if (confirmed) {
             onConfirm();
@@ -429,7 +495,7 @@ function showConfirmModal(message, onConfirm) {
             close(false);
         }
     });
-    overlay.addEventListener('keydown', (ev) => {
+    const unbindKeys = bindModalKeys(overlay, (ev) => {
         if (ev.key === 'Enter' && !isButton(ev.target)) {
             ev.preventDefault();
             close(true);
@@ -456,6 +522,7 @@ function showInfoModal(title, bodyHtml) {
         '</div>');
     find(overlay, '.ve-modal-ok').focus();
     function close() {
+        unbindKeys();
         overlay.remove();
     }
     find(overlay, '.ve-modal-ok').addEventListener('click', close);
@@ -464,8 +531,8 @@ function showInfoModal(title, bodyHtml) {
             close();
         }
     });
-    overlay.addEventListener('keydown', (ev) => {
-        if (ev.key === 'Enter' || ev.key === 'Escape') {
+    const unbindKeys = bindModalKeys(overlay, (ev) => {
+        if ((ev.key === 'Enter' && !isButton(ev.target)) || ev.key === 'Escape') {
             ev.preventDefault();
             close();
         }
@@ -618,6 +685,7 @@ function showJsonDiffModal(beforeText, afterText, onConfirm) {
         }
     }
     function close(confirmed) {
+        unbindKeys();
         overlay.remove();
         if (confirmed && typeof onConfirm === 'function') {
             onConfirm();
@@ -631,7 +699,7 @@ function showJsonDiffModal(beforeText, afterText, onConfirm) {
             close(false);
         }
     });
-    overlay.addEventListener('keydown', (ev) => {
+    const unbindKeys = bindModalKeys(overlay, (ev) => {
         if (ev.key === 'ArrowLeft' && hasChanges) {
             ev.preventDefault();
             if (currentChange > 0) {
@@ -1789,6 +1857,9 @@ function startVariablesEditor({ templateLess }) {
     let valuesRawMode = activeTab === 'values' && valuesJsonModeFromUrl();
     let rawMode = false;
     let dirty = false;
+    // A save's PUT and its reload are under way: another Save would diff against the baseline the
+    // first one is about to replace, and send a second full replacement.
+    let saving = false;
     let editSeq = 0;
     let banner = null;
     // Last-known saved JSON for each tab — used to build the post-save GitHub-style diff.
@@ -1854,7 +1925,8 @@ function startVariablesEditor({ templateLess }) {
             if (seq !== schemaSeq) {
                 return false;
             }
-            showBanner('error', 'Failed to load the schema: ' + escapeHtml(errorMessage(e)));
+            // Edits made meanwhile stay on screen, as they do when the load succeeds.
+            showBanner('error', 'Failed to load the schema: ' + escapeHtml(errorMessage(e)), editSeq !== editSeqAtStart);
             return false;
         }
         if (seq !== schemaSeq) {
@@ -1862,10 +1934,15 @@ function startVariablesEditor({ templateLess }) {
         }
         // An error answer (e.g. 503 with no dist service) is not a schema: kept as one, it rendered as
         // "No local __template_variables.json found" and offered to create a file over the real one.
+        // Unless the tab was edited while the load ran: the edits, and the schema they were made on,
+        // are kept on screen (the failed reload emptied the tab and the typing was gone).
         if (!r.ok) {
-            schemaState = null;
-            schemaRows = [];
-            showBanner('error', 'Failed to load the schema: ' + escapeHtml((data && data.error) || 'HTTP ' + r.status));
+            const edited = editSeq !== editSeqAtStart;
+            if (!edited) {
+                schemaState = null;
+                schemaRows = [];
+            }
+            showBanner('error', 'Failed to load the schema: ' + escapeHtml((data && data.error) || 'HTTP ' + r.status), edited);
             return false;
         }
         const freshRows = data.schema && Array.isArray(data.schema.tags) ? data.schema.tags.map((t) => Object.assign({}, t)) : [];
@@ -1883,6 +1960,19 @@ function startVariablesEditor({ templateLess }) {
     }
     async function loadValues(seq, editSeqAtStart) {
         let r;
+        // A save is a full replacement. Keep the state explicitly unavailable after a failed read so
+        // the user cannot accidentally submit an empty replacement set — unless the tab was edited
+        // while the load ran: the edits, and the values they were made on, are kept on screen (the
+        // failed reload emptied the tab and the typing was gone, the tab still dirty).
+        const failed = (html) => {
+            const edited = editSeq !== editSeqAtStart;
+            if (!edited) {
+                valuesState = null;
+                valueRows = [];
+            }
+            showBanner('error', html, edited);
+            return false;
+        };
         try {
             r = await fetch('/@api/variables/values');
         }
@@ -1890,22 +1980,14 @@ function startVariablesEditor({ templateLess }) {
             if (seq !== valuesSeq) {
                 return false;
             }
-            valuesState = null;
-            valueRows = [];
-            showBanner('error', 'Failed to load values: ' + escapeHtml(errorMessage(e)));
-            return false;
+            return failed('Failed to load values: ' + escapeHtml(errorMessage(e)));
         }
         if (!r.ok) {
             const err = (await r.json().catch(() => ({})));
             if (seq !== valuesSeq) {
                 return false;
             }
-            // A save is a full replacement. Keep the state explicitly unavailable after a failed
-            // read so the user cannot accidentally submit an empty replacement set.
-            valuesState = null;
-            valueRows = [];
-            showBanner('error', escapeHtml(err.error || 'Failed to load values.'));
-            return false;
+            return failed(escapeHtml(err.error || 'Failed to load values.'));
         }
         let data;
         try {
@@ -1915,10 +1997,7 @@ function startVariablesEditor({ templateLess }) {
             if (seq !== valuesSeq) {
                 return false;
             }
-            valuesState = null;
-            valueRows = [];
-            showBanner('error', 'Failed to parse the values response: ' + escapeHtml(errorMessage(e)));
-            return false;
+            return failed('Failed to parse the values response: ' + escapeHtml(errorMessage(e)));
         }
         if (seq !== valuesSeq) {
             return false;
@@ -2104,11 +2183,30 @@ function startVariablesEditor({ templateLess }) {
             rerenderKeepingAdvancedOpen(i);
         });
     }
+    /**
+     * The error for the first row whose additional_options text is not JSON, or null. Such a row
+     * holds the text as typed, as a string: serialized for raw mode or a save, it became a valid
+     * JSON string, and the rows raw mode makes back are new objects, no longer marked as invalid —
+     * so `{bad` was saved as `"{bad"`.
+     */
+    function invalidAdditionalOptionsError() {
+        const index = schemaRows.findIndex((row) => invalidAdditionalOptionsRows.has(row));
+        if (index === -1) {
+            return null;
+        }
+        const tagName = schemaRows[index].name || 'row ' + (index + 1);
+        return 'additional_options must be valid JSON for "' + escapeHtml(tagName) + '".';
+    }
     function toggleRawMode() {
         if (!schemaState) {
             return;
         }
         if (!rawMode) {
+            const invalid = invalidAdditionalOptionsError();
+            if (invalid) {
+                showBanner('error', invalid + ' Fix it before switching to raw JSON.', true);
+                return;
+            }
             // Entering raw mode: serialize the current table state so edits aren't lost.
             schemaState.raw = JSON.stringify(Object.assign({}, schemaState.schema, { tags: schemaRows }), null, 2);
         }
@@ -2468,10 +2566,9 @@ function startVariablesEditor({ templateLess }) {
             raw = byId('raw-editor').value;
         }
         else {
-            const invalidAdditionalOptionsIndex = schemaRows.findIndex((row) => invalidAdditionalOptionsRows.has(row));
-            if (invalidAdditionalOptionsIndex !== -1) {
-                const tagName = schemaRows[invalidAdditionalOptionsIndex].name || 'row ' + (invalidAdditionalOptionsIndex + 1);
-                showBanner('error', 'additional_options must be valid JSON for "' + escapeHtml(tagName) + '".');
+            const invalid = invalidAdditionalOptionsError();
+            if (invalid) {
+                showBanner('error', invalid);
                 return;
             }
             raw = JSON.stringify(Object.assign({}, schemaState.schema, { tags: schemaRows }), null, 2);
@@ -2481,7 +2578,21 @@ function startVariablesEditor({ templateLess }) {
             showBanner('success', 'No JSON changes to save.');
             return;
         }
-        showJsonDiffModal(beforeText, raw, () => void commitSchemaSave(raw).catch(showSaveError));
+        showJsonDiffModal(beforeText, raw, () => commitSave(() => commitSchemaSave(raw)));
+    }
+    /** Runs a confirmed save, with Save off until it and its reload are done (see `saving`). */
+    function commitSave(commit) {
+        setSaving(true);
+        void commit()
+            .catch(showSaveError)
+            .finally(() => setSaving(false));
+    }
+    function setSaving(value) {
+        saving = value;
+        const saveBtn = byId('save-btn');
+        if (saveBtn) {
+            saveBtn.disabled = value;
+        }
     }
     // Every way a save can fail ends in a visible error: a lost save must never look like a pending
     // one. The banner leaves the tab as it is (preserveContent), so the unsaved edits, raw JSON drafts
@@ -2546,13 +2657,15 @@ function startVariablesEditor({ templateLess }) {
         const message = warnings.length
             ? 'Saved, with warning(s):<ul>' + warnings.map((w) => '<li>' + escapeHtml(w) + '</li>').join('') + '</ul>'
             : 'Schema saved.';
+        // What the file holds now, also with newer edits: the next diff compares with it (it showed
+        // the lines just saved as changes again).
+        jsonBaseline.schema = raw;
         if (hasNewerEdits) {
             showBanner('warning', message + '<div>Newer edits remain unsaved.</div>', true);
             return;
         }
         setDirty(false);
         showBanner(warnings.length ? 'warning' : 'success', message);
-        jsonBaseline.schema = raw;
         await reloadAfterSave('schema');
     }
     // ── Values tab ───────────────────────────────────────────────────────────────
@@ -2924,17 +3037,22 @@ function startVariablesEditor({ templateLess }) {
                 closeImportModal();
             }
         });
-        overlay.addEventListener('keydown', (ev) => {
+        document.body.appendChild(overlay);
+        // On the document, not the overlay: with nothing focused in the dialog (its error state, a
+        // click on its text) Escape reached nothing.
+        unbindImportKeys = bindModalKeys(overlay, (ev) => {
             if (ev.key === 'Escape') {
                 ev.preventDefault();
                 closeImportModal();
             }
         });
-        document.body.appendChild(overlay);
         void renderImportPickerStep(overlay);
     }
+    let unbindImportKeys = null;
     function closeImportModal() {
         const overlay = byId('ve-import-overlay');
+        unbindImportKeys?.();
+        unbindImportKeys = null;
         if (overlay) {
             overlay.remove();
         }
@@ -3121,7 +3239,9 @@ function startVariablesEditor({ templateLess }) {
             showBanner('error', 'Cannot save values until live variables have loaded successfully.');
             return;
         }
-        let tags = valueRows;
+        // A copy: the table edits its rows in place, so with the rows themselves, what was typed while
+        // the PUT ran went into the saved baseline (and MI's values) the save records afterwards.
+        let tags = valueRows.map((row) => ({ ...row }));
         const beforeText = jsonBaseline.values;
         if (valuesRawMode) {
             try {
@@ -3130,7 +3250,9 @@ function startVariablesEditor({ templateLess }) {
                 tags = fromExportableValueRows(JSON.parse(byId('values-raw-editor').value));
             }
             catch (e) {
-                showBanner('error', 'Raw JSON is not valid: ' + escapeHtml(errorMessage(e)));
+                // The draft stays as typed: re-rendered, the textarea was made again from the last loaded
+                // rows, and the whole draft was gone.
+                showBanner('error', 'Raw JSON is not valid: ' + escapeHtml(errorMessage(e)), true);
                 return;
             }
         }
@@ -3140,7 +3262,7 @@ function startVariablesEditor({ templateLess }) {
             showBanner('success', 'No JSON changes to save.');
             return;
         }
-        showJsonDiffModal(beforeText, afterText, () => void commitValuesSave(tags, afterText).catch(showSaveError));
+        showJsonDiffModal(beforeText, afterText, () => commitSave(() => commitValuesSave(tags, afterText)));
     }
     async function commitValuesSave(tags, afterText) {
         const saveEditSeq = editSeq;
@@ -3170,16 +3292,27 @@ function startVariablesEditor({ templateLess }) {
             }
         }
         renderLocalUpdateButton();
+        // What MI holds now, also with newer edits: the next diff compares with it, and the JSON
+        // issues bar no longer takes the saved values for ones changed since the load.
+        jsonBaseline.values = afterText;
+        if (valuesState) {
+            valuesState.combined = tags.map((t) => ({ name: t.name, value: t.value }));
+        }
+        // The JSON issues bar may have been worked out while the PUT ran, against the old values: the
+        // values just saved stayed flagged as changed until the next keystroke.
+        refreshValuesJsonIssues();
         if (hasNewerEdits) {
             showBanner('warning', message + '<div>Newer edits remain unsaved.</div>', true);
             return;
         }
         setDirty(false);
         showBanner(warnings.length ? 'warning' : 'success', message);
-        jsonBaseline.values = afterText;
         await reloadAfterSave('values');
     }
     function save() {
+        if (saving) {
+            return;
+        }
         (activeTab === 'schema' ? saveSchema() : saveValues()).catch(showSaveError);
     }
     // ── Local pages ──────────────────────────────────────────────────────────────