Use vue event emitter to update the data from the parent component

Fix the service and where we instantiate it.

Adds an eventhub

Remove debugger statement

Use hub

Changes after review

Use harmony syntax in mock data file instead of cjs

8 files changed, 46 insertions, 45 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js
index 0b315b9890c..fb02e5ef60d 100644
--- a/app/assets/javascripts/environments/components/environment.js
+++ b/app/assets/javascripts/environments/components/environment.js
@@ -3,6 +3,7 @@
 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'));
@@ -66,33 +67,11 @@ export default 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}`;
-
-    this.service = new EnvironmentsService(endpoint);
-
-    this.isLoading = true;
-
-    return this.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);
   },
 
   methods: {
@@ -112,6 +91,32 @@ export default 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.', 'alert');
+        });
+    },
   },
 
   template: `
diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js
index 3ce2f376027..36ffc0e17a2 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js
+++ b/app/assets/javascripts/environments/components/environment_actions.js
@@ -2,6 +2,7 @@
 /* eslint-disable no-new */
 
 import playIconSvg from 'icons/_icon_play.svg';
+import eventHub from '../event_hub';
 
 export default {
   props: {
@@ -31,6 +32,7 @@ export default {
       this.service.postAction(endpoint)
       .then(() => {
         this.isLoading = false;
+        eventHub.$emit('refreshEnvironments');
       })
       .catch(() => {
         this.isLoading = false;
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js b/app/assets/javascripts/environments/components/environment_rollback.js
index e16e2563e8d..cca684598dc 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.js
+++ b/app/assets/javascripts/environments/components/environment_rollback.js
@@ -6,6 +6,7 @@
  *
  * Makes a post request when the button is clicked.
  */
+import eventHub from '../event_hub';
 
 export default {
   props: {
@@ -38,6 +39,7 @@ export default {
       this.service.postAction(this.retryUrl)
       .then(() => {
         this.isLoading = false;
+        eventHub.$emit('refreshEnvironments');
       })
       .catch(() => {
         this.isLoading = false;
diff --git a/app/assets/javascripts/environments/components/environment_stop.js b/app/assets/javascripts/environments/components/environment_stop.js
index b092ffa14a8..5404d647745 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js
+++ b/app/assets/javascripts/environments/components/environment_stop.js
@@ -4,6 +4,7 @@
  * Renders the stop "button" that allows stop an environment.
  * Used in environments table.
  */
+import eventHub from '../event_hub';
 
 export default {
   props: {
@@ -32,6 +33,7 @@ export default {
         this.service.postAction(this.retryUrl)
         .then(() => {
           this.isLoading = false;
+          eventHub.$emit('refreshEnvironments');
         })
         .catch(() => {
           this.isLoading = false;
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/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js
index ef642e3e78c..76296c83d11 100644
--- a/app/assets/javascripts/environments/services/environments_service.js
+++ b/app/assets/javascripts/environments/services/environments_service.js
@@ -6,8 +6,8 @@ export default class EnvironmentsService {
     this.environments = Vue.resource(endpoint);
   }
 
-  get() {
-    return this.environments.get();
+  get(scope, page) {
+    return this.environments.get({ scope, page });
   }
 
   postAction(endpoint) {
diff --git a/spec/features/projects/environments/environments_spec.rb b/spec/features/projects/environments/environments_spec.rb
index 169695b0759..641e2cf7402 100644
--- a/spec/features/projects/environments/environments_spec.rb
+++ b/spec/features/projects/environments/environments_spec.rb
@@ -156,13 +156,6 @@ feature 'Environments page', :feature, :js do
             expect(page).to have_selector('.stop-env-link')
           end
 
-          # TODO: FIX ME, we won't open a new page, how to test this?
-          # 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/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,
-};