@metricinsights/pp-dev 1.5.0-beta.29 → 1.5.0-beta.30

package/dist/client/variables-editor.js

@@ -155,18 +155,23 @@ function importPageGroupHtml(title, pages) {
         return '';
     }
     const rows = pages
-        .map((p) => '<button type="button" class="ve-import-page-row" data-search="' +
-        escapeHtml((p.name + ' ' + p.internal_name).toLowerCase()) +
-        '"' +
-        actionAttrs('select-import-page', { pageId: p.id, pageName: p.name }) +
-        '>' +
-        '<span class="ve-import-page-name">' +
-        escapeHtml(p.name) +
-        '</span>' +
-        '<span class="ve-import-page-slug">' +
-        escapeHtml(p.internal_name) +
-        '</span>' +
-        '</button>')
+        .map((p) => {
+        // A page without a name on MI goes by its internal name (as an attribute, `null` was
+        // dropped, and the review step named the page "undefined").
+        const name = p.name || p.internal_name;
+        return ('<button type="button" class="ve-import-page-row" data-search="' +
+            escapeHtml((name + ' ' + p.internal_name).toLowerCase()) +
+            '"' +
+            actionAttrs('select-import-page', { pageId: p.id, pageName: name }) +
+            '>' +
+            '<span class="ve-import-page-name">' +
+            escapeHtml(name) +
+            '</span>' +
+            '<span class="ve-import-page-slug">' +
+            escapeHtml(p.internal_name) +
+            '</span>' +
+            '</button>');
+    })
         .join('');
     return ('<div class="ve-import-page-group">' +
         '<div class="ve-import-section-title">' +
@@ -356,6 +361,9 @@ function openOverlay(html) {
     return overlay;
 }
 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;
 // 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">' +
@@ -422,7 +430,7 @@ function showConfirmModal(message, onConfirm) {
         }
     });
     overlay.addEventListener('keydown', (ev) => {
-        if (ev.key === 'Enter') {
+        if (ev.key === 'Enter' && !isButton(ev.target)) {
             ev.preventDefault();
             close(true);
         }
@@ -640,7 +648,7 @@ function showJsonDiffModal(beforeText, afterText, onConfirm) {
             }
             return;
         }
-        if (ev.key === 'Enter') {
+        if (ev.key === 'Enter' && !isButton(ev.target)) {
             ev.preventDefault();
             close(true);
         }
@@ -1692,6 +1700,7 @@ function renderValuesTabHtml(state, rows, rawMode, selectedIndex) {
     <div class="ve-values-layout">
       <div class="ve-values-nav">
         <div class="ve-values-nav-list">${navHtml}</div>
+        <button type="button" class="ve-values-nav-item ve-values-nav-add"${actionAttrs('add-value-row')}>+ Add item</button>
       </div>
       <div class="ve-values-detail">${detailHtml}</div>
     </div>
@@ -1830,7 +1839,11 @@ function startVariablesEditor({ templateLess }) {
         banner = null;
     }
     // ── Data loading ─────────────────────────────────────────────────────────────
-    async function loadSchema(seq) {
+    // Both loaders resolve to whether the tab took the data. Edits made while a load ran (the tab
+    // paints what it has first, see scheduleAutoLoad) stay as they are: only what counts as saved
+    // takes the current content, and the caller leaves the tab unpainted, since a repaint would
+    // move the caret.
+    async function loadSchema(seq, editSeqAtStart) {
         let r;
         let data;
         try {
@@ -1839,13 +1852,13 @@ function startVariablesEditor({ templateLess }) {
         }
         catch (e) {
             if (seq !== schemaSeq) {
-                return;
+                return false;
             }
             showBanner('error', 'Failed to load the schema: ' + escapeHtml(errorMessage(e)));
-            return;
+            return false;
         }
         if (seq !== schemaSeq) {
-            return;
+            return false;
         }
         // 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.
@@ -1853,39 +1866,46 @@ function startVariablesEditor({ templateLess }) {
             schemaState = null;
             schemaRows = [];
             showBanner('error', 'Failed to load the schema: ' + escapeHtml((data && data.error) || 'HTTP ' + r.status));
-            return;
+            return false;
         }
+        const freshRows = data.schema && Array.isArray(data.schema.tags) ? data.schema.tags.map((t) => Object.assign({}, t)) : [];
+        const freshRawMode = data.exists && !data.schema;
+        const edited = editSeq !== editSeqAtStart;
         schemaState = data;
-        schemaRows =
-            data.schema && Array.isArray(data.schema.tags) ? data.schema.tags.map((t) => Object.assign({}, t)) : [];
-        rawMode = data.exists && !data.schema;
-        jsonBaseline.schema = snapshotSchemaJson();
+        if (!edited) {
+            schemaRows = freshRows;
+            rawMode = freshRawMode;
+        }
+        // In raw mode the file's text, not the textarea's (which may hold edits): the diff shown
+        // before a save compares with it.
+        jsonBaseline.schema = freshRawMode ? data.raw || '' : schemaJsonOf(data, freshRows);
+        return !edited;
     }
-    async function loadValues(seq) {
+    async function loadValues(seq, editSeqAtStart) {
         let r;
         try {
             r = await fetch('/@api/variables/values');
         }
         catch (e) {
             if (seq !== valuesSeq) {
-                return;
+                return false;
             }
             valuesState = null;
             valueRows = [];
             showBanner('error', 'Failed to load values: ' + escapeHtml(errorMessage(e)));
-            return;
+            return false;
         }
         if (!r.ok) {
             const err = (await r.json().catch(() => ({})));
             if (seq !== valuesSeq) {
-                return;
+                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;
+            return false;
         }
         let data;
         try {
@@ -1893,36 +1913,35 @@ function startVariablesEditor({ templateLess }) {
         }
         catch (e) {
             if (seq !== valuesSeq) {
-                return;
+                return false;
             }
             valuesState = null;
             valueRows = [];
             showBanner('error', 'Failed to parse the values response: ' + escapeHtml(errorMessage(e)));
-            return;
+            return false;
         }
         if (seq !== valuesSeq) {
-            return;
+            return false;
         }
+        const freshRows = (data.combined || []).map((e) => Object.assign({}, e));
+        const edited = editSeq !== editSeqAtStart;
         valuesState = data;
-        valueRows = (data.combined || []).map((e) => Object.assign({}, e));
-        jsonBaseline.values = snapshotValuesJson();
-    }
-    function snapshotSchemaJson() {
-        if (!schemaState) {
-            return '';
-        }
-        if (rawMode) {
-            const editorEl = byId('raw-editor');
-            return editorEl ? editorEl.value : schemaState.raw || '';
+        if (!edited) {
+            valueRows = freshRows;
         }
-        if (schemaState.raw && (!schemaState.schema || !Array.isArray(schemaRows))) {
-            return schemaState.raw;
+        jsonBaseline.values = snapshotValuesJson(freshRows);
+        return !edited;
+    }
+    /** The schema as the file's JSON text would be with `rows` as its tags. */
+    function schemaJsonOf(state, rows) {
+        if (state.raw && !state.schema) {
+            return state.raw;
         }
         try {
-            return JSON.stringify(Object.assign({}, schemaState.schema || {}, { tags: schemaRows }), null, 2);
+            return JSON.stringify(Object.assign({}, state.schema || {}, { tags: rows }), null, 2);
         }
         catch {
-            return schemaState.raw || '';
+            return state.raw || '';
         }
     }
     function snapshotValuesJson(rows) {
@@ -1936,25 +1955,38 @@ function startVariablesEditor({ templateLess }) {
     // Fetches fresh data for one tab, tracking a per-tab "loading" flag and sequence number so a
     // response that's superseded by a newer load for the SAME tab (started before this one
     // resolved) gets dropped instead of clobbering fresher data. Toggles the tab's own loading
-    // flag but deliberately doesn't call render() itself — callers decide when to repaint.
+    // flag but deliberately doesn't call render() itself — callers decide when to repaint, which
+    // they do only when the tab took the data (see loadSchema).
     function loadTabData(tab) {
+        const editSeqAtStart = editSeq;
         if (tab === 'schema') {
             const seq = ++schemaSeq;
             schemaLoading = true;
-            return loadSchema(seq).then(() => {
+            return loadSchema(seq, editSeqAtStart).then((taken) => {
                 if (seq === schemaSeq) {
                     schemaLoading = false;
                 }
+                return taken;
             });
         }
         const seq = ++valuesSeq;
         valuesLoading = true;
-        return loadValues(seq).then(() => {
+        return loadValues(seq, editSeqAtStart).then((taken) => {
             if (seq === valuesSeq) {
                 valuesLoading = false;
             }
+            return taken;
         });
     }
+    /** Repaints the tab once a load is over, or, with edits made meanwhile kept, only the "Refreshing…" dot. */
+    function paintLoaded(taken) {
+        if (taken) {
+            render();
+        }
+        else {
+            updateLoadingIndicator();
+        }
+    }
     // The manual "↻ Refresh" button — deliberately NOT debounced, so it's always the fast path
     // for "I just changed something in MI and want it now" (see scheduleAutoLoad for the
     // debounced, tab-switch-driven path).
@@ -1965,8 +1997,7 @@ function startVariablesEditor({ templateLess }) {
         // render() has to run AFTER that call starts (not before) for the indicator to reflect it.
         const pending = loadTabData(activeTab);
         render();
-        await pending;
-        render();
+        paintLoaded(await pending);
     }
     function refresh() {
         if (dirty) {
@@ -1990,9 +2021,9 @@ function startVariablesEditor({ templateLess }) {
             if (activeTab === tab) {
                 render();
             }
-            void pending.then(() => {
+            void pending.then((taken) => {
                 if (activeTab === tab) {
-                    render();
+                    paintLoaded(taken);
                 }
             });
         }, AUTO_LOAD_DEBOUNCE_MS);
@@ -2488,6 +2519,22 @@ function startVariablesEditor({ templateLess }) {
         showSaveError(new Error(message));
         return null;
     }
+    // The tab's reload after a save, which the save's own banner outlives: a reload that fails is
+    // not a failed save, and says so next to it.
+    async function reloadAfterSave(tab) {
+        const saved = banner;
+        await loadTabData(tab);
+        if (saved && banner !== saved && banner?.type === 'error') {
+            banner = {
+                type: 'warning',
+                html: saved.html +
+                    '<div>The save went through, but reloading afterwards did not: ' +
+                    banner.html +
+                    ' Use ↻ Refresh.</div>',
+            };
+        }
+        render();
+    }
     async function commitSchemaSave(raw) {
         const saveEditSeq = editSeq;
         const data = await putSave('/@api/variables/schema', { raw });
@@ -2506,8 +2553,7 @@ function startVariablesEditor({ templateLess }) {
         setDirty(false);
         showBanner(warnings.length ? 'warning' : 'success', message);
         jsonBaseline.schema = raw;
-        await loadTabData('schema');
-        render();
+        await reloadAfterSave('schema');
     }
     // ── Values tab ───────────────────────────────────────────────────────────────
     function onComboFocus(i) {
@@ -3045,10 +3091,16 @@ function startVariablesEditor({ templateLess }) {
         showBanner('success', 'Imported ' + applied + ' of ' + total + ' variable(s) from "' + escapeHtml(pageName) + '". Save to apply.');
     }
     function addValueRow() {
-        showCustomValueModal('Variable name', '', (name) => {
+        showCustomValueModal('Variable name', '', (entered) => {
+            const name = (entered || '').trim();
             if (!name) {
                 return;
             }
+            // MI keeps one value per name: a second row of that name would lose one of the two on save.
+            if (valueRows.some((row) => row.name === name)) {
+                showBanner('error', 'A variable named "' + escapeHtml(name) + '" is in the list already.');
+                return;
+            }
             valueRows.push({ name, value: '' });
             selectedValueIndex = valueRows.length - 1;
             setDirty(true);
@@ -3125,8 +3177,7 @@ function startVariablesEditor({ templateLess }) {
         setDirty(false);
         showBanner(warnings.length ? 'warning' : 'success', message);
         jsonBaseline.values = afterText;
-        await loadTabData('values');
-        render();
+        await reloadAfterSave('values');
     }
     function save() {
         (activeTab === 'schema' ? saveSchema() : saveValues()).catch(showSaveError);
@@ -3220,14 +3271,18 @@ function startVariablesEditor({ templateLess }) {
         if (activeTab === 'values' && valuesRawMode) {
             refreshValuesJsonIssues();
         }
+        updateLoadingIndicator();
+    }
+    // The "Refreshing…" dot, shown only over cached content already on screen underneath it —
+    // when there is none (state is still null), renderSkeleton() is the loading signal.
+    function updateLoadingIndicator() {
         const loadingEl = byId('loading-indicator');
-        if (loadingEl) {
-            // Only surface the indicator when there's cached content already on screen underneath it —
-            // when there isn't (state is still null), renderSkeleton() above is the loading signal.
-            const stateForTab = activeTab === 'schema' ? schemaState : valuesState;
-            const isLoading = activeTab === 'schema' ? schemaLoading : valuesLoading;
-            loadingEl.style.display = isLoading && stateForTab ? '' : 'none';
+        if (!loadingEl) {
+            return;
         }
+        const stateForTab = activeTab === 'schema' ? schemaState : valuesState;
+        const isLoading = activeTab === 'schema' ? schemaLoading : valuesLoading;
+        loadingEl.style.display = isLoading && stateForTab ? '' : 'none';
     }
     // ── Events ───────────────────────────────────────────────────────────────────
     // One listener per event type for the whole page — the toolbar, the tab's content and the