web-console: ACE editor refactoring

web-console/lib/sql-docs.d.ts

@@ -16,5 +16,5 @@
  * limitations under the License.
  */
 
-export const SQL_DATA_TYPES: Record<string, [runtime: string, description: string][]>;
+export const SQL_DATA_TYPES: Record<string, [runtime: string, description: string]>;
 export const SQL_FUNCTIONS: Record<string, [args: string, description: string][]>;

web-console/src/ace-modes/__snapshots__/make-doc-html.spec.ts.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`makeDocHtml correctly formats helper HTML 1`] = `
+"
+<div class="doc-name">COUNT</div>
+<div class="doc-syntax">COUNT(*)</div>
+<div class="doc-description">Counts the number of things</div>"
+`;

web-console/src/ace-modes/dsql.js → web-console/src/ace-modes/dsql.ts

@@ -21,36 +21,42 @@
 // Originally licensed under the MIT license (https://github.com/thlorenz/brace/blob/master/LICENSE)
 // This file was modified to make the list of keywords more closely adhere to what is found in DruidSQL
 
-var druidKeywords = require('../../lib/keywords');
-var druidFunctions = require('../../lib/sql-docs');
+import type { Ace } from 'ace-builds';
+import ace from 'ace-builds/src-noconflict/ace';
+
+import * as druidKeywords from '../../lib/keywords';
+import * as druidFunctions from '../../lib/sql-docs';
+
+import type { ItemDescription } from './make-doc-html';
+import { makeDocHtml } from './make-doc-html';
 
 ace.define(
   'ace/mode/dsql_highlight_rules',
   ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
-  function (acequire, exports, module) {
+  function (acequire: any, exports: any) {
     'use strict';
 
-    var oop = acequire('../lib/oop');
-    var TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules;
+    const oop = acequire('../lib/oop');
+    const TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules;
 
-    var SqlHighlightRules = function () {
+    const SqlHighlightRules = function (this: any) {
       // Stuff like: 'with|select|from|where|and|or|group|by|order|limit|having|as|case|'
-      var keywords = druidKeywords.SQL_KEYWORDS.concat(druidKeywords.SQL_EXPRESSION_PARTS)
+      const keywords = druidKeywords.SQL_KEYWORDS.concat(druidKeywords.SQL_EXPRESSION_PARTS)
         .join('|')
         .replace(/\s/g, '|');
 
       // Stuff like: 'true|false'
-      var builtinConstants = druidKeywords.SQL_CONSTANTS.join('|');
+      const builtinConstants = druidKeywords.SQL_CONSTANTS.join('|');
 
       // Stuff like: 'avg|count|first|last|max|min'
-      var builtinFunctions = druidKeywords.SQL_DYNAMICS.concat(
+      const builtinFunctions = druidKeywords.SQL_DYNAMICS.concat(
         Object.keys(druidFunctions.SQL_FUNCTIONS),
       ).join('|');
 
       // Stuff like: 'int|numeric|decimal|date|varchar|char|bigint|float|double|bit|binary|text|set|timestamp'
-      var dataTypes = Object.keys(druidFunctions.SQL_DATA_TYPES).join('|');
+      const dataTypes = Object.keys(druidFunctions.SQL_DATA_TYPES).join('|');
 
-      var keywordMapper = this.createKeywordMapper(
+      const keywordMapper = this.createKeywordMapper(
         {
           'support.function': builtinFunctions,
           'keyword': keywords,
@@ -122,24 +128,67 @@ ace.define(
 ace.define(
   'ace/mode/dsql',
   ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/dsql_highlight_rules'],
-  function (acequire, exports, module) {
+  function (acequire: any, exports: any) {
     'use strict';
 
-    var oop = acequire('../lib/oop');
-    var TextMode = acequire('./text').Mode;
-    var SqlHighlightRules = acequire('./dsql_highlight_rules').SqlHighlightRules;
-
-    var Mode = function () {
+    const oop = acequire('../lib/oop');
+    const TextMode = acequire('./text').Mode;
+    const SqlHighlightRules = acequire('./dsql_highlight_rules').SqlHighlightRules;
+
+    const completions = ([] as Ace.Completion[]).concat(
+      druidKeywords.SQL_KEYWORDS.map(v => ({ name: v, value: v, score: 0, meta: 'keyword' })),
+      druidKeywords.SQL_EXPRESSION_PARTS.map(v => ({
+        name: v,
+        value: v,
+        score: 0,
+        meta: 'keyword',
+      })),
+      druidKeywords.SQL_CONSTANTS.map(v => ({ name: v, value: v, score: 0, meta: 'constant' })),
+      druidKeywords.SQL_DYNAMICS.map(v => ({ name: v, value: v, score: 0, meta: 'dynamic' })),
+      Object.entries(druidFunctions.SQL_DATA_TYPES).map(([name, [runtime, description]]) => {
+        const item: ItemDescription = {
+          name,
+          description,
+          syntax: `Druid runtime type: ${runtime}`,
+        };
+        return {
+          name,
+          value: name,
+          score: 0,
+          meta: 'type',
+          docHTML: makeDocHtml(item),
+          docText: description,
+        };
+      }),
+      Object.entries(druidFunctions.SQL_FUNCTIONS).flatMap(([name, versions]) => {
+        return versions.map(([args, description]) => {
+          const item = { name, description, syntax: `${name}(${args})` };
+          return {
+            name,
+            value: versions.length > 1 ? `${name}(${args})` : name,
+            score: 1100, // Use a high score to appear over the 'local' suggestions that have a score of 1000
+            meta: 'function',
+            docHTML: makeDocHtml(item),
+            docText: description,
+            completer: {
+              insertMatch: (editor: any, data: any) => {
+                editor.completer.insertMatch({ value: data.name });
+              },
+            },
+          } as Ace.Completion;
+        });
+      }),
+    );
+
+    const Mode = function (this: any) {
       this.HighlightRules = SqlHighlightRules;
       this.$behaviour = this.$defaultBehaviour;
-    };
-    oop.inherits(Mode, TextMode);
+      this.$id = 'ace/mode/dsql';
 
-    (function () {
       this.lineCommentStart = '--';
-
-      this.$id = 'ace/mode/dsql';
-    }).call(Mode.prototype);
+      this.getCompletions = () => completions;
+    };
+    oop.inherits(Mode, TextMode);
 
     exports.Mode = Mode;
   },

web-console/src/ace-modes/hjson.js → web-console/src/ace-modes/hjson.ts

@@ -22,16 +22,18 @@
 // This file was modified to remove the folding functionality that did not play nice when loaded along side the
 // sql mode (which does not have any folding function)
 
+import ace from 'ace-builds/src-noconflict/ace';
+
 ace.define(
   'ace/mode/hjson_highlight_rules',
   ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
-  function (acequire, exports, module) {
+  function (acequire: any, exports: any) {
     'use strict';
 
-    var oop = acequire('../lib/oop');
-    var TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules;
+    const oop = acequire('../lib/oop');
+    const TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules;
 
-    var HjsonHighlightRules = function () {
+    const HjsonHighlightRules = function (this: any) {
       this.$rules = {
         'start': [
           {
@@ -107,7 +109,7 @@ ace.define(
         '#keyname': [
           {
             token: 'keyword',
-            regex: /(?:[^,\{\[\}\]\s]+|"(?:[^"\\]|\\.)*")\s*(?=:)/,
+            regex: /(?:[^,{[}\]\s]+|"(?:[^"\\]|\\.)*")\s*(?=:)/,
           },
         ],
         '#mstring': [
@@ -166,7 +168,7 @@ ace.define(
         '#rootObject': [
           {
             token: 'paren',
-            regex: /(?=\s*(?:[^,\{\[\}\]\s]+|"(?:[^"\\]|\\.)*")\s*:)/,
+            regex: /(?=\s*(?:[^,{[}\]\s]+|"(?:[^"\\]|\\.)*")\s*:)/,
             push: [
               {
                 token: 'paren.rparen',
@@ -205,7 +207,7 @@ ace.define(
               },
               {
                 token: 'constant.language.escape',
-                regex: /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/,
+                regex: /\\(?:["\\/bfnrt]|u[0-9a-fA-F]{4})/,
               },
               {
                 token: 'invalid.illegal',
@@ -220,7 +222,7 @@ ace.define(
         '#ustring': [
           {
             token: 'string',
-            regex: /\b[^:,0-9\-\{\[\}\]\s].*$/,
+            regex: /\b[^:,0-9\-{[}\]\s].*$/,
           },
         ],
         '#value': [
@@ -277,19 +279,19 @@ ace.define(
     'ace/mode/text',
     'ace/mode/hjson_highlight_rules',
   ],
-  function (acequire, exports, module) {
+  function (acequire: any, exports: any) {
     'use strict';
 
-    var oop = acequire('../lib/oop');
-    var TextMode = acequire('./text').Mode;
-    var HjsonHighlightRules = acequire('./hjson_highlight_rules').HjsonHighlightRules;
+    const oop = acequire('../lib/oop');
+    const TextMode = acequire('./text').Mode;
+    const HjsonHighlightRules = acequire('./hjson_highlight_rules').HjsonHighlightRules;
 
-    var Mode = function () {
+    const Mode = function (this: any) {
       this.HighlightRules = HjsonHighlightRules;
     };
     oop.inherits(Mode, TextMode);
 
-    (function () {
+    (function (this: any) {
       this.lineCommentStart = '//';
       this.blockComment = { start: '/*', end: '*/' };
       this.$id = 'ace/mode/hjson';

web-console/src/ace-modes/make-doc-html.spec.ts

@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { makeDocHtml } from './make-doc-html';
+
+describe('makeDocHtml', () => {
+  it('correctly formats helper HTML', () => {
+    expect(
+      makeDocHtml({
+        name: 'COUNT',
+        syntax: 'COUNT(*)',
+        description: 'Counts the number of things',
+      }),
+    ).toMatchSnapshot();
+  });
+});

web-console/src/ace-modes/make-doc-html.ts

@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import escape from 'lodash.escape';
+
+export interface ItemDescription {
+  name: string;
+  syntax: string;
+  description: string;
+}
+
+export function makeDocHtml(item: ItemDescription) {
+  return `
+<div class="doc-name">${item.name}</div>
+<div class="doc-syntax">${escape(item.syntax)}</div>
+<div class="doc-description">${item.description}</div>`;
+}

web-console/src/components/json-input/__snapshots__/json-input.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`JsonInput matches snapshot (null) 1`] = `
   class="json-input"
 >
   <div
-    class=" ace_editor ace_hidpi ace-tm"
+    class=" ace_editor ace_hidpi ace-solarized-dark ace_dark"
     id="ace-editor"
     style="width: 100%; height: 8vh; font-size: 12px;"
   >
@@ -104,7 +104,7 @@ exports[`JsonInput matches snapshot (value) 1`] = `
   class="json-input"
 >
   <div
-    class=" ace_editor ace_hidpi ace-tm"
+    class=" ace_editor ace_hidpi ace-solarized-dark ace_dark"
     id="ace-editor"
     style="width: 100%; height: 8vh; font-size: 12px;"
   >

web-console/src/dialogs/spec-dialog/__snapshots__/spec-dialog.spec.tsx.snap

@@ -58,7 +58,7 @@ exports[`SpecDialog matches snapshot no initSpec 1`] = `
           </button>
         </div>
         <div
-          class=" ace_editor ace_hidpi ace-tm spec-dialog-textarea placeholder-padding"
+          class=" ace_editor ace_hidpi ace-solarized-dark ace_dark spec-dialog-textarea placeholder-padding"
           id="ace-editor"
           style="width: 100%; height: 500px; font-size: 12px;"
         >
@@ -252,7 +252,7 @@ exports[`SpecDialog matches snapshot with initSpec 1`] = `
           </button>
         </div>
         <div
-          class=" ace_editor ace_hidpi ace-tm spec-dialog-textarea placeholder-padding"
+          class=" ace_editor ace_hidpi ace-solarized-dark ace_dark spec-dialog-textarea placeholder-padding"
           id="ace-editor"
           style="width: 100%; height: 500px; font-size: 12px;"
         >

web-console/src/setup-tests.ts

@@ -17,6 +17,7 @@
  */
 
 import 'core-js/stable';
+import './bootstrap/ace';
 
 import { UrlBaser } from './singletons';
 

web-console/src/views/workbench-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap

@@ -122,7 +122,7 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
                 enableLiveAutocompletion={false}
                 enableSnippets={false}
                 focus={false}
-                fontSize={13}
+                fontSize={12}
                 height="100%"
                 highlightActiveLine={true}
                 maxLines={null}
@@ -220,7 +220,7 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
                 enableLiveAutocompletion={false}
                 enableSnippets={false}
                 focus={false}
-                fontSize={13}
+                fontSize={12}
                 height="100%"
                 highlightActiveLine={true}
                 maxLines={null}
@@ -348,7 +348,7 @@ exports[`ExplainDialog matches snapshot on some data (one query) 1`] = `
           enableLiveAutocompletion={false}
           enableSnippets={false}
           focus={false}
-          fontSize={13}
+          fontSize={12}
           height="100%"
           highlightActiveLine={true}
           maxLines={null}

web-console/src/views/workbench-view/explain-dialog/explain-dialog.tsx

@@ -131,7 +131,7 @@ export const ExplainDialog = React.memo(function ExplainDialog(props: ExplainDia
             theme="solarized_dark"
             className="query-string"
             name="ace-editor"
-            fontSize={13}
+            fontSize={12}
             width="100%"
             height="100%"
             showGutter