Update loading state for tables fields in create acceleration flyout (#…

…1576) (#1581) * update loading state for tables fields * update snapshots --------- (cherry picked from commit cffc104) Signed-off-by: Shenoy Pratik <sgguruda@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>
opensearch-project · Mar 20, 2024 · 2e9d20c · 2e9d20c
1 parent 75e91db
commit 2e9d20c
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 13 deletions.
diff --git a/...omponents/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx b/...omponents/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx
@@ -117,9 +117,20 @@ export const CreateAcceleration = ({
   };
 
   const initiateColumnLoad = (dataSource: string, database: string, dataTable: string) => {
+    // All components related to table fields
     setAccelerationFormData({
       ...accelerationFormData,
       dataTableFields: [],
+      skippingIndexQueryData: [],
+      coveringIndexQueryData: [],
+      materializedViewQueryData: {
+        columnsValues: [],
+        groupByTumbleValue: {
+          timeField: '',
+          tumbleWindow: 0,
+          tumbleInterval: ACCELERATION_TIME_INTERVAL[2].value, // minutes
+        },
+      },
     });
     stopLoadingTableFields();
     if (dataTable !== '') {
@@ -163,6 +174,12 @@ export const CreateAcceleration = ({
     }
   }, [loadStatus]);
 
+  useEffect(() => {
+    return () => {
+      stopLoadingTableFields();
+    };
+  }, []);
+
   const dataSourcesPreselected = databaseName !== undefined && tableName !== undefined;
 
   return (
@@ -191,7 +208,6 @@ export const CreateAcceleration = ({
               accelerationFormData={accelerationFormData}
               setAccelerationFormData={setAccelerationFormData}
               initiateColumnLoad={initiateColumnLoad}
-              loading={tableFieldsLoading}
             />
             <EuiSpacer size="xxl" />
             <IndexSettingOptions
@@ -202,6 +218,7 @@ export const CreateAcceleration = ({
             <QueryVisualEditor
               accelerationFormData={accelerationFormData}
               setAccelerationFormData={setAccelerationFormData}
+              tableFieldsLoading={tableFieldsLoading}
             />
             <EuiSpacer size="xxl" />
             <IndexAdvancedSettings

diff --git a/..._accelerations_flyout/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap b/..._accelerations_flyout/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap
@@ -244,7 +244,7 @@ Array [
                     aria-describedby="random_html_id-help-0"
                     aria-haspopup="true"
                     aria-labelledby="random_html_id random_html_id"
-                    className="euiSuperSelectControl euiSuperSelectControl-isLoading"
+                    className="euiSuperSelectControl"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -256,9 +256,6 @@ Array [
                   <div
                     className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                   >
-                    <span
-                      className="euiLoadingSpinner euiLoadingSpinner--medium"
-                    />
                     <span
                       className="euiFormControlLayoutCustomIcon"
                     >

diff --git a/...onents/manage/accelerations/create_accelerations_flyout/selectors/index_type_selector.tsx b/...onents/manage/accelerations/create_accelerations_flyout/selectors/index_type_selector.tsx
@@ -18,14 +18,12 @@ interface IndexTypeSelectorProps {
   accelerationFormData: CreateAccelerationForm;
   setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
   initiateColumnLoad: (dataSource: string, database: string, dataTable: string) => void;
-  loading: boolean;
 }
 
 export const IndexTypeSelector = ({
   accelerationFormData,
   setAccelerationFormData,
   initiateColumnLoad,
-  loading,
 }: IndexTypeSelectorProps) => {
   const [value, setValue] = useState('skipping');
 
@@ -116,7 +114,6 @@ export const IndexTypeSelector = ({
           onChange={onChangeSupeSelect}
           itemLayoutAlign="top"
           hasDividers
-          isLoading={loading}
         />
       </EuiFormRow>
     </>

diff --git a/...e/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx b/...e/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx
@@ -37,7 +37,7 @@ export const SelectorLoadDatabases = ({
   const {
     loadStatus: loadDatabasesStatus,
     startLoading: startDatabasesLoading,
-    stopLoading: _stopDatabasesLoading,
+    stopLoading: stopDatabasesLoading,
   } = useLoadDatabasesToCache();
 
   const onClickRefreshDatabases = () => {
@@ -62,6 +62,12 @@ export const SelectorLoadDatabases = ({
     setLoadingComboBoxes({ ...loadingComboBoxes, database: isLoading });
   }, [isLoading]);
 
+  useEffect(() => {
+    return () => {
+      stopDatabasesLoading();
+    };
+  }, []);
+
   return (
     <>
       {isLoading ? (

diff --git a/...age/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx b/...age/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx
@@ -48,12 +48,12 @@ export const SelectorLoadObjects = ({
   const {
     loadStatus: loadTablesStatus,
     startLoading: startLoadingTables,
-    stopLoading: _stopLoadingTables,
+    stopLoading: stopLoadingTables,
   } = useLoadTablesToCache();
   const {
     loadStatus: loadAccelerationsStatus,
     startLoading: startLoadingAccelerations,
-    stopLoading: _stopLoadingAccelerations,
+    stopLoading: stopLoadingAccelerations,
   } = useLoadAccelerationsToCache();
 
   const onClickRefreshDatabases = () => {
@@ -97,6 +97,12 @@ export const SelectorLoadObjects = ({
     setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: isEitherLoading });
   }, [isEitherLoading]);
 
+  useEffect(() => {
+    return () => {
+      stopLoadingTables();
+      stopLoadingAccelerations();
+    };
+  }, []);
   return (
     <>
       {isEitherLoading ? (

diff --git a/...s/manage/accelerations/create_accelerations_flyout/visual_editors/query_visual_editor.tsx b/...s/manage/accelerations/create_accelerations_flyout/visual_editors/query_visual_editor.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiSpacer } from '@elastic/eui';
 import React from 'react';
 import { CreateAccelerationForm } from '../../../../../../../../common/types/data_connections';
 import { CoveringIndexBuilder } from './covering_index/covering_index_builder';
@@ -13,13 +13,25 @@ import { SkippingIndexBuilder } from './skipping_index/skipping_index_builder';
 interface QueryVisualEditorProps {
   accelerationFormData: CreateAccelerationForm;
   setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+  tableFieldsLoading: boolean;
 }
 
 export const QueryVisualEditor = ({
   accelerationFormData,
   setAccelerationFormData,
+  tableFieldsLoading,
 }: QueryVisualEditorProps) => {
-  return (
+  return tableFieldsLoading ? (
+    <>
+      <EuiFlexGroup alignItems="center" gutterSize="s" direction="column">
+        <EuiSpacer />
+        <EuiFlexItem>
+          <EuiLoadingSpinner size="l" />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>Loading tables fields</EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  ) : (
     <>
       <EuiSpacer size="l" />
       {accelerationFormData.accelerationIndexType === 'skipping' && (