Added initial ace editor integration

falcon-client · Aug 14, 2017 · 224b4f1 · 224b4f1
1 parent 865078e
commit 224b4f1
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 29 deletions.
diff --git a/app/components/Header.js b/app/components/Header.js
@@ -5,10 +5,6 @@ import ListSymbol from './ListSymbol';
 export default function Header() {
   return (
     <div className="Header col-sm-12">
-      <div className="Header--container Header--container-status">
-        <span className="Connection"><i className="ion-locked Connection--lock Connection--lock-secure" /> <a href="">Connected</a></span>
-        <span><a href="">SQLite 3.1.6</a></span>
-      </div>
       <div className="Header--container">
         {/* @TODO: Create a separate breadcrumbs component  */}
         <div className="Header--breadcrumb">
@@ -21,6 +17,10 @@ export default function Header() {
           <ListSymbol type="table" /> Lorem
          </div>
       </div>
+      <div className="Header--container Header--container-status">
+        <span className="Connection"><i className="ion-locked Connection--lock Connection--lock-secure" /> <a href="">Connected</a></span>
+        <span><a href="">SQLite 3.1.6</a></span>
+      </div>
       <div className="Header--container Header--container-hidden">
         <div className="Header--button ion-android-refresh" />
         <div className="Header--button ion-android-add" />

diff --git a/app/containers/QueryPage.js b/app/containers/QueryPage.js
@@ -1,12 +1,20 @@
 // @flow
 import React, { Component } from 'react';
 import { ResizableBox } from 'react-resizable';
+import AceEditor from 'react-ace';
+import 'brace';
+import 'brace/mode/sql';
+import 'brace/snippets/sql';
+import 'brace/theme/xcode';
+import 'brace/ext/language_tools';
+import 'brace/ext/searchbox';
 import Content from '../components/Content';
 
 export default class QueryPage extends Component {
   state = {
     queryHeight: (window.innerHeight - 40) / 2,
-    queryResultsHeight: (window.innerHeight - 40) / 2
+    queryResultsHeight: ((window.innerHeight - 40) / 2) - 40,
+    query: 'SELECT * FROM users'
   }
 
   item = null;
@@ -38,8 +46,20 @@ export default class QueryPage extends Component {
           style={{ height: `${this.state.queryHeight}px` }}
           onResize={this.onQueryResize}
         >
-          {this.state.queryHeight},
-          {this.state.queryResultsHeight}
+          <AceEditor
+            mode="sql"
+            theme="xcode"
+            name="querybox"
+            value={this.state.query}
+            focus
+            width={'100%'}
+            height={'100%'}
+            showPrintMargin={false}
+            editorProps={{ $blockScrolling: Infinity }}
+            enableBasicAutocompletion
+            enableSnippets
+            enableLiveAutocompletion={false}
+          />
         </ResizableBox>
         <div style={{ height: this.state.queryResultsHeight }}>
           <Content />

diff --git a/app/styles/Button.scss b/app/styles/Button.scss
@@ -1,5 +1,6 @@
 .Button {
   border-radius: 10px;
+  cursor: pointer;
 
   .Button--border {
     border: 2px solid gray;

diff --git a/app/styles/Grid.scss b/app/styles/Grid.scss
@@ -40,6 +40,7 @@
       top: initial;
       right: initial;
       background: gray;
+      z-index: 1000;
       cursor: row-resize;
     }
   }

diff --git a/app/styles/Login.scss b/app/styles/Login.scss
@@ -40,8 +40,9 @@
     padding: 10px;
     font-size: 1.3em;
     text-align: center;
+    cursor: pointer;
 
-    &:hover {
+    &:hover, &:focus {
       background: black;
     }
   }
@@ -57,5 +58,9 @@
     color: black;
     border: none;
     padding: 10px;
+
+    &:focus {
+      background: #c3c3c3;
+    }
   }
 }
diff --git a/app/styles/QueryPage.scss b/app/styles/QueryPage.scss
@@ -0,0 +1,5 @@
+.QueryPage {
+  .ace-xcode .ace_gutter {
+    background: white;
+  }
+}
diff --git a/app/styles/app.global.scss b/app/styles/app.global.scss
@@ -38,6 +38,7 @@ $gray-lightest:             white !default;
 @import "./Structure.scss";
 @import "./Login.scss";
 @import "./ListSymbol.scss";
+@import "./QueryPage.scss";
 @import "./App.scss";
 
 //
@@ -64,3 +65,10 @@ body {
 .no-margin {
   margin: 0;
 }
+
+.ace_layer.ace_gutter-layer.ace_folding-enabled {
+  background: white;
+}
+.ace_gutter-cell {
+  color: #D8D8D8;
+}
diff --git a/package.json b/package.json
@@ -188,12 +188,14 @@
   },
   "dependencies": {
     "bootstrap": "4.0.0-alpha.6",
+    "brace": "^0.10.0",
     "devtron": "^1.4.0",
     "draggabilly": "^2.1.1",
     "electron-debug": "^1.2.0",
     "font-awesome": "^4.7.0",
     "history": "^4.6.3",
     "react": "^15.6.1",
+    "react-ace": "^5.1.2",
     "react-dom": "^15.6.1",
     "react-hot-loader": "3.0.0-beta.6",
     "react-redux": "^5.0.5",

diff --git a/yarn.lock b/yarn.lock
@@ -1198,7 +1198,7 @@ babel-plugin-transform-undefined-to-void@^6.8.2:
   version "6.8.2"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.8.2.tgz#fe2b1d294eb05e87524eb93724dea6e2c3d66fa1"
 
-babel-polyfill@^6.23.0:
+babel-polyfill@6.23.0, babel-polyfill@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
   dependencies:
@@ -1560,6 +1560,12 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/brace/-/brace-0.10.0.tgz#edef4eb9b0928ba1ee5f717ffc157749a6dd5d76"
+  dependencies:
+    w3c-blob "0.0.1"
+
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
@@ -1798,7 +1804,7 @@ [email protected]:
     strip-ansi "^0.3.0"
     supports-color "^0.2.0"
 
-chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
+chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   dependencies:
@@ -4506,6 +4512,24 @@ inline-style-prefixer@^2.0.5:
     bowser "^1.0.0"
     hyphenate-style-name "^1.0.1"
 
+[email protected], inquirer@~3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.0.6.tgz#e04aaa9d05b7a3cb9b0f407d04375f0447190347"
+  dependencies:
+    ansi-escapes "^1.1.0"
+    chalk "^1.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.0.1"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rx "^4.1.0"
+    string-width "^2.0.0"
+    strip-ansi "^3.0.0"
+    through "^2.3.6"
+
 inquirer@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
@@ -4524,24 +4548,6 @@ inquirer@^0.12.0:
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
-inquirer@~3.0.6:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.0.6.tgz#e04aaa9d05b7a3cb9b0f407d04375f0447190347"
-  dependencies:
-    ansi-escapes "^1.1.0"
-    chalk "^1.0.0"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^2.0.1"
-    figures "^2.0.0"
-    lodash "^4.3.0"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rx "^4.1.0"
-    string-width "^2.0.0"
-    strip-ansi "^3.0.0"
-    through "^2.3.6"
-
 internal-ip@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
@@ -5541,6 +5547,10 @@ lodash.get@^3.7.0:
     lodash._baseget "^3.0.0"
     lodash._topath "^3.0.0"
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+
 lodash.isarguments@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
@@ -5549,6 +5559,10 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
+lodash.isequal@^4.1.1:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+
 lodash.isnil@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/lodash.isnil/-/lodash.isnil-4.0.0.tgz#49e28cd559013458c814c5479d3c663a21bfaa6c"
@@ -5872,7 +5886,7 @@ [email protected], minimist@~0.0.1:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
-minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
+minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
@@ -5976,6 +5990,13 @@ node-emoji@^1.7.0:
     lodash.toarray "^4.4.0"
     string.prototype.codepointat "^0.2.0"
 
+[email protected]:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-fetch@^1.0.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.1.tgz#899cb3d0a3c92f952c47f1b876f4c8aeabd400d5"
@@ -6319,6 +6340,17 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+opencollective@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/opencollective/-/opencollective-1.0.3.tgz#aee6372bc28144583690c3ca8daecfc120dd0ef1"
+  dependencies:
+    babel-polyfill "6.23.0"
+    chalk "1.1.3"
+    inquirer "3.0.6"
+    minimist "1.2.0"
+    node-fetch "1.6.3"
+    opn "4.0.2"
+
 opener@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
@@ -7134,6 +7166,16 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.1.7, rc@^1.2.1:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-ace@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-5.1.2.tgz#cbaa0b20ce6dcb5f9b9151633ddce313c38d7905"
+  dependencies:
+    brace "^0.10.0"
+    lodash.get "^4.4.2"
+    lodash.isequal "^4.1.1"
+    opencollective "^1.0.3"
+    prop-types "^15.5.8"
+
 react-addons-test-utils@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.6.0.tgz#062d36117fe8d18f3ba5e06eb33383b0b85ea5b9"
@@ -9059,6 +9101,10 @@ [email protected]:
   dependencies:
     indexof "0.0.1"
 
+[email protected]:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/w3c-blob/-/w3c-blob-0.0.1.tgz#b0cd352a1a50f515563420ffd5861f950f1d85b8"
+
 walkdir@^0.0.11:
   version "0.0.11"
   resolved "https://registry.yarnpkg.com/walkdir/-/walkdir-0.0.11.tgz#a16d025eb931bd03b52f308caed0f40fcebe9532"