[sql lab] Make sql editor resizable (#3242)

* Update to the version of react-ace with the fixed sizing issues

* Make ace editor resizable

* Use small util method for offset calculation instead of $

* Test ResizableAceEditor

* Make the right pane of the Sql Lab scrollable

* Add default and min height to the ResizableAceEditor

* Implement SplitPane

* Make Splitter fullscreen

* React on resize of the window

* Implement min and max

* Get rid of a magic number + add margin

* Handle resize event with delay + cleanup the code

* Make ResultSet adjustable

* Make QueryHistory adjustable

* Remove ResizableAceEditor

* Make linter happy

* Test SplitPane

* Init sizes properly

superset/assets/javascripts/SqlLab/main.less

@@ -31,6 +31,40 @@ body {
     padding-top: 5px;
     padding-bottom: 5px;
 }
+.DragBar {
+    padding: 10px 0;
+    text-align: center;
+    width: 100%;
+}
+.DragBarVisible {
+    width: 100%;
+    height: 3px;
+    background-color: #ccc;
+    cursor: row-resize;
+}
+.Splitter {
+    height: 100%;
+}
+.SqlEditor .SouthPane{
+    height:100%;
+}
+.SqlEditor .SouthPane .Tabs{
+    height:100%;
+    display: flex;
+    flex-direction: column;
+}
+.SqlEditor .SouthPane .Tabs .tab-content{
+    height:100%;
+    display: flex;
+    flex: 1 1;
+}
+.SqlEditor .SouthPane .Tabs .tab-pane{
+    width:100%;
+}
+.SqlEditor .QueryHistoryWrapper{
+    height: 100%;
+    overflow: scroll;
+}
 
 .scrollbar-container {
   position: relative;
@@ -237,8 +271,8 @@ div.tablePopover:hover {
     padding-top: 3px;
 }
 .ace_editor {
-  border: 1px solid #ccc;
-  margin: 0px 0px 10px 0px;
+    border: 1px solid #ccc;
+    margin: 0px 0px 10px 0px;
 }
 
 .Select-menu-outer {
@@ -253,6 +287,10 @@ div.tablePopover:hover {
     padding-top: 10px;
 }
 
+.NorthPane {
+    width: 100%;
+}
+
 .TableElement {
     margin-right: 10px;
 }