Refs #2648: updating jp_collection layout

14 files changed, 279 insertions, 196 deletions

diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
index d9fbf07f8..5e51f469c 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
@@ -4,28 +4,35 @@ var PropTypes = require('react').PropTypes
 
 const ConfirmModal = ({dispatch, modal, onModalAccept, onModalCancel, journeyPatterns}) => (
   <div className={ 'modal fade ' + ((modal.type == 'confirm') ? 'in' : '') } id='ConfirmModal'>
-    <div className='modal-dialog'>
-      <div className='modal-content'>
-        <div className='modal-body'>
-          <p> Voulez-vous enregistrer vos modifications avant de changer de page? </p>
-        </div>
-        <div className='modal-footer'>
-          <button
-            className='btn btn-default'
-            data-dismiss='modal'
-            type='button'
-            onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
-            >
-            Ne pas enregistrer
-          </button>
-          <button
-            className='btn btn-danger'
-            data-dismiss='modal'
-            type='button'
-            onClick = {() => {onModalAccept(modal.confirmModal.callback, journeyPatterns)}}
-            >
-            Enregistrer
-          </button>
+    <div className='modal-container'>
+      <div className='modal-dialog'>
+        <div className='modal-content'>
+          <div className='modal-header'>
+            <h4 className='modal-title'>Confirmation</h4>
+          </div>
+          <div className='modal-body'>
+            <div className='mt-md mb-md'>
+              <p>Vous vous apprêtez à changer de page. Voulez-vous enregistrer vos modifications avant cela ?</p>
+            </div>
+          </div>
+          <div className='modal-footer'>
+            <button
+              className='btn btn-link'
+              data-dismiss='modal'
+              type='button'
+              onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
+              >
+              Ne pas enregistrer
+            </button>
+            <button
+              className='btn btn-primary'
+              data-dismiss='modal'
+              type='button'
+              onClick = {() => {onModalAccept(modal.confirmModal.callback, journeyPatterns)}}
+              >
+              Enregistrer
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
index 0b966d6d9..d9a4df099 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
@@ -34,71 +34,73 @@ class CreateModal extends Component {
             </button>
 
             <div className={ 'modal fade ' + ((this.props.modal.type == 'create') ? 'in' : '') } id='NewJourneyPatternModal'>
-              <div className='modal-dialog'>
-                <div className='modal-content'>
-                  <div className='modal-header clearfix'>
-                    <h4>Ajouter une mission</h4>
-                  </div>
+              <div className='modal-container'>
+                <div className='modal-dialog'>
+                  <div className='modal-content'>
+                    <div className='modal-header'>
+                      <h4 className='modal-title'>Ajouter une mission</h4>
+                    </div>
 
-                  {(this.props.modal.type == 'create') && (
-                    <form>
-                      <div className='modal-body'>
-                        <div className='form-group'>
-                          <label className='control-label is-required'>Nom</label>
-                          <input
-                            type='text'
-                            ref='name'
-                            className='form-control'
-                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                            required
-                            />
-                        </div>
-                        <div className='row'>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <div className='form-group'>
-                              <label className='control-label is-required'>Nom public</label>
-                              <input
-                                type='text'
-                                ref='published_name'
-                                className='form-control'
-                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                                required
-                                />
-                            </div>
+                    {(this.props.modal.type == 'create') && (
+                      <form>
+                        <div className='modal-body'>
+                          <div className='form-group'>
+                            <label className='control-label is-required'>Nom</label>
+                            <input
+                              type='text'
+                              ref='name'
+                              className='form-control'
+                              onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                              required
+                              />
                           </div>
-                          <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                            <div className='form-group'>
-                              <label className='control-label is-required'>N° d'enregistrement</label>
-                              <input
-                                type='text'
-                                ref='registration_number'
-                                className='form-control'
-                                onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                                required
-                                />
+                          <div className='row'>
+                            <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                              <div className='form-group'>
+                                <label className='control-label is-required'>Nom public</label>
+                                <input
+                                  type='text'
+                                  ref='published_name'
+                                  className='form-control'
+                                  onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                                  required
+                                  />
+                              </div>
+                            </div>
+                            <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                              <div className='form-group'>
+                                <label className='control-label is-required'>N° d'enregistrement</label>
+                                <input
+                                  type='text'
+                                  ref='registration_number'
+                                  className='form-control'
+                                  onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                                  required
+                                  />
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                      <div className='modal-footer'>
-                        <button
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                          type='button'
-                          onClick={this.props.onModalClose}
-                          >
-                          Annuler
-                        </button>
-                        <button
-                          className='btn btn-danger'
-                          type='button'
-                          onClick={this.handleSubmit.bind(this)}
-                          >
-                          Valider
-                        </button>
-                      </div>
-                    </form>
-                  )}
+                        <div className='modal-footer'>
+                          <button
+                            className='btn btn-link'
+                            data-dismiss='modal'
+                            type='button'
+                            onClick={this.props.onModalClose}
+                            >
+                            Annuler
+                          </button>
+                          <button
+                            className='btn btn-primary'
+                            type='button'
+                            onClick={this.handleSubmit.bind(this)}
+                            >
+                            Valider
+                          </button>
+                        </div>
+                      </form>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
index 7d7dd40a4..37f2b5547 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
@@ -18,110 +18,86 @@ class EditModal extends Component {
   render() {
     return (
       <div className={ 'modal fade ' + ((this.props.modal.type == 'edit') ? 'in' : '') } id='JourneyPatternModal'>
-        <div className='modal-dialog'>
-          <div className='modal-content'>
-            <div className='modal-header clearfix'>
-              <h4 className='pull-left'>
-                Modifier la mission
-                {(this.props.modal.type == 'edit') && (
-                  <em> "{this.props.modal.modalProps.journeyPattern.name}"</em>
-                )}
-              </h4>
-              <div className='btn-group btn-group-sm pull-right'>
-                <button
-                  type='button'
-                  className='btn btn-primary dropdown-toggle'
-                  data-toggle='dropdown'
-                  >
-                  <span className='fa fa-bars'></span>
-                  <span className='caret'></span>
-                </button>
-
-                <ul className='dropdown-menu'>
-                  <li><a href='#'>Horaires des courses</a></li>
-                  <li>
-                    <a
-                      href='#'
-                      data-dismiss='modal'
-                      onClick={(e) => {
-                        e.preventDefault()
-                        this.props.onDeleteJourneyPattern(this.props.modal.modalProps.index)}
-                      }
-                      >
-                      Supprimer la mission
-                    </a>
-                  </li>
-                </ul>
+        <div className='modal-container'>
+          <div className='modal-dialog'>
+            <div className='modal-content'>
+              <div className='modal-header'>
+                <h4 className='modal-title'>
+                  Modifier la mission
+                  {(this.props.modal.type == 'edit') && (
+                    <em> "{this.props.modal.modalProps.journeyPattern.name}"</em>
+                  )}
+                </h4>
               </div>
-            </div>
 
-            {(this.props.modal.type == 'edit') && (
-              <form>
-                <div className='modal-body'>
-                  <div className='form-group'>
-                    <label className='control-label is-required'>Nom</label>
-                    <input
-                      type='text'
-                      ref='name'
-                      className='form-control'
-                      id={this.props.modal.modalProps.index}
-                      defaultValue={this.props.modal.modalProps.journeyPattern.name}
-                      onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                      required
-                      />
-                  </div>
+              {(this.props.modal.type == 'edit') && (
+                <form>
+                  <div className='modal-body'>
+                    <div className='form-group'>
+                      <label className='control-label is-required'>Nom</label>
+                      <input
+                        type='text'
+                        ref='name'
+                        className='form-control'
+                        id={this.props.modal.modalProps.index}
+                        defaultValue={this.props.modal.modalProps.journeyPattern.name}
+                        onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                        required
+                        />
+                    </div>
 
-                  <div className='row'>
-                    <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                      <div className='form-group'>
-                        <label className='control-label is-required'>Nom public</label>
-                        <input
-                          type='text'
-                          ref='published_name'
-                          className='form-control'
-                          id={this.props.modal.modalProps.index}
-                          defaultValue={this.props.modal.modalProps.journeyPattern.published_name}
-                          onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                          required
-                          />
+                    <div className='row'>
+                      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                        <div className='form-group'>
+                          <label className='control-label is-required'>Nom public</label>
+                          <input
+                            type='text'
+                            ref='published_name'
+                            className='form-control'
+                            id={this.props.modal.modalProps.index}
+                            defaultValue={this.props.modal.modalProps.journeyPattern.published_name}
+                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                            required
+                            />
+                        </div>
                       </div>
-                    </div>
-                    <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-                      <div className='form-group'>
-                        <label className='control-label is-required'>N° d'enregistrement</label>
-                        <input
-                          type='text'
-                          ref='registration_number'
-                          className='form-control'
-                          id={this.props.modal.modalProps.index}
-                          defaultValue={this.props.modal.modalProps.journeyPattern.registration_number}
-                          onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
-                          required
-                          />
+                      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+                        <div className='form-group'>
+                          <label className='control-label is-required'>N° d'enregistrement</label>
+                          <input
+                            type='text'
+                            ref='registration_number'
+                            className='form-control'
+                            id={this.props.modal.modalProps.index}
+                            defaultValue={this.props.modal.modalProps.journeyPattern.registration_number}
+                            onKeyDown={(e) => actions.resetValidation(e.currentTarget)}
+                            required
+                            />
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
 
-                <div className='modal-footer'>
-                  <button
-                    className='btn btn-default'
-                    data-dismiss='modal'
-                    type='button'
-                    onClick={this.props.onModalClose}
-                    >
-                    Annuler
-                  </button>
-                  <button
-                    className='btn btn-danger'
-                    type='button'
-                    onClick={this.handleSubmit.bind(this)}
-                    >
-                    Valider
-                  </button>
-                </div>
-              </form>
-            )}
+                  <div className='modal-footer'>
+                    <button
+                      className='btn btn-link'
+                      data-dismiss='modal'
+                      type='button'
+                      onClick={this.props.onModalClose}
+                      >
+                      Annuler
+                    </button>
+                    <button
+                      className='btn btn-primary'
+                      type='button'
+                      onClick={this.handleSubmit.bind(this)}
+                      >
+                      Valider
+                    </button>
+                  </div>
+                </form>
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -133,8 +109,7 @@ EditModal.propTypes = {
   index: PropTypes.number,
   modal: PropTypes.object,
   onModalClose: PropTypes.func.isRequired,
-  saveModal: PropTypes.func.isRequired,
-  onDeleteJourneyPattern: PropTypes.func.isRequired
+  saveModal: PropTypes.func.isRequired
 }
 
 module.exports = EditModal
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
index 554a0038b..9e554b38e 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
@@ -19,14 +19,43 @@ const JourneyPattern = (props) => {
       )}
 
       <div className='th'>
-        <div className='strong mb-xs'>{props.value.object_id}</div>
+        <div className='strong mb-xs'>{props.value.object_id ? props.value.object_id : '-'}</div>
         <div>{props.value.registration_number}</div>
         <div>{actions.getChecked(props.value.stop_points).length} arrêt(s)</div>
 
-        <div className='clearfix' style={{display: 'inline-block', verticalAlign: 'top', width: '25px'}}>
-          <button className={(props.value.deletable ? 'disabled' : '') + ' btn btn-xs btn-danger pull-right'} onClick={props.onOpenEditModal} data-toggle='modal' data-target='#JourneyPatternModal'>
-            <span className='fa fa-pencil'></span>
-          </button>
+        <div className={props.value.deletable ? 'btn-group disabled' : 'btn-group'}>
+          <div
+            className={props.value.deletable ? 'btn dropdown-toggle disabled' : 'btn dropdown-toggle'}
+            data-toggle='dropdown'
+          >
+            <span className='fa fa-cog'></span>
+          </div>
+          <ul className='dropdown-menu'>
+            <li className={props.value.deletable ? 'disabled' : ''}>
+              <a
+                href='#'
+                onClick={props.onOpenEditModal}
+                data-toggle='modal'
+                data-target='#JourneyPatternModal'
+              >
+                Modifier
+              </a>
+            </li>
+            <li>
+              <a href='#'>Horaires des courses</a>
+            </li>
+            <li className='delete-action'>
+              <a
+                href='#'
+                onClick={(e) => {
+                  e.preventDefault()
+                  props.onDeleteJourneyPattern(props.index)}
+                }
+              >
+                <span className='fa fa-trash'></span>Supprimer
+              </a>
+            </li>
+          </ul>
         </div>
       </div>
 
@@ -56,7 +85,8 @@ JourneyPattern.propTypes = {
   value: PropTypes.object,
   index: PropTypes.number,
   onCheckboxChange: PropTypes.func.isRequired,
-  onOpenEditModal: PropTypes.func.isRequired
+  onOpenEditModal: PropTypes.func.isRequired,
+  onDeleteJourneyPattern: PropTypes.func.isRequired
 }
 
 module.exports = JourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
index 9091e67cb..b82b4eb36 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
@@ -11,7 +11,7 @@ class JourneyPatterns extends Component{
     this.props.onLoadFirstPage()
   }
   componentDidUpdate(prevProps, prevState) {
-    if(prevProps.status.isFetching == true){
+    if(this.props.status.isFetching == false){
       $('.table-2entries').each(function() {
         var refH = []
         var refCol = []
@@ -44,7 +44,6 @@ class JourneyPatterns extends Component{
           }
         }
 
-        // console.log(refCol);
         $(this).find('.th').css('height', refCol[0]);
 
         for(var nth = 1; nth < refH.length; nth++) {
@@ -92,6 +91,7 @@ class JourneyPatterns extends Component{
                       key={ index }
                       onCheckboxChange= {(e) => this.props.onCheckboxChange(e, index)}
                       onOpenEditModal= {() => this.props.onOpenEditModal(index, journeyPattern)}
+                      onDeleteJourneyPattern={() => this.props.onDeleteJourneyPattern(index)}
                       />
                   )}
                 </div>
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
index bace802e5..bc2aaf95b 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
@@ -21,6 +21,9 @@ const mapDispatchToProps = (dispatch) => {
     },
     onOpenEditModal: (index, journeyPattern) =>{
       dispatch(actions.openEditModal(index, journeyPattern))
+    },
+    onDeleteJourneyPattern: (index) =>{
+      dispatch(actions.deleteJourneyPattern(index))
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
index 4b1809fa1..ef6a4a6b1 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
@@ -17,9 +17,6 @@ const mapDispatchToProps = (dispatch) => {
     },
     saveModal: (index, data) =>{
       dispatch(actions.saveModal(index, data))
-    },
-    onDeleteJourneyPattern: (index) =>{
-      dispatch(actions.deleteJourneyPattern(index))
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
index 13f1100b3..8c84500c0 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
@@ -65,8 +65,8 @@ const journeyPatterns = (state = [], action) => {
       })
     case 'ADD_JOURNEYPATTERN':
       return [
-        ...state,
-        journeyPattern(state, action)
+        journeyPattern(state, action),
+        ...state
       ]
     case 'SAVE_MODAL':
       return state.map((j, i) =>{
diff --git a/app/assets/stylesheets/base/_utilities.sass b/app/assets/stylesheets/base/_utilities.sass
index 44477e862..65091e904 100644
--- a/app/assets/stylesheets/base/_utilities.sass
+++ b/app/assets/stylesheets/base/_utilities.sass
@@ -41,3 +41,8 @@
 @for $i from 5 through 100
   .w#{$i}
     width: $i * 1%
+
+// Empty zones
+=emptyzone($col1, $col2)
+  background-image: linear-gradient(-45deg, $col1 25%, $col2 25%, $col2 50%, $col1 50%, $col1 75%, $col2 75%, transparent)
+  background-size: 40px 40px
diff --git a/app/assets/stylesheets/components/_buttons.sass b/app/assets/stylesheets/components/_buttons.sass
index b2d42584d..00551f7cb 100644
--- a/app/assets/stylesheets/components/_buttons.sass
+++ b/app/assets/stylesheets/components/_buttons.sass
@@ -63,6 +63,9 @@ table, .table
     text-align: center
     padding: 0
 
+  tbody > tr > td.actions,
+  &.table-2entries .t2e-item > .th
+
     > .btn-group
       height: 100%
       width: 100%
@@ -79,6 +82,16 @@ table, .table
         color: #fff
         transition: 0.2s
 
+      &.disabled
+        cursor: not-allowed
+
+        &, &:hover, &:focus
+          color: rgba($blue, 0.5)
+          background-color: rgba($blue, 0)
+
+          > .btn.disabled
+            opacity: 1
+
       &.open .dropdown-toggle
         box-shadow: none
 
@@ -121,3 +134,23 @@ table, .table
 
             .fa:first-child
               margin-right: 0.5em
+
+  &.table-2entries .t2e-item
+    > .th
+      position: relative
+
+      > .btn-group
+        width: auto
+        height: auto
+        position: absolute
+        right: 0
+        top: 0
+
+        .dropdown-menu
+          left: 0
+          right: auto
+
+    &:last-child
+      > .th > .btn-group .dropdown-menu
+        left: auto
+        right: 0
diff --git a/app/assets/stylesheets/components/_dropdown.sass b/app/assets/stylesheets/components/_dropdown.sass
new file mode 100644
index 000000000..ee26aaeb5
--- /dev/null
+++ b/app/assets/stylesheets/components/_dropdown.sass
@@ -0,0 +1,8 @@
+//-------------//
+//  Dropdowns  //
+//-------------//
+
+.dropdown-menu
+  > .disabled > a
+    &, &:hover, &:focus
+      color: rgba($darkgrey, 0.5)
diff --git a/app/assets/stylesheets/components/_forms.sass b/app/assets/stylesheets/components/_forms.sass
index 984b3097d..3b0f75d08 100644
--- a/app/assets/stylesheets/components/_forms.sass
+++ b/app/assets/stylesheets/components/_forms.sass
@@ -172,6 +172,12 @@ $cbx-size: 20px
     &:checked + .radio-label
       background-color: $blue
 
+    &:disabled
+      cursor: not-allowed
+
+      + .radio-label
+        opacity: 0.5
+
 // Switch
 .has_switch
   &.form-group
diff --git a/app/assets/stylesheets/components/_tables.sass b/app/assets/stylesheets/components/_tables.sass
index 5080cb53f..322613397 100644
--- a/app/assets/stylesheets/components/_tables.sass
+++ b/app/assets/stylesheets/components/_tables.sass
@@ -130,6 +130,7 @@
   .th
     padding: 6px 8px
     border-bottom: 2px solid rgba($grey, 0.5)
+    border-top: 1px solid rgba($grey, 0.5)
   .td
     padding: 6px 8px
     border-bottom: 1px solid rgba($grey, 0.5)
@@ -139,22 +140,38 @@
 
     .th
       text-align: right
+      border-top-color: transparent
 
   .t2e-item-list
+    +emptyzone(rgba($grey, 0.075), rgba($grey, 0.015))
+
     > div
-      display: block
+      display: inline-block
+      vertical-align: top
       overflow: auto
       white-space: nowrap
+      border-right: 1px solid rgba($grey, 0.5)
+      max-width: 100%
 
     .t2e-item
       display: inline-block
+      vertical-align: top
       white-space: normal
       border-left: 1px solid rgba($grey, 0.5)
+      background-color: #fff
 
       &:first-child
         border-left: none
 
+      .th
+        > *:first-child
+          padding-right: 30px
+
       .td
         > .has_radio
           top: 50%
           margin-top: -10px
+
+      &.disabled
+        color: rgba($darkgrey, 0.5)
+        background-color: rgba(#fff, 0.5)
diff --git a/spec/javascripts/journey_patterns/reducers/journey_patterns_spec.js b/spec/javascripts/journey_patterns/reducers/journey_patterns_spec.js
index 422c97fee..9fcabf439 100644
--- a/spec/javascripts/journey_patterns/reducers/journey_patterns_spec.js
+++ b/spec/javascripts/journey_patterns/reducers/journey_patterns_spec.js
@@ -57,13 +57,13 @@ describe('journeyPatterns reducer', () => {
         type: 'ADD_JOURNEYPATTERN',
         data: fakeData
       })
-    ).toEqual([...state, {
+    ).toEqual([{
       name : 'm3',
       published_name: 'M3',
       registration_number: '',
       deletable: false,
       stop_points: fakeStopPoints
-    }])
+    }, ...state])
   })
 
   it('should handle UPDATE_CHECKBOX_VALUE', () => {