From 89160c2f9bc50a2c3c21e2e61f63829170cf38c0 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Thu, 24 Sep 2020 09:49:58 -0700
Subject: [PATCH] better query view initial state (#10431)

---
 web-console/src/views/query-view/query-view.scss | 11 +++++++++++
 web-console/src/views/query-view/query-view.tsx  | 13 +++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/web-console/src/views/query-view/query-view.scss b/web-console/src/views/query-view/query-view.scss
index f1e27747e1a..d5e6a77696f 100644
--- a/web-console/src/views/query-view/query-view.scss
+++ b/web-console/src/views/query-view/query-view.scss
@@ -99,6 +99,17 @@ $nav-width: 250px;
         width: 100%;
         height: 100%;
       }
+
+      .init-state {
+        background: #232d35;
+        text-align: center;
+
+        p {
+          position: relative;
+          top: 38%;
+          font-size: 14px;
+        }
+      }
     }
   }
 
diff --git a/web-console/src/views/query-view/query-view.tsx b/web-console/src/views/query-view/query-view.tsx
index 0e8b48982fd..3effd4e6007 100644
--- a/web-console/src/views/query-view/query-view.tsx
+++ b/web-console/src/views/query-view/query-view.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Intent, Switch, Tooltip } from '@blueprintjs/core';
+import { Code, Intent, Switch, Tooltip } from '@blueprintjs/core';
 import axios from 'axios';
 import classNames from 'classnames';
 import { QueryResult, QueryRunner, SqlQuery } from 'druid-query-toolkit';
@@ -295,9 +295,11 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
   }
 
   componentDidMount(): void {
+    const { liveQueryMode, queryString } = this.state;
+
     this.metadataQueryManager.runQuery(null);
 
-    if (this.state.liveQueryMode !== 'off') {
+    if (liveQueryMode !== 'off' && queryString) {
       this.handleRun();
     }
   }
@@ -522,6 +524,13 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
               }}
             />
           )}
+          {queryResultState.isInit() && (
+            <div className="init-state">
+              <p>
+                Enter a query and click <Code>Run</Code>
+              </p>
+            </div>
+          )}
         </div>
       </SplitterLayout>
     );