@matdata/yasgui 5.5.0 → 5.6.0

package/src/TabSettingsModal.ts

@@ -34,6 +34,9 @@ const AcceptHeaderGraphMap: { key: string; value: string }[] = [
   { key: "TSV", value: "text/tab-separated-values,*/*;q=0.9" },
 ];
 
+// Default API Key header name
+const DEFAULT_API_KEY_HEADER = "X-API-Key";
+
 export default class TabSettingsModal {
   private tab: Tab;
   private modalOverlay!: HTMLElement;
@@ -423,7 +426,10 @@ export default class TabSettingsModal {
     const snippetsBarCheckbox = document.createElement("input");
     snippetsBarCheckbox.type = "checkbox";
     snippetsBarCheckbox.id = "showSnippetsBar";
-    snippetsBarCheckbox.checked = yasqe.getSnippetsBarVisible();
+    // Read from global config
+    const persistedValue = this.tab.yasgui.persistentConfig.getShowSnippetsBar();
+    snippetsBarCheckbox.checked =
+      persistedValue !== undefined ? persistedValue : this.tab.yasgui.config.showSnippetsBar !== false;
 
     const snippetsBarLabel = document.createElement("label");
     snippetsBarLabel.htmlFor = "showSnippetsBar";
@@ -689,22 +695,42 @@ export default class TabSettingsModal {
     const body = document.createElement("div");
     addClass(body, "authModalBody");
 
-    // Auth type (for now only basic, but designed for future)
+    // Auth type
     const typeSection = document.createElement("div");
     addClass(typeSection, "authModalSection");
     const typeLabel = document.createElement("label");
     typeLabel.textContent = "Authentication Type";
     const typeSelect = document.createElement("select");
+
     const basicOption = document.createElement("option");
     basicOption.value = "basic";
     basicOption.textContent = "HTTP Basic Authentication";
     typeSelect.appendChild(basicOption);
-    // Future: Add OAuth, Bearer Token, etc.
+
+    const bearerOption = document.createElement("option");
+    bearerOption.value = "bearer";
+    bearerOption.textContent = "Bearer Token";
+    typeSelect.appendChild(bearerOption);
+
+    const apiKeyOption = document.createElement("option");
+    apiKeyOption.value = "apiKey";
+    apiKeyOption.textContent = "API Key (Custom Header)";
+    typeSelect.appendChild(apiKeyOption);
+
+    // Set the current auth type
+    if (existingAuth) {
+      typeSelect.value = existingAuth.type;
+    }
+
     typeSection.appendChild(typeLabel);
     typeSection.appendChild(typeSelect);
     body.appendChild(typeSection);
 
-    // Username
+    // Basic Auth Fields
+    const basicAuthFields = document.createElement("div");
+    basicAuthFields.id = "basicAuthFields";
+    addClass(basicAuthFields, "authFieldsContainer");
+
     const usernameSection = document.createElement("div");
     addClass(usernameSection, "authModalSection");
     const usernameLabel = document.createElement("label");
@@ -712,13 +738,12 @@ export default class TabSettingsModal {
     const usernameInput = document.createElement("input");
     usernameInput.type = "text";
     usernameInput.placeholder = "Enter username";
-    usernameInput.value = existingAuth?.username || "";
+    usernameInput.value = existingAuth?.type === "basic" ? existingAuth.username : "";
     usernameInput.autocomplete = "username";
     usernameSection.appendChild(usernameLabel);
     usernameSection.appendChild(usernameInput);
-    body.appendChild(usernameSection);
+    basicAuthFields.appendChild(usernameSection);
 
-    // Password
     const passwordSection = document.createElement("div");
     addClass(passwordSection, "authModalSection");
     const passwordLabel = document.createElement("label");
@@ -726,11 +751,81 @@ export default class TabSettingsModal {
     const passwordInput = document.createElement("input");
     passwordInput.type = "password";
     passwordInput.placeholder = "Enter password";
-    passwordInput.value = existingAuth?.password || "";
+    passwordInput.value = existingAuth?.type === "basic" ? existingAuth.password : "";
     passwordInput.autocomplete = "current-password";
     passwordSection.appendChild(passwordLabel);
     passwordSection.appendChild(passwordInput);
-    body.appendChild(passwordSection);
+    basicAuthFields.appendChild(passwordSection);
+
+    body.appendChild(basicAuthFields);
+
+    // Bearer Token Fields
+    const bearerAuthFields = document.createElement("div");
+    bearerAuthFields.id = "bearerAuthFields";
+    addClass(bearerAuthFields, "authFieldsContainer");
+    bearerAuthFields.style.display = "none";
+
+    const tokenSection = document.createElement("div");
+    addClass(tokenSection, "authModalSection");
+    const tokenLabel = document.createElement("label");
+    tokenLabel.textContent = "Bearer Token";
+    const tokenInput = document.createElement("input");
+    tokenInput.type = "password";
+    tokenInput.placeholder = "Enter bearer token";
+    tokenInput.autocomplete = "off";
+    tokenInput.value = existingAuth?.type === "bearer" ? existingAuth.token : "";
+    tokenSection.appendChild(tokenLabel);
+    tokenSection.appendChild(tokenInput);
+    bearerAuthFields.appendChild(tokenSection);
+
+    body.appendChild(bearerAuthFields);
+
+    // API Key Fields
+    const apiKeyAuthFields = document.createElement("div");
+    apiKeyAuthFields.id = "apiKeyAuthFields";
+    addClass(apiKeyAuthFields, "authFieldsContainer");
+    apiKeyAuthFields.style.display = "none";
+
+    const headerNameSection = document.createElement("div");
+    addClass(headerNameSection, "authModalSection");
+    const headerNameLabel = document.createElement("label");
+    headerNameLabel.textContent = "Header Name";
+    const headerNameInput = document.createElement("input");
+    headerNameInput.type = "text";
+    headerNameInput.placeholder = `e.g., ${DEFAULT_API_KEY_HEADER}`;
+    headerNameInput.value = existingAuth?.type === "apiKey" ? existingAuth.headerName : DEFAULT_API_KEY_HEADER;
+    headerNameSection.appendChild(headerNameLabel);
+    headerNameSection.appendChild(headerNameInput);
+    apiKeyAuthFields.appendChild(headerNameSection);
+
+    const apiKeySection = document.createElement("div");
+    addClass(apiKeySection, "authModalSection");
+    const apiKeyLabel = document.createElement("label");
+    apiKeyLabel.textContent = "API Key";
+    const apiKeyInput = document.createElement("input");
+    apiKeyInput.type = "password";
+    apiKeyInput.placeholder = "Enter API key";
+    apiKeyInput.autocomplete = "off";
+    apiKeyInput.value = existingAuth?.type === "apiKey" ? existingAuth.apiKey : "";
+    apiKeySection.appendChild(apiKeyLabel);
+    apiKeySection.appendChild(apiKeyInput);
+    apiKeyAuthFields.appendChild(apiKeySection);
+
+    body.appendChild(apiKeyAuthFields);
+
+    // Function to toggle fields based on auth type
+    const toggleAuthFields = () => {
+      const authType = typeSelect.value;
+      basicAuthFields.style.display = authType === "basic" ? "block" : "none";
+      bearerAuthFields.style.display = authType === "bearer" ? "block" : "none";
+      apiKeyAuthFields.style.display = authType === "apiKey" ? "block" : "none";
+    };
+
+    // Set initial visibility
+    toggleAuthFields();
+
+    // Update visibility when auth type changes
+    typeSelect.onchange = toggleAuthFields;
 
     // Security notice
     const securityNotice = document.createElement("div");
@@ -778,22 +873,60 @@ export default class TabSettingsModal {
     saveButton.type = "button";
     addClass(saveButton, "authSaveButton");
     saveButton.onclick = () => {
-      const username = usernameInput.value.trim();
-      const password = passwordInput.value;
-
-      if (username && password) {
-        this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
-          authentication: {
-            type: "basic",
-            username,
-            password,
-          },
-        });
-        authModalOverlay.remove();
-        const endpointsList = this.modalContent.querySelector(".endpointsTable");
-        if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
-      } else {
-        alert("Please enter both username and password.");
+      const authType = typeSelect.value;
+
+      if (authType === "basic") {
+        const username = usernameInput.value.trim();
+        const password = passwordInput.value;
+
+        if (username && password) {
+          this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+            authentication: {
+              type: "basic",
+              username,
+              password,
+            },
+          });
+          authModalOverlay.remove();
+          const endpointsList = this.modalContent.querySelector(".endpointsTable");
+          if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+        } else {
+          alert("Please enter both username and password.");
+        }
+      } else if (authType === "bearer") {
+        const token = tokenInput.value.trim();
+
+        if (token) {
+          this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+            authentication: {
+              type: "bearer",
+              token,
+            },
+          });
+          authModalOverlay.remove();
+          const endpointsList = this.modalContent.querySelector(".endpointsTable");
+          if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+        } else {
+          alert("Please enter a bearer token.");
+        }
+      } else if (authType === "apiKey") {
+        const headerName = headerNameInput.value.trim();
+        const apiKey = apiKeyInput.value.trim();
+
+        if (headerName && apiKey) {
+          this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+            authentication: {
+              type: "apiKey",
+              headerName,
+              apiKey,
+            },
+          });
+          authModalOverlay.remove();
+          const endpointsList = this.modalContent.querySelector(".endpointsTable");
+          if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+        } else {
+          alert("Please enter both header name and API key.");
+        }
       }
     };
 
@@ -927,7 +1060,23 @@ export default class TabSettingsModal {
       }
       const snippetsBarCheckbox = document.getElementById("showSnippetsBar") as HTMLInputElement;
       if (snippetsBarCheckbox) {
-        yasqe.setSnippetsBarVisible(snippetsBarCheckbox.checked);
+        // Save globally to config and persistent storage
+        this.tab.yasgui.config.showSnippetsBar = snippetsBarCheckbox.checked;
+        this.tab.yasgui.persistentConfig.setShowSnippetsBar(snippetsBarCheckbox.checked);
+
+        // Apply to all tabs by updating each Yasqe instance's config and refreshing
+        this.tab.yasgui.persistentConfig.getTabs().forEach((tabId: string) => {
+          const tab = this.tab.yasgui.getTab(tabId);
+          if (tab) {
+            const tabYasqe = tab.getYasqe();
+            if (tabYasqe) {
+              // Update the individual Yasqe instance's config
+              tabYasqe.config.showSnippetsBar = snippetsBarCheckbox.checked;
+              // Refresh the snippets bar to reflect the change
+              tabYasqe.refreshSnippetsBar();
+            }
+          }
+        });
       }
       yasqe.saveQuery();
     }

package/src/defaults.ts

@@ -22,7 +22,6 @@ export default function initialize(): Config<CatalogueItem> {
       return "yagui_" + id;
     },
     tabName: "Query",
-    corsProxy: undefined,
     persistencyExpire: 60 * 60 * 24 * 30,
     persistenceLabelResponse: "response",
     persistenceLabelConfig: "config",
@@ -31,6 +30,7 @@ export default function initialize(): Config<CatalogueItem> {
     theme: undefined,
     showThemeToggle: true,
     orientation: "vertical",
+    showSnippetsBar: true,
     endpointButtons: undefined,
     endpointCatalogueOptions: {
       getData: () => {

package/src/endpointSelect.scss

@@ -4,6 +4,7 @@
     margin: 4px 0px;
     border: 2px solid #ccc;
     width: 100%;
+    min-width: 200px;
     &:hover {
       border-color: #bbb;
     }
@@ -125,6 +126,11 @@
     align-items: center;
     gap: 4px;
     margin-left: 4px;
+
+    // Hide on small screens (mobile)
+    @media (max-width: 768px) {
+      display: none;
+    }
   }
 
   .endpointButton {
@@ -152,5 +158,11 @@
       outline: 2px solid var(--yasgui-endpoint-button-focus, #5cb3fd);
       outline-offset: 2px;
     }
+
+    // Reduce padding on medium screens
+    @media (max-width: 1024px) {
+      padding: 4px 8px;
+      font-size: 12px;
+    }
   }
 }

package/src/index.ts

@@ -38,13 +38,23 @@ export interface EndpointButton {
 
 export interface EndpointConfig {
   endpoint: string;
-  label?: string;  // Optional label for the endpoint
-  showAsButton?: boolean;  // Whether to show as a quick-switch button (requires label)
-  authentication?: {
-    type: 'basic';  // For now only basic, but designed for future auth types
-    username: string;
-    password: string;
-  };
+  label?: string; // Optional label for the endpoint
+  showAsButton?: boolean; // Whether to show as a quick-switch button (requires label)
+  authentication?:
+    | {
+        type: "basic";
+        username: string;
+        password: string;
+      }
+    | {
+        type: "bearer";
+        token: string;
+      }
+    | {
+        type: "apiKey";
+        headerName: string;
+        apiKey: string;
+      };
 }
 export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
   /**
@@ -54,7 +64,6 @@ export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
   endpointInfo: ((tab?: Tab) => Element) | undefined;
   copyEndpointOnNewTab: boolean;
   tabName: string;
-  corsProxy: string | undefined;
   endpointCatalogueOptions: EndpointSelectConfig<EndpointObject>;
   endpointButtons?: EndpointButton[];
   //The function allows us to modify the config before we pass it on to a tab
@@ -68,7 +77,6 @@ export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
   yasr: YasrConfig;
   requestConfig: YasguiRequestConfig;
   contextMenuContainer: HTMLElement | undefined;
-  nonSslDomain?: string;
   theme?: Theme;
   showThemeToggle?: boolean;
   /**
@@ -77,6 +85,10 @@ export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
    * 'horizontal': YASQE on left, YASR on right
    */
   orientation?: "vertical" | "horizontal";
+  /**
+   * Show code snippets bar in all tabs (global setting)
+   */
+  showSnippetsBar?: boolean;
 }
 export type PartialConfig = {
   [P in keyof Config]?: Config[P] extends object ? Partial<Config[P]> : Config[P];
@@ -141,6 +153,12 @@ export class Yasgui extends EventEmitter {
     this.themeManager.listenToSystemTheme();
     this.persistentConfig = new PersistentConfig(this);
 
+    // Load persisted showSnippetsBar if available
+    const persistedShowSnippetsBar = this.persistentConfig.getShowSnippetsBar();
+    if (persistedShowSnippetsBar !== undefined) {
+      this.config.showSnippetsBar = persistedShowSnippetsBar;
+    }
+
     this.tabElements = new TabElements(this);
     this.tabPanelsEl = document.createElement("div");
 
@@ -416,7 +434,6 @@ export class Yasgui extends EventEmitter {
   public static Yasr = Yasr;
   public static Yasqe = Yasqe;
   public static defaults = initializeDefaults();
-  public static corsEnabled: { [endpoint: string]: boolean } = {};
 }
 
 export function getRandomId() {

package/src/version.ts

@@ -1,3 +1,3 @@
 // Version information for YASGUI
 // This file is auto-generated during build - do not edit manually
-export const VERSION = "4.6.1";
+export const VERSION = "5.6.0";