sqlui 0.1.70 → 0.1.72

data/client/resources/sqlui.js

@@ -24443,7 +24443,6 @@
      const moveListener = (event) => {
        const y = event.clientY - startY;
        const height = Math.min(max, Math.max(min, startHeight + y));
-       console.log(`y: ${y}, height: ${height}`);
        resizableElement.style.height = `${height}px`;
      };
 
@@ -24465,12 +24464,10 @@
 
    const PAGE_SIZE = 100;
 
+   const TABS = ['query', 'graph', 'saved', 'structure', 'help'];
+
    function getSqlFromUrl (url) {
      const params = url.searchParams;
-     if (params.has('file') && params.has('sql')) {
-       // TODO: show an error.
-       throw new Error('You can only specify a file or sql param, not both.')
-     }
      if (params.has('sql')) {
        return params.get('sql')
      } else if (params.has('file')) {
@@ -24501,6 +24498,12 @@
      const runCurrentLabel = `run selection (${isMac ? '⌘' : 'Ctrl'}-Enter)`;
      const runAllLabel = `run all (${isMac ? '⌘' : 'Ctrl'}-Shift-Enter)`;
 
+     const dismissFileButton = document.getElementById('dismiss-file-button');
+     addEventListener(dismissFileButton, 'click', (event) => dismissFile());
+
+     const saveFileButton = document.getElementById('save-file-button');
+     addEventListener(saveFileButton, 'click', (event) => saveFile());
+
      const submitButtonCurrent = document.getElementById('submit-button-current');
      submitButtonCurrent.value = runCurrentLabel;
      addEventListener(submitButtonCurrent, 'click', (event) => submitCurrent(event.target, event));
@@ -24695,10 +24698,10 @@
    function selectTab (event, tab) {
      const url = new URL(window.location);
      setActionInUrl(url, tab);
-     route(event.target, event, url, true);
+     route(event.target, event, url);
    }
 
-   function route (target = null, event = null, url = null, internal = false) {
+   function route (target = null, event = null, url = null, run = false) {
      closePopup();
 
      if (url) {
@@ -24716,7 +24719,7 @@
          }
        }
        if (url.href !== window.location.href) {
-         window.history.pushState({}, '', url);
+         pushState(url);
        }
      } else {
        url = new URL(window.location);
@@ -24740,10 +24743,10 @@
 
      switch (window.tab) {
        case 'query':
-         selectQueryTab(internal);
+         selectQueryTab(run);
          break
        case 'graph':
-         selectGraphTab(internal);
+         selectGraphTab(run);
          break
        case 'saved':
          selectSavedTab();
@@ -24932,7 +24935,7 @@
      setTimeout(() => { helpBoxElement.focus(); }, 0);
    }
 
-   function selectGraphTab (internal) {
+   function selectGraphTab (run) {
      document.getElementById('query-box').style.display = 'flex';
      document.getElementById('submit-box').style.display = 'flex';
      document.getElementById('graph-box').style.display = 'flex';
@@ -24940,17 +24943,19 @@
      document.getElementById('cancel-button').style.visibility = 'hidden';
      updateDownloadButtons(window?.sqlFetch);
      focus(getSelection());
-     maybeFetchResult(internal);
+     maybeFetchResult(run);
+     updateFileBox();
    }
 
-   function selectQueryTab (internal) {
+   function selectQueryTab (run) {
      document.getElementById('query-box').style.display = 'flex';
      document.getElementById('submit-box').style.display = 'flex';
      document.getElementById('result-box').style.display = 'flex';
      document.getElementById('fetch-sql-box').style.display = 'none';
      document.getElementById('cancel-button').style.visibility = 'hidden';
      focus(getSelection());
-     maybeFetchResult(internal);
+     maybeFetchResult(run);
+     updateFileBox();
    }
 
    function selectSavedTab () {
@@ -24959,7 +24964,12 @@
      });
 
      const savedElement = document.getElementById('saved-box');
-     setTimeout(() => { savedElement.focus(); }, 0);
+     setTimeout(() => {
+       // Little hack so that hitting tab after loading the saved tab will cause focus to go to the first file.
+       savedElement.tabIndex = 0;
+       savedElement.focus();
+       savedElement.tabIndex = -1;
+     }, 0);
 
      const saved = window.metadata.saved;
      const numFiles = Object.keys(saved).length;
@@ -24970,60 +24980,75 @@
      }
 
      Object.values(saved).forEach(file => {
+       const gitHubElement = document.createElement('a');
+       gitHubElement.classList.add('saved-github-link');
+       gitHubElement.href = file.github_url;
+       gitHubElement.target = '_blank';
+       addEventListener(gitHubElement, 'click', (event) => {
+         event.stopPropagation();
+       });
+       addEventListener(gitHubElement, 'keydown', (event) => {
+         if (event.keyCode === 13) {
+           event.stopPropagation();
+         }
+       });
+
+       const gitHubImageElement = document.createElement('img');
+       gitHubImageElement.alt = 'GitHub';
+       gitHubImageElement.src = window.resourcePathMap['github.svg'];
+       gitHubElement.appendChild(gitHubImageElement);
+
        const viewUrl = new URL(window.location.origin + window.location.pathname);
        setActionInUrl(viewUrl, 'query');
        viewUrl.searchParams.set('file', file.filename);
 
-       const viewLinkElement = document.createElement('a');
-       viewLinkElement.classList.add('link', 'view-link');
-       viewLinkElement.innerText = 'view';
-       viewLinkElement.href = viewUrl.pathname + viewUrl.search;
-       addEventListener(viewLinkElement, 'click', (event) => {
-         clearResult();
-         route(event.target, event, viewUrl, true);
-       });
+       const nameElement = document.createElement('a');
+       nameElement.classList.add('saved-name');
+       nameElement.innerText = file.filename;
+       nameElement.href = viewUrl.pathname + viewUrl.search;
 
-       const runUrl = new URL(window.location.origin + window.location.pathname);
-       setActionInUrl(runUrl, 'query');
-       runUrl.searchParams.set('file', file.filename);
-       runUrl.searchParams.set('run', 'true');
+       const headerElement = document.createElement('div');
+       headerElement.classList.add('saved-file-header');
+       headerElement.appendChild(nameElement);
+       headerElement.appendChild(gitHubElement);
 
-       const runLinkElement = document.createElement('a');
-       runLinkElement.classList.add('link', 'run-link');
-       runLinkElement.innerText = 'run';
-       runLinkElement.href = runUrl.pathname + runUrl.search;
-       addEventListener(runLinkElement, 'click', (event) => {
-         clearResult();
-         route(event.target, event, runUrl, true);
-       });
+       const contentLines = file.contents.endsWith('\n') ? file.contents.slice(0, -1).split('\n') : file.contents.split('\n');
+       let preview;
+       if (contentLines.length > 5) {
+         preview = contentLines.slice(0, 4).join('\n');
+       } else {
+         preview = contentLines.join('\n');
+       }
 
-       const viewOnGithubLinkElement = document.createElement('a');
-       viewOnGithubLinkElement.classList.add('link', 'view-github-link');
-       viewOnGithubLinkElement.innerText = 'github';
-       viewOnGithubLinkElement.href = file.github_url;
-       viewOnGithubLinkElement.target = '_blank';
+       const previewElement = document.createElement('a');
+       previewElement.classList.add('saved-preview');
+       previewElement.tabIndex = -1;
+       previewElement.innerText = preview;
+       previewElement.href = viewUrl.pathname + viewUrl.search;
 
-       const nameElement = document.createElement('h2');
-       nameElement.innerText = file.filename;
-       nameElement.classList.add('name');
+       if (contentLines.length > 5) {
+         const truncatedElement = document.createElement('div');
+         truncatedElement.classList.add('saved-truncated');
+         truncatedElement.innerText = `... ${contentLines.length - 4} more lines`;
+         previewElement.appendChild(truncatedElement);
+       }
 
-       const linksElement = document.createElement('div');
-       linksElement.classList.add('links');
-       linksElement.appendChild(viewLinkElement);
-       linksElement.appendChild(runLinkElement);
-       linksElement.appendChild(viewOnGithubLinkElement);
-
-       const descriptionElement = document.createElement('p');
-       descriptionElement.innerText = file.description;
-       descriptionElement.classList.add('description');
-
-       const divElement = document.createElement('div');
-       divElement.classList.add('saved-list-item');
-       divElement.appendChild(nameElement);
-       divElement.appendChild(linksElement);
-       divElement.appendChild(descriptionElement);
-
-       savedElement.appendChild(divElement);
+       const itemElement = document.createElement('div');
+       itemElement.classList.add('saved-list-item');
+       itemElement.appendChild(headerElement);
+       itemElement.appendChild(previewElement);
+       addEventListener(itemElement, 'click', (event) => {
+         clearResult();
+         route(event.target, event, viewUrl);
+       });
+       addEventListener(itemElement, 'keydown', (event) => {
+         if (event.keyCode === 13) {
+           clearResult();
+           route(event.target, event, viewUrl);
+         }
+       });
+
+       savedElement.appendChild(itemElement);
      });
    }
 
@@ -25048,19 +25073,15 @@
      window.lastEditorValueSet = null;
 
      const url = new URL(window.location);
-     let sql = getEditorValue().trim();
-     sql = sql === '' ? null : sql;
-
-     url.searchParams.set('run', 'true');
+     let sql = getEditorValue();
+     sql = sql.trim() === '' ? null : sql;
 
      if (url.searchParams.has('file')) {
        if (window.metadata.saved[url.searchParams.get('file')].contents !== getEditorValue()) {
-         url.searchParams.delete('file');
          url.searchParams.set('sql', sql);
        }
      } else {
-       let sqlParam = url.searchParams.get('sql')?.trim();
-       sqlParam = sqlParam === '' ? null : sqlParam;
+       const sqlParam = url.searchParams.has('sql') ? url.searchParams.get('sql') : null;
 
        if (sqlParam !== sql && sql === null) {
          url.searchParams.delete('sql');
@@ -25079,7 +25100,6 @@
        url.searchParams.delete('selection');
        url.searchParams.delete('sql');
        url.searchParams.delete('file');
-       url.searchParams.delete('run');
      }
 
      route(target, event, url, true);
@@ -25225,31 +25245,18 @@
      )
    }
 
-   function maybeFetchResult (internal) {
+   function maybeFetchResult (run) {
      const url = new URL(window.location);
      const params = url.searchParams;
      const sql = params.get('sql');
      const file = params.get('file');
      const selection = params.get('selection');
-     const hasSqluiReferrer = document.referrer && new URL(document.referrer).origin === url.origin;
      const variables = parseSqlVariables(params);
 
-     if (params.has('file') && params.has('sql')) {
-       // TODO: show an error.
-       throw new Error('You can only specify a file or sql, not both.')
-     }
-
-     // Only allow auto-run if coming from another SQLUI page. The idea here is to let the app link to URLs with run=true
-     // but not other apps. This allows meta/shift-clicking to run a query.
-     if (params.has('run')) {
-       url.searchParams.delete('run');
-       window.history.replaceState({}, '', url);
+     if (run) {
+       replaceState(url);
        clearResult();
 
-       if (!internal && !hasSqluiReferrer) {
-         throw new Error('run only allowed for internal usage')
-       }
-
        if (params.has('sql') || params.has('file')) {
          const sqlFetch = buildSqlFetch(sql, file, variables, selection);
          setEditorValue(sqlFetch.sql);
@@ -25269,10 +25276,13 @@
      const existingRequest = window.sqlFetch;
      if (existingRequest) {
        const selectionMatches = selection === existingRequest.selection;
-       const sqlMatches = params.has('sql') && sql === existingRequest.sql;
-       const fileMatches = params.has('file') && file === existingRequest.file;
+       let queryMatches = false;
+       if (params.has('sql')) {
+         queryMatches = sql === existingRequest.sql;
+       } else if (params.has('file')) {
+         queryMatches = file === existingRequest.file;
+       }
        const variablesMatch = JSON.stringify(variables) === JSON.stringify(existingRequest.variables);
-       const queryMatches = sqlMatches || fileMatches;
        if (selectionMatches && queryMatches && variablesMatch) {
          displaySqlFetch(existingRequest);
          if (params.has('selection') && window.lastSetSelectionValueFromUrlParam !== selection) {
@@ -25326,15 +25336,15 @@
    function buildSqlFetch (sql, file, variables, selection) {
      const sqlFetch = new SqlFetch(sql, file, variables, selection);
 
-     if (file) {
+     if (sql) {
+       sqlFetch.sql = sql;
+     } else if (file) {
        const fileDetails = window.metadata.saved[file];
        if (!fileDetails) {
          throw new Error(`no such file: ${file}`)
        }
        sqlFetch.file = file;
        sqlFetch.sql = fileDetails.contents;
-     } else if (sql) {
-       sqlFetch.sql = sql;
      }
 
      return sqlFetch
@@ -25502,15 +25512,27 @@
      addEventListener(tableElement, 'mousedown', listener);
    }
    function disableDownloadButtons () {
-     document.getElementById('submit-dropdown-button-download-csv').classList.add('disabled');
-     document.getElementById('submit-dropdown-button-copy-csv').classList.add('disabled');
-     document.getElementById('submit-dropdown-button-copy-tsv').classList.add('disabled');
+     const downloadCsvElement = document.getElementById('submit-dropdown-button-download-csv');
+     downloadCsvElement.classList.add('disabled');
+     downloadCsvElement.tabIndex = -1;
+     const copyCsvElement = document.getElementById('submit-dropdown-button-copy-csv');
+     copyCsvElement.classList.add('disabled');
+     copyCsvElement.tabIndex = -1;
+     const copyTsvElement = document.getElementById('submit-dropdown-button-copy-tsv');
+     copyTsvElement.classList.add('disabled');
+     copyTsvElement.tabIndex = -1;
    }
 
    function enableDownloadButtons () {
-     document.getElementById('submit-dropdown-button-download-csv').classList.remove('disabled');
-     document.getElementById('submit-dropdown-button-copy-csv').classList.remove('disabled');
-     document.getElementById('submit-dropdown-button-copy-tsv').classList.remove('disabled');
+     const downloadCsvElement = document.getElementById('submit-dropdown-button-download-csv');
+     downloadCsvElement.classList.remove('disabled');
+     downloadCsvElement.tabIndex = 0;
+     const copyCsvElement = document.getElementById('submit-dropdown-button-copy-csv');
+     copyCsvElement.classList.remove('disabled');
+     copyCsvElement.tabIndex = 0;
+     const copyTsvElement = document.getElementById('submit-dropdown-button-copy-tsv');
+     copyTsvElement.classList.remove('disabled');
+     copyTsvElement.tabIndex = 0;
    }
 
    function updateDownloadButtons (fetch) {
@@ -25521,6 +25543,54 @@
      }
    }
 
+   function updateFileBox () {
+     const url = new URL(window.location);
+     if (url.searchParams.has('file')) {
+       document.getElementById('filename').innerText = url.searchParams.get('file');
+       document.getElementById('filename-box').style.display = 'flex';
+     } else {
+       document.getElementById('filename-box').style.display = 'none';
+     }
+   }
+
+   function dismissFile () {
+     const url = new URL(window.location);
+     url.searchParams.set('sql', getSqlFromUrl(url));
+     url.searchParams.delete('file');
+     if (url.searchParams.has('selection')) {
+       const selection = url.searchParams.get('selection');
+       // Let's put selection after sql.
+       url.searchParams.delete('selection');
+       url.searchParams.set('selection', selection);
+     }
+     document.getElementById('filename-box').style.display = 'none';
+     replaceState(url);
+   }
+
+   function replaceState (url) {
+     // Paths look so much better with slashes than with %2F. It seems to work even though it isn't technically valid.
+     window.history.replaceState({}, '', url.href.replaceAll('%2F', '/'));
+   }
+
+   function pushState (url) {
+     // Paths look so much better with slashes than with %2F. It seems to work even though it isn't technically valid.
+     window.history.pushState({}, '', url.href.replaceAll('%2F', '/'));
+   }
+
+   function saveFile () {
+     const url = new URL(window.location);
+     if (!url.searchParams.has('file')) throw new Error('missing file param')
+
+     const file = url.searchParams.get('file');
+     const fileDetails = window.metadata.saved[file];
+     if (!fileDetails) throw new Error(`no such file: ${file}`)
+
+     document.getElementById('save-form-base-sha').value = fileDetails.tree_sha;
+     document.getElementById('save-form-path').value = fileDetails.path;
+     document.getElementById('save-form-content').value = getEditorValue();
+     document.getElementById('save-form').submit();
+   }
+
    function displaySqlFetch (fetch) {
      updateDownloadButtons(fetch);
      if (window.tab === 'query') {
@@ -25721,6 +25791,14 @@
        selectTab(event, 'structure');
      } else if (isMac && event.code === 'Digit5' && event.ctrlKey) {
        selectTab(event, 'help');
+     } else if (isMac && event.code === 'BracketLeft' && event.ctrlKey) {
+       const currentTabIndex = TABS.indexOf(window.tab);
+       const previousTabIndex = currentTabIndex === 0 ? TABS.length - 1 : currentTabIndex - 1;
+       selectTab(event, TABS[previousTabIndex]);
+     } else if (isMac && event.code === 'BracketRight' && event.ctrlKey) {
+       const currentTabIndex = TABS.indexOf(window.tab);
+       const nextTabIndex = (currentTabIndex + 1) % TABS.length;
+       selectTab(event, TABS[nextTabIndex]);
      }
    });
 
@@ -25733,9 +25811,14 @@
    });
 
    window.onload = function () {
+     const url = new URL(window.location);
+     let requestUrl = 'metadata';
+     if (url.searchParams.has('file')) {
+       requestUrl += `?file=${url.searchParams.get('file')}`;
+     }
      Promise.all([
        google.charts.load('current', { packages: ['corechart', 'line'] }),
-       fetch('metadata', {
+       fetch(requestUrl, {
          headers: {
            Accept: 'application/json'
          },
@@ -25748,12 +25831,15 @@
          if (contentType && contentType.indexOf('application/json') !== -1) {
            return response.json().then((result) => {
              if (result.error) {
-               let error = '<div style="font-family: monospace; font-size: 16px;">\n';
-               error += `<div>${result.error}</div>\n`;
+               let error = '<span style="font-family: monospace; color: #333; font-size: 16px;">\n';
+               error += '<h2>Internal Error</h2>\n';
+               error += '<h3>Message</h3>\n';
+               error += `<p>${result.error}</p>\n`;
                if (result.stacktrace) {
+                 error += '<h3>Stacktrace</h3>\n';
                  error += '<pre>\n' + result.stacktrace + '\n</pre>\n';
                }
-               error += '</div>\n';
+               error += '</span>\n';
                document.getElementById('loading-box').innerHTML = error;
              } else if (!result.server) {
                document.getElementById('loading-box').innerHTML = `

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.70
+  version: 0.1.72
 platform: ruby
 authors:
 - Nick Dower
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-04-03 00:00:00.000000000 Z
+date: 2023-04-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -206,6 +206,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: timecop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.0'
 - !ruby/object:Gem::Dependency
   name: webmock
   requirement: !ruby/object:Gem::Requirement
@@ -242,6 +256,7 @@ files:
 - app/github/tree.rb
 - app/github/tree_client.rb
 - app/mysql_types.rb
+- app/pigs.rb
 - app/saved_config.rb
 - app/server.rb
 - app/sql_parser.rb
@@ -250,10 +265,13 @@ files:
 - app/version.rb
 - app/views/databases.erb
 - app/views/error.erb
+- app/views/redirect.erb
 - app/views/sqlui.erb
 - bin/sqlui
 - client/resources/favicon.svg
+- client/resources/github.svg
 - client/resources/help.css
+- client/resources/saved.css
 - client/resources/sqlui.css
 - client/resources/sqlui.js
 - client/resources/vertical-resizer.svg