Add basic format support for sql (#251)

package.json

@@ -53,6 +53,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "shape": "npm:@multiprocess/shape",
     "source-map-support": "^0.5.21",
+    "sql-formatter": "^6.1.1",
     "tmp-promise": "^3.0.3",
     "tweetnacl": "^1.0.3",
     "tweetnacl-util": "^0.15.1",

ui/Panel.tsx

@@ -4,6 +4,7 @@ import {
   IconArrowsDiagonalMinimize2,
   IconArrowsMaximize,
   IconArrowsMinimize,
+  IconBraces,
   IconChevronDown,
   IconChevronUp,
   IconEye,
@@ -17,10 +18,11 @@ import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import circularSafeStringify from 'json-stringify-safe';
 import * as React from 'react';
 import { toString } from 'shape';
+import { format as sqlFormat } from 'sql-formatter';
 import { MODE_FEATURES } from '../shared/constants';
 import { EVAL_ERRORS } from '../shared/errors';
 import log from '../shared/log';
-import { PanelInfo, PanelResult } from '../shared/state';
+import { PanelInfo, PanelResult, ProgramPanelInfo } from '../shared/state';
 import { humanSize } from '../shared/text';
 import { panelRPC } from './asyncRPC';
 import { Alert } from './components/Alert';
@@ -255,6 +257,22 @@ export function Panel({
     setError(results.exception);
   }, [results.exception]);
 
+  function formatThis() {
+    const old = panel.content;
+    try {
+      panel.content = sqlFormat(old);
+      if (panel.content === old) {
+        // Don't update if it hasn't changed
+        return;
+      }
+    } catch (e) {
+      log.error(e);
+      panel.content = old;
+    }
+
+    updatePanel(panel);
+  }
+
   async function evalThis() {
     if (killable) {
       await killProcess();
@@ -449,6 +467,16 @@ export function Panel({
                   {loading ? <IconPlayerPause /> : <IconPlayerPlay />}
                 </Button>
               </span>
+              {panel.type ===
+                'database' /* TODO: this format should become part of the paneldetails object */ ||
+              (panel.type === 'program' &&
+                (panel as ProgramPanelInfo).program.type === 'sql') ? (
+                <span title="Format code">
+                  <Button icon onClick={formatThis}>
+                    <IconBraces />
+                  </Button>
+                </span>
+              ) : null}
               <span title="Full screen mode">
                 <Button
                   icon

yarn.lock

@@ -6970,6 +6970,13 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+sql-formatter@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/sql-formatter/-/sql-formatter-6.1.1.tgz#ec9d4c6fc90c2839885cf36ca7b0755a84527802"
+  integrity sha512-NiUP90vNb6NjQryWz0bPsvv4BTqe/wY75mRbh2E6M1kKZIoCKtueeKIDMQBB+RI8pjxVUQy7e35JUXQj6YYonQ==
+  dependencies:
+    argparse "^2.0.1"
+
 ssf@~0.11.2:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/ssf/-/ssf-0.11.2.tgz#0b99698b237548d088fc43cdf2b70c1a7512c06c"