Moves merge help into a vue component

4 files changed, 41 insertions, 25 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js
deleted file mode 100644
index 1d9f9863dd9..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export default {
-  name: 'MRWidgetMergeHelp',
-  props: {
-    missingBranch: { type: String, required: false, default: '' },
-  },
-  template: `
-    <section class="mr-widget-help">
-      <template
-        v-if="missingBranch">
-        If the {{missingBranch}} branch exists in your local repository, you
-      </template>
-      <template v-else>
-        You
-      </template>
-      can merge this merge request manually using the
-      <a
-        data-toggle="modal"
-        href="#modal_merge_info">
-        command line
-      </a>
-    </section>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
new file mode 100644
index 00000000000..bc27bbdd364
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
@@ -0,0 +1,39 @@
+<script>
+  import { sprintf, s__ } from '~/locale';
+
+  export default {
+    name: 'MRWidgetMergeHelp',
+    props: {
+      missingBranch: {
+        type: String,
+        required: false,
+        default: ''
+      },
+    },
+    computed: {
+      missingBranchInfo() {
+        return sprintf(
+          s__('mrWidget|If the %{branch} branch exists in your local repository, you can merge this merge request manually using the'),
+          { branch: this.missingBranch }
+        );
+      },
+    },
+  };
+</script>
+<template>
+  <section class="mr-widget-help">
+    <template v-if="missingBranch">
+      {{ missingBranchInfo }}
+    </template>
+    <template v-else>
+      {{ s__("mrWidget|You can merge this merge request manually using the") }}
+    </template>
+
+    <a
+      role="button"
+      data-toggle="modal"
+      href="#modal_merge_info">
+      {{ s__("mrWidget|command line") }}
+    </a>
+  </section>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
index 303877d6fbf..7733fb74afe 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
@@ -1,6 +1,6 @@
 import statusIcon from '../mr_widget_status_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
-import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';
+import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
 
 export default {
   name: 'MRWidgetMissingBranch',
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 2917090e073..0e869a2aaac 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -12,7 +12,7 @@
 export { default as Vue } from 'vue';
 export { default as SmartInterval } from '~/smart_interval';
 export { default as WidgetHeader } from './components/mr_widget_header';
-export { default as WidgetMergeHelp } from './components/mr_widget_merge_help';
+export { default as WidgetMergeHelp } from './components/mr_widget_merge_help.vue';
 export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
 export { default as WidgetDeployment } from './components/mr_widget_deployment';
 export { default as WidgetRelatedLinks } from './components/mr_widget_related_links';