@rancher/shell 0.3.23 → 0.3.25

package/edit/workload/storage/ContainerMountPaths.vue

@@ -1,10 +1,12 @@
 <script>
-import ButtonDropdown from '@shell/components/ButtonDropdown';
-import Mount from '@shell/edit/workload/storage/Mount';
+import { clone } from '@shell/utils/object';
 import { _VIEW } from '@shell/config/query-params';
-import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { randomStr } from '@shell/utils/string';
 
+import Mount from '@shell/edit/workload/storage/Mount';
+import ButtonDropdown from '@shell/components/ButtonDropdown';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
+
 export default {
   name:       'ContainerMountPaths',
   components: {
@@ -109,7 +111,7 @@ export default {
       const names = volumeMounts.map(({ name }) => name);
 
       // Extract storage volumes to allow mutation, if matches mount map
-      return this.value.volumes.filter((volume) => names.includes(volume.name));
+      return clone(this.value.volumes.filter((volume) => names.includes(volume.name)));
     },
 
     getSelectedContainerVolumes() {
@@ -118,7 +120,7 @@ export default {
       const names = volumeMounts.map(({ name }) => name);
 
       // Extract storage volumes to allow mutation, if matches mount map
-      return this.value.volumes.filter((volume) => names.includes(volume.name));
+      return clone(this.value.volumes.filter((volume) => names.includes(volume.name)));
     },
 
     /**

package/edit/workload/storage/__tests__/Storage.test.ts

@@ -33,7 +33,7 @@ describe('component: Storage', () => {
           t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
           $store: {
             getters: {
-              'i18n/t':      jest.fn(),
+              'i18n/t':      jest.fn().mockImplementation((key: string) => key),
               'i18n/exists': jest.fn()
             }
           }
@@ -63,7 +63,7 @@ describe('component: Storage', () => {
           t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
           $store: {
             getters: {
-              'i18n/t':      jest.fn(),
+              'i18n/t':      jest.fn().mockImplementation((key: string) => key),
               'i18n/exists': jest.fn()
             }
           }

package/edit/workload/storage/persistentVolumeClaim/__tests__/persistentvolumeclaim.test.ts

@@ -0,0 +1,36 @@
+import { createLocalVue, mount } from '@vue/test-utils';
+import PVC from '@shell/edit/workload/storage/persistentVolumeClaim/persistentvolumeclaim.vue';
+
+describe('component: PVC', () => {
+  // TODO: Enable test after allowing to test async data with either #9711 or #9322
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should initialize storage class on create mode', async() => {
+    const localVue = createLocalVue();
+    const name = 'test';
+    const wrapper = mount(PVC, {
+      localVue,
+      propsData: {
+        savePvcHookName: '',
+        value:           { spec: { resources: { requests: {} } } }
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'cluster/findAll': [{
+              metadata: {
+                name,
+                annotations: { 'storageclass.beta.kubernetes.io/is-default-class': true }
+              }
+            }],
+            'i18n/t': jest.fn()
+          }
+        }
+      },
+      stubs: { LabeledSelect: { template: '<input />' } }
+    });
+
+    const inputElement = wrapper.find('[data-testid="storage-class-name"]').element as HTMLInputElement;
+
+    expect(inputElement.value).toBe(name);
+  });
+});

package/edit/workload/storage/persistentVolumeClaim/persistentvolumeclaim.vue

@@ -48,6 +48,7 @@ export default {
 
     this.storageClasses = hash.storageClasses;
     this.persistentVolumes = hash.persistentVolumes;
+    this.$set(this.spec, 'storageClassName', (this.spec.storageClassName || this.defaultStorageClassName));
   },
 
   data() {
@@ -62,7 +63,7 @@ export default {
     return {
       storageClasses:    [],
       persistentVolumes: [],
-      createPV:          true,
+      isCreatePV:        true,
       spec,
       uniqueId:          new Date().getTime() // Allows form state to be individually deleted
     };
@@ -73,6 +74,13 @@ export default {
       return this.storageClasses.map((sc) => sc.metadata.name);
     },
 
+    /**
+     * Required to initialize with default SC on creation
+     */
+    defaultStorageClassName() {
+      return this.storageClasses.find((sc) => sc.metadata?.annotations?.['storageclass.beta.kubernetes.io/is-default-class'] || sc.metadata?.annotations?.['storageclass.kubernetes.io/is-default-class'])?.metadata.name;
+    },
+
     availablePVs() {
       return this.persistentVolumes.reduce((total, each) => {
         if (each?.status?.phase === 'Available') {
@@ -91,12 +99,11 @@ export default {
   },
 
   watch: {
-    createPV(neu, old) {
+    isCreatePV(neu) {
       if (neu) {
         delete this.spec.volumeName;
         this.spec.resources.requests.storage = null;
       } else {
-        this.spec.storageClassName = '';
         this.spec.resources.requests.storage = null;
       }
     },
@@ -161,8 +168,8 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <RadioGroup
-          v-model="createPV"
-          name="createPV"
+          v-model="isCreatePV"
+          name="isCreatePV"
           :options="[true, false]"
           :labels="[t('persistentVolumeClaim.source.options.new'), t('persistentVolumeClaim.source.options.existing')]"
           :mode="mode"
@@ -170,8 +177,9 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledSelect
-          v-if="createPV"
+          v-if="isCreatePV"
           v-model="spec.storageClassName"
+          data-testid="storage-class-name"
           :mode="mode"
           :required="true"
           :label="t('persistentVolumeClaim.storageClass')"
@@ -221,7 +229,7 @@ export default {
         </div>
       </div>
       <div
-        v-if="createPV"
+        v-if="isCreatePV"
         class="col span-6"
       >
         <UnitInput

package/initialize/App.js

@@ -1,3 +1,5 @@
+// Taken from @nuxt/vue-app/template/App.js
+
 import Vue from 'vue';
 
 import { getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError } from '../utils/nuxt';

package/initialize/client.js

@@ -1,3 +1,5 @@
+// Taken from @nuxt/vue-app/template/client.js
+
 import Vue from 'vue';
 import fetch from 'unfetch';
 import middleware from '../config/middleware.js';
@@ -21,6 +23,10 @@ import { createApp, NuxtError } from './index.js';
 import fetchMixin from '../mixins/fetch.client';
 import NuxtLink from '../components/nuxt/nuxt-link.client.js'; // should be included after ./index.js
 
+// Mimic old @nuxt/vue-app/template/client.js
+const isDev = process.env.dev;
+const debug = isDev;
+
 // Fetch mixin
 if (!Vue.__nuxt__fetch__mixin__) {
   Vue.mixin(fetchMixin);
@@ -51,69 +57,71 @@ if ($config._app) {
 
 Object.assign(Vue.config, { silent: false, performance: true });
 
-const logs = NUXT.logs || [];
+if (debug) {
+  const logs = NUXT.logs || [];
 
-if (logs.length > 0) {
-  const ssrLogStyle = 'background: #2E495E;border-radius: 0.5em;color: white;font-weight: bold;padding: 2px 0.5em;';
+  if (logs.length > 0) {
+    const ssrLogStyle = 'background: #2E495E;border-radius: 0.5em;color: white;font-weight: bold;padding: 2px 0.5em;';
 
-  console.group && console.group('%cNuxt SSR', ssrLogStyle); // eslint-disable-line no-console
-  logs.forEach((logObj) => (console[logObj.type] || console.log)(...logObj.args)); // eslint-disable-line no-console
-  delete NUXT.logs;
-  console.groupEnd && console.groupEnd(); // eslint-disable-line no-console
-}
+    console.group && console.group('%cNuxt SSR', ssrLogStyle); // eslint-disable-line no-console
+    logs.forEach((logObj) => (console[logObj.type] || console.log)(...logObj.args)); // eslint-disable-line no-console
+    delete NUXT.logs;
+    console.groupEnd && console.groupEnd(); // eslint-disable-line no-console
+  }
 
-// Setup global Vue error handler
-if (!Vue.config.$nuxt) {
-  const defaultErrorHandler = Vue.config.errorHandler;
+  // Setup global Vue error handler
+  if (!Vue.config.$nuxt) {
+    const defaultErrorHandler = Vue.config.errorHandler;
 
-  Vue.config.errorHandler = async(err, vm, info, ...rest) => {
+    Vue.config.errorHandler = async(err, vm, info, ...rest) => {
     // Call other handler if exist
-    let handled = null;
+      let handled = null;
 
-    if (typeof defaultErrorHandler === 'function') {
-      handled = defaultErrorHandler(err, vm, info, ...rest);
-    }
-    if (handled === true) {
-      return handled;
-    }
+      if (typeof defaultErrorHandler === 'function') {
+        handled = defaultErrorHandler(err, vm, info, ...rest);
+      }
+      if (handled === true) {
+        return handled;
+      }
 
-    if (vm && vm.$root) {
-      const nuxtApp = Object.keys(Vue.config.$nuxt)
-        .find((nuxtInstance) => vm.$root[nuxtInstance]);
+      if (vm && vm.$root) {
+        const nuxtApp = Object.keys(Vue.config.$nuxt)
+          .find((nuxtInstance) => vm.$root[nuxtInstance]);
 
-      // Show Nuxt Error Page
-      if (nuxtApp && vm.$root[nuxtApp].error && info !== 'render function') {
-        const currentApp = vm.$root[nuxtApp];
+        // Show Nuxt Error Page
+        if (nuxtApp && vm.$root[nuxtApp].error && info !== 'render function') {
+          const currentApp = vm.$root[nuxtApp];
 
-        // Load error layout
-        let layout = (NuxtError.options || NuxtError).layout;
+          // Load error layout
+          let layout = (NuxtError.options || NuxtError).layout;
 
-        if (typeof layout === 'function') {
-          layout = layout(currentApp.context);
-        }
-        if (layout) {
-          await currentApp.loadLayout(layout).catch(() => {});
-        }
-        currentApp.setLayout(layout);
+          if (typeof layout === 'function') {
+            layout = layout(currentApp.context);
+          }
+          if (layout) {
+            await currentApp.loadLayout(layout).catch(() => {});
+          }
+          currentApp.setLayout(layout);
 
-        currentApp.error(err);
+          currentApp.error(err);
+        }
       }
-    }
 
-    if (typeof defaultErrorHandler === 'function') {
-      return handled;
-    }
+      if (typeof defaultErrorHandler === 'function') {
+        return handled;
+      }
 
-    // Log to console
-    if (process.env.NODE_ENV !== 'production') {
-      console.error(err); // eslint-disable-line no-console
-    } else {
-      console.error(err.message || err); // eslint-disable-line no-console
-    }
-  };
-  Vue.config.$nuxt = {};
+      // Log to console
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(err); // eslint-disable-line no-console
+      } else {
+        console.error(err.message || err); // eslint-disable-line no-console
+      }
+    };
+    Vue.config.$nuxt = {};
+  }
+  Vue.config.$nuxt.$nuxt = true;
 }
-Vue.config.$nuxt.$nuxt = true;
 
 const errorHandler = Vue.config.errorHandler || console.error; // eslint-disable-line no-console
 
@@ -623,7 +631,9 @@ function fixPrepatch(to, ___) {
     checkForErrors(this);
 
     // Hot reloading
-    setTimeout(() => hotReloadAPI(this), 100);
+    if (isDev) {
+      setTimeout(() => hotReloadAPI(this), 100);
+    }
   });
 }
 
@@ -794,8 +804,10 @@ async function mountApp(__app) {
       // Call window.{{globals.readyCallback}} callbacks
       nuxtReady(_app);
 
-      // Enable hot reloading
-      hotReloadAPI(_app);
+      if (isDev) {
+        // Enable hot reloading
+        hotReloadAPI(_app);
+      }
     });
   };
 

package/initialize/index.js

@@ -1,3 +1,5 @@
+// Taken from @nuxt/vue-app/template/index.js
+
 import Vue from 'vue';
 import Meta from 'vue-meta';
 import ClientOnly from 'vue-client-only';
@@ -34,8 +36,8 @@ import '../plugins/global-formatters';
 import '../plugins/trim-whitespace';
 import '../plugins/extend-router';
 
-import consolePlugin from '../plugins/console';
 import intNumber from '../plugins/int-number';
+import positiveIntNumber from '../plugins/positive-int-number.js';
 import nuxtClientInit from '../plugins/nuxt-client-init';
 import replaceAll from '../plugins/replaceall';
 import backButton from '../plugins/back-button';
@@ -272,14 +274,14 @@ async function createApp(ssrContext, config = {}) {
     await axiosShell(app.context, inject);
   }
 
-  if (process.client && typeof consolePlugin === 'function') {
-    await consolePlugin(app.context, inject);
-  }
-
   if (process.client && typeof intNumber === 'function') {
     await intNumber(app.context, inject);
   }
 
+  if (process.client && typeof positiveIntNumber === 'function') {
+    await positiveIntNumber(app.context, inject);
+  }
+
   if (process.client && typeof nuxtClientInit === 'function') {
     await nuxtClientInit(app.context, inject);
   }

package/layouts/default.vue

@@ -70,7 +70,7 @@ export default {
 
   computed: {
     ...mapState(['managementReady', 'clusterReady']),
-    ...mapGetters(['clusterId', 'currentProduct', 'isRancherInHarvester']),
+    ...mapGetters(['clusterId', 'currentProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
 
     afterLoginRoute: mapPref(AFTER_LOGIN_ROUTE),
 
@@ -237,7 +237,7 @@ export default {
     <div
       v-if="managementReady"
       class="dashboard-content"
-      :class="{[pinClass]: true}"
+      :class="{[pinClass]: true, 'dashboard-padding-left': showTopLevelMenu}"
     >
       <Header />
       <SideNav
@@ -318,6 +318,14 @@ export default {
     overflow-y: auto;
     min-height: 0px;
 
+    &.dashboard-padding-left {
+    padding-left: $app-bar-collapsed-width;
+
+      .overlay-content-mode {
+        left: calc(var(--nav-width) + $app-bar-collapsed-width);
+      }
+   }
+
     &.pin-right {
       grid-template-areas:
         "header  header  header"

package/layouts/home.vue

@@ -8,7 +8,7 @@ import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
 
@@ -36,6 +36,7 @@ export default {
   computed: {
     themeShortcut: mapPref(THEME_SHORTCUT),
     ...mapState(['managementReady']),
+    ...mapGetters(['showTopLevelMenu']),
   },
 
   methods: {
@@ -57,7 +58,10 @@ export default {
     <AwsComplianceBanner />
     <AzureWarning />
 
-    <div class="dashboard-content">
+    <div
+      class="dashboard-content"
+      :class="{'dashboard-padding-left': showTopLevelMenu}"
+    >
       <Header
         v-if="managementReady"
         :simple="true"

package/layouts/plain.vue

@@ -12,6 +12,7 @@ import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
+import { mapGetters } from 'vuex';
 
 export default {
 
@@ -40,7 +41,10 @@ export default {
     };
   },
 
-  computed: { themeShortcut: mapPref(THEME_SHORTCUT) },
+  computed: {
+    themeShortcut: mapPref(THEME_SHORTCUT),
+    ...mapGetters(['showTopLevelMenu']),
+  },
 
   methods: {
     toggleTheme() {
@@ -59,7 +63,10 @@ export default {
     <AwsComplianceBanner />
     <AzureWarning />
 
-    <div class="dashboard-content">
+    <div
+      class="dashboard-content"
+      :class="{'dashboard-padding-left': showTopLevelMenu}"
+    >
       <Header :simple="true" />
       <main class="main-layout">
         <IndentedPanel class="pt-20">

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

@@ -1,7 +1,7 @@
 <script>
 import FleetClusters from '@shell/components/fleet/FleetClusters';
 import { FLEET, MANAGEMENT } from '@shell/config/types';
-import { isHarvesterCluster } from '@shell/utils/cluster';
+import { filterOnlyKubernetesClusters } from '@shell/utils/cluster';
 import { Banner } from '@components/Banner';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 
@@ -56,7 +56,7 @@ export default {
     },
 
     filteredRows() {
-      return this.fleetClusters.filter((c) => !isHarvesterCluster(c));
+      return filterOnlyKubernetesClusters(this.fleetClusters, this.$store);
     },
 
     fleetClusters() {

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

@@ -82,7 +82,7 @@ export default {
     },
 
     enableRowActions() {
-      const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
+      const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.FEATURE);
 
       return schema?.resourceMethods?.includes('PUT');
     },

package/machine-config/amazonec2.vue

@@ -303,6 +303,7 @@ export default {
     },
 
     'value.region'() {
+      this.updateNetwork();
       this.$fetch();
     },
 

package/machine-config/vmwarevsphere.vue

@@ -14,7 +14,7 @@ import ArrayListSelect from '@shell/components/form/ArrayListSelect';
 import YamlEditor from '@shell/components/YamlEditor';
 import { get, set } from '@shell/utils/object';
 import { integerString, keyValueStrings } from '@shell/utils/computed';
-import { _CREATE } from '@shell/config/query-params';
+import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 
 const SENTINEL = '__SENTINEL__';
 const VAPP_MODE = {
@@ -136,6 +136,11 @@ function createOptionHelpers(name) {
   };
 }
 
+const errorActions = Object.freeze({
+  CREATE: 'create',
+  DELETE: 'delete',
+});
+
 export default {
   components: {
     ArrayListSelect, Card, KeyValue, Loading, LabeledInput, LabeledSelect, Banner, UnitInput, RadioGroup, YamlEditor
@@ -144,6 +149,10 @@ export default {
   mixins: [CreateEditView],
 
   props: {
+    poolId: {
+      type:    String,
+      default: '',
+    },
     credentialId: {
       type:     String,
       required: true,
@@ -246,6 +255,7 @@ export default {
       vAppOptions,
       vappMode:                 getInitialVappMode(this.value),
       osOptions:                OS_OPTIONS,
+      validationErrors:         {},
     };
   },
 
@@ -347,6 +357,9 @@ export default {
       }
 
       this.updateVappOptions(INITIAL_VAPP_OPTIONS);
+    },
+    validationErrors(value) {
+      this.$emit('error', value);
     }
   },
 
@@ -384,9 +397,17 @@ export default {
       const valueInContent = content.find((c) => c.value === this.value.datacenter );
 
       if (!valueInContent) {
-        set(this.value, 'datacenter', options[0]);
-        set(this.value, 'cloneFrom', undefined);
-        set(this.value, 'useDataStoreCluster', false);
+        if (this.mode === _CREATE) {
+          set(this.value, 'datacenter', options[0]);
+          set(this.value, 'cloneFrom', undefined);
+          set(this.value, 'useDataStoreCluster', false);
+        }
+
+        if ([_EDIT, _VIEW].includes(this.mode)) {
+          this.manageErrors(errorActions.CREATE, 'datacenter');
+        }
+      } else {
+        this.manageErrors(errorActions.DELETE, 'datacenter');
       }
 
       set(this, 'dataCentersResults', content);
@@ -582,11 +603,19 @@ export default {
       };
 
       if (!isValueInContent()) {
-        const value = isArray ? [] : content[0]?.value;
+        if (this.mode === _CREATE) {
+          const value = isArray ? [] : content[0]?.value;
+
+          if (value !== SENTINEL) {
+            set(this.value, key, value);
+          }
+        }
 
-        if (value !== SENTINEL) {
-          set(this.value, key, value);
+        if ([_EDIT, _VIEW].includes(this.mode)) {
+          this.manageErrors(errorActions.CREATE, key);
         }
+      } else {
+        this.manageErrors(errorActions.DELETE, key);
       }
     },
 
@@ -654,6 +683,18 @@ export default {
       set(this.value, 'vappProperty', opts.vappProperty);
       this.initKeyValueParams('value.vappProperty', 'initVappArray');
     },
+
+    manageErrors(action = errorActions.CREATE, key) {
+      if (action === errorActions.CREATE) {
+        const keys = [key, ...(this.validationErrors[this.poolId] || [])];
+
+        this.validationErrors = Object.assign({}, this.validationErrors, { [this.poolId]: keys });
+      }
+
+      if (action === errorActions.DELETE && this.validationErrors[this.poolId]) {
+        this.validationErrors = Object.assign({}, this.validationErrors, { [this.poolId]: this.validationErrors[this.poolId].filter((x) => x === key) }) ;
+      }
+    },
   }
 };
 </script>

package/mixins/brand.js

@@ -141,14 +141,6 @@ export default {
             }).then((setting) => setting.save());
           }
         }
-      } else if (!neu) {
-        const brandSetting = findBy(this.globalSettings, 'id', SETTING.BRAND);
-
-        if (brandSetting && brandSetting.value !== '') {
-          // 2) There should not be a brand... but there is a brand setting
-          brandSetting.value = '';
-          brandSetting.save();
-        }
       }
     }
   },

package/mixins/child-hook.js

@@ -25,14 +25,14 @@ export default {
     },
 
     async applyHooks(key, ...args) {
-      if ( !key ) {
+      if (!key) {
         throw new Error('Must specify key');
       }
 
       const hooks = sortBy(this[key] || [], ['priority', 'name']);
       const out = {};
 
-      for ( const x of hooks ) {
+      for (const x of hooks) {
         console.debug('Applying hook', x.name); // eslint-disable-line no-console
         out[x.name] = await x.fn.apply(x.fnContext || this, args);
       }

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

@@ -114,8 +114,8 @@ export default {
     // Detect and resolve conflicts from a 409 response.
     // If they are resolved, return a false-y value
     // Else they can't be resolved, return an array of errors to show to the user.
-    conflict() {
-      return handleConflict(this.initialValue.toJSON(), this.value, this.liveValue, this.$store.getters, this.$store);
+    async conflict() {
+      return await handleConflict(this.initialValue.toJSON(), this.value, this.liveValue, this.$store.getters, this.$store, this.storeOverride || this.$store.getters['currentStore'](this.value.type));
     },
 
     async save(buttonDone, url, depth = 0) {
@@ -159,7 +159,7 @@ export default {
       } catch (err) {
         // Conflict, the resource being edited has changed since starting editing
         if ( err.status === 409 && depth === 0 && this.isEdit) {
-          const errors = this.conflict();
+          const errors = await this.conflict();
 
           if ( errors === false ) {
             // It was automatically figured out, save again