SONAR-13906 Prevent ALM configuration modal from closing on click outside

3 files changed, 62 insertions, 53 deletions

diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormModalRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormModalRenderer.tsx
index c3600b8bfe8..f6ec74d3180 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormModalRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormModalRenderer.tsx
@@ -19,9 +19,8 @@
  */
 import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
-import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
+import Modal from 'sonar-ui-common/components/controls/Modal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
-import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 
 export interface AlmBindingDefinitionFormModalProps {
@@ -31,7 +30,7 @@ export interface AlmBindingDefinitionFormModalProps {
   help?: React.ReactNode;
   isSecondInstance: boolean;
   onCancel: () => void;
-  onSubmit: () => void;
+  onSubmit: () => void | Promise<void | Response>;
 }
 
 export default function AlmBindingDefinitionFormModalRenderer(
@@ -40,43 +39,49 @@ export default function AlmBindingDefinitionFormModalRenderer(
   const { action, children, help, isSecondInstance } = props;
   const header = translate('settings.almintegration.form.header', action);
 
+  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    props.onSubmit();
+  };
+
   return (
-    <SimpleModal header={header} onClose={props.onCancel} onSubmit={props.onSubmit} size="medium">
-      {({ onCloseClick, onFormSubmit, submitting }) => (
-        <form className="views-form" onSubmit={onFormSubmit}>
-          <div className="modal-head">
-            <h2>{header}</h2>
-          </div>
+    <Modal
+      contentLabel={header}
+      onRequestClose={props.onCancel}
+      shouldCloseOnOverlayClick={false}
+      size="medium">
+      <form className="views-form" onSubmit={handleSubmit}>
+        <div className="modal-head">
+          <h2>{header}</h2>
+        </div>
 
-          <div className="modal-body modal-container">
-            {isSecondInstance && action === 'create' && (
-              <Alert className="big-spacer-bottom" variant="warning">
-                {translate('settings.almintegration.form.second_instance_warning')}
-              </Alert>
-            )}
+        <div className="modal-body modal-container">
+          {isSecondInstance && action === 'create' && (
+            <Alert className="big-spacer-bottom" variant="warning">
+              {translate('settings.almintegration.form.second_instance_warning')}
+            </Alert>
+          )}
 
-            <div className="display-flex-start">
-              <div className="flex-1">{children}</div>
+          <div className="display-flex-start">
+            <div className="flex-1">{children}</div>
 
-              {help ? (
-                <Alert className="huge-spacer-left flex-1" variant="info">
-                  {help}
-                </Alert>
-              ) : (
-                <div className="flex-1" />
-              )}
-            </div>
+            {help ? (
+              <Alert className="huge-spacer-left flex-1" variant="info">
+                {help}
+              </Alert>
+            ) : (
+              <div className="flex-1" />
+            )}
           </div>
+        </div>
 
-          <div className="modal-foot">
-            <DeferredSpinner className="spacer-right" loading={submitting} />
-            <SubmitButton disabled={submitting || !props.canSubmit()}>
-              {translate('settings.almintegration.form.save')}
-            </SubmitButton>
-            <ResetButtonLink onClick={onCloseClick}>{translate('cancel')}</ResetButtonLink>
-          </div>
-        </form>
-      )}
-    </SimpleModal>
+        <div className="modal-foot">
+          <SubmitButton disabled={!props.canSubmit()}>
+            {translate('settings.almintegration.form.save')}
+          </SubmitButton>
+          <ResetButtonLink onClick={props.onCancel}>{translate('cancel')}</ResetButtonLink>
+        </div>
+      </form>
+    </Modal>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionFormModalRenderer-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionFormModalRenderer-test.tsx
index 4bf4263a6c1..6201ec060dc 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionFormModalRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionFormModalRenderer-test.tsx
@@ -19,14 +19,27 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { mockEvent } from '../../../../../helpers/testMocks';
 import AlmBindingDefinitionFormModalRenderer, {
   AlmBindingDefinitionFormModalProps
 } from '../AlmBindingDefinitionFormModalRenderer';
 
 it('should render correctly', () => {
-  expect(shallowRender().dive()).toMatchSnapshot();
-  expect(shallowRender({ help: <span>Help me</span> }).dive()).toMatchSnapshot('with help');
-  expect(shallowRender({ isSecondInstance: true }).dive()).toMatchSnapshot('second instance');
+  expect(shallowRender()).toMatchSnapshot();
+  expect(shallowRender({ help: <span>Help me</span> })).toMatchSnapshot('with help');
+  expect(shallowRender({ isSecondInstance: true })).toMatchSnapshot('second instance');
+});
+
+it('should submit properly', () => {
+  const onSubmit = jest.fn().mockResolvedValue({});
+  const wrapper = shallowRender({ onSubmit });
+
+  const event: React.SyntheticEvent<HTMLFormElement> = mockEvent({ preventDefault: jest.fn() });
+
+  wrapper.find('form').simulate('submit', event);
+
+  expect(event.preventDefault).toBeCalled();
+  expect(onSubmit).toBeCalled();
 });
 
 function shallowRender(props: Partial<AlmBindingDefinitionFormModalProps> = {}) {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormModalRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormModalRenderer-test.tsx.snap
index 3cf445a2f46..a5410979b1b 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormModalRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormModalRenderer-test.tsx.snap
@@ -4,6 +4,7 @@ exports[`should render correctly 1`] = `
 <Modal
   contentLabel="settings.almintegration.form.header.create"
   onRequestClose={[MockFunction]}
+  shouldCloseOnOverlayClick={false}
   size="medium"
 >
   <form
@@ -36,17 +37,13 @@ exports[`should render correctly 1`] = `
     <div
       className="modal-foot"
     >
-      <DeferredSpinner
-        className="spacer-right"
-        loading={false}
-      />
       <SubmitButton
         disabled={true}
       >
         settings.almintegration.form.save
       </SubmitButton>
       <ResetButtonLink
-        onClick={[Function]}
+        onClick={[MockFunction]}
       >
         cancel
       </ResetButtonLink>
@@ -59,6 +56,7 @@ exports[`should render correctly: second instance 1`] = `
 <Modal
   contentLabel="settings.almintegration.form.header.create"
   onRequestClose={[MockFunction]}
+  shouldCloseOnOverlayClick={false}
   size="medium"
 >
   <form
@@ -97,17 +95,13 @@ exports[`should render correctly: second instance 1`] = `
     <div
       className="modal-foot"
     >
-      <DeferredSpinner
-        className="spacer-right"
-        loading={false}
-      />
       <SubmitButton
         disabled={true}
       >
         settings.almintegration.form.save
       </SubmitButton>
       <ResetButtonLink
-        onClick={[Function]}
+        onClick={[MockFunction]}
       >
         cancel
       </ResetButtonLink>
@@ -120,6 +114,7 @@ exports[`should render correctly: with help 1`] = `
 <Modal
   contentLabel="settings.almintegration.form.header.create"
   onRequestClose={[MockFunction]}
+  shouldCloseOnOverlayClick={false}
   size="medium"
 >
   <form
@@ -157,17 +152,13 @@ exports[`should render correctly: with help 1`] = `
     <div
       className="modal-foot"
     >
-      <DeferredSpinner
-        className="spacer-right"
-        loading={false}
-      />
       <SubmitButton
         disabled={true}
       >
         settings.almintegration.form.save
       </SubmitButton>
       <ResetButtonLink
-        onClick={[Function]}
+        onClick={[MockFunction]}
       >
         cancel
       </ResetButtonLink>