SONAR-12070 Make large modals scrollable

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 490b971bab572b2746c23e8113818c96068c9efc..9d9b76116085b173ae7ba04ba0dfe75b92805381 100644 (file)
--- 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 2225b883507423fac7c8be09be441765ac8abf3f..2507c2d70c1afbc59af7f74e9bd17b5935ee3e05 100644 (file)
--- 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 ffc3d9207343c2a3e3198d05ea8fc69833c25627..77b79a7837b7574f48d540ab0ef8cc3797326731 100644 (file)
--- 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 692174076ae0d06d159cb9495bdb684676c39277..5a518648804dd1cf5df9eed41ef7000067fc6e07 100644 (file)
--- 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 9b475b87c6af8063b71edccdd50d3eddb99068c3..6e6ce01ff70bd304691b03aef392a44f3d621f8c 100644 (file)
--- 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 a2651397affa0ee70e737cc49e05342eb24df3aa..084c8fa46fdb0870fec1977e57057bb467ea891a 100644 (file)
--- 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 faff753d49bc59ebaf10957f8c25507452f6b781..faf0598e59b37af17de88d84ee24f686a11f3e7e 100644 (file)
--- 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 744a1552a6cbfa9a0f8419ded3d8f0baa954ed51..9dfbdc53327ecbedb1b57d978d238ae09075701f 100644 (file)
--- 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 a15fbc837cbec6bcd55eeb55b44be2aed6edfab2..9b093ed614342da61a91e279bfb69539d9e045a5 100644 (file)
--- 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 ed11dd0454ee77ae375795653955df88f9f2b6f2..6086c91359f04f33d5b6c2a461849cb8a90373c1 100644 (file)
--- 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 0eaee6611c57e982b9da9da00d7c59e92465dd49..19dc259895fa9b25f7e5dcd1ac7057691567ca80 100644 (file)
--- 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 b1cbfbd4f695bf84be256e710d9e1856a9850a3c..43985411dfaea37faa4fe6071e4dd35a50c2cc9d 100644 (file)
--- 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 d2c74a215f6a27d07e57625cbd14a688290d3f39..bc46891136a76e7e925c8bb28c93084a70c96547 100644 (file)
--- 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 a544c913d550a89e0b20edaff2df461f32083d47..6a383259146e0cffa91d156e162e220c734ffd1e 100644 (file)
--- 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 8b21f614675548a1851c208eabde3a2999176134..efa0b59c15014da76431b7d98fcaad388bfe04b3 100644 (file)
--- 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"