Refactor into .vue files part 2

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

+<script>
 /**
  * Renders the external url link in environments table.
  */
@@ -5,7 +6,7 @@ export default {
   props: {
     externalUrl: {
       type: String,
-      default: '',
+      required: true,
     },
   },
 
@@ -14,17 +15,19 @@ export default {
       return 'Open';
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <a
     class="btn external-url has-tooltip"
     data-container="body"
-      :href="externalUrl"
     target="_blank"
     rel="noopener noreferrer nofollow"
     :title="title"
-      :aria-label="title">
-      <i class="fa fa-external-link" aria-hidden="true"></i>
+    :aria-label="title"
+    :href="externalUrl">
+    <i
+      class="fa fa-external-link"
+      aria-hidden="true" />
   </a>
-  `,
-};
+</template>

app/assets/javascripts/environments/components/environment_item.js

 import Timeago from 'timeago.js';
 import '../../lib/utils/text_utility';
 import ActionsComponent from './environment_actions';
-import ExternalUrlComponent from './environment_external_url';
-import StopComponent from './environment_stop';
+import ExternalUrlComponent from './environment_external_url.vue';
+import StopComponent from './environment_stop.vue';
 import RollbackComponent from './environment_rollback';
-import TerminalButtonComponent from './environment_terminal_button';
+import TerminalButtonComponent from './environment_terminal_button.vue';
 import MonitoringButtonComponent from './environment_monitoring';
 import CommitComponent from '../../vue_shared/components/commit';
 import eventHub from '../event_hub';

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

+<script>
 /* global Flash */
 /* eslint-disable no-new, no-alert */
 /**
@@ -50,17 +51,23 @@ export default {
       }
     },
   },
-
-  template: `
-    <button type="button"
+};
+</script>
+<template>
+  <button
+    type="button"
     class="btn stop-env-link has-tooltip"
     data-container="body"
     @click="onClick"
     :disabled="isLoading"
     :title="title"
     :aria-label="title">
-      <i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
-      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+    <i
+      class="fa fa-stop stop-env-icon"
+      aria-hidden="true" />
+    <i
+      v-if="isLoading"
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true" />
   </button>
-  `,
-};
+</template>

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

+<script>
 /**
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
@@ -24,14 +25,15 @@ export default {
       return 'Terminal';
     },
   },
-
-  template: `
-    <a class="btn terminal-button has-tooltip"
+};
+</script>
+<template>
+  <a
+    class="btn terminal-button has-tooltip"
     data-container="body"
     :title="title"
     :aria-label="title"
-      :href="terminalPath">
-      ${terminalIconSvg}
+    :href="terminalPath"
+    v-html="terminalIconSvg">
   </a>
-  `,
-};
+</template>

spec/javascripts/environments/environment_external_url_spec.js

 import Vue from 'vue';
-import externalUrlComp from '~/environments/components/environment_external_url';
+import externalUrlComp from '~/environments/components/environment_external_url.vue';
 
 describe('External URL Component', () => {
   let ExternalUrlComponent;

spec/javascripts/environments/environment_stop_spec.js

 import Vue from 'vue';
-import stopComp from '~/environments/components/environment_stop';
+import stopComp from '~/environments/components/environment_stop.vue';
 
 describe('Stop Component', () => {
   let StopComponent;

spec/javascripts/environments/environment_terminal_button_spec.js

 import Vue from 'vue';
-import terminalComp from '~/environments/components/environment_terminal_button';
+import terminalComp from '~/environments/components/environment_terminal_button.vue';
 
 describe('Stop Component', () => {
   let TerminalComponent;