COMPASS 1217 & 1330 backport to 1.8-releases (#1132)

* COMPASS-1217 Update .travis.yml: workaround runner (#1130)

* COMPASS-1330 Remove extra padding from create index modal (#1129)

* 🐛 COMPASS-1330 Remove extra padding from create index modal

It was also previously inconsistent with the Create/Drop DB/Collection modals, which have no extra padding.

* Flexbox style pass

* Remove noop

* 📝 Add comment

* 🐛 Remove overflow hiding the dropdown and redundant CSS cruft

Author: pzrq

.travis.yml

@@ -23,7 +23,7 @@ before_script:
   - npm run check
   - mkdir -p /home/travis/build/10gen/compass/node_modules/mongodb-version-manager/.mongodb/downloads/
   - wget -P /home/travis/build/10gen/compass/node_modules/mongodb-version-manager/.mongodb/downloads/ http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.12.tgz
-  - wget -P /home/travis/build/10gen/compass/node_modules/mongodb-version-manager/.mongodb/downloads/ http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.4.5.tgz
+  - wget -P /home/travis/build/10gen/compass/node_modules/mongodb-version-manager/.mongodb/downloads/ http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.4.6.tgz
 script: npm run test
 cache:
   directories:

src/internal-packages/indexes/lib/component/create-index-field.jsx

@@ -128,8 +128,8 @@ class CreateIndexField extends React.Component {
     const hasTypeError = this.state.isTypeValid ? '' : 'has-error';
 
     return (
-      <div className="form-inline row create-index-field">
-        <div className="col-md-6" data-test-id="create-index-modal-field-select">
+      <div className="form-inline create-index-field">
+        <div className="create-index-field-dropdown-name" data-test-id="create-index-modal-field-select">
           <Select.Creatable
             value={this.props.field.name}
             placeholder={DEFAULT_FIELD.name}
@@ -140,7 +140,7 @@ class CreateIndexField extends React.Component {
             className={hasNameError}
           />
         </div>
-        <div className="col-md-4" data-test-id="create-index-modal-type-select">
+        <div className="create-index-field-dropdown-type" data-test-id="create-index-modal-type-select">
           <Select
             value={this.props.field.type}
             placeholder={DEFAULT_FIELD.type}
@@ -151,7 +151,7 @@ class CreateIndexField extends React.Component {
             className={hasTypeError}
           />
         </div>
-        <div className="col-md-2">
+        <div>
           <button disabled={this.props.isRemovable}
             className="btn btn-primary btn-circle"
             onClick={this.remove.bind(this)}>

src/internal-packages/indexes/styles/create-index-modal.less

@@ -6,9 +6,6 @@
   }
 
   .create-index-modal-content {
-    padding-left: 40px;
-    padding-right: 40px;
-
     .modal-header {
       padding-bottom: 4px;
     }
@@ -25,19 +22,6 @@
         margin-top: 8px;
         right: 10px;
       }
-
-      .col-md-6 {
-        padding-right: 0px;
-
-        .dropdown-menu {
-          max-height: 400px;
-          overflow: auto;
-        }
-      }
-
-      .col-md-4 {
-        padding-right: 0px;
-      }
     }
 
     .create-index-field-add {
@@ -46,27 +30,26 @@
 
     .create-index-field {
       margin-bottom: 5px;
+      display: flex;
 
       .has-error .Select-control {
         border: 1px solid #EF4C4C;
         box-shadow: 0 2px 6px 0 rgba(239,76,76,0.30);
       }
 
-      .create-index-field-dropdown-name {
-        width: 164px;
+      &-dropdown-name {
+        width: 260px;
         text-align: left;
         text-transform: none;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        padding-right: 25px;
+        padding-right: 10px;
         white-space: nowrap;
       }
 
-      .create-index-field-dropdown-type {
+      &-dropdown-type {
         width: 120px;
         text-align: left;
         text-transform: none;
-        margin-left: -7px;
+        margin-right: 8px;
       }
     }
 
@@ -131,10 +114,6 @@
       }
     }
 
-    .index-field-dropdown-btn {
-      text-transform: none;
-    }
-
     .create-index-confirm-buttons {
       text-align: right;