@rancher/shell 3.0.0-rc.3 → 3.0.0-rc.4

package/edit/workload/Job.vue

@@ -6,6 +6,7 @@ import { RadioGroup } from '@components/Form/Radio';
 import { mapGetters } from 'vuex';
 
 export default {
+  emits:      ['update:value'],
   components: {
     UnitInput, LabeledInput, RadioGroup
   },
@@ -213,7 +214,7 @@ export default {
           class="col span-6"
         >
           <LabeledInput
-            v-model.number="successfulJobsHistoryLimit"
+            v-model:value.number="successfulJobsHistoryLimit"
             :mode="mode"
             label-key="workload.job.successfulJobsHistoryLimit.label"
             tooltip-key="workload.job.successfulJobsHistoryLimit.tip"
@@ -225,7 +226,7 @@ export default {
           class="col span-6"
         >
           <LabeledInput
-            v-model.number="failedJobsHistoryLimit"
+            v-model:value.number="failedJobsHistoryLimit"
             :mode="mode"
             label-key="workload.job.failedJobsHistoryLimit.label"
             tooltip-key="workload.job.failedJobsHistoryLimit.tip"

package/edit/workload/Upgrading.vue

@@ -8,6 +8,7 @@ import { mapGetters } from 'vuex';
 import InputWithSelect from '@shell/components/form/InputWithSelect';
 
 export default {
+  emits:      ['update:value'],
   components: {
     RadioGroup, UnitInput, InputWithSelect
   },

package/edit/workload/index.vue

@@ -6,6 +6,7 @@ import { mapGetters } from 'vuex';
 
 export default {
   name:   'Workload',
+  emits:  ['input'],
   mixins: [CreateEditView, FormValidation, WorkLoadMixin], // The order here is important since WorkLoadMixin contains some FormValidation configuration
   props:  {
     value: {
@@ -133,7 +134,7 @@ export default {
           class="col span-3"
         >
           <LabeledInput
-            v-model.number="spec.replicas"
+            v-model:value.number="spec.replicas"
             type="number"
             min="0"
             required
@@ -162,6 +163,7 @@ export default {
         :show-tabs-add-remove="true"
         :default-tab="defaultTab"
         :flat="true"
+        data-testid="workload-horizontal-tabs"
         @changed="changed"
       >
         <Tab
@@ -175,6 +177,7 @@ export default {
           <Tabbed
             :side-tabs="true"
             :weight="99"
+            :data-testid="`workload-container-tabs-${i}`"
           >
             <Tab
               :label="t('workload.container.titles.general')"
@@ -346,13 +349,13 @@ export default {
               :weight="tabWeightMap['storage']"
             >
               <ContainerMountPaths
-                v-model:value="podTemplateSpec"
+                v-model:container="allContainers[i]"
+                :value="podTemplateSpec"
                 :namespace="value.metadata.namespace"
                 :register-before-hook="registerBeforeHook"
                 :mode="mode"
                 :secrets="namespacedSecrets"
                 :config-maps="namespacedConfigMaps"
-                :container="allContainers[i]"
                 :save-pvc-hook-name="savePvcHookName"
                 @removePvcForm="clearPvcFormState"
               />
@@ -365,7 +368,10 @@ export default {
           :name="nameDisplayFor(type)"
           :weight="99"
         >
-          <Tabbed :side-tabs="true">
+          <Tabbed
+            data-testid="workload-general-tabs"
+            :side-tabs="true"
+          >
             <Tab
               name="labels"
               label-key="generic.labelsAndAnnotations"
@@ -403,13 +409,18 @@ export default {
           :name="'pod'"
           :weight="98"
         >
-          <Tabbed :side-tabs="true">
+          <Tabbed
+            data-testid="workload-pod-tabs"
+            :side-tabs="true"
+          >
             <Tab
               :label="t('workload.storage.title')"
               name="storage"
               :weight="tabWeightMap['storage']"
+              @active="$refs.storage.refresh()"
             >
               <Storage
+                ref="storage"
                 v-model:value="podTemplateSpec"
                 :namespace="value.metadata.namespace"
                 :register-before-hook="registerBeforeHook"
@@ -448,7 +459,7 @@ export default {
                   <div class="row">
                     <div class="col span-6">
                       <LabeledInput
-                        v-model.number="podTemplateSpec.priority"
+                        v-model:value.number="podTemplateSpec.priority"
                         :mode="mode"
                         :label="t('workload.scheduling.priority.priority')"
                       />
@@ -517,7 +528,7 @@ export default {
                 <div class="row">
                   <div class="col span-6">
                     <LabeledInput
-                      v-model.number="podFsGroup"
+                      v-model:value.number="podFsGroup"
                       type="number"
                       :mode="mode"
                       :label="t('workload.container.security.fsGroup')"

package/edit/workload/storage/ContainerMountPaths.vue

@@ -1,14 +1,16 @@
 <script>
-import { clone } from '@shell/utils/object';
+import { clone, set } from '@shell/utils/object';
 import { _VIEW } from '@shell/config/query-params';
-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',
+  name: 'ContainerMountPaths',
+
+  emits: ['update:container'],
+
   components: {
     ArrayListGrouped, ButtonDropdown, Mount
   },
@@ -36,13 +38,10 @@ export default {
   },
 
   data() {
+    // set volumeMount field
     this.initializeStorage();
 
-    return {
-      containerVolumes:         [],
-      storageVolumes:           this.getStorageVolumes(),
-      selectedContainerVolumes: this.getSelectedContainerVolumes()
-    };
+    return { selectedContainerVolumes: this.getSelectedContainerVolumes() };
   },
 
   computed: {
@@ -51,9 +50,9 @@ export default {
     },
 
     availableVolumeOptions() {
-      const containerVolumes = this.container.volumeMounts.map((item) => item.name);
+      const containerVolumes = (this.container?.volumeMounts || []).map((item) => item.name);
 
-      return this.value.volumes.filter((vol) => !containerVolumes.includes(vol.name)).map((item) => {
+      return (this.value?.volumes || []).filter((vol) => !containerVolumes.includes(vol.name)).map((item) => {
         return {
           label:  `${ item.name } (${ this.headerFor(item) })`,
           action: this.selectVolume,
@@ -64,27 +63,13 @@ export default {
   },
 
   watch: {
-    value(neu, old) {
-      this.selectedVolumes = this.getSelectedContainerVolumes();
-    },
-    storageVolumes(neu, old) {
-      // removeObjects(this.value.volumes, old);
-      // addObjects(this.value.volumes, neu);
-      const names = neu.reduce((all, each) => {
-        all.push(each.name);
-
-        return all;
-      }, []);
+    selectedContainerVolumes: {
+      deep: true,
+      handler(neu, old) {
+        const names = neu.map((item) => item.name);
 
-      this.container.volumeMounts = this.container.volumeMounts.filter((mount) => names.includes(mount.name));
-    },
-
-    selectedContainerVolumes(neu, old) {
-      // removeObjects(this.value.volumes, old);
-      // addObjects(this.value.volumes, neu);
-      const names = neu.map((item) => item.name);
-
-      this.container.volumeMounts = this.container.volumeMounts.filter((mount) => names.includes(mount.name));
+        this.container.volumeMounts = this.container.volumeMounts.filter((mount) => names.includes(mount.name));
+      }
     }
 
   },
@@ -95,32 +80,18 @@ export default {
      */
     initializeStorage() {
       if (!this.container.volumeMounts) {
-        this.container['volumeMounts'] = [];
-      }
-      if (!this.value.volumes) {
-        this.value['volumes'] = [];
+        set(this.container, 'volumeMounts', []);
+        this.$emit('update:container', this.container);
       }
     },
 
-    /**
-     * Get existing paired storage volumes
-     */
-    getStorageVolumes() {
-      // Extract volume mounts to map storage volumes
-      const { volumeMounts = [] } = this.container;
-      const names = volumeMounts.map(({ name }) => name);
-
-      // Extract storage volumes to allow mutation, if matches mount map
-      return clone(this.value.volumes.filter((volume) => names.includes(volume.name)));
-    },
-
     getSelectedContainerVolumes() {
       // Extract volume mounts to map storage volumes
       const { volumeMounts = [] } = this.container;
       const names = volumeMounts.map(({ name }) => name);
 
       // Extract storage volumes to allow mutation, if matches mount map
-      return clone(this.value.volumes.filter((volume) => names.includes(volume.name)));
+      return clone((this.value?.volumes || []).filter((volume) => names.includes(volume.name)));
     },
 
     /**
@@ -133,39 +104,14 @@ export default {
     },
 
     selectVolume(event) {
-      const selectedVolume = this.value.volumes.find((vol) => vol.name === event.value);
+      const selectedVolume = (this.value?.volumes || []).find((vol) => vol.name === event.value);
 
       this.selectedContainerVolumes.push(selectedVolume);
 
       const { name } = selectedVolume;
 
       this.container.volumeMounts.push(name);
-    },
-
-    addVolume(type) {
-      const name = `vol-${ randomStr(5).toLowerCase() }`;
-
-      if (type === 'createPVC') {
-        this.storageVolumes.push({
-          _type:                 'createPVC',
-          persistentVolumeClaim: {},
-          name,
-        });
-      } else if (type === 'csi') {
-        this.storageVolumes.push({
-          _type: type,
-          csi:   { volumeAttributes: {} },
-          name,
-        });
-      } else {
-        this.storageVolumes.push({
-          _type:  type,
-          [type]: {},
-          name,
-        });
-      }
-
-      this.container.volumeMounts.push({ name });
+      this.$emit('update:container', this.container);
     },
 
     headerFor(value) {
@@ -182,13 +128,6 @@ export default {
       }
     },
 
-    openPopover() {
-      const button = this.$refs.buttonDropdown;
-
-      try {
-        button.togglePopover();
-      } catch (e) {}
-    },
   },
 };
 </script>
@@ -197,8 +136,11 @@ export default {
   <div>
     <!-- Storage Volumes -->
     <ArrayListGrouped
+      :key="selectedContainerVolumes.length"
       v-model:value="selectedContainerVolumes"
+      :add-allowed="false"
       :mode="mode"
+      data-testid="container-storage-array-list"
       @remove="removeVolume"
     >
       <!-- Custom/default storage volume form -->
@@ -208,24 +150,22 @@ export default {
           :container="container"
           :name="props.row.value.name"
           :mode="mode"
+          :data-testid="`container-storage-mount-${props.i}`"
         />
       </template>
-
-      <!-- Add Storage Volume -->
-      <template #add>
-        <ButtonDropdown
-          v-if="!isView"
-          id="add-volume"
-          :button-label="t('workload.storage.selectVolume')"
-          :dropdown-options="availableVolumeOptions"
-          size="sm"
-          @click-action="e=>selectVolume(e)"
-        >
-          <template #no-options>
-            {{ t('workload.storage.noVolumes') }}
-          </template>
-        </ButtonDropdown>
-      </template>
     </ArrayListGrouped>
+    <ButtonDropdown
+      v-if="!isView"
+      id="add-volume"
+      :button-label="t('workload.storage.selectVolume')"
+      :dropdown-options="availableVolumeOptions"
+      size="sm"
+      data-testid="container-storage-add-button"
+      @click-action="e=>selectVolume(e)"
+    >
+      <template #no-options>
+        {{ t('workload.storage.noVolumes') }}
+      </template>
+    </ButtonDropdown>
   </div>
 </template>

package/edit/workload/storage/awsElasticBlockStore.vue

@@ -54,7 +54,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model.number="value.awsElasticBlockStore.partition"
+          v-model:value.number="value.awsElasticBlockStore.partition"
           :mode="mode"
           :label="t('workload.storage.csi.partition')"
         />

package/edit/workload/storage/azureDisk.vue

@@ -62,7 +62,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model.number="value.azureDisk.diskURI"
+          v-model:value.number="value.azureDisk.diskURI"
           :mode="mode"
           :required="true"
           :label="t('workload.storage.csi.diskURI')"

package/edit/workload/storage/csi/driver.longhorn.io.vue

@@ -2,6 +2,8 @@
 import KeyValue from '@shell/components/form/KeyValue';
 
 export default {
+  emits: ['update:value'],
+
   components: { KeyValue },
 
   props: {

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

@@ -6,6 +6,8 @@ import Mount from '@shell/edit/workload/storage/Mount';
 import { mapGetters } from 'vuex';
 
 export default {
+  emits: ['remove'],
+
   components: {
     LabeledSelect, LabeledInput, Checkbox, Mount
   },

package/edit/workload/storage/gcePersistentDisk.vue

@@ -54,7 +54,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model.number="value.gcePersistentDisk.partition"
+          v-model:value.number="value.gcePersistentDisk.partition"
           :mode="mode"
           :label="t('workload.storage.csi.partition')"
         />

package/edit/workload/storage/index.vue

@@ -5,14 +5,21 @@ import { _VIEW } from '@shell/config/query-params';
 import CodeMirror from '@shell/components/CodeMirror';
 import jsyaml from 'js-yaml';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
+import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor.vue';
 import { randomStr } from '@shell/utils/string';
 import { uniq } from '@shell/utils/array';
 
 export default {
   name: 'Storage',
 
+  emits: ['removePvcForm'],
+
   components: {
-    ArrayListGrouped, ButtonDropdown, Mount, CodeMirror
+    ArrayListGrouped,
+    ButtonDropdown,
+    Mount,
+    CodeMirror,
+    YamlEditor
   },
 
   props: {
@@ -108,21 +115,21 @@ export default {
     pvcNames() {
       return this.namespacedPvcs.map((pvc) => pvc.metadata.name);
     },
-  },
-
-  // watch: {
-  //   storageVolumes(neu, old) {
-  //     removeObjects(this.value.volumes, old);
-  //     addObjects(this.value.volumes, neu);
-  //     const names = neu.reduce((all, each) => {
-  //       all.push(each.name);
 
-  //       return all;
-  //     }, []);
+    yamlEditorMode() {
+      return this.isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE;
+    }
+  },
 
-  //     this.container.volumeMounts = this.container.volumeMounts.filter(mount => names.includes(mount.name));
-  //   }
-  // },
+  // need to refresh codemirror when the tab is opened and hash change === tab change
+  watch: {
+    '$route.hash': {
+      deep: true,
+      handler() {
+        this.refresh();
+      }
+    }
+  },
 
   methods: {
     /**
@@ -221,14 +228,18 @@ export default {
 
     // codemirror needs to refresh if it is in a tab that wasn't visible on page load
     refresh() {
-      if (this.$refs.cm) {
-        this.$refs.cm.forEach((component) => component.refresh());
+      if (this.$refs) {
+        // if a constant ref is assigned to the codemirror component in the template below, only the last instance of that codemirror component gets the ref
+        const cmRefs = Object.keys(this.$refs).filter((ref) => ref.startsWith('cm-'));
+
+        cmRefs.forEach((r) => this.$refs[r].refresh());
       }
     },
 
     removePvcForm(hookName) {
       this.$emit('removePvcForm', hookName);
-    }
+    },
+
   },
 };
 </script>
@@ -258,13 +269,18 @@ export default {
             :register-before-hook="registerBeforeHook"
             :save-pvc-hook-name="savePvcHookName"
             :loading="loading"
+            :data-testid="`volume-component-${props.i}`"
             @removePvcForm="removePvcForm"
           />
-          <div v-else-if="isView">
-            <CodeMirror
-              ref="cm"
-              :value="yamlDisplay(props.row.value)"
-              :options="{ readOnly: true, cursorBlinkRate: -1 }"
+          <div
+            v-else
+          >
+            <YamlEditor
+              :ref="`cm-${props.i}`"
+              v-model:value="props.row.value"
+              :as-object="true"
+              :data-testid="`volume-component-${props.i}`"
+              :editor-mode="yamlEditorMode"
             />
           </div>
         </div>

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

@@ -7,6 +7,8 @@ import PersistentVolumeClaim from '@shell/edit/workload/storage/persistentVolume
 import { PVC } from '@shell/config/types';
 
 export default {
+  emits: ['removePvcForm'],
+
   components: {
     LabeledInput,
     LabeledSelect,

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

@@ -11,6 +11,7 @@ import { allHash } from '@shell/utils/promise';
 import { get } from '@shell/utils/object';
 
 export default {
+  emits: ['createUniqueId', 'removePvcForm', 'update:value'],
 
   components: {
     LabeledSelect, UnitInput, RadioGroup, Checkbox, LabeledInput

package/edit/workload/storage/vsphereVolume.vue

@@ -46,7 +46,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model.number="value.vsphereVolume.storagePolicyName"
+          v-model:value.number="value.vsphereVolume.storagePolicyName"
           :mode="mode"
           :label="t('workload.storage.csi.storagePolicyName')"
         />

package/initialize/install-components.js

@@ -1,23 +1,11 @@
 
-import NuxtChild from '@shell/components/nuxt/nuxt-child.js';
-import { nuxtLinkAlias } from '@shell/components/nuxt/nuxt-link.client.js'; // should be included after ./index.js
 import vSelect from 'vue-select';
 
 /**
  * Add components to the Vue instance
  * @param {*} vueApp Vue instance
- * TODO: #11070 - Remove Nuxt residuals
  */
 export const installComponents = (vueApp) => {
-  // Component: <NuxtLink>
-  // TODO: #9541 Remove for Vue 3 migration
-  vueApp.component('NuxtLink', nuxtLinkAlias('NuxtLink'));
-  vueApp.component('NLink', nuxtLinkAlias('NLink'));
-
-  // Component: <NuxtChild>
-  vueApp.component(NuxtChild.name, NuxtChild);
-  vueApp.component('NChild', NuxtChild);
-
   // Vendor components
   vueApp.component('v-select', vSelect);
 };

package/initialize/install-plugins.js

@@ -1,8 +1,8 @@
 import PortalVue from 'portal-vue';
-import VueResize from 'vue-resize';
+import Vue3Resize from 'vue3-resize';
 import FloatingVue from 'floating-vue';
 import vSelect from 'vue-select';
-import 'vue-resize/dist/vue-resize.css';
+import 'vue3-resize/dist/vue3-resize.css';
 
 // import '@shell/plugins/extend-router';
 import '@shell/plugins/formatters';
@@ -25,7 +25,6 @@ import plugins from '@shell/core/plugins.js';
 import pluginsLoader from '@shell/core/plugins-loader.js';
 import replaceAll from '@shell/plugins/replaceall';
 import steveCreateWorker from '@shell/plugins/steve-create-worker';
-import version from '@shell/plugins/version';
 import emberCookie from '@shell/plugins/ember-cookie';
 import ShortKey from '@shell/plugins/shortkey';
 
@@ -35,7 +34,7 @@ import { floatingVueOptions } from '@shell/plugins/floating-vue';
 export async function installPlugins(vueApp) {
   vueApp.use(globalFormatters);
   vueApp.use(PortalVue);
-  vueApp.use(VueResize);
+  vueApp.use(Vue3Resize);
   vueApp.use(FloatingVue, floatingVueOptions);
   vueApp.use(ShortKey, { prevent: ['input', 'textarea', 'select'] });
   vueApp.use(InstallCodeMirror);
@@ -43,7 +42,7 @@ export async function installPlugins(vueApp) {
 }
 
 export async function installInjectedPlugins(app, vueApp) {
-  const pluginDefinitions = [config, cookieUniversal, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, backButton, plugin, version, steveCreateWorker, emberCookie];
+  const pluginDefinitions = [config, cookieUniversal, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, backButton, plugin, steveCreateWorker, emberCookie];
 
   const installations = pluginDefinitions.map(async(pluginDefinition) => {
     if (typeof pluginDefinition === 'function') {

package/machine-config/azure.vue

@@ -96,6 +96,8 @@ const storageTypes = [
 ];
 
 export default {
+  emits: ['expandAdvanced', 'error'],
+
   components: {
     ArrayList,
     Banner,

package/machine-config/generic.vue

@@ -6,6 +6,8 @@ import { exceptionToErrorsArray, stringify } from '@shell/utils/error';
 import Questions from '@shell/components/Questions';
 
 export default {
+  emits: ['input'],
+
   components: {
     Loading, Banner, Questions
   },

package/machine-config/vmwarevsphere.vue

@@ -137,6 +137,8 @@ const errorActions = Object.freeze({
 });
 
 export default {
+  emits: ['error'],
+
   components: {
     ArrayListSelect, Card, KeyValue, Loading, LabeledInput, LabeledSelect, Banner, UnitInput, RadioGroup, YamlEditor
   },

package/mixins/resource-manager.js

@@ -55,7 +55,7 @@ export default {
           const type = types[i];
           const status = hash[type].status;
           // if it's namespaced, we get the data on 'items' prop, for non-namespaced it's  'data' prop...
-          const requestData = hash[type].value.items || hash[type].value.data || hash[type].value;
+          const requestData = hash[type]?.value?.items || hash[type]?.value?.data || hash[type]?.value;
 
           if (status === 'fulfilled' && resourceData.data[type] && resourceData.data[type].applyTo?.length) {
             for (let y = 0; y < resourceData.data[type].applyTo.length; y++) {