From 2ab82d62ea0a83ffa2863ea97d88b0275e4e0b74 Mon Sep 17 00:00:00 2001 From: yubonluo Date: Mon, 9 Sep 2024 18:23:06 +0800 Subject: [PATCH 1/3] Fix page display errors and add loading status Signed-off-by: yubonluo --- .../workspace_detail/workspace_bottom_bar.test.tsx | 1 + .../workspace_detail/workspace_bottom_bar.tsx | 3 +++ .../components/workspace_detail/workspace_detail.tsx | 2 ++ .../public/components/workspace_detail_app.tsx | 11 +++++++++-- .../workspace_form/data_source_connection_table.tsx | 1 + .../workspace_permission_setting_panel.tsx | 1 + 6 files changed, 17 insertions(+), 2 deletions(-) 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..dd5c90c4dec4 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,10 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailProps) => { const handleWorkspaceFormSubmit = useCallback( async (data: WorkspaceFormSubmitData) => { let result; + if (isFormSubmitting) { + return; + } + setIsFormSubmitting(true); if (!currentWorkspace) { notifications?.toasts.addDanger({ title: i18n.translate('Cannot find current workspace', { @@ -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..338a5fcc91d8 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 @@ -184,6 +184,7 @@ export const WorkspacePermissionSettingPanel = ({ {isEditing && ( Date: Mon, 9 Sep 2024 10:31:05 +0000 Subject: [PATCH 2/3] Changeset file for PR #8086 created/updated --- changelogs/fragments/8086.yml | 2 ++ 1 file changed, 2 insertions(+) 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 From e071cd92df4dbdcbc0b63d56f701c0c935dab820 Mon Sep 17 00:00:00 2001 From: yubonluo Date: Tue, 10 Sep 2024 09:43:21 +0800 Subject: [PATCH 3/3] optimize the code Signed-off-by: yubonluo --- .../components/workspace_detail_app.tsx | 2 +- .../workspace_permission_setting_panel.tsx | 25 ++++++++++--------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/plugins/workspace/public/components/workspace_detail_app.tsx b/src/plugins/workspace/public/components/workspace_detail_app.tsx index dd5c90c4dec4..2d90e56147b5 100644 --- a/src/plugins/workspace/public/components/workspace_detail_app.tsx +++ b/src/plugins/workspace/public/components/workspace_detail_app.tsx @@ -109,7 +109,6 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailProps) => { if (isFormSubmitting) { return; } - setIsFormSubmitting(true); if (!currentWorkspace) { notifications?.toasts.addDanger({ title: i18n.translate('Cannot find current workspace', { @@ -118,6 +117,7 @@ export const WorkspaceDetailApp = (props: WorkspaceDetailProps) => { }); return; } + setIsFormSubmitting(true); try { const { permissionSettings, selectedDataSourceConnections, ...attributes } = data; 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 338a5fcc91d8..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,18 +182,19 @@ export const WorkspacePermissionSettingPanel = ({ ))} {isEditing && ( - - {i18n.translate('workspace.form.permissionSettingPanel.addCollaborator', { - defaultMessage: 'Add collaborator', - })} - + + + {i18n.translate('workspace.form.permissionSettingPanel.addCollaborator', { + defaultMessage: 'Add collaborator', + })} + + )} );