From 324aa1413ef00071f62a2159608f113670b7775a Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 20 Apr 2017 09:04:06 +0000
Subject: Refactor into .vue files part 2

---
 .../components/environment_external_url.js         | 30 ---------
 .../components/environment_external_url.vue        | 33 ++++++++++
 .../environments/components/environment_item.js    |  6 +-
 .../environments/components/environment_stop.js    | 66 -------------------
 .../environments/components/environment_stop.vue   | 73 ++++++++++++++++++++++
 .../components/environment_terminal_button.js      | 37 -----------
 .../components/environment_terminal_button.vue     | 39 ++++++++++++
 .../environments/environment_external_url_spec.js  |  2 +-
 .../environments/environment_stop_spec.js          |  2 +-
 .../environment_terminal_button_spec.js            |  2 +-
 10 files changed, 151 insertions(+), 139 deletions(-)
 delete mode 100644 app/assets/javascripts/environments/components/environment_external_url.js
 create mode 100644 app/assets/javascripts/environments/components/environment_external_url.vue
 delete mode 100644 app/assets/javascripts/environments/components/environment_stop.js
 create mode 100644 app/assets/javascripts/environments/components/environment_stop.vue
 delete mode 100644 app/assets/javascripts/environments/components/environment_terminal_button.js
 create mode 100644 app/assets/javascripts/environments/components/environment_terminal_button.vue

diff --git a/app/assets/javascripts/environments/components/environment_external_url.js b/app/assets/javascripts/environments/components/environment_external_url.js
deleted file mode 100644
index d79b916c360..00000000000
--- a/app/assets/javascripts/environments/components/environment_external_url.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Renders the external url link in environments table.
- */
-export default {
-  props: {
-    externalUrl: {
-      type: String,
-      default: '',
-    },
-  },
-
-  computed: {
-    title() {
-      return 'Open';
-    },
-  },
-
-  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>
-    </a>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
new file mode 100644
index 00000000000..eaeec2bc53c
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -0,0 +1,33 @@
+<script>
+/**
+ * Renders the external url link in environments table.
+ */
+export default {
+  props: {
+    externalUrl: {
+      type: String,
+      required: true,
+    },
+  },
+
+  computed: {
+    title() {
+      return 'Open';
+    },
+  },
+};
+</script>
+<template>
+  <a
+    class="btn external-url has-tooltip"
+    data-container="body"
+    target="_blank"
+    rel="noopener noreferrer nofollow"
+    :title="title"
+    :aria-label="title"
+    :href="externalUrl">
+    <i
+      class="fa fa-external-link"
+      aria-hidden="true" />
+  </a>
+</template>
diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
index d9b49287dec..915f0ca4ccb 100644
--- a/app/assets/javascripts/environments/components/environment_item.js
+++ b/app/assets/javascripts/environments/components/environment_item.js
@@ -1,10 +1,10 @@
 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';
diff --git a/app/assets/javascripts/environments/components/environment_stop.js b/app/assets/javascripts/environments/components/environment_stop.js
deleted file mode 100644
index 9e5465c1785..00000000000
--- a/app/assets/javascripts/environments/components/environment_stop.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/* global Flash */
-/* eslint-disable no-new, no-alert */
-/**
- * Renders the stop "button" that allows stop an environment.
- * Used in environments table.
- */
-import eventHub from '../event_hub';
-
-export default {
-  props: {
-    stopUrl: {
-      type: String,
-      default: '',
-    },
-
-    service: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-
-  computed: {
-    title() {
-      return 'Stop';
-    },
-  },
-
-  methods: {
-    onClick() {
-      if (confirm('Are you sure you want to stop this environment?')) {
-        this.isLoading = true;
-
-        $(this.$el).tooltip('destroy');
-
-        this.service.postAction(this.retryUrl)
-        .then(() => {
-          this.isLoading = false;
-          eventHub.$emit('refreshEnvironments');
-        })
-        .catch(() => {
-          this.isLoading = false;
-          new Flash('An error occured while making the request.', 'alert');
-        });
-      }
-    },
-  },
-
-  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>
-    </button>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
new file mode 100644
index 00000000000..11e9aff7b92
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -0,0 +1,73 @@
+<script>
+/* global Flash */
+/* eslint-disable no-new, no-alert */
+/**
+ * Renders the stop "button" that allows stop an environment.
+ * Used in environments table.
+ */
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    stopUrl: {
+      type: String,
+      default: '',
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  computed: {
+    title() {
+      return 'Stop';
+    },
+  },
+
+  methods: {
+    onClick() {
+      if (confirm('Are you sure you want to stop this environment?')) {
+        this.isLoading = true;
+
+        $(this.$el).tooltip('destroy');
+
+        this.service.postAction(this.retryUrl)
+        .then(() => {
+          this.isLoading = false;
+          eventHub.$emit('refreshEnvironments');
+        })
+        .catch(() => {
+          this.isLoading = false;
+          new Flash('An error occured while making the request.', 'alert');
+        });
+      }
+    },
+  },
+};
+</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
+      v-if="isLoading"
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true" />
+  </button>
+</template>
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js b/app/assets/javascripts/environments/components/environment_terminal_button.js
deleted file mode 100644
index 092a50a0d6f..00000000000
--- a/app/assets/javascripts/environments/components/environment_terminal_button.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Renders a terminal button to open a web terminal.
- * Used in environments table.
- */
-import terminalIconSvg from 'icons/_icon_terminal.svg';
-
-export default {
-  props: {
-    terminalPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-
-  data() {
-    return {
-      terminalIconSvg,
-    };
-  },
-
-  computed: {
-    title() {
-      return 'Terminal';
-    },
-  },
-
-  template: `
-    <a class="btn terminal-button has-tooltip"
-      data-container="body"
-      :title="title"
-      :aria-label="title"
-      :href="terminalPath">
-      ${terminalIconSvg}
-    </a>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue
new file mode 100644
index 00000000000..c8c1f17d4d8
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -0,0 +1,39 @@
+<script>
+/**
+ * Renders a terminal button to open a web terminal.
+ * Used in environments table.
+ */
+import terminalIconSvg from 'icons/_icon_terminal.svg';
+
+export default {
+  props: {
+    terminalPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      terminalIconSvg,
+    };
+  },
+
+  computed: {
+    title() {
+      return 'Terminal';
+    },
+  },
+};
+</script>
+<template>
+  <a
+    class="btn terminal-button has-tooltip"
+    data-container="body"
+    :title="title"
+    :aria-label="title"
+    :href="terminalPath"
+    v-html="terminalIconSvg">
+  </a>
+</template>
diff --git a/spec/javascripts/environments/environment_external_url_spec.js b/spec/javascripts/environments/environment_external_url_spec.js
index 9af218a27ff..056d68a26e9 100644
--- a/spec/javascripts/environments/environment_external_url_spec.js
+++ b/spec/javascripts/environments/environment_external_url_spec.js
@@ -1,5 +1,5 @@
 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;
diff --git a/spec/javascripts/environments/environment_stop_spec.js b/spec/javascripts/environments/environment_stop_spec.js
index 01055e3f255..942e4aaabd4 100644
--- a/spec/javascripts/environments/environment_stop_spec.js
+++ b/spec/javascripts/environments/environment_stop_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import stopComp from '~/environments/components/environment_stop';
+import stopComp from '~/environments/components/environment_stop.vue';
 
 describe('Stop Component', () => {
   let StopComponent;
diff --git a/spec/javascripts/environments/environment_terminal_button_spec.js b/spec/javascripts/environments/environment_terminal_button_spec.js
index be2289edc2b..858472af4b6 100644
--- a/spec/javascripts/environments/environment_terminal_button_spec.js
+++ b/spec/javascripts/environments/environment_terminal_button_spec.js
@@ -1,5 +1,5 @@
 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;
-- 
cgit v1.2.1