feat(matrix ui): highlight rows with the same consumer/provider/consumer version/provider version

Author: bethesque

lib/pact_broker/ui/view_models/matrix_line.rb

@@ -50,6 +50,14 @@ def pact_revision_number
           @line.pact_revision_number
         end
 
+        def consumer_version_id
+          @line.consumer_version_id
+        end
+
+        def provider_version_id
+          @line.provider_version_id
+        end
+
         def consumer_version_number
           @line.consumer_version_number
         end

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

@@ -99,10 +99,10 @@
       %tbody
       - lines.each do | line |
         %tr
-          %td.consumer{'data-sort-value' => line.consumer_name}
+          %td.consumer{'data-sort-value' => line.consumer_name, 'data-consumer-name' => line.consumer_name}
             %a{href: line.consumer_name_url}
               = line.consumer_name
-          %td.consumer-version{'data-sort-value' => line.consumer_version_order}
+          %td.consumer-version{'data-sort-value' => line.consumer_version_order, 'data-consumer-version-id' => line.consumer_version_id}
             %div.clippable
               %a{href: line.consumer_version_number_url}
                 = line.display_consumer_version_number
@@ -126,10 +126,10 @@
               - else
                 = line.pact_publication_date
 
-          %td.provider{'data-sort-value' => line.provider_name}
+          %td.provider{'data-sort-value' => line.provider_name, 'data-provider-name' => line.provider_name }
             %a{href: line.provider_name_url}
               = line.provider_name
-          %td.provider-version{'data-sort-value' => line.provider_version_order}
+          %td.provider-version{'data-sort-value' => line.provider_version_order, 'data-provider-version-id' => line.provider_version_id }
             %div.clippable
               %a{href: line.provider_version_number_url}
                 = line.display_provider_version_number

public/javascripts/matrix.js

@@ -53,12 +53,12 @@ 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 highlightPactPublicationsWithSameData(td, field) {
+  const value = $(td).data(field);
+  $('*[data-' + field + '="' + value +'"]').addClass('bg-info');
 }
 
-function unHighlightPactPublicationsWithSameContent(td, event) {
+function unHighlightPactPublicationsWithSameData(td, event, field) {
   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
@@ -68,8 +68,8 @@ function unHighlightPactPublicationsWithSameContent(td, event) {
   // 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');
+    const value = $(td).data(field);
+    $('*[data-' + field + '="' + value +'"]').removeClass('bg-info');
   }
 }
 
@@ -90,6 +90,18 @@ $(document).ready(function(){
 
   initializeClipper('.clippable');
 
-  $('td.pact-published').mouseover(function(event) { highlightPactPublicationsWithSameContent(this) });
-  $('td.pact-published').mouseout(function(event) { unHighlightPactPublicationsWithSameContent(this, event)});
+  $('td.consumer').mouseover(function(event) { highlightPactPublicationsWithSameData(this, 'consumer-name') });
+  $('td.consumer').mouseout(function(event) { unHighlightPactPublicationsWithSameData(this, event, 'consumer-name') });
+
+  $('td.consumer-version').mouseover(function(event) { highlightPactPublicationsWithSameData(this, 'consumer-version-id') });
+  $('td.consumer-version').mouseout(function(event) { unHighlightPactPublicationsWithSameData(this, event, 'consumer-version-id') });
+
+  $('td.pact-published').mouseover(function(event) { highlightPactPublicationsWithSameData(this, 'pact-version-sha') });
+  $('td.pact-published').mouseout(function(event) { unHighlightPactPublicationsWithSameData(this, event, 'pact-version-sha') });
+
+  $('td.provider').mouseover(function(event) { highlightPactPublicationsWithSameData(this, 'provider-name') });
+  $('td.provider').mouseout(function(event) { unHighlightPactPublicationsWithSameData(this, event, 'provider-name') });
+
+  $('td.provider-version').mouseover(function(event) { highlightPactPublicationsWithSameData(this, 'provider-version-id') });
+  $('td.provider-version').mouseout(function(event) { unHighlightPactPublicationsWithSameData(this, event, 'provider-version-id') });
 });