Follow-up from "Restyle changes header & file tree"

The following discussion from !23665 (merged) should be addressed:

• @pslaughter started a discussion: (+2 comments)

  praise: Thanks for i18n'ing these!

  ---

  suggestion (non-blocking): This could be a good opportunity for us to use the very cool <gl-sprintf> component. This way the translators don't have to mess with a split sentence that loses it's context.

  I'm fine if we want to handle this here or in a follow up ~"technical debt" issue 😄

  Here's a patch

  diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
  index 63ce43a193d..3a2146147cc 100644
  --- a/app/assets/javascripts/diffs/components/compare_versions.vue
  +++ b/app/assets/javascripts/diffs/components/compare_versions.vue
  @@ -1,6 +1,6 @@
   <script>
   import { mapActions, mapGetters, mapState } from 'vuex';
  -import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
  +import { GlTooltipDirective, GlLink, GlButton, GlSprintf } from '@gitlab/ui';
   import { __ } from '~/locale';
   import { polyfillSticky } from '~/lib/utils/sticky';
   import Icon from '~/vue_shared/components/icon.vue';
  @@ -15,6 +15,7 @@ export default {
       Icon,
       GlLink,
       GlButton,
  +    GlSprintf,
       SettingsDropdown,
       DiffStats,
     },
  @@ -106,23 +107,29 @@ export default {
         >
           <icon name="file-tree" />
         </button>
  -      <div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container">
  -        {{ __('Compare') }}
  -        <compare-versions-dropdown
  -          :other-versions="mergeRequestDiffs"
  -          :merge-request-version="mergeRequestDiff"
  -          :show-commit-count="true"
  -          class="mr-version-dropdown"
  -        />
  -        {{ __('and') }}
  -        <compare-versions-dropdown
  -          :other-versions="comparableDiffs"
  -          :base-version-path="baseVersionPath"
  -          :start-version="startVersion"
  -          :target-branch="targetBranch"
  -          class="mr-version-compare-dropdown"
  -        />
  -      </div>
  +      <gl-sprintf
  +        v-if="showDropdowns"
  +        class="d-flex align-items-center compare-versions-container"
  +        :message="s__('MergeRequest|Compare %{source} and %{target}')"
  +      >
  +        <template #source>
  +          <compare-versions-dropdown
  +            :other-versions="mergeRequestDiffs"
  +            :merge-request-version="mergeRequestDiff"
  +            :show-commit-count="true"
  +            class="mr-version-dropdown"
  +          />
  +        </template>
  +        <template #target>
  +          <compare-versions-dropdown
  +            :other-versions="comparableDiffs"
  +            :base-version-path="baseVersionPath"
  +            :start-version="startVersion"
  +            :target-branch="targetBranch"
  +            class="mr-version-compare-dropdown"
  +          />
  +        </template>
  +      </gl-sprintf>
         <div v-else-if="commit">
           {{ __('Viewing commit') }}
           <gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link>