overhaul dropdown-dependent states

app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue

@@ -8,14 +8,24 @@ export default {
   name: 'GkeMachineTypeDropdown',
   mixins: [gkeDropdownMixin],
   computed: {
-    ...mapState(['projectHasBillingEnabled', 'selectedZone', 'selectedMachineType']),
+    ...mapState([
+      'isValidatingProjectBilling',
+      'projectHasBillingEnabled',
+      'selectedZone',
+      'selectedMachineType',
+    ]),
     ...mapState({ items: 'machineTypes' }),
     ...mapGetters(['hasZone', 'hasMachineType']),
     allDropdownsSelected() {
       return this.projectHasBillingEnabled && this.hasZone && this.hasMachineType;
     },
     isDisabled() {
-      return !this.projectHasBillingEnabled || !this.selectedZone;
+      return (
+        this.isLoading ||
+        this.isValidatingProjectBilling ||
+        !this.projectHasBillingEnabled ||
+        !this.hasZone
+      );
     },
     toggleText() {
       if (this.isLoading) {
@@ -45,11 +55,15 @@ export default {
   },
   watch: {
     selectedZone() {
+      this.hasErrors = false;
+
+      if (this.hasZone) {
         this.isLoading = true;
 
         this.fetchMachineTypes()
           .then(this.fetchSuccessHandler)
           .catch(this.fetchFailureHandler);
+      }
     },
     selectedMachineType() {
       this.enableSubmit();

app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue

@@ -14,20 +14,17 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      isValidatingProjectBilling: false,
-    };
-  },
   computed: {
-    ...mapState(['selectedProject', 'projectHasBillingEnabled']),
+    ...mapState(['selectedProject', 'isValidatingProjectBilling', 'projectHasBillingEnabled']),
     ...mapState({ items: 'projects' }),
     ...mapGetters(['hasProject']),
     hasOneProject() {
       return this.items && this.items.length === 1;
     },
     isDisabled() {
-      return this.items && this.items.length < 2;
+      return (
+        this.isLoading || this.isValidatingProjectBilling || (this.items && this.items.length < 2)
+      );
     },
     toggleText() {
       if (this.isValidatingProjectBilling) {
@@ -103,17 +100,12 @@ export default {
   },
   watch: {
     selectedProject() {
-      this.isLoading = true;
-      this.isValidatingProjectBilling = true;
+      this.setIsValidatingProjectBilling(true);
 
       this.validateProjectBilling()
         .then(this.validateProjectBillingSuccessHandler)
         .catch(this.validateProjectBillingFailureHandler);
     },
-    projectHasBillingEnabled(billingEnabled) {
-      this.hasErrors = !billingEnabled;
-      this.isValidatingProjectBilling = false;
-    },
   },
   created() {
     this.isLoading = true;
@@ -123,7 +115,7 @@ export default {
       .catch(this.fetchFailureHandler);
   },
   methods: {
-    ...mapActions(['fetchProjects', 'validateProjectBilling']),
+    ...mapActions(['fetchProjects', 'setIsValidatingProjectBilling', 'validateProjectBilling']),
     ...mapActions({ setItem: 'setProject' }),
     fetchSuccessHandler() {
       if (this.defaultValue) {
@@ -140,10 +132,9 @@ export default {
       this.hasErrors = false;
     },
     validateProjectBillingSuccessHandler() {
-      this.isLoading = false;
+      this.hasErrors = !this.projectHasBillingEnabled;
     },
     validateProjectBillingFailureHandler(resp) {
-      this.isLoading = false;
       this.hasErrors = true;
 
       this.gapiError = resp.result ? resp.result.error.message : resp;

app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue

@@ -8,10 +8,16 @@ export default {
   name: 'GkeZoneDropdown',
   mixins: [gkeDropdownMixin],
   computed: {
-    ...mapState(['selectedProject', 'selectedZone', 'projects', 'projectHasBillingEnabled']),
+    ...mapState([
+      'selectedProject',
+      'selectedZone',
+      'projects',
+      'isValidatingProjectBilling',
+      'projectHasBillingEnabled',
+    ]),
     ...mapState({ items: 'zones' }),
     isDisabled() {
-      return !this.projectHasBillingEnabled;
+      return this.isLoading || this.isValidatingProjectBilling || !this.projectHasBillingEnabled;
     },
     toggleText() {
       if (this.isLoading) {
@@ -34,13 +40,16 @@ export default {
     },
   },
   watch: {
-    projectHasBillingEnabled(billingEnabled) {
-      if (!billingEnabled) return false;
+    isValidatingProjectBilling(isValidating) {
+      this.hasErrors = false;
+
+      if (!isValidating && this.projectHasBillingEnabled) {
         this.isLoading = true;
 
-      return this.fetchZones()
+        this.fetchZones()
           .then(this.fetchSuccessHandler)
           .catch(this.fetchFailureHandler);
+      }
     },
   },
   methods: {

app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js

@@ -31,6 +31,10 @@ export const setMachineType = ({ commit }, selectedMachineType) => {
   commit(types.SET_MACHINE_TYPE, selectedMachineType);
 };
 
+export const setIsValidatingProjectBilling = ({ commit }, isValidatingProjectBilling) => {
+  commit(types.SET_IS_VALIDATING_PROJECT_BILLING, isValidatingProjectBilling);
+};
+
 export const fetchProjects = ({ commit }) =>
   gapiResourceListRequest({
     resource: gapi.client.cloudresourcemanager.projects,
@@ -40,20 +44,25 @@ export const fetchProjects = ({ commit }) =>
     payloadKey: 'projects',
   });
 
-export const validateProjectBilling = ({ commit, state }) =>
+export const validateProjectBilling = ({ dispatch, commit, state }) =>
   new Promise((resolve, reject) => {
     const request = gapi.client.cloudbilling.projects.getBillingInfo({
       name: `projects/${state.selectedProject.projectId}`,
     });
 
+    commit(types.SET_ZONE, '');
+    commit(types.SET_MACHINE_TYPE, '');
+
     return request.then(
       resp => {
         const { billingEnabled } = resp.result;
 
         commit(types.SET_PROJECT_BILLING_STATUS, !!billingEnabled);
+        dispatch('setIsValidatingProjectBilling', false);
         resolve();
       },
       resp => {
+        dispatch('setIsValidatingProjectBilling', false);
         reject(resp);
       },
     );

app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js

 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECT_BILLING_STATUS = 'SET_PROJECT_BILLING_STATUS';
+export const SET_IS_VALIDATING_PROJECT_BILLING = 'SET_IS_VALIDATING_PROJECT_BILLING';
 export const SET_ZONE = 'SET_ZONE';
 export const SET_MACHINE_TYPE = 'SET_MACHINE_TYPE';
 export const SET_PROJECTS = 'SET_PROJECTS';

app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js

@@ -4,6 +4,9 @@ export default {
   [types.SET_PROJECT](state, selectedProject) {
     Object.assign(state, { selectedProject });
   },
+  [types.SET_IS_VALIDATING_PROJECT_BILLING](state, isValidatingProjectBilling) {
+    Object.assign(state, { isValidatingProjectBilling });
+  },
   [types.SET_PROJECT_BILLING_STATUS](state, projectHasBillingEnabled) {
     Object.assign(state, { projectHasBillingEnabled });
   },

app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js

@@ -5,6 +5,7 @@ export default () => ({
   },
   selectedZone: '',
   selectedMachineType: '',
+  isValidatingProjectBilling: null,
   projectHasBillingEnabled: null,
   projects: [],
   zones: [],