Use the Vue comparison selector on the repo compare show page

This control was originally designed for the index page, but we need it
on show as well.

app/assets/javascripts/pages/projects/compare/show/index.js

 import Diff from '~/diff';
 import GpgBadges from '~/gpg_badges';
 import initChangesDropdown from '~/init_changes_dropdown';
+import initCompareSelector from '~/projects/compare';
+
+initCompareSelector();
 
 document.addEventListener('DOMContentLoaded', () => {
   new Diff(); // eslint-disable-line no-new

app/assets/javascripts/projects/compare/components/revision_dropdown.vue

@@ -69,7 +69,7 @@ export default {
       this.loading = true;
 
       if (reset) {
-        this.selectedRevision = emptyDropdownText;
+        this.selectedRevision = this.getDefaultBranch();
       }
 
       return axios

app/controllers/projects/compare_controller.rb

@@ -21,7 +21,7 @@ class Projects::CompareController < Projects::ApplicationController
   before_action :validate_refs!
 
   before_action do
-    push_frontend_feature_flag(:compare_repo_dropdown)
+    push_frontend_feature_flag(:compare_repo_dropdown, source_project, default_enabled: :yaml)
   end
 
   feature_category :source_code_management

app/helpers/compare_helper.rb

@@ -28,4 +28,20 @@ module CompareHelper
       .new(current_user: current_user, source_project: source_project, project_feature: :repository)
       .execute(include_routes: true)
   end
+
+  def project_compare_selector_data(project, merge_request, params)
+    {
+      project_compare_index_path: project_compare_index_path(project),
+      refs_project_path: refs_project_path(project),
+      params_from: params[:from],
+      params_to: params[:to],
+      project_merge_request_path: merge_request.present? ? project_merge_request_path(project, merge_request) : '',
+      create_mr_path: create_mr_button? ? create_mr_path : ''
+    }.tap do |data|
+      if Feature.enabled?(:compare_repo_dropdown, project, default_enabled: :yaml)
+        data[:project_to] = { id: project.id, name: project.full_path }.to_json
+        data[:projects_from] = target_projects(project).map { |project| { id: project.id, name: project.full_path } }.to_json
+      end
+    end
+  end
 end

app/views/projects/compare/_form.html.haml

-= form_tag project_compare_index_path(@project), method: :post, class: 'form-inline js-requires-input js-signature-container', data: { 'signatures-path' => signatures_namespace_project_compare_index_path } do
-  .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
-    .input-group.inline-input-group
-      %span.input-group-prepend
-        .input-group-text
-          = s_("CompareBranches|Source")
-      = hidden_field_tag :to, params[:to]
-      = button_tag type: 'button', title: params[:to], class: "btn gl-button form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
-        .dropdown-toggle-text.str-truncated.monospace.float-left= params[:to] || _("Select branch/tag")
-        = sprite_icon('chevron-down', css_class: 'float-right')
-    = render 'shared/ref_dropdown'
-  .compare-ellipsis.inline ...
-  .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
-    .input-group.inline-input-group
-      %span.input-group-prepend
-        .input-group-text
-          = s_("CompareBranches|Target")
-      = hidden_field_tag :from, params[:from]
-      = button_tag type: 'button', title: params[:from], class: "btn gl-button form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
-        .dropdown-toggle-text.str-truncated.monospace.float-left= params[:from] || _("Select branch/tag")
-        = sprite_icon('chevron-down', css_class: 'float-right')
-    = render 'shared/ref_dropdown'
-   
-  = button_tag s_("CompareBranches|Compare"), class: "btn gl-button btn-success commits-compare-btn"
-  - if @merge_request.present?
-    = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'gl-ml-3 btn'
-  - elsif create_mr_button?
-    = link_to _("Create merge request"), create_mr_path, class: 'gl-ml-3 btn gl-button'

app/views/projects/compare/index.html.haml

@@ -13,17 +13,4 @@
   = html_escape(_("Changes are shown as if the %{b_open}source%{b_close} revision was being merged into the %{b_open}target%{b_close} revision.")) % { b_open: '<b>'.html_safe, b_close: '</b>'.html_safe }
 
 .prepend-top-20
-  - if Feature.enabled?(:compare_repo_dropdown)
-    #js-compare-selector{ data: { project_compare_index_path: project_compare_index_path(@project),
-      refs_project_path: refs_project_path(@project),
-      params_from: params[:from], params_to: params[:to],
-      project_merge_request_path: @merge_request.present? ? project_merge_request_path(@project, @merge_request) : '',
-      create_mr_path: create_mr_button? ? create_mr_path : '',
-      project_to: { id: @project.id, name: @project.full_path }.to_json,
-      projects_from: target_projects(@project).map { |project| { id:project.id, name: project.full_path } }.to_json } }
-  - else
-    #js-compare-selector{ data: { project_compare_index_path: project_compare_index_path(@project),
-      refs_project_path: refs_project_path(@project),
-      params_from: params[:from], params_to: params[:to],
-      project_merge_request_path: @merge_request.present? ? project_merge_request_path(@project, @merge_request) : '',
-      create_mr_path: create_mr_button? ? create_mr_path : '' } }
+  #js-compare-selector{ data: project_compare_selector_data(@project, @merge_request, params) }

app/views/projects/compare/show.html.haml

@@ -2,7 +2,8 @@
 - page_title "#{params[:from]}...#{params[:to]}"
 
 .sub-header-block.no-bottom-space
-  = render "form"
+  .js-signature-container{ data: { 'signatures-path' => signatures_namespace_project_compare_index_path } }
+    #js-compare-selector{ data: project_compare_selector_data(@project, @merge_request, params) }
 
 - if @commits.present?
   = render "projects/commits/commit_list"

changelogs/unreleased/300853-convert-compare-show-to-vue.yml

+---
+title: Restyle the repository compare show page
+merge_request: 53523
+author:
+type: changed

locale/gitlab.pot

@@ -7548,15 +7548,6 @@ msgstr ""
 msgid "CompareBranches|%{source_branch} and %{target_branch} are the same."
 msgstr ""
 
-msgid "CompareBranches|Compare"
-msgstr ""
-
-msgid "CompareBranches|Source"
-msgstr ""
-
-msgid "CompareBranches|Target"
-msgstr ""
-
 msgid "CompareBranches|There isn't anything to compare."
 msgstr ""
 
@@ -26653,9 +26644,6 @@ msgstr ""
 msgid "Select branch"
 msgstr ""
 
-msgid "Select branch/tag"
-msgstr ""
-
 msgid "Select due date"
 msgstr ""
 

spec/features/projects/merge_request_button_spec.rb

@@ -24,7 +24,7 @@ RSpec.describe 'Merge Request button' do
         project.add_developer(user)
       end
 
-      it 'shows Create merge request button' do
+      it 'shows Create merge request button', :js do
         href = project_new_merge_request_path(
           project,
           merge_request: {
@@ -83,7 +83,7 @@ RSpec.describe 'Merge Request button' do
       end
 
       context 'on own fork of project' do
-        it 'shows Create merge request button' do
+        it 'shows Create merge request button', :js do
           href = project_new_merge_request_path(
             forked_project,
             merge_request: {
@@ -120,7 +120,7 @@ RSpec.describe 'Merge Request button' do
       let(:fork_url) { project_compare_path(forked_project, from: 'master', to: 'feature') }
     end
 
-    it 'shows the correct merge request button when viewing across forks' do
+    it 'shows the correct merge request button when viewing across forks', :js do
       sign_in(user)
       project.add_developer(user)