@matdata/yasqe 5.9.0 → 5.10.0

package/package.json

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

package/src/__tests__/share-test.ts

@@ -0,0 +1,237 @@
+/**
+ * Share Functionality Tests
+ */
+
+import { describe, it } from "mocha";
+import { expect } from "chai";
+
+describe("Share Functionality", () => {
+  describe("Shell String Escaping", () => {
+    it("should escape single quotes for shell commands", () => {
+      const input = "test'value";
+      const escaped = input.replace(/'/g, "'\\''");
+      expect(escaped).to.equal("test'\\''value");
+    });
+
+    it("should handle strings with multiple single quotes", () => {
+      const input = "it's a 'test'";
+      const escaped = input.replace(/'/g, "'\\''");
+      expect(escaped).to.equal("it'\\''s a '\\''test'\\''");
+    });
+  });
+
+  describe("PowerShell String Escaping", () => {
+    it("should escape backticks, double quotes, and dollar signs", () => {
+      const input = 'test"value$var`tick';
+      const escaped = input.replace(/`/g, "``").replace(/"/g, '`"').replace(/\$/g, "`$");
+      expect(escaped).to.equal('test`"value`$var``tick');
+    });
+
+    it("should handle strings with multiple special characters", () => {
+      const input = '$test`"value"';
+      const escaped = input.replace(/`/g, "``").replace(/"/g, '`"').replace(/\$/g, "`$");
+      expect(escaped).to.equal('`$test```"value`"');
+    });
+  });
+
+  describe("URL Normalization", () => {
+    it("should detect absolute URLs", () => {
+      const url = "https://example.com/sparql";
+      expect(url.indexOf("http")).to.equal(0);
+    });
+
+    it("should detect relative URLs", () => {
+      const url = "/sparql";
+      expect(url.indexOf("http")).to.equal(-1);
+      expect(url.indexOf("/")).to.equal(0);
+    });
+
+    it("should handle relative path normalization", () => {
+      const pathname = "/app/editor";
+      const relativePath = "sparql";
+
+      let basePath = pathname;
+      if (!basePath.endsWith("/")) {
+        const lastSlashIndex = basePath.lastIndexOf("/");
+        basePath = lastSlashIndex >= 0 ? basePath.substring(0, lastSlashIndex + 1) : "/";
+      }
+      const result = basePath + relativePath;
+
+      expect(result).to.equal("/app/sparql");
+    });
+
+    it("should handle pathname ending with slash", () => {
+      const pathname = "/app/";
+      const relativePath = "sparql";
+
+      let basePath = pathname;
+      if (!basePath.endsWith("/")) {
+        const lastSlashIndex = basePath.lastIndexOf("/");
+        basePath = lastSlashIndex >= 0 ? basePath.substring(0, lastSlashIndex + 1) : "/";
+      }
+      const result = basePath + relativePath;
+
+      expect(result).to.equal("/app/sparql");
+    });
+  });
+
+  describe("Command Generation Format", () => {
+    it("should format cURL commands with proper line breaks", () => {
+      const segments = [
+        "curl",
+        "'https://example.com/sparql'",
+        "--data",
+        "'query=SELECT'",
+        "-X",
+        "POST",
+        "-H",
+        "'Authorization: Bearer token'",
+      ];
+      const curlString = segments.join(" \\\n  ");
+
+      expect(curlString).to.include("curl");
+      expect(curlString).to.include("\\\n");
+      expect(curlString).to.include("https://example.com/sparql");
+    });
+
+    it("should format PowerShell commands with proper structure", () => {
+      const lines = [
+        "$params = @{",
+        '    Uri = "https://example.com/sparql"',
+        '    Method = "Post"',
+        "    Headers = @{",
+        '        "Accept" = "application/sparql-results+json"',
+        '        "Authorization" = "Bearer token"',
+        "    }",
+        '    ContentType = "application/x-www-form-urlencoded"',
+        '    Body = "query=SELECT"',
+        '    OutFile = "result.json"',
+        "}",
+        "",
+        "Invoke-WebRequest @params",
+      ];
+      const psString = lines.join("\n");
+
+      expect(psString).to.include("$params");
+      expect(psString).to.include("Invoke-WebRequest");
+      expect(psString).to.include("Headers");
+      expect(psString).to.include("OutFile");
+      expect(psString).to.include("Accept");
+    });
+
+    it("should format wget commands with proper line breaks", () => {
+      const segments = [
+        "wget",
+        "'https://example.com/sparql'",
+        "--body-data",
+        "'query=SELECT'",
+        "--method",
+        "POST",
+        "--header",
+        "'Authorization: Bearer token'",
+        "-O -",
+      ];
+      const wgetString = segments.join(" \\\n  ");
+
+      expect(wgetString).to.include("wget");
+      expect(wgetString).to.include("\\\n");
+      expect(wgetString).to.include("--body-data");
+    });
+  });
+
+  describe("URL Normalization", () => {
+    it("should handle absolute URLs", () => {
+      const url = "https://example.com/sparql";
+      expect(url.indexOf("http")).to.equal(0);
+    });
+
+    it("should detect relative URLs", () => {
+      const url = "/sparql";
+      expect(url.indexOf("http")).to.equal(-1);
+      expect(url.indexOf("/")).to.equal(0);
+    });
+
+    it("should detect relative paths", () => {
+      const url = "sparql";
+      expect(url.indexOf("http")).to.equal(-1);
+      expect(url.indexOf("/")).to.not.equal(0);
+    });
+  });
+
+  describe("Authentication Detection Logic", () => {
+    it("should detect Authorization header", () => {
+      const headers = { Authorization: "Bearer token" };
+      expect(headers["Authorization"]).to.exist;
+    });
+
+    it("should detect API key headers by name", () => {
+      const headerName = "X-API-Key";
+      const lowerHeader = headerName.toLowerCase();
+      expect(lowerHeader).to.include("key");
+    });
+
+    it("should detect token headers by name", () => {
+      const headerName = "X-Auth-Token";
+      const lowerHeader = headerName.toLowerCase();
+      expect(lowerHeader).to.include("token");
+    });
+
+    it("should detect auth headers by name", () => {
+      const headerName = "X-Custom-Auth";
+      const lowerHeader = headerName.toLowerCase();
+      expect(lowerHeader).to.include("auth");
+    });
+
+    it("should not detect non-auth headers", () => {
+      const headerName = "Content-Type";
+      const lowerHeader = headerName.toLowerCase();
+      expect(lowerHeader).to.not.include("key");
+      expect(lowerHeader).to.not.include("token");
+      expect(lowerHeader).to.not.include("auth");
+    });
+  });
+
+  describe("String Escaping", () => {
+    it("should escape double quotes in PowerShell", () => {
+      const value = 'test"value';
+      const escaped = value.replace(/"/g, '`"');
+      expect(escaped).to.equal('test`"value');
+    });
+
+    it("should handle single quotes in shell commands", () => {
+      const value = "test'value";
+      const wrapped = `'${value}'`;
+      expect(wrapped).to.equal("'test'value'");
+    });
+  });
+
+  describe("HTTP Method Handling", () => {
+    it("should use POST for SPARQL updates", () => {
+      const queryMode: string = "update";
+      const method = queryMode === "update" ? "POST" : "GET";
+      expect(method).to.equal("POST");
+    });
+
+    it("should default to configured method for SPARQL queries", () => {
+      const queryMode: string = "query";
+      const method = queryMode === "update" ? "POST" : "GET";
+      expect(method).to.equal("GET");
+    });
+  });
+
+  describe("Query String Formatting", () => {
+    it("should format query parameters", () => {
+      const params = { query: "SELECT * WHERE { ?s ?p ?o }", format: "json" };
+      const keys = Object.keys(params);
+      expect(keys).to.include("query");
+      expect(keys).to.include("format");
+    });
+
+    it("should handle URL encoding", () => {
+      const query = "SELECT * WHERE { ?s ?p ?o }";
+      const encoded = encodeURIComponent(query);
+      expect(encoded).to.include("SELECT");
+      expect(encoded).to.not.include(" ");
+    });
+  });
+});

package/src/index.ts

@@ -18,6 +18,12 @@ import CodeMirror from "./CodeMirror";
 import { YasqeAjaxConfig } from "./sparql";
 import { spfmt } from "sparql-formatter";
 
+// Toast notification timing constants
+const TOAST_DEFAULT_DURATION = 3000; // 3 seconds
+const TOAST_WARNING_DURATION = 4000; // 4 seconds for warnings
+const TOAST_WARNING_DELAY = 500; // Delay before showing auth warning
+const TOAST_FADEOUT_DURATION = 300; // Fade out animation duration
+
 export interface Yasqe {
   on(eventName: "query", handler: (instance: Yasqe, req: Request, abortController?: AbortController) => void): void;
   off(eventName: "query", handler: (instance: Yasqe, req: Request, abortController?: AbortController) => void): void;
@@ -262,87 +268,217 @@ export class Yasqe extends CodeMirror {
         let popup: HTMLDivElement | undefined = document.createElement("div");
         popup.className = "yasqe_sharePopup";
         buttons.appendChild(popup);
-        document.body.addEventListener(
-          "click",
-          (event) => {
-            if (popup && event.target !== popup && !popup.contains(<any>event.target)) {
-              popup.remove();
-              popup = undefined;
+
+        // Toast notification element for warnings
+        let toastElement: HTMLDivElement | undefined;
+        let toastTimeout: number | undefined;
+
+        const showToast = (
+          message: string,
+          duration: number = TOAST_DEFAULT_DURATION,
+          type: "info" | "warning" = "info",
+        ) => {
+          // Remove existing toast if any
+          if (toastElement) {
+            toastElement.remove();
+          }
+          // Clear existing timeout
+          if (toastTimeout !== undefined) {
+            clearTimeout(toastTimeout);
+          }
+
+          toastElement = document.createElement("div");
+          toastElement.className = type === "warning" ? "yasqe_toast yasqe_toast-warning" : "yasqe_toast";
+
+          // Add warning icon for warning toasts
+          if (type === "warning") {
+            const iconWrapper = document.createElement("span");
+            iconWrapper.className = "yasqe_toast-icon";
+            const icon = drawSvgStringAsElement(imgs.warning);
+            iconWrapper.appendChild(icon);
+            toastElement.appendChild(iconWrapper);
+          }
+
+          const messageSpan = document.createElement("span");
+          messageSpan.className = "yasqe_toast-message";
+          messageSpan.textContent = message;
+          toastElement.appendChild(messageSpan);
+
+          document.body.appendChild(toastElement);
+
+          // Auto-remove after duration
+          toastTimeout = window.setTimeout(() => {
+            if (toastElement) {
+              toastElement.classList.add("yasqe_toast-fadeout");
+              setTimeout(() => {
+                toastElement?.remove();
+                toastElement = undefined;
+              }, TOAST_FADEOUT_DURATION);
             }
-          },
-          true,
-        );
-        var input = document.createElement("input");
-        input.type = "text";
-        input.value = this.config.createShareableLink(this);
-
-        input.onfocus = function () {
-          input.select();
+          }, duration);
         };
-        // Work around Chrome's little problem
-        input.onmouseup = function () {
-          // $this.unbind("mouseup");
-          return false;
+
+        // Create event listener that can be removed
+        const closePopupHandler = (event: MouseEvent) => {
+          if (popup && event.target !== popup && !popup.contains(<any>event.target)) {
+            popup.remove();
+            popup = undefined;
+            // Clean up toast when popup closes
+            if (toastElement) {
+              toastElement.remove();
+              toastElement = undefined;
+            }
+            if (toastTimeout !== undefined) {
+              clearTimeout(toastTimeout);
+            }
+            // Remove this event listener to prevent memory leak
+            document.body.removeEventListener("click", closePopupHandler, true);
+          }
         };
+
+        document.body.addEventListener("click", closePopupHandler, true);
+
         popup.innerHTML = "";
 
-        var inputWrapper = document.createElement("div");
-        inputWrapper.className = "inputWrapper";
+        // Helper function to copy text to clipboard
+        const copyToClipboard = async (text: string, buttonText: string, hasAuth: boolean = false) => {
+          try {
+            // Check if Clipboard API is available
+            if (!navigator.clipboard || !navigator.clipboard.writeText) {
+              // Fallback for older browsers or non-secure contexts
+              const textArea = document.createElement("textarea");
+              textArea.value = text;
+              textArea.style.position = "fixed";
+              textArea.style.left = "-999999px";
+              document.body.appendChild(textArea);
+              textArea.select();
+              try {
+                document.execCommand("copy");
+                document.body.removeChild(textArea);
+                showToast(`${buttonText} copied to clipboard!`);
+              } catch (err) {
+                document.body.removeChild(textArea);
+                throw new Error("Copy command not supported");
+              }
+            } else {
+              await navigator.clipboard.writeText(text);
+              showToast(`${buttonText} copied to clipboard!`);
+            }
 
-        inputWrapper.appendChild(input);
+            // Show warning if credentials are included
+            if (hasAuth) {
+              setTimeout(() => {
+                showToast(
+                  "Warning: Authentication credentials included in copied content",
+                  TOAST_WARNING_DURATION,
+                  "warning",
+                );
+              }, TOAST_WARNING_DELAY);
+            }
+          } catch (err) {
+            console.error("Failed to copy to clipboard:", err);
+            showToast("Failed to copy to clipboard. Please copy manually.", 2000);
+          }
+        };
 
-        popup.appendChild(inputWrapper);
+        // Create title
+        const title = document.createElement("div");
+        title.className = "yasqe_sharePopup_title";
+        title.textContent = "Share Query";
+        popup.appendChild(title);
+
+        // Create button container
+        const buttonContainer = document.createElement("div");
+        buttonContainer.className = "yasqe_sharePopup_buttons";
+        popup.appendChild(buttonContainer);
+
+        // URL button
+        const urlBtn = document.createElement("button");
+        urlBtn.innerText = "Copy URL";
+        urlBtn.className = "yasqe_btn yasqe_btn-sm yasqe_shareBtn";
+        buttonContainer.appendChild(urlBtn);
+        urlBtn.onclick = async () => {
+          const url = this.config.createShareableLink(this);
+          await copyToClipboard(url, "URL");
+        };
 
-        // We need to track which buttons are drawn here since the two implementations don't play nice together
-        const popupInputButtons: HTMLButtonElement[] = [];
+        // URL Shorten button (if configured)
         const createShortLink = this.config.createShortLink;
         if (createShortLink) {
-          popup.className = popup.className += " enableShort";
-          const shortBtn = document.createElement("button");
-          popupInputButtons.push(shortBtn);
-          shortBtn.innerHTML = "Shorten";
-          shortBtn.className = "yasqe_btn yasqe_btn-sm shorten";
-          popup.appendChild(shortBtn);
-          shortBtn.onclick = () => {
-            popupInputButtons.forEach((button) => (button.disabled = true));
-            createShortLink(this, input.value).then(
-              (value) => {
-                input.value = value;
-                input.focus();
-              },
-              (err) => {
-                const errSpan = document.createElement("span");
-                errSpan.className = "shortlinkErr";
-                // Throwing a string or an object should work
-                let textContent = "An error has occurred";
-                if (typeof err === "string" && err.length !== 0) {
-                  textContent = err;
-                } else if (err.message && err.message.length !== 0) {
-                  textContent = err.message;
-                }
-                errSpan.textContent = textContent;
-                input.replaceWith(errSpan);
-              },
-            );
+          const shortenBtn = document.createElement("button");
+          shortenBtn.innerText = "Shorten URL";
+          shortenBtn.className = "yasqe_btn yasqe_btn-sm yasqe_shareBtn";
+          buttonContainer.appendChild(shortenBtn);
+          shortenBtn.onclick = async () => {
+            shortenBtn.disabled = true;
+            shortenBtn.innerText = "Shortening...";
+            try {
+              const longUrl = this.config.createShareableLink(this);
+              const shortUrl = await createShortLink(this, longUrl);
+              await copyToClipboard(shortUrl, "Shortened URL");
+              shortenBtn.innerText = "Shorten URL";
+              shortenBtn.disabled = false;
+            } catch (err) {
+              shortenBtn.innerText = "Shorten URL";
+              shortenBtn.disabled = false;
+              let errorMsg = "Failed to shorten URL";
+              if (typeof err === "string" && err.length !== 0) {
+                errorMsg = err;
+              } else if ((err as any).message && (err as any).message.length !== 0) {
+                errorMsg = (err as any).message;
+              }
+              showToast(errorMsg, 3000);
+            }
           };
         }
 
+        // cURL button
         const curlBtn = document.createElement("button");
-        popupInputButtons.push(curlBtn);
-        curlBtn.innerText = "cURL";
-        curlBtn.className = "yasqe_btn yasqe_btn-sm curl";
-        popup.appendChild(curlBtn);
-        curlBtn.onclick = () => {
-          popupInputButtons.forEach((button) => (button.disabled = true));
-          input.value = this.getAsCurlString();
-          input.focus();
-          popup?.appendChild(curlBtn);
+        curlBtn.innerText = "Copy cURL";
+        curlBtn.className = "yasqe_btn yasqe_btn-sm yasqe_shareBtn";
+        buttonContainer.appendChild(curlBtn);
+        curlBtn.onclick = async () => {
+          const curlString = this.getAsCurlString();
+          const hasAuth = this.hasAuthenticationCredentials();
+          await copyToClipboard(curlString, "cURL command", hasAuth);
+        };
+
+        // PowerShell button
+        const psBtn = document.createElement("button");
+        psBtn.innerText = "Copy PowerShell";
+        psBtn.className = "yasqe_btn yasqe_btn-sm yasqe_shareBtn";
+        buttonContainer.appendChild(psBtn);
+        psBtn.onclick = async () => {
+          const psString = this.getAsPowerShellString();
+          const hasAuth = this.hasAuthenticationCredentials();
+          await copyToClipboard(psString, "PowerShell command", hasAuth);
+        };
+
+        // wget button
+        const wgetBtn = document.createElement("button");
+        wgetBtn.innerText = "Copy wget";
+        wgetBtn.className = "yasqe_btn yasqe_btn-sm yasqe_shareBtn";
+        buttonContainer.appendChild(wgetBtn);
+        wgetBtn.onclick = async () => {
+          const wgetString = this.getAsWgetString();
+          const hasAuth = this.hasAuthenticationCredentials();
+          await copyToClipboard(wgetString, "wget command", hasAuth);
+        };
+
+        // Position popup after layout is complete
+        const positionPopup = () => {
+          if (!popup) return;
+          const svgPos = svgShare.getBoundingClientRect();
+          popup.style.top = svgShare.offsetTop + svgPos.height + "px";
+          popup.style.left = svgShare.offsetLeft + svgShare.clientWidth - popup.clientWidth + "px";
         };
 
-        const svgPos = svgShare.getBoundingClientRect();
-        popup.style.top = svgShare.offsetTop + svgPos.height + "px";
-        popup.style.left = svgShare.offsetLeft + svgShare.clientWidth - popup.clientWidth + "px";
-        input.focus();
+        if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
+          window.requestAnimationFrame(positionPopup);
+        } else {
+          // Fallback for environments without requestAnimationFrame
+          setTimeout(positionPopup, 0);
+        }
       };
     }
     /**
@@ -1398,6 +1534,19 @@ export class Yasqe extends CodeMirror {
     return Sparql.getAsCurlString(this, config);
   }
 
+  public getAsPowerShellString(config?: Sparql.YasqeAjaxConfig): string {
+    return Sparql.getAsPowerShellString(this, config);
+  }
+
+  public getAsWgetString(config?: Sparql.YasqeAjaxConfig): string {
+    return Sparql.getAsWgetString(this, config);
+  }
+
+  public hasAuthenticationCredentials(config?: Sparql.YasqeAjaxConfig): boolean {
+    const ajaxConfig = Sparql.getAjaxConfig(this, config);
+    return ajaxConfig ? Sparql.hasAuthenticationCredentials(ajaxConfig) : false;
+  }
+
   public abortQuery() {
     if (this.req) {
       if (this.abortController) {