Updated MR comparenew-mr-improvements

Based on in feedback in !3228

1 files changed, 12 insertions, 20 deletions

diff --git a/app/views/projects/merge_requests/_new_compare.html.haml b/app/views/projects/merge_requests/_new_compare.html.haml
index 7d7c487e970..3e2a37e050b 100644
--- a/app/views/projects/merge_requests/_new_compare.html.haml
+++ b/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