@matdata/yasgui 5.17.0 → 5.19.0

package/build/ts/src/queryManagement/QueryBrowser.js

@@ -15,6 +15,7 @@ import { getEndpointToAutoSwitch } from "./openManagedQuery";
 import { hashQueryText } from "./textHash";
 import { normalizeQueryFilename } from "./normalizeQueryFilename";
 import SaveManagedQueryModal from "./SaveManagedQueryModal";
+import QueryHistoryModal from "./QueryHistoryModal";
 import "./QueryBrowser.scss";
 export default class QueryBrowser {
     entrySignature(entry) {
@@ -176,6 +177,7 @@ export default class QueryBrowser {
         removeClass(this.rootEl, "open");
         this.rootEl.setAttribute("aria-hidden", "true");
         this.rootEl.style.display = "none";
+        this.closeQueryContextMenu();
         if (this.openerEl) {
             this.openerEl.focus();
             this.openerEl = undefined;
@@ -477,79 +479,142 @@ export default class QueryBrowser {
             tab.setManagedQueryMetadata(managedMetadata);
         });
     }
-    addQueryRowActions(row, backend, entry) {
-        const actions = document.createElement("span");
-        addClass(actions, "yasgui-query-browser__actions");
-        if (entry.kind === "folder") {
-            if (backend.renameFolder) {
-                const renameBtn = document.createElement("button");
-                renameBtn.type = "button";
-                addClass(renameBtn, "yasgui-query-browser__action");
-                renameBtn.textContent = "Rename";
-                renameBtn.setAttribute("aria-label", `Rename folder ${entry.label}`);
-                renameBtn.addEventListener("click", (e) => __awaiter(this, void 0, void 0, function* () {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    const next = window.prompt("Rename folder", entry.label);
-                    if (!next)
-                        return;
-                    const trimmed = next.trim();
-                    if (!trimmed || trimmed === entry.label)
-                        return;
-                    try {
-                        yield backend.renameFolder(entry.id, trimmed);
-                        this.folderEntriesById.clear();
-                        this.invalidateRenderCache();
-                        yield this.refresh();
-                    }
-                    catch (err) {
-                        window.alert(asWorkspaceBackendError(err).message);
-                    }
-                }));
-                actions.appendChild(renameBtn);
+    closeQueryContextMenu() {
+        if (this.queryContextMenuEl) {
+            this.queryContextMenuEl.remove();
+            this.queryContextMenuEl = undefined;
+        }
+        if (this.queryContextMenuCleanup) {
+            this.queryContextMenuCleanup();
+            this.queryContextMenuCleanup = undefined;
+        }
+    }
+    startInlineRename(row, currentLabel) {
+        return new Promise((resolve) => {
+            const labelEl = row.querySelector(".yasgui-query-browser__tree-label");
+            if (!labelEl) {
+                resolve(null);
+                return;
             }
-            if (backend.deleteFolder) {
-                const deleteBtn = document.createElement("button");
-                deleteBtn.type = "button";
-                addClass(deleteBtn, "yasgui-query-browser__action");
-                addClass(deleteBtn, "yasgui-query-browser__action--danger");
-                deleteBtn.textContent = "Delete";
-                deleteBtn.setAttribute("aria-label", `Delete folder ${entry.label}`);
-                deleteBtn.addEventListener("click", (e) => __awaiter(this, void 0, void 0, function* () {
+            const input = document.createElement("input");
+            input.type = "text";
+            input.value = currentLabel;
+            addClass(input, "yasgui-query-browser__rename-input");
+            let settled = false;
+            const finish = (value) => {
+                if (settled)
+                    return;
+                settled = true;
+                input.remove();
+                labelEl.style.display = "";
+                resolve(value);
+            };
+            input.addEventListener("click", (e) => e.stopPropagation());
+            input.addEventListener("keydown", (e) => {
+                e.stopPropagation();
+                if (e.key === "Enter") {
                     e.preventDefault();
-                    e.stopPropagation();
-                    const ok = window.confirm(`Delete folder '${entry.label}' and everything inside it? This cannot be undone.`);
-                    if (!ok)
-                        return;
+                    finish(input.value.trim() || null);
+                }
+                else if (e.key === "Escape") {
+                    e.preventDefault();
+                    finish(null);
+                }
+            });
+            input.addEventListener("blur", () => finish(null));
+            labelEl.style.display = "none";
+            labelEl.insertAdjacentElement("afterend", input);
+            input.focus();
+            input.select();
+        });
+    }
+    showInlineConfirm(row, message) {
+        return new Promise((resolve) => {
+            const savedChildren = Array.from(row.childNodes);
+            while (row.firstChild)
+                row.removeChild(row.firstChild);
+            const confirmEl = document.createElement("span");
+            addClass(confirmEl, "yasgui-query-browser__inline-confirm");
+            confirmEl.textContent = message;
+            confirmEl.addEventListener("click", (e) => e.stopPropagation());
+            const yes = document.createElement("button");
+            yes.type = "button";
+            yes.textContent = "Yes";
+            addClass(yes, "yasgui-query-browser__inline-confirm-btn");
+            addClass(yes, "yasgui-query-browser__inline-confirm-btn--danger");
+            const no = document.createElement("button");
+            no.type = "button";
+            no.textContent = "No";
+            addClass(no, "yasgui-query-browser__inline-confirm-btn");
+            let settled = false;
+            const finish = (value) => {
+                if (settled)
+                    return;
+                settled = true;
+                while (row.firstChild)
+                    row.removeChild(row.firstChild);
+                for (const child of savedChildren)
+                    row.appendChild(child);
+                resolve(value);
+            };
+            yes.addEventListener("click", (e) => {
+                e.stopPropagation();
+                finish(true);
+            });
+            no.addEventListener("click", (e) => {
+                e.stopPropagation();
+                finish(false);
+            });
+            row.appendChild(confirmEl);
+            row.appendChild(document.createTextNode(" "));
+            row.appendChild(yes);
+            row.appendChild(document.createTextNode(" "));
+            row.appendChild(no);
+            no.focus();
+        });
+    }
+    openQueryContextMenu(event, backend, entry, row) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.closeQueryContextMenu();
+        const menu = document.createElement("ul");
+        addClass(menu, "yasgui-query-browser__context-menu");
+        const makeItem = (label, handler, isDanger = false) => {
+            const li = document.createElement("li");
+            addClass(li, "yasgui-query-browser__context-menu-item");
+            if (isDanger)
+                addClass(li, "yasgui-query-browser__context-menu-item--danger");
+            li.textContent = label;
+            li.addEventListener("click", (e) => __awaiter(this, void 0, void 0, function* () {
+                e.stopPropagation();
+                this.closeQueryContextMenu();
+                yield handler();
+            }));
+            return li;
+        };
+        if (backend.getQueryUri) {
+            const uri = backend.getQueryUri(entry.id);
+            if (uri) {
+                menu.appendChild(makeItem("Copy URI", () => __awaiter(this, void 0, void 0, function* () {
                     try {
-                        yield backend.deleteFolder(entry.id);
-                        this.folderEntriesById.clear();
-                        this.invalidateRenderCache();
-                        yield this.refresh();
+                        yield navigator.clipboard.writeText(uri);
                     }
-                    catch (err) {
-                        window.alert(asWorkspaceBackendError(err).message);
+                    catch (_a) {
+                        window.prompt("Copy this URI:", uri);
                     }
-                }));
-                actions.appendChild(deleteBtn);
+                })));
             }
-            if (actions.childElementCount > 0)
-                row.appendChild(actions);
-            return;
         }
-        if (entry.kind !== "query")
-            return;
+        menu.appendChild(makeItem("History", () => __awaiter(this, void 0, void 0, function* () {
+            if (!this.queryHistoryModal)
+                this.queryHistoryModal = new QueryHistoryModal(this.yasgui);
+            yield this.queryHistoryModal.show(this.selectedWorkspaceId, backend, backend.type, entry.id, entry.label);
+        })));
         if (backend.renameQuery) {
-            const renameBtn = document.createElement("button");
-            renameBtn.type = "button";
-            addClass(renameBtn, "yasgui-query-browser__action");
-            renameBtn.textContent = "Rename";
-            renameBtn.setAttribute("aria-label", `Rename ${entry.label}`);
-            renameBtn.addEventListener("click", (e) => __awaiter(this, void 0, void 0, function* () {
+            const renameQuery = backend.renameQuery.bind(backend);
+            menu.appendChild(makeItem("Rename", () => __awaiter(this, void 0, void 0, function* () {
                 var _a, _b, _c, _d, _e, _f, _g;
-                e.preventDefault();
-                e.stopPropagation();
-                const next = window.prompt("Rename query", entry.label);
+                const next = yield this.startInlineRename(row, entry.label);
                 if (!next)
                     return;
                 const trimmed = next.trim();
@@ -566,12 +631,8 @@ export default class QueryBrowser {
                     const newPath = folderPrefix ? `${folderPrefix}/${newFilename}` : newFilename;
                     return { oldPath: entry.id, newPath };
                 })();
-                const originalText = renameBtn.textContent;
-                renameBtn.disabled = true;
-                renameBtn.textContent = "Renaming…";
-                addClass(renameBtn, "loading");
                 try {
-                    yield backend.renameQuery(entry.id, trimmed);
+                    yield renameQuery(entry.id, trimmed);
                     if (gitRenameInfo && gitRenameInfo.newPath && gitRenameInfo.oldPath) {
                         for (const tab of Object.values(this.yasgui._tabs)) {
                             const meta = (_b = (_a = tab).getManagedQueryMetadata) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -602,24 +663,14 @@ export default class QueryBrowser {
                     yield this.refresh();
                 }
                 catch (err) {
-                    renameBtn.disabled = false;
-                    renameBtn.textContent = originalText || "Rename";
-                    removeClass(renameBtn, "loading");
-                    window.alert(asWorkspaceBackendError(err).message);
+                    this.setStatus(asWorkspaceBackendError(err).message);
                 }
-            }));
-            actions.appendChild(renameBtn);
+            })));
         }
         if (backend.moveQuery) {
-            const moveBtn = document.createElement("button");
-            moveBtn.type = "button";
-            addClass(moveBtn, "yasgui-query-browser__action");
-            moveBtn.textContent = "Move";
-            moveBtn.setAttribute("aria-label", `Move ${entry.label} to a different folder`);
-            moveBtn.addEventListener("click", (e) => __awaiter(this, void 0, void 0, function* () {
+            const moveQuery = backend.moveQuery.bind(backend);
+            menu.appendChild(makeItem("Move", () => __awaiter(this, void 0, void 0, function* () {
                 var _a, _b, _c, _d, _e;
-                e.preventDefault();
-                e.stopPropagation();
                 const currentFolderPath = entry.parentId || "";
                 if (!this.folderPickerModal)
                     this.folderPickerModal = new SaveManagedQueryModal(this.yasgui);
@@ -628,12 +679,8 @@ export default class QueryBrowser {
                     return;
                 if (newFolderPath === currentFolderPath)
                     return;
-                const originalText = moveBtn.textContent;
-                moveBtn.disabled = true;
-                moveBtn.textContent = "Moving…";
-                addClass(moveBtn, "loading");
                 try {
-                    const newQueryId = yield backend.moveQuery(entry.id, newFolderPath);
+                    const newQueryId = yield moveQuery(entry.id, newFolderPath);
                     if (backend.type === "git" && newQueryId !== entry.id) {
                         for (const tab of Object.values(this.yasgui._tabs)) {
                             const meta = (_b = (_a = tab).getManagedQueryMetadata) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -663,50 +710,170 @@ export default class QueryBrowser {
                     yield this.refresh();
                 }
                 catch (err) {
-                    moveBtn.disabled = false;
-                    moveBtn.textContent = originalText || "Move";
-                    removeClass(moveBtn, "loading");
-                    window.alert(asWorkspaceBackendError(err).message);
+                    this.setStatus(asWorkspaceBackendError(err).message);
                 }
-            }));
-            actions.appendChild(moveBtn);
+            })));
         }
         if (backend.deleteQuery) {
-            const deleteBtn = document.createElement("button");
-            deleteBtn.type = "button";
-            addClass(deleteBtn, "yasgui-query-browser__action");
-            addClass(deleteBtn, "yasgui-query-browser__action--danger");
-            deleteBtn.textContent = "Delete";
-            deleteBtn.setAttribute("aria-label", `Delete ${entry.label}`);
-            deleteBtn.addEventListener("click", (e) => __awaiter(this, void 0, void 0, function* () {
-                e.preventDefault();
-                e.stopPropagation();
-                const ok = window.confirm(`Delete '${entry.label}'? This cannot be undone.`);
+            const deleteQuery = backend.deleteQuery.bind(backend);
+            menu.appendChild(makeItem("Delete", () => __awaiter(this, void 0, void 0, function* () {
+                const ok = yield this.showInlineConfirm(row, `Delete '${entry.label}'?`);
                 if (!ok)
                     return;
-                const originalText = deleteBtn.textContent;
-                deleteBtn.disabled = true;
-                deleteBtn.textContent = "Deleting…";
-                addClass(deleteBtn, "loading");
                 try {
-                    yield backend.deleteQuery(entry.id);
+                    yield deleteQuery(entry.id);
                     this.queryPreviewById.delete(entry.id);
                     this.folderEntriesById.clear();
                     this.invalidateRenderCache();
                     yield this.refresh();
                 }
                 catch (err) {
-                    deleteBtn.disabled = false;
-                    deleteBtn.textContent = originalText || "Delete";
-                    removeClass(deleteBtn, "loading");
-                    window.alert(asWorkspaceBackendError(err).message);
+                    this.setStatus(asWorkspaceBackendError(err).message);
                 }
+            }), true));
+        }
+        if (!menu.childElementCount)
+            return;
+        this.rootEl.appendChild(menu);
+        this.queryContextMenuEl = menu;
+        const VIEWPORT_PADDING = 4;
+        menu.style.position = "fixed";
+        menu.style.zIndex = "10001";
+        menu.style.left = `${event.clientX}px`;
+        menu.style.top = `${event.clientY}px`;
+        requestAnimationFrame(() => {
+            const rect = menu.getBoundingClientRect();
+            if (rect.right > window.innerWidth - VIEWPORT_PADDING) {
+                menu.style.left = `${Math.max(VIEWPORT_PADDING, event.clientX - rect.width)}px`;
+            }
+            if (rect.bottom > window.innerHeight - VIEWPORT_PADDING) {
+                menu.style.top = `${Math.max(VIEWPORT_PADDING, event.clientY - rect.height)}px`;
+            }
+        });
+        const onOutsideClick = (e) => {
+            if (!this.queryContextMenuEl)
+                return;
+            if (!menu.contains(e.target))
+                this.closeQueryContextMenu();
+        };
+        const onEsc = (e) => {
+            if (e.key === "Escape") {
+                e.stopPropagation();
+                this.closeQueryContextMenu();
+            }
+        };
+        requestAnimationFrame(() => {
+            document.addEventListener("click", onOutsideClick);
+            document.addEventListener("keydown", onEsc);
+        });
+        this.queryContextMenuCleanup = () => {
+            document.removeEventListener("click", onOutsideClick);
+            document.removeEventListener("keydown", onEsc);
+        };
+    }
+    openFolderContextMenu(event, backend, entry, row) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.closeQueryContextMenu();
+        const menu = document.createElement("ul");
+        addClass(menu, "yasgui-query-browser__context-menu");
+        const makeItem = (label, handler, isDanger = false) => {
+            const li = document.createElement("li");
+            addClass(li, "yasgui-query-browser__context-menu-item");
+            if (isDanger)
+                addClass(li, "yasgui-query-browser__context-menu-item--danger");
+            li.textContent = label;
+            li.addEventListener("click", (e) => __awaiter(this, void 0, void 0, function* () {
+                e.stopPropagation();
+                this.closeQueryContextMenu();
+                yield handler();
             }));
-            actions.appendChild(deleteBtn);
+            return li;
+        };
+        if (backend.renameFolder) {
+            menu.appendChild(makeItem("Rename", () => __awaiter(this, void 0, void 0, function* () {
+                const next = yield this.startInlineRename(row, entry.label);
+                if (!next)
+                    return;
+                const trimmed = next.trim();
+                if (!trimmed || trimmed === entry.label)
+                    return;
+                try {
+                    yield backend.renameFolder(entry.id, trimmed);
+                    this.folderEntriesById.clear();
+                    this.invalidateRenderCache();
+                    yield this.refresh();
+                }
+                catch (err) {
+                    this.setStatus(asWorkspaceBackendError(err).message);
+                }
+            })));
         }
-        if (actions.childElementCount > 0) {
-            row.appendChild(actions);
+        if (backend.deleteFolder) {
+            menu.appendChild(makeItem("Delete", () => __awaiter(this, void 0, void 0, function* () {
+                const ok = yield this.showInlineConfirm(row, `Delete folder '${entry.label}' and everything inside it?`);
+                if (!ok)
+                    return;
+                try {
+                    yield backend.deleteFolder(entry.id);
+                    this.folderEntriesById.clear();
+                    this.invalidateRenderCache();
+                    yield this.refresh();
+                }
+                catch (err) {
+                    this.setStatus(asWorkspaceBackendError(err).message);
+                }
+            }), true));
         }
+        if (!menu.childElementCount)
+            return;
+        this.rootEl.appendChild(menu);
+        this.queryContextMenuEl = menu;
+        const VIEWPORT_PADDING = 4;
+        menu.style.position = "fixed";
+        menu.style.zIndex = "10001";
+        menu.style.left = `${event.clientX}px`;
+        menu.style.top = `${event.clientY}px`;
+        requestAnimationFrame(() => {
+            const rect = menu.getBoundingClientRect();
+            if (rect.right > window.innerWidth - VIEWPORT_PADDING) {
+                menu.style.left = `${Math.max(VIEWPORT_PADDING, event.clientX - rect.width)}px`;
+            }
+            if (rect.bottom > window.innerHeight - VIEWPORT_PADDING) {
+                menu.style.top = `${Math.max(VIEWPORT_PADDING, event.clientY - rect.height)}px`;
+            }
+        });
+        const onOutsideClick = (e) => {
+            if (!this.queryContextMenuEl)
+                return;
+            if (!menu.contains(e.target))
+                this.closeQueryContextMenu();
+        };
+        const onEsc = (e) => {
+            if (e.key === "Escape") {
+                e.stopPropagation();
+                this.closeQueryContextMenu();
+            }
+        };
+        requestAnimationFrame(() => {
+            document.addEventListener("click", onOutsideClick);
+            document.addEventListener("keydown", onEsc);
+        });
+        this.queryContextMenuCleanup = () => {
+            document.removeEventListener("click", onOutsideClick);
+            document.removeEventListener("keydown", onEsc);
+        };
+    }
+    addQueryRowActions(row, backend, entry) {
+        if (entry.kind === "folder") {
+            row.addEventListener("contextmenu", (e) => this.openFolderContextMenu(e, backend, entry, row), {
+                passive: false,
+            });
+            return;
+        }
+        if (entry.kind !== "query")
+            return;
+        row.addEventListener("contextmenu", (e) => this.openQueryContextMenu(e, backend, entry, row), { passive: false });
     }
     renderFlatEntries(backend, entries) {
         this.clearList();