Refactor deploy boards into vue files

app/assets/javascripts/environments/components/deploy_board_component.js → app/assets/javascripts/environments/components/deploy_board_component.vue

+<script>
 /* eslint-disable no-new, no-undef */
 /* global Flash */
 /**
@@ -22,7 +23,7 @@ import statusCodes from '~/lib/utils/http_status';
 import '~/flash';
 import '~/lib/utils/common_utils';
 import deployBoardSvg from 'empty_states/icons/_deploy_board.svg';
-import instanceComponent from './deploy_board_instance_component';
+import instanceComponent from './deploy_board_instance_component.vue';
 
 export default {
 
@@ -160,12 +161,15 @@ export default {
       return '<projectname>';
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <div class="js-deploy-board deploy-board">
 
     <div v-if="isLoading">
-        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+      <i
+        class="fa fa-spinner fa-spin"
+        aria-hidden="true" />
     </div>
 
     <div v-if="canRenderDeployBoard">
@@ -190,8 +194,11 @@ export default {
         </div>
       </section>
 
-        <section class="deploy-board-actions" v-if="deployBoardData.rollback_url || deployBoardData.abort_url">
-          <a class="btn"
+      <section
+        class="deploy-board-actions"
+        v-if="deployBoardData.rollback_url || deployBoardData.abort_url">
+        <a
+          class="btn"
           data-method="post"
           rel="nofollow"
           v-if="deployBoardData.rollback_url"
@@ -199,7 +206,8 @@ export default {
           Rollback
         </a>
 
-          <a class="btn btn-red btn-inverted"
+        <a
+          class="btn btn-red btn-inverted"
           data-method="post"
           rel="nofollow"
           v-if="deployBoardData.abort_url"
@@ -210,8 +218,9 @@ export default {
     </div>
 
     <div v-if="canRenderEmptyState">
-        <section class="deploy-board-empty-state-svg">
-          ${deployBoardSvg}
+      <section
+        class="deploy-board-empty-state-svg"
+        v-html="deployBoardSvg">
       </section>
 
       <section class="deploy-board-empty-state-text">
@@ -223,9 +232,10 @@ export default {
       </section>
     </div>
 
-      <div v-if="canRenderErrorState" class="deploy-board-error-message">
+    <div
+      v-if="canRenderErrorState"
+      class="deploy-board-error-message">
       We can't fetch the data right now. Please try again later.
     </div>
   </div>
-  `,
-};
+</script>

app/assets/javascripts/environments/components/deploy_board_instance_component.js → app/assets/javascripts/environments/components/deploy_board_instance_component.vue

+<script>
 /**
  * An instance in deploy board is represented by a square in this mockup:
  * https://gitlab.com/gitlab-org/gitlab-ce/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png
@@ -50,8 +51,9 @@ export default {
       return cssClassName;
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <div
     class="deploy-board-instance has-tooltip"
     :class="cssClass"
@@ -59,5 +61,4 @@ export default {
     data-toggle="tooltip"
     data-placement="top">
   </div>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environments_table.vue

@@ -3,7 +3,7 @@
  * Render environments table.
  */
 import EnvironmentTableRowComponent from './environment_item.vue';
-import DeployBoard from './deploy_board_component';
+import DeployBoard from './deploy_board_component.vue';
 
 export default {
   components: {

spec/javascripts/environments/deploy_board_component_spec.js

 import Vue from 'vue';
-import DeployBoard from '~/environments/components/deploy_board_component';
+import DeployBoard from '~/environments/components/deploy_board_component.vue';
 import Service from '~/environments/services/environments_service';
 
 const { deployBoardMockData, invalidDeployBoardMockData } = require('./mock_data');

spec/javascripts/environments/deploy_board_instance_component_spec.js

 import Vue from 'vue';
-import DeployBoardInstance from '~/environments/components/deploy_board_instance_component';
+import DeployBoardInstance from '~/environments/components/deploy_board_instance_component.vue';
 
 describe('Deploy Board Instance', () => {
   let DeployBoardInstanceComponent;