Merge branch 'move-pipeline-failed-vue-component' into 'master'

Move PipelineFailed vue component

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

5 files changed, 38 insertions, 23 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
deleted file mode 100644
index 4d9a2ca530f..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import statusIcon from '../mr_widget_status_icon.vue';
-
-export default {
-  name: 'MRWidgetPipelineBlocked',
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="warning" :show-disabled-button="true" />
-      <div class="media-body space-children">
-        <span class="bold">
-          The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure
-        </span>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
new file mode 100644
index 00000000000..8d55477929f
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
@@ -0,0 +1,25 @@
+<script>
+import statusIcon from '../mr_widget_status_icon.vue';
+
+export default {
+  name: 'PipelineFailed',
+  components: {
+    statusIcon,
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="warning"
+      :show-disabled-button="true"
+    />
+    <div class="media-body space-children">
+      <span class="bold">
+        {{ s__(`mrWidget|The pipeline for this merge request failed.
+Please retry the job or push a new commit to fix the failure`) }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 86d52f89d38..3b5c973e4a0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -31,7 +31,7 @@ export { default as ReadyToMergeState } from './components/states/ready_to_merge
 export { default as ShaMismatchState } from './components/states/sha_mismatch.vue';
 export { default as UnresolvedDiscussionsState } from './components/states/unresolved_discussions.vue';
 export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked.vue';
-export { default as PipelineFailedState } from './components/states/mr_widget_pipeline_failed';
+export { default as PipelineFailedState } from './components/states/pipeline_failed.vue';
 export { default as MergeWhenPipelineSucceedsState } from './components/states/mr_widget_merge_when_pipeline_succeeds.vue';
 export { default as RebaseState } from './components/states/mr_widget_rebase.vue';
 export { default as AutoMergeFailed } from './components/states/mr_widget_auto_merge_failed.vue';
diff --git a/changelogs/unreleased/move-pipeline-failed-vue-component.yml b/changelogs/unreleased/move-pipeline-failed-vue-component.yml
new file mode 100644
index 00000000000..38d42134876
--- /dev/null
+++ b/changelogs/unreleased/move-pipeline-failed-vue-component.yml
@@ -0,0 +1,5 @@
+---
+title: Move PipelineFailed vue component
+merge_request: 18277
+author: George Tsiolis
+type: performance
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js
index 78bac1c61a5..5573d7c5c93 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js
@@ -1,16 +1,19 @@
 import Vue from 'vue';
-import pipelineFailedComponent from '~/vue_merge_request_widget/components/states/mr_widget_pipeline_failed';
+import PipelineFailed from '~/vue_merge_request_widget/components/states/pipeline_failed.vue';
+import { removeBreakLine } from 'spec/helpers/vue_component_helper';
 
-describe('MRWidgetPipelineFailed', () => {
+describe('PipelineFailed', () => {
   describe('template', () => {
-    const Component = Vue.extend(pipelineFailedComponent);
+    const Component = Vue.extend(PipelineFailed);
     const vm = new Component({
       el: document.createElement('div'),
     });
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure');
+      expect(
+        removeBreakLine(vm.$el.innerText).trim(),
+      ).toContain('The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure');
     });
   });
 });