convert pipeline error state to vue template

app/assets/javascripts/commit/pipelines/pipelines_table.js

@@ -5,7 +5,7 @@ import PipelinesService from '../../vue_pipelines_index/services/pipelines_servi
 import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
 import eventHub from '../../vue_pipelines_index/event_hub';
 import EmptyState from '../../vue_pipelines_index/components/empty_state.vue';
-import ErrorState from '../../vue_pipelines_index/components/error_state';
+import ErrorState from '../../vue_pipelines_index/components/error_state.vue';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 import Poll from '../../lib/utils/poll';

app/assets/javascripts/vue_pipelines_index/components/error_state.js

-import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
-
-export default {
-  template: `
-    <div class="row empty-state js-pipelines-error-state">
-      <div class="col-xs-12">
-        <div class="svg-content">
-          ${pipelinesErrorStateSVG}
-        </div>
-      </div>
-
-      <div class="col-xs-12 text-center">
-        <div class="text-content">
-          <h4>The API failed to fetch the pipelines.</h4>
-        </div>
-      </div>
-    </div>
-  `,
-};

app/assets/javascripts/vue_pipelines_index/components/error_state.vue

+<script>
+import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
+
+export default {
+  data: () => ({ pipelinesErrorStateSVG }),
+};
+</script>
+
+<template>
+  <div class="row empty-state js-pipelines-error-state">
+    <div class="col-xs-12">
+      <div class="svg-content" v-html="pipelinesErrorStateSVG" />
+    </div>
+
+    <div class="col-xs-12 text-center">
+      <div class="text-content">
+        <h4>The API failed to fetch the pipelines.</h4>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_pipelines_index/pipelines.js

@@ -5,7 +5,7 @@ import eventHub from './event_hub';
 import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
 import TablePaginationComponent from '../vue_shared/components/table_pagination';
 import EmptyState from './components/empty_state.vue';
-import ErrorState from './components/error_state';
+import ErrorState from './components/error_state.vue';
 import NavigationTabs from './components/navigation_tabs';
 import NavigationControls from './components/nav_controls';
 import Poll from '../lib/utils/poll';

spec/javascripts/vue_pipelines_index/error_state_spec.js

 import Vue from 'vue';
-import errorStateComp from '~/vue_pipelines_index/components/error_state';
+import errorStateComp from '~/vue_pipelines_index/components/error_state.vue';
 
 describe('Pipelines Error State', () => {
   let component;