Merge branch 'fl-mr-widget-1' into 'master'

Moves more mr widget components into vue files

See merge request gitlab-org/gitlab-ce!16857

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

-import tooltip from '../../vue_shared/directives/tooltip';
-import { pluralize } from '../../lib/utils/text_utility';
-import icon from '../../vue_shared/components/icon.vue';
-
-export default {
-  name: 'MRWidgetHeader',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  directives: {
-    tooltip,
-  },
-  components: {
-    icon,
-  },
-  computed: {
-    shouldShowCommitsBehindText() {
-      return this.mr.divergedCommitsCount > 0;
-    },
-    commitsText() {
-      return pluralize('commit', this.mr.divergedCommitsCount);
-    },
-    branchNameClipboardData() {
-      // This supports code in app/assets/javascripts/copy_to_clipboard.js that
-      // works around ClipboardJS limitations to allow the context-specific
-      // copy/pasting of plain text or GFM.
-      return JSON.stringify({
-        text: this.mr.sourceBranch,
-        gfm: `\`${this.mr.sourceBranch}\``,
-      });
-    },
-  },
-  methods: {
-    isBranchTitleLong(branchTitle) {
-      return branchTitle.length > 32;
-    },
-  },
-  template: `
-    <div class="mr-source-target">
-      <div class="normal">
-        <strong>
-          Request to merge
-          <span
-            class="label-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
-          <span
-            class="label-branch"
-            :v-tooltip="isBranchTitleLong(mr.sourceBranch)"
-            :class="{'label-truncatedtooltip': isBranchTitleLong(mr.targetBranch)}"
-            :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
-            data-placement="bottom">
-            <a :href="mr.targetBranchTreePath">{{mr.targetBranch}}</a>
-          </span>
-        </strong>
-        <span
-          v-if="shouldShowCommitsBehindText"
-          class="diverged-commits-count">
-          (<a :href="mr.targetBranchPath">{{mr.divergedCommitsCount}} {{commitsText}} behind</a>)
-        </span>
-      </div>
-      <div v-if="mr.isOpen">
-        <a
-          href="#modal_merge_info"
-          data-toggle="modal"
-          :disabled="mr.sourceBranchRemoved"
-          class="btn btn-sm inline">
-          Check out branch
-        </a>
-        <span class="dropdown prepend-left-10">
-          <a
-            class="btn btn-sm inline dropdown-toggle"
-            data-toggle="dropdown"
-            aria-label="Download as"
-            role="button">
-            <icon
-              name="download">
-            </icon>
-            <i
-              class="fa fa-caret-down"
-              aria-hidden="true">
-            </i>
-          </a>
-          <ul class="dropdown-menu dropdown-menu-align-right">
-            <li>
-              <a
-                :href="mr.emailPatchesPath"
-                download>
-                Email patches
-              </a>
-            </li>
-            <li>
-              <a
-                :href="mr.plainDiffPath"
-                download>
-                Plain diff
-              </a>
-            </li>
-          </ul>
-        </span>
-      </div>
-    </div>
-  `,
-};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.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 {
+    name: 'MRWidgetHeader',
+    directives: {
+      tooltip,
+    },
+    components: {
+      icon,
+      clipboardButton,
+    },
+    props: {
+      mr: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      shouldShowCommitsBehindText() {
+        return this.mr.divergedCommitsCount > 0;
+      },
+      commitsText() {
+        return n__('%d commit behind', '%d commits behind', this.mr.divergedCommitsCount);
+      },
+      branchNameClipboardData() {
+        // This supports code in app/assets/javascripts/copy_to_clipboard.js that
+        // works around ClipboardJS limitations to allow the context-specific
+        // copy/pasting of plain text or GFM.
+        return JSON.stringify({
+          text: this.mr.sourceBranch,
+          gfm: `\`${this.mr.sourceBranch}\``,
+        });
+      },
+      isSourceBranchLong() {
+        return this.isBranchTitleLong(this.mr.sourceBranch);
+      },
+      isTargetBranchLong() {
+        return this.isBranchTitleLong(this.mr.targetBranch);
+      },
+    },
+    methods: {
+      isBranchTitleLong(branchTitle) {
+        return branchTitle.length > 32;
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-source-target">
+    <div class="normal">
+      <strong>
+        {{ s__("mrWidget|Request to merge") }}
+        <span
+          class="label-branch js-source-branch"
+          :class="{ 'label-truncated': isSourceBranchLong }"
+          :title="isSourceBranchLong ? mr.sourceBranch : ''"
+          data-placement="bottom"
+          :v-tooltip="isSourceBranchLong"
+          v-html="mr.sourceBranchLink"
+        >
+        </span>
+
+        <clipboard-button
+          :text="branchNameClipboardData"
+          :title="__('Copy branch name to clipboard')"
+        />
+
+        {{ s__("mrWidget|into") }}
+
+        <span
+          class="label-branch"
+          :v-tooltip="isTargetBranchLong"
+          :class="{ 'label-truncatedtooltip': isTargetBranchLong }"
+          :title="isTargetBranchLong ? mr.targetBranch : ''"
+          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">{{ commitsText }}</a>)
+      </span>
+    </div>
+
+    <div v-if="mr.isOpen">
+      <button
+        data-target="#modal_merge_info"
+        data-toggle="modal"
+        :disabled="mr.sourceBranchRemoved"
+        class="btn btn-sm btn-default inline js-check-out-branch"
+        type="button"
+      >
+        {{ s__("mrWidget|Check out branch") }}
+      </button>
+      <span class="dropdown prepend-left-10">
+        <button
+          type="button"
+          class="btn btn-sm inline dropdown-toggle"
+          data-toggle="dropdown"
+          aria-label="Download as"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <icon name="download" />
+          <i
+            class="fa fa-caret-down"
+            aria-hidden="true">
+          </i>
+        </button>
+        <ul class="dropdown-menu dropdown-menu-align-right">
+          <li>
+            <a
+              class="js-download-email-patches"
+              :href="mr.emailPatchesPath"
+              download
+            >
+              {{ s__("mrWidget|Email patches") }}
+            </a>
+          </li>
+          <li>
+            <a
+              class="js-download-plain-diff"
+              :href="mr.plainDiffPath"
+              download
+            >
+              {{ s__("mrWidget|Plain diff") }}
+            </a>
+          </li>
+        </ul>
+      </span>
+    </div>
+  </div>
+</template>

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

-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>
-  `,
-};

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

+<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>
+
+    <button
+      type="button"
+      class="btn-link btn-blank js-open-modal-help"
+      data-toggle="modal"
+      data-target="#modal_merge_info"
+    >
+      {{ s__("mrWidget|command line") }}
+    </button>
+  </section>
+</template>

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

 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',

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -11,8 +11,8 @@
 
 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 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';
 export { default as WidgetRelatedLinks } from './components/mr_widget_related_links.vue';

spec/features/merge_request/user_selects_branches_for_new_mr_spec.rb

@@ -61,7 +61,7 @@ describe 'Merge request > User selects branches for new MR', :js do
     fill_in "merge_request_title", with: "Orphaned MR test"
     click_button "Submit merge request"
 
-    click_link "Check out branch"
+    click_button "Check out branch"
 
     expect(page).to have_content 'git checkout -b orphaned-branch origin/orphaned-branch'
   end

spec/javascripts/vue_mr_widget/components/mr_widget_merge_help_spec.js

 import Vue from 'vue';
-import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help';
+import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
-const props = {
-  missingBranch: 'this-is-not-the-branch-you-are-looking-for',
-};
-const text = `If the ${props.missingBranch} branch exists in your local repository`;
+describe('MRWidgetMergeHelp', () => {
+  let vm;
+  let Component;
 
-const createComponent = () => {
-  const Component = Vue.extend(mergeHelpComponent);
-  return new Component({
-    el: document.createElement('div'),
-    propsData: props,
+  beforeEach(() => {
+    Component = Vue.extend(mergeHelpComponent);
   });
-};
 
-describe('MRWidgetMergeHelp', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { missingBranch } = mergeHelpComponent.props;
-      const MissingBranchTypeClass = missingBranch.type;
+  afterEach(() => {
+    vm.$destroy();
+  });
 
-      expect(new MissingBranchTypeClass() instanceof String).toBeTruthy();
-      expect(missingBranch.required).toBeFalsy();
-      expect(missingBranch.default).toEqual('');
+  describe('with missing branch', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        missingBranch: 'this-is-not-the-branch-you-are-looking-for',
       });
     });
 
-  describe('template', () => {
-    let vm;
-    let el;
+    it('renders missing branch information', () => {
+      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',
+      );
+    });
 
-    beforeEach(() => {
-      vm = createComponent();
-      el = vm.$el;
+    it('renders button to open help modal', () => {
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-target')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual('modal');
+    });
   });
 
-    it('should have the correct elements', () => {
-      expect(el.classList.contains('mr-widget-help')).toBeTruthy();
-      expect(el.textContent).toContain(text);
+  describe('without missing branch', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component);
     });
 
-    it('should not show missing branch name if missingBranch props is not provided', (done) => {
-      vm.missingBranch = null;
-      Vue.nextTick(() => {
-        expect(el.textContent).not.toContain(text);
-        done();
+    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('.js-open-modal-help').getAttribute('data-target')).toEqual('#modal_merge_info');
+      expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual('modal');
     });
   });
 });