Highlight bulk edit tools and include guidance

app/assets/javascripts/govuk.js

@@ -59,6 +59,11 @@
 
   GOVUK.startAll = function() {
     GOVUK.start();
+    GOVUK.startBootstrapComponents();
+  }
+
+  GOVUK.startBootstrapComponents = function() {
+    $('[data-toggle="tooltip"]').tooltip();
   }
 
   // Google Analytics event tracking

app/assets/javascripts/modules/selectable_table.js

@@ -142,10 +142,12 @@
 
       function resetSubmitButtons() {
         element.find('.js-submit-form').removeClass('disabled').button('reset');
+        element.find('.js-submit-container').addClass('buttons-enabled');
       }
 
       function disableSubmitButtons() {
         element.find('.js-submit-form').addClass('disabled');
+        element.find('.js-submit-container').removeClass('buttons-enabled');
       }
     }
   };

app/assets/stylesheets/base.css.scss

@@ -315,6 +315,10 @@ thead .table-header-secondary td {
   overflow: hidden;
   width: 40px;
 
+  tbody & {
+    background-color: #ccc;
+  }
+
   label {
     height: 300px;
     width: 100%;
@@ -329,6 +333,11 @@ thead .table-header-secondary td {
   }
 }
 
+.selectable-row-helper {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
 /* Slightly different spacing for table headers */
 .table-header-secondary .selectable-row {
   vertical-align: top;
@@ -343,6 +352,12 @@ thead .table-header-secondary td {
   background-color: #fffbcc; /* yellow highlight */
 }
 
+/* Specific to mappings selectable table
+   Ensures the tooltip only displays whilst the buttons are disabled */
+.buttons-enabled + .tooltip {
+  display: none !important;
+}
+
 /* ==========================================================================
    Common content patterns
    ========================================================================== */

app/views/mappings/_mappings_table.html.erb

@@ -12,7 +12,9 @@
   <thead>
     <tr class="table-header">
       <% if current_user.can_edit_site?(site) %>
-        <th></th>
+        <th scope="col">
+          <span class="selectable-row-helper" data-toggle="tooltip" data-placement="bottom" title="Use checkboxes to select mappings you want to edit, and edit them using the ‘Archive’, ‘Redirect’ or ‘Tag’ buttons">Edit</span>
+        </th>
       <% end %>
       <th class="mapping-type-column" scope="col">Type</th>
       <th scope="col">

app/views/mappings/_mappings_table_header.html.erb

@@ -24,7 +24,7 @@
           <%= submit_tag "Edit selected", class: 'btn btn-default bold' %>
         </div>
       <% end %>
-      <div class="if-no-js-hide btn-group">
+      <div class="if-no-js-hide js-submit-container btn-group" data-toggle="tooltip" title="Select mappings using checkboxes then edit them with these buttons." data-placement="right">
         <a href="#redirect-paths" class="btn btn-default js-submit-form disabled" data-type="301" data-loading-text="Loading…" title="Redirect the paths you’ve selected to a new URL">Redirect</a>
         <a href="#archive-paths" class="btn btn-default js-submit-form disabled" data-type="410" data-loading-text="Loading…" title="Archive the paths you’ve selected">Archive</a>
         <a href="#tag-paths" class="btn btn-default js-submit-form disabled" data-type="tag" data-loading-text="Loading…" title="Tag the paths you’ve selected">Tag</a>

app/views/mappings/edit.html.erb

@@ -1,7 +1,7 @@
 <% breadcrumb(:edit_mapping, @mapping) %>
 
 <%= content_for :page_title, 'Edit mapping' %>
-<h1 class="page-title">
+<h1 class="page-title-with-border">
   <span class="small"><%= @site.default_host.hostname %></span>
   Edit mapping
 </h1>

app/views/sites/_transition_status.html.erb

@@ -8,6 +8,3 @@
     <i data-toggle="tooltip" title="Site is partially redirected via an aka domain" class="glyphicon glyphicon-question-sign"></i>
   </span>
 <% end %>
-<script>
-  $('[data-toggle]').tooltip();
-</script>

app/views/style/index.html.erb

@@ -144,8 +144,6 @@
       </tr>
     </tbody>
     </table>
-
-    <script>GOVUK.SelectableTable.setup();</script>
   </ul>
 </div>
 <hr>

spec/javascripts/spec/selectable_table.spec.js

@@ -27,9 +27,11 @@ describe('A selectable table module', function() {
           <thead>\
             <tr>\
               <th>\
-                <input type="checkbox" class="js-toggle-all disabled" />\
-                <input type="radio" value="type" />\
-                <a href="#" class="js-submit-form" data-type="type">Submit form hook</a>\
+                <div class="js-submit-container">\
+                  <input type="checkbox" class="js-toggle-all disabled" />\
+                  <input type="radio" value="type" />\
+                  <a href="#" class="js-submit-form" data-type="type">Submit form hook</a>\
+                </div>\
               </th>\
             </tr>\
           </thead>\
@@ -80,7 +82,12 @@ describe('A selectable table module', function() {
       tableWithSelection = $('<table>\
         <thead>\
           <tr>\
-            <th><input type="checkbox" class="js-toggle-all disabled" /></th>\
+            <th>\
+              <div class="js-submit-container">\
+                <input type="checkbox" class="js-toggle-all disabled" />\
+                <a href="#" class="js-submit-form" data-type="type">Submit form hook</a>\
+              </div>\
+            </th>\
           </tr>\
         </thead>\
         <tbody>\
@@ -116,6 +123,7 @@ describe('A selectable table module', function() {
 
     it('enables the form submit buttons', function() {
       expect(tableWithSelection.find('.js-submit-form.disabled').length).toBe(0);
+      expect(tableWithSelection.find('.buttons-enabled').length).toBe(1);
     });
 
   });
@@ -288,6 +296,7 @@ describe('A selectable table module', function() {
       it('disables the submit form buttons to prevent multiple ajax requests', function() {
         table.find('.js-submit-form').click();
         expect(table.find('.js-submit-form.disabled').length).toBe(1);
+        expect(table.find('.buttons-enabled').length).toBe(0);
       });
 
     });