Query manager panel resizes smoothly (ToolJet#1812)

* jumbing problem fixed with smooth transition

* now query panel can be drag using the border

* removed css transition

Author: shah21

frontend/src/Editor/Editor.jsx

@@ -72,6 +72,7 @@ class Editor extends React.Component {
       allComponentTypes: componentTypes,
       isQueryPaneDragging: false,
       queryPaneHeight: 70,
+      isTopOfQueryPane: false,
       isLoading: true,
       users: null,
       appId,
@@ -117,8 +118,21 @@ class Editor extends React.Component {
   }
 
   onMouseMove = (e) => {
+    const componentTop = Math.round(this.queryPaneRef.current.getBoundingClientRect().top);
+    const clientY = e.clientY;
+
+    if ((clientY >= componentTop) & (clientY <= componentTop + 5)) {
+      this.setState({
+        isTopOfQueryPane: true,
+      });
+    } else {
+      this.setState({
+        isTopOfQueryPane: false,
+      });
+    }
+
     if (this.state.isQueryPaneDragging) {
-      let queryPaneHeight = (e.clientY / window.screen.height) * 100;
+      let queryPaneHeight = (clientY / window.innerHeight) * 100;
 
       if (queryPaneHeight > 95) queryPaneHeight = 100;
       if (queryPaneHeight < 4.5) queryPaneHeight = 4.5;
@@ -965,21 +979,13 @@ class Editor extends React.Component {
                 ref={this.queryPaneRef}
                 onTouchEnd={this.onMouseUp}
                 onMouseDown={this.onMouseDown}
-                className="query-pane"
-                style={{
-                  height: `calc(100% - ${this.state.queryPaneHeight - 1}%)`,
-                  background: 'transparent',
-                  border: 0,
-                  cursor: 'row-resize',
-                }}
-              ></div>
-              <div
                 className="query-pane"
                 style={{
                   height: `calc(100% - ${this.state.queryPaneHeight}%)`,
                   width: !showLeftSidebar ? '85%' : '',
                   left: !showLeftSidebar ? '0' : '',
-                  cursor: this.state.isQueryPaneDragging ? 'row-resize' : 'default',
+                  // transition: 'height 0.3s ease-in-out',
+                  cursor: this.state.isQueryPaneDragging || this.state.isTopOfQueryPane ? 'row-resize' : 'default',
                 }}
               >
                 <div className="row main-row">