From 94bbf91523877d647786c07b904cd59ca0aebff6 Mon Sep 17 00:00:00 2001 From: bangn Date: Tue, 22 Feb 2022 07:42:16 +1100 Subject: [PATCH] feat: truncate tags, branches and versions in UI when they are super long (#513) --- lib/pact_broker/date_helper.rb | 4 --- lib/pact_broker/string_refinements.rb | 9 +++++++ .../ui/controllers/base_controller.rb | 8 ++++++ lib/pact_broker/ui/views/dashboard/show.haml | 12 ++++----- lib/pact_broker/ui/views/matrix/show.haml | 16 ++++++------ .../pact_broker/string_refinements_spec.rb | 25 +++++++++++++++++++ 6 files changed, 56 insertions(+), 18 deletions(-) create mode 100644 spec/lib/pact_broker/string_refinements_spec.rb diff --git a/lib/pact_broker/date_helper.rb b/lib/pact_broker/date_helper.rb index 26c77b007..5538ef9f1 100644 --- a/lib/pact_broker/date_helper.rb +++ b/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 diff --git a/lib/pact_broker/string_refinements.rb b/lib/pact_broker/string_refinements.rb index c91b77790..e8960bca7 100644 --- a/lib/pact_broker/string_refinements.rb +++ b/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 diff --git a/lib/pact_broker/ui/controllers/base_controller.rb b/lib/pact_broker/ui/controllers/base_controller.rb index 554803aa7..6125e0bfa 100644 --- a/lib/pact_broker/ui/controllers/base_controller.rb +++ b/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 diff --git a/lib/pact_broker/ui/views/dashboard/show.haml b/lib/pact_broker/ui/views/dashboard/show.haml index f1a6c91ab..ed8405d74 100644 --- a/lib/pact_broker/ui/views/dashboard/show.haml +++ b/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" } diff --git a/lib/pact_broker/ui/views/matrix/show.haml b/lib/pact_broker/ui/views/matrix/show.haml index dfc037a43..9668751fe 100644 --- a/lib/pact_broker/ui/views/matrix/show.haml +++ b/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 diff --git a/spec/lib/pact_broker/string_refinements_spec.rb b/spec/lib/pact_broker/string_refinements_spec.rb new file mode 100644 index 000000000..e6f69ffe7 --- /dev/null +++ b/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