@matdata/yasgui 5.6.0 → 5.8.0

package/src/TabSettingsModal.scss

@@ -63,7 +63,7 @@
   background: var(--yasgui-bg-primary, white);
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  max-width: 800px;
+  max-width: 1000px;
   width: 90%;
   max-height: 90vh;
   display: flex;
@@ -160,6 +160,13 @@
 
 .settingsSection {
   margin-bottom: 20px;
+
+  h3 {
+    margin: 0 0 12px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--yasgui-text-primary, #000);
+  }
 }
 
 .settingsLabel {
@@ -297,7 +304,8 @@
 }
 
 .primaryButton,
-.secondaryButton {
+.secondaryButton,
+.dangerButton {
   padding: 8px 20px;
   border: none;
   border-radius: 4px;
@@ -320,7 +328,21 @@
   color: var(--yasgui-text-primary, #333);
 
   &:hover {
-    background: var(--yasgui-border-color, #d0d0d0);
+    background: var(--yasgui-bg-quaternary, #d0d0d0);
+  }
+}
+
+.dangerButton {
+  background: var(--yasgui-danger-bg, #dc3545);
+  color: white;
+  margin-top: 10px;
+
+  &:hover {
+    background: var(--yasgui-danger-hover, #c82333);
+  }
+
+  &:active {
+    background: var(--yasgui-danger-active, #bd2130);
   }
 }
 
@@ -849,6 +871,24 @@
   }
 }
 
+.authHelpLink {
+  padding: 10px 12px;
+  background: var(--yasgui-bg-secondary, #f5f5f5);
+  border: 1px solid var(--yasgui-border-color, #e0e0e0);
+  border-radius: 4px;
+  font-size: 13px;
+  margin-bottom: 12px;
+
+  a {
+    color: var(--yasgui-accent-color, #337ab7);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
 .authSecurityNotice {
   padding: 12px;
   background: var(--yasgui-warning-bg, #fff3cd);
@@ -925,6 +965,33 @@
   }
 }
 
+// OAuth 2.0 specific styling
+.authInputHelp {
+  font-size: 12px;
+  color: var(--yasgui-text-secondary, #666);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+.oauth2TokenStatus {
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+
+  &.authenticated {
+    background: var(--yasgui-success-bg, #d4edda);
+    color: var(--yasgui-success-text, #155724);
+    border: 1px solid var(--yasgui-success-border, #c3e6cb);
+  }
+
+  &.expired {
+    background: var(--yasgui-warning-bg, #fff3cd);
+    color: var(--yasgui-warning-text, #856404);
+    border: 1px solid var(--yasgui-warning-border, #ffeaa7);
+  }
+}
+
 // Add endpoint form styling
 .addEndpointForm {
   margin-top: 20px;

package/src/TabSettingsModal.ts

@@ -3,6 +3,8 @@ import "./TabSettingsModal.scss";
 import Tab from "./Tab";
 import * as ConfigExportImport from "./ConfigExportImport";
 import { VERSION } from "./version";
+import * as OAuth2Utils from "./OAuth2Utils";
+import PersistentConfig from "./PersistentConfig";
 
 // Theme toggle icons
 const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
@@ -92,7 +94,8 @@ export default class TabSettingsModal {
     // Modal overlay
     this.modalOverlay = document.createElement("div");
     addClass(this.modalOverlay, "tabSettingsModalOverlay");
-    this.modalOverlay.onclick = () => this.close();
+    // Removed: this.modalOverlay.onclick = () => this.close();
+    // Users must explicitly click 'Save' or 'Cancel' to close the modal
 
     // Modal content
     this.modalContent = document.createElement("div");
@@ -717,6 +720,11 @@ export default class TabSettingsModal {
     apiKeyOption.textContent = "API Key (Custom Header)";
     typeSelect.appendChild(apiKeyOption);
 
+    const oauth2Option = document.createElement("option");
+    oauth2Option.value = "oauth2";
+    oauth2Option.textContent = "OAuth 2.0";
+    typeSelect.appendChild(oauth2Option);
+
     // Set the current auth type
     if (existingAuth) {
       typeSelect.value = existingAuth.type;
@@ -813,12 +821,104 @@ export default class TabSettingsModal {
 
     body.appendChild(apiKeyAuthFields);
 
+    // OAuth 2.0 Fields
+    const oauth2AuthFields = document.createElement("div");
+    oauth2AuthFields.id = "oauth2AuthFields";
+    addClass(oauth2AuthFields, "authFieldsContainer");
+    oauth2AuthFields.style.display = "none";
+
+    const clientIdSection = document.createElement("div");
+    addClass(clientIdSection, "authModalSection");
+    const clientIdLabel = document.createElement("label");
+    clientIdLabel.textContent = "Client ID";
+    const clientIdInput = document.createElement("input");
+    clientIdInput.type = "text";
+    clientIdInput.placeholder = "Enter OAuth 2.0 client ID";
+    clientIdInput.value = existingAuth?.type === "oauth2" ? existingAuth.clientId : "";
+    clientIdSection.appendChild(clientIdLabel);
+    clientIdSection.appendChild(clientIdInput);
+    oauth2AuthFields.appendChild(clientIdSection);
+
+    const authEndpointSection = document.createElement("div");
+    addClass(authEndpointSection, "authModalSection");
+    const authEndpointLabel = document.createElement("label");
+    authEndpointLabel.textContent = "Authorization Endpoint";
+    const authEndpointInput = document.createElement("input");
+    authEndpointInput.type = "url";
+    authEndpointInput.placeholder = "https://provider.com/oauth/authorize";
+    authEndpointInput.value = existingAuth?.type === "oauth2" ? existingAuth.authorizationEndpoint : "";
+    authEndpointSection.appendChild(authEndpointLabel);
+    authEndpointSection.appendChild(authEndpointInput);
+    oauth2AuthFields.appendChild(authEndpointSection);
+
+    const tokenEndpointSection = document.createElement("div");
+    addClass(tokenEndpointSection, "authModalSection");
+    const tokenEndpointLabel = document.createElement("label");
+    tokenEndpointLabel.textContent = "Token Endpoint";
+    const tokenEndpointInput = document.createElement("input");
+    tokenEndpointInput.type = "url";
+    tokenEndpointInput.placeholder = "https://provider.com/oauth/token";
+    tokenEndpointInput.value = existingAuth?.type === "oauth2" ? existingAuth.tokenEndpoint : "";
+    tokenEndpointSection.appendChild(tokenEndpointLabel);
+    tokenEndpointSection.appendChild(tokenEndpointInput);
+    oauth2AuthFields.appendChild(tokenEndpointSection);
+
+    const redirectUriSection = document.createElement("div");
+    addClass(redirectUriSection, "authModalSection");
+    const redirectUriLabel = document.createElement("label");
+    redirectUriLabel.textContent = "Redirect URI (Optional)";
+    const redirectUriInput = document.createElement("input");
+    redirectUriInput.type = "url";
+    redirectUriInput.placeholder = window.location.origin + window.location.pathname;
+    redirectUriInput.value = existingAuth?.type === "oauth2" ? existingAuth.redirectUri || "" : "";
+    const redirectUriHelp = document.createElement("div");
+    redirectUriHelp.textContent = "Leave empty to use current page URL. Must be registered with OAuth provider.";
+    addClass(redirectUriHelp, "authInputHelp");
+    redirectUriSection.appendChild(redirectUriLabel);
+    redirectUriSection.appendChild(redirectUriInput);
+    redirectUriSection.appendChild(redirectUriHelp);
+    oauth2AuthFields.appendChild(redirectUriSection);
+
+    const scopeSection = document.createElement("div");
+    addClass(scopeSection, "authModalSection");
+    const scopeLabel = document.createElement("label");
+    scopeLabel.textContent = "Scope (Optional)";
+    const scopeInput = document.createElement("input");
+    scopeInput.type = "text";
+    scopeInput.placeholder = "e.g., read write";
+    scopeInput.value = existingAuth?.type === "oauth2" ? existingAuth.scope || "" : "";
+    const scopeHelp = document.createElement("div");
+    scopeHelp.textContent = "Space-separated list of OAuth 2.0 scopes";
+    addClass(scopeHelp, "authInputHelp");
+    scopeSection.appendChild(scopeLabel);
+    scopeSection.appendChild(scopeInput);
+    scopeSection.appendChild(scopeHelp);
+    oauth2AuthFields.appendChild(scopeSection);
+
+    // Show token status if already authenticated
+    if (existingAuth?.type === "oauth2" && existingAuth.accessToken) {
+      const tokenStatusSection = document.createElement("div");
+      addClass(tokenStatusSection, "authModalSection");
+      const tokenStatusLabel = document.createElement("label");
+      tokenStatusLabel.textContent = "Authentication Status";
+      const tokenStatus = document.createElement("div");
+      addClass(tokenStatus, "oauth2TokenStatus");
+      tokenStatus.innerHTML = "✓ Authenticated";
+      addClass(tokenStatus, "authenticated");
+      tokenStatusSection.appendChild(tokenStatusLabel);
+      tokenStatusSection.appendChild(tokenStatus);
+      oauth2AuthFields.appendChild(tokenStatusSection);
+    }
+
+    body.appendChild(oauth2AuthFields);
+
     // 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";
+      oauth2AuthFields.style.display = authType === "oauth2" ? "block" : "none";
     };
 
     // Set initial visibility
@@ -827,6 +927,14 @@ export default class TabSettingsModal {
     // Update visibility when auth type changes
     typeSelect.onchange = toggleAuthFields;
 
+    // Help link
+    const helpLink = document.createElement("div");
+    addClass(helpLink, "authHelpLink");
+    helpLink.innerHTML = `
+      📚 <a href="https://triply.cc/docs/yasgui#authentication" target="_blank" rel="noopener noreferrer">View authentication documentation</a>
+    `;
+    body.appendChild(helpLink);
+
     // Security notice
     const securityNotice = document.createElement("div");
     addClass(securityNotice, "authSecurityNotice");
@@ -850,13 +958,18 @@ export default class TabSettingsModal {
     removeButton.textContent = "Remove Authentication";
     removeButton.type = "button";
     addClass(removeButton, "authRemoveButton");
+    // Helper function to close modal and refresh endpoints list
+    const closeModalAndRefresh = () => {
+      authModalOverlay.remove();
+      const endpointsList = this.modalContent.querySelector(".endpointsTable");
+      if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+    };
+
     removeButton.onclick = () => {
       this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
         authentication: undefined,
       });
-      authModalOverlay.remove();
-      const endpointsList = this.modalContent.querySelector(".endpointsTable");
-      if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+      closeModalAndRefresh();
     };
     if (!existingAuth) {
       removeButton.disabled = true;
@@ -887,9 +1000,7 @@ export default class TabSettingsModal {
               password,
             },
           });
-          authModalOverlay.remove();
-          const endpointsList = this.modalContent.querySelector(".endpointsTable");
-          if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+          closeModalAndRefresh();
         } else {
           alert("Please enter both username and password.");
         }
@@ -903,9 +1014,7 @@ export default class TabSettingsModal {
               token,
             },
           });
-          authModalOverlay.remove();
-          const endpointsList = this.modalContent.querySelector(".endpointsTable");
-          if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+          closeModalAndRefresh();
         } else {
           alert("Please enter a bearer token.");
         }
@@ -921,12 +1030,81 @@ export default class TabSettingsModal {
               apiKey,
             },
           });
-          authModalOverlay.remove();
-          const endpointsList = this.modalContent.querySelector(".endpointsTable");
-          if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+          closeModalAndRefresh();
         } else {
           alert("Please enter both header name and API key.");
         }
+      } else if (authType === "oauth2") {
+        const clientId = clientIdInput.value.trim();
+        const authorizationEndpoint = authEndpointInput.value.trim();
+        const tokenEndpoint = tokenEndpointInput.value.trim();
+        const redirectUri = redirectUriInput.value.trim() || window.location.origin + window.location.pathname;
+        const scope = scopeInput.value.trim();
+
+        if (!clientId || !authorizationEndpoint || !tokenEndpoint) {
+          alert("Please enter Client ID, Authorization Endpoint, and Token Endpoint.");
+          return;
+        }
+
+        // Check if already authenticated (has access token)
+        if (existingAuth?.type === "oauth2" && existingAuth.accessToken) {
+          // Already has token, just save the configuration updates
+          this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+            authentication: {
+              type: "oauth2",
+              clientId,
+              authorizationEndpoint,
+              tokenEndpoint,
+              redirectUri,
+              scope,
+              accessToken: existingAuth.accessToken,
+              idToken: existingAuth.idToken,
+              refreshToken: existingAuth.refreshToken,
+              tokenExpiry: existingAuth.tokenExpiry,
+            },
+          });
+          closeModalAndRefresh();
+          return;
+        }
+
+        // Start OAuth 2.0 flow
+        saveButton.disabled = true;
+        saveButton.textContent = "Authenticating...";
+
+        OAuth2Utils.startOAuth2Flow({
+          clientId,
+          authorizationEndpoint,
+          tokenEndpoint,
+          redirectUri,
+          scope,
+        })
+          .then((tokenResponse) => {
+            const tokenExpiry = OAuth2Utils.calculateTokenExpiry(tokenResponse.expires_in);
+
+            this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+              authentication: {
+                type: "oauth2",
+                clientId,
+                authorizationEndpoint,
+                tokenEndpoint,
+                redirectUri,
+                scope,
+                accessToken: tokenResponse.access_token,
+                idToken: tokenResponse.id_token,
+                refreshToken: tokenResponse.refresh_token,
+                tokenExpiry,
+              },
+            });
+
+            closeModalAndRefresh();
+            alert("OAuth 2.0 authentication successful!");
+          })
+          .catch((error) => {
+            console.error("OAuth 2.0 authentication failed:", error);
+            alert("OAuth 2.0 authentication failed: " + error.message);
+            saveButton.disabled = false;
+            saveButton.textContent = "Save & Authenticate";
+          });
       }
     };
 
@@ -1599,6 +1777,28 @@ export default class TabSettingsModal {
     aboutSection.appendChild(footerInfo);
 
     container.appendChild(aboutSection);
+
+    // Storage Management Section
+    const storageSection = document.createElement("div");
+    addClass(storageSection, "settingsSection");
+
+    const storageTitle = document.createElement("h3");
+    storageTitle.textContent = "Storage Management";
+    storageSection.appendChild(storageTitle);
+
+    const storageDescription = document.createElement("p");
+    storageDescription.textContent =
+      "Clear all locally stored data including tabs, queries, endpoint configurations, and preferences. This action cannot be undone.";
+    addClass(storageDescription, "settingsHelp");
+    storageSection.appendChild(storageDescription);
+
+    const clearStorageButton = document.createElement("button");
+    clearStorageButton.textContent = "Clear Persistent Storage";
+    addClass(clearStorageButton, "dangerButton");
+    clearStorageButton.onclick = () => this.clearPersistentStorage();
+    storageSection.appendChild(clearStorageButton);
+
+    container.appendChild(storageSection);
   }
 
   private createAboutLink(label: string, url: string, description: string): HTMLElement {
@@ -1622,6 +1822,27 @@ export default class TabSettingsModal {
     return linkContainer;
   }
 
+  private clearPersistentStorage() {
+    const confirmed = confirm(
+      "Are you sure you want to clear all persistent storage?\n\n" +
+        "This will delete:\n" +
+        "- All saved tabs and queries\n" +
+        "- Endpoint configurations and history\n" +
+        "- Authentication settings\n" +
+        "- Editor preferences\n" +
+        "- Prefixes\n\n" +
+        "This action cannot be undone and the page will reload.",
+    );
+
+    if (confirmed) {
+      // Clear persistent storage
+      PersistentConfig.clear();
+
+      // Reload the page to reinitialize with empty storage
+      window.location.reload();
+    }
+  }
+
   public destroy() {
     if (this.modalOverlay && this.modalOverlay.parentNode) {
       this.modalOverlay.parentNode.removeChild(this.modalOverlay);

package/src/index.scss

@@ -1,4 +1,12 @@
+// Main YASGUI container - fills 100% of parent element
+// Parent element (typically body) should have height: 100%; width: 100%
 .yasgui {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  min-height: 800px; // Minimum to ensure usable UI (control bar + editor + yasr min)
+
   a {
     color: #337ab7;
     text-decoration: none;
@@ -28,6 +36,15 @@
     }
   }
 
+  // Container for tab panels - takes remaining height after tabsList
+  > div:not(.tabsList) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0; // Required for flex children to shrink properly
+    overflow: hidden;
+  }
+
   //css taken from https://www.muicss.com/docs/v1/css-js/forms
   $focusColor: #337ab7;
   $font-size: 15px;

package/src/index.ts

@@ -12,6 +12,8 @@ import { default as Yasr, Config as YasrConfig } from "@matdata/yasr";
 import { addClass, removeClass } from "@matdata/yasgui-utils";
 import GeoPlugin from "yasgui-geo-tg";
 import GraphPlugin from "@matdata/yasgui-graph-plugin";
+import TablePlugin from "@matdata/yasgui-table-plugin";
+import "@matdata/yasgui-table-plugin/dist/yasgui-table-plugin.min.css";
 import { ThemeManager, Theme } from "./ThemeManager";
 import "./index.scss";
 import "./themes.scss";
@@ -19,6 +21,7 @@ import "../../yasr/src/scss/global.scss";
 import "codemirror/theme/material-palenight.css";
 
 // Register plugins to Yasr
+Yasr.registerPlugin("Table", TablePlugin);
 Yasr.registerPlugin("Geo", GeoPlugin);
 Yasr.registerPlugin("Graph", GraphPlugin);
 if (window) {
@@ -54,6 +57,18 @@ export interface EndpointConfig {
         type: "apiKey";
         headerName: string;
         apiKey: string;
+      }
+    | {
+        type: "oauth2";
+        clientId: string;
+        authorizationEndpoint: string;
+        tokenEndpoint: string;
+        redirectUri?: string;
+        scope?: string;
+        accessToken?: string;
+        idToken?: string; // ID token for OIDC/Azure AD authentication
+        refreshToken?: string;
+        tokenExpiry?: number; // Unix timestamp in milliseconds
       };
 }
 export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {

package/src/tab.scss

@@ -2,8 +2,16 @@
   .tabPanel {
     display: none;
     position: relative;
+    flex: 1;
+    min-height: 0;
+
     &.active {
-      display: block;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .yasrWrapperEl {
+      height: 100%;
     }
 
     // Hide editor wrapper when yasr is in fullscreen
@@ -34,44 +42,95 @@
         display: flex;
         flex-direction: row;
         gap: 10px;
-        // Allow flexible height - can use 100vh or be constrained by parent
-        min-height: var(--yasgui-min-height);
-        max-height: calc(100vh - var(--yasgui-header-height));
+        height: 100%;
       }
 
       .editorwrapper {
-        flex: 1;
+        flex: 1 1 50%;
         display: flex;
         flex-direction: column;
-      }
-
-      // Make YASQE fill the vertical space in horizontal mode
-      .yasqe {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        min-height: 0;
+        min-width: 400px;
+        max-width: 50%;
+        height: 100%;
         overflow: hidden;
 
-        .CodeMirror {
-          height: calc(100vh - var(--yasgui-header-height)) !important;
+        // Unnamed div container needs full height
+        > div {
+          height: 100%;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+
+          // Container for tab panels - takes remaining height after tabsList
+          > div:not(.controlbar) {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 0; // Required for flex children to shrink properly
+            overflow: hidden;
+
+            // Make YASQE fill the vertical space in horizontal mode
+            .yasqe {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              height: 100%;
+              overflow: hidden;
+
+              .CodeMirror {
+                flex: 1;
+                height: 100%;
+              }
+            }
+          }
         }
       }
 
       .yasrWrapperEl {
-        flex: 1;
+        flex: 1 1 50%;
         min-width: 0;
-        overflow: hidden;
+        min-height: 400px;
       }
 
       .yasr {
         margin-top: 0;
         height: 100%;
       }
+
+      // Hide horizontal resize wrapper in horizontal mode (vertical resizer is used instead)
+      .horizontalResizeWrapper {
+        display: none;
+      }
+    }
+
+    // Vertical resizer for horizontal layout
+    .verticalResizeWrapper {
+      display: none; // Hidden by default (shown only in horizontal mode)
+      width: 10px;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      cursor: col-resize;
+      position: relative;
+      z-index: 10;
+
+      &:hover .verticalResizeChip {
+        visibility: visible;
+      }
+    }
+
+    .verticalResizeChip {
+      width: 4px;
+      height: 20%;
+      background-color: #d1d1d1;
+      visibility: hidden;
+      border-radius: 2px;
+    }
+
+    // Show vertical resizer only in horizontal mode
+    &.orientation-horizontal .verticalResizeWrapper {
+      display: flex;
     }
-  }
-  .yasr {
-    margin-top: 5px;
   }
 
   .tabContextButton {
@@ -90,9 +149,9 @@
     .svgImg {
       width: 15px;
       height: 15px;
-      font-family: initial; //font families can slightly misalign svgs with the .svgimg div
+      font-family: initial;
     }
-    // IE11 Needs this specified otherwise it will not resize the svg
+
     svg {
       width: 20px;
       height: 20px;
@@ -107,6 +166,7 @@
   .controlbar {
     display: flex;
     align-content: center;
+    flex-shrink: 0;
     max-height: 35px;
   }
 }

package/src/themes.scss

@@ -38,9 +38,8 @@
   --yasgui-nav-bg: #eee;
   --yasgui-match-highlight-bg: #dbdeed;
 
-  // Layout dimensions (used for horizontal orientation)
-  --yasgui-header-height: 150px; // Height to subtract from viewport in horizontal layout
-  --yasgui-min-height: 400px; // Minimum height for horizontal layout panels
+  // Minimum heights
+  --yasgui-yasr-min-height: 400px; // Minimum height for yasr
 
   --yasgui-endpoint-button-bg: #337ab7;
   --yasgui-endpoint-button-border: #337ab7;

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 = "5.6.0";
+export const VERSION = "5.8.0";