Adjust the appearance of SQL Workbench UI (#38)

* Removed redundant headers and changed the header to "SQL Workbench"
* Added default queries in initial interface
* Adjusted components in UI

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',
       },

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",

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;
-}
+}

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>
   );

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"
     />