diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-24 00:08:35 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-24 00:08:35 +0300 |
commit | 24256212ea84e6fb6509f6fb317a2d2bac3d0d06 (patch) | |
tree | e4300d70d8e724179d9de657a68d88462aaaf04a /app/assets/javascripts/create_cluster | |
parent | d933bc5a8738d24898c5a82cc72ee9bd050425e6 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/create_cluster')
4 files changed, 30 insertions, 15 deletions
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue index a9d9f0224e3..d6deda25752 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue +++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue @@ -16,9 +16,6 @@ export default { ]), ...mapState({ items: 'machineTypes' }), ...mapGetters(['hasZone', 'hasMachineType']), - allDropdownsSelected() { - return this.projectHasBillingEnabled && this.hasZone && this.hasMachineType; - }, isDisabled() { return ( this.isLoading || @@ -65,22 +62,10 @@ export default { .catch(this.fetchFailureHandler); } }, - selectedMachineType() { - this.enableSubmit(); - }, }, methods: { ...mapActions(['fetchMachineTypes']), ...mapActions({ setItem: 'setMachineType' }), - enableSubmit() { - if (this.allDropdownsSelected) { - const submitButtonEl = document.querySelector('.js-gke-cluster-creation-submit'); - - if (submitButtonEl) { - submitButtonEl.removeAttribute('disabled'); - } - } - }, }, }; </script> diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_submit_button.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_submit_button.vue new file mode 100644 index 00000000000..a7e08a5e97f --- /dev/null +++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_submit_button.vue @@ -0,0 +1,18 @@ +<script> +import { mapGetters } from 'vuex'; + +export default { + computed: { + ...mapGetters(['hasValidData']), + }, +}; +</script> +<template> + <button + type="submit" + :disabled="!hasValidData" + class="js-gke-cluster-creation-submit btn btn-success" + > + {{ s__('ClusterIntegration|Create Kubernetes cluster') }} + </button> +</template> diff --git a/app/assets/javascripts/create_cluster/gke_cluster/index.js b/app/assets/javascripts/create_cluster/gke_cluster/index.js index 729b9404b64..5a64eb09cad 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/index.js +++ b/app/assets/javascripts/create_cluster/gke_cluster/index.js @@ -4,6 +4,10 @@ import Flash from '~/flash'; import GkeProjectIdDropdown from './components/gke_project_id_dropdown.vue'; import GkeZoneDropdown from './components/gke_zone_dropdown.vue'; import GkeMachineTypeDropdown from './components/gke_machine_type_dropdown.vue'; +import GkeSubmitButton from './components/gke_submit_button.vue'; + +import store from './store'; + import * as CONSTANTS from './constants'; const mountComponent = (entryPoint, component, componentName, extraProps = {}) => { @@ -14,6 +18,7 @@ const mountComponent = (entryPoint, component, componentName, extraProps = {}) = return new Vue({ el, + store, components: { [componentName]: component, }, @@ -50,6 +55,10 @@ const mountGkeMachineTypeDropdown = () => { ); }; +const mountGkeSubmitButton = () => { + mountComponent('.js-gke-cluster-creation-submit-container', GkeSubmitButton, 'gke-submit-button'); +}; + const gkeDropdownErrorHandler = () => { Flash(CONSTANTS.GCP_API_ERROR); }; @@ -72,6 +81,7 @@ const initializeGapiClient = () => { mountGkeProjectIdDropdown(); mountGkeZoneDropdown(); mountGkeMachineTypeDropdown(); + mountGkeSubmitButton(); }) .catch(gkeDropdownErrorHandler); }; diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js b/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js index f9e2e2f74fb..4d4cd223832 100644 --- a/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js +++ b/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js @@ -1,3 +1,5 @@ export const hasProject = state => Boolean(state.selectedProject.projectId); export const hasZone = state => Boolean(state.selectedZone); export const hasMachineType = state => Boolean(state.selectedMachineType); +export const hasValidData = (state, getters) => + Boolean(state.projectHasBillingEnabled) && getters.hasZone && getters.hasMachineType; |