Update missing branch widget text to include branch name

Changelog: other

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue

 <script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { sprintf, s__ } from '~/locale';
+import { GlIcon, GlTooltipDirective, GlSprintf } from '@gitlab/ui';
+import { sprintf } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import missingBranchQuery from '../../queries/states/missing_branch.query.graphql';
+import {
+  MR_WIDGET_MISSING_BRANCH_WHICH,
+  MR_WIDGET_MISSING_BRANCH_RESTORE,
+  MR_WIDGET_MISSING_BRANCH_MANUALCLI,
+} from '../../i18n';
 import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
@@ -13,6 +18,7 @@ export default {
   },
   components: {
     GlIcon,
+    GlSprintf,
     statusIcon,
   },
   mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
@@ -45,26 +51,20 @@ export default {
 
       return this.mr.sourceBranchRemoved;
     },
-    missingBranchName() {
+    type() {
       return this.sourceBranchRemoved ? 'source' : 'target';
     },
-    missingBranchNameMessage() {
-      return sprintf(
-        s__('mrWidget| Please restore it or use a different %{missingBranchName} branch'),
-        {
-          missingBranchName: this.missingBranchName,
+    name() {
+      return this.type === 'source' ? this.mr.sourceBranch : this.mr.targetBranch;
     },
-      );
+    warning() {
+      return sprintf(MR_WIDGET_MISSING_BRANCH_WHICH, { type: this.type, name: this.name });
     },
-    message() {
-      return sprintf(
-        s__(
-          'mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line',
-        ),
-        {
-          missingBranchName: this.missingBranchName,
+    restore() {
+      return sprintf(MR_WIDGET_MISSING_BRANCH_RESTORE, { type: this.type });
     },
-      );
+    message() {
+      return sprintf(MR_WIDGET_MISSING_BRANCH_MANUALCLI, { type: this.type });
     },
   },
 };
@@ -79,9 +79,14 @@ export default {
           'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget,
         }"
         class="bold js-branch-text"
+        data-testid="widget-content"
       >
-        <span class="capitalize" data-testid="missingBranchName"> {{ missingBranchName }} </span>
-        {{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }}
+        <gl-sprintf :message="warning">
+          <template #code="{ content }">
+            <code>{{ content }}</code>
+          </template>
+        </gl-sprintf>
+        {{ restore }}
         <gl-icon
           v-gl-tooltip
           :title="message"

app/assets/javascripts/vue_merge_request_widget/i18n.js

-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
+
+export const MR_WIDGET_MISSING_BRANCH_WHICH = s__(
+  'mrWidget|The %{type} branch %{codeStart}%{name}%{codeEnd} does not exist.',
+);
+export const MR_WIDGET_MISSING_BRANCH_RESTORE = s__(
+  'mrWidget|Please restore it or use a different %{type} branch.',
+);
+export const MR_WIDGET_MISSING_BRANCH_MANUALCLI = s__(
+  'mrWidget|If the %{type} branch exists in your local repository, you can merge this merge request manually using the command line.',
+);
 
 export const SQUASH_BEFORE_MERGE = {
   tooltipTitle: __('Required in this project.'),

locale/gitlab.pot

@@ -42646,9 +42646,6 @@ msgstr ""
 msgid "mrWidgetNothingToMerge|Use merge requests to propose changes to your project and discuss them with your team. To make changes, push a commit or edit this merge request to use a different branch. With %{linkStart}CI/CD%{linkEnd}, automatically test your changes before merging."
 msgstr ""
 
-msgid "mrWidget| Please restore it or use a different %{missingBranchName} branch"
-msgstr ""
-
 msgid "mrWidget|%{boldHeaderStart}Looks like there's no pipeline here.%{boldHeaderEnd}"
 msgstr ""
 
@@ -42771,7 +42768,7 @@ msgstr ""
 msgid "mrWidget|Hide %{widget} details"
 msgstr ""
 
-msgid "mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line"
+msgid "mrWidget|If the %{type} branch exists in your local repository, you can merge this merge request manually using the command line."
 msgstr ""
 
 msgid "mrWidget|If the last pipeline ran in the fork project, it may be inaccurate. Before merge, we advise running a pipeline in this project."
@@ -42875,6 +42872,9 @@ msgstr ""
 msgid "mrWidget|Plain diff"
 msgstr ""
 
+msgid "mrWidget|Please restore it or use a different %{type} branch."
+msgstr ""
+
 msgid "mrWidget|Ready to be merged automatically. Ask someone with write access to this repository to merge this request"
 msgstr ""
 
@@ -42920,6 +42920,9 @@ msgstr ""
 msgid "mrWidget|Show %{widget} details"
 msgstr ""
 
+msgid "mrWidget|The %{type} branch %{codeStart}%{name}%{codeEnd} does not exist."
+msgstr ""
+
 msgid "mrWidget|The changes were merged into"
 msgstr ""
 
@@ -42965,9 +42968,6 @@ msgstr ""
 msgid "mrWidget|Your password"
 msgstr ""
 
-msgid "mrWidget|branch does not exist."
-msgstr ""
-
 msgid "mrWidget|into"
 msgstr ""
 

spec/features/merge_request/user_sees_deleted_target_branch_spec.rb

@@ -15,7 +15,7 @@ RSpec.describe 'Merge request > User sees deleted target branch', :js do
   end
 
   it 'shows a message about missing target branch' do
-    expect(page).to have_content('Target branch does not exist')
+    expect(page).to have_content('The target branch feature does not exist')
   end
 
   it 'does not show link to target branch' do

spec/features/merge_request/user_sees_mr_with_deleted_source_branch_spec.rb

@@ -17,7 +17,7 @@ RSpec.describe 'Merge request > User sees MR with deleted source branch', :js do
   end
 
   it 'shows a message about missing source branch' do
-    expect(page).to have_content('Source branch does not exist.')
+    expect(page).to have_content('The source branch this-branch-does-not-exist does not exist.')
   end
 
   it 'still contains Discussion, Commits and Changes tabs' do
@@ -27,7 +27,7 @@ RSpec.describe 'Merge request > User sees MR with deleted source branch', :js do
       expect(page).to have_content('Changes')
     end
 
-    expect(page).to have_content('Source branch does not exist.')
+    expect(page).to have_content('The source branch this-branch-does-not-exist does not exist.')
 
     click_on 'Changes'
     wait_for_requests

spec/frontend/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js

@@ -40,7 +40,7 @@ describe('MRWidgetMissingBranch', () => {
         async ({ sourceBranchRemoved, branchName }) => {
           await factory(sourceBranchRemoved, mergeRequestWidgetGraphql);
 
-          expect(wrapper.find('[data-testid="missingBranchName"]').text()).toContain(branchName);
+          expect(wrapper.find('[data-testid="widget-content"]').text()).toContain(branchName);
         },
       );
     });