Define tables

public/components/Main/main.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiPageSideBar ,EuiSideNav, EuiPanel, EuiPageTemplate, EuiPage, EuiPageContent, EuiPageContentBody, EuiFlexGrid, EuiSplitPanel, EuiComboBox, EuiText, EuiPagination, EuiPopover, EuiFieldSearch} from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
 import React from 'react';
@@ -20,6 +20,7 @@ import { PPLPage } from '../PPLPage/PPLPage';
 import Switch from '../QueryLanguageSwitch/Switch';
 import QueryResults from '../QueryResults/QueryResults';
 import { SQLPage } from '../SQLPage/SQLPage';
+import {TableView} from '../SQLPage/TableView'
 
 interface ResponseData {
   ok: boolean;
@@ -64,7 +65,7 @@ export type DataRow = {
   rowId: number;
   data: { [key: string]: any };
 };
-
+ 
 interface MainProps {
   httpClient: CoreStart['http'];
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
@@ -87,6 +88,7 @@ interface MainState {
   itemIdToExpandedRowMap: ItemIdToExpandedRowMap;
   messages: Array<QueryMessage>;
   isResultFullScreen: boolean;
+  tablenames: string[]
 }
 
 const SUCCESS_MESSAGE = 'Success';
@@ -99,6 +101,29 @@ const errorQueryResponse = (queryResultResponseDetail: any) => {
   return errorMessage;
 };
 
+function getQueryResultsForSidebar(queryResults: ResponseDetail<string>[]){
+  let fields;
+  queryResults.map((queries: ResponseDetail<string>) => {
+  if (!queries.fulfilled) {
+      return {
+      fulfilled: queries.fulfilled,
+      errorMessage: errorQueryResponse(queries),
+      };
+  } else {
+      const responseObj = queries.data
+      ? JSON.parse(queries.data)
+      : '';
+
+      const schema: object[] = _.get(responseObj, 'schema');
+      const datarows: any[][] = _.get(responseObj, 'datarows');
+      fields = datarows.map((data)=>{
+      return data[2]
+      })
+  }
+  })
+  return fields
+} 
+
 export function getQueryResultsForTable(
   queryResults: ResponseDetail<string>[]
 ): ResponseDetail<QueryResult>[] {
@@ -218,12 +243,13 @@ export class Main extends React.Component<MainProps, MainState> {
       itemIdToExpandedRowMap: {},
       messages: [],
       isResultFullScreen: false,
+      tablenames : []
     };
-
     this.httpClient = this.props.httpClient;
     this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
     this.updatePPLQueries = _.debounce(this.updatePPLQueries, 250).bind(this);
     this.setIsResultFullScreen = this.setIsResultFullScreen.bind(this);
+    this.onRunSidebar()
   }
 
   componentDidMount() {
@@ -335,6 +361,44 @@ export class Main extends React.Component<MainProps, MainState> {
     });
   }
 
+  onRunSidebar = (): void => {
+    let values :string[];
+    const queries: string[] = getQueries(`SHOW tables LIKE '%';`)
+    if (queries.length > 0) {
+      let endpoint = '../api/sql_console/sqlquery';
+      const responsePromise = Promise.all(
+        queries.map((query: string) =>
+          this.httpClient
+            .post(endpoint, { body: JSON.stringify({ query }) })
+            .catch((error: any) => {
+              this.setState({
+                messages: [
+                  {
+                    text: error.message,
+                    className: 'error-message',
+                  },
+                ],
+              });
+            })
+        )
+      );
+      Promise.all([responsePromise]).then(([response]) => {
+        const results: ResponseDetail<string>[] = response.map((response) =>
+          this.processQueryResponse(response as IHttpResponse<ResponseData>)
+        );
+        values = getQueryResultsForSidebar(results);
+        this.setState(
+          {
+            tablenames : values
+          },
+          () => console.log('Successfully updated the states')
+        ); // added callback function to handle async issues
+
+        return values
+      });
+    }
+  }
+
   onRun = (queriesString: string): void => {
     const queries: string[] = getQueries(queriesString);
     const language = this.state.language;
@@ -617,6 +681,7 @@ export class Main extends React.Component<MainProps, MainState> {
     let linkTitle;
 
     if (this.state.language == 'SQL') {
+      // this.onRunSidebar()
       page = (
         <SQLPage
           onRun={this.onRun}
@@ -685,25 +750,61 @@ export class Main extends React.Component<MainProps, MainState> {
     }
 
     return (
-      <div>
-        <div className="sql-console-query-container">
-          <div className="query-language-switch">
+      <>
+      <EuiPanel>
+        <EuiFlexGroup direction='row' alignItems='center'>
+          <EuiFlexItem>
+            <EuiText>
+              Data Connection
+            </EuiText>
+            <EuiComboBox
+                placeholder='Connection Name'
+                  />
+                <EuiSpacer/>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <Switch onChange={this.onChange} language={this.state.language} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton href={link} target="_blank" iconType="popout" iconSide="right">
+              {linkTitle}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+      <EuiPage paddingSize='none'>
+      {(this.state.language=='SQL')?       
+        <EuiPanel className={`col-md-3`}>
+          <EuiPageSideBar >
+            <EuiFlexGroup direction="column">
+                <EuiFlexItem>
+                  <EuiFlexItem grow={1}>
+                    <EuiButton
+                      iconType="arrowDown"
+                      iconSide="right"
+                      fullWidth
+                    >
+                      Create
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiSpacer/>
+                  <EuiFlexItem>
+                    <EuiFieldSearch
+                        placeholder="Search this"
+                      />
+                  </EuiFlexItem>
+                  <EuiSpacer/>
+                  <TableView
+                    tablenames = {this.state.tablenames}/>
+                  <EuiSpacer/>
+                </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPageSideBar>
+        </EuiPanel>  : null}  
+        <EuiPageContent>
+          <EuiPageContentBody>
             <EuiFlexGroup alignItems="center">
-              <EuiFlexItem>
-                <EuiTitle size="l">
-                  <h1>Query Workbench</h1>
-                </EuiTitle>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <Switch onChange={this.onChange} language={this.state.language} />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButton href={link} target="_blank" iconType="popout" iconSide="right">
-                  {linkTitle}
-                </EuiButton>
-              </EuiFlexItem>
             </EuiFlexGroup>
-          </div>
           <EuiSpacer size="l" />
           <div>{page}</div>
 
@@ -746,8 +847,11 @@ export class Main extends React.Component<MainProps, MainState> {
               setIsResultFullScreen={this.setIsResultFullScreen}
             />
           </div>
-        </div>
-      </div>
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPage>
+      </>
+
     );
   }
 }

public/components/SQLPage/TableView.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import React from "react";
+import {
+  EuiIcon,
+  EuiTreeView
+} from "@elastic/eui";
+import _ from 'lodash';
+
+export const TableView =({tablenames}) =>{
+    let treeData;
+    if(tablenames.length >0){
+        treeData = tablenames.map((element,index)=>({
+            label: element,
+            icon: <EuiIcon type='tableDensityNormal' size="m" /> ,
+            id:'element_'+index
+        }))
+    }
+    return (
+        <>
+            {tablenames.length>0?
+                <EuiTreeView
+                aria-label = "Sample Folder Tree"
+                items = {treeData}
+                aria-labelledby=""
+                />
+            :null}
+        </>
+    )
+
+}
+

public/components/app.tsx

@@ -30,7 +30,7 @@ export const WorkbenchApp = ({ basename, notifications, http, navigation, chrome
     <Router basename={'/' + basename}>
       <I18nProvider>
         <div>
-          <EuiPage>
+          <EuiPage paddingSize='none'>
             <EuiPageBody>
               <Route 
                 path="/"