From 23f63e3f324cf10cd0e60cc5f3ecbff0b5696259 Mon Sep 17 00:00:00 2001
From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Wed, 26 Jun 2019 12:09:14 +0200
Subject: [PATCH] SONAR-12070 Make large modals scrollable

---
 .../apps/coding-rules/components/ActivationFormModal.tsx  | 2 +-
 .../__snapshots__/ActivationFormModal-test.tsx.snap       | 2 +-
 .../src/main/js/apps/custom-metrics/components/Form.tsx   | 2 +-
 .../components/__tests__/__snapshots__/Form-test.tsx.snap | 2 +-
 .../main/js/apps/groups/components/EditMembersModal.tsx   | 4 ++--
 .../__tests__/__snapshots__/EditMembers-test.tsx.snap     | 8 ++++----
 .../__snapshots__/EditMembersModal-test.tsx.snap          | 2 +-
 .../main/js/apps/issues/components/BulkChangeModal.tsx    | 3 +--
 .../__tests__/__snapshots__/BulkChangeModal-test.tsx.snap | 4 ++--
 .../apps/quality-profiles/details/ChangeProjectsForm.tsx  | 2 +-
 .../__snapshots__/ChangeProjectsForm-test.tsx.snap        | 2 +-
 .../src/main/js/apps/users/components/GroupsForm.tsx      | 2 +-
 .../src/main/js/apps/users/components/UserForm.tsx        | 2 +-
 .../__tests__/__snapshots__/GroupsForm-test.tsx.snap      | 2 +-
 .../__tests__/__snapshots__/UserForm-test.tsx.snap        | 4 ++--
 15 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
index 490b971bab5..9d9b7611608 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
@@ -159,7 +159,7 @@ export default class ActivationFormModal extends React.PureComponent<Props, Stat
             <h2>{this.props.modalHeader}</h2>
           </div>
 
-          <div className="modal-body">
+          <div className="modal-body modal-container">
             {!isUpdateMode && activeInAllProfiles && (
               <Alert variant="info">{translate('coding_rules.active_in_all_profiles')}</Alert>
             )}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/ActivationFormModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/ActivationFormModal-test.tsx.snap
index 2225b883507..2507c2d70c1 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/ActivationFormModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/ActivationFormModal-test.tsx.snap
@@ -17,7 +17,7 @@ exports[`render correctly 1`] = `
       </h2>
     </div>
     <div
-      className="modal-body"
+      className="modal-body modal-container"
     >
       <Alert
         variant="info"
diff --git a/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx b/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx
index ffc3d920734..77b79a7837b 100644
--- a/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx
+++ b/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx
@@ -106,7 +106,7 @@ export default class Form extends React.PureComponent<Props, State> {
               <h2>{this.props.header}</h2>
             </header>
 
-            <div className="modal-body">
+            <div className="modal-body modal-container">
               <div className="modal-field">
                 <label htmlFor="create-metric-key">
                   {translate('key')}
diff --git a/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap b/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap
index 692174076ae..5a518648804 100644
--- a/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap
@@ -17,7 +17,7 @@ exports[`should render form 1`] = `
       </h2>
     </header>
     <div
-      className="modal-body"
+      className="modal-body modal-container"
     >
       <div
         className="modal-field"
diff --git a/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx b/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx
index 9b475b87c6a..6e6ce01ff70 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/EditMembersModal.tsx
@@ -57,7 +57,7 @@ interface State {
 
 const PAGE_SIZE = 100;
 
-export default class EditMembers extends React.PureComponent<Props, State> {
+export default class EditMembersModal extends React.PureComponent<Props, State> {
   mounted = false;
 
   constructor(props: Props) {
@@ -200,7 +200,7 @@ export default class EditMembers extends React.PureComponent<Props, State> {
           <h2>{modalHeader}</h2>
         </header>
 
-        <div className="modal-body">
+        <div className="modal-body modal-container">
           <DeferredSpinner loading={this.state.loading}>
             <SelectList
               elements={this.state.users.map(user => user.login)}
diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembers-test.tsx.snap b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembers-test.tsx.snap
index a2651397aff..084c8fa46fd 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembers-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembers-test.tsx.snap
@@ -83,7 +83,7 @@ exports[`should edit members 2`] = `
       </button>
     </Button>
   </ButtonIcon>
-  <EditMembers
+  <EditMembersModal
     group={
       Object {
         "id": 3,
@@ -137,7 +137,7 @@ exports[`should edit members 2`] = `
                     </h2>
                   </header>
                   <div
-                    class="modal-body"
+                    class="modal-body modal-container"
                   >
                     <div
                       class="select-list"
@@ -303,7 +303,7 @@ exports[`should edit members 2`] = `
                   </h2>
                 </header>
                 <div
-                  className="modal-body"
+                  className="modal-body modal-container"
                 >
                   <DeferredSpinner
                     loading={true}
@@ -504,7 +504,7 @@ exports[`should edit members 2`] = `
         </Portal>
       </Modal>
     </Modal>
-  </EditMembers>
+  </EditMembersModal>
 </EditMembers>
 `;
 
diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembersModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembersModal-test.tsx.snap
index faff753d49b..faf0598e59b 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembersModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/EditMembersModal-test.tsx.snap
@@ -13,7 +13,7 @@ exports[`should render modal properly 1`] = `
     </h2>
   </header>
   <div
-    className="modal-body"
+    className="modal-body modal-container"
   >
     <DeferredSpinner
       loading={false}
diff --git a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
index 744a1552a6c..9dfbdc53327 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { pickBy, sortBy } from 'lodash';
 import { searchAssignees } from '../utils';
@@ -496,7 +495,7 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
           <h2>{translateWithParameters('issue_bulk_change.form.title', issues.length)}</h2>
         </div>
 
-        <div className={classNames('modal-body', { 'modal-container': limitReached })}>
+        <div className="modal-body modal-container">
           {limitReached && (
             <Alert variant="warning">
               <FormattedMessage
diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/BulkChangeModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/BulkChangeModal-test.tsx.snap
index a15fbc837cb..9b093ed6143 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/BulkChangeModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/BulkChangeModal-test.tsx.snap
@@ -18,7 +18,7 @@ exports[`should display error message when no issues available 1`] = `
       </h2>
     </div>
     <div
-      className="modal-body"
+      className="modal-body modal-container"
     >
       <Alert
         variant="warning"
@@ -63,7 +63,7 @@ exports[`should display form when issues are present 1`] = `
       </h2>
     </div>
     <div
-      className="modal-body"
+      className="modal-body modal-container"
     >
       <Checkbox
         checked={false}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
index ed11dd0454e..6086c91359f 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
@@ -175,7 +175,7 @@ export default class ChangeProjectsForm extends React.PureComponent<Props, State
           <h2>{header}</h2>
         </div>
 
-        <div className="modal-body" id="profile-projects">
+        <div className="modal-body modal-container" id="profile-projects">
           <SelectList
             allowBulkSelection={true}
             elements={this.state.projects.map(project => project.key)}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeProjectsForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeProjectsForm-test.tsx.snap
index 0eaee6611c5..19dc259895f 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeProjectsForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeProjectsForm-test.tsx.snap
@@ -13,7 +13,7 @@ exports[`should render correctly 1`] = `
     </h2>
   </div>
   <div
-    className="modal-body"
+    className="modal-body modal-container"
     id="profile-projects"
   >
     <SelectList
diff --git a/server/sonar-web/src/main/js/apps/users/components/GroupsForm.tsx b/server/sonar-web/src/main/js/apps/users/components/GroupsForm.tsx
index b1cbfbd4f69..43985411dfa 100644
--- a/server/sonar-web/src/main/js/apps/users/components/GroupsForm.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/GroupsForm.tsx
@@ -192,7 +192,7 @@ export default class GroupsForm extends React.PureComponent<Props, State> {
           <h2>{header}</h2>
         </div>
 
-        <div className="modal-body">
+        <div className="modal-body modal-container">
           <SelectList
             elements={this.state.groups.map(group => group.name)}
             elementsTotalCount={this.state.groupsTotalCount}
diff --git a/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx b/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx
index d2c74a215f6..bc46891136a 100644
--- a/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx
@@ -162,7 +162,7 @@ export default class UserForm extends React.PureComponent<Props, State> {
               <h2>{header}</h2>
             </header>
 
-            <div className="modal-body">
+            <div className="modal-body modal-container">
               {error && <Alert variant="error">{error}</Alert>}
 
               {!error && user && !user.local && (
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/GroupsForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/GroupsForm-test.tsx.snap
index a544c913d55..6a383259146 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/GroupsForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/GroupsForm-test.tsx.snap
@@ -13,7 +13,7 @@ exports[`should render correctly 1`] = `
     </h2>
   </div>
   <div
-    className="modal-body"
+    className="modal-body modal-container"
   >
     <SelectList
       elements={
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap
index 8b21f614675..efa0b59c150 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`should render correctly 1`] = `
       </h2>
     </header>
     <div
-      className="modal-body"
+      className="modal-body modal-container"
     >
       <div
         className="modal-field"
@@ -134,7 +134,7 @@ exports[`should render correctly 2`] = `
       </h2>
     </header>
     <div
-      className="modal-body"
+      className="modal-body modal-container"
     >
       <div
         className="modal-field"
-- 
2.39.5