Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update loading state for tables fields in create acceleration flyout #1576

Merged
merged 2 commits into from
Mar 20, 2024
Merged

Update loading state for tables fields in create acceleration flyout #1576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4f9d7b3
update loading state for tables fields
ps48 Mar 19, 2024
5710a22
update snapshots
ps48 Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion ...omponents/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,20 @@
};

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 !== '') {
Expand All @@ -143,7 +154,7 @@
accelerationFormData.dataTable
);
}
}, [databaseName, tableName]);

Check warning on line 157 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has missing dependencies: 'accelerationFormData.dataSource', 'accelerationFormData.dataTable', 'accelerationFormData.database', and 'initiateColumnLoad'. Either include them or remove the dependency array

useEffect(() => {
const status = loadStatus.toLowerCase();
Expand All @@ -161,8 +172,14 @@
) {
setTableFieldsLoading(false);
}
}, [loadStatus]);

Check warning on line 175 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has missing dependencies: 'accelerationFormData.dataSource', 'accelerationFormData.dataTable', 'accelerationFormData.database', and 'loadColumnsToAccelerationForm'. Either include them or remove the dependency array

useEffect(() => {
return () => {
stopLoadingTableFields();

Check warning on line 179 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx

View check run for this annotation

Codecov / codecov/patch

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx#L179 

Added line #L179 was not covered by tests
};
}, []);

Check warning on line 181 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'stopLoadingTableFields'. Either include it or remove the dependency array

const dataSourcesPreselected = databaseName !== undefined && tableName !== undefined;

return (
Expand Down Expand Up @@ -191,7 +208,6 @@
accelerationFormData={accelerationFormData}
setAccelerationFormData={setAccelerationFormData}
initiateColumnLoad={initiateColumnLoad}
loading={tableFieldsLoading}
/>
<EuiSpacer size="xxl" />
<IndexSettingOptions
Expand All @@ -202,6 +218,7 @@
<QueryVisualEditor
accelerationFormData={accelerationFormData}
setAccelerationFormData={setAccelerationFormData}
tableFieldsLoading={tableFieldsLoading}
/>
<EuiSpacer size="xxl" />
<IndexAdvancedSettings
Expand Down
5 changes: 1 addition & 4 deletions ..._accelerations_flyout/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand All @@ -256,9 +256,6 @@ Array [
<div
className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
>
<span
className="euiLoadingSpinner euiLoadingSpinner--medium"
/>
<span
className="euiFormControlLayoutCustomIcon"
>
Expand Down
3 changes: 0 additions & 3 deletions ...onents/manage/accelerations/create_accelerations_flyout/selectors/index_type_selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,12 @@
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');

Expand All @@ -35,7 +33,7 @@
accelerationFormData.database,
accelerationFormData.dataTable
);
}, [accelerationFormData.dataTable]);

Check warning on line 36 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_type_selector.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has missing dependencies: 'accelerationFormData.dataSource', 'accelerationFormData.database', and 'initiateColumnLoad'. Either include them or remove the dependency array. If 'initiateColumnLoad' changes too often, find the parent component that defines it and wrap that definition in useCallback

const onChangeSupeSelect = (indexType: string) => {
setAccelerationFormData({
Expand Down Expand Up @@ -116,7 +114,6 @@
onChange={onChangeSupeSelect}
itemLayoutAlign="top"
hasDividers
isLoading={loading}
/>
</EuiFormRow>
</>
Expand Down
8 changes: 7 additions & 1 deletion ...e/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
const {
loadStatus: loadDatabasesStatus,
startLoading: startDatabasesLoading,
stopLoading: _stopDatabasesLoading,
stopLoading: stopDatabasesLoading,
} = useLoadDatabasesToCache();

const onClickRefreshDatabases = () => {
Expand All @@ -56,12 +56,18 @@
) {
setIsLoading(false);
}
}, [loadDatabasesStatus]);

Check warning on line 59 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'loadDatabases'. Either include it or remove the dependency array. If 'loadDatabases' changes too often, find the parent component that defines it and wrap that definition in useCallback

useEffect(() => {
setLoadingComboBoxes({ ...loadingComboBoxes, database: isLoading });
}, [isLoading]);

Check warning on line 63 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has missing dependencies: 'loadingComboBoxes' and 'setLoadingComboBoxes'. Either include them or remove the dependency array. If 'setLoadingComboBoxes' changes too often, find the parent component that defines it and wrap that definition in useCallback

useEffect(() => {
return () => {
stopDatabasesLoading();

Check warning on line 67 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx

View check run for this annotation

Codecov / codecov/patch

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx#L67 

Added line #L67 was not covered by tests
};
}, []);

Check warning on line 69 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_databases.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'stopDatabasesLoading'. Either include it or remove the dependency array

return (
<>
{isLoading ? (
Expand Down
10 changes: 8 additions & 2 deletions ...age/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,12 @@
const {
loadStatus: loadTablesStatus,
startLoading: startLoadingTables,
stopLoading: _stopLoadingTables,
stopLoading: stopLoadingTables,
} = useLoadTablesToCache();
const {
loadStatus: loadAccelerationsStatus,
startLoading: startLoadingAccelerations,
stopLoading: _stopLoadingAccelerations,
stopLoading: stopLoadingAccelerations,
} = useLoadAccelerationsToCache();

const onClickRefreshDatabases = () => {
Expand All @@ -80,7 +80,7 @@
) {
setIsLoading({ ...isLoading, tableStatus: false });
}
}, [loadTablesStatus]);

Check warning on line 83 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has missing dependencies: 'isLoading' and 'loadTables'. Either include them or remove the dependency array. If 'loadTables' changes too often, find the parent component that defines it and wrap that definition in useCallback

useEffect(() => {
const status = loadAccelerationsStatus.toLowerCase();
Expand All @@ -91,12 +91,18 @@
) {
setIsLoading({ ...isLoading, accelerationsStatus: false });
}
}, [loadAccelerationsStatus]);

Check warning on line 94 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'isLoading'. Either include it or remove the dependency array. You can also do a functional update 'setIsLoading(i => ...)' if you only need 'isLoading' in the 'setIsLoading' call

useEffect(() => {
setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: isEitherLoading });
}, [isEitherLoading]);

Check warning on line 98 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has missing dependencies: 'loadingComboBoxes' and 'setLoadingComboBoxes'. Either include them or remove the dependency array. If 'setLoadingComboBoxes' changes too often, find the parent component that defines it and wrap that definition in useCallback

useEffect(() => {
return () => {
stopLoadingTables();
stopLoadingAccelerations();

Check warning on line 103 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx

View check run for this annotation

Codecov / codecov/patch

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/selector_helpers/load_objects.tsx#L102-L103 

Added lines #L102 - L103 were not covered by tests
};
}, []);
return (
<>
{isEitherLoading ? (
Expand Down
16 changes: 14 additions & 2 deletions ...s/manage/accelerations/create_accelerations_flyout/visual_editors/query_visual_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -13,13 +13,25 @@
interface QueryVisualEditorProps {
accelerationFormData: CreateAccelerationForm;
setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
tableFieldsLoading: boolean;
}

export const QueryVisualEditor = ({
accelerationFormData,
setAccelerationFormData,
tableFieldsLoading,
}: QueryVisualEditorProps) => {
return (
return tableFieldsLoading ? (
<>

Check warning on line 25 in public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/query_visual_editor.tsx

View check run for this annotation

Codecov / codecov/patch

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/query_visual_editor.tsx#L25 

Added line #L25 was not covered by tests
<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' && (
Expand Down
Loading