feat: Truncate tags in UI when they are super long

lib/pact_broker/date_helper.rb

@@ -4,7 +4,6 @@ module DateHelper
     extend self
 
     # Ripped from actionview/lib/action_view/helpers/date_helper.rb
-
     def local_date_in_words datetime
       datetime.to_time.localtime.to_datetime.strftime("%a %d %b %Y, %l:%M%P %:z").gsub("  ", " ")
     end
@@ -31,9 +30,6 @@ def distance_of_time_in_words(from_time, to_time = 0, options = {})
       distance_in_minutes = ((to_time - from_time)/60.0).round
       distance_in_seconds = (to_time - from_time).round
 
-      # require 'pry'; pry(binding);
-
-      # locale = I18n.with_options :locale => options[:locale], :scope => options[:scope]
       locale = Locale.new(:locale => options[:locale], :scope => options[:scope])
       case distance_in_minutes
       when 0..1

lib/pact_broker/string_refinements.rb

@@ -55,6 +55,15 @@ def camelcase(*separators)
 
         str
       end
+
+      # Adopt from https://stackoverflow.com/questions/1451384/how-can-i-center-truncate-a-string
+      def ellipsisize(minimum_length: 20, edge_length: 10)
+        return self if self.length < minimum_length || self.length <= edge_length * 2
+
+        edge = "." * edge_length
+        mid_length = self.length - edge_length * 2
+        gsub(/(#{edge}).{#{mid_length},}(#{edge})/, '\1...\2')
+      end
     end
   end
 end

lib/pact_broker/ui/controllers/base_controller.rb

@@ -1,11 +1,13 @@
 require "padrino-core"
 require "haml"
 require "pact_broker/services"
+require "pact_broker/string_refinements"
 
 module PactBroker
   module UI
     module Controllers
       class Base < Padrino::Application
+        using PactBroker::StringRefinements
 
         set :root, File.join(File.dirname(__FILE__), "..")
         set :show_exceptions, ENV["RACK_ENV"] != "production"
@@ -18,6 +20,12 @@ def base_url
           # rather than request.base_url, which uses the X-Forwarded headers.
           env["pactbroker.base_url"] || ""
         end
+
+        helpers do
+          def ellipsisize(string)
+            string.ellipsisize
+          end
+        end
       end
     end
   end

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

@@ -87,15 +87,15 @@
                 - if view == "branch" || view == "all"
                   - index_item.consumer_version_branch_heads.each do | branch_head |
                     %div{"class": "tag badge badge-dark", "title": branch_head.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
-                      = "branch: " + branch_head.branch_name
+                      = "branch: " + ellipsisize(branch_head.branch_name)
                 - if view == "tag" || view == "all"
                   - index_item.consumer_version_latest_tag_names.each do | tag_name |
                     .tag.badge.badge-primary
-                      = "tag: " + tag_name
+                      = "tag: " + ellipsisize(tag_name)
                 - if view == "environment" || view == "all"
                   - index_item.consumer_version_environment_names.each do | environment_name |
                     .tag.badge.badge-success
-                      = "env: " + environment_name
+                      = "env: " + ellipsisize(environment_name)
                 - if view == "all" && index_item.display_latest_label? && index_item.latest?
                   .tag.badge.bg-light
                     latest
@@ -108,15 +108,15 @@
                 - if view == "branch" || view == "all"
                   - index_item.provider_version_branch_heads.each do | branch_head |
                     %div{"class": "tag badge badge-dark", "title": branch_head.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
-                      = "branch: " + branch_head.branch_name
+                      = "branch: " + ellipsisize(branch_head.branch_name)
                 - if view == "tag" || view == "all"
                   - index_item.provider_version_latest_tag_names.each do | tag_name |
                     .tag.badge.badge-primary
-                      = "tag: " + tag_name
+                      = "tag: " + ellipsisize(tag_name)
                 - if view == "environment" || view == "all"
                   - index_item.provider_version_environment_names.each do | environment_name |
                     .tag.badge.badge-success
-                      = "env: " + environment_name
+                      = "env: " + ellipsisize(environment_name)
               %td.pact
                 %span.pact
                   %a{ href: index_item.pact_url, title: "View pact" }

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

@@ -145,22 +145,22 @@
               .tag-parent{"title": branch.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 - branch_class = branch.latest? ? "tag badge badge-dark" : "tag badge badge-secondary"
                 %div{"class": branch_class}
-                  = "branch: " + branch.name
+                  = "branch: " + ellipsisize(branch.name)
             - line.consumer_versions_in_environments.each do | version_in_environment |
               .tag-parent{"title": version_in_environment.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: version_in_environment.url}
                   .tag.badge.badge-success
-                    = "env: " + version_in_environment.environment_name
+                    = "env: " + ellipsisize(version_in_environment.environment_name)
             - line.latest_consumer_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
                   .tag.badge.badge-primary
-                    = "tag: " + tag.name
+                    = "tag: " + ellipsisize(tag.name)
             - line.other_consumer_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
                   .tag.badge.badge-secondary
-                    = "tag: " + tag.name
+                    = "tag: " + ellipsisize(tag.name)
           %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
@@ -182,22 +182,22 @@
               .tag-parent{"title": branch.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 - branch_class = branch.latest? ? "tag badge badge-dark" : "tag badge badge-secondary"
                 %div{"class": branch_class}
-                  = "branch: " + branch.name
+                  = "branch: " + ellipsisize(branch.name)
             - line.provider_versions_in_environments.each do | version_in_environment |
               .tag-parent{"title": version_in_environment.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: version_in_environment.url}
                   .tag.badge.badge-success
-                    = "env: " + version_in_environment.environment_name
+                    = "env: " + ellipsisize(version_in_environment.environment_name)
             - line.latest_provider_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
                   .tag.badge.badge-primary
-                    = "tag:" + tag.name
+                    = "tag:" + ellipsisize(tag.name)
             - line.other_provider_version_tags.each do | tag |
               .tag-parent{"title": tag.tooltip, "data-toggle": "tooltip", "data-placement": "right"}
                 %a{href: tag.url}
                   .tag.badge.badge-secondary
-                    = "tag: " + tag.name
+                    = "tag: " + ellipsisize(tag.name)
           %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

spec/lib/pact_broker/string_refinements_spec.rb

@@ -0,0 +1,25 @@
+require "pact_broker/string_refinements"
+
+module PactBroker
+  describe StringRefinements do
+    using StringRefinements
+
+    describe "ellipsisize" do
+      let(:very_long_string) do
+        "This is a very long string. May be too long to be true. It should be truncated in the middle"
+      end
+
+      context "when using default value to truncate the string" do
+        it "truncates the string in the middle to the default length" do
+          expect(very_long_string.ellipsisize).to eq("This is a ...the middle")
+        end
+      end
+
+      context "when using customised value to truncate the string" do
+        it "truncates the string in the middle to the customised length" do
+          expect(very_long_string.ellipsisize(edge_length: 15)).to eq("This is a very ...d in the middle")
+        end
+      end
+    end
+  end
+end