[Workspace]Show add collaborators modal until collaborators added (op…

…ensearch-project#8574)

* Show add collaborators modal until update success

Signed-off-by: Lin Wang <[email protected]>

* Changeset file for PR opensearch-project#8574 created/updated

---------

Signed-off-by: Lin Wang <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

changelogs/fragments/8574.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Show add collaborators modal until collaborators added ([#8574](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8574))

src/plugins/workspace/public/components/add_collaborators_modal/add_collaborators_modal.test.tsx

@@ -76,4 +76,28 @@ describe('AddCollaboratorsModal', () => {
     expect(screen.getByText(instruction.detail)).toBeInTheDocument();
     expect(screen.getByText('Learn more in Documentation')).toBeInTheDocument();
   });
+
+  it('should disable "Add collaborators" button during onAddCollaborators execution', async () => {
+    const onAddCollaboratorsMock = jest.fn().mockReturnValue(
+      new Promise((resolve) => {
+        window.setTimeout(resolve, 1000);
+      })
+    );
+    render(<AddCollaboratorsModal {...defaultProps} onAddCollaborators={onAddCollaboratorsMock} />);
+    const collaboratorInput = screen.getByLabelText(defaultProps.inputLabel);
+    fireEvent.change(collaboratorInput, { target: { value: 'user1' } });
+    const addCollaboratorsButton = screen.getByRole('button', { name: 'Add collaborators' });
+
+    jest.useFakeTimers();
+    fireEvent.click(addCollaboratorsButton);
+    await waitFor(() => {
+      expect(addCollaboratorsButton).toBeDisabled();
+    });
+    jest.runAllTimers();
+    jest.useRealTimers();
+
+    await waitFor(() => {
+      expect(addCollaboratorsButton).not.toBeDisabled();
+    });
+  });
 });

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

@@ -64,9 +64,15 @@ export const AddCollaboratorsModal = ({
     }
     return { collaboratorId, accessLevel, permissionType };
   });
+  const [isAdding, setIsAdding] = useState(false);
 
-  const handleAddCollaborators = () => {
-    onAddCollaborators(validCollaborators);
+  const handleAddCollaborators = async () => {
+    setIsAdding(true);
+    try {
+      await onAddCollaborators(validCollaborators);
+    } finally {
+      setIsAdding(false);
+    }
   };
 
   return (
@@ -131,6 +137,8 @@ export const AddCollaboratorsModal = ({
           type="submit"
           onClick={handleAddCollaborators}
           fill
+          isDisabled={isAdding}
+          isLoading={isAdding}
         >
           {i18n.translate('workspace.addCollaboratorsModal.addCollaboratorsButton', {
             defaultMessage: 'Add collaborators',

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

@@ -23,7 +23,9 @@ import { WorkspacePermissionSetting } from './types';
 interface Props {
   displayedTypes: WorkspaceCollaboratorType[];
   permissionSettings: PermissionSetting[];
-  handleSubmitPermissionSettings: (permissionSettings: WorkspacePermissionSetting[]) => void;
+  handleSubmitPermissionSettings: (
+    permissionSettings: WorkspacePermissionSetting[]
+  ) => Promise<void>;
 }
 
 export const AddCollaboratorButton = ({
@@ -55,7 +57,7 @@ export const AddCollaboratorButton = ({
           }),
     }));
     const newPermissionSettings = [...permissionSettings, ...addedSettings];
-    handleSubmitPermissionSettings(newPermissionSettings as WorkspacePermissionSetting[]);
+    await handleSubmitPermissionSettings(newPermissionSettings as WorkspacePermissionSetting[]);
   };
 
   const panelItems = displayedTypes.map(({ id, buttonLabel, onAdd }) => ({

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

@@ -74,7 +74,9 @@ export const getDisplayedType = (
 interface Props {
   permissionSettings: PermissionSetting[];
   displayedCollaboratorTypes: WorkspaceCollaboratorType[];
-  handleSubmitPermissionSettings: (permissionSettings: WorkspacePermissionSetting[]) => void;
+  handleSubmitPermissionSettings: (
+    permissionSettings: WorkspacePermissionSetting[]
+  ) => Promise<void>;
 }
 
 export const WorkspaceCollaboratorTable = ({

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

@@ -32,7 +32,9 @@ interface WorkspaceFormContextProps {
   >;
   setSelectedDataSourceConnections: React.Dispatch<React.SetStateAction<DataSourceConnection[]>>;
   onAppLeave: AppMountParameters['onAppLeave'];
-  handleSubmitPermissionSettings: (permissionSettings: WorkspacePermissionSetting[]) => void;
+  handleSubmitPermissionSettings: (
+    permissionSettings: WorkspacePermissionSetting[]
+  ) => Promise<void>;
 }
 
 const initialContextValue: WorkspaceFormContextProps = {} as WorkspaceFormContextProps;