[Bug][Workspace]Fix page display errors and add loading status (#8086) (

#8106)

* Fix page display errors and add loading status



* Changeset file for PR #8086 created/updated

* optimize the code



---------



(cherry picked from commit af2b2d4)

Signed-off-by: yubonluo <[email protected]>
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>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

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))

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', () => {

src/plugins/workspace/public/components/workspace_detail/workspace_bottom_bar.tsx

@@ -20,13 +20,15 @@ interface WorkspaceBottomBarProps {
   numberOfChanges: number;
   numberOfErrors: number;
   handleResetForm: () => void;
+  isFormSubmitting: boolean;
 }
 
 export const WorkspaceBottomBar = ({
   formId,
   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',

src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx

@@ -42,6 +42,7 @@ import {
 
 export interface WorkspaceDetailProps {
   registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
+  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}
         />
       )}
     </>

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}
     >
       <I18nProvider>
-        <WorkspaceDetail {...props} />
+        <WorkspaceDetail {...props} isFormSubmitting={isFormSubmitting} />
       </I18nProvider>
     </WorkspaceFormProvider>
   );

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"
     />
   );
 };

src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx

@@ -182,17 +182,19 @@ export const WorkspacePermissionSettingPanel = ({
         </React.Fragment>
       ))}
       {isEditing && (
-        <EuiSmallButton
-          fullWidth={false}
-          onClick={handleAddNewOne}
-          data-test-subj={`workspaceForm-permissionSettingPanel-addNew`}
-          color="primary"
-          iconType="plusInCircle"
-        >
-          {i18n.translate('workspace.form.permissionSettingPanel.addCollaborator', {
-            defaultMessage: 'Add collaborator',
-          })}
-        </EuiSmallButton>
+        <EuiCompressedFormRow fullWidth>
+          <EuiSmallButton
+            fullWidth={false}
+            onClick={handleAddNewOne}
+            data-test-subj={`workspaceForm-permissionSettingPanel-addNew`}
+            color="primary"
+            iconType="plusInCircle"
+          >
+            {i18n.translate('workspace.form.permissionSettingPanel.addCollaborator', {
+              defaultMessage: 'Add collaborator',
+            })}
+          </EuiSmallButton>
+        </EuiCompressedFormRow>
       )}
     </>
   );