diff options
author | Dennis Tang <dtang@gitlab.com> | 2018-05-28 18:29:25 +0300 |
---|---|---|
committer | Dennis Tang <dtang@gitlab.com> | 2018-05-28 18:29:25 +0300 |
commit | 2e4bea09a6e7758764f4a180fdf4e78333cfe897 (patch) | |
tree | bd7e8406dd2c544eb24d8401c6214b5495d28baa /app | |
parent | 95a63a881673533e3fd44243297d1a81e19396b6 (diff) |
overhaul dropdown-dependent states
Diffstat (limited to 'app')
7 files changed, 59 insertions, 31 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 5cb1ae670dc..6be39702546 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 @@ -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.isLoading = true; + this.hasErrors = false; + + if (this.hasZone) { + this.isLoading = true; - this.fetchMachineTypes() - .then(this.fetchSuccessHandler) - .catch(this.fetchFailureHandler); + this.fetchMachineTypes() + .then(this.fetchSuccessHandler) + .catch(this.fetchFailureHandler); + } }, selectedMachineType() { this.enableSubmit(); diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue index 44ebdb12ada..f813a4625d6 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue +++ b/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; 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 43531813407..0c63ff5dc63 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 @@ -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; - this.isLoading = true; + isValidatingProjectBilling(isValidating) { + this.hasErrors = false; - return this.fetchZones() - .then(this.fetchSuccessHandler) - .catch(this.fetchFailureHandler); + if (!isValidating && this.projectHasBillingEnabled) { + this.isLoading = true; + + this.fetchZones() + .then(this.fetchSuccessHandler) + .catch(this.fetchFailureHandler); + } }, }, methods: { diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js index 409265175a4..4834a856271 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js +++ b/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); }, ); diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js index 98574289bc4..45a91efc2d9 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js @@ -1,5 +1,6 @@ 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'; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js index a9ff3b503f4..88a2c1b630d 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js +++ b/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 }); }, diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js index 4110377c0f4..9f3c473d4bc 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js @@ -5,6 +5,7 @@ export default () => ({ }, selectedZone: '', selectedMachineType: '', + isValidatingProjectBilling: null, projectHasBillingEnabled: null, projects: [], zones: [], |