validate project billing status after selection

3 files changed, 66 insertions, 15 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 cc4d863a989..5cb1ae670dc 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,14 @@ export default {
   name: 'GkeMachineTypeDropdown',
   mixins: [gkeDropdownMixin],
   computed: {
-    ...mapState(['selectedProject', 'selectedZone', 'selectedMachineType']),
+    ...mapState(['projectHasBillingEnabled', 'selectedZone', 'selectedMachineType']),
     ...mapState({ items: 'machineTypes' }),
-    ...mapGetters(['hasProject', 'hasZone', 'hasMachineType']),
+    ...mapGetters(['hasZone', 'hasMachineType']),
     allDropdownsSelected() {
-      return this.hasProject && this.hasZone && this.hasMachineType;
+      return this.projectHasBillingEnabled && this.hasZone && this.hasMachineType;
     },
     isDisabled() {
-      return !this.selectedProject || !this.selectedZone;
+      return !this.projectHasBillingEnabled || !this.selectedZone;
     },
     toggleText() {
       if (this.isLoading) {
@@ -26,7 +26,7 @@ export default {
         return this.selectedMachineType;
       }
 
-      if (!this.hasProject && !this.hasZone) {
+      if (!this.projectHasBillingEnabled && !this.hasZone) {
         return s__('ClusterIntegration|Select project and zone to choose machine type');
       }
 
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 a322b7c375e..28440da635b 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,8 +14,13 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isValidatingProjectBilling: false,
+    };
+  },
   computed: {
-    ...mapState(['selectedProject']),
+    ...mapState(['selectedProject', 'projectHasBillingEnabled']),
     ...mapState({ items: 'projects' }),
     ...mapGetters(['hasProject']),
     hasOneProject() {
@@ -25,6 +30,10 @@ export default {
       return this.items && this.items.length < 2;
     },
     toggleText() {
+      if (this.isValidatingProjectBilling) {
+        return s__('ClusterIntegration|Validating project billing status');
+      }
+
       if (this.isLoading) {
         return s__('ClusterIntegration|Fetching projects');
       }
@@ -42,7 +51,7 @@ export default {
     helpText() {
       let message;
       if (this.hasErrors) {
-        message = this.gapiError;
+        return this.errorMessage;
       }
 
       if (!this.items) {
@@ -67,12 +76,45 @@ export default {
       );
     },
     errorMessage() {
+      if (!this.projectHasBillingEnabled) {
+        if (this.gapiError) {
+          return s__(
+            'ClusterIntegration|We could not verify that one of your projects on GCP has billing enabled. Please try again.',
+          );
+        }
+
+        return sprintf(
+          s__(
+            'Please <a href=%{linkToBilling} target="_blank" rel="noopener noreferrer">enable billing for one of your projects to be able to create a Kubernetes cluster</a>, then try again.',
+          ),
+          {
+            linkToBilling:
+              'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral',
+          },
+          false,
+        );
+      }
+
       return sprintf(
         s__('ClusterIntegration|An error occured while trying to fetch your projects: %{error}'),
         { error: this.gapiError },
       );
     },
   },
+  watch: {
+    selectedProject() {
+      this.isLoading = true;
+      this.isValidatingProjectBilling = true;
+
+      this.validateProjectBilling()
+        .then(this.validateProjectBillingSuccessHandler)
+        .catch(this.validateProjectBillingFailureHandler);
+    },
+    projectHasBillingEnabled(billingEnabled) {
+      this.hasErrors = !billingEnabled;
+      this.isValidatingProjectBilling = false;
+    },
+  },
   created() {
     this.isLoading = true;
 
@@ -81,7 +123,7 @@ export default {
       .catch(this.fetchFailureHandler);
   },
   methods: {
-    ...mapActions(['fetchProjects']),
+    ...mapActions(['fetchProjects', 'validateProjectBilling']),
     ...mapActions({ setItem: 'setProject' }),
     fetchSuccessHandler() {
       if (this.defaultValue) {
@@ -97,6 +139,15 @@ export default {
       this.isLoading = false;
       this.hasErrors = false;
     },
+    validateProjectBillingSuccessHandler() {
+      this.isLoading = false;
+    },
+    validateProjectBillingFailureHandler(resp) {
+      this.isLoading = false;
+      this.hasErrors = true;
+
+      this.gapiError = resp.result ? resp.result.error.message : resp;
+    },
   },
 };
 </script>
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 46d84bbb751..43531813407 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
@@ -1,6 +1,6 @@
 <script>
 import { sprintf, s__ } from '~/locale';
-import { mapState, mapGetters, mapActions } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 
 import gkeDropdownMixin from './gke_dropdown_mixin';
 
@@ -8,11 +8,10 @@ export default {
   name: 'GkeZoneDropdown',
   mixins: [gkeDropdownMixin],
   computed: {
-    ...mapState(['selectedProject', 'selectedZone', 'projects']),
+    ...mapState(['selectedProject', 'selectedZone', 'projects', 'projectHasBillingEnabled']),
     ...mapState({ items: 'zones' }),
-    ...mapGetters(['hasProject']),
     isDisabled() {
-      return !this.hasProject;
+      return !this.projectHasBillingEnabled;
     },
     toggleText() {
       if (this.isLoading) {
@@ -23,7 +22,7 @@ export default {
         return this.selectedZone;
       }
 
-      return !this.hasProject
+      return !this.projectHasBillingEnabled
         ? s__('ClusterIntegration|Select project to choose zone')
         : s__('ClusterIntegration|Select zone');
     },
@@ -35,10 +34,11 @@ export default {
     },
   },
   watch: {
-    selectedProject() {
+    projectHasBillingEnabled(billingEnabled) {
+      if (!billingEnabled) return false;
       this.isLoading = true;
 
-      this.fetchZones()
+      return this.fetchZones()
         .then(this.fetchSuccessHandler)
         .catch(this.fetchFailureHandler);
     },