Moves widget header into a vue file

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js → app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

-import tooltip from '../../vue_shared/directives/tooltip';
-import { pluralize } from '../../lib/utils/text_utility';
-import icon from '../../vue_shared/components/icon.vue';
+<script>
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import { n__ } from '~/locale';
+  import icon from '~/vue_shared/components/icon.vue';
+  import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
-export default {
+  export default {
     name: 'MRWidgetHeader',
-  props: {
-    mr: { type: Object, required: true },
-  },
     directives: {
       tooltip,
     },
     components: {
       icon,
+      clipboardButton,
+    },
+    props: {
+      mr: {
+        type: Object,
+        required: true,
+      },
     },
     computed: {
       shouldShowCommitsBehindText() {
         return this.mr.divergedCommitsCount > 0;
       },
       commitsText() {
-      return pluralize('commit', this.mr.divergedCommitsCount);
+        return n__('commit behind', 'commits behind', this.mr.divergedCommitsCount);
       },
       branchNameClipboardData() {
         // This supports code in app/assets/javascripts/copy_to_clipboard.js that
@@ -35,83 +41,99 @@ export default {
         return branchTitle.length > 32;
       },
     },
-  template: `
+  };
+</script>
+<template>
   <div class="mr-source-target">
     <div class="normal">
       <strong>
-          Request to merge
+        {{ s__("mrWidget|Request to merge") }}
         <span
-            class="label-branch"
-            :class="{'label-truncated': isBranchTitleLong(mr.sourceBranch)}"
+          class="label-branch js-source-branch"
+          :class="{ 'label-truncated': isBranchTitleLong(mr.sourceBranch) }"
           :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
           data-placement="bottom"
           :v-tooltip="isBranchTitleLong(mr.sourceBranch)"
-            v-html="mr.sourceBranchLink"></span>
-          <button
-            v-tooltip
-            class="btn btn-transparent btn-clipboard"
-            data-title="Copy branch name to clipboard"
-            :data-clipboard-text="branchNameClipboardData">
-            <i
-              aria-hidden="true"
-              class="fa fa-clipboard"></i>
-          </button>
-          into
+          v-html="mr.sourceBranchLink"
+        >
+        </span>
+
+        <clipboardButton
+          :text="branchNameClipboardData"
+          :title="__('Copy branch name to clipboard')"
+        />
+
+        {{ s__("mrWidget|into") }}
+
         <span
           class="label-branch"
           :v-tooltip="isBranchTitleLong(mr.sourceBranch)"
-            :class="{'label-truncatedtooltip': isBranchTitleLong(mr.targetBranch)}"
+          :class="{ 'label-truncatedtooltip': isBranchTitleLong(mr.targetBranch) }"
           :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
-            data-placement="bottom">
-            <a :href="mr.targetBranchTreePath">{{mr.targetBranch}}</a>
+          data-placement="bottom"
+        >
+          <a
+            :href="mr.targetBranchTreePath"
+            class="js-target-branch"
+          >
+            {{ mr.targetBranch }}
+          </a>
         </span>
       </strong>
       <span
         v-if="shouldShowCommitsBehindText"
-          class="diverged-commits-count">
-          (<a :href="mr.targetBranchPath">{{mr.divergedCommitsCount}} {{commitsText}} behind</a>)
+        class="diverged-commits-count"
+      >
+        (<a :href="mr.targetBranchPath">{{ mr.divergedCommitsCount }} {{ commitsText }}</a>)
       </span>
     </div>
+
     <div v-if="mr.isOpen">
-        <a
-          href="#modal_merge_info"
+      <button
+        data-target="#modal_merge_info"
         data-toggle="modal"
         :disabled="mr.sourceBranchRemoved"
-          class="btn btn-sm inline">
-          Check out branch
-        </a>
+        class="btn btn-sm inline js-check-out-branch"
+        type="button"
+      >
+        {{ s__("mrWidget|Check out branch") }}
+      </button>
       <span class="dropdown prepend-left-10">
-          <a
+        <button
+          type="button"
           class="btn btn-sm inline dropdown-toggle"
           data-toggle="dropdown"
           aria-label="Download as"
-            role="button">
-            <icon
-              name="download">
-            </icon>
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <icon name="download" />
           <i
             class="fa fa-caret-down"
             aria-hidden="true">
           </i>
-          </a>
+        </button>
         <ul class="dropdown-menu dropdown-menu-align-right">
           <li>
             <a
+              class="js-download-email-patches"
               :href="mr.emailPatchesPath"
-                download>
-                Email patches
+              download
+            >
+              {{ s__("mrWidget|Email patches") }}
             </a>
           </li>
           <li>
             <a
+              class="js-download-plain-diff"
               :href="mr.plainDiffPath"
-                download>
-                Plain diff
+              download
+            >
+              {{ s__("mrWidget|Plain diff") }}
             </a>
           </li>
         </ul>
       </span>
     </div>
   </div>
-  `,
-};
+</template>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue

@@ -7,14 +7,14 @@
       missingBranch: {
         type: String,
         required: false,
-        default: ''
+        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 }
+          { branch: this.missingBranch },
         );
       },
     },

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -11,7 +11,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 WidgetHeader } from './components/mr_widget_header.vue';
 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';

spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js

@@ -2,9 +2,6 @@ import Vue from 'vue';
 import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
 import mountComponent from '../../helpers/vue_mount_component_helper';
 
-
-const text = `If the ${props.missingBranch} branch exists in your local repository`;
-
 describe('MRWidgetMergeHelp', () => {
   let vm;
   let Component;
@@ -17,7 +14,7 @@ describe('MRWidgetMergeHelp', () => {
     vm.$destroy();
   });
 
-  fdescribe('with missing branch', () => {
+  describe('with missing branch', () => {
     beforeEach(() => {
       vm = mountComponent(Component, {
         missingBranch: 'this-is-not-the-branch-you-are-looking-for',
@@ -25,8 +22,16 @@ describe('MRWidgetMergeHelp', () => {
     });
 
     it('renders missing branch information', () => {
-      console.log('', vm.$el);
+      expect(
+        vm.$el.textContent.trim().replace(/[\r\n]+/g, ' ').replace(/\s\s+/g, ' '),
+      ).toEqual(
+        'If the this-is-not-the-branch-you-are-looking-for branch exists in your local repository, you can merge this merge request manually using the command line',
+      );
+    });
 
+    it('renders element to open a modal', () => {
+      expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('a').getAttribute('data-toggle')).toEqual('modal');
     });
   });
 
@@ -34,5 +39,18 @@ describe('MRWidgetMergeHelp', () => {
     beforeEach(() => {
       vm = mountComponent(Component);
     });
+
+    it('renders information about how to merge manually', () => {
+      expect(
+        vm.$el.textContent.trim().replace(/[\r\n]+/g, ' ').replace(/\s\s+/g, ' '),
+      ).toEqual(
+        'You can merge this merge request manually using the command line',
+      );
+    });
+
+    it('renders element to open a modal', () => {
+      expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('a').getAttribute('data-toggle')).toEqual('modal');
+    });
   });
 });