From c580a27dda198a772fa27c7f7f20469248f2560e Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 18 Jan 2022 01:28:55 -0700
Subject: [PATCH] Update missing branch widget text to include branch name

Changelog: other
---
 .../states/mr_widget_missing_branch.vue       | 45 ++++++++++---------
 .../vue_merge_request_widget/i18n.js          | 12 ++++-
 locale/gitlab.pot                             | 14 +++---
 .../user_sees_deleted_target_branch_spec.rb   |  2 +-
 ...sees_mr_with_deleted_source_branch_spec.rb |  4 +-
 .../states/mr_widget_missing_branch_spec.js   |  2 +-
 6 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
index 5b03eda2eac2bb..cadbd9c28a9b73 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -1,9 +1,14 @@
 <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 });
+    },
+    restore() {
+      return sprintf(MR_WIDGET_MISSING_BRANCH_RESTORE, { type: this.type });
     },
     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,
-        },
-      );
+      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"
diff --git a/app/assets/javascripts/vue_merge_request_widget/i18n.js b/app/assets/javascripts/vue_merge_request_widget/i18n.js
index c88e795e5f3b8e..5d38a662947d31 100644
--- a/app/assets/javascripts/vue_merge_request_widget/i18n.js
+++ b/app/assets/javascripts/vue_merge_request_widget/i18n.js
@@ -1,4 +1,14 @@
-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.'),
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 50ec90cac45983..be1505c51617c6 100644
--- a/locale/gitlab.pot
+++ b/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 ""
 
diff --git a/spec/features/merge_request/user_sees_deleted_target_branch_spec.rb b/spec/features/merge_request/user_sees_deleted_target_branch_spec.rb
index 7c93952ee996b2..dc50c3bc8dbe4a 100644
--- a/spec/features/merge_request/user_sees_deleted_target_branch_spec.rb
+++ b/spec/features/merge_request/user_sees_deleted_target_branch_spec.rb
@@ -15,7 +15,7 @@
   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
diff --git a/spec/features/merge_request/user_sees_mr_with_deleted_source_branch_spec.rb b/spec/features/merge_request/user_sees_mr_with_deleted_source_branch_spec.rb
index e997fb3e85316f..39bba3f2f73db1 100644
--- a/spec/features/merge_request/user_sees_mr_with_deleted_source_branch_spec.rb
+++ b/spec/features/merge_request/user_sees_mr_with_deleted_source_branch_spec.rb
@@ -17,7 +17,7 @@
   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 @@
       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
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js
index 936d673768cc51..ec5ec989d0ff33 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js
+++ b/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);
         },
       );
     });
-- 
GitLab