Checkmarks in dropdowns for already selected values

app/assets/stylesheets/pages/commits.scss

@@ -47,6 +47,7 @@ li.commit {
 
     .commit_short_id {
       min-width: 65px;
+      color: $gl-dark-link-color;
       font-family: $monospace_font;
     }
 

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

@@ -12,25 +12,25 @@
           .merge-request-select.dropdown
             = f.hidden_field :source_project_id
             = dropdown_toggle @merge_request.source_project_path, { toggle: "dropdown", field_name: "#{f.object_name}[source_project_id]", disabled: @merge_request.persisted? }, { toggle_class: "js-compare-dropdown js-source-project" }
-            .dropdown-menu
+            .dropdown-menu.dropdown-menu-selectable
               = dropdown_title("Select source project")
               = dropdown_filter("Search projects")
               = dropdown_content do
                 %ul
                   %li
-                    %a{ href: "#", data: { id: @merge_request.source_project.id } }
+                    %a{ href: "#", class: "#{("is-active" if f.object.source_project_id == @merge_request.source_project.id)}", data: { id: @merge_request.source_project.id } }
                       = @merge_request.source_project_path
           .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" }
-            .dropdown-menu
+            .dropdown-menu.dropdown-menu-selectable
               = dropdown_title("Select source branch")
               = dropdown_filter("Search branches")
               = dropdown_content do
                 %ul
                   - @merge_request.source_branches.each do |branch|
                     %li
-                      %a{ href: "#", data: { id: branch } }
+                      %a{ href: "#", class: "#{("is-active" if f.object.source_branch == branch)}", data: { id: branch } }
                         = branch
         .panel-footer
           = icon('spinner spin', class: "js-source-loading")
@@ -45,14 +45,14 @@
           .merge-request-select.dropdown
             = f.hidden_field :target_project_id
             = dropdown_toggle projects.first.path_with_namespace, { toggle: "dropdown", field_name: "#{f.object_name}[target_project_id]", disabled: @merge_request.persisted? }, { toggle_class: "js-compare-dropdown js-target-project" }
-            .dropdown-menu
+            .dropdown-menu.dropdown-menu-selectable
               = dropdown_title("Select target project")
               = dropdown_filter("Search projects")
               = dropdown_content do
                 %ul
                   - projects.each do |project|
                     %li
-                      %a{ href: "#" }
+                      %a{ href: "#", class: "#{("is-active" if f.object.target_project_id == project.id)}", data: { id: project.id } }
                         = project.path_with_namespace
           .merge-request-select.dropdown
             = f.hidden_field :target_branch
@@ -64,7 +64,7 @@
                 %ul
                   - @merge_request.target_branches.each do |branch|
                     %li
-                      %a{ href: "#", class: "#{("is-active" if :target_branch == branch)}", data: { id: branch } }
+                      %a{ href: "#", class: "#{("is-active" if f.object.target_branch == branch)}", data: { id: branch } }
                         = branch
         .panel-footer
           = icon('spinner spin', class: "js-target-loading")