Load correct external driver on edit of cluster

rancher/rancher#18406

app/authenticated/cluster/edit/route.js

@@ -1,7 +1,9 @@
 import { get, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Route from '@ember/routing/route';
-import { hash } from 'rsvp';
+import { hash, hashSettled/* , all */ } from 'rsvp';
+import { loadScript, loadStylesheet, proxifyUrl } from 'shared/utils/load-script';
+import { isEmpty } from '@ember/utils';
 
 export default Route.extend({
   access:              service(),
@@ -26,15 +28,59 @@ export default Route.extend({
     });
   },
 
+  afterModel(model) {
+    // load the css/js url here, if the url loads fail we should error the driver out
+    // show the driver in the ui, greyed out, and possibly add error text "can not load comonent from url [put url here]"
+
+    let { kontainerDrivers } = model;
+    let externalDrivers      = kontainerDrivers.filter( (d) => d.uiUrl !== '');
+    let promises = {};
+
+    externalDrivers.forEach( (d) => {
+      if (get(d, 'hasUi')) {
+        const jsUrl  = proxifyUrl(d.uiUrl, this.get('app.proxyEndpoint'));
+        const cssUrl = proxifyUrl(d.uiUrl.replace(/\.js$/, '.css'), get(this, 'app.proxyEndpoint'));
+
+        // skip setProperties cause of weird names
+        set(promises, `${ d.name }Js`, loadScript(jsUrl, `driver-ui-js-${ d.name }`));
+        set(promises, `${ d.name }Css`, loadStylesheet(cssUrl, `driver-ui-css-${ d.name }`));
+      }
+    });
+
+    if (isEmpty(promises)) {
+      return model;
+    } else {
+      return hashSettled(promises).then( (settled) => {
+        let allkeys = Object.keys(settled);
+
+        allkeys.forEach( (key) => {
+          if (get(settled, `${ key }.state`) === 'rejected') {
+            let tmp = key.indexOf('Js') > -1 ? key.replace(/\Js$/, '') : key.replace(/\Css$/, '');
+            let match = kontainerDrivers.findBy('id', tmp);
+
+            console.log('Error Loading External Component for: ', match);
+            if (match && get(match, 'scriptError') !== true) {
+              set(match, 'scriptError', get(this, 'intl').t('clusterNew.externalError'));
+            }
+          }
+        });
+      }).finally(() => {
+        return model;
+      });
+    }
+  },
+
   setupController(controller/* , model*/) {
     this._super(...arguments);
     set(controller, 'step', 1);
   },
 
-  resetController(controller, isExisting /* , transition*/ ) {
+  resetController(controller, isExiting /* , transition*/ ) {
-    if (isExisting) {
+    if (isExiting) {
       controller.set('errors', null);
       controller.set('provider', null);
     }
-  }
+  },
+
+  queryParams: { provider: { refreshModel: true } },
 });

app/authenticated/cluster/edit/template.hbs

@@ -1,7 +1,6 @@
 {{cru-cluster
   model=model
   initialProvider=cluster.provider
-  provider=provider
   mode="edit"
   close=(action "close")
 }}

app/models/cluster.js

@@ -113,8 +113,12 @@ export default Resource.extend(Grafana, ResourceUsage, {
         return 'custom';
       }
     default:
+      if (get(this, 'driver') && get(this, 'configName')) {
+        return get(this, 'driver');
+      } else {
         return 'import';
       }
+    }
   }),
 
   displayProvider: computed('configName', 'nodePools.@each.displayProvider', 'intl.locale', function() {
@@ -146,8 +150,12 @@ export default Resource.extend(Grafana, ResourceUsage, {
         return intl.t('clusterNew.custom.shortLabel');
       }
     default:
+      if (get(this, 'driver') && get(this, 'configName')) {
+        return get(this, 'driver').capitalize();
+      } else {
         return intl.t('clusterNew.import.shortLabel');
       }
+    }
   }),
 
   systemProject: computed('projects.@each.isSystemProject', function() {
@@ -245,7 +253,7 @@ export default Resource.extend(Grafana, ResourceUsage, {
     },
 
     edit() {
-      get(this, 'router').transitionTo('authenticated.cluster.edit', get(this, 'id'));
+      get(this, 'router').transitionTo('authenticated.cluster.edit', get(this, 'id'), { queryParams: { provider: get(this, 'driver') } });
     },
 
     scaleDownPool(id) {