Merge branch '20450-fix-ujs-actions' into 'master'

Use a button and a post request instead of UJS links - part 1 - Environments

See merge request !9688

28 files changed, 375 insertions, 199 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js
index 2cb48dde628..0923ce6b550 100644
--- a/app/assets/javascripts/environments/components/environment.js
+++ b/app/assets/javascripts/environments/components/environment.js
@@ -1,16 +1,17 @@
 /* eslint-disable no-param-reassign, no-new */
 /* global Flash */
+import EnvironmentsService from '../services/environments_service';
+import EnvironmentTable from './environments_table';
+import EnvironmentsStore from '../stores/environments_store';
+import eventHub from '../event_hub';
 
 const Vue = window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
-const EnvironmentsService = require('../services/environments_service');
-const EnvironmentTable = require('./environments_table');
-const EnvironmentsStore = require('../stores/environments_store');
 require('../../vue_shared/components/table_pagination');
 require('../../lib/utils/common_utils');
 require('../../vue_shared/vue_resource_interceptor');
 
-module.exports = Vue.component('environment-component', {
+export default Vue.component('environment-component', {
 
   components: {
     'environment-table': EnvironmentTable,
@@ -66,33 +67,15 @@ module.exports = Vue.component('environment-component', {
    * Toggles loading property.
    */
   created() {
-    const scope = gl.utils.getParameterByName('scope') || this.visibility;
-    const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
-
-    const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
-
-    const service = new EnvironmentsService(endpoint);
-
-    this.isLoading = true;
-
-    return service.get()
-      .then(resp => ({
-        headers: resp.headers,
-        body: resp.json(),
-      }))
-      .then((response) => {
-        this.store.storeAvailableCount(response.body.available_count);
-        this.store.storeStoppedCount(response.body.stopped_count);
-        this.store.storeEnvironments(response.body.environments);
-        this.store.setPagination(response.headers);
-      })
-      .then(() => {
-        this.isLoading = false;
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occurred while fetching the environments.', 'alert');
-      });
+    this.service = new EnvironmentsService(this.endpoint);
+
+    this.fetchEnvironments();
+
+    eventHub.$on('refreshEnvironments', this.fetchEnvironments);
+  },
+
+  beforeDestroyed() {
+    eventHub.$off('refreshEnvironments');
   },
 
   methods: {
@@ -112,6 +95,32 @@ module.exports = Vue.component('environment-component', {
       gl.utils.visitUrl(param);
       return param;
     },
+
+    fetchEnvironments() {
+      const scope = gl.utils.getParameterByName('scope') || this.visibility;
+      const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
+
+      this.isLoading = true;
+
+      return this.service.get(scope, pageNumber)
+        .then(resp => ({
+          headers: resp.headers,
+          body: resp.json(),
+        }))
+        .then((response) => {
+          this.store.storeAvailableCount(response.body.available_count);
+          this.store.storeStoppedCount(response.body.stopped_count);
+          this.store.storeEnvironments(response.body.environments);
+          this.store.setPagination(response.headers);
+        })
+        .then(() => {
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.isLoading = false;
+          new Flash('An error occurred while fetching the environments.');
+        });
+    },
   },
 
   template: `
@@ -144,7 +153,7 @@ module.exports = Vue.component('environment-component', {
 
       <div class="content-list environments-container">
         <div class="environments-list-loading text-center" v-if="isLoading">
-          <i class="fa fa-spinner fa-spin"></i>
+          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
         </div>
 
         <div class="blank-state blank-state-no-icon"
@@ -173,7 +182,8 @@ module.exports = Vue.component('environment-component', {
           <environment-table
             :environments="state.environments"
             :can-create-deployment="canCreateDeploymentParsed"
-            :can-read-environment="canReadEnvironmentParsed"/>
+            :can-read-environment="canReadEnvironmentParsed"
+            :service="service"/>
         </div>
 
         <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js
index 15e3f8823d2..455a8819549 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js
+++ b/app/assets/javascripts/environments/components/environment_actions.js
@@ -1,41 +1,71 @@
-const Vue = require('vue');
-const playIconSvg = require('icons/_icon_play.svg');
+/* global Flash */
+/* eslint-disable no-new */
 
-module.exports = Vue.component('actions-component', {
+import playIconSvg from 'icons/_icon_play.svg';
+import eventHub from '../event_hub';
+
+export default {
   props: {
     actions: {
       type: Array,
       required: false,
       default: () => [],
     },
+
+    service: {
+      type: Object,
+      required: true,
+    },
   },
 
   data() {
-    return { playIconSvg };
+    return {
+      playIconSvg,
+      isLoading: false,
+    };
+  },
+
+  methods: {
+    onClickAction(endpoint) {
+      this.isLoading = true;
+
+      this.service.postAction(endpoint)
+      .then(() => {
+        this.isLoading = false;
+        eventHub.$emit('refreshEnvironments');
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occured while making the request.');
+      });
+    },
   },
 
   template: `
     <div class="btn-group" role="group">
-      <button class="dropdown btn btn-default dropdown-new" data-toggle="dropdown">
+      <button
+        class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container"
+        data-toggle="dropdown"
+        :disabled="isLoading">
         <span>
-          <span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
-          <i class="fa fa-caret-down"></i>
+          <span v-html="playIconSvg"></span>
+          <i class="fa fa-caret-down" aria-hidden="true"></i>
+          <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
         </span>
 
       <ul class="dropdown-menu dropdown-menu-align-right">
         <li v-for="action in actions">
-          <a :href="action.play_path"
-            data-method="post"
-            rel="nofollow"
-            class="js-manual-action-link">
+          <button
+            @click="onClickAction(action.play_path)"
+            class="js-manual-action-link no-btn">
             ${playIconSvg}
             <span>
               {{action.name}}
             </span>
-          </a>
+          </button>
         </li>
       </ul>
     </button>
   </div>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/components/environment_external_url.js b/app/assets/javascripts/environments/components/environment_external_url.js
index 2599bba3c59..a554998f52c 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.js
+++ b/app/assets/javascripts/environments/components/environment_external_url.js
@@ -1,9 +1,7 @@
 /**
  * Renders the external url link in environments table.
  */
-const Vue = require('vue');
-
-module.exports = Vue.component('external-url-component', {
+export default {
   props: {
     externalUrl: {
       type: String,
@@ -12,8 +10,12 @@ module.exports = Vue.component('external-url-component', {
   },
 
   template: `
-    <a class="btn external_url" :href="externalUrl" target="_blank">
-      <i class="fa fa-external-link"></i>
+    <a
+      class="btn external_url"
+      :href="externalUrl"
+      target="_blank"
+      title="Environment external URL">
+      <i class="fa fa-external-link" aria-hidden="true"></i>
     </a>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
index 7f4e070b229..93919d41c60 100644
--- a/app/assets/javascripts/environments/components/environment_item.js
+++ b/app/assets/javascripts/environments/components/environment_item.js
@@ -1,13 +1,11 @@
-const Vue = require('vue');
-const Timeago = require('timeago.js');
-
-require('../../lib/utils/text_utility');
-require('../../vue_shared/components/commit');
-const ActionsComponent = require('./environment_actions');
-const ExternalUrlComponent = require('./environment_external_url');
-const StopComponent = require('./environment_stop');
-const RollbackComponent = require('./environment_rollback');
-const TerminalButtonComponent = require('./environment_terminal_button');
+import Timeago from 'timeago.js';
+import ActionsComponent from './environment_actions';
+import ExternalUrlComponent from './environment_external_url';
+import StopComponent from './environment_stop';
+import RollbackComponent from './environment_rollback';
+import TerminalButtonComponent from './environment_terminal_button';
+import '../../lib/utils/text_utility';
+import '../../vue_shared/components/commit';
 
 /**
  * Envrionment Item Component
@@ -17,7 +15,7 @@ const TerminalButtonComponent = require('./environment_terminal_button');
 
 const timeagoInstance = new Timeago();
 
-module.exports = Vue.component('environment-item', {
+export default {
 
   components: {
     'commit-component': gl.CommitComponent,
@@ -46,6 +44,11 @@ module.exports = Vue.component('environment-item', {
       required: false,
       default: false,
     },
+
+    service: {
+      type: Object,
+      required: true,
+    },
   },
 
   computed: {
@@ -489,22 +492,25 @@ module.exports = Vue.component('environment-item', {
       <td class="environments-actions">
         <div v-if="!model.isFolder" class="btn-group pull-right" role="group">
           <actions-component v-if="hasManualActions && canCreateDeployment"
+            :service="service"
             :actions="manualActions"/>
 
           <external-url-component v-if="externalURL && canReadEnvironment"
             :external-url="externalURL"/>
 
           <stop-component v-if="hasStopAction && canCreateDeployment"
-            :stop-url="model.stop_path"/>
+            :stop-url="model.stop_path"
+            :service="service"/>
 
           <terminal-button-component v-if="model && model.terminal_path"
             :terminal-path="model.terminal_path"/>
 
           <rollback-component v-if="canRetry && canCreateDeployment"
             :is-last-deployment="isLastDeployment"
-            :retry-url="retryUrl"/>
+            :retry-url="retryUrl"
+            :service="service"/>
         </div>
       </td>
     </tr>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js b/app/assets/javascripts/environments/components/environment_rollback.js
index daf126eb4e8..baa15d9e5b5 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.js
+++ b/app/assets/javascripts/environments/components/environment_rollback.js
@@ -1,10 +1,14 @@
+/* global Flash */
+/* eslint-disable no-new */
 /**
  * Renders Rollback or Re deploy button in environments table depending
- * of the provided property `isLastDeployment`
+ * of the provided property `isLastDeployment`.
+ *
+ * Makes a post request when the button is clicked.
  */
-const Vue = require('vue');
+import eventHub from '../event_hub';
 
-module.exports = Vue.component('rollback-component', {
+export default {
   props: {
     retryUrl: {
       type: String,
@@ -15,16 +19,49 @@ module.exports = Vue.component('rollback-component', {
       type: Boolean,
       default: true,
     },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  methods: {
+    onClick() {
+      this.isLoading = true;
+
+      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.');
+      });
+    },
   },
 
   template: `
-    <a class="btn" :href="retryUrl" data-method="post" rel="nofollow">
+    <button type="button"
+      class="btn"
+      @click="onClick"
+      :disabled="isLoading">
+
       <span v-if="isLastDeployment">
         Re-deploy
       </span>
       <span v-else>
         Rollback
       </span>
-    </a>
+
+      <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.js b/app/assets/javascripts/environments/components/environment_stop.js
index 96983a19568..5404d647745 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js
+++ b/app/assets/javascripts/environments/components/environment_stop.js
@@ -1,24 +1,56 @@
+/* global Flash */
+/* eslint-disable no-new, no-alert */
 /**
  * Renders the stop "button" that allows stop an environment.
  * Used in environments table.
  */
-const Vue = require('vue');
+import eventHub from '../event_hub';
 
-module.exports = Vue.component('stop-component', {
+export default {
   props: {
     stopUrl: {
       type: String,
       default: '',
     },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  methods: {
+    onClick() {
+      if (confirm('Are you sure you want to stop this environment?')) {
+        this.isLoading = true;
+
+        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: `
-    <a class="btn stop-env-link"
-      :href="stopUrl"
-      data-confirm="Are you sure you want to stop this environment?"
-      data-method="post"
-      rel="nofollow">
+    <button type="button"
+      class="btn stop-env-link"
+      @click="onClick"
+      :disabled="isLoading"
+      title="Stop Environment">
       <i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
-    </a>
+      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+    </button>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js b/app/assets/javascripts/environments/components/environment_terminal_button.js
index e86607e78f4..66a71faa02f 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.js
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.js
@@ -2,13 +2,13 @@
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
  */
-const Vue = require('vue');
-const terminalIconSvg = require('icons/_icon_terminal.svg');
+import terminalIconSvg from 'icons/_icon_terminal.svg';
 
-module.exports = Vue.component('terminal-button-component', {
+export default {
   props: {
     terminalPath: {
       type: String,
+      required: false,
       default: '',
     },
   },
@@ -19,8 +19,9 @@ module.exports = Vue.component('terminal-button-component', {
 
   template: `
     <a class="btn terminal-button"
+      title="Open web terminal"
       :href="terminalPath">
       ${terminalIconSvg}
     </a>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/components/environments_table.js b/app/assets/javascripts/environments/components/environments_table.js
index 4088d63be80..5f07b612b91 100644
--- a/app/assets/javascripts/environments/components/environments_table.js
+++ b/app/assets/javascripts/environments/components/environments_table.js
@@ -1,11 +1,9 @@
 /**
  * Render environments table.
  */
-const Vue = require('vue');
-const EnvironmentItem = require('./environment_item');
-
-module.exports = Vue.component('environment-table-component', {
+import EnvironmentItem from './environment_item';
 
+export default {
   components: {
     'environment-item': EnvironmentItem,
   },
@@ -28,6 +26,11 @@ module.exports = Vue.component('environment-table-component', {
       required: false,
       default: false,
     },
+
+    service: {
+      type: Object,
+      required: true,
+    },
   },
 
   template: `
@@ -48,9 +51,10 @@ module.exports = Vue.component('environment-table-component', {
           <tr is="environment-item"
             :model="model"
             :can-create-deployment="canCreateDeployment"
-            :can-read-environment="canReadEnvironment"></tr>
+            :can-read-environment="canReadEnvironment"
+            :service="service"></tr>
         </template>
       </tbody>
     </table>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/environments_bundle.js b/app/assets/javascripts/environments/environments_bundle.js
index 7bbba91bc10..8d963b335cf 100644
--- a/app/assets/javascripts/environments/environments_bundle.js
+++ b/app/assets/javascripts/environments/environments_bundle.js
@@ -1,4 +1,4 @@
-const EnvironmentsComponent = require('./components/environment');
+import EnvironmentsComponent from './components/environment';
 
 $(() => {
   window.gl = window.gl || {};
diff --git a/app/assets/javascripts/environments/event_hub.js b/app/assets/javascripts/environments/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/environments/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
index d2ca465351a..f939eccf246 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
@@ -1,4 +1,4 @@
-const EnvironmentsFolderComponent = require('./environments_folder_view');
+import EnvironmentsFolderComponent from './environments_folder_view';
 
 $(() => {
   window.gl = window.gl || {};
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.js b/app/assets/javascripts/environments/folder/environments_folder_view.js
index 2a9d0492d7a..7abcf6dbbea 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.js
@@ -1,16 +1,16 @@
 /* eslint-disable no-param-reassign, no-new */
 /* global Flash */
+import EnvironmentsService from '../services/environments_service';
+import EnvironmentTable from '../components/environments_table';
+import EnvironmentsStore from '../stores/environments_store';
 
 const Vue = window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
-const EnvironmentsService = require('../services/environments_service');
-const EnvironmentTable = require('../components/environments_table');
-const EnvironmentsStore = require('../stores/environments_store');
 require('../../vue_shared/components/table_pagination');
 require('../../lib/utils/common_utils');
 require('../../vue_shared/vue_resource_interceptor');
 
-module.exports = Vue.component('environment-folder-view', {
+export default Vue.component('environment-folder-view', {
 
   components: {
     'environment-table': EnvironmentTable,
@@ -88,11 +88,11 @@ module.exports = Vue.component('environment-folder-view', {
 
     const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
 
-    const service = new EnvironmentsService(endpoint);
+    this.service = new EnvironmentsService(endpoint);
 
     this.isLoading = true;
 
-    return service.get()
+    return this.service.get()
       .then(resp => ({
         headers: resp.headers,
         body: resp.json(),
@@ -168,13 +168,12 @@ module.exports = Vue.component('environment-folder-view', {
             :can-read-environment="canReadEnvironmentParsed"
             :play-icon-svg="playIconSvg"
             :terminal-icon-svg="terminalIconSvg"
-            :commit-icon-svg="commitIconSvg">
-          </environment-table>
+            :commit-icon-svg="commitIconSvg"
+            :service="service"/>
 
           <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
             :change="changePage"
-            :pageInfo="state.paginationInformation">
-          </table-pagination>
+            :pageInfo="state.paginationInformation"/>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js
index effc6c4c838..76296c83d11 100644
--- a/app/assets/javascripts/environments/services/environments_service.js
+++ b/app/assets/javascripts/environments/services/environments_service.js
@@ -1,13 +1,16 @@
-const Vue = require('vue');
+/* eslint-disable class-methods-use-this */
+import Vue from 'vue';
 
-class EnvironmentsService {
+export default class EnvironmentsService {
   constructor(endpoint) {
     this.environments = Vue.resource(endpoint);
   }
 
-  get() {
-    return this.environments.get();
+  get(scope, page) {
+    return this.environments.get({ scope, page });
   }
-}
 
-module.exports = EnvironmentsService;
+  postAction(endpoint) {
+    return Vue.http.post(endpoint, {}, { emulateJSON: true });
+  }
+}
diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js
index 15cd9bde08e..d3fe3872c56 100644
--- a/app/assets/javascripts/environments/stores/environments_store.js
+++ b/app/assets/javascripts/environments/stores/environments_store.js
@@ -1,11 +1,12 @@
-require('~/lib/utils/common_utils');
+import '~/lib/utils/common_utils';
+
 /**
  * Environments Store.
  *
  * Stores received environments, count of stopped environments and count of
  * available environments.
  */
-class EnvironmentsStore {
+export default class EnvironmentsStore {
   constructor() {
     this.state = {};
     this.state.environments = [];
@@ -86,5 +87,3 @@ class EnvironmentsStore {
     return count;
   }
 }
-
-module.exports = EnvironmentsStore;
diff --git a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
index d3229f9f730..4157fefddc9 100644
--- a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
+++ b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
@@ -6,10 +6,6 @@ Vue.http.interceptors.push((request, next) => {
   Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1;
 
   next((response) => {
-    if (typeof response.data === 'string') {
-      response.data = JSON.parse(response.data);
-    }
-
     Vue.activeResources--;
   });
 });
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 0e2b8dba780..73a5da715f2 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -141,6 +141,14 @@
         margin-right: 0;
       }
     }
+
+    .no-btn {
+      border: none;
+      background: none;
+      outline: none;
+      width: 100%;
+      text-align: left;
+    }
   }
 }
 
diff --git a/spec/features/projects/environments/environments_spec.rb b/spec/features/projects/environments/environments_spec.rb
index 25f31b423b8..641e2cf7402 100644
--- a/spec/features/projects/environments/environments_spec.rb
+++ b/spec/features/projects/environments/environments_spec.rb
@@ -111,10 +111,8 @@ feature 'Environments page', :feature, :js do
           find('.js-dropdown-play-icon-container').click
           expect(page).to have_content(action.name.humanize)
 
-          expect { click_link(action.name.humanize) }
+          expect { find('.js-manual-action-link').click }
             .not_to change { Ci::Pipeline.count }
-
-          expect(action.reload).to be_pending
         end
 
         scenario 'does show build name and id' do
@@ -158,12 +156,6 @@ feature 'Environments page', :feature, :js do
             expect(page).to have_selector('.stop-env-link')
           end
 
-          scenario 'starts build when stop button clicked' do
-            find('.stop-env-link').click
-
-            expect(page).to have_content('close_app')
-          end
-
           context 'for reporter' do
             let(:role) { :reporter }
 
diff --git a/spec/javascripts/environments/environment_actions_spec.js b/spec/javascripts/environments/environment_actions_spec.js
index d50d45d295e..85b73f1d4e2 100644
--- a/spec/javascripts/environments/environment_actions_spec.js
+++ b/spec/javascripts/environments/environment_actions_spec.js
@@ -1,14 +1,16 @@
-const ActionsComponent = require('~/environments/components/environment_actions');
+import Vue from 'vue';
+import actionsComp from '~/environments/components/environment_actions';
 
 describe('Actions Component', () => {
-  preloadFixtures('static/environments/element.html.raw');
+  let ActionsComponent;
+  let actionsMock;
+  let spy;
+  let component;
 
   beforeEach(() => {
-    loadFixtures('static/environments/element.html.raw');
-  });
+    ActionsComponent = Vue.extend(actionsComp);
 
-  it('should render a dropdown with the provided actions', () => {
-    const actionsMock = [
+    actionsMock = [
       {
         name: 'bar',
         play_path: 'https://gitlab.com/play',
@@ -19,18 +21,27 @@ describe('Actions Component', () => {
       },
     ];
 
-    const component = new ActionsComponent({
-      el: document.querySelector('.test-dom-element'),
+    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
+    component = new ActionsComponent({
       propsData: {
         actions: actionsMock,
+        service: {
+          postAction: spy,
+        },
       },
-    });
+    }).$mount();
+  });
 
+  it('should render a dropdown with the provided actions', () => {
     expect(
       component.$el.querySelectorAll('.dropdown-menu li').length,
     ).toEqual(actionsMock.length);
-    expect(
-      component.$el.querySelector('.dropdown-menu li a').getAttribute('href'),
-    ).toEqual(actionsMock[0].play_path);
+  });
+
+  it('should call the service when an action is clicked', () => {
+    component.$el.querySelector('.dropdown').click();
+    component.$el.querySelector('.js-manual-action-link').click();
+
+    expect(spy).toHaveBeenCalledWith(actionsMock[0].play_path);
   });
 });
diff --git a/spec/javascripts/environments/environment_external_url_spec.js b/spec/javascripts/environments/environment_external_url_spec.js
index 393dbb5aae0..9af218a27ff 100644
--- a/spec/javascripts/environments/environment_external_url_spec.js
+++ b/spec/javascripts/environments/environment_external_url_spec.js
@@ -1,19 +1,20 @@
-const ExternalUrlComponent = require('~/environments/components/environment_external_url');
+import Vue from 'vue';
+import externalUrlComp from '~/environments/components/environment_external_url';
 
 describe('External URL Component', () => {
-  preloadFixtures('static/environments/element.html.raw');
+  let ExternalUrlComponent;
+
   beforeEach(() => {
-    loadFixtures('static/environments/element.html.raw');
+    ExternalUrlComponent = Vue.extend(externalUrlComp);
   });
 
   it('should link to the provided externalUrl prop', () => {
     const externalURL = 'https://gitlab.com';
     const component = new ExternalUrlComponent({
-      el: document.querySelector('.test-dom-element'),
       propsData: {
         externalUrl: externalURL,
       },
-    });
+    }).$mount();
 
     expect(component.$el.getAttribute('href')).toEqual(externalURL);
     expect(component.$el.querySelector('fa-external-link')).toBeDefined();
diff --git a/spec/javascripts/environments/environment_item_spec.js b/spec/javascripts/environments/environment_item_spec.js
index 7fea80ed799..4d42de4d549 100644
--- a/spec/javascripts/environments/environment_item_spec.js
+++ b/spec/javascripts/environments/environment_item_spec.js
@@ -1,10 +1,12 @@
-window.timeago = require('timeago.js');
-const EnvironmentItem = require('~/environments/components/environment_item');
+import 'timeago.js';
+import Vue from 'vue';
+import environmentItemComp from '~/environments/components/environment_item';
 
 describe('Environment item', () => {
-  preloadFixtures('static/environments/table.html.raw');
+  let EnvironmentItem;
+
   beforeEach(() => {
-    loadFixtures('static/environments/table.html.raw');
+    EnvironmentItem = Vue.extend(environmentItemComp);
   });
 
   describe('When item is folder', () => {
@@ -21,13 +23,13 @@ describe('Environment item', () => {
       };
 
       component = new EnvironmentItem({
-        el: document.querySelector('tr#environment-row'),
         propsData: {
           model: mockItem,
           canCreateDeployment: false,
           canReadEnvironment: true,
+          service: {},
         },
-      });
+      }).$mount();
     });
 
     it('Should render folder icon and name', () => {
@@ -109,13 +111,13 @@ describe('Environment item', () => {
       };
 
       component = new EnvironmentItem({
-        el: document.querySelector('tr#environment-row'),
         propsData: {
           model: environment,
           canCreateDeployment: true,
           canReadEnvironment: true,
+          service: {},
         },
-      });
+      }).$mount();
     });
 
     it('should render environment name', () => {
diff --git a/spec/javascripts/environments/environment_rollback_spec.js b/spec/javascripts/environments/environment_rollback_spec.js
index 4a596baad09..7cb39d9df03 100644
--- a/spec/javascripts/environments/environment_rollback_spec.js
+++ b/spec/javascripts/environments/environment_rollback_spec.js
@@ -1,47 +1,59 @@
-const RollbackComponent = require('~/environments/components/environment_rollback');
+import Vue from 'vue';
+import rollbackComp from '~/environments/components/environment_rollback';
 
 describe('Rollback Component', () => {
-  preloadFixtures('static/environments/element.html.raw');
-
   const retryURL = 'https://gitlab.com/retry';
+  let RollbackComponent;
+  let spy;
 
   beforeEach(() => {
-    loadFixtures('static/environments/element.html.raw');
+    RollbackComponent = Vue.extend(rollbackComp);
+    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
   });
 
-  it('Should link to the provided retryUrl', () => {
+  it('Should render Re-deploy label when isLastDeployment is true', () => {
     const component = new RollbackComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,
         isLastDeployment: true,
+        service: {
+          postAction: spy,
+        },
       },
-    });
+    }).$mount();
 
-    expect(component.$el.getAttribute('href')).toEqual(retryURL);
+    expect(component.$el.querySelector('span').textContent).toContain('Re-deploy');
   });
 
-  it('Should render Re-deploy label when isLastDeployment is true', () => {
+  it('Should render Rollback label when isLastDeployment is false', () => {
     const component = new RollbackComponent({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,
-        isLastDeployment: true,
+        isLastDeployment: false,
+        service: {
+          postAction: spy,
+        },
       },
-    });
+    }).$mount();
 
-    expect(component.$el.querySelector('span').textContent).toContain('Re-deploy');
+    expect(component.$el.querySelector('span').textContent).toContain('Rollback');
   });
 
-  it('Should render Rollback label when isLastDeployment is false', () => {
+  it('should call the service when the button is clicked', () => {
     const component = new RollbackComponent({
-      el: document.querySelector('.test-dom-element'),
       propsData: {
         retryUrl: retryURL,
         isLastDeployment: false,
+        service: {
+          postAction: spy,
+        },
       },
-    });
+    }).$mount();
 
-    expect(component.$el.querySelector('span').textContent).toContain('Rollback');
+    component.$el.click();
+
+    expect(spy).toHaveBeenCalledWith(retryURL);
   });
 });
diff --git a/spec/javascripts/environments/environment_spec.js b/spec/javascripts/environments/environment_spec.js
index edd0cad32d0..9601575577e 100644
--- a/spec/javascripts/environments/environment_spec.js
+++ b/spec/javascripts/environments/environment_spec.js
@@ -1,7 +1,7 @@
-const Vue = require('vue');
-require('~/flash');
-const EnvironmentsComponent = require('~/environments/components/environment');
-const { environment } = require('./mock_data');
+import Vue from 'vue';
+import '~/flash';
+import EnvironmentsComponent from '~/environments/components/environment';
+import { environment } from './mock_data';
 
 describe('Environment', () => {
   preloadFixtures('static/environments/environments.html.raw');
diff --git a/spec/javascripts/environments/environment_stop_spec.js b/spec/javascripts/environments/environment_stop_spec.js
index 5ca65b1debc..8f79b88f3df 100644
--- a/spec/javascripts/environments/environment_stop_spec.js
+++ b/spec/javascripts/environments/environment_stop_spec.js
@@ -1,28 +1,34 @@
-const StopComponent = require('~/environments/components/environment_stop');
+import Vue from 'vue';
+import stopComp from '~/environments/components/environment_stop';
 
 describe('Stop Component', () => {
-  preloadFixtures('static/environments/element.html.raw');
-
-  let stopURL;
+  let StopComponent;
   let component;
+  let spy;
+  const stopURL = '/stop';
 
   beforeEach(() => {
-    loadFixtures('static/environments/element.html.raw');
+    StopComponent = Vue.extend(stopComp);
+    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
+    spyOn(window, 'confirm').and.returnValue(true);
 
-    stopURL = '/stop';
     component = new StopComponent({
-      el: document.querySelector('.test-dom-element'),
       propsData: {
         stopUrl: stopURL,
+        service: {
+          postAction: spy,
+        },
       },
-    });
+    }).$mount();
   });
 
-  it('should link to the provided URL', () => {
-    expect(component.$el.getAttribute('href')).toEqual(stopURL);
+  it('should render a button to stop the environment', () => {
+    expect(component.$el.tagName).toEqual('BUTTON');
+    expect(component.$el.getAttribute('title')).toEqual('Stop Environment');
   });
 
-  it('should have a data-confirm attribute', () => {
-    expect(component.$el.getAttribute('data-confirm')).toEqual('Are you sure you want to stop this environment?');
+  it('should call the service when an action is clicked', () => {
+    component.$el.click();
+    expect(spy).toHaveBeenCalled();
   });
 });
diff --git a/spec/javascripts/environments/environment_table_spec.js b/spec/javascripts/environments/environment_table_spec.js
index be4330b5012..3df967848a7 100644
--- a/spec/javascripts/environments/environment_table_spec.js
+++ b/spec/javascripts/environments/environment_table_spec.js
@@ -1,4 +1,5 @@
-const EnvironmentTable = require('~/environments/components/environments_table');
+import Vue from 'vue';
+import environmentTableComp from '~/environments/components/environments_table';
 
 describe('Environment item', () => {
   preloadFixtures('static/environments/element.html.raw');
@@ -16,14 +17,17 @@ describe('Environment item', () => {
       },
     };
 
+    const EnvironmentTable = Vue.extend(environmentTableComp);
+
     const component = new EnvironmentTable({
       el: document.querySelector('.test-dom-element'),
       propsData: {
         environments: [{ mockItem }],
         canCreateDeployment: false,
         canReadEnvironment: true,
+        service: {},
       },
-    });
+    }).$mount();
 
     expect(component.$el.tagName).toEqual('TABLE');
   });
diff --git a/spec/javascripts/environments/environment_terminal_button_spec.js b/spec/javascripts/environments/environment_terminal_button_spec.js
new file mode 100644
index 00000000000..b07aa4e1745
--- /dev/null
+++ b/spec/javascripts/environments/environment_terminal_button_spec.js
@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import terminalComp from '~/environments/components/environment_terminal_button';
+
+describe('Stop Component', () => {
+  let TerminalComponent;
+  let component;
+  const terminalPath = '/path';
+
+  beforeEach(() => {
+    TerminalComponent = Vue.extend(terminalComp);
+
+    component = new TerminalComponent({
+      propsData: {
+        terminalPath,
+      },
+    }).$mount();
+  });
+
+  it('should render a link to open a web terminal with the provided path', () => {
+    expect(component.$el.tagName).toEqual('A');
+    expect(component.$el.getAttribute('title')).toEqual('Open web terminal');
+    expect(component.$el.getAttribute('href')).toEqual(terminalPath);
+  });
+});
diff --git a/spec/javascripts/environments/environments_store_spec.js b/spec/javascripts/environments/environments_store_spec.js
index 77e182b3830..115d84b50f5 100644
--- a/spec/javascripts/environments/environments_store_spec.js
+++ b/spec/javascripts/environments/environments_store_spec.js
@@ -1,5 +1,5 @@
-const Store = require('~/environments/stores/environments_store');
-const { environmentsList, serverData } = require('./mock_data');
+import Store from '~/environments/stores/environments_store';
+import { environmentsList, serverData } from './mock_data';
 
 (() => {
   describe('Store', () => {
diff --git a/spec/javascripts/environments/folder/environments_folder_view_spec.js b/spec/javascripts/environments/folder/environments_folder_view_spec.js
index d1335b5b304..43a217a67f5 100644
--- a/spec/javascripts/environments/folder/environments_folder_view_spec.js
+++ b/spec/javascripts/environments/folder/environments_folder_view_spec.js
@@ -1,7 +1,7 @@
-const Vue = require('vue');
-require('~/flash');
-const EnvironmentsFolderViewComponent = require('~/environments/folder/environments_folder_view');
-const { environmentsList } = require('../mock_data');
+import Vue from 'vue';
+import '~/flash';
+import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view';
+import { environmentsList } from '../mock_data';
 
 describe('Environments Folder View', () => {
   preloadFixtures('static/environments/environments_folder_view.html.raw');
diff --git a/spec/javascripts/environments/mock_data.js b/spec/javascripts/environments/mock_data.js
index 5c395c6b2d8..30861481cc5 100644
--- a/spec/javascripts/environments/mock_data.js
+++ b/spec/javascripts/environments/mock_data.js
@@ -1,4 +1,4 @@
-const environmentsList = [
+export const environmentsList = [
   {
     name: 'DEV',
     size: 1,
@@ -30,7 +30,7 @@ const environmentsList = [
   },
 ];
 
-const serverData = [
+export const serverData = [
   {
     name: 'DEV',
     size: 1,
@@ -67,7 +67,7 @@ const serverData = [
   },
 ];
 
-const environment = {
+export const environment = {
   name: 'DEV',
   size: 1,
   latest: {
@@ -84,9 +84,3 @@ const environment = {
     updated_at: '2017-01-31T10:53:46.894Z',
   },
 };
-
-module.exports = {
-  environmentsList,
-  environment,
-  serverData,
-};