Adjusting Create Acceleration Flyout Props

common/types/index.ts

@@ -87,6 +87,7 @@
 }
 
 export enum AsyncQueryStatus {
+  Initial = 'initial',
   Pending = 'pending',
   Success = 'success',
   Failed = 'failed',
@@ -127,7 +128,7 @@
 interface AsyncApiDataResponse {
   status: string;
   schema?: Array<{ name: string; type: string }>;
   datarows?: any;
   total?: number;
   size?: number;
   error?: string;

public/components/SQLPage/AccelerationFlyoutButton.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButton } from '@elastic/eui';
+import React, { useEffect } from 'react';
+import { catalogCacheRefs } from '../../../public/framework/catalog_cache_refs';
+import { getRenderCreateAccelerationFlyout } from '../../../public/dependencies/register_observability_dependencies';
+
+interface AccelerationFlyoutButtonProps {
+  datasource: string;
+  asyncLoading: boolean;
+}
+
+export const AccelerationFlyoutButton = (props: AccelerationFlyoutButtonProps) => {
+  const { datasource, asyncLoading } = props;
+
+  const renderCreateAccelerationFlyout = getRenderCreateAccelerationFlyout();
+  const { loadStatus, startLoading, stopLoading } = catalogCacheRefs.useLoadTableColumnsToCache();
+
+  useEffect(() => {
+    return () => {
+      stopLoading();
+    };
+  }, []);
+
+  return (
+    <EuiButton
+      className="sql-accelerate-button"
+      onClick={() =>
+        renderCreateAccelerationFlyout(datasource, loadStatus, startLoading, stopLoading)
+      }
+      isDisabled={asyncLoading}
+    >
+      Accelerate Table
+    </EuiButton>
+  );
+};

public/components/SQLPage/SQLPage.tsx

@@ -26,6 +26,8 @@
 import { SAMPLE_SQL_QUERY } from '../../../common/constants';
 import { getRenderCreateAccelerationFlyout } from '../../dependencies/register_observability_dependencies';
 import { ResponseDetail, TranslateResult } from '../Main/main';
+import { catalogCacheRefs } from '../../framework/catalog_cache_refs';
+import { AccelerationFlyoutButton } from './AccelerationFlyoutButton';
 
 interface SQLPageProps {
   http: CoreStart['http'];
@@ -34,7 +36,7 @@
   onClear: () => void;
   updateSQLQueries: (query: string) => void;
   sqlQuery: string;
   sqlTranslations: ResponseDetail<TranslateResult>[];
   selectedDatasource: EuiComboBoxOptionOption[];
   asyncLoading: boolean;
   openAccelerationFlyout: boolean;
@@ -67,7 +69,13 @@
   }
 
   setAccelerationFlyout = () => {
-    this.renderCreateAccelerationFlyout(this.props.selectedDatasource[0].label);
+    const { loadStatus, startLoading, stopLoading } = catalogCacheRefs.useLoadTableColumnsToCache();
+    this.renderCreateAccelerationFlyout(
+      this.props.selectedDatasource[0].label,
+      loadStatus,
+      startLoading,
+      stopLoading
+    );
   };
 
   componentDidUpdate(prevProps: SQLPageProps) {
@@ -98,7 +106,7 @@
 
     const explainContent = sqlTranslationsNotEmpty()
       ? this.props.sqlTranslations
           .map((queryTranslation: any) => JSON.stringify(queryTranslation.data, null, 2))
           .join('\n')
       : 'This query is not explainable.';
 
@@ -210,15 +218,10 @@
             {this.props.selectedDatasource &&
               this.props.selectedDatasource[0].label !== 'OpenSearch' && (
                 <EuiFlexItem grow={false}>
-                  <EuiButton
-                    className="sql-accelerate-button"
-                    onClick={() =>
-                      this.renderCreateAccelerationFlyout(this.props.selectedDatasource[0].label)
-                    }
-                    isDisabled={this.props.asyncLoading}
-                  >
-                    Accelerate Table
-                  </EuiButton>
+                  <AccelerationFlyoutButton
+                    datasource={this.props.selectedDatasource[0].label}
+                    asyncLoading={this.props.asyncLoading}
+                  />
                 </EuiFlexItem>
               )}
           </EuiFlexGroup>

public/dependencies/register_observability_dependencies.tsx

@@ -20,7 +20,16 @@ export const [
 export const [
   getRenderCreateAccelerationFlyout,
   setRenderCreateAccelerationFlyout,
-] = createGetterSetter<(dataSource: string) => void>('renderCreateAccelerationFlyout');
+] = createGetterSetter<
+  (
+    dataSource: string,
+    loadStatus: any,
+    startLoading: (dataSourceName: string, databaseName?: string, tableName?: string) => void,
+    stopLoading: () => void,
+    databaseName?: string,
+    tableName?: string
+  ) => void
+>('renderCreateAccelerationFlyout');
 
 export const registerObservabilityDependencies = (start?: ObservabilityStart) => {
   if (!start) return;