From a2a756cf7c87ede8f6e1d185b089295d99ff75a2 Mon Sep 17 00:00:00 2001
From: Paul Sebastian <paulstn@amazon.com>
Date: Tue, 24 Oct 2023 18:49:16 -0700
Subject: [PATCH] pr requested changes

Signed-off-by: Paul Sebastian <paulstn@amazon.com>
---
 common/constants/index.ts                |  3 +
 public/components/Main/main.tsx          | 36 +++++-----
 public/components/PPLPage/PPLPage.tsx    |  8 +--
 public/components/SQLPage/SQLPage.tsx    |  7 +-
 public/components/SQLPage/table_view.tsx | 86 ++++++++++++------------
 5 files changed, 66 insertions(+), 74 deletions(-)

diff --git a/common/constants/index.ts b/common/constants/index.ts
index 6e88cb94..724aae24 100644
--- a/common/constants/index.ts
+++ b/common/constants/index.ts
@@ -95,3 +95,6 @@ export const POLL_INTERVAL_MS = 2000;
 export const ASYNC_QUERY_ENDPOINT = '/api/spark_sql_console';
 export const ASYNC_QUERY_JOB_ENDPOINT = ASYNC_QUERY_ENDPOINT + '/job/';
 export const ASYNC_QUERY_SESSION_ID = 'async-query-session-id';
+
+export const SAMPLE_PPL_QUERY = 'source = <datasource>.<database>.<table> | head 10';
+export const SAMPLE_SQL_QUERY = 'select * from <datasource>.<database>.<table> limit 10';
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index 62ee1758..fe1ebacc 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -966,25 +966,23 @@ export class Main extends React.Component<MainProps, MainState> {
                   height: 'calc(100vh - 254px)',
                 }}
               >
-                <EuiFlexItem grow={false}>
-                  <EuiFlexGroup direction="row" gutterSize="s">
-                    <EuiFlexItem grow={false}>
-                      <EuiButtonIcon
-                        display="base"
-                        iconType="refresh"
-                        size="m"
-                        aria-label="refresh"
-                        onClick={this.handleReloadTree}
-                      />
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <CreateButton
-                        updateSQLQueries={this.updateSQLQueries}
-                        selectedDatasource={this.state.selectedDatasource}
-                      />
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiFlexItem>
+                <EuiFlexGroup direction="row" gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonIcon
+                      display="base"
+                      iconType="refresh"
+                      size="m"
+                      aria-label="refresh"
+                      onClick={this.handleReloadTree}
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <CreateButton
+                      updateSQLQueries={this.updateSQLQueries}
+                      selectedDatasource={this.state.selectedDatasource}
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
                 <EuiSpacer size="l" />
                 <EuiFlexGroup
                   direction="column"
diff --git a/public/components/PPLPage/PPLPage.tsx b/public/components/PPLPage/PPLPage.tsx
index c63698cc..58f39dd7 100644
--- a/public/components/PPLPage/PPLPage.tsx
+++ b/public/components/PPLPage/PPLPage.tsx
@@ -22,6 +22,7 @@ import {
 } from '@elastic/eui';
 import React from 'react';
 import { ResponseDetail, TranslateResult } from '../Main/main';
+import { SAMPLE_PPL_QUERY } from '../../../common/constants';
 
 interface PPLPageProps {
   onRun: (query: string) => void;
@@ -161,12 +162,7 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
               </EuiButton>
             </EuiFlexItem>
           ) : (
-            <EuiFlexItem
-              grow={false}
-              onClick={() =>
-                this.props.updatePPLQueries('source = <datasource>.<database>.<table> | head 10')
-              }
-            >
+            <EuiFlexItem grow={false} onClick={() => this.props.updatePPLQueries(SAMPLE_PPL_QUERY)}>
               <EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
                 Sample Query
               </EuiButton>
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
index 4bb6ff2d..4e31b6d4 100644
--- a/public/components/SQLPage/SQLPage.tsx
+++ b/public/components/SQLPage/SQLPage.tsx
@@ -25,6 +25,7 @@ import React from 'react';
 import { CoreStart } from '../../../../../src/core/public';
 import { ResponseDetail, TranslateResult } from '../Main/main';
 import { CreateAcceleration } from '../acceleration/create/create_acceleration';
+import { SAMPLE_SQL_QUERY } from '../../../common/constants';
 
 interface SQLPageProps {
   http: CoreStart['http'];
@@ -202,11 +203,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                 ) : (
                   <EuiFlexItem
                     grow={false}
-                    onClick={() =>
-                      this.props.updateSQLQueries(
-                        'select * from <datasource>.<database>.<table> limit 10'
-                      )
-                    }
+                    onClick={() => this.props.updateSQLQueries(SAMPLE_SQL_QUERY)}
                   >
                     <EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
                       Sample Query
diff --git a/public/components/SQLPage/table_view.tsx b/public/components/SQLPage/table_view.tsx
index 884ba942..bc3206ad 100644
--- a/public/components/SQLPage/table_view.tsx
+++ b/public/components/SQLPage/table_view.tsx
@@ -501,52 +501,50 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
 
   return (
     <>
-      <>
-        {isLoadingBanner.flag ? (
-          <EuiFlexGroup alignItems="center" gutterSize="s" direction="column">
-            <EuiSpacer />
-            <EuiFlexItem>
-              <EuiLoadingSpinner size="l" />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>Loading data</EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <div style={{ padding: '10px' }}>
-                <EuiFlexItem>
-                  <EuiText textAlign="center" color="subdued">
-                    Loading may take over 30 seconds
-                  </EuiText>
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  <EuiText textAlign="center" color="subdued">
-                    Status: {isLoadingBanner.status}
-                  </EuiText>
-                </EuiFlexItem>
-              </div>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        ) : OpenSearchIndicesTree.length > 0 || treeDataDatabases.length > 0 ? (
+      {isLoadingBanner.flag ? (
+        <EuiFlexGroup alignItems="center" gutterSize="s" direction="column">
+          <EuiSpacer />
+          <EuiFlexItem>
+            <EuiLoadingSpinner size="l" />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>Loading data</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <div style={{ padding: '10px' }}>
+              <EuiFlexItem>
+                <EuiText textAlign="center" color="subdued">
+                  Loading may take over 30 seconds
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiText textAlign="center" color="subdued">
+                  Status: {isLoadingBanner.status}
+                </EuiText>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ) : OpenSearchIndicesTree.length > 0 || treeDataDatabases.length > 0 ? (
+        <EuiFlexItem grow={false}>
+          {selectedItems[0].label === 'OpenSearch' ? (
+            <EuiTreeView aria-label="Sample Folder Tree" items={OpenSearchIndicesTree} />
+          ) : (
+            <EuiTreeView aria-label="Sample Folder Tree" items={treeDataDatabases} />
+          )}
+        </EuiFlexItem>
+      ) : (
+        <EuiFlexGroup alignItems="center" direction="column">
           <EuiFlexItem grow={false}>
-            {selectedItems[0].label === 'OpenSearch' ? (
-              <EuiTreeView aria-label="Sample Folder Tree" items={OpenSearchIndicesTree} />
-            ) : (
-              <EuiTreeView aria-label="Sample Folder Tree" items={treeDataDatabases} />
-            )}
+            <EuiEmptyPrompt
+              icon={<EuiIcon type="database" size="m" />}
+              iconColor="subdued"
+              titleSize="xs"
+              title={<p>No Data available</p>}
+              body={<p>{isLoadingBanner.status}</p>}
+            />
           </EuiFlexItem>
-        ) : (
-          <EuiFlexGroup alignItems="center" direction="column">
-            <EuiFlexItem grow={false}>
-              <EuiEmptyPrompt
-                icon={<EuiIcon type="database" size="m" />}
-                iconColor="subdued"
-                titleSize="xs"
-                title={<p>No Data available</p>}
-                body={<p>{isLoadingBanner.status}</p>}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        )}
-        {indexFlyout}
-      </>
+        </EuiFlexGroup>
+      )}
+      {indexFlyout}
     </>
   );
 };