From af2b2d4ef9fb31d43241ba0f85962c80cbe4de37 Mon Sep 17 00:00:00 2001 From: yuboluo Date: Tue, 10 Sep 2024 17:51:12 +0800 Subject: [PATCH] [Bug][Workspace]Fix page display errors and add loading status (#8086) * Fix page display errors and add loading status Signed-off-by: yubonluo * Changeset file for PR #8086 created/updated * optimize the code Signed-off-by: yubonluo --------- Signed-off-by: yubonluo Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> --- changelogs/fragments/8086.yml | 2 ++ .../workspace_bottom_bar.test.tsx | 1 + .../workspace_detail/workspace_bottom_bar.tsx | 3 +++ .../workspace_detail/workspace_detail.tsx | 2 ++ .../components/workspace_detail_app.tsx | 11 +++++++-- .../data_source_connection_table.tsx | 1 + .../workspace_permission_setting_panel.tsx | 24 ++++++++++--------- 7 files changed, 31 insertions(+), 13 deletions(-) create mode 100644 changelogs/fragments/8086.yml diff --git a/changelogs/fragments/8086.yml b/changelogs/fragments/8086.yml new file mode 100644 index 000000000000..4cc7acd85249 --- /dev/null +++ b/changelogs/fragments/8086.yml @@ -0,0 +1,2 @@ +fix: +- [Workspace]Fix page display errors and add loading status ([#8086](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8086)) \ No newline at end of file diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx index 2214587d121a..f539288a54c0 100644 --- a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.test.tsx @@ -14,6 +14,7 @@ const defaultProps = { numberOfChanges: 2, numberOfErrors: 1, handleResetForm: mockHandleResetForm, + isFormSubmitting: false, }; describe('WorkspaceBottomBar', () => { diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx index fdc817dc6f80..4d148cc05062 100644 --- a/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx @@ -20,6 +20,7 @@ interface WorkspaceBottomBarProps { numberOfChanges: number; numberOfErrors: number; handleResetForm: () => void; + isFormSubmitting: boolean; } export const WorkspaceBottomBar = ({ @@ -27,6 +28,7 @@ export const WorkspaceBottomBar = ({ numberOfChanges, numberOfErrors, handleResetForm, + isFormSubmitting, }: WorkspaceBottomBarProps) => { const applicationElement = document.querySelector('.app-wrapper'); const bottomBar = ( @@ -82,6 +84,7 @@ export const WorkspaceBottomBar = ({ fill color="primary" data-test-subj="workspaceForm-bottomBar-updateButton" + isLoading={isFormSubmitting} > {i18n.translate('workspace.form.bottomBar.saveChanges', { defaultMessage: 'Save changes', diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx index 052a54dcc785..fd10b7ab2bfc 100644 --- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx +++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx @@ -42,6 +42,7 @@ import { export interface WorkspaceDetailProps { registeredUseCases$: BehaviorSubject; + isFormSubmitting: boolean; } export const WorkspaceDetail = (props: WorkspaceDetailProps) => { @@ -292,6 +293,7 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => { numberOfChanges={numberOfChanges} numberOfErrors={numberOfErrors} handleResetForm={handleResetForm} + isFormSubmitting={props.isFormSubmitting} /> )} diff --git a/src/plugins/workspace/public/components/workspace_detail_app.tsx b/src/plugins/workspace/public/components/workspace_detail_app.tsx index 9518b5707bb3..2d90e56147b5 100644 --- a/src/plugins/workspace/public/components/workspace_detail_app.tsx +++ b/src/plugins/workspace/public/components/workspace_detail_app.tsx @@ -59,6 +59,7 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailProps) => { const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null)); const availableUseCases = useObservable(props.registeredUseCases$, []); const isPermissionEnabled = application?.capabilities.workspaces.permissionEnabled; + const [isFormSubmitting, setIsFormSubmitting] = useState(false); /** * set breadcrumbs to chrome @@ -105,6 +106,9 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailProps) => { const handleWorkspaceFormSubmit = useCallback( async (data: WorkspaceFormSubmitData) => { let result; + if (isFormSubmitting) { + return; + } if (!currentWorkspace) { notifications?.toasts.addDanger({ title: i18n.translate('Cannot find current workspace', { @@ -113,6 +117,7 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailProps) => { }); return; } + setIsFormSubmitting(true); try { const { permissionSettings, selectedDataSourceConnections, ...attributes } = data; @@ -158,9 +163,11 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailProps) => { text: error instanceof Error ? error.message : JSON.stringify(error), }); return; + } finally { + setIsFormSubmitting(false); } }, - [notifications?.toasts, currentWorkspace, http, application, workspaceClient] + [isFormSubmitting, currentWorkspace, notifications?.toasts, workspaceClient, application, http] ); if (!workspaces || !application || !http || !savedObjects || !currentWorkspaceFormData) { @@ -178,7 +185,7 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailProps) => { availableUseCases={availableUseCases} > - + ); diff --git a/src/plugins/workspace/public/components/workspace_form/data_source_connection_table.tsx b/src/plugins/workspace/public/components/workspace_form/data_source_connection_table.tsx index d440d3e751d6..7d4075199582 100644 --- a/src/plugins/workspace/public/components/workspace_form/data_source_connection_table.tsx +++ b/src/plugins/workspace/public/components/workspace_form/data_source_connection_table.tsx @@ -242,6 +242,7 @@ export const DataSourceConnectionTable = ({ itemIdToExpandedRowMap={itemIdToExpandedRowMap} isExpandable={true} selection={selection} + className="workspace-detail-direct-query-table" /> ); }; diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx index 6b10b88dc5f5..144bf391511a 100644 --- a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx +++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx @@ -182,17 +182,19 @@ export const WorkspacePermissionSettingPanel = ({ ))} {isEditing && ( - - {i18n.translate('workspace.form.permissionSettingPanel.addCollaborator', { - defaultMessage: 'Add collaborator', - })} - + + + {i18n.translate('workspace.form.permissionSettingPanel.addCollaborator', { + defaultMessage: 'Add collaborator', + })} + + )} );