fixed create table async query bug (#158) (#163)

* avoid displaying results if no scheme is returned on success for async query



* if there is no schema, will handle case by displaying success/failure regardless



* success callout when no schema returned



* added failure page to async



* fixed some test errors and added snapshots



* update to failure portion



* included tests of loading and failure states



---------


(cherry picked from commit 55d6352)

Signed-off-by: Paul Sebastian <paulstn@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

common/types/index.ts

@@ -79,4 +79,4 @@ export interface CreateAccelerationForm {
   formErrors: FormErrorsType;
 }
 
-export type AsyncQueryLoadingStatus = 'SUCCESS' | 'FAILED' | 'RUNNING' | 'SCHEDULED' | 'CANCELED';
+export type AsyncQueryLoadingStatus = 'SUCCESS' | 'FAILED' | 'RUNNING' | 'SCHEDULED' | 'CANCELLED';

public/components/Main/main.tsx

@@ -15,6 +15,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiText,
+  EuiCallOut,
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
@@ -108,8 +109,10 @@ interface MainState {
   selectedDatasource: EuiComboBoxOptionOption[];
   asyncLoading: boolean;
   asyncLoadingStatus: AsyncQueryLoadingStatus;
+  asyncQueryError: string;
   asyncJobId: string;
   isAccelerationFlyoutOpened: boolean;
+  isCallOutVisible: boolean;
 }
 
 const SUCCESS_MESSAGE = 'Success';
@@ -246,8 +249,10 @@ export class Main extends React.Component<MainProps, MainState> {
       selectedDatasource: [{ label: 'OpenSearch' }],
       asyncLoading: false,
       asyncLoadingStatus: 'SUCCESS',
+      asyncQueryError: '',
       asyncJobId: '',
       isAccelerationFlyoutOpened: false,
+      isCallOutVisible: false,
     };
     this.httpClient = this.props.httpClient;
     this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
@@ -403,6 +408,9 @@ export class Main extends React.Component<MainProps, MainState> {
             queryResultsCSV: [],
             queryResultsTEXT: [],
             searchQuery: '',
+            asyncLoading: false,
+            asyncLoadingStatus: 'SUCCESS',
+            isCallOutVisible: false,
           },
           () => console.log('Successfully updated the states')
         ); // added callback function to handle async issues
@@ -474,6 +482,7 @@ export class Main extends React.Component<MainProps, MainState> {
                 asyncLoading: true,
                 asyncLoadingStatus: 'SCHEDULED',
                 asyncJobId: queryId,
+                isCallOutVisible: false,
               });
               this.callGetStartPolling(queries);
               const interval = setInterval(() => {
@@ -513,7 +522,7 @@ export class Main extends React.Component<MainProps, MainState> {
         this.setState({
           queries: queries,
           queryResults: [result],
-          queryResultsTable: resultTable,
+          queryResultsTable: result.data['schema'].length > 0 ? resultTable : [],
           selectedTabId: getDefaultTabId([result]),
           selectedTabName: getDefaultTabLabel([result], queries[0]),
           messages: this.getMessage(resultTable),
@@ -524,6 +533,7 @@ export class Main extends React.Component<MainProps, MainState> {
           searchQuery: '',
           asyncLoading: false,
           asyncLoadingStatus: status,
+          isCallOutVisible: !(result.data['schema'].length > 0),
         });
       } else if (_.isEqual(status, 'FAILED') || _.isEqual(status, 'CANCELLED')) {
         this.setState({
@@ -535,6 +545,7 @@ export class Main extends React.Component<MainProps, MainState> {
               className: 'error-message',
             },
           ],
+          asyncQueryError: result.data['error'],
         });
       } else {
         this.setState({
@@ -760,6 +771,9 @@ export class Main extends React.Component<MainProps, MainState> {
       selectedTabId: MESSAGE_TAB_LABEL,
       selectedTabName: MESSAGE_TAB_LABEL,
       itemIdToExpandedRowMap: {},
+      asyncLoading: false,
+      asyncLoadingStatus: 'SUCCESS',
+      isCallOutVisible: false,
     });
   };
 
@@ -890,8 +904,8 @@ export class Main extends React.Component<MainProps, MainState> {
             getText={this.getText}
             isResultFullScreen={this.state.isResultFullScreen}
             setIsResultFullScreen={this.setIsResultFullScreen}
-            asyncLoading={this.state.asyncLoading}
             asyncLoadingStatus={this.state.asyncLoadingStatus}
+            asyncQueryError={this.state.asyncQueryError}
             cancelAsyncQuery={this.cancelAsyncQuery}
             selectedDatasource={this.state.selectedDatasource}
           />
@@ -956,6 +970,23 @@ export class Main extends React.Component<MainProps, MainState> {
               <EuiSpacer size="l" />
               <div>{page}</div>
               <EuiSpacer size="l" />
+              {this.state.isCallOutVisible && (
+                <>
+                  <EuiCallOut
+                    size="s"
+                    title="Query Submitted Successfully"
+                    color="success"
+                    iconType="check"
+                    dismissible
+                    onDismiss={() =>
+                      this.setState({
+                        isCallOutVisible: false,
+                      })
+                    }
+                  />
+                  <EuiSpacer size="l" />
+                </>
+              )}
               <div className="sql-console-query-result">
                 <QueryResults
                   language={this.state.language}
@@ -992,8 +1023,8 @@ export class Main extends React.Component<MainProps, MainState> {
                   getText={this.getText}
                   isResultFullScreen={this.state.isResultFullScreen}
                   setIsResultFullScreen={this.setIsResultFullScreen}
-                  asyncLoading={this.state.asyncLoading}
                   asyncLoadingStatus={this.state.asyncLoadingStatus}
+                  asyncQueryError={this.state.asyncQueryError}
                   cancelAsyncQuery={this.cancelAsyncQuery}
                   selectedDatasource={this.state.selectedDatasource}
                 />