Merge branch '21331-improve-confusing-compare-page' into 'master'

Make the labels in the Compare form less confusing

Closes #21331

See merge request gitlab-org/gitlab-ce!14225

app/controllers/projects/compare_controller.rb

@@ -27,7 +27,7 @@ class Projects::CompareController < Projects::ApplicationController
 
   def create
     if params[:from].blank? || params[:to].blank?
-      flash[:alert] = "You must select from and to branches"
+      flash[:alert] = "You must select a Source and a Target revision"
       from_to_vars = {
         from: params[:from].presence,
         to: params[:to].presence

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

@@ -2,22 +2,22 @@
   .clearfix
     - if params[:to] && params[:from]
       .compare-switch-container
-        = link_to icon('exchange'), {from: params[:to], to: params[:from]}, {class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Switch base of comparison'}
-    .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
-      .input-group.inline-input-group
-        %span.input-group-addon from
-        = hidden_field_tag :from, params[:from]
-        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", 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= params[:from] || 'Select branch/tag'
-      = render 'shared/ref_dropdown'
-    .compare-ellipsis.inline ...
+        = link_to icon('exchange'), { from: params[:to], to: params[:from] }, class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Swap revisions'
     .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
       .input-group.inline-input-group
-        %span.input-group-addon to
+        %span.input-group-addon Source
         = hidden_field_tag :to, params[:to]
         = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", 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= params[:to] || 'Select branch/tag'
       = 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-addon Target
+        = hidden_field_tag :from, params[:from]
+        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", 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= params[:from] || 'Select branch/tag'
+      = render 'shared/ref_dropdown'
      
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"
     - if @merge_request.present?

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

@@ -7,13 +7,19 @@
   .sub-header-block
     Compare Git revisions.
     %br
-    Fill input field with commit SHA like
-    %code.ref-name 4eedf23
-    or branch/tag name like
-    %code.ref-name master
-    and press compare button for the commits list and a code diff.
+    Choose a branch/tag (e.g.
+    = succeed ')' do
+      %code.ref-name master
+    or enter a commit SHA (e.g.
+    = succeed ')' do
+      %code.ref-name 4eedf23
+    to see what's changed or to create a merge request.
     %br
-    Changes are shown <b>from</b> the version in the first field <b>to</b> the version in the second field.
+    Changes are shown as if the
+    %b source
+    revision was being merged into the
+    %b target
+    revision.
 
   .prepend-top-20
     = render "form"

changelogs/unreleased/21331-improve-confusing-compare-page.yml

+---
+title: Make the labels in the Compare form less confusing
+merge_request: 14225
+author:
+type: changed