@rancher/shell 2.0.1 → 3.0.0-rc.2

package/edit/workload/storage/ephemeralVolume/index.vue

@@ -61,7 +61,7 @@ export default {
       <div class="row mb-10">
         <div class="col span-6">
           <LabeledSelect
-            v-model="value.csi.driver"
+            v-model:value="value.csi.driver"
             :mode="mode"
             :label="t('workload.storage.driver')"
             :options="driverOpts"
@@ -82,14 +82,14 @@ export default {
       <div class="row">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.csi.fsType"
+            v-model:value="value.csi.fsType"
             :mode="mode"
             :label="t('workload.storage.csi.fsType')"
           />
         </div>
         <div class="col span-6">
           <Checkbox
-            v-model="value.csi.readOnly"
+            v-model:value="value.csi.readOnly"
             :mode="mode"
             :label="t('workload.storage.readOnly')"
           />

package/edit/workload/storage/gcePersistentDisk.vue

@@ -29,7 +29,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.name"
+          v-model:value="value.name"
           :required="true"
           :mode="mode"
           :label="t('workload.storage.volumeName')"
@@ -37,7 +37,7 @@ export default {
       </div>
       <div class="col span-6">
         <Checkbox
-          v-model="value.gcePersistentDisk.readOnly"
+          v-model:value="value.gcePersistentDisk.readOnly"
           :mode="mode"
           :label="t('workload.storage.readOnly')"
         />
@@ -46,7 +46,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.gcePersistentDisk.pdName"
+          v-model:value="value.gcePersistentDisk.pdName"
           :mode="mode"
           :label="t('workload.storage.csi.pdName')"
           :required="true"
@@ -63,7 +63,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.gcePersistentDisk.fsType"
+          v-model:value="value.gcePersistentDisk.fsType"
           :mode="mode"
           :label="t('workload.storage.csi.fsType')"
         />

package/edit/workload/storage/hostPath.vue

@@ -73,7 +73,7 @@ export default {
 
   created() {
     if (!this.value.hostPath.type) {
-      this.$set(this.value.hostPath, 'type', '');
+      this.value.hostPath['type'] = '';
     }
   },
 
@@ -85,7 +85,7 @@ export default {
       <div class="row mb-10">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.name"
+            v-model:value="value.name"
             :required="true"
             :mode="mode"
             :label="t('workload.storage.volumeName')"
@@ -95,7 +95,7 @@ export default {
       <div class="row mb-10">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.hostPath.path"
+            v-model:value="value.hostPath.path"
             :required="true"
             :mode="mode"
             :label="t('workload.storage.nodePath')"
@@ -103,7 +103,7 @@ export default {
         </div>
         <div class="col span-6">
           <LabeledSelect
-            v-model="value.hostPath.type"
+            v-model:value="value.hostPath.type"
             :mode="mode"
             :options="typeOpts"
             :label="t('workload.storage.hostPath.label')"

package/edit/workload/storage/index.vue

@@ -6,6 +6,7 @@ import CodeMirror from '@shell/components/CodeMirror';
 import jsyaml from 'js-yaml';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { randomStr } from '@shell/utils/string';
+import { uniq } from '@shell/utils/array';
 
 export default {
   name: 'Storage',
@@ -89,13 +90,13 @@ export default {
       const customVolumeTypes = require
         .context('@shell/edit/workload/storage', false, /^.*\.vue$/)
         .keys()
-        .map((path) => path.replace(/(\.\/)|(.vue)/g, ''))
+        .map((path) => path.replace(/(\.\/)|(.vue)/g, '').split('/').findLast(() => true))
         .filter((file) => !excludedFiles.includes(file));
 
-      return [
+      return uniq([
         ...customVolumeTypes,
         ...defaultVolumeTypes
-      ]
+      ])
         .sort()
         .map((volumeType) => ({
           label:  this.t(`workload.storage.subtypes.${ volumeType }`),
@@ -129,7 +130,7 @@ export default {
      */
     initializeStorage() {
       if (!this.value.volumes) {
-        this.$set(this.value, 'volumes', []);
+        this.value['volumes'] = [];
       }
     },
 
@@ -144,33 +145,19 @@ export default {
 
     addVolume(type) {
       const name = `vol-${ randomStr(5).toLowerCase() }`;
+      const newVolume = { name, _type: type };
 
       if (type === 'createPVC') {
-        this.value.volumes.push({
-          _type:                 'createPVC',
-          persistentVolumeClaim: {},
-          name,
-        });
+        newVolume.persistentVolumeClaim = {};
       } else if (type === 'csi') {
-        this.value.volumes.push({
-          _type: type,
-          csi:   { volumeAttributes: {} },
-          name,
-        });
+        newVolume.csi = { volumeAttributes: {} };
       } else if (type === 'emptyDir') {
-        this.value.volumes.push({
-          _type:    type,
-          emptyDir: { medium: '' },
-          name,
-        });
+        newVolume.emptyDir = { medium: '' };
       } else {
-        this.value.volumes.push({
-          _type:  type,
-          [type]: {},
-          name,
-        });
+        newVolume[type] = {};
       }
 
+      this.value.volumes = [...this.value.volumes, newVolume];
       // this.container.volumeMounts.push({ name });
     },
 
@@ -250,8 +237,7 @@ export default {
   <div>
     <!-- Storage Volumes -->
     <ArrayListGrouped
-      :key="value.volumes.length"
-      v-model="value.volumes"
+      v-model:value="value.volumes"
       :mode="mode"
       @remove="removeVolume"
     >
@@ -312,7 +298,7 @@ export default {
   margin: 20px 0px 20px 0px;
   position: relative;
 
-  ::v-deep .code-mirror {
+  :deep() .code-mirror {
     .CodeMirror {
       background-color: var(--yaml-editor-bg);
       & .CodeMirror-gutters {

package/edit/workload/storage/nfs.vue

@@ -41,7 +41,7 @@ export default {
       <div class="row mb-10">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.name"
+            v-model:value="value.name"
             :required="true"
             :mode="mode"
             :label="t('workload.storage.volumeName')"
@@ -49,7 +49,7 @@ export default {
         </div>
         <div class="col span-6">
           <Checkbox
-            v-model="value.nfs.readOnly"
+            v-model:value="value.nfs.readOnly"
             :mode="mode"
             :label="t('workload.storage.readOnly')"
           />
@@ -58,7 +58,7 @@ export default {
       <div class="row mb-10">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.nfs.path"
+            v-model:value="value.nfs.path"
             :required="true"
             :mode="mode"
             :label="t('workload.storage.path')"
@@ -66,7 +66,7 @@ export default {
         </div>
         <div class="col span-6">
           <LabeledInput
-            v-model="value.nfs.server"
+            v-model:value="value.nfs.server"
             :required="true"
             :mode="mode"
             :label="t('workload.storage.server')"

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

@@ -1,32 +1,34 @@
-import { createLocalVue, mount } from '@vue/test-utils';
+import { 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: {
+      props: {
         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()
+
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              'cluster/findAll': [{
+                metadata: {
+                  name,
+                  annotations: { 'storageclass.beta.kubernetes.io/is-default-class': true }
+                }
+              }],
+              'i18n/t': jest.fn()
+            }
           }
-        }
+        },
+
+        stubs: { LabeledSelect: { template: '<input />' } },
       },
-      stubs: { LabeledSelect: { template: '<input />' } }
     });
 
     const inputElement = wrapper.find('[data-testid="storage-class-name"]').element as HTMLInputElement;

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

@@ -73,7 +73,7 @@ export default {
     const pvc = await this.$store.dispatch('cluster/create', data);
 
     pvc.applyDefaults();
-    this.$set(this.value, '__newPvc', pvc);
+    this.value['__newPvc'] = pvc;
   },
 
   computed: {
@@ -112,7 +112,7 @@ export default {
       >
         <PersistentVolumeClaim
           v-if="value.__newPvc"
-          v-model="value.__newPvc"
+          v-model:value="value.__newPvc"
           :mode="mode"
           :register-before-hook="registerBeforeHook"
           :save-pvc-hook-name="savePvcHookName"
@@ -122,7 +122,7 @@ export default {
       <div class="row mb-10">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.name"
+            v-model:value="value.name"
             :required="true"
             :mode="mode"
             :label="t('workload.storage.volumeName')"
@@ -131,7 +131,7 @@ export default {
         <div class="col span-6">
           <LabeledSelect
             v-if="!createNew"
-            v-model="value.persistentVolumeClaim.claimName"
+            v-model:value="value.persistentVolumeClaim.claimName"
             :required="true"
             :mode="mode"
             :label="t('workload.storage.subtypes.persistentVolumeClaim')"
@@ -142,7 +142,7 @@ export default {
       </div>
       <div class="row">
         <Checkbox
-          v-model="value.persistentVolumeClaim.readOnly"
+          v-model:value="value.persistentVolumeClaim.readOnly"
           :mode="mode"
           :label="t('workload.storage.readOnly')"
         />

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

@@ -48,17 +48,17 @@ export default {
 
     this.storageClasses = hash.storageClasses;
     this.persistentVolumes = hash.persistentVolumes;
-    this.$set(this.spec, 'storageClassName', (this.spec.storageClassName || this.defaultStorageClassName));
+    this.spec['storageClassName'] = (this.spec.storageClassName || this.defaultStorageClassName);
   },
 
   data() {
     const spec = this.value.spec;
 
     if (!this.value.metadata) {
-      this.$set(this.value, 'metadata', {});
+      this.value['metadata'] = {};
     }
 
-    this.$set(this.value.spec, 'accessModes', this.value.spec.accessModes || []);
+    this.value.spec['accessModes'] = this.value.spec.accessModes || [];
 
     return {
       storageClasses:    [],
@@ -119,7 +119,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.$emit('removePvcForm', this.savePvcHookName + this.uniqueId);
   },
 
@@ -133,8 +133,8 @@ export default {
     },
 
     updatePV(pv) {
-      this.$set(this.spec, 'volumeName', pv.metadata.name);
-      this.$set(this.spec, 'storageClassName', (pv.spec.storageClassName || ''));
+      this.spec['volumeName'] = pv.metadata.name;
+      this.spec['storageClassName'] = (pv.spec.storageClassName || '');
       this.spec.resources.requests.storage = pv?.spec?.capacity?.storage;
     },
 
@@ -158,18 +158,18 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.metadata.name"
+          v-model:value="value.metadata.name"
           :mode="mode"
           :label="t('persistentVolumeClaim.name')"
           :required="true"
-          @input="$emit('input', value)"
+          @update:value="$emit('update:value', value)"
         />
       </div>
     </div>
     <div class="row mb-10">
       <div class="col span-6">
         <RadioGroup
-          v-model="isCreatePV"
+          v-model:value="isCreatePV"
           name="isCreatePV"
           :options="[true, false]"
           :labels="[t('persistentVolumeClaim.source.options.new'), t('persistentVolumeClaim.source.options.existing')]"
@@ -179,7 +179,7 @@ export default {
       <div class="col span-6">
         <LabeledSelect
           v-if="isCreatePV"
-          v-model="spec.storageClassName"
+          v-model:value="spec.storageClassName"
           data-testid="storage-class-name"
           :mode="mode"
           :required="true"
@@ -194,7 +194,7 @@ export default {
           :mode="mode"
           :label="t('persistentVolumeClaim.volumes')"
           :options="availablePVs"
-          @input="updatePV"
+          @update:value="updatePV"
         />
       </div>
     </div>
@@ -213,19 +213,19 @@ export default {
             :mode="mode"
             :value="value.spec.accessModes.includes('ReadWriteOnce')"
             :label="t('persistentVolumeClaim.accessModesOptions.singleNodeRW')"
-            @input="e=>updateMode('ReadWriteOnce', e)"
+            @update:value="e=>updateMode('ReadWriteOnce', e)"
           />
           <Checkbox
             :mode="mode"
             :value="value.spec.accessModes.includes('ReadOnlyMany')"
             :label="t('persistentVolumeClaim.accessModesOptions.manyNodeR')"
-            @input="e=>updateMode('ReadOnlyMany', e)"
+            @update:value="e=>updateMode('ReadOnlyMany', e)"
           />
           <Checkbox
             :mode="mode"
             :value="value.spec.accessModes.includes('ReadWriteMany')"
             :label="t('persistentVolumeClaim.accessModesOptions.manyNodeRW')"
-            @input="e=>updateMode('ReadWriteMany', e)"
+            @update:value="e=>updateMode('ReadWriteMany', e)"
           />
         </div>
       </div>
@@ -234,7 +234,7 @@ export default {
         class="col span-6"
       >
         <UnitInput
-          v-model="spec.resources.requests.storage"
+          v-model:value="spec.resources.requests.storage"
           :mode="mode"
           :label="t('persistentVolumeClaim.capacity')"
           :increment="1024"

package/edit/workload/storage/secret.vue

@@ -101,9 +101,9 @@ export default {
         const dec = parseInt(neu, 8);
 
         if (isconfigMap) {
-          this.$set(this.value.configMap, 'defaultMode', dec);
+          this.value.configMap['defaultMode'] = dec;
         } else {
-          this.$set(this.value.secret, 'defaultMode', dec);
+          this.value.secret['defaultMode'] = dec;
         }
       },
     },
@@ -114,9 +114,9 @@ export default {
       },
       set(neu) {
         if (this.type === 'configMap') {
-          this.$set(this.value.configMap, 'optional', neu);
+          this.value.configMap['optional'] = neu;
         } else {
-          this.$set(this.value.secret, 'optional', neu);
+          this.value.secret['optional'] = neu;
         }
       }
     },
@@ -133,7 +133,7 @@ export default {
       <div class="row mb-10">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.name"
+            v-model:value="value.name"
             :required="true"
             :mode="mode"
             :label="t('workload.storage.volumeName')"
@@ -142,7 +142,7 @@ export default {
 
         <div class="col span-6">
           <LabeledInput
-            v-model="defaultMode"
+            v-model:value="defaultMode"
             :mode="mode"
             :label="t('workload.storage.defaultMode')"
           />
@@ -152,7 +152,7 @@ export default {
         <div class="col span-6">
           <LabeledSelect
             v-if="type==='secret'"
-            v-model="value[type].secretName"
+            v-model:value="value[type].secretName"
             :options="secretNames"
             :mode="mode"
             :required="true"
@@ -161,7 +161,7 @@ export default {
           />
           <LabeledSelect
             v-else-if="type==='configMap'"
-            v-model="value[type].name"
+            v-model:value="value[type].name"
             :options="configMapNames"
             :required="true"
             :mode="mode"
@@ -171,7 +171,7 @@ export default {
         </div>
         <div class="col span-6">
           <RadioGroup
-            v-model="optional"
+            v-model:value="optional"
             :mode="mode"
             name="optional"
             :row="true"

package/edit/workload/storage/vsphereVolume.vue

@@ -28,7 +28,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.name"
+          v-model:value="value.name"
           :required="true"
           :mode="mode"
           :label="t('workload.storage.volumeName')"
@@ -38,7 +38,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.vsphereVolume.storagePolicyID"
+          v-model:value="value.vsphereVolume.storagePolicyID"
           :mode="mode"
           :label="t('workload.storage.csi.storagePolicyID')"
           :required="true"
@@ -55,7 +55,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.vsphereVolume.volumePath"
+          v-model:value="value.vsphereVolume.volumePath"
           :mode="mode"
           :label="t('workload.storage.csi.volumePath')"
           :required="true"
@@ -63,7 +63,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.vsphereVolume.fsType"
+          v-model:value="value.vsphereVolume.fsType"
           :mode="mode"
           :label="t('workload.storage.csi.fsType')"
         />

package/initialize/App.vue

@@ -14,17 +14,19 @@ export default {
   created() {
     // add to window so we can listen when ready
     window.$globalApp = this;
-    Object.defineProperty(window, '$nuxt', {
-      get() {
-        const isHarvester = this.$globalApp?.$store.getters['currentCluster']?.isHarvester;
 
-        if (!isHarvester) {
+    // This is needed for Harvester https://github.com/rancher/dashboard/issues/10681
+    const isHarvester = this.$globalApp?.$store.getters['currentCluster']?.isHarvester;
+
+    if (!isHarvester) {
+      Object.defineProperty(window, '$nuxt', {
+        get() {
           console.warn('window.$nuxt is deprecated. It would be best to stop using globalState all together. For an alternative you can use window.$globalApp.'); // eslint-disable-line no-console
-        }
 
-        return window.$globalApp;
-      }
-    });
+          return window.$globalApp;
+        }
+      });
+    }
 
     this.refreshOnlineStatus();
     // Setup the listeners

package/initialize/app-extended.js

@@ -1,10 +1,6 @@
-// Taken from @nuxt/vue-app/template/index.js
-// This file was generated during Nuxt migration
-import AppView from '@shell/initialize/App';
 import { setContext, getRouteData } from '@shell/initialize/entry-helpers';
 import { extendRouter } from '@shell/config/router';
 import { extendStore } from '@shell/config/store';
-import { UPGRADED, _FLAGGED, _UNFLAG } from '@shell/config/query-params';
 import { installInjectedPlugins } from '@shell/initialize/install-plugins.js';
 import { normalizeURL } from 'ufo';
 
@@ -51,7 +47,6 @@ async function extendApp(vueApp) {
   const appPartials = {
     store,
     router,
-    ...AppView
   };
 
   // Make app available into store via this.app
@@ -61,30 +56,33 @@ async function extendApp(vueApp) {
   // Resolve route
 
   const path = getLocation(router.options.base, router.options.mode);
-  const route = router.resolve(path).route;
+  const route = router.resolve(path);
 
   // Set context to app.context
-  await setContext(appPartials, {
-    store,
-    route,
-    next,
-    payload: undefined,
-    req:     undefined,
-    res:     undefined
-  });
+  await setContext(
+    appPartials,
+    {
+      store,
+      route,
+      next,
+      payload: undefined,
+      req:     undefined,
+      res:     undefined
+    },
+  );
 
   await installInjectedPlugins(appPartials, vueApp);
 
   // Wait for async component to be resolved first
   await new Promise((resolve, reject) => {
     // Ignore 404s rather than blindly replacing URL in browser
-    const { route } = router.resolve(appPartials.context.route.fullPath);
+    const route = router.resolve(appPartials.context.route.fullPath);
 
     if (!route.matched.length) {
       return resolve();
     }
 
-    router.replace(appPartials.context.route.fullPath, resolve, (err) => {
+    router.replace(appPartials.context.route.fullPath).then(resolve, (err) => {
       // https://github.com/vuejs/vue-router/blob/v3.4.3/src/util/errors.js
       if (!err._isRouter) {
         return reject(err);
@@ -102,20 +100,6 @@ async function extendApp(vueApp) {
         resolve();
       });
     });
-
-    router.afterEach((to) => {
-      const upgraded = to.query[UPGRADED] === _FLAGGED;
-
-      if ( upgraded ) {
-        router.applyQuery({ [UPGRADED]: _UNFLAG });
-
-        store.dispatch('growl/success', {
-          title:   store.getters['i18n/t']('serverUpgrade.title'),
-          message: store.getters['i18n/t']('serverUpgrade.message'),
-          timeout: 0,
-        });
-      }
-    });
   });
 
   return {