Adding minor updates and bug fixes

common/constants/index.ts

@@ -8,20 +8,20 @@ export const PLUGIN_NAME = 'Query Workbench';
 export const OPENSEARCH_ACC_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
 export const ACC_INDEX_TYPE_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
 
-export const SKIPPING_INDEX = `skipping_index`
+export const SKIPPING_INDEX = `skipping_index`;
 export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`;
 export const SKIPPING_INDEX_QUERY = `CREATE SKIPPING INDEX ON myS3.logs_db.http_logs 
 (status VALUE_SET) 
 WITH (
   auto_refresh = true
-  )`
-export const COVERING_INDEX_QUERY =`CREATE INDEX covering_idx ON myS3.logs_db.http_logs
+  )`;
+export const COVERING_INDEX_QUERY = `CREATE INDEX covering_idx ON myS3.logs_db.http_logs
  (status) 
  WITH (
   auto_refresh = true
-  )`
-export const CREATE_DATABASE_QUERY =`CREATE DATABASE myS3.logs_db`
-export const CREATE_TABLE_QUERY =`CREATE EXTERNAL TABLE logs (
+  )`;
+export const CREATE_DATABASE_QUERY = `CREATE DATABASE myS3.logs_db`;
+export const CREATE_TABLE_QUERY = `CREATE EXTERNAL TABLE myS3.logs_db.logs (
   key BIGINT,
   status INTEGER,
   size FLOAT,
@@ -32,7 +32,7 @@ USING JSON
 OPTIONS (
   path 's3://test/path',
   compression 'gzip'
-);`
+);`;
 
 export const ACCELERATION_INDEX_TYPES = [
   { label: 'Skipping Index', value: 'skipping' },
@@ -80,3 +80,5 @@ export const ACCELERATION_INDEX_NAME_INFO = `All OpenSearch acceleration indices
 ##### Note:
 - All user given index names must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \, |, ?, #, >, or < are not allowed.  
   `;
+
+export const SIDEBAR_POLL_INTERVAL_MS = 5000;

public/components/Main/__snapshots__/main.test.tsx.snap

@@ -193,6 +193,7 @@ exports[`<Main /> spec click clear button 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -752,6 +753,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -1311,6 +1313,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -1870,6 +1873,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -1974,7 +1978,15 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
-                            2
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                2
+                              </div>
+                            </span>
 
                           </div>
                         </span>
@@ -2015,7 +2027,15 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
-                            2
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                2
+                              </div>
+                            </span>
 
                           </div>
                         </span>
@@ -2501,6 +2521,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -2605,6 +2626,13 @@ exports[`<Main /> spec click run button, response fills null and missing values
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              />
+                            </span>
 
                           </div>
                         </span>
@@ -2645,6 +2673,13 @@ exports[`<Main /> spec click run button, response fills null and missing values
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              />
+                            </span>
 
                           </div>
                         </span>
@@ -3133,6 +3168,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -3683,6 +3719,7 @@ exports[`<Main /> spec renders the component 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -3778,7 +3815,15 @@ exports[`<Main /> spec renders the component 1`] = `
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
-                            .kibana_1
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                .kibana_1
+                              </div>
+                            </span>
 
                           </div>
                         </span>

public/components/Main/main.tsx

@@ -14,7 +14,7 @@ import {
   EuiPageSideBar,
   EuiPanel,
   EuiSpacer,
-  EuiText
+  EuiText,
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
@@ -790,6 +790,9 @@ export class Main extends React.Component<MainProps, MainState> {
   }
 
   handleDataSelect = (selectedItems: []) => {
+    if (selectedItems[0].label !== 'OpenSearch' && this.state.language === 'SQL') {
+      this.updateSQLQueries('');
+    }
     this.setState({
       selectedDatasource: selectedItems,
     });
@@ -912,13 +915,11 @@ export class Main extends React.Component<MainProps, MainState> {
         <EuiPage paddingSize="none">
           {this.state.language === 'SQL' && (
             <EuiPanel>
-              <EuiPageSideBar>
+              <EuiPageSideBar style={{ maxWidth: '400px', width: '400px' }}>
                 <EuiFlexGroup direction="column">
                   <EuiFlexItem>
                     <EuiFlexItem grow={false}>
-                      <CreateButton
-                        updateSQLQueries={this.updateSQLQueries}
-                      />
+                      <CreateButton updateSQLQueries={this.updateSQLQueries} />
                     </EuiFlexItem>
                     <EuiSpacer />
                     <TableView

public/components/PPLPage/PPLPage.tsx

@@ -3,25 +3,24 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
 import {
-  EuiPanel,
   EuiButton,
+  EuiCodeBlock,
+  EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiText,
-  EuiCodeEditor,
-  EuiSpacer,
-  EuiCodeBlock,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
 } from '@elastic/eui';
+import React from 'react';
 import { ResponseDetail, TranslateResult } from '../Main/main';
-import _ from 'lodash';
 
 interface PPLPageProps {
   onRun: (query: string) => void;
@@ -107,7 +106,7 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
         <EuiCodeEditor
           theme="sql_console"
           width="100%"
-          height="5rem"
+          height="7rem"
           value={this.props.pplQuery}
           onChange={this.props.updatePPLQueries}
           showPrintMargin={false}

public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
     <div
       class="euiCodeEditorWrapper"
       data-test-subj="codeEditorContainer"
-      style="width: 100%; height: 5rem;"
+      style="width: 100%; height: 7rem;"
     >
       <button
         class="euiCodeEditorKeyboardHint"
@@ -39,7 +39,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
       <div
         class=" ace_editor ace-tm"
         id="some_html_id"
-        style="width: 100%; height: 5rem; font-size: 14px;"
+        style="width: 100%; height: 7rem; font-size: 14px;"
       >
         <textarea
           aria-label="Code Editor"
@@ -211,7 +211,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
     <div
       class="euiCodeEditorWrapper"
       data-test-subj="codeEditorContainer"
-      style="width: 100%; height: 5rem;"
+      style="width: 100%; height: 7rem;"
     >
       <button
         class="euiCodeEditorKeyboardHint"
@@ -232,7 +232,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
       <div
         class=" ace_editor ace-tm"
         id="some_html_id"
-        style="width: 100%; height: 5rem; font-size: 14px;"
+        style="width: 100%; height: 7rem; font-size: 14px;"
       >
         <textarea
           aria-label="Code Editor"

public/components/SQLPage/CreateButton.tsx

@@ -5,14 +5,18 @@
 
 import { EuiButton, EuiContextMenu, EuiPopover } from '@elastic/eui';
 import React, { useState } from 'react';
-import { COVERING_INDEX_QUERY, CREATE_DATABASE_QUERY, CREATE_TABLE_QUERY, SKIPPING_INDEX_QUERY } from '../../../common/constants';
-
+import {
+  COVERING_INDEX_QUERY,
+  CREATE_DATABASE_QUERY,
+  CREATE_TABLE_QUERY,
+  SKIPPING_INDEX_QUERY,
+} from '../../../common/constants';
 
 interface CreateButtonProps {
-  updateSQLQueries: (query: string) => void
+  updateSQLQueries: (query: string) => void;
 }
 
-export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
+export const CreateButton = ({ updateSQLQueries }: CreateButtonProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState(null);
 
@@ -26,17 +30,17 @@ export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
   };
 
   const handleSubMenuClick = (query: string) => {
-    updateSQLQueries(query)
+    updateSQLQueries(query);
     closePopover();
   };
 
   const fromSqlItems = [
     {
-      name: 'Create Table',
+      name: 'Create Database',
       onClick: () => handleSubMenuClick(CREATE_DATABASE_QUERY),
     },
     {
-      name: 'SQL Command',
+      name: 'Create Table',
       onClick: () => handleSubMenuClick(CREATE_TABLE_QUERY),
     },
   ];
@@ -71,30 +75,30 @@ export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
         panels={[
           {
             id: 0,
-            title: 'Choose an option',
+            title: 'Create options',
             items: [
               {
-                name: 'FROM SQL',
+                name: 'Spark SQL',
                 panel: 1,
               },
               {
-                name: 'Accelerated Index',
+                name: 'Acceleration Index',
                 panel: 2,
               },
             ],
           },
           {
             id: 1,
-            title: 'FROM SPARK SQL Options',
+            title: 'SPARK SQL Options',
             items: fromSqlItems,
           },
           {
             id: 2,
-            title: 'Accelerated Index Options',
+            title: 'Acceleration Index Options',
             items: acceleratedIndexItems,
           },
         ]}
       />
     </EuiPopover>
   );
-}
+};

public/components/SQLPage/SQLPage.tsx

@@ -17,7 +17,7 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiPanel,
-  EuiSpacer
+  EuiSpacer,
 } from '@elastic/eui';
 import 'brace/ext/language_tools';
 import 'brace/mode/sql';
@@ -124,7 +124,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     }
 
     return (
-      <>  
+      <>
         <EuiPanel className="sql-console-query-editor container-panel" paddingSize="m">
           <EuiSpacer size="s" />
           <EuiCodeEditor