Updated MR compare

Based on in feedback in !3228

app/assets/stylesheets/pages/commits.scss

@@ -75,6 +75,11 @@ li.commit {
     }
   }
 
+  .item-title {
+    display: inline-block;
+    max-width: 70%;
+  }
+
   .commit-row-description {
     font-size: 14px;
     border-left: 1px solid #eee;

app/views/projects/commits/_commit.html.haml

@@ -11,7 +11,7 @@
 = cache(cache_key) do
   %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" }
     .commit-row-title
-      %span.item-title.str-truncated
+      %span.item-title
         = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
         - if commit.description?
           %a.text-expander.js-toggle-button ...

app/views/projects/merge_requests/_new_compare.html.haml

@@ -16,11 +16,9 @@
               = dropdown_title("Select source project")
               = dropdown_filter("Search projects")
               = dropdown_content do
-                - is_active = f.object.source_project_id == @merge_request.source_project.id
-                %ul
-                  %li
-                    %a{ href: "#", class: "#{("is-active" if is_active)}", data: { id: @merge_request.source_project.id } }
-                      = @merge_request.source_project_path
+                = render 'projects/merge_requests/dropdowns/project',
+                projects: [@merge_request.source_project],
+                selected: f.object.source_project_id
           .merge-request-select.dropdown
             = f.hidden_field :source_branch
             = dropdown_toggle "Select source branch", { toggle: "dropdown", field_name: "#{f.object_name}[source_branch]" }, { toggle_class: "js-compare-dropdown js-source-branch" }
@@ -28,11 +26,9 @@
               = dropdown_title("Select source branch")
               = dropdown_filter("Search branches")
               = dropdown_content do
-                %ul
-                  - @merge_request.source_branches.each do |branch|
-                    %li
-                      %a{ href: "#", class: "#{("is-active" if f.object.source_branch == branch)}", data: { id: branch } }
-                        = branch
+                = render 'projects/merge_requests/dropdowns/branch',
+                branches: @merge_request.source_branches,
+                selected: f.object.source_branch
         .panel-footer
           = icon('spinner spin', class: 'js-source-loading')
           %ul.list-unstyled.mr_source_commit
@@ -50,11 +46,9 @@
               = dropdown_title("Select target project")
               = dropdown_filter("Search projects")
               = dropdown_content do
-                %ul
-                  - projects.each do |project|
-                    %li
-                      %a{ href: "#", class: "#{("is-active" if f.object.target_project_id == project.id)}", data: { id: project.id } }
-                        = project.path_with_namespace
+                = render 'projects/merge_requests/dropdowns/project',
+                projects: projects,
+                selected: f.object.target_project_id
           .merge-request-select.dropdown
             = f.hidden_field :target_branch
             = dropdown_toggle f.object.target_branch, { toggle: "dropdown", field_name: "#{f.object_name}[target_branch]" }, { toggle_class: "js-compare-dropdown js-target-branch" }
@@ -62,11 +56,9 @@
               = dropdown_title("Select target branch")
               = dropdown_filter("Search branches")
               = dropdown_content do
-                %ul
-                  - @merge_request.target_branches.each do |branch|
-                    %li
-                      %a{ href: "#", class: "#{("is-active" if f.object.target_branch == branch)}", data: { id: branch } }
-                        = branch
+                = render 'projects/merge_requests/dropdowns/branch',
+                branches: @merge_request.target_branches,
+                selected: f.object.target_branch
         .panel-footer
           = icon('spinner spin', class: "js-target-loading")
           %ul.list-unstyled.mr_target_commit

app/views/projects/merge_requests/dropdowns/_branch.html.haml

+%ul
+  - branches.each do |branch|
+    %li
+      %a{ href: '#', class: "#{('is-active' if selected == branch)}", data: { id: branch } }
+        = branch

app/views/projects/merge_requests/dropdowns/_project.html.haml

+%ul
+  - projects.each do |project|
+    %li
+      %a{ href: "#", class: "#{('is-active' if selected == project.id)}", data: { id: project.id } }
+        = project.path_with_namespace

app/views/projects/merge_requests/update_branches.html.haml

-%ul
-  - @target_branches.each do |branch|
-    %li
-      %a{ href: "#", class: "#{("is-active" if "a" == branch)}", data: { id: branch } }
-        = branch
+= render 'projects/merge_requests/dropdowns/branch',
+branches: @target_branches,
+selected: nil