Adapt that diverging commits could be just one bar

refactors the ui for diverging commits so that it's only a single
bar instead of two separate bars

3 files changed, 31 insertions, 13 deletions

diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
index 38fec3f0aa8..ce0622b3d48 100644
--- a/app/assets/stylesheets/pages/branches.scss
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -11,15 +11,24 @@
 }
 
 .divergence-graph {
+  $graph-side-width: 80px;
+  $graph-separator-width: 1px;
+
   padding: 0 6px;
 
   .graph-side {
     position: relative;
-    width: 80px;
+    width: $graph-side-width;
     height: 22px;
     padding: 5px 0 13px;
     float: left;
 
+    &.full {
+      width: $graph-side-width * 2 + $graph-separator-width;
+      display: flex;
+      justify-content: center;
+    }
+
     .bar {
       position: absolute;
       height: 4px;
@@ -57,7 +66,7 @@
 
   .graph-separator {
     position: relative;
-    width: 1px;
+    width: $graph-separator-width;
     height: 18px;
     margin: 5px 0 0;
     float: left;
diff --git a/app/controllers/projects/branches_controller.rb b/app/controllers/projects/branches_controller.rb
index a6bfb913900..32b7f3207ef 100644
--- a/app/controllers/projects/branches_controller.rb
+++ b/app/controllers/projects/branches_controller.rb
@@ -29,7 +29,8 @@ class Projects::BranchesController < Projects::ApplicationController
         Gitlab::GitalyClient.allow_n_plus_1_calls do
           @max_commits = @branches.reduce(0) do |memo, branch|
             diverging_commit_counts = repository.diverging_commit_counts(branch)
-            [memo, diverging_commit_counts[:behind], diverging_commit_counts[:ahead]].max
+            [memo, diverging_commit_counts.values_at(:behind, :ahead, :distance)]
+              .flatten.compact.max
           end
         end
 
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 4b0ea15335e..c64ad1c8147 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -2,6 +2,7 @@
 - commit = @repository.commit(branch.dereferenced_target)
 - bar_graph_width_factor = @max_commits > 0 ? 100.0/@max_commits : 0
 - diverging_commit_counts = @repository.diverging_commit_counts(branch)
+- number_commits_distance = diverging_commit_counts[:distance]
 - number_commits_behind = diverging_commit_counts[:behind]
 - number_commits_ahead = diverging_commit_counts[:ahead]
 - merge_project = merge_request_source_project_for_project(@project)
@@ -28,16 +29,23 @@
         = s_('Branches|Cant find HEAD commit for this branch')
 
   - if branch.name != @repository.root_ref
-    .divergence-graph.d-none.d-md-block{ title: s_('%{number_commits_behind} commits behind %{default_branch}, %{number_commits_ahead} commits ahead') % { number_commits_behind: diverging_count_label(number_commits_behind),
-      default_branch: @repository.root_ref,
-      number_commits_ahead: diverging_count_label(number_commits_ahead) } }
-      .graph-side
-        .bar.bar-behind{ style: "width: #{number_commits_behind * bar_graph_width_factor}%" }
-        %span.count.count-behind= diverging_count_label(number_commits_behind)
-      .graph-separator
-      .graph-side
-        .bar.bar-ahead{ style: "width: #{number_commits_ahead * bar_graph_width_factor}%" }
-        %span.count.count-ahead= diverging_count_label(number_commits_ahead)
+    - if number_commits_distance.nil?
+      .divergence-graph.d-none.d-md-block{ title: s_('%{number_commits_behind} commits behind %{default_branch}, %{number_commits_ahead} commits ahead') % { number_commits_behind: diverging_count_label(number_commits_behind),
+        default_branch: @repository.root_ref,
+        number_commits_ahead: diverging_count_label(number_commits_ahead) } }
+        .graph-side
+          .bar.bar-behind{ style: "width: #{number_commits_behind * bar_graph_width_factor}%" }
+          %span.count.count-behind= diverging_count_label(number_commits_behind)
+        .graph-separator
+        .graph-side
+          .bar.bar-ahead{ style: "width: #{number_commits_ahead * bar_graph_width_factor}%" }
+          %span.count.count-ahead= diverging_count_label(number_commits_ahead)
+    - else
+      .divergence-graph.d-none.d-md-block{ title: s_('More than %{number_commits_distance} commits different with %{default_branch}') % { number_commits_distance: diverging_count_label(number_commits_distance),
+        default_branch: @repository.root_ref} }
+        .graph-side.full
+          .bar{ style: "width: #{number_commits_distance * bar_graph_width_factor}%" }
+          %span.count= diverging_count_label(number_commits_distance)
 
   .controls.d-none.d-md-block<
     - if merge_project && create_mr_button?(@repository.root_ref, branch.name)