From 510c404f0267b5ea0d68daa6ad705a9767d46682 Mon Sep 17 00:00:00 2001
From: chloe-zh <fizhang@amazon.com>
Date: Wed, 11 Mar 2020 18:59:58 -0700
Subject: [PATCH] Removed redundant headers; changed header to "SQL Workbench";
 added default (show & describe) queries in initially loaded interface;
 adjusted component sizes and styles; updated snapshots

---
 index.js                                      |   4 +-
 package.json                                  |   2 +-
 public/app.scss                               |  29 ++--
 public/components/Header/Header.tsx           |   3 -
 .../Header/__snapshots__/Header.test.tsx.snap |   5 -
 .../Main/__snapshots__/main.test.tsx.snap     | 162 ++++++------------
 public/components/QueryEditor/QueryEditor.tsx |  14 +-
 .../__snapshots__/QueryEditor.test.tsx.snap   |  44 ++---
 8 files changed, 84 insertions(+), 179 deletions(-)

diff --git a/index.js b/index.js
index ca08de4..d09e341 100644
--- a/index.js
+++ b/index.js
@@ -30,8 +30,8 @@ export default function (kibana) {
     name: PLUGIN_NAME,
     uiExports: {
       app: {
-        title: 'SQL Console',
-        description: 'SQL Console',
+        title: 'SQL Workbench',
+        description: 'SQL Workbench',
         main: 'plugins/' + PLUGIN_NAME + '/app',
         icon:'plugins/' + PLUGIN_NAME + '/icons/sql.svg',
       },
diff --git a/package.json b/package.json
index 28acb5f..14c6bac 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sql-kibana",
   "version": "1.4.0.0",
-  "description": "SQL Console",
+  "description": "SQL Workbench",
   "main": "index.js",
   "license": "Apache-2.0",
   "homepage": "https://github.com/opendistro-for-elasticsearch/sql-kibana-plugin",
diff --git a/public/app.scss b/public/app.scss
index 5444a7e..b0256b7 100644
--- a/public/app.scss
+++ b/public/app.scss
@@ -27,17 +27,12 @@
 }
 
 .sql-console-query-editor {
-  height: 500px;
-  max-height: 500px;
-  
+  height: 430px;
+  max-height: 430px;
   .container-panel {
     border-radius: 0px;
     box-shadow: none;
   }
-  .container-panel-header {
-    font-weight: 450px;
-    padding: $euiSize $euiSize;
-  }
   .sql-query-panel {
     border-radius: 0px;
     border-width: 1px;
@@ -63,7 +58,7 @@
   }
   .resize-panel {
     resize: vertical;
-    overflow: auto; 
+    overflow: auto;
     cursor: row-resize;
   }
   .sql-editor-link:visited {
@@ -78,7 +73,7 @@
   scroll-behavior: smooth;
   .sql-console-results-container {
     overflow: auto;
-  } 
+  }
   .query-result-container {
     border: solid 1.5px #d9d9d9;
     border-radius: 0px;
@@ -94,15 +89,15 @@
   }
   .table-header {
     /*border-top: solid 1px #d9d9d9;*/
-    background-color: #d9d9d9; 
+    background-color: #d9d9d9;
   }
-  .sideNav-table { 
+  .sideNav-table {
     border: solid 1px rgb(217, 217, 217);
     border-collapse: separate;
   }
   .search-panel {
-    display: inline-flex; 
-    width:100%; 
+    display: inline-flex;
+    width:100%;
     padding:20px;
   }
   .search-bar {
@@ -134,7 +129,7 @@
 
   .toggleContainer {
     margin: 20px;
-  } 
+  }
 }
 
 .expanded-row {
@@ -166,7 +161,7 @@
 
 /*********  EuiTable overrides ***********/
 .euiTableCellContent {
-  display: inline-block; 
+  display: inline-block;
   width: 100%;
 }
 
@@ -225,7 +220,7 @@
   }
 
 /* Remove the horizontal tick from the root of the sideNav */
-  &.euiSideNavItem--root > .euiSideNavItemButton {   
+  &.euiSideNavItem--root > .euiSideNavItemButton {
     &:after {
       background: none;
     }
@@ -269,4 +264,4 @@
 
 .euiSideNavItem--branch > .euiSideNavItemButton {
   padding-left: 10px;
-}
\ No newline at end of file
+}
diff --git a/public/components/Header/Header.tsx b/public/components/Header/Header.tsx
index 9a656b5..4d959d5 100644
--- a/public/components/Header/Header.tsx
+++ b/public/components/Header/Header.tsx
@@ -19,9 +19,6 @@ import { EuiHorizontalRule } from '@elastic/eui';
 const Header = () => {
   return (
       <div>
-        <div className="sql-console-page-header">
-         SQL console
-        </div>
         <EuiHorizontalRule margin="none" />
       </div>
   );
diff --git a/public/components/Header/__snapshots__/Header.test.tsx.snap b/public/components/Header/__snapshots__/Header.test.tsx.snap
index fef9868..34fa845 100644
--- a/public/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/public/components/Header/__snapshots__/Header.test.tsx.snap
@@ -3,11 +3,6 @@
 exports[`<Header /> spec renders the component 1`] = `
 <div>
   <div>
-    <div
-      class="sql-console-page-header"
-    >
-      SQL console
-    </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full"
     />
diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
index 015a6fe..f945d2f 100644
--- a/public/components/Main/__snapshots__/main.test.tsx.snap
+++ b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -4,11 +4,6 @@ exports[`<Main /> spec click clear button 1`] = `
 <div>
   <div>
     <div>
-      <div
-        class="sql-console-page-header"
-      >
-        SQL console
-      </div>
       <hr
         class="euiHorizontalRule euiHorizontalRule--full"
       />
@@ -22,13 +17,8 @@ exports[`<Main /> spec click clear button 1`] = `
         <div
           class="euiPanel sql-console-query-editor container-panel"
         >
-          <h1
-            class="euiTitle euiTitle--large container-panel-header"
-          >
-            SQL console
-          </h1>
           <div
-            class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive"
+            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
             <div
               class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
@@ -306,7 +296,7 @@ exports[`<Main /> spec click clear button 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary sql-editor-button"
+                  class="euiButton euiButton--primary sql-editor-button euiButton--fill"
                   type="button"
                 >
                   <span
@@ -323,21 +313,20 @@ exports[`<Main /> spec click clear button 1`] = `
               <div
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <a
-                  class="euiButtonEmpty euiButtonEmpty--primary euiHeaderLink sql-editor-link"
-                  href="#"
-                  rel="noreferrer"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButtonEmpty__content"
+                    class="euiButton__content"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="euiButton__text"
                     >
                       Clear
                     </span>
                   </span>
-                </a>
+                </button>
               </div>
             </div>
           </div>
@@ -513,11 +502,6 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
 <div>
   <div>
     <div>
-      <div
-        class="sql-console-page-header"
-      >
-        SQL console
-      </div>
       <hr
         class="euiHorizontalRule euiHorizontalRule--full"
       />
@@ -531,13 +515,8 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
         <div
           class="euiPanel sql-console-query-editor container-panel"
         >
-          <h1
-            class="euiTitle euiTitle--large container-panel-header"
-          >
-            SQL console
-          </h1>
           <div
-            class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive"
+            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
             <div
               class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
@@ -815,7 +794,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary sql-editor-button"
+                  class="euiButton euiButton--primary sql-editor-button euiButton--fill"
                   type="button"
                 >
                   <span
@@ -832,21 +811,20 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
               <div
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <a
-                  class="euiButtonEmpty euiButtonEmpty--primary euiHeaderLink sql-editor-link"
-                  href="#"
-                  rel="noreferrer"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButtonEmpty__content"
+                    class="euiButton__content"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="euiButton__text"
                     >
                       Clear
                     </span>
                   </span>
-                </a>
+                </button>
               </div>
             </div>
           </div>
@@ -1022,11 +1000,6 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
 <div>
   <div>
     <div>
-      <div
-        class="sql-console-page-header"
-      >
-        SQL console
-      </div>
       <hr
         class="euiHorizontalRule euiHorizontalRule--full"
       />
@@ -1040,13 +1013,8 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
         <div
           class="euiPanel sql-console-query-editor container-panel"
         >
-          <h1
-            class="euiTitle euiTitle--large container-panel-header"
-          >
-            SQL console
-          </h1>
           <div
-            class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive"
+            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
             <div
               class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
@@ -1324,7 +1292,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary sql-editor-button"
+                  class="euiButton euiButton--primary sql-editor-button euiButton--fill"
                   type="button"
                 >
                   <span
@@ -1341,21 +1309,20 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
               <div
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <a
-                  class="euiButtonEmpty euiButtonEmpty--primary euiHeaderLink sql-editor-link"
-                  href="#"
-                  rel="noreferrer"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButtonEmpty__content"
+                    class="euiButton__content"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="euiButton__text"
                     >
                       Clear
                     </span>
                   </span>
-                </a>
+                </button>
               </div>
             </div>
           </div>
@@ -1531,11 +1498,6 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
 <div>
   <div>
     <div>
-      <div
-        class="sql-console-page-header"
-      >
-        SQL console
-      </div>
       <hr
         class="euiHorizontalRule euiHorizontalRule--full"
       />
@@ -1549,13 +1511,8 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
         <div
           class="euiPanel sql-console-query-editor container-panel"
         >
-          <h1
-            class="euiTitle euiTitle--large container-panel-header"
-          >
-            SQL console
-          </h1>
           <div
-            class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive"
+            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
             <div
               class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
@@ -1833,7 +1790,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary sql-editor-button"
+                  class="euiButton euiButton--primary sql-editor-button euiButton--fill"
                   type="button"
                 >
                   <span
@@ -1850,21 +1807,20 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
               <div
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <a
-                  class="euiButtonEmpty euiButtonEmpty--primary euiHeaderLink sql-editor-link"
-                  href="#"
-                  rel="noreferrer"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButtonEmpty__content"
+                    class="euiButton__content"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="euiButton__text"
                     >
                       Clear
                     </span>
                   </span>
-                </a>
+                </button>
               </div>
             </div>
           </div>
@@ -2040,11 +1996,6 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
 <div>
   <div>
     <div>
-      <div
-        class="sql-console-page-header"
-      >
-        SQL console
-      </div>
       <hr
         class="euiHorizontalRule euiHorizontalRule--full"
       />
@@ -2058,13 +2009,8 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
         <div
           class="euiPanel sql-console-query-editor container-panel"
         >
-          <h1
-            class="euiTitle euiTitle--large container-panel-header"
-          >
-            SQL console
-          </h1>
           <div
-            class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive"
+            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
             <div
               class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
@@ -2342,7 +2288,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary sql-editor-button"
+                  class="euiButton euiButton--primary sql-editor-button euiButton--fill"
                   type="button"
                 >
                   <span
@@ -2359,21 +2305,20 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
               <div
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <a
-                  class="euiButtonEmpty euiButtonEmpty--primary euiHeaderLink sql-editor-link"
-                  href="#"
-                  rel="noreferrer"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButtonEmpty__content"
+                    class="euiButton__content"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="euiButton__text"
                     >
                       Clear
                     </span>
                   </span>
-                </a>
+                </button>
               </div>
             </div>
           </div>
@@ -2549,11 +2494,6 @@ exports[`<Main /> spec renders the component 1`] = `
 <div>
   <div>
     <div>
-      <div
-        class="sql-console-page-header"
-      >
-        SQL console
-      </div>
       <hr
         class="euiHorizontalRule euiHorizontalRule--full"
       />
@@ -2567,13 +2507,8 @@ exports[`<Main /> spec renders the component 1`] = `
         <div
           class="euiPanel sql-console-query-editor container-panel"
         >
-          <h1
-            class="euiTitle euiTitle--large container-panel-header"
-          >
-            SQL console
-          </h1>
           <div
-            class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive"
+            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
             <div
               class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
@@ -2851,7 +2786,7 @@ exports[`<Main /> spec renders the component 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary sql-editor-button"
+                  class="euiButton euiButton--primary sql-editor-button euiButton--fill"
                   type="button"
                 >
                   <span
@@ -2868,21 +2803,20 @@ exports[`<Main /> spec renders the component 1`] = `
               <div
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <a
-                  class="euiButtonEmpty euiButtonEmpty--primary euiHeaderLink sql-editor-link"
-                  href="#"
-                  rel="noreferrer"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButtonEmpty__content"
+                    class="euiButton__content"
                   >
                     <span
-                      class="euiButtonEmpty__text"
+                      class="euiButton__text"
                     >
                       Clear
                     </span>
                   </span>
-                </a>
+                </button>
               </div>
             </div>
           </div>
diff --git a/public/components/QueryEditor/QueryEditor.tsx b/public/components/QueryEditor/QueryEditor.tsx
index ce89f1e..3d5f286 100644
--- a/public/components/QueryEditor/QueryEditor.tsx
+++ b/public/components/QueryEditor/QueryEditor.tsx
@@ -38,7 +38,7 @@ class QueryEditor extends React.Component<QueryEditorProps, QueryEditorState> {
   constructor(props: QueryEditorProps) {
     super(props);
     this.state = {
-      sqlQueriesString: this.props.sqlQueriesString ? this.props.sqlQueriesString : ""
+      sqlQueriesString: this.props.sqlQueriesString ? this.props.sqlQueriesString : "show tables like %;\n" + "describe tables like %;"
     };
 
     this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
@@ -53,11 +53,7 @@ class QueryEditor extends React.Component<QueryEditorProps, QueryEditorState> {
       <EuiPanel className="sql-console-query-editor container-panel"
         paddingSize="none"
       >
-        <EuiTitle className="container-panel-header" size="l">
-          <h1>SQL console</h1>
-        </EuiTitle>
-
-        <EuiFlexGroup gutterSize="none">
+        <EuiFlexGroup gutterSize="s">
           <EuiFlexItem grow={1} className="sql-query-panel" paddingSize="none">
             <EuiText className="sql-query-panel-header">SQL Query</EuiText>
             <EuiCodeEditor
@@ -123,7 +119,7 @@ class QueryEditor extends React.Component<QueryEditorProps, QueryEditorState> {
                 this.props.onTranslate(this.state.sqlQueriesString)
               }
             >
-              <EuiButton className="sql-editor-button">
+              <EuiButton fill={true} className="sql-editor-button">
                 Translate
               </EuiButton>
             </EuiFlexItem>
@@ -134,9 +130,9 @@ class QueryEditor extends React.Component<QueryEditorProps, QueryEditorState> {
                 this.props.onClear();
               }}
             >
-              <EuiHeaderLink className="sql-editor-link" href="#" isActive>
+              <EuiButton className="sql-editor-button">
                 Clear
-              </EuiHeaderLink>
+              </EuiButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </div>
diff --git a/public/components/QueryEditor/__snapshots__/QueryEditor.test.tsx.snap b/public/components/QueryEditor/__snapshots__/QueryEditor.test.tsx.snap
index 933b6ca..9893015 100644
--- a/public/components/QueryEditor/__snapshots__/QueryEditor.test.tsx.snap
+++ b/public/components/QueryEditor/__snapshots__/QueryEditor.test.tsx.snap
@@ -5,13 +5,8 @@ exports[`<QueryEditor /> spec renders the component 1`] = `
   <div
     class="euiPanel sql-console-query-editor container-panel"
   >
-    <h1
-      class="euiTitle euiTitle--large container-panel-header"
-    >
-      SQL console
-    </h1>
     <div
-      class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
@@ -289,7 +284,7 @@ exports[`<QueryEditor /> spec renders the component 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            class="euiButton euiButton--primary sql-editor-button"
+            class="euiButton euiButton--primary sql-editor-button euiButton--fill"
             type="button"
           >
             <span
@@ -306,21 +301,20 @@ exports[`<QueryEditor /> spec renders the component 1`] = `
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <a
-            class="euiButtonEmpty euiButtonEmpty--primary euiHeaderLink sql-editor-link"
-            href="#"
-            rel="noreferrer"
+          <button
+            class="euiButton euiButton--primary sql-editor-button"
+            type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButton__content"
             >
               <span
-                class="euiButtonEmpty__text"
+                class="euiButton__text"
               >
                 Clear
               </span>
             </span>
-          </a>
+          </button>
         </div>
       </div>
     </div>
@@ -333,13 +327,8 @@ exports[`<QueryEditor /> spec tests the action buttons 1`] = `
   <div
     class="euiPanel sql-console-query-editor container-panel"
   >
-    <h1
-      class="euiTitle euiTitle--large container-panel-header"
-    >
-      SQL console
-    </h1>
     <div
-      class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
@@ -617,7 +606,7 @@ exports[`<QueryEditor /> spec tests the action buttons 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            class="euiButton euiButton--primary sql-editor-button"
+            class="euiButton euiButton--primary sql-editor-button euiButton--fill"
             type="button"
           >
             <span
@@ -634,21 +623,20 @@ exports[`<QueryEditor /> spec tests the action buttons 1`] = `
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <a
-            class="euiButtonEmpty euiButtonEmpty--primary euiHeaderLink sql-editor-link"
-            href="#"
-            rel="noreferrer"
+          <button
+            class="euiButton euiButton--primary sql-editor-button"
+            type="button"
           >
             <span
-              class="euiButtonEmpty__content"
+              class="euiButton__content"
             >
               <span
-                class="euiButtonEmpty__text"
+                class="euiButton__text"
               >
                 Clear
               </span>
             </span>
-          </a>
+          </button>
         </div>
       </div>
     </div>