1 files changed, 54 insertions, 3 deletions
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>