Add tests and styling for betterbuttons port (#744)

* MINOR: Right align elements in toolbar and add rounding on buttons

* Add tests for `Previous`, `Next` edit form buttons

* Fix discard confirmation for buttons
Fix tests and add check for discard confirmation

* Rebuild

* Use sorting in test instead of filtering temporarily to work around discard confirmation on search form bug

* Add new plus icon `font-icon-plus-thin` for adding new record

* Update test to not conflict with other staff member email

* Add `font-icon-plus-thin` and refactor `Toolbar.scss` to be more clean

client/src/components/Toolbar/Toolbar.scss

@@ -13,6 +13,27 @@
 
   .btn {
     margin-bottom: 0;
+
+    &.circular {
+      border-radius: 100px;
+      width: 32px;
+      padding-left: 7px;
+    }
+  }
+
+  .circular-group>.btn {
+    width: 32px;
+    padding-left: 7px;
+
+    &:first-child {
+      border-top-left-radius: 100px;
+      border-bottom-left-radius: 100px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 100px;
+      border-bottom-right-radius: 100px;
+    }
   }
 }
 

client/src/font/icons-reference.html

@@ -711,6 +711,10 @@ <h2>CSS mapping</h2>
           <div class="icon font-icon-accessibility"></div>
           <input type="text" readonly="readonly" value="accessibility">
         </li>
+        <li>
+          <div class="icon font-icon-plus-thin"></div>
+          <input type="text" readonly="readonly" value="plus-thin">
+        </li>
       </ul>
       <h2>Character mapping</h2>
       <ul class="glyphs character-mapping">
@@ -1410,6 +1414,10 @@ <h2>Character mapping</h2>
           <div data-icon="&#xe04f;" class="icon"></div>
           <input type="text" readonly="readonly" value="&amp;#xe04f;">
         </li>
+        <li>
+          <div data-icon="&#xe050;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe050;">
+        </li>
       </ul>
     </div>
     <script>(function() {

client/src/font/styles.css

@@ -560,3 +560,6 @@
 .font-icon-accessibility:before {
   content: "\e04f";
 }
+.font-icon-plus-thin:before {
+  content: "\e050";
+}

client/src/legacy/LeftAndMain.js

@@ -1086,6 +1086,14 @@ $.entwine('ss', function($) {
     }
   });
 
+  $('.cms button.action.discard-confirmation').entwine({
+    onclick: function(e) {
+      if (!$('.cms-container').checkCanNavigate()) {
+        e.preventDefault();
+      }
+    }
+  });
+
   /**
    * Does an ajax loads of the link's 'href' attribute via ajax and displays any FormResponse messages from the CMS.
    * Little helper to avoid repetition, and make it easy to trigger actions via a link,

client/src/styles/_fonts.scss

@@ -721,3 +721,7 @@
 .font-icon-accessibility:before {
   content: "\e04f";
 }
+
+.font-icon-plus-thin:before {
+  content: "\e050";
+}

tests/behat/features/manage-users.feature

@@ -8,6 +8,7 @@ Feature: Manage users
     Given a "member" "ADMIN" belonging to "ADMIN group" with "Email"="[email protected]"
     And the "member" "ADMIN" belonging to "ADMIN group2"
     And a "member" "Staff" belonging to "Staff group" with "Email"="[email protected]"
+    And a "member" "Other Staff" belonging to "Staff group" with "Email"="[email protected]"
     And the "group" "ADMIN group" has permissions "Full administrative rights"
     And the "group" "ADMIN group2" has permissions "Full administrative rights"
     And I am logged in with "ADMIN" permissions
@@ -88,8 +89,32 @@ Feature: Manage users
     When I go to "admin/security/"
     Then I should see "[email protected]" in the "#Root_Users" element
 
-  Scenario: I can edit an existing user and add him to an existing group
+  @modal
+  Scenario: I can navigate users from the edit form and retain my search query
     When I click the "Users" CMS tab
+    And I press the "First Name" button
+
+    Then I should see "[email protected]" in the "#Root_Users" element
+    And I should see "[email protected]" in the "#Root_Users" element
+    And I should see "[email protected]" in the "#Root_Users" element
+
+    When I click "[email protected]" in the "#Root_Users" element
+    And I press the "Form_ItemEditForm_action_doNext" button
+    Then the "Email" field should contain "[email protected]"
+    When I press the "Form_ItemEditForm_action_doPrevious" button
+    Then the "Email" field should contain "[email protected]"
+
+    When I fill in "FirstName" with "Staff Renamed"
+    And I press the "Form_ItemEditForm_action_doNew" button
+    Then I see the text "Are you sure you want to navigate away from this page?" in the alert
+    And I dismiss the dialog
+
+    When I go to "admin/security/"
+    Then I confirm the dialog
+
+  Scenario: I can edit an existing user and add him to an existing group
+    When I go to "admin/security/"
+    And I click the "Users" CMS tab
     And I click "[email protected]" in the "#Root_Users" element
     And I select "ADMIN group" from "Groups"
     And I press the "Apply changes" button