diff --git a/app/assets/javascripts/pages/projects/compare/show/index.js b/app/assets/javascripts/pages/projects/compare/show/index.js index f1cf9caa28b0c26e3e583d557746092e6e82bc94..549e596cb8d6e6c747d462b087bfd391870c3a3a 100644 --- a/app/assets/javascripts/pages/projects/compare/show/index.js +++ b/app/assets/javascripts/pages/projects/compare/show/index.js @@ -1,6 +1,9 @@ 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 diff --git a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue index d8947d60a8e7db45189b09d8e49ba473ac2920c6..a175af2f32e4b2bbfcf3d0bd5e9f2ec91863da47 100644 --- a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue +++ b/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 diff --git a/app/controllers/projects/compare_controller.rb b/app/controllers/projects/compare_controller.rb index eecd338b7cc934509e3d9addc03bb9ccb8bc96d0..81f80d37662f336962d70ddc82ffc3865f86ec99 100644 --- a/app/controllers/projects/compare_controller.rb +++ b/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 diff --git a/app/helpers/compare_helper.rb b/app/helpers/compare_helper.rb index c14aa44ced166aa6f42535f6599fe553b99d8d7c..b07baf591146221c1ede0bda3049bd312278c13a 100644 --- a/app/helpers/compare_helper.rb +++ b/app/helpers/compare_helper.rb @@ -28,4 +28,20 @@ def target_projects(source_project) .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 diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml deleted file mode 100644 index 17134613b17f88ff20b40efdb9177ab2219f4d14..0000000000000000000000000000000000000000 --- a/app/views/projects/compare/_form.html.haml +++ /dev/null @@ -1,28 +0,0 @@ -= 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' diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml index 39d4a3b2eb25d202017e22bc67aa9156d51eb89f..e3ab184ec6f01ff634aa9361aed82dab39b5187d 100644 --- a/app/views/projects/compare/index.html.haml +++ b/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: ''.html_safe, b_close: ''.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) } diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml index 51cf95dc84b0c69e256f6087ce26e13619a05750..9e9c271e7bebb8666e7d9ec9ad0ce0cc4ab9ae87 100644 --- a/app/views/projects/compare/show.html.haml +++ b/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" diff --git a/changelogs/unreleased/300853-convert-compare-show-to-vue.yml b/changelogs/unreleased/300853-convert-compare-show-to-vue.yml new file mode 100644 index 0000000000000000000000000000000000000000..2926ef2682b1aa9ffd425a75ba1d828ed8b03a9a --- /dev/null +++ b/changelogs/unreleased/300853-convert-compare-show-to-vue.yml @@ -0,0 +1,5 @@ +--- +title: Restyle the repository compare show page +merge_request: 53523 +author: +type: changed diff --git a/locale/gitlab.pot b/locale/gitlab.pot index a26763274e5b44ec1341c25246ba001c4fc57c9e..42bbf2ce7d19c81a5b7e5d10a82968e3372afe60 100644 --- a/locale/gitlab.pot +++ b/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 "" diff --git a/spec/features/projects/merge_request_button_spec.rb b/spec/features/projects/merge_request_button_spec.rb index 2a486e6e5e143633142f2c88afdd55de2d72588e..9547ba8a390c368aaeb985b7c08c31a82de94a75 100644 --- a/spec/features/projects/merge_request_button_spec.rb +++ b/spec/features/projects/merge_request_button_spec.rb @@ -24,7 +24,7 @@ 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 @@ 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 @@ 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)