Add latest changes from gitlab-org/gitlab@master

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;