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

* master: (30 commits)
  Resolve "Link to Clusters in Auto DevOps instead of Kubernetes service"
  Update CHANGELOG.md for 10.4.1
  Add a gRPC health check to ensure Gitaly is up
  Add formatted_data attribute to Git::WikiPage
  Avoid array indices to fixtures in JS specs
  Migrate .batch_lfs_pointers to Gitaly
  Updates `Revert this merge request` text
  Work around a bug in DatabaseCleaner when using the deletion strategy on MySQL
  Use the DatabaseCleaner 'deletion' strategy instead of 'truncation'
  Workaround a recaptcha pop-up that cannot be tested
  Moves more mr widget components into vue files Adds i18n Adds better test coverage
  Execute system hooks after-commit when executing project hooks
  Remove one Spinach job and add one RSpec job
  Migrate repository bundling to Gitaly
  Use limit for search count queries
  Fix offense in runners settings QA page object class
  Wait for runner until it registers itself in QA tests
  Fix static-analysis offenses in QA support class
  Add specific views / selectors for QA runners page
  Add views / selectors for pipeline show page object
  ...

6 files changed, 132 insertions, 100 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js
deleted file mode 100644
index 72e2eef974a..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import statusIcon from '../mr_widget_status_icon.vue';
-
-export default {
-  name: 'MRWidgetChecking',
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="loading" :show-disabled-button="true" />
-      <div class="media-body space-children">
-        <span class="bold">
-          Checking ability to merge automatically
-        </span>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
new file mode 100644
index 00000000000..04e1766b8c7
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -0,0 +1,23 @@
+<script>
+  import statusIcon from '../mr_widget_status_icon';
+
+  export default {
+    name: 'MRWidgetChecking',
+    components: {
+      statusIcon,
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="loading"
+      :show-disabled-button="true"
+    />
+    <div class="media-body space-children">
+      <span class="bold">
+        {{ s__("mrWidget|Checking ability to merge automatically") }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
deleted file mode 100644
index f91aae64347..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
-import statusIcon from '../mr_widget_status_icon.vue';
-
-export default {
-  name: 'MRWidgetClosed',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  components: {
-    'mr-widget-author-and-time': mrWidgetAuthorTime,
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="warning" />
-      <div class="media-body">
-        <mr-widget-author-and-time
-          actionText="Closed by"
-          :author="mr.metrics.closedBy"
-          :dateTitle="mr.metrics.closedAt"
-          :dateReadable="mr.metrics.readableClosedAt"
-        />
-        <section class="mr-info-list">
-          <p>
-            The changes were not merged into
-            <a
-              :href="mr.targetBranchPath"
-              class="label-branch">
-              {{mr.targetBranch}}</a>
-          </p>
-        </section>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
new file mode 100644
index 00000000000..8c0ce43c76c
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -0,0 +1,48 @@
+<script>
+  import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
+  import statusIcon from '../mr_widget_status_icon';
+
+  export default {
+    name: 'MRWidgetClosed',
+    components: {
+      mrWidgetAuthorTime,
+      statusIcon,
+    },
+    props: {
+      /* TODO: This is providing all store and service down when it
+      only needs metrics and targetBranch */
+      mr: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="warning"
+    />
+    <div class="media-body">
+      <mr-widget-author-time
+        :action-text="s__('mrWidget|Closed by')"
+        :author="mr.metrics.closedBy"
+        :date-title="mr.metrics.closedAt"
+        :date-readable="mr.metrics.readableClosedAt"
+      />
+
+      <section class="mr-info-list">
+        <p>
+          {{ s__("mrWidget|The changes were not merged into") }}
+          <a
+            :href="mr.targetBranchPath"
+            class="label-branch"
+          >
+            {{ mr.targetBranch }}
+          </a>
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
deleted file mode 100644
index 7a0e542c493..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import statusIcon from '../mr_widget_status_icon.vue';
-
-export default {
-  name: 'MRWidgetConflicts',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon
-        status="warning"
-        :show-disabled-button="true" />
-      <div class="media-body space-children">
-        <span
-          v-if="mr.shouldBeRebased"
-          class="bold">
-          Fast-forward merge is not possible.
-          To merge this request, first rebase locally.
-        </span>
-        <template v-else>
-          <span class="bold">
-            There are merge conflicts<span v-if="!mr.canMerge">.</span>
-            <span v-if="!mr.canMerge">
-              Resolve these conflicts or ask someone with write access to this repository to merge it locally
-            </span>
-          </span>
-          <a
-            v-if="mr.canMerge && mr.conflictResolutionPath"
-            :href="mr.conflictResolutionPath"
-            class="js-resolve-conflicts-button btn btn-default btn-xs">
-            Resolve conflicts
-          </a>
-          <a
-            v-if="mr.canMerge"
-            class="js-merge-locally-button btn btn-default btn-xs"
-            data-toggle="modal"
-            href="#modal_merge_info">
-            Merge locally
-          </a>
-        </template>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
new file mode 100644
index 00000000000..13b07f82330
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -0,0 +1,61 @@
+<script>
+  import statusIcon from '../mr_widget_status_icon';
+
+  export default {
+    name: 'MRWidgetConflicts',
+    components: {
+      statusIcon,
+    },
+    props: {
+      /* TODO: This is providing all store and service down when it
+      only needs a few props */
+      mr: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="warning"
+      :show-disabled-button="true"
+    />
+
+    <div class="media-body space-children">
+      <span
+        v-if="mr.shouldBeRebased"
+        class="bold"
+      >
+        {{ s__(`mrWidget|Fast-forward merge is not possible.
+To merge this request, first rebase locally.`) }}
+      </span>
+      <template v-else>
+        <span class="bold">
+          {{ s__("mrWidget|There are merge conflicts") }}<span v-if="!mr.canMerge">.</span>
+          <span v-if="!mr.canMerge">
+            {{ s__(`mrWidget|Resolve these conflicts or ask someone
+            with write access to this repository to merge it locally`) }}
+          </span>
+        </span>
+        <a
+          v-if="mr.canMerge && mr.conflictResolutionPath"
+          :href="mr.conflictResolutionPath"
+          class="js-resolve-conflicts-button btn btn-default btn-xs"
+        >
+          {{ s__("mrWidget|Resolve conflicts") }}
+        </a>
+        <button
+          v-if="mr.canMerge"
+          class="js-merge-locally-button btn btn-default btn-xs"
+          data-toggle="modal"
+          data-target="#modal_merge_info"
+        >
+          {{ s__("mrWidget|Merge locally") }}
+        </button>
+      </template>
+    </div>
+  </div>
+</template>