@matdata/yasgui 5.10.0 → 5.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
   "description": "Yet Another SPARQL GUI",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",

package/src/PersistentConfig.ts

@@ -1,6 +1,7 @@
 import { Storage as YStorage } from "@matdata/yasgui-utils";
 import Yasgui, { EndpointButton, EndpointConfig } from "./";
 import * as Tab from "./Tab";
+import type { WorkspaceConfig } from "./queryManagement/types";
 export var storageNamespace = "triply";
 export interface PersistedJson {
   endpointHistory: string[];
@@ -12,6 +13,8 @@ export interface PersistedJson {
   autoCaptureEnabled?: boolean;
   customEndpointButtons?: EndpointButton[]; // Legacy, kept for backwards compatibility
   endpointConfigs?: EndpointConfig[]; // New endpoint-based storage with auth
+  workspaces?: WorkspaceConfig[];
+  activeWorkspaceId?: string;
   theme?: "light" | "dark";
   orientation?: "vertical" | "horizontal";
   showSnippetsBar?: boolean;
@@ -28,6 +31,8 @@ function getDefaults(): PersistedJson {
     autoCaptureEnabled: true,
     customEndpointButtons: [],
     endpointConfigs: [],
+    workspaces: [],
+    activeWorkspaceId: undefined,
   };
 }
 
@@ -216,6 +221,62 @@ export default class PersistentConfig {
     const filtered = configs.filter((c) => c.endpoint !== endpoint);
     this.setEndpointConfigs(filtered);
   }
+
+  public getWorkspaces(): WorkspaceConfig[] {
+    return this.persistedJson.workspaces || [];
+  }
+
+  public getWorkspace(workspaceId: string): WorkspaceConfig | undefined {
+    return this.getWorkspaces().find((w) => w.id === workspaceId);
+  }
+
+  public setWorkspaces(workspaces: WorkspaceConfig[]) {
+    this.persistedJson.workspaces = workspaces;
+    this.toStorage();
+  }
+
+  public addOrUpdateWorkspace(workspace: WorkspaceConfig) {
+    const workspaces = this.getWorkspaces();
+    const existingIndex = workspaces.findIndex((w) => w.id === workspace.id);
+    const now = new Date().toISOString();
+
+    if (existingIndex >= 0) {
+      const existing = workspaces[existingIndex];
+      workspaces[existingIndex] = {
+        ...existing,
+        ...workspace,
+        createdAt: existing.createdAt || workspace.createdAt || now,
+        updatedAt: now,
+      };
+    } else {
+      workspaces.push({
+        ...workspace,
+        createdAt: workspace.createdAt || now,
+        updatedAt: now,
+      });
+    }
+
+    this.setWorkspaces(workspaces);
+  }
+
+  public deleteWorkspace(workspaceId: string) {
+    const workspaces = this.getWorkspaces();
+    const filtered = workspaces.filter((w) => w.id !== workspaceId);
+    this.setWorkspaces(filtered);
+
+    if (this.getActiveWorkspaceId() === workspaceId) {
+      this.setActiveWorkspaceId(undefined);
+    }
+  }
+
+  public getActiveWorkspaceId(): string | undefined {
+    return this.persistedJson.activeWorkspaceId;
+  }
+
+  public setActiveWorkspaceId(workspaceId: string | undefined) {
+    this.persistedJson.activeWorkspaceId = workspaceId;
+    this.toStorage();
+  }
   public static clear() {
     const storage = new YStorage(storageNamespace);
     storage.removeNamespace();

package/src/Tab.ts

@@ -10,24 +10,13 @@ import EndpointSelect from "./endpointSelect";
 import "./tab.scss";
 import { getRandomId, default as Yasgui, YasguiRequestConfig } from "./";
 import * as OAuth2Utils from "./OAuth2Utils";
-
-// Layout orientation toggle icons
-const HORIZONTAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24">
-  <rect x="2" y="4" width="9" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
-  <rect x="13" y="4" width="9" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
-</svg>`;
-
-const VERTICAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24">
-  <rect x="2" y="2" width="20" height="8" stroke="currentColor" stroke-width="2" fill="none"/>
-  <rect x="2" y="12" width="20" height="10" stroke="currentColor" stroke-width="2" fill="none"/>
-</svg>`;
-
-// Overflow dropdown icon (three horizontal dots / ellipsis menu)
-const OVERFLOW_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
-  <circle cx="5" cy="12" r="2"/>
-  <circle cx="12" cy="12" r="2"/>
-  <circle cx="19" cy="12" r="2"/>
-</svg>`;
+import type { ManagedTabMetadata } from "./queryManagement/types";
+import { hashQueryText } from "./queryManagement/textHash";
+import SaveManagedQueryModal from "./queryManagement/SaveManagedQueryModal";
+import { saveManagedQuery } from "./queryManagement/saveManagedQuery";
+import { getWorkspaceBackend } from "./queryManagement/backends/getWorkspaceBackend";
+import { asWorkspaceBackendError } from "./queryManagement/backends/errors";
+import { normalizeQueryFilename } from "./queryManagement/normalizeQueryFilename";
 
 export interface PersistedJsonYasr extends YasrPersistentConfig {
   responseSummary: Parser.ResponseSummary;
@@ -46,6 +35,7 @@ export interface PersistedJson {
   };
   requestConfig: YasguiRequestConfig;
   orientation?: "vertical" | "horizontal";
+  managedQuery?: ManagedTabMetadata;
 }
 
 export interface Tab {
@@ -112,6 +102,228 @@ export class Tab extends EventEmitter {
     return this.persistentJson.id;
   }
 
+  public getManagedQueryMetadata(): ManagedTabMetadata | undefined {
+    return this.persistentJson.managedQuery;
+  }
+
+  public setManagedQueryMetadata(metadata: ManagedTabMetadata | undefined) {
+    if (metadata) {
+      this.persistentJson.managedQuery = metadata;
+    } else {
+      delete this.persistentJson.managedQuery;
+    }
+    this.emit("change", this, this.persistentJson);
+  }
+
+  public isManagedQueryTab(): boolean {
+    return !!this.persistentJson.managedQuery;
+  }
+
+  public hasUnsavedManagedChanges(): boolean {
+    const meta = this.getManagedQueryMetadata();
+    if (!meta) return false;
+    if (!meta.lastSavedTextHash) return false;
+
+    try {
+      const current = this.yasqe ? this.yasqe.getValue() : this.persistentJson.yasqe.value;
+      const currentHash = hashQueryText(current);
+      return currentHash !== meta.lastSavedTextHash;
+    } catch {
+      return false;
+    }
+  }
+
+  private getDefaultSaveModalValues(): { workspaceId?: string; folderPath?: string; filename?: string; name?: string } {
+    const meta = this.getManagedQueryMetadata();
+    if (!meta) return { name: this.name() };
+    if (meta.backendType !== "git") return { workspaceId: meta.workspaceId };
+    const path = (meta.queryRef as any)?.path as string | undefined;
+    if (!path) return { workspaceId: meta.workspaceId };
+
+    const parts = path.split("/");
+    const filename = parts.pop();
+    const folderPath = parts.join("/");
+
+    return {
+      workspaceId: meta.workspaceId,
+      folderPath,
+      filename,
+      name: this.name(),
+    };
+  }
+
+  private getManagedQueryIdFromMetadata(meta: ManagedTabMetadata): string | undefined {
+    if (meta.backendType === "git") return (meta.queryRef as any)?.path as string | undefined;
+    return (meta.queryRef as any)?.managedQueryIri as string | undefined;
+  }
+
+  private versionRefFromVersionTag(backendType: "git" | "sparql", versionTag: string | undefined) {
+    if (!versionTag) return undefined;
+    if (backendType === "git") return { commitSha: versionTag };
+    return { managedQueryVersionIri: versionTag };
+  }
+
+  private getQueryTextForSave(): string {
+    // Saving can be triggered while the tab exists but the editor isn't initialized yet.
+    // In that case fall back to the persisted tab value.
+    try {
+      if (this.yasqe) return this.yasqe.getValue();
+    } catch {
+      // ignore
+    }
+    return this.persistentJson.yasqe.value;
+  }
+
+  public async saveManagedQueryOrSaveAsManagedQuery(): Promise<void> {
+    const meta = this.getManagedQueryMetadata();
+    if (!meta) {
+      await this.saveAsManagedQuery();
+      return;
+    }
+
+    const queryId = this.getManagedQueryIdFromMetadata(meta);
+    if (!queryId) {
+      await this.saveAsManagedQuery();
+      return;
+    }
+
+    const workspace = this.yasgui.persistentConfig.getWorkspace(meta.workspaceId);
+    if (!workspace) {
+      window.alert("Selected workspace no longer exists");
+      return;
+    }
+
+    const backend = getWorkspaceBackend(workspace, { persistentConfig: this.yasgui.persistentConfig });
+
+    const expectedVersionTag = (() => {
+      if (!meta?.lastSavedVersionRef) return undefined;
+      if (meta.backendType === "git") return (meta.lastSavedVersionRef as any)?.commitSha;
+      return (meta.lastSavedVersionRef as any)?.managedQueryVersionIri;
+    })();
+
+    try {
+      await backend.writeQuery(queryId, this.getQueryTextForSave(), { expectedVersionTag });
+    } catch (e) {
+      const err = asWorkspaceBackendError(e);
+      if (err.code === "CONFLICT") {
+        if (meta.backendType === "git") {
+          // Best-effort self-heal: some providers use a file sha for optimistic concurrency.
+          // If our stored version tag is stale/incorrect but the remote content is unchanged,
+          // refresh the tag and retry once.
+          try {
+            const latest = await backend.readQuery(queryId);
+            const latestHash = hashQueryText(latest.queryText);
+            if (meta.lastSavedTextHash && meta.lastSavedTextHash === latestHash && latest.versionTag) {
+              await backend.writeQuery(queryId, this.getQueryTextForSave(), { expectedVersionTag: latest.versionTag });
+            } else {
+              window.alert(
+                "Save conflict. Resolve the conflict externally (e.g., pull/rebase/merge) and then try saving again.",
+              );
+              return;
+            }
+          } catch {
+            window.alert(
+              "Save conflict. Resolve the conflict externally (e.g., pull/rebase/merge) and then try saving again.",
+            );
+            return;
+          }
+        } else {
+          window.alert("Save conflict. Refresh the query and try again.");
+          return;
+        }
+      }
+      window.alert(err.message);
+      return;
+    }
+
+    const read = await backend.readQuery(queryId);
+    const lastSavedTextHash = hashQueryText(read.queryText);
+    const lastSavedVersionRef = this.versionRefFromVersionTag(meta.backendType, read.versionTag);
+    this.setManagedQueryMetadata({
+      ...meta,
+      lastSavedTextHash,
+      lastSavedVersionRef,
+    });
+
+    // Ensure Query Browser reflects the updated version/metadata.
+    this.yasgui.queryBrowser.invalidateAndRefresh(meta.workspaceId);
+  }
+
+  public async saveAsManagedQuery(): Promise<void> {
+    const modal = new SaveManagedQueryModal(this.yasgui);
+
+    const defaults = this.getDefaultSaveModalValues();
+    let result:
+      | {
+          workspaceId: string;
+          folderPath: string;
+          name: string;
+          filename: string;
+          message?: string;
+        }
+      | undefined;
+
+    try {
+      const modalDefaults: any = {
+        workspaceId: defaults.workspaceId,
+        folderPath: defaults.folderPath || "",
+        name: defaults.name || this.name(),
+      };
+      // Only provide a filename default when we have one.
+      // Otherwise the modal will derive a suggested filename from the provided name.
+      if (defaults.filename) modalDefaults.filename = defaults.filename;
+
+      result = await modal.show(modalDefaults);
+    } catch {
+      return;
+    }
+
+    const workspace = this.yasgui.persistentConfig.getWorkspace(result.workspaceId);
+    if (!workspace) {
+      window.alert("Selected workspace no longer exists");
+      return;
+    }
+
+    const backend = getWorkspaceBackend(workspace, { persistentConfig: this.yasgui.persistentConfig });
+    const meta = this.getManagedQueryMetadata();
+
+    const expectedVersionTag = (() => {
+      if (!meta?.lastSavedVersionRef) return undefined;
+      if (meta.backendType === "git") return (meta.lastSavedVersionRef as any)?.commitSha;
+      return (meta.lastSavedVersionRef as any)?.managedQueryVersionIri;
+    })();
+
+    try {
+      modal.notifySaveInProgress();
+      const { managedMetadata } = await saveManagedQuery({
+        backend,
+        backendType: workspace.type,
+        workspaceId: workspace.id,
+        workspaceIri: workspace.type === "sparql" ? workspace.workspaceIri : undefined,
+        folderPath: result.folderPath,
+        name: result.name,
+        filename: result.filename,
+        queryText: this.getQueryTextForSave(),
+        associatedEndpoint: workspace.type === "sparql" ? this.getEndpoint() : undefined,
+        message: result.message,
+        expectedVersionTag,
+      });
+
+      modal.notifySaveComplete();
+      this.setManagedQueryMetadata(managedMetadata);
+      if (result.name && result.name.trim()) {
+        this.setName(result.name.trim());
+      }
+
+      // Ensure the saved query shows up immediately in the Query Browser.
+      this.yasgui.queryBrowser.invalidateAndRefresh(workspace.id);
+    } catch (e) {
+      modal.notifySaveComplete();
+      const err = asWorkspaceBackendError(e);
+      window.alert(err.message);
+    }
+  }
+
   private draw() {
     if (this.rootEl) return; //aready drawn
     this.rootEl = document.createElement("div");
@@ -179,6 +391,19 @@ export class Tab extends EventEmitter {
   }
 
   private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.defaultPrevented) return;
+
+    const saveModalOpen = !!document.querySelector(".saveManagedQueryModalOverlay.open");
+    if (!saveModalOpen) {
+      const isSaveShortcut =
+        (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey && event.key.toLowerCase() === "s";
+      if (isSaveShortcut) {
+        event.preventDefault();
+        void this.saveManagedQueryOrSaveAsManagedQuery();
+        return;
+      }
+    }
+
     // F11 - Toggle Yasqe fullscreen
     if (event.key === "F11") {
       event.preventDefault();
@@ -236,6 +461,26 @@ export class Tab extends EventEmitter {
   }
 
   public close() {
+    if (this.isManagedQueryTab() && this.hasUnsavedManagedChanges()) {
+      const wantsSave = window.confirm("This managed query has unsaved changes. Save before closing?");
+      if (wantsSave) {
+        void this.saveManagedQueryOrSaveAsManagedQuery().then(() => {
+          // Only close if we actually saved (metadata updated so no longer dirty)
+          if (!this.hasUnsavedManagedChanges()) {
+            this.closeNow();
+          }
+        });
+        return;
+      }
+
+      const discard = window.confirm("Discard changes and close the tab?");
+      if (!discard) return;
+    }
+
+    this.closeNow();
+  }
+
+  private closeNow() {
     this.detachKeyboardListeners();
     if (this.yasqe) this.yasqe.abortQuery();
     if (this.yasgui.getTab() === this) {
@@ -306,8 +551,11 @@ export class Tab extends EventEmitter {
     if (!this.orientationToggleButton) return;
 
     // Show the icon for the layout we'll switch TO (not the current layout)
+    // fa-columns for horizontal (side-by-side), fa-grip-lines for vertical (stacked)
     this.orientationToggleButton.innerHTML =
-      this.currentOrientation === "vertical" ? HORIZONTAL_LAYOUT_ICON : VERTICAL_LAYOUT_ICON;
+      this.currentOrientation === "vertical"
+        ? '<i class="fas fa-grip-lines-vertical"></i>'
+        : '<i class="fas fa-grip-lines"></i>';
     this.orientationToggleButton.title =
       this.currentOrientation === "vertical" ? "Switch to horizontal layout" : "Switch to vertical layout";
   }
@@ -483,7 +731,7 @@ export class Tab extends EventEmitter {
     if (!this.endpointOverflowButton) {
       this.endpointOverflowButton = document.createElement("button");
       addClass(this.endpointOverflowButton, "endpointOverflowBtn");
-      this.endpointOverflowButton.innerHTML = OVERFLOW_ICON;
+      this.endpointOverflowButton.innerHTML = '<i class="fas fa-ellipsis-vertical"></i>';
       this.endpointOverflowButton.title = "More endpoints";
       this.endpointOverflowButton.setAttribute("aria-label", "More endpoint options");
       this.endpointOverflowButton.setAttribute("aria-haspopup", "true");
@@ -693,6 +941,111 @@ export class Tab extends EventEmitter {
     return this;
   }
 
+  private suggestManagedFilenameFromName(name: string): string {
+    const trimmed = name.trim();
+    const safe = trimmed.replace(/[\\/]/g, "-");
+    return normalizeQueryFilename(safe);
+  }
+
+  /**
+   * User-triggered tab rename.
+   * For managed queries, also renames the managed query entry in the Query Browser.
+   */
+  public async renameTab(newName: string): Promise<void> {
+    const nextName = newName.trim();
+    if (!nextName) return;
+    if (nextName === this.name()) return;
+
+    const meta = this.getManagedQueryMetadata();
+    if (!meta) {
+      this.setName(nextName);
+      return;
+    }
+
+    const workspace = this.yasgui.persistentConfig.getWorkspace(meta.workspaceId);
+    if (!workspace) {
+      window.alert("Selected workspace no longer exists");
+      return;
+    }
+
+    const backend = getWorkspaceBackend(workspace, { persistentConfig: this.yasgui.persistentConfig });
+
+    if (meta.backendType === "sparql") {
+      const queryId = this.getManagedQueryIdFromMetadata(meta);
+      if (!queryId) return;
+      if (!backend.renameQuery) {
+        window.alert("This workspace does not support renaming queries");
+        return;
+      }
+
+      try {
+        this.getTabListEl().setAsRenaming(true);
+        await backend.renameQuery(queryId, nextName);
+        this.setName(nextName);
+        this.yasgui.queryBrowser.invalidateAndRefresh(meta.workspaceId);
+      } catch (e) {
+        const err = asWorkspaceBackendError(e);
+        window.alert(err.message);
+      } finally {
+        this.getTabListEl().setAsRenaming(false);
+      }
+
+      return;
+    }
+
+    // Git: rename underlying file path so the Query Browser label changes.
+    const oldPath = (meta.queryRef as any)?.path as string | undefined;
+    if (!oldPath) {
+      this.setName(nextName);
+      return;
+    }
+
+    const parts = oldPath.split("/").filter(Boolean);
+    const oldFilename = parts.pop() || oldPath;
+    const folderPrefix = parts.join("/");
+
+    const newFilename = this.suggestManagedFilenameFromName(nextName);
+    const newPath = folderPrefix ? `${folderPrefix}/${newFilename}` : newFilename;
+
+    if (newPath === oldPath) {
+      // Nothing to rename on the backend; still allow tab label change.
+      this.setName(nextName);
+      return;
+    }
+
+    try {
+      this.getTabListEl().setAsRenaming(true);
+      await backend.writeQuery(newPath, this.getQueryTextForSave(), {
+        message: `Rename ${oldFilename} to ${newFilename}`,
+      });
+
+      if (!backend.deleteQuery) {
+        window.alert("This workspace does not support deleting queries, so the old file could not be removed.");
+      } else {
+        await backend.deleteQuery(oldPath);
+      }
+
+      const read = await backend.readQuery(newPath);
+      const lastSavedTextHash = hashQueryText(read.queryText);
+      const lastSavedVersionRef = this.versionRefFromVersionTag("git", read.versionTag);
+
+      this.setManagedQueryMetadata({
+        ...meta,
+        queryRef: { ...(meta.queryRef as any), path: newPath },
+        lastSavedTextHash,
+        lastSavedVersionRef,
+      });
+
+      this.setName(nextName);
+      this.yasgui.queryBrowser.invalidateAndRefresh(meta.workspaceId);
+    } catch (e) {
+      const err = asWorkspaceBackendError(e);
+      window.alert(err.message);
+    } finally {
+      this.getTabListEl().setAsRenaming(false);
+    }
+  }
+
   public hasResults() {
     return !!this.yasr?.results;
   }
@@ -917,6 +1270,20 @@ export class Tab extends EventEmitter {
         return processedReqConfig as PlainRequestConfig;
       },
     };
+
+    // Override editor-level save shortcut.
+    // Yasqe binds Ctrl+S to `yasqe.saveQuery()` (local storage) by default, which can prevent our document-level handler.
+    const existingExtraKeys = (yasqeConf as any).extraKeys;
+    const mergedExtraKeys: Record<string, any> =
+      existingExtraKeys && typeof existingExtraKeys === "object" ? { ...existingExtraKeys } : {};
+    mergedExtraKeys["Ctrl-S"] = () => {
+      const saveModalOpen = !!document.querySelector(".saveManagedQueryModalOverlay.open");
+      if (saveModalOpen) return;
+      void this.saveManagedQueryOrSaveAsManagedQuery();
+    };
+    mergedExtraKeys["Cmd-S"] = mergedExtraKeys["Ctrl-S"];
+    (yasqeConf as any).extraKeys = mergedExtraKeys;
+
     if (!yasqeConf.hintConfig) {
       yasqeConf.hintConfig = {};
     }
@@ -928,6 +1295,14 @@ export class Tab extends EventEmitter {
     }
     this.yasqe = new Yasqe(this.yasqeWrapperEl, yasqeConf);
 
+    // Hook up the save button to managed query save
+    this.yasqe.on("saveManagedQuery", () => {
+      void this.saveManagedQueryOrSaveAsManagedQuery();
+    });
+
+    // Show/hide save button based on workspace configuration
+    this.updateSaveButtonVisibility();
+
     this.yasqe.on("blur", this.handleYasqeBlur);
     this.yasqe.on("query", this.handleYasqeQuery);
     this.yasqe.on("queryBefore", this.handleYasqeQueryBefore);
@@ -943,6 +1318,42 @@ export class Tab extends EventEmitter {
     this.attachYasqeMouseHandler();
   }
 
+  private updateSaveButtonVisibility() {
+    if (!this.yasqe) return;
+    const workspaces = this.yasgui.persistentConfig.getWorkspaces();
+    const hasWorkspaces = workspaces && workspaces.length > 0;
+    this.yasqe.setSaveButtonVisible(hasWorkspaces);
+  }
+
+  private initSaveManagedQueryIcon() {
+    if (!this.yasqe) return;
+
+    const wrapper = this.yasqe.getWrapperElement();
+    const buttons = wrapper?.querySelector(".yasqe_buttons");
+    if (!buttons) return;
+
+    // Avoid duplicates if Yasqe ever re-renders
+    if (buttons.querySelector(".yasqe_saveManagedQueryButton")) return;
+
+    const queryBtn = buttons.querySelector(".yasqe_queryButton");
+    if (!queryBtn) return;
+
+    const saveBtn = document.createElement("button");
+    saveBtn.type = "button";
+    saveBtn.className = "yasqe_saveManagedQueryButton";
+    saveBtn.title = "Save managed query";
+    saveBtn.setAttribute("aria-label", "Save managed query");
+    saveBtn.innerHTML = '<i class="fas fa-save" aria-hidden="true"></i>';
+
+    saveBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      void this.saveManagedQueryOrSaveAsManagedQuery();
+    });
+
+    buttons.insertBefore(saveBtn, queryBtn);
+  }
+
   private destroyYasqe() {
     // As Yasqe extends of CM instead of eventEmitter, it doesn't expose the removeAllListeners function, so we should unregister all events manually
     this.yasqe?.off("blur", this.handleYasqeBlur);

package/src/TabContextMenu.ts

@@ -15,6 +15,7 @@ export default class TabContextMenu {
   private newTabEl!: HTMLElement;
   private renameTabEl!: HTMLElement;
   private copyTabEl!: HTMLElement;
+  private saveManagedQueryEl!: HTMLElement;
   private closeTabEl!: HTMLElement;
   private closeOtherTabsEl!: HTMLElement;
   private reOpenOldTab!: HTMLElement;
@@ -49,6 +50,8 @@ export default class TabContextMenu {
 
     this.copyTabEl = this.getMenuItemEl("Copy Tab");
 
+    this.saveManagedQueryEl = this.getMenuItemEl("Save as managed query");
+
     this.closeTabEl = this.getMenuItemEl("Close Tab");
 
     this.closeOtherTabsEl = this.getMenuItemEl("Close other tabs");
@@ -59,6 +62,7 @@ export default class TabContextMenu {
     dropDownList.appendChild(this.newTabEl);
     dropDownList.appendChild(this.renameTabEl);
     dropDownList.appendChild(this.copyTabEl);
+    dropDownList.appendChild(this.saveManagedQueryEl);
     // Add divider
     dropDownList.appendChild(document.createElement("hr"));
     dropDownList.appendChild(this.closeTabEl);
@@ -105,6 +109,12 @@ export default class TabContextMenu {
       this.yasgui.addTab(true, config);
     };
 
+    this.saveManagedQueryEl.onclick = async () => {
+      if (!tab) return;
+      await tab.saveManagedQueryOrSaveAsManagedQuery();
+      this.closeConfigMenu();
+    };
+
     // Close tab functionality
     this.closeTabEl.onclick = () => tab?.close();