convert pipeline empty state to vue template

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

@@ -4,7 +4,7 @@ import PipelinesTableComponent from '../../vue_shared/components/pipelines_table
 import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
 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';
+import EmptyState from '../../vue_pipelines_index/components/empty_state.vue';
 import ErrorState from '../../vue_pipelines_index/components/error_state';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';

app/assets/javascripts/vue_pipelines_index/components/empty_state.js → app/assets/javascripts/vue_pipelines_index/components/empty_state.vue

+<script>
 import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
 
 export default {
@@ -7,27 +8,27 @@ export default {
       required: true,
     },
   },
+  data: () => ({ pipelinesEmptyStateSVG }),
+};
+</script>
 
-  template: `
-    <div class="row empty-state">
-      <div class="col-xs-12">
-        <div class="svg-content">
-          ${pipelinesEmptyStateSVG}
-        </div>
-      </div>
+<template>
+  <div class="row empty-state">
+    <div class="col-xs-12">
+      <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
+    </div>
 
-      <div class="col-xs-12 text-center">
-        <div class="text-content">
-          <h4>Build with confidence</h4>
-          <p>
-            Continous Integration can help catch bugs by running your tests automatically,
-            while Continuous Deployment can help you deliver code to your product environment.
-          </p>
-          <a :href="helpPagePath" class="btn btn-info">
-            Get started with Pipelines
-          </a>
-        </div>
+    <div class="col-xs-12 text-center">
+      <div class="text-content">
+        <h4>Build with confidence</h4>
+        <p>
+          Continous Integration can help catch bugs by running your tests automatically,
+          while Continuous Deployment can help you deliver code to your product environment.
+        </p>
+        <a :href="helpPagePath" class="btn btn-info">
+          Get started with Pipelines
+        </a>
       </div>
     </div>
-  `,
-};
+  </div>
+</template>

app/assets/javascripts/vue_pipelines_index/pipelines.js

@@ -4,7 +4,7 @@ import PipelinesService from './services/pipelines_service';
 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';
+import EmptyState from './components/empty_state.vue';
 import ErrorState from './components/error_state';
 import NavigationTabs from './components/navigation_tabs';
 import NavigationControls from './components/nav_controls';

spec/javascripts/vue_pipelines_index/empty_state_spec.js

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