From 28263ffdae1609ed27c7e5dc98a287a090cf9ef3 Mon Sep 17 00:00:00 2001
From: Mike Turley <mturley@redhat.com>
Date: Thu, 18 Apr 2019 12:00:23 -0400
Subject: [PATCH 1/2] Change layout of throttling settings form from horizontal
 to vertical

---
 .../react/screens/App/Settings/Settings.scss      |  9 +++++++++
 .../screens/GeneralSettings/GeneralSettings.js    | 15 ++++++++-------
 .../App/common/forms/TextInputWithCheckbox.js     |  9 +++++----
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/app/javascript/react/screens/App/Settings/Settings.scss b/app/javascript/react/screens/App/Settings/Settings.scss
index cc0cebcdf0..c0ac7137c5 100644
--- a/app/javascript/react/screens/App/Settings/Settings.scss
+++ b/app/javascript/react/screens/App/Settings/Settings.scss
@@ -2,6 +2,15 @@
   margin-bottom: 25px;
 }
 
+.migration-settings h3 {
+  margin-top: 40px;
+  margin-bottom: 15px;
+}
+
+.migration-settings label.control-label {
+  margin-bottom: 0;
+}
+
 .conversion-hosts-list .list-view-pf-main-info {
   padding: 10px 0;
 }
diff --git a/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js
index 9d7c28103e..05df82cc64 100644
--- a/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js
+++ b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js
@@ -62,12 +62,12 @@ export class GeneralSettings extends React.Component {
     return (
       <Spinner loading={isFetchingServers || isFetchingSettings} style={{ marginTop: 15 }}>
         <div className="migration-settings">
-          <Form className="form-horizontal" style={{ padding: '0 20px' }}>
+          <Form className="form-vertical" style={{ padding: '0 20px' }}>
             <div>
               <h3>{__('Concurrent Migrations')}</h3>
             </div>
             <Form.FormGroup>
-              <Form.ControlLabel className="col-md-5">
+              <Form.ControlLabel>
                 <span className="pull-left">
                   {__('Maximum concurrent migrations per conversion host')}
                   <OverlayTrigger
@@ -80,13 +80,13 @@ export class GeneralSettings extends React.Component {
                     trigger="click"
                     rootClose
                   >
-                    <Button bsStyle="link">
+                    <Button bsStyle="link" style={{ paddingTop: 0, paddingBottom: 0 }}>
                       <Icon type="pf" name="info" />
                     </Button>
                   </OverlayTrigger>
                 </span>
               </Form.ControlLabel>
-              <div className="col-md-2">
+              <div style={{ width: 150 }}>
                 <Field
                   id="max_concurrent_tasks_per_host"
                   name="max_concurrent_tasks_per_host"
@@ -98,10 +98,10 @@ export class GeneralSettings extends React.Component {
               </div>
             </Form.FormGroup>
             <Form.FormGroup>
-              <Form.ControlLabel className="col-md-5">
+              <Form.ControlLabel>
                 <div className="pull-left">{__('Maximum concurrent migrations per provider')}</div>
               </Form.ControlLabel>
-              <div className="col-md-2">
+              <div style={{ width: 150 }}>
                 <Field
                   id="max_concurrent_tasks_per_ems"
                   name="max_concurrent_tasks_per_ems"
@@ -125,8 +125,9 @@ export class GeneralSettings extends React.Component {
               postfix="％"
               inputEnabledFunction={inputEnabledFunction}
               initialUncheckedValue="unlimited"
+              vertical
             />
-            <Form.FormGroup className="col-md-1 pull-left" style={{ marginTop: '40px' }}>
+            <Form.FormGroup style={{ marginTop: '40px' }}>
               <Button
                 bsStyle="primary"
                 onClick={this.onApplyClick}
diff --git a/app/javascript/react/screens/App/common/forms/TextInputWithCheckbox.js b/app/javascript/react/screens/App/common/forms/TextInputWithCheckbox.js
index 76908943ec..13bc20875a 100644
--- a/app/javascript/react/screens/App/common/forms/TextInputWithCheckbox.js
+++ b/app/javascript/react/screens/App/common/forms/TextInputWithCheckbox.js
@@ -11,7 +11,7 @@ class TextInputWithCheckbox extends React.Component {
   }
 
   render() {
-    const { id, label, input, postfix, initialUncheckedValue, meta } = this.props;
+    const { id, label, input, postfix, initialUncheckedValue, meta, vertical } = this.props;
 
     const onCheckboxChange = event => {
       if (event.target.checked) {
@@ -28,7 +28,7 @@ class TextInputWithCheckbox extends React.Component {
 
     return (
       <Form.FormGroup validationState={meta.error ? 'error' : undefined}>
-        <Form.ControlLabel className="col-md-5">
+        <Form.ControlLabel className={vertical ? '' : 'col-md-5'}>
           <div className="checkbox-inline pull-left">
             <label>
               <input
@@ -42,7 +42,7 @@ class TextInputWithCheckbox extends React.Component {
             </label>
           </div>
         </Form.ControlLabel>
-        <div className="col-md-2">
+        <div className={vertical ? '' : 'col-md-2'} style={{ width: vertical ? '150px' : 'auto' }}>
           <InputGroup>
             <FormControl type="text" name={id} id={id} readOnly={!this.state.inputEnabled} {...input} />
             <InputGroup.Addon>{postfix}</InputGroup.Addon>
@@ -64,7 +64,8 @@ TextInputWithCheckbox.propTypes = {
   postfix: PropTypes.string,
   inputEnabledFunction: PropTypes.func.isRequired,
   initialUncheckedValue: PropTypes.string,
-  meta: PropTypes.object
+  meta: PropTypes.object,
+  vertical: PropTypes.bool
 };
 
 export default TextInputWithCheckbox;

From fee3bee0cbd2b37bf492c589e1901cf52ff9d3ef Mon Sep 17 00:00:00 2001
From: Mike Turley <mturley@redhat.com>
Date: Thu, 18 Apr 2019 15:04:59 -0400
Subject: [PATCH 2/2] Update snapshots

---
 .../GeneralSettings.test.js.snap              | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/javascript/react/screens/App/Settings/screens/GeneralSettings/__tests__/__snapshots__/GeneralSettings.test.js.snap b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/__tests__/__snapshots__/GeneralSettings.test.js.snap
index 6b1b21e8e4..64f0e84b44 100644
--- a/app/javascript/react/screens/App/Settings/screens/GeneralSettings/__tests__/__snapshots__/GeneralSettings.test.js.snap
+++ b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/__tests__/__snapshots__/GeneralSettings.test.js.snap
@@ -18,7 +18,7 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
   >
     <Form
       bsClass="form"
-      className="form-horizontal"
+      className="form-vertical"
       componentClass="form"
       horizontal={false}
       inline={false}
@@ -38,7 +38,6 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
       >
         <ControlLabel
           bsClass="control-label"
-          className="col-md-5"
           srOnly={false}
         >
           <span
@@ -66,6 +65,12 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
                 bsClass="btn"
                 bsStyle="link"
                 disabled={false}
+                style={
+                  Object {
+                    "paddingBottom": 0,
+                    "paddingTop": 0,
+                  }
+                }
               >
                 <Icon
                   name="info"
@@ -76,7 +81,11 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
           </span>
         </ControlLabel>
         <div
-          className="col-md-2"
+          style={
+            Object {
+              "width": 150,
+            }
+          }
         >
           <Field
             component={[Function]}
@@ -93,7 +102,6 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
       >
         <ControlLabel
           bsClass="control-label"
-          className="col-md-5"
           srOnly={false}
         >
           <div
@@ -103,7 +111,11 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
           </div>
         </ControlLabel>
         <div
-          className="col-md-2"
+          style={
+            Object {
+              "width": 150,
+            }
+          }
         >
           <Field
             component={[Function]}
@@ -132,10 +144,10 @@ exports[`GeneralSettings component renders the general settings page 1`] = `
         name="cpu_limit_per_host"
         postfix="％"
         validate={[Function]}
+        vertical={true}
       />
       <FormGroup
         bsClass="form-group"
-        className="col-md-1 pull-left"
         style={
           Object {
             "marginTop": "40px",