From a599853168c2770908fc9557d309d6b5cd6aba1f Mon Sep 17 00:00:00 2001
From: Apoorv Tiwari <tiwari.apoorv1316@gmail.com>
Date: Fri, 27 Aug 2021 09:45:49 +0530
Subject: [PATCH] Fix incorrect tooltip when query editor hidden (#599)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix incorrect tooltip when query editor hidden

* Fix the size of tooltip

* Fix button resize bug on clicking

Co-authored-by: “Apoorv <“tiwari.apoorv1316@gmail.com”>
---
 frontend/src/Editor/Editor.jsx | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index 4ba42d4ee0..35aa0f38f3 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { datasourceService, dataqueryService, appService, authenticationService } from '@/_services';
 // import { DarkModeToggle } from '@/_components/DarkModeToggle';
 import { DndProvider } from 'react-dnd';
@@ -413,6 +413,8 @@ class Editor extends React.Component {
 
   toggleQueryEditor = () => {
     this.setState({ showQueryEditor: !this.state.showQueryEditor });
+    this.toolTipRefHide.current.style.display = this.state.showQueryEditor ? 'none' : 'flex';
+    this.toolTipRefShow.current.style.display = this.state.showQueryEditor ? 'flex' : 'none';
   };
 
   toggleLeftSidebar = () => {
@@ -456,6 +458,9 @@ class Editor extends React.Component {
     });
   };
 
+  toolTipRefHide = createRef(null);
+  toolTipRefShow = createRef(null);
+
   render() {
     const {
       currentSidebarTab,
@@ -529,9 +534,26 @@ class Editor extends React.Component {
                 )}
                 <div className="editor-buttons">
                   <span
-                    className={`btn ${showQueryEditor ? 'btn-light' : 'btn-default'} mx-2`}
+                    className={`btn btn-light mx-2`}
                     onClick={this.toggleQueryEditor}
-                    data-tip={showQueryEditor ? 'Hide query editor' : 'Show query editor'}
+                    data-tip="Hide query editor"
+                    data-class="py-1 px-2"
+                    ref={this.toolTipRefHide}
+                  >
+                    <img
+                      style={{ transform: 'rotate(-90deg)' }}
+                      src="/assets/images/icons/editor/sidebar-toggle.svg"
+                      width="12"
+                      height="12"
+                    />
+                  </span>
+                  <span
+                    className={`btn btn-default mx-2`}
+                    onClick={this.toggleQueryEditor}
+                    data-tip="Show query editor"
+                    data-class="py-1 px-2"
+                    ref={this.toolTipRefShow}
+                    style={{ display: 'none' }}
                   >
                     <img
                       style={{ transform: 'rotate(-90deg)' }}
@@ -816,6 +838,7 @@ class Editor extends React.Component {
 
                           <span
                             data-tip="Add new query"
+                            data-class="py-1 px-2"
                             className="btn btn-sm btn-light text-muted"
                             onClick={() => this.setState({ selectedQuery: {}, editingQuery: false, addingQuery: true })}
                           >