use watchers instead of eventHub

3 files changed, 11 insertions, 14 deletions

diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
index 5e208bec9e8..d65600117c0 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
@@ -7,7 +7,6 @@ import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_searc
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 
-import eventHub from '../eventhub';
 import store from '../stores';
 
 export default {
@@ -79,9 +78,13 @@ export default {
       return s__('ClusterIntegration|No machine types matched your search');
     },
   },
-  created() {
-    eventHub.$on('zoneSelected', this.fetchMachineTypes);
-    eventHub.$on('machineTypeSelected', this.enableSubmit);
+  watch: {
+    selectedZone() {
+      this.fetchMachineTypes();
+    },
+    selectedMachineType() {
+      this.enableSubmit();
+    },
   },
   methods: {
     ...mapActions(['setMachineType', 'getMachineTypes']),
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
index 7ba949b6989..f27cee3bf07 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
@@ -7,7 +7,6 @@ import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_searc
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 
-import eventHub from '../eventhub';
 import store from '../stores';
 
 export default {
@@ -70,8 +69,10 @@ export default {
       return s__('ClusterIntegration|No zones matched your search');
     },
   },
-  created() {
-    eventHub.$on('projectSelected', this.fetchZones);
+  watch: {
+    selectedProject() {
+      this.fetchZones();
+    },
   },
   methods: {
     ...mapActions(['setZone', 'getZones']),
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/actions.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/actions.js
index 507cc5f8b62..dba12ac28ca 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/actions.js
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/actions.js
@@ -3,24 +3,17 @@ import Flash from '~/flash';
 import { s__, sprintf } from '~/locale';
 
 import * as types from './mutation_types';
-import eventHub from '../eventhub';
 
 export const setProject = ({ commit }, selectedProject) => {
   commit(types.SET_PROJECT, selectedProject);
-
-  eventHub.$emit('projectSelected');
 };
 
 export const setZone = ({ commit }, selectedZone) => {
   commit(types.SET_ZONE, selectedZone);
-
-  eventHub.$emit('zoneSelected');
 };
 
 export const setMachineType = ({ commit }, selectedMachineType) => {
   commit(types.SET_MACHINE_TYPE, selectedMachineType);
-
-  eventHub.$emit('machineTypeSelected');
 };
 
 export const getProjects = ({ commit }) =>