@rancher/shell 3.0.2-rc.5 → 3.0.2

package/list/management.cattle.io.setting.vue

@@ -1,13 +1,16 @@
 <script>
-import { mapGetters } from 'vuex';
 import { MANAGEMENT } from '@shell/config/types';
-import { ALLOWED_SETTINGS } from '@shell/config/settings';
+import { ALLOWED_SETTINGS, PROVISIONING_SETTINGS } from '@shell/config/settings';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import { VIEW_IN_API } from '@shell/store/prefs';
+import Setting from '@shell/components/Setting';
+import { mapGetters } from 'vuex';
 
 export default {
-  components: { Banner, Loading },
+  components: {
+    Banner, Loading, Setting
+  },
 
   async fetch() {
     const viewInApi = this.$store.getters['prefs/get'](VIEW_IN_API);
@@ -21,6 +24,7 @@ export default {
     }, {});
 
     const settings = [];
+    const provisioningSettings = [];
 
     // Combine the allowed settings with the data from the API
     for ( const id in ALLOWED_SETTINGS ) {
@@ -52,43 +56,22 @@ export default {
       // There are only 2 actions that can be enabled - Edit Setting or View in API
       // If neither is available for this setting then we hide the action menu button
       s.hasActions = (!s.readOnly || viewInApi) && setting.availableActions?.length;
-      settings.push(s);
+
+      if (PROVISIONING_SETTINGS.includes(s.id) ) {
+        provisioningSettings.push(s);
+      } else {
+        settings.push(s);
+      }
     }
 
     this.settings = settings;
+    this.provisioningSettings = provisioningSettings;
   },
 
   data() {
-    return { settings: null };
-  },
-
-  computed: {
-    ...mapGetters({ t: 'i18n/t' }),
-    ...mapGetters({
-      // Use either these Vuex getters
-      // OR the props to set the action menu state,
-      // but don't use both.
-      targetElem: 'action-menu/elem',
-      shouldShow: 'action-menu/showing',
-    }),
+    return { settings: null, provisioningSettings: null };
   },
-
-  methods: {
-    toggleActionMenu(e, setting) {
-      const actionElement = e.srcElement;
-
-      if (!this.targetElem && !this.shouldShow) {
-        this.$store.commit(`action-menu/show`, {
-          resources: setting.data,
-          elem:      actionElement
-        });
-      } else if (this.targetElem === actionElement && this.shouldShow) {
-        // this condition is needed so that we can "toggle" the action menu with
-        // the keyboard for accessibility (row action menu)
-        this.$store.commit('action-menu/hide');
-      }
-    },
-  }
+  computed: { ...mapGetters({ t: 'i18n/t' }) }
 };
 </script>
 
@@ -98,77 +81,31 @@ export default {
     <Banner
       color="warning"
       class="settings-banner"
+      data-testid="global-settings-banner"
     >
       <div>
         {{ t('advancedSettings.subtext') }}
       </div>
     </Banner>
     <div
-      v-for="(setting, i) in settings"
-      :key="i"
-      class="advanced-setting mb-20"
-      :data-testid="`advanced-setting__option-${setting.id}`"
+      v-for="(setting) in settings"
+      :key="setting.id"
     >
-      <div class="header">
-        <div class="title">
-          <h1>
-            {{ setting.id }}
-            <span
-              v-if="setting.fromEnv"
-              class="modified"
-            >{{ t('advancedSettings.setEnv') }}</span>
-            <span
-              v-else-if="setting.customized"
-              class="modified"
-            >{{ t('advancedSettings.modified') }}</span>
-          </h1>
-          <h2>{{ t(`advancedSettings.descriptions.${setting.id}`) }}</h2>
-        </div>
-        <div
-          v-if="setting.hasActions"
-          class="action"
-        >
-          <button
-            aria-haspopup="true"
-            aria-expanded="false"
-            type="button"
-            class="btn btn-sm role-multi-action actions"
-            role="button"
-            :aria-label="t('advancedSettings.edit.moreActions', { setting: setting.id })"
-            @click="toggleActionMenu($event, setting)"
-          >
-            <i
-              class="icon icon-actions"
-              :alt="t('advancedSettings.edit.moreActions', { setting: setting.id })"
-            />
-          </button>
-        </div>
-      </div>
-      <div value>
-        <div v-if="setting.canHide">
-          <button
-            class="btn btn-sm role-primary"
-            role="button"
-            :aria-label="t('advancedSettings.hideShow')"
-            @click="setting.hide = !setting.hide"
-          >
-            {{ setting.hide ? t('advancedSettings.show') : t('advancedSettings.hide') }} {{ setting.id }}
-          </button>
-        </div>
-        <div
-          v-show="!setting.canHide || (setting.canHide && !setting.hide)"
-          class="settings-value"
-        >
-          <pre v-if="setting.kind === 'json'">{{ setting.json }}</pre>
-          <pre v-else-if="setting.kind === 'multiline'">{{ setting.data.value || setting.data.default }}</pre>
-          <pre v-else-if="setting.kind === 'enum'">{{ t(setting.enum) }}</pre>
-          <pre v-else-if="setting.data.value || setting.data.default">{{ setting.data.value || setting.data.default }}</pre>
-          <pre
-            v-else
-            class="text-muted"
-          >&lt;{{ t('advancedSettings.none') }}&gt;</pre>
-        </div>
-      </div>
+      <Setting
+        :value="setting"
+      />
+    </div>
+
+    <h2>
+      {{ t('advancedSettings.provisioning.header') }}
+    </h2>
+    <div
+      v-for="(setting) in provisioningSettings"
+      :key="setting.id"
+    >
+      <Setting
+        :value="setting"
+      />
     </div>
   </div>
 </template>
@@ -177,39 +114,4 @@ export default {
 .settings-banner {
   margin-top: 0;
 }
-.advanced-setting {
-  border: 1px solid var(--border);
-  padding: 20px;
-  border-radius: var(--border-radius);
-
-  h1 {
-    font-size: 14px;
-  }
-  h2 {
-    font-size: 12px;
-    margin-bottom: 0;
-    opacity: 0.8;
-  }
-}
-
-.settings-value pre {
-  margin: 0;
-}
-
-.header {
-  display: flex;
-  margin-bottom: 20px;
-}
-
-.title {
-  flex: 1;
-}
-
-.modified {
-  margin-left: 10px;
-  border: 1px solid var(--primary);
-  border-radius: 5px;
-  padding: 2px 10px;
-  font-size: 12px;
-}
 </style>

package/list/provisioning.cattle.io.cluster.vue

@@ -77,13 +77,15 @@ export default {
     const res = await allHash(hash);
 
     this.mgmtClusters = res.mgmtClusters;
+    this.showRke1DeprecationWarning = this.rows.some((r) => r.isRke1);
   },
 
   data() {
     return {
-      resource:     CAPI.RANCHER_CLUSTER,
-      schema:       this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
-      mgmtClusters: [],
+      resource:                   CAPI.RANCHER_CLUSTER,
+      schema:                     this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
+      mgmtClusters:               [],
+      showRke1DeprecationWarning: false
     };
   },
 
@@ -180,6 +182,12 @@ export default {
 
 <template>
   <div>
+    <Banner
+      v-if="showRke1DeprecationWarning"
+      color="warning"
+      label-key="cluster.banner.rke1DeprecationMessage"
+    />
+
     <Banner
       v-if="hiddenHarvesterCount"
       color="info"

package/machine-config/vmwarevsphere.vue

@@ -149,7 +149,6 @@ export default {
       const datacenterAlreadySet = !!this.value.datacenter;
 
       await this.loadDataCenters();
-
       if (datacenterAlreadySet) {
         this.loadAllDatacenterResources();
       }
@@ -382,12 +381,14 @@ export default {
 
       set(this.value, 'boot2dockerUrl', boot2dockerUrl);
     },
-    vappMode(value) {
+    vappMode(value, oldValue) {
       if (value === VAPP_MODE.AUTO) {
         const defaultVappOptions = getDefaultVappOptions(this.networkNames || []);
 
         return this.updateVappOptions(defaultVappOptions);
-      } else {
+      } else if (value === VAPP_MODE.DISABLED) {
+        this.updateVappOptions(INITIAL_VAPP_OPTIONS);
+      } else if (value === VAPP_MODE.MANUAL && oldValue === VAPP_MODE.AUTO) {
         this.updateVappOptions(INITIAL_VAPP_OPTIONS);
       }
     },
@@ -417,12 +418,18 @@ export default {
 
       const url = `/meta/vsphere/${ resource }?${ queryParams }`;
 
-      const result = await this.$store.dispatch('management/request', {
-        url,
-        redirectUnauthorized: false,
-      }, { root: true });
+      try {
+        const result = await this.$store.dispatch('management/request', {
+          url,
+          redirectUnauthorized: false,
+        }, { root: true });
 
-      return result.data;
+        return result.data;
+      } catch (ex) {
+        console.warn(`There was a problem requesting the resource: "${ resource }"" for datacenter: "${ dataCenter }"" and library: "${ library }"`, ex); // eslint-disable-line no-console
+
+        return [];
+      }
     },
 
     async loadDataCenters() {

package/mixins/__tests__/auth-config.test.ts

@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils';
+import authConfigMixin from '@shell/mixins/auth-config';
+
+describe('mixin: authConfigMixin', () => {
+  describe('method: save', () => {
+    const componentMock = (model: any) => ({
+      data: () => ({
+        value: { configType: 'oidc' },
+        model,
+      }),
+      computed: { principal: () => ({ me: {} }) },
+      global:   {
+        mocks: {
+          $store: {
+            dispatch: () => model,
+            commit:   () => ({ 'auth/loggedInAs': jest.fn() }),
+          },
+          $route: {
+            params: { id: '123' },
+            query:  { mode: 'edit' },
+          },
+        }
+      }
+    });
+    const FakeComponent = {
+      render() {},
+      mixins:  [authConfigMixin],
+      methods: { applyHooks: jest.fn() },
+    };
+
+    it('should return error', async() => {
+      const instance = mount(FakeComponent, componentMock({
+        doAction: jest.fn(),
+        save:     'make it fail'
+      })).vm as any;
+      const fakeCallback = jest.fn();
+
+      await instance.save(fakeCallback);
+
+      expect(fakeCallback).toHaveBeenCalledWith(false);
+    });
+
+    it('should not return error', async() => {
+      const model = {
+        authConfigName: 'whatever',
+        doAction:       jest.fn(),
+        save:           async() => {}
+      };
+      const instance = mount(FakeComponent, componentMock(model)).vm as any;
+      const fakeCallback = jest.fn();
+
+      await instance.save(fakeCallback);
+
+      expect(fakeCallback).toHaveBeenCalledWith(true);
+    });
+
+    it.each([
+      'oidc'
+    ])('should keep custom scope on save', async(type) => {
+      const scope = 'openid profile email groups whatever';
+      const model = {
+        scope,
+        authConfigName: 'whatever',
+        doAction:       jest.fn(),
+        save:           async() => {}
+      };
+      const instance = mount(FakeComponent, componentMock(model)).vm as any;
+
+      await instance.save(jest.fn());
+
+      expect(instance.model.scope).toStrictEqual(scope);
+    });
+  });
+});

package/mixins/__tests__/chart.test.ts

@@ -1,6 +1,7 @@
 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';
+import { APP_UPGRADE_STATUS } from '@shell/store/catalog';
 
 describe('chartMixin', () => {
   const testCases = {
@@ -10,10 +11,10 @@ describe('chartMixin', () => {
       ['any_other_id', 0]
     ],
     managedApps: [
-      [false, false, 0],
-      [true, null, 0],
-      [true, true, 0],
-      [true, false, 1],
+      [false, APP_UPGRADE_STATUS.NOT_APPLICABLE, 0],
+      [true, APP_UPGRADE_STATUS.NO_UPGRADE, 0],
+      [true, 'some-version', 0],
+      [true, APP_UPGRADE_STATUS.NOT_APPLICABLE, 1],
     ],
   };
 

package/mixins/__tests__/create-edit-view.test.ts

@@ -15,4 +15,42 @@ describe('createEditView should', () => {
 
     expect(instance.mode).toContain(_EDIT);
   });
+
+  it.each([
+    ['_status', { _status: 409 }],
+    ['status', { status: 409 }],
+  ])('catch conflict error by %p field and retry save()', async(_, error) => {
+    const Component = {
+      render() {},
+      mixins: [CreateEditView],
+    };
+
+    const wrapper = mount(Component, {
+      props:  { value: { id: '123', type: '' } },
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              currentStore:         () => 'current_store',
+              'type-map/isSpoofed': jest.fn().mockImplementation(() => false),
+            }
+          },
+        },
+      },
+    });
+
+    const instance = (wrapper as any).vm;
+
+    instance.actuallySave = async() => {
+      throw error;
+    };
+    instance.conflict = async() => '';
+    instance.done = async() => '';
+
+    const spyConflict = jest.spyOn(wrapper.vm, 'conflict');
+
+    await instance.save(() => '', 'url');
+
+    expect(spyConflict).toHaveBeenCalledTimes(1);
+  });
 });

package/mixins/auth-config.js

@@ -137,6 +137,14 @@ export default {
       }
     },
 
+    /**
+     * On save several operations are executed to return a URL or open pop-up:
+     * - Retrieve data from the UI
+     * - "Test" the configuration through action and override the model
+     * - Retrieve scopes from redirect URL
+     * - Set default scopes and merge them with the ones from the redirect URL and from the "test" action
+     * @param {*} btnCb
+     */
     async save(btnCb) {
       await this.applyHooks(BEFORE_SAVE_HOOKS);
 

package/mixins/chart.js

@@ -14,7 +14,7 @@ import { formatSi, parseSi } from '@shell/utils/units';
 import { CAPI, CATALOG } from '@shell/config/types';
 import { isPrerelease } from '@shell/utils/version';
 import difference from 'lodash/difference';
-import { LINUX } from '@shell/store/catalog';
+import { LINUX, APP_UPGRADE_STATUS } from '@shell/store/catalog';
 import { clone } from '@shell/utils/object';
 import { merge } from 'lodash';
 
@@ -181,7 +181,7 @@ export default {
         warnings.unshift(this.t('gatekeeperIndex.deprecated', {}, true));
       }
 
-      if (this.existing && this.existing.upgradeAvailable === false) {
+      if (this.existing && this.existing.upgradeAvailable === APP_UPGRADE_STATUS.NOT_APPLICABLE) {
         const manager = this.existing?.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.MANAGED] || 'Rancher';
 
         warnings.unshift(this.t('catalog.install.warning.managed', {

package/mixins/create-edit-view/impl.js

@@ -159,8 +159,11 @@ export default {
 
         this.done();
       } catch (err) {
+        // This exception handles errors from the `request` action when it receives a failed http request. The `err` object could be from the action's error handler (raw http response object containing `status`) or thrown later on given the response of the action (a massaged object containing `_status`). TBD why one 409 triggers the error handler and another does not.
+        const IS_ERR_409 = err.status === 409 || err._status === 409;
+
         // Conflict, the resource being edited has changed since starting editing
-        if ( err.status === 409 && depth === 0 && this.isEdit) {
+        if (IS_ERR_409 && depth === 0 && this.isEdit) {
           const errors = await this.conflict();
 
           if ( errors === false ) {

package/mixins/vue-select-overrides.js

@@ -20,6 +20,9 @@ export default {
 
       // escape
       (out[27] = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
         vm.open = false;
         vm.search = '';
 
@@ -36,6 +39,13 @@ export default {
           return;
         }
 
+        // if the index of the option is -1
+        // it means are pressing enter on an invalid option
+        // we should exit
+        if (vm.typeAheadPointer === -1) {
+          return;
+        }
+
         let option = vm.filteredOptions[vm.typeAheadPointer];
 
         vm.$emit('option:selecting', option);

package/models/__tests__/catalog.cattle.io.app.test.ts

@@ -0,0 +1,148 @@
+import CatalogApp from '@shell/models/catalog.cattle.io.app';
+import { APP_UPGRADE_STATUS } from '@shell/store/catalog';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
+
+const latestVersion = '1.16.2';
+const secondLatestVersion = '1.16.1';
+const chartName = 'cert-manager';
+
+const appCo = {
+  repoName: 'appCo',
+  home:     'https://apps.rancher.io/applications/cert-manager'
+};
+
+const certManagerOfficial = {
+  repoName: 'certManagerOfficial',
+  home:     'https://cert-manager.io',
+  oldHome:  'https://github.com/jetstack/cert-manager' // older versions of cert-manager used to have this home url(e.g. 1.7.1)
+};
+
+// cert-manager chart from application collection OCI repo
+const appCoMatchingChart1 = {
+  name:     chartName,
+  repoName: appCo.repoName,
+  versions: [{
+    version:     latestVersion,
+    home:        appCo.home,
+    repoName:    appCo.repoName,
+    annotations: {}
+  },
+  {
+    version:     secondLatestVersion,
+    home:        appCo.home,
+    repoName:    appCo.repoName,
+    annotations: {}
+  }]
+};
+
+const appCoMatchingChart2 = {
+  name:     chartName,
+  repoName: appCo.repoName,
+  versions: [{
+    version:     latestVersion,
+    home:        appCo.home,
+    repoName:    appCo.repoName,
+    annotations: {}
+  },
+  {
+    version:     secondLatestVersion,
+    home:        appCo.home,
+    repoName:    appCo.repoName,
+    annotations: {}
+  }]
+};
+
+// cert-manager chart from its official helm repo 'https://cert-manager.io' added to Rancher UI repositories
+const certManagerOfficialMatchingChart1 = {
+  name:     chartName,
+  repoName: certManagerOfficial.repoName,
+  versions: [{
+    version:     latestVersion,
+    home:        certManagerOfficial.home,
+    repoName:    certManagerOfficial.repoName,
+    annotations: {},
+  },
+  {
+    version:     secondLatestVersion,
+    home:        certManagerOfficial.oldHome,
+    repoName:    certManagerOfficial.repoName,
+    annotations: {},
+  }]
+};
+
+const certManagerOfficialMatchingChart2 = {
+  name:     chartName,
+  repoName: certManagerOfficial.repoName,
+  versions: [{
+    version:     latestVersion,
+    home:        certManagerOfficial.home,
+    repoName:    certManagerOfficial.repoName,
+    annotations: {},
+  },
+  {
+    version:     secondLatestVersion,
+    home:        certManagerOfficial.oldHome,
+    repoName:    certManagerOfficial.repoName,
+    annotations: {},
+  }]
+};
+
+const installedCertManagerAppCoFromRancherUI = {
+  metadata: {
+    annotations: { [CATALOG_ANNOTATIONS.SOURCE_REPO_NAME]: appCo.repoName },
+    name:        chartName,
+    home:        appCo.home,
+    version:     secondLatestVersion
+  }
+};
+
+const installedCertManagerOfficialFromCli = {
+  metadata: {
+    name:    chartName,
+    home:    certManagerOfficial.oldHome,
+    version: secondLatestVersion
+  }
+};
+
+const installedCertManagerOfficialFromRancherUI = {
+  metadata: {
+    annotations: { [CATALOG_ANNOTATIONS.SOURCE_REPO_NAME]: certManagerOfficial.repoName },
+    name:        chartName,
+    home:        certManagerOfficial.oldHome,
+    version:     secondLatestVersion
+  }
+};
+
+describe('class CatalogApp', () => {
+  describe('upgradeAvailable', () => {
+    const testCases = [
+      // when you follow Rancher Installation docs to install cert-manager through CLI
+      [installedCertManagerOfficialFromCli, [], APP_UPGRADE_STATUS.NO_UPGRADE],
+      [installedCertManagerOfficialFromCli, [appCoMatchingChart1], APP_UPGRADE_STATUS.NO_UPGRADE],
+      [installedCertManagerOfficialFromCli, [appCoMatchingChart1, appCoMatchingChart2], APP_UPGRADE_STATUS.NO_UPGRADE],
+      [installedCertManagerOfficialFromCli, [appCoMatchingChart1, appCoMatchingChart2, certManagerOfficialMatchingChart1], APP_UPGRADE_STATUS.SINGLE_UPGRADE],
+      // when you add application collection OCI repo through UI
+      [installedCertManagerAppCoFromRancherUI, [], APP_UPGRADE_STATUS.NO_UPGRADE],
+      [installedCertManagerAppCoFromRancherUI, [appCoMatchingChart1], APP_UPGRADE_STATUS.SINGLE_UPGRADE],
+      [installedCertManagerAppCoFromRancherUI, [appCoMatchingChart1, certManagerOfficialMatchingChart1], APP_UPGRADE_STATUS.SINGLE_UPGRADE],
+      [installedCertManagerAppCoFromRancherUI, [appCoMatchingChart1, appCoMatchingChart2], APP_UPGRADE_STATUS.MULTIPLE_UPGRADES],
+      // when you add cert-manager official helm repo through UI
+      [installedCertManagerOfficialFromRancherUI, [], APP_UPGRADE_STATUS.NO_UPGRADE],
+      [installedCertManagerOfficialFromRancherUI, [certManagerOfficialMatchingChart1], APP_UPGRADE_STATUS.SINGLE_UPGRADE],
+      [installedCertManagerOfficialFromRancherUI, [certManagerOfficialMatchingChart1, appCoMatchingChart1], APP_UPGRADE_STATUS.SINGLE_UPGRADE],
+      [installedCertManagerOfficialFromRancherUI, [certManagerOfficialMatchingChart1, certManagerOfficialMatchingChart2], APP_UPGRADE_STATUS.MULTIPLE_UPGRADES]
+    ];
+
+    it.each(testCases)('should return the correct upgrade status', (installedChart: Object, matchingCharts: any, expected: any) => {
+      const catalogApp = new CatalogApp({ spec: { chart: installedChart } }, {
+        rootGetters: {
+          'catalog/chart': () => matchingCharts,
+          currentCluster:  { workerOSs: ['linux'] },
+          'prefs/get':     () => false
+        }
+      });
+
+      expect(catalogApp.upgradeAvailable).toBe(expected);
+    });
+  });
+});