@rancher/shell 2.0.0 → 3.0.0-rc.1

package/mixins/__tests__/chart.test.ts

@@ -1,7 +1,6 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
 import ChartMixin from '@shell/mixins/chart';
 import { OPA_GATE_KEEPER_ID } from '@shell/pages/c/_cluster/gatekeeper/index.vue';
+import { mount } from '@vue/test-utils';
 
 describe('chartMixin', () => {
   const testCases = {
@@ -18,33 +17,42 @@ describe('chartMixin', () => {
     ],
   };
 
-  const localVue = createLocalVue();
-
-  localVue.use(Vuex);
-  localVue.mixin(ChartMixin);
-
   it.each(testCases.opa)(
-    'should add OPA deprecation warning properly', (chartId, expected) => {
-      const store = new Vuex.Store({
-        getters: {
+    'should add OPA deprecation warning properly', async(chartId, expected) => {
+      const mockStore = {
+        dispatch: jest.fn(() => Promise.resolve()),
+        getters:  {
           currentCluster: () => {},
           isRancher:      () => true,
           'catalog/repo': () => {
             return () => 'repo';
           },
           'catalog/chart': () => {
-            return () => ({ id: chartId });
+            return { id: chartId };
           },
           'i18n/t': () => jest.fn()
         }
-      });
+      };
+
+      const DummyComponent = {
+        mixins:   [ChartMixin],
+        template: '<div></div>',
+      };
 
-      const vm = localVue.extend({});
-      const instance = new vm({ store });
+      const instance = mount(
+        DummyComponent,
+        {
+          global: {
+            mocks: {
+              $store: mockStore,
+              $route: { query: { chart: 'chart_name' } }
+            }
+          }
+        });
 
-      instance.$route = { query: { chart: 'chart_name' } };
+      await instance.vm.fetchChart();
 
-      const warnings = instance.warnings;
+      const warnings = instance.vm.warnings;
 
       expect(warnings).toHaveLength(expected);
     }
@@ -55,26 +63,39 @@ describe('chartMixin', () => {
       const id = 'cattle-fleet-local-system/fleet-agent-local';
       const data = isEdit ? { existing: { id, upgradeAvailable } } : undefined;
 
-      const store = new Vuex.Store({
-        getters: {
+      const mockStore = {
+        dispatch: jest.fn(() => Promise.resolve()),
+        getters:  {
           currentCluster: () => {},
           isRancher:      () => true,
           'catalog/repo': () => {
             return () => 'repo';
           },
           'catalog/chart': () => {
-            return () => ({ id });
+            return { id };
           },
           'i18n/t': () => jest.fn()
         }
-      });
+      };
 
-      const vm = localVue.extend({});
-      const instance = new vm({ store, data });
+      const DummyComponent = {
+        mixins:   [ChartMixin],
+        template: '<div></div>',
+      };
 
-      instance.$route = { query: { chart: 'chart_name' } };
+      const instance = mount(
+        DummyComponent,
+        {
+          data:   () => data,
+          global: {
+            mocks: {
+              $store: mockStore,
+              $route: { query: { chart: 'chart_name' } }
+            }
+          }
+        });
 
-      const warnings = instance.warnings;
+      const warnings = instance.vm.warnings;
 
       expect(warnings).toHaveLength(expected as number);
     }

package/mixins/auth-config.js

@@ -3,10 +3,24 @@ import { NORMAN, MANAGEMENT } from '@shell/config/types';
 import { AFTER_SAVE_HOOKS, BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import { BASE_SCOPES } from '@shell/store/auth';
 import { addObject, findBy } from '@shell/utils/array';
-import { set } from '@shell/utils/object';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import difference from 'lodash/difference';
 
+export const SLO_OPTION_VALUES = {
+  /**
+   * Log out of only rancher, leaving auth provider logged in
+   */
+  rancher: 'rancher',
+  /**
+   * Log out of rancher AND auth provider
+   */
+  all:     'all',
+  /**
+   * Offer user chose of `rancher` or `all`
+   */
+  both:    'both',
+};
+
 export default {
   beforeCreate() {
     const { query } = this.$route;
@@ -30,6 +44,7 @@ export default {
       originalModel:  null,
       principals:     [],
       authConfigName: this.$route.params.id,
+      sloType:        '',
     };
   },
 
@@ -102,7 +117,18 @@ export default {
       }
       if (this.value.configType === 'saml') {
         if (!this.model.rancherApiHost || !this.model.rancherApiHost.length) {
-          this.$set(this.model, 'rancherApiHost', this.serverUrl);
+          this.model['rancherApiHost'] = this.serverUrl;
+        }
+
+        // setting data for SLO
+        if (this.model && Object.keys(this.model).includes('logoutAllSupported')) {
+          if (!this.model.logoutAllEnabled && !this.model.logoutAllForced) {
+            this.sloType = SLO_OPTION_VALUES.rancher;
+          } else if (this.model.logoutAllEnabled && this.model.logoutAllForced) {
+            this.sloType = SLO_OPTION_VALUES.all;
+          } else if (this.model.logoutAllEnabled && !this.model.logoutAllForced) {
+            this.sloType = SLO_OPTION_VALUES.both;
+          }
         }
       }
 
@@ -269,25 +295,25 @@ export default {
         const serverUrl = this.serverUrl.endsWith('/') ? this.serverUrl.slice(0, this.serverUrl.length - 1) : this.serverUrl;
 
         // AuthConfig
-        set(this.model, 'accessMode', 'unrestricted'); // This should remain as unrestricted, enabling will fail otherwise
+        this.model.accessMode = 'unrestricted'; // This should remain as unrestricted, enabling will fail otherwise
 
         // KeyCloakOIDCConfig --> OIDCConfig
-        set(this.model, 'rancherUrl', `${ serverUrl }/verify-auth`);
-        set(this.model, 'scope', BASE_SCOPES.oidc[0]);
+        this.model.rancherUrl = `${ serverUrl }/verify-auth`;
+        this.model.scope = this.model.id === 'keycloakoidc' ? BASE_SCOPES.keycloakoidc[0] : BASE_SCOPES.genericoidc[0];
         break;
       }
 
       case 'saml':
-        set(this.model, 'accessMode', 'unrestricted');
+        this.model.accessMode = 'unrestricted';
         break;
       case 'ldap':
-        set(this.model, 'servers', []);
-        set(this.model, 'accessMode', 'unrestricted');
-        set(this.model, 'starttls', false);
+        this.model.servers = [];
+        this.model.accessMode = 'unrestricted';
+        this.model.starttls = false;
         if (this.model.id === 'activedirectory') {
-          set(this.model, 'disabledStatusBitmask', 2);
+          this.model.disabledStatusBitmask = 2;
         } else {
-          set(this.model, 'disabledStatusBitmask', 0);
+          this.model.disabledStatusBitmask = 0;
         }
         break;
       default:

package/mixins/chart.js

@@ -27,6 +27,8 @@ export default {
       existing:         null,
 
       ignoreWarning: false,
+
+      chart: null,
     };
   },
 
@@ -35,20 +37,6 @@ export default {
 
     showPreRelease: mapPref(SHOW_PRE_RELEASE),
 
-    chart() {
-      if ( this.repo && this.query.chartName ) {
-        return this.$store.getters['catalog/chart']({
-          repoType:       this.query.repoType,
-          repoName:       this.query.repoName,
-          chartName:      this.query.chartName,
-          includeHidden:  true,
-          showDeprecated: this.showDeprecated
-        });
-      }
-
-      return null;
-    },
-
     repo() {
       return this.$store.getters['catalog/repo']({
         repoType: this.query.repoType,
@@ -258,11 +246,39 @@ export default {
   },
 
   methods: {
+    /**
+     * Populate `this.chart`
+     *
+     * `chart` used to be a computed property pointing at getter catalog/chart
+     *
+     * this however stopped recalculating given changes to the store
+     *
+     * (the store would populate a charts collection, which the getter uses to find the chart,
+     * however this did not kick off the computed property, so this.charts was not populated)
+     *
+     * Now we find and cache the chart
+     */
+    fetchStoreChart() {
+      if (!this.chart && this.repo && this.query.chartName) {
+        this.chart = this.$store.getters['catalog/chart']({
+          repoType:       this.query.repoType,
+          repoName:       this.query.repoName,
+          chartName:      this.query.chartName,
+          includeHidden:  true,
+          showDeprecated: this.showDeprecated
+        });
+      }
+
+      return this.chart;
+    },
+
     async fetchChart() {
       this.versionInfoError = null;
 
       await this.$store.dispatch('catalog/load'); // not the problem
 
+      this.fetchStoreChart();
+
       if ( this.query.appNamespace && this.query.appName ) {
         // First check the URL query for an app name and namespace.
         // Use those values to check for a catalog app resource.
@@ -456,7 +472,7 @@ export default {
         }
       }
 
-      this.$set(this, 'autoInstallInfo', out);
+      this['autoInstallInfo'] = out;
     },
 
     selectVersion({ id: version }) {

package/mixins/compact-input.ts

@@ -1,6 +1,5 @@
-import Vue from 'vue';
 
-export default Vue.extend({
+export default {
   props: {
     compact: {
       type:    Boolean,
@@ -23,4 +22,4 @@ export default Vue.extend({
       return this.compact !== null ? this.compact : !(this.label || this.labelKey);
     }
   }
-});
+};

package/mixins/labeled-form-element.ts

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { getWidth, setWidth } from '@shell/utils/width';
 
@@ -8,7 +7,7 @@ interface LabeledFormElement {
   blurred: number | null;
 }
 
-export default Vue.extend({
+export default {
   inheritAttrs: false,
 
   props: {
@@ -155,6 +154,8 @@ export default Vue.extend({
         const message = requiredRule(value);
 
         if (!!message) {
+          this.$emit('update:validation', false);
+
           return message;
         }
       }
@@ -167,8 +168,12 @@ export default Vue.extend({
         }
       }
       if (ruleMessages.length > 0 && (this.blurred || this.focused || !this.requireDirty)) {
+        this.$emit('update:validation', false);
+
         return ruleMessages.join(', ');
       } else {
+        this.$emit('update:validation', true);
+
         return undefined;
       }
     }
@@ -215,4 +220,4 @@ export default Vue.extend({
       this.blurred = Date.now();
     }
   }
-});
+};

package/mixins/resource-fetch.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { mapGetters } from 'vuex';
 import { COUNT, MANAGEMENT } from '@shell/config/types';
 import { SETTING, DEFAULT_PERF_SETTING } from '@shell/config/settings';
@@ -15,6 +14,8 @@ export default {
     ResourceFetchApiPagination
   ],
 
+  inheritAttrs: false,
+
   data() {
     // fetching the settings related to manual refresh from global settings
     const perfSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE);
@@ -139,7 +140,7 @@ export default {
           force:            this.paginating !== null // Fix for manual refresh (before ripped out).
         };
 
-        Vue.set(this, 'paginating', true);
+        this['paginating'] = true;
 
         const that = this;
 
@@ -147,7 +148,7 @@ export default {
           type,
           opt
         })
-          .finally(() => Vue.set(that, 'paginating', false));
+          .finally(() => (that['paginating'] = false));
       }
 
       let incremental = 0;

package/models/__tests__/apps.deployment.test.ts

@@ -0,0 +1,93 @@
+import Deployment from '@shell/models/apps.deployment';
+import { WORKLOAD_TYPES } from '@shell/config/types';
+
+describe('class Deployment', () => {
+  describe('replicaSetId', () => {
+    it.each([{
+      relationships: [],
+      expected:      undefined,
+    }, {
+      relationships: [{
+        rel:    'owner',
+        toType: WORKLOAD_TYPES.REPLICA_SET,
+        toId:   'rel-id'
+      }],
+      expected: 'rel-id',
+    }, {
+      relationships: [{
+        rel:     'owner',
+        toType:  WORKLOAD_TYPES.REPLICA_SET,
+        toId:    'rel-id-1',
+        message: 'ReplicaSet is available. Replicas: 1'
+      }],
+      expected: 'rel-id-1',
+    }, {
+      relationships: [{
+        rel:     'owner',
+        toType:  WORKLOAD_TYPES.REPLICA_SET,
+        toId:    'rel-id-1',
+        message: 'ReplicaSet is available. Replicas: 0'
+      }, {
+        rel:     'owner',
+        toType:  WORKLOAD_TYPES.REPLICA_SET,
+        toId:    'rel-id-2',
+        message: 'ReplicaSet is available. Replicas: 1'
+      }],
+      expected: 'rel-id-2',
+    }, {
+      relationships: [{
+        rel:     'owner',
+        toType:  WORKLOAD_TYPES.REPLICA_SET,
+        toId:    'rel-id-1',
+        message: 'Message without replicas count'
+      }, {
+        rel:     'owner',
+        toType:  WORKLOAD_TYPES.REPLICA_SET,
+        toId:    'rel-id-2',
+        message: 'Another message without replicas count'
+      }],
+      expected: 'rel-id-1',
+    }, {
+      relationships: [{
+        rel:     'owner',
+        toType:  WORKLOAD_TYPES.REPLICA_SET,
+        toId:    'rel-id-1',
+        message: 'ReplicaSet is available. Replicas: 0'
+      }, {
+        rel:     'owner',
+        toType:  WORKLOAD_TYPES.REPLICA_SET,
+        toId:    'rel-id-2',
+        message: 'ReplicaSet is available. Replicas: 0'
+      }],
+      expected: 'rel-id-1',
+    }, {
+      relationships: [{
+        rel:     'owner',
+        toType:  WORKLOAD_TYPES.REPLICA_SET,
+        toId:    'rel-id-1',
+        message: 'Message without replicas count'
+      }, {
+        rel:     'owner',
+        toType:  WORKLOAD_TYPES.REPLICA_SET,
+        toId:    'rel-id-2',
+        message: 'ReplicaSet is available. Replicas: 0'
+      }],
+      expected: 'rel-id-1',
+    }])('replicaSetId', ({ relationships, expected }) => {
+      const deploymentData = {
+        id:       'any-id',
+        type:     WORKLOAD_TYPES.DEPLOYMENT,
+        metadata: {
+          name:      'any-name',
+          namespace: 'any-namespace',
+          uid:       'any-uid',
+          relationships,
+        },
+      };
+
+      const deployment = new Deployment(deploymentData);
+
+      expect(deployment.replicaSetId).toStrictEqual(expected);
+    });
+  });
+});

package/models/apps.deployment.js

@@ -10,14 +10,28 @@ const IGNORED_ANNOTATIONS = [
   'deprecated.deployment.rollback.to',
 ];
 
+const replicasRegEx = /Replicas: (\d+)/;
+
 export default class Deployment extends Workload {
   get replicaSetId() {
-    const set = this.metadata?.relationships?.find((relationship) => {
-      return relationship.rel === 'owner' &&
-            relationship.toType === WORKLOAD_TYPES.REPLICA_SET;
+    const relationships = this.metadata?.relationships || [];
+
+    // Find all relevant ReplicaSet relationships
+    const replicaSetRelationships = relationships.filter((relationship) => relationship.rel === 'owner' && relationship.toType === WORKLOAD_TYPES.REPLICA_SET
+    );
+
+    // Filter the ReplicaSets based on replicas > 0
+    const activeReplicaSet = replicaSetRelationships.find((relationship) => {
+      const replicasMatch = relationship.message?.match(replicasRegEx);
+      const replicas = replicasMatch ? parseInt(replicasMatch[1], 10) : 0;
+
+      return replicas > 0;
     });
 
-    return set?.toId?.replace(`${ this.namespace }/`, '');
+    // If no active ReplicaSet is found, fall back to the first one from the list
+    const selectedReplicaSet = activeReplicaSet || replicaSetRelationships[0];
+
+    return selectedReplicaSet?.toId?.replace(`${ this.namespace }/`, '');
   }
 
   async rollBack(cluster, deployment, revision) {

package/models/apps.statefulset.js

@@ -1,6 +1,5 @@
 import Workload from './workload';
-import { WORKLOAD_TYPES, POD } from '@shell/config/types';
-import { WORKLOAD_TYPE_TO_KIND_MAPPING } from '@shell/detail/workload/index';
+import { WORKLOAD_TYPES, POD, WORKLOAD_TYPE_TO_KIND_MAPPING } from '@shell/config/types';
 
 export default class StatefulSet extends Workload {
   async rollBack(cluster, statefulSet, revision) {

package/models/batch.cronjob.js

@@ -1,8 +1,7 @@
 import { insertAt } from '@shell/utils/array';
 import { clone } from '@shell/utils/object';
-import { WORKLOAD_TYPES } from '@shell/config/types';
+import { WORKLOAD_TYPES, WORKLOAD_TYPE_TO_KIND_MAPPING } from '@shell/config/types';
 import Workload from './workload';
-import { WORKLOAD_TYPE_TO_KIND_MAPPING } from '@shell/detail/workload/index';
 
 export default class CronJob extends Workload {
   get state() {

package/models/catalog.cattle.io.clusterrepo.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { parse } from '@shell/utils/url';
 import { CATALOG } from '@shell/config/labels-annotations';
 import { insertAt } from '@shell/utils/array';
@@ -9,7 +8,7 @@ import SteveModel from '@shell/plugins/steve/steve-class';
 export default class ClusterRepo extends SteveModel {
   applyDefaults() {
     if ( !this.spec ) {
-      Vue.set(this, 'spec', { url: '' });
+      this['spec'] = { url: '' };
     }
   }
 

package/models/driver.js

@@ -1,6 +1,7 @@
 import { DESCRIPTION } from '@shell/config/labels-annotations';
 import NormanModel from '@shell/plugins/steve/norman-class';
 import { KONTAINER_TO_DRIVER } from './management.cattle.io.kontainerdriver';
+import capitalize from 'lodash/capitalize';
 
 export default class Driver extends NormanModel {
   get canViewYaml() {
@@ -20,12 +21,12 @@ export default class Driver extends NormanModel {
       }
     }
 
-    return KONTAINER_TO_DRIVER[this.id] || this.id;
+    return KONTAINER_TO_DRIVER[this.id] || this.name || this.id;
   }
 
   get nameDisplay() {
     const path = `cluster.provider.${ this.driverName }`;
-    const label = this.driverName || this.name || this.id;
+    const label = capitalize(this.driverName);
 
     return this.$rootGetters['i18n/withFallback'](path, label);
   }

package/models/fleet.cattle.io.gitrepo.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { convert, matching, convertSelectorObj } from '@shell/utils/selector';
 import jsyaml from 'js-yaml';
 import { escapeHtml, randomStr } from '@shell/utils/string';
@@ -36,7 +35,7 @@ export default class GitRepo extends SteveModel {
     spec.paths = spec.paths || [];
     spec.clientSecretName = spec.clientSecretName || null;
 
-    Vue.set(spec, 'correctDrift', { enabled: false });
+    spec['correctDrift'] = { enabled: false };
 
     set(this, 'spec', spec);
     set(this, 'metadata', meta);

package/models/helm.cattle.io.projecthelmchart.js

@@ -1,12 +1,11 @@
 import SteveModel from '@shell/plugins/steve/steve-class';
-import Vue from 'vue';
 import { NAMESPACE, MANAGEMENT, HELM } from '@shell/config/types';
 
 export default class ProjectHelmChart extends SteveModel {
   applyDefaults() {
     if ( !this.spec ) {
-      Vue.set(this, 'spec', { helmApiVersion: 'monitoring.cattle.io/v1alpha1' });
-      Vue.set(this, 'metadata', { name: 'project-monitoring' });
+      this['spec'] = { helmApiVersion: 'monitoring.cattle.io/v1alpha1' };
+      this['metadata'] = { name: 'project-monitoring' };
     }
   }
 

package/models/kontainerdriver.js

@@ -8,19 +8,21 @@ export default class KontainerDriver extends Driver {
   get _availableActions() {
     const out = [
       {
-        action:   'activate',
-        label:    'Activate',
-        icon:     'icon icon-play',
-        bulkable: true,
-        enabled:  !!this.links.update && !this.active
+        action:     'activate',
+        label:      this.t('action.activate'),
+        icon:       'icon icon-play',
+        bulkable:   true,
+        bulkAction: 'activateBulk',
+        enabled:    !!this.links.update && !this.active
       },
       {
-        action:   'deactivate',
-        label:    'Deactivate',
-        icon:     'icon icon-pause',
-        bulkable: true,
-        enabled:  !!this.links.update && !!this.active,
-        weight:   -1
+        action:     'deactivate',
+        label:      this.t('action.deactivate'),
+        icon:       'icon icon-pause',
+        bulkable:   true,
+        bulkAction: 'deactivateBulk',
+        enabled:    !!this.links.update && !!this.active,
+        weight:     -1
       },
       { divider: true },
       {
@@ -52,9 +54,16 @@ export default class KontainerDriver extends Driver {
     return out;
   }
 
-  deactivate() {
+  deactivate(resources = [this]) {
+    this.$dispatch('promptModal', {
+      componentProps: { drivers: resources, driverType: 'kontainerDrivers' },
+      component:      'DeactivateDriverDialog'
+    });
+  }
+
+  deactivateBulk(resources) {
     this.$dispatch('promptModal', {
-      componentProps: { url: `v3/kontainerDrivers/${ escape(this.id) }?action=deactivate`, name: this.nameDisplay },
+      componentProps: { drivers: resources, driverType: 'kontainerDrivers' },
       component:      'DeactivateDriverDialog'
     });
   }
@@ -65,4 +74,12 @@ export default class KontainerDriver extends Driver {
       method: 'post',
     }, { root: true });
   }
+
+  async activateBulk(resources) {
+    await Promise.all(resources.map((resource) => this.$dispatch('rancher/request', {
+      url:    `v3/kontainerDrivers/${ escape(resource.id) }?action=activate`,
+      method: 'post',
+    }, { root: true }
+    )));
+  }
 }

package/models/management.cattle.io.authconfig.js

@@ -15,10 +15,10 @@ export const configType = {
   local:           '',
   github:          'oauth',
   keycloakoidc:    'oidc',
-  oidc:            'oidc',
+  genericoidc:     'oidc',
 };
 
-const imageOverrides = { keycloakoidc: 'keycloak', oidc: 'openid' };
+const imageOverrides = { keycloakoidc: 'keycloak', genericoidc: 'openid' };
 
 export default class AuthConfig extends SteveModel {
   get _availableActions() {