1 files changed, 41 insertions, 11 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 7ea8901ecbb..75909dd9d20 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -8,11 +8,12 @@ import Flash from '../flash';
 import Poll from '../lib/utils/poll';
 import initSettingsPanels from '../settings_panels';
 import eventHub from './event_hub';
-import { APPLICATION_STATUS, INGRESS, INGRESS_DOMAIN_SUFFIX } from './constants';
+import { APPLICATION_STATUS, INGRESS, INGRESS_DOMAIN_SUFFIX, CROSSPLANE } from './constants';
 import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
 import Applications from './components/applications.vue';
 import setupToggleButtons from '../toggle_buttons';
+import initProjectSelectDropdown from '~/project_select';
 
 const Environments = () => import('ee_component/clusters/components/environments.vue');
 
@@ -37,6 +38,8 @@ export default class Clusters {
       installJupyterPath,
       installKnativePath,
       updateKnativePath,
+      installElasticStackPath,
+      installCrossplanePath,
       installPrometheusPath,
       managePrometheusPath,
       clusterEnvironmentsPath,
@@ -81,11 +84,13 @@ export default class Clusters {
       installHelmEndpoint: installHelmPath,
       installIngressEndpoint: installIngressPath,
       installCertManagerEndpoint: installCertManagerPath,
+      installCrossplaneEndpoint: installCrossplanePath,
       installRunnerEndpoint: installRunnerPath,
       installPrometheusEndpoint: installPrometheusPath,
       installJupyterEndpoint: installJupyterPath,
       installKnativeEndpoint: installKnativePath,
       updateKnativeEndpoint: updateKnativePath,
+      installElasticStackEndpoint: installElasticStackPath,
       clusterEnvironmentsEndpoint: clusterEnvironmentsPath,
     });
 
@@ -108,8 +113,10 @@ export default class Clusters {
       this.ingressDomainHelpText &&
       this.ingressDomainHelpText.querySelector('.js-ingress-domain-snippet');
 
+    initProjectSelectDropdown();
     Clusters.initDismissableCallout();
     initSettingsPanels();
+
     const toggleButtonsContainer = document.querySelector('.js-cluster-enable-toggle-area');
     if (toggleButtonsContainer) {
       setupToggleButtons(toggleButtonsContainer);
@@ -222,6 +229,7 @@ export default class Clusters {
     eventHub.$on('saveKnativeDomain', data => this.saveKnativeDomain(data));
     eventHub.$on('setKnativeHostname', data => this.setKnativeHostname(data));
     eventHub.$on('uninstallApplication', data => this.uninstallApplication(data));
+    eventHub.$on('setCrossplaneProviderStack', data => this.setCrossplaneProviderStack(data));
     // Add event listener to all the banner close buttons
     this.addBannerCloseHandler(this.unreachableContainer, 'unreachable');
     this.addBannerCloseHandler(this.authenticationFailureContainer, 'authentication_failure');
@@ -233,6 +241,7 @@ export default class Clusters {
     eventHub.$off('updateApplication', this.updateApplication);
     eventHub.$off('saveKnativeDomain');
     eventHub.$off('setKnativeHostname');
+    eventHub.$off('setCrossplaneProviderStack');
     eventHub.$off('uninstallApplication');
   }
 
@@ -399,18 +408,33 @@ export default class Clusters {
   }
 
   installApplication({ id: appId, params }) {
-    this.store.updateAppProperty(appId, 'requestReason', null);
-    this.store.updateAppProperty(appId, 'statusReason', null);
+    return Clusters.validateInstallation(appId, params)
+      .then(() => {
+        this.store.updateAppProperty(appId, 'requestReason', null);
+        this.store.updateAppProperty(appId, 'statusReason', null);
+        this.store.installApplication(appId);
+
+        // eslint-disable-next-line promise/no-nesting
+        this.service.installApplication(appId, params).catch(() => {
+          this.store.notifyInstallFailure(appId);
+          this.store.updateAppProperty(
+            appId,
+            'requestReason',
+            s__('ClusterIntegration|Request to begin installing failed'),
+          );
+        });
+      })
+      .catch(error => this.store.updateAppProperty(appId, 'validationError', error));
+  }
 
-    this.store.installApplication(appId);
+  static validateInstallation(appId, params) {
+    return new Promise((resolve, reject) => {
+      if (appId === CROSSPLANE && !params.stack) {
+        reject(s__('ClusterIntegration|Select a stack to install Crossplane.'));
+        return;
+      }
 
-    return this.service.installApplication(appId, params).catch(() => {
-      this.store.notifyInstallFailure(appId);
-      this.store.updateAppProperty(
-        appId,
-        'requestReason',
-        s__('ClusterIntegration|Request to begin installing failed'),
-      );
+      resolve();
     });
   }
 
@@ -458,6 +482,12 @@ export default class Clusters {
     this.store.updateAppProperty(appId, 'hostname', data.hostname);
   }
 
+  setCrossplaneProviderStack(data) {
+    const appId = data.id;
+    this.store.updateAppProperty(appId, 'stack', data.stack.code);
+    this.store.updateAppProperty(appId, 'validationError', null);
+  }
+
   destroy() {
     this.destroyed = true;