feat(matrix): show pact version SHA in popup text, and highlight pact publications with the same pact version

Author: bethesque

lib/pact_broker/ui/view_models/matrix_line.rb

@@ -37,6 +37,10 @@ def pact_version_sha
           @line.pact_version_sha
         end
 
+        def pact_version_sha_message
+          "The highlighted pact(s) have content that has a SHA of #{pact_version_sha}"
+        end
+
         # verification number, used in verification_url method
         def number
           @line.verification_number

lib/pact_broker/ui/views/matrix/show.haml

@@ -119,7 +119,7 @@
                 %a{href: tag.url}
                   .tag.label.label-default
                     = tag.name
-          %td.pact-published{'data-sort-value' => line.pact_published_order, "data-toggle": "tooltip"}
+          %td.pact-published{'data-sort-value' => line.pact_published_order, "data-toggle": "tooltip", "title": line.pact_version_sha_message, "data-placement": "right", "data-pact-version-sha": line.pact_version_sha}
             %a{href: line.pact_publication_date_url}
               - if options.all_rows_checked
                 = "#{line.pact_publication_date} (revision #{line.pact_revision_number})"
@@ -146,16 +146,11 @@
                 %a{href: tag.url}
                   .tag.label.label-default
                     = tag.name
-          %td.verification-result{class: line.verification_status_class, "title": line.pre_verified_message, "data-toggle": "tooltip"}
+          %td.verification-result{class: line.verification_status_class, "title": line.pre_verified_message, "data-toggle": "tooltip", "data-placement": "left"}
             %a{href: line.verification_status_url}
               - if options.all_rows_checked && line.number
                 = "#{line.verification_status} (number #{line.number})"
               - else
                 = line.verification_status
             - if line.pre_verified_message
               %span.glyphicon.glyphicon-time.pre-verified-icon{"aria-hidden": true}
-
-  :javascript
-    $(document).ready(function(){
-      initializeClipper(".clippable");
-    });

public/javascripts/matrix.js

@@ -53,6 +53,26 @@ function disableFieldsThatShouldNotBeSubmitted() {
   $('.version-selectorizor').prop('disabled', 'disabled');
 }
 
+function highlightPactPublicationsWithSameContent(td) {
+  const pactVersionSha = $(td).data('pact-version-sha');
+  $('*[data-pact-version-sha="' + pactVersionSha +'"]').addClass('bg-info');
+}
+
+function unHighlightPactPublicationsWithSameContent(td, event) {
+  var destinationElement = $(event.toElement || event.relatedTarget);
+  // Have to use mouseout instead of mouseleave, because the tooltip is a child
+  // of the td, and the mouseleave will consider that hovering over the tooltip
+  // does not count as leaving. Unfortunately, if you then leave the tooltip,
+  // the div gets removed without firing the mouseleave event, so the cells remain
+  // highlighted.
+  // The tooltip needs to be a child of the td so that we can style the one showing
+  // the SHA so that it's wide enough to fit the SHA in.
+  if (!$(td).find('a').is(destinationElement)) {
+    const pactVersionSha = $(td).data('pact-version-sha');
+    $('*[data-pact-version-sha="' + pactVersionSha +'"]').removeClass('bg-info');
+  }
+}
+
 $(document).ready(function(){
   $('.version-selectorizor').change(handleSelectorizorChanged);
   $('.version-selectorizor').each(function(){ showApplicableTextBoxes($(this)); });
@@ -65,6 +85,11 @@ $(document).ready(function(){
   });
 
   $('[data-toggle="tooltip"]').each(function(index, el){
-    $(el).tooltip({container: $(el)});
+    $(el).tooltip({container: $(el)})
   });
+
+  initializeClipper('.clippable');
+
+  $('td.pact-published').mouseover(function(event) { highlightPactPublicationsWithSameContent(this) });
+  $('td.pact-published').mouseout(function(event) { unHighlightPactPublicationsWithSameContent(this, event)});
 });

public/stylesheets/matrix.css

@@ -23,3 +23,8 @@ div.tag {
 span.pre-verified-icon {
   color: #337ab7;
 }
+
+/* Need to make the tooltip wide enough to show the full SHA */
+td.pact-published .tooltip-inner {
+  max-width: 300px;
+}