fix: returned the possibility to add arbitrary headers to the sparql request (fixes #114)

Author: MathiasVDA

packages/yasgui/src/TabSettingsModal.scss

@@ -290,6 +290,63 @@
   }
 }
 
+.keyValueContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.keyValueRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 8px;
+  align-items: center;
+
+  .keyInput,
+  .valueInput {
+    padding: 8px;
+    border: 1px solid var(--yasgui-input-border, #ccc);
+    border-radius: 4px;
+    font-size: 14px;
+    background-color: var(--yasgui-bg-secondary, white);
+    color: var(--yasgui-text-primary, #000);
+
+    &:focus {
+      outline: none;
+      border-color: var(--yasgui-input-focus, #337ab7);
+      box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.1);
+    }
+
+    &::placeholder {
+      color: var(--yasgui-text-secondary, #999);
+    }
+  }
+
+  .removeButton {
+    padding: 6px 10px;
+    background-color: var(--yasgui-danger-color, #d9534f);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--yasgui-danger-hover, #c9302c);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.3);
+    }
+
+    i {
+      pointer-events: none;
+    }
+  }
+}
+
 .prefixTextarea {
   width: 100%;
   padding: 10px;

packages/yasgui/src/TabSettingsModal.ts

@@ -24,6 +24,9 @@ const AcceptHeaderGraphMap: { key: string; value: string }[] = [
   { key: "TSV", value: "text/tab-separated-values,*/*;q=0.9" },
 ];
 
+// Type for key-value pairs (headers, args, etc.)
+type KeyValuePair = { name: string; value: string };
+
 // Default API Key header name
 const DEFAULT_API_KEY_HEADER = "X-API-Key";
 
@@ -1380,6 +1383,81 @@ export default class TabSettingsModal {
     acceptGraphSelect.setAttribute("data-config", "acceptHeaderGraph");
     acceptGraphSection.appendChild(acceptGraphSelect);
     container.appendChild(acceptGraphSection);
+
+    // Custom Headers section
+    const headersSection = this.createSection("Custom HTTP Headers");
+    const headersContainer = document.createElement("div");
+    addClass(headersContainer, "keyValueContainer");
+    headersContainer.setAttribute("data-config", "headers");
+
+    // Get existing headers
+    const existingHeaders = typeof reqConfig.headers === "function" ? {} : reqConfig.headers || {};
+    const headerPairs: KeyValuePair[] = Object.entries(existingHeaders).map(([name, value]) => ({
+      name,
+      value,
+    }));
+
+    // Draw existing headers
+    headerPairs.forEach((pair, index) => {
+      this.createKeyValueRow(headersContainer, pair, index);
+    });
+
+    // Add empty row for adding new headers
+    this.createKeyValueRow(headersContainer, { name: "", value: "" }, headerPairs.length);
+
+    headersSection.appendChild(headersContainer);
+    container.appendChild(headersSection);
+  }
+
+  private createKeyValueRow(container: HTMLElement, pair: KeyValuePair, index: number) {
+    const row = document.createElement("div");
+    addClass(row, "keyValueRow");
+
+    const nameInput = document.createElement("input");
+    nameInput.type = "text";
+    nameInput.placeholder = "Header Name";
+    nameInput.value = pair.name;
+    addClass(nameInput, "keyInput");
+
+    const valueInput = document.createElement("input");
+    valueInput.type = "text";
+    valueInput.placeholder = "Header Value";
+    valueInput.value = pair.value;
+    addClass(valueInput, "valueInput");
+
+    const removeButton = document.createElement("button");
+    removeButton.type = "button";
+    removeButton.innerHTML = '<i class="fas fa-times"></i>';
+    removeButton.title = "Remove header";
+    addClass(removeButton, "removeButton");
+
+    // Auto-add new empty row when typing in the last row
+    const onInput = () => {
+      const allRows = container.querySelectorAll(".keyValueRow");
+      const isLastRow = row === allRows[allRows.length - 1];
+
+      if (isLastRow && (nameInput.value.trim() || valueInput.value.trim())) {
+        // Add a new empty row
+        this.createKeyValueRow(container, { name: "", value: "" }, allRows.length);
+      }
+    };
+
+    nameInput.addEventListener("input", onInput);
+    valueInput.addEventListener("input", onInput);
+
+    removeButton.onclick = () => {
+      row.remove();
+      // Ensure there's always at least one empty row
+      const remainingRows = container.querySelectorAll(".keyValueRow");
+      if (remainingRows.length === 0) {
+        this.createKeyValueRow(container, { name: "", value: "" }, 0);
+      }
+    };
+
+    row.appendChild(nameInput);
+    row.appendChild(valueInput);
+    row.appendChild(removeButton);
+    container.appendChild(row);
   }
 
   private createSection(title: string): HTMLElement {
@@ -1546,6 +1624,22 @@ export default class TabSettingsModal {
           updates[config] = (select as HTMLSelectElement).value;
         }
       });
+
+      // Save custom headers
+      const headersContainer = requestContent.querySelector(".keyValueContainer[data-config='headers']");
+      if (headersContainer) {
+        const headers: { [key: string]: string } = {};
+        const rows = headersContainer.querySelectorAll(".keyValueRow");
+        rows.forEach((row) => {
+          const nameInput = row.querySelector(".keyInput") as HTMLInputElement;
+          const valueInput = row.querySelector(".valueInput") as HTMLInputElement;
+          if (nameInput && valueInput && nameInput.value.trim()) {
+            headers[nameInput.value.trim()] = valueInput.value;
+          }
+        });
+        updates.headers = headers;
+      }
+
       this.tab.setRequestConfig(updates);
     }