HAI-1814 Fix sending multiple application delete requests (#383)

Fixed a problem where user could press confirm button in application cancel dialog
many times in a row, which would send multiple delete requests to backend.
Fixed this by putting the confirm button in loading state when clicking it first time.

src/domain/application/applicationView/ApplicationView.test.tsx

@@ -5,6 +5,7 @@ import ApplicationViewContainer from './ApplicationViewContainer';
 import { waitForLoadingToFinish } from '../../../testUtils/helperFunctions';
 import { server } from '../../mocks/test-server';
 import { SignedInUser } from '../../hanke/hankeUsers/hankeUser';
+import * as applicationApi from '../utils';
 
 test('Correct information about application should be displayed', async () => {
   render(<ApplicationViewContainer id={4} />);
@@ -57,7 +58,9 @@ test('Should show error notification if loading application fails', async () =>
 test('Should be able to go editing application when editing is possible', async () => {
   const { user } = render(<ApplicationViewContainer id={4} />);
 
-  await waitFor(() => screen.findByRole('button', { name: 'Muokkaa hakemusta' }));
+  await waitFor(() => screen.findByRole('button', { name: 'Muokkaa hakemusta' }), {
+    timeout: 4000,
+  });
   await user.click(screen.getByRole('button', { name: 'Muokkaa hakemusta' }));
 
   expect(window.location.pathname).toBe('/fi/johtoselvityshakemus/4/muokkaa');
@@ -74,7 +77,7 @@ test('Application edit button should not be displayed when editing is not possib
 test('Should be able to cancel application if it is possible', async () => {
   const { user } = render(<ApplicationViewContainer id={4} />);
 
-  await waitFor(() => screen.findByRole('button', { name: 'Peru hakemus' }));
+  await waitFor(() => screen.findByRole('button', { name: 'Peru hakemus' }), { timeout: 4000 });
   await user.click(screen.getByRole('button', { name: 'Peru hakemus' }));
   await user.click(screen.getByRole('button', { name: 'Vahvista' }));
 
@@ -112,3 +115,28 @@ test('Should not show Edit application and Cancel application buttons if user do
   expect(screen.queryByRole('button', { name: 'Muokkaa hakemusta' })).not.toBeInTheDocument();
   expect(screen.queryByRole('button', { name: 'Peru hakemus' })).not.toBeInTheDocument();
 });
+
+test('Should not send multiple requests if clicking application cancel confirm button many times', async () => {
+  server.use(
+    rest.delete('/api/hakemukset/:id', async (req, res, ctx) => {
+      return res(ctx.delay(200), ctx.status(200));
+    }),
+  );
+
+  const cancelApplication = jest.spyOn(applicationApi, 'cancelApplication');
+  const { user } = render(<ApplicationViewContainer id={1} />);
+
+  await waitForLoadingToFinish();
+  await waitFor(() => screen.findByRole('button', { name: 'Peru hakemus' }), { timeout: 4000 });
+
+  await user.click(screen.getByRole('button', { name: 'Peru hakemus' }));
+  const confirmCancelButton = screen.getByRole('button', { name: 'Vahvista' });
+  await user.click(confirmCancelButton);
+  await user.click(confirmCancelButton);
+  await user.click(confirmCancelButton);
+  await screen.findByText('Hakemus peruttiin onnistuneesti');
+
+  expect(cancelApplication).toHaveBeenCalledTimes(1);
+
+  cancelApplication.mockRestore();
+});

src/domain/application/components/ApplicationCancel.tsx

@@ -91,6 +91,7 @@ export const ApplicationCancel: React.FC<Props> = ({
         mainBtnLabel={t('common:confirmationDialog:confirmButton')}
         variant="danger"
         errorMsg={errorMessage}
+        isLoading={applicationCancelMutation.isLoading}
       />
 
       <Button