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

package/dist/client/client.js

@@ -941,27 +941,44 @@ function initUsersPanel($panel, hooks) {
             ev.preventDefault();
             const name = editing;
             const $form = ev.currentTarget;
-            if (!name) {
+            const $save = $form.querySelector('button[type="submit"]');
+            // One request at a time, as the Add form does: Enter twice sent a second PATCH, which a
+            // rename answered with 404, shown as "not found" although the rename had gone through.
+            if (!name || $form.dataset.submitting === 'true') {
                 return;
             }
             const newName = $form.querySelector('.pp-dev-info__users-edit-name')?.value.trim() ?? '';
             const token = $form.querySelector('.pp-dev-info__users-edit-token')?.value.trim() ?? '';
-            const response = await request('PATCH', `${USERS_API}/${encodeURIComponent(name)}`, {
-                name: newName,
-                ...(token ? { token } : {}),
-            });
-            if (!response) {
-                return;
+            $form.dataset.submitting = 'true';
+            if ($save) {
+                $save.disabled = true;
             }
-            const { user } = (await response.json());
-            // This tab's own user got a new host: go on there (the old one would only send it on).
-            if (tabUser === name && user.name !== name) {
-                window.location.href = samePageOn(user.origin);
-                return;
+            // Held until the answer is read and the list refreshed: released when the headers came, a
+            // second Enter while a rename's body was on its way sent a PATCH to the old name (404).
+            try {
+                const response = await request('PATCH', `${USERS_API}/${encodeURIComponent(name)}`, {
+                    name: newName,
+                    ...(token ? { token } : {}),
+                });
+                if (!response) {
+                    return;
+                }
+                const { user } = (await response.json());
+                // This tab's own user got a new host: go on there (the old one would only send it on).
+                if (tabUser === name && user.name !== name) {
+                    window.location.href = samePageOn(user.origin);
+                    return;
+                }
+                editing = null;
+                renderedData = '';
+                await refresh();
+            }
+            finally {
+                delete $form.dataset.submitting;
+                if ($save) {
+                    $save.disabled = false;
+                }
             }
-            editing = null;
-            renderedData = '';
-            await refresh();
         });
         $list.querySelectorAll('[data-remove]').forEach(($remove) => {
             $remove.addEventListener('click', async (ev) => {
@@ -1381,6 +1398,86 @@ function initSyncButton(hot, $button, deps) {
     });
 }
 
+/**
+ * Wires the dev panel's "Reload variables" action to the dev server, and returns what starts it.
+ *
+ * Like the sync button, it refuses to start while the dev server is not connected: both transports
+ * keep a message until the socket is back, so the "Reloading variables" popup, which stays until
+ * an answer comes, stayed until a reconnect — and the page then reloaded on its own, unasked. A
+ * connection lost while waiting ends the wait the same way.
+ */
+function initReloadVariables(hot, deps) {
+    const reload = deps.reload ?? (() => window.location.reload());
+    // As the sync button takes it: Vite's connection is open until reported lost; the `pp-dev next`
+    // transport says itself whether its socket is open.
+    let connected = true;
+    let pending = null;
+    const isConnected = () => connected && (hot.isConnected?.() ?? true);
+    const endWait = () => {
+        pending?.close();
+        pending = null;
+    };
+    hot.on('vite:ws:connect', () => {
+        connected = true;
+    });
+    hot.on('vite:ws:disconnect', () => {
+        connected = false;
+        if (!pending) {
+            return;
+        }
+        endWait();
+        deps.infoPopup({
+            title: 'Reload variables interrupted',
+            content: 'The connection to the dev server was lost. Try again once it is back.',
+            type: 'warning',
+        });
+    });
+    hot.on('page-variables:reload:response', (payload) => {
+        endWait();
+        if ('error' in payload) {
+            deps.infoPopup({
+                title: 'Reload variables error',
+                content: payload.error,
+                type: 'danger',
+            });
+            return;
+        }
+        if (payload.skipped) {
+            deps.infoPopup({
+                title: 'Nothing to reload',
+                content: 'This page has no template variables to refresh.',
+                type: 'warning',
+            });
+            return;
+        }
+        deps.infoPopup({
+            title: 'Variables reloaded',
+            content: `Refetched ${payload.count} variable(s) from MI. Reloading the page…`,
+            type: 'success',
+            duration: 1200,
+        });
+        setTimeout(reload, 600);
+    });
+    return () => {
+        if (!isConnected()) {
+            deps.infoPopup({
+                title: 'No connection',
+                content: 'The dev server is not connected. Check that it is running, then try again.',
+                type: 'warning',
+            });
+            return;
+        }
+        endWait();
+        pending = deps.infoPopup({
+            title: 'Reloading variables',
+            content: 'Refetching live values from MI…',
+            type: 'info',
+            duration: 0,
+        });
+        hot.send('page-variables:reload', {});
+    };
+}
+
 /// <reference types="vite/client" />
 // Applied unconditionally (even if the panel itself is hidden) — this is what makes the
 // override affect the whole injected panel, not just its own markup.
@@ -1402,7 +1499,6 @@ function teardownConfirmModal(overlay, result) {
 }
 let panelController = null;
 let startReloadVariablesFlow = null;
-let pendingReloadVariablesPopup = null;
 function updatePopupPositions() {
     const popups = document.querySelectorAll('.pp-dev-info-namespace:not(.pp-dev-info)');
     const position = panelController?.getState().position ?? 'bottom-right';
@@ -1601,42 +1697,6 @@ if (hot) {
     if ($syncButton) {
         initSyncButton(hot, $syncButton, { infoPopup, confirmModal, closeAllConfirmModals });
     }
-    hot.on('page-variables:reload:response', (payload) => {
-        pendingReloadVariablesPopup?.close();
-        pendingReloadVariablesPopup = null;
-        if ('error' in payload) {
-            infoPopup({
-                title: 'Reload variables error',
-                content: payload.error,
-                type: 'danger',
-            });
-            return;
-        }
-        if (payload.skipped) {
-            infoPopup({
-                title: 'Nothing to reload',
-                content: 'This page has no template variables to refresh.',
-                type: 'warning',
-            });
-            return;
-        }
-        infoPopup({
-            title: 'Variables reloaded',
-            content: `Refetched ${payload.count} variable(s) from MI. Reloading the page…`,
-            type: 'success',
-            duration: 1200,
-        });
-        setTimeout(() => window.location.reload(), 600);
-    });
-    startReloadVariablesFlow = () => {
-        pendingReloadVariablesPopup?.close();
-        pendingReloadVariablesPopup = infoPopup({
-            title: 'Reloading variables',
-            content: 'Refetching live values from MI…',
-            type: 'info',
-            duration: 0,
-        });
-        hot.send('page-variables:reload', {});
-    };
+    startReloadVariablesFlow = initReloadVariables(hot, { infoPopup });
 }
 //# sourceMappingURL=client.js.map