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

8 files changed, 213 insertions, 91 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>
   `,
-});
+};