@rancher/shell 2.0.0 → 3.0.0-rc.1

package/edit/autoscaling.horizontalpodautoscaler/metric-target.vue

@@ -87,7 +87,7 @@ export default {
         }
       }
 
-      this.$set(this.value, match?.specKey, nueDefault);
+      this.value[match?.specKey] = nueDefault;
       this.quantity = nueDefault;
     },
 
@@ -107,7 +107,7 @@ export default {
 
       delete this.value[toDelete.specKey];
 
-      this.$set(this.value, nue?.specKey, nueDefault);
+      this.value[nue?.specKey] = nueDefault;
       this.quantity = nueDefault;
     },
   },
@@ -137,9 +137,9 @@ export default {
     },
     updateQuantityValue(val) {
       if (this.value?.type === 'Value') {
-        this.$set(this.value, 'value', val);
+        this.value['value'] = val;
       } else {
-        this.$set(this.value, 'averageValue', val);
+        this.value['averageValue'] = val;
       }
     },
   },
@@ -151,7 +151,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <LabeledSelect
-          v-model="value.type"
+          v-model:value="value.type"
           :mode="mode"
           :label="t('hpa.metricTarget.type.label')"
           :options="targetTypes"
@@ -163,7 +163,7 @@ export default {
       >
         <UnitInput
           v-if="value.type === 'Utilization'"
-          v-model="value.averageUtilization"
+          v-model:value="value.averageUtilization"
           :label="t('hpa.metricTarget.quantity.label')"
           :mode="mode"
           placeholder="80"
@@ -172,7 +172,7 @@ export default {
         />
         <UnitInput
           v-else-if="resourceName === 'cpu'"
-          v-model="quantity"
+          v-model:value="quantity"
           :input-exponent="-1"
           :label="t('hpa.metricTarget.quantity.label')"
           :mode="mode"
@@ -180,11 +180,11 @@ export default {
           :required="true"
           :base-unit="t('suffix.cpus')"
           :output-modifier="true"
-          @input="updateQuantityValue"
+          @update:value="updateQuantityValue"
         />
         <UnitInput
           v-else-if="resourceName === 'memory'"
-          v-model="quantity"
+          v-model:value="quantity"
           :input-exponent="2"
           :label="t('containerResourceLimit.requestsMemory')"
           :mode="mode"
@@ -192,7 +192,7 @@ export default {
           :required="true"
           :output-modifier="true"
           :increment="1024"
-          @input="updateQuantityValue"
+          @update:value="updateQuantityValue"
         />
       </div>
       <div
@@ -200,13 +200,13 @@ export default {
         class="col span-6"
       >
         <LabeledInput
-          v-model="quantity"
+          v-model:value="quantity"
           placeholder="1"
           type="text"
           :label="t('hpa.metricTarget.quantity.label')"
           :mode="mode"
           :required="true"
-          @input="updateQuantityValue"
+          @update:value="updateQuantityValue"
         />
       </div>
     </div>

package/edit/autoscaling.horizontalpodautoscaler/metrics-row.vue

@@ -163,7 +163,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledSelect
-          v-model="value.type"
+          v-model:value="value.type"
           :reduce="(val) => val.label"
           :mode="mode"
           :label="t('hpa.metrics.source')"
@@ -173,25 +173,25 @@ export default {
     </div>
     <div v-if="isPodMetric">
       <PodMetric
-        v-model="value.pods"
+        v-model:value="value.pods"
         :mode="mode"
       />
     </div>
     <div v-else-if="isExternalMetric">
       <ExternalMetric
-        v-model="value.external"
+        v-model:value="value.external"
         :mode="mode"
       />
     </div>
     <div v-else-if="isObjectMetric">
       <ObjectMetric
-        v-model="value.object"
+        v-model:value="value.object"
         :mode="mode"
       />
     </div>
     <div v-else-if="isResourceMetric">
       <ResourceMetric
-        v-model="value.resource"
+        v-model:value="value.resource"
         :mode="mode"
       />
     </div>

package/edit/autoscaling.horizontalpodautoscaler/object-metric.vue

@@ -50,20 +50,20 @@ export default {
   <div>
     <div class="row mb-20">
       <MetricTarget
-        v-model="value.target"
+        v-model:value="value.target"
         :mode="mode"
         metric-resource="object"
       />
     </div>
     <div class="row mb-20">
       <MetricObjectReference
-        v-model="value.describedObject"
+        v-model:value="value.describedObject"
         :mode="mode"
       />
     </div>
     <div class="row">
       <MetricIdentifier
-        v-model="value.metric"
+        v-model:value="value.metric"
         :mode="mode"
       />
     </div>

package/edit/autoscaling.horizontalpodautoscaler/pod-metric.vue

@@ -43,14 +43,14 @@ export default {
   <div>
     <div class="row mb-20">
       <MetricTarget
-        v-model="value.target"
+        v-model:value="value.target"
         :mode="mode"
         metric-resource="pods"
       />
     </div>
     <div class="row">
       <MetricIdentifier
-        v-model="value.metric"
+        v-model:value="value.metric"
         :mode="mode"
       />
     </div>

package/edit/autoscaling.horizontalpodautoscaler/resource-metric.vue

@@ -46,7 +46,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledSelect
-          v-model="value.name"
+          v-model:value="value.name"
           :mode="mode"
           :label="t('hpa.metrics.headers.resource')"
           :options="resourceTypes"
@@ -55,7 +55,7 @@ export default {
     </div>
     <div class="row">
       <MetricTarget
-        v-model="value.target"
+        v-model:value="value.target"
         :mode="mode"
         metric-resource="resource"
         :resource-name="value.name"

package/edit/catalog.cattle.io.clusterrepo.vue

@@ -1,5 +1,4 @@
 <script>
-import Vue from 'vue';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import Footer from '@shell/components/form/Footer';
 import { LabeledInput } from '@components/Form/LabeledInput';
@@ -66,7 +65,7 @@ export default {
         break;
       case CLUSTER_REPO_TYPES.OCI_URL:
         // set insecurePlainHttp to false as a secondary flag, alongside checking for 'oci://' in the URL, to determine OCI type later
-        Vue.set(this.value.spec, 'insecurePlainHttp', false);
+        this.value.spec['insecurePlainHttp'] = false;
         this.resetGitRepoValues();
         this.resetHelmValues();
         break;
@@ -79,36 +78,36 @@ export default {
     },
     updateExponentialBackOffValues(key, newVal) {
       if (!Object.prototype.hasOwnProperty.call(this.value.spec, 'exponentialBackOffValues')) {
-        Vue.set(this.value.spec, 'exponentialBackOffValues', {});
+        this.value.spec['exponentialBackOffValues'] = {};
       }
       // when user removes the value we remove the key too, backend will set the default value
       if (newVal === '') {
-        Vue.delete(this.value.spec.exponentialBackOffValues, key);
+        delete this.value.spec.exponentialBackOffValues[key];
 
         return;
       }
 
-      Vue.set(this.value.spec.exponentialBackOffValues, key, Number(newVal));
+      this.value.spec.exponentialBackOffValues[key] = Number(newVal);
     },
     resetGitRepoValues() {
-      Vue.delete(this.value.spec, 'gitRepo');
-      Vue.delete(this.value.spec, 'gitBranch');
+      delete this.value.spec['gitRepo'];
+      delete this.value.spec['gitBranch'];
     },
     resetOciValues() {
-      Vue.delete(this.value.spec, 'url');
-      Vue.delete(this.value.spec, 'insecurePlainHttp');
-      Vue.delete(this.value.spec, 'insecureSkipTLSVerify');
-      Vue.delete(this.value.spec, 'caBundle');
-      Vue.delete(this.value.spec, 'exponentialBackOffValues');
+      delete this.value.spec['url'];
+      delete this.value.spec['insecurePlainHttp'];
+      delete this.value.spec['insecureSkipTLSVerify'];
+      delete this.value.spec['caBundle'];
+      delete this.value.spec['exponentialBackOffValues'];
       this.ociMinWait = undefined;
       this.ociMaxWait = undefined;
       this.ociMaxRetries = undefined;
     },
     resetHelmValues() {
-      Vue.delete(this.value.spec, 'url');
+      delete this.value.spec['url'];
     },
     resetClientSecret() {
-      Vue.set(this.value.spec, 'clientSecret', null);
+      this.value.spec['clientSecret'] = null;
     }
   },
 };
@@ -117,22 +116,23 @@ export default {
 <template>
   <form>
     <NameNsDescription
-      v-model="value"
+      :value="value"
       :mode="mode"
       :namespaced="isNamespaced"
+      @update:value="$emit('input', $event)"
     />
 
     <h2>{{ t('catalog.repo.target.label') }}</h2>
     <div class="row mb-10">
       <div class="col span-8">
         <RadioGroup
-          v-model="clusterRepoType"
+          v-model:value="clusterRepoType"
           :name="clusterRepoType"
           :options="[CLUSTER_REPO_TYPES.HELM_URL, CLUSTER_REPO_TYPES.GIT_REPO, CLUSTER_REPO_TYPES.OCI_URL]"
           :labels="[t('catalog.repo.target.http'), t('catalog.repo.target.git'), t('catalog.repo.target.oci', null, true)]"
           :mode="mode"
           data-testid="clusterrepo-radio-input"
-          @input="onTargetChange"
+          @update:value="onTargetChange"
         />
       </div>
     </div>
@@ -143,7 +143,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledInput
-          v-model.trim="value.spec.gitRepo"
+          v-model:value.trim="value.spec.gitRepo"
           :required="true"
           :label="t('catalog.repo.gitRepo.label')"
           :placeholder="t('catalog.repo.gitRepo.placeholder', null, true)"
@@ -153,7 +153,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model.trim="value.spec.gitBranch"
+          v-model:value.trim="value.spec.gitBranch"
           :sub-label="!value.spec.gitBranch ? t('catalog.repo.gitBranch.defaultMessage', null, true) : undefined"
           :label="t('catalog.repo.gitBranch.label')"
           :placeholder="t('catalog.repo.gitBranch.placeholder', null, true)"
@@ -168,7 +168,7 @@ export default {
         {{ t('catalog.repo.oci.info') }}
       </InfoBox>
       <LabeledInput
-        v-model.trim="value.spec.url"
+        v-model:value.trim="value.spec.url"
         :required="true"
         :label="t('catalog.repo.oci.urlLabel')"
         :placeholder="t('catalog.repo.oci.placeholder', null, true)"
@@ -179,7 +179,7 @@ export default {
 
     <LabeledInput
       v-else
-      v-model.trim="value.spec.url"
+      v-model:value.trim="value.spec.url"
       :required="true"
       :label="t('catalog.repo.url.label')"
       :placeholder="t('catalog.repo.url.placeholder', null, true)"
@@ -187,8 +187,7 @@ export default {
       data-testid="clusterrepo-helm-url-input"
     />
     <SelectOrCreateAuthSecret
-      :key="clusterRepoType"
-      v-model="value.spec.clientSecret"
+      v-model:value="value.spec.clientSecret"
       :mode="mode"
       data-testid="clusterrepo-auth-secret"
       :register-before-hook="registerBeforeHook"
@@ -204,7 +203,7 @@ export default {
       <div class="row">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.spec.caBundle"
+            v-model:value="value.spec.caBundle"
             class="mt-20"
             type="multiline"
             label="CA Cert Bundle"
@@ -212,14 +211,14 @@ export default {
             data-testid="clusterrepo-oci-cabundle-input"
           />
           <Checkbox
-            v-model="value.spec.insecureSkipTLSVerify"
+            v-model:value="value.spec.insecureSkipTLSVerify"
             class="mt-10"
             :mode="mode"
             :label="t('catalog.repo.oci.skipTlsVerifications')"
             data-testid="clusterrepo-oci-skip-tls-checkbox"
           />
           <Checkbox
-            v-model="value.spec.insecurePlainHttp"
+            v-model:value="value.spec.insecurePlainHttp"
             class="mt-10"
             :mode="mode"
             :label="t('catalog.repo.oci.insecurePlainHttp')"
@@ -233,38 +232,38 @@ export default {
       <div class="row mb-10 mt-10">
         <div class="col span-4">
           <LabeledInput
-            v-model.trim="ociMinWait"
+            v-model:value.trim="ociMinWait"
             :label="t('catalog.repo.oci.exponentialBackOff.minWait.label')"
             :placeholder="!ociMinWait ? t('catalog.repo.oci.exponentialBackOff.minWait.placeholder') : undefined"
             :mode="mode"
             type="number"
             min="1"
             data-testid="clusterrepo-oci-min-wait-input"
-            @input="updateExponentialBackOffValues('minWait', $event)"
+            @update:value="updateExponentialBackOffValues('minWait', $event)"
           />
         </div>
         <div class="col span-4">
           <LabeledInput
-            v-model.trim="ociMaxWait"
+            v-model:value.trim="ociMaxWait"
             :label="t('catalog.repo.oci.exponentialBackOff.maxWait.label')"
             :placeholder="!ociMaxWait ? t('catalog.repo.oci.exponentialBackOff.maxWait.placeholder') : undefined"
             :mode="mode"
             type="number"
             min="1"
             data-testid="clusterrepo-oci-max-wait-input"
-            @input="updateExponentialBackOffValues('maxWait', $event)"
+            @update:value="updateExponentialBackOffValues('maxWait', $event)"
           />
         </div>
         <div class="col span-4">
           <LabeledInput
-            v-model.trim="ociMaxRetries"
+            v-model:value.trim="ociMaxRetries"
             :label="t('catalog.repo.oci.exponentialBackOff.maxRetries.label')"
             :placeholder="!ociMaxRetries ? t('catalog.repo.oci.exponentialBackOff.maxRetries.placeholder') : undefined"
             :mode="mode"
             type="number"
             min="0"
             data-testid="clusterrepo-oci-max-retries-input"
-            @input="updateExponentialBackOffValues('maxRetries', $event)"
+            @update:value="updateExponentialBackOffValues('maxRetries', $event)"
           />
         </div>
       </div>

package/edit/cis.cattle.io.clusterscan.vue

@@ -59,7 +59,7 @@ export default {
       const proxyObj = this.allProfiles.filter((profile) => profile.id === scanProfileName)[0];
 
       if (!proxyObj) {
-        this.$set(this.value.spec, 'scanProfileName', '');
+        this.value.spec['scanProfileName'] = '';
       }
     }
   },
@@ -69,10 +69,10 @@ export default {
       this.value.metadata.generateName = 'scan-';
     }
     if (!this.value.spec.scheduledScanConfig) {
-      this.$set(this.value.spec, 'scheduledScanConfig', { scanAlertRule: {} });
+      this.value.spec['scheduledScanConfig'] = { scanAlertRule: {} };
     }
     if (!this.value.spec.scheduledScanConfig.scanAlertRule) {
-      this.$set(this.value.spec.scheduledScanConfig, 'scanAlertRule', { });
+      this.value.spec.scheduledScanConfig['scanAlertRule'] = { };
     }
     const isScheduled = !!get(this.value, 'spec.scheduledScanConfig.cronSchedule');
 
@@ -258,7 +258,7 @@ export default {
       >
         <div class="col span-6">
           <LabeledSelect
-            v-model="value.spec.scanProfileName"
+            v-model:value="value.spec.scanProfileName"
             :mode="mode"
             :label="t('cis.profile')"
             :options="validProfiles"
@@ -273,7 +273,7 @@ export default {
             class="icon icon-info"
           />
           <RadioGroup
-            v-model="value.spec.scoreWarning"
+            v-model:value="value.spec.scoreWarning"
             :mode="mode"
             name="scoreWarning"
             :options="['pass', 'fail']"
@@ -286,7 +286,7 @@ export default {
         <div class="row mb-20">
           <div class="col">
             <RadioGroup
-              v-model="isScheduled"
+              v-model:value="isScheduled"
               :mode="mode"
               name="scheduling"
               :options="[ {value: false, label: t('cis.scheduling.disable')}, {value: true, label: t('cis.scheduling.enable')}]"
@@ -297,7 +297,7 @@ export default {
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledInput
-                v-model="scheduledScanConfig.cronSchedule"
+                v-model:value="scheduledScanConfig.cronSchedule"
                 required
                 :mode="mode"
                 :label="t('cis.cronSchedule.label')"
@@ -328,12 +328,12 @@ export default {
                 <span v-clean-html="t('cis.alertNeeded', {link: monitoringUrl}, true)" />
               </banner>
               <Checkbox
-                v-model="scanAlertRule.alertOnComplete"
+                v-model:value="scanAlertRule.alertOnComplete"
                 :mode="mode"
                 :label="t('cis.alertOnComplete')"
               />
               <Checkbox
-                v-model="scanAlertRule.alertOnFailure"
+                v-model:value="scanAlertRule.alertOnFailure"
                 :mode="mode"
                 :label="t('cis.alertOnFailure')"
               />

package/edit/cis.cattle.io.clusterscanbenchmark.vue

@@ -34,7 +34,7 @@ export default {
 
   data() {
     if (!this.value.spec) {
-      this.$set(this.value, 'spec', {});
+      this.value['spec'] = {};
     }
 
     return {
@@ -57,8 +57,8 @@ export default {
       set(neu) {
         const { name, namespace } = neu.metadata;
 
-        this.$set(this.value.spec, 'customBenchmarkConfigMapName', name);
-        this.$set(this.value.spec, 'customBenchmarkConfigMapNamespace', namespace);
+        this.value.spec['customBenchmarkConfigMapName'] = name;
+        this.value.spec['customBenchmarkConfigMapNamespace'] = namespace;
       }
     },
 
@@ -111,7 +111,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledSelect
-          v-model="value.spec.clusterProvider"
+          v-model:value="value.spec.clusterProvider"
           :clearable="true"
           :options="providers"
           :mode="mode"
@@ -120,7 +120,7 @@ export default {
       </div>
       <div class="col span-6">
         <ResourceLabeledSelect
-          v-model="customConfigMap"
+          v-model:value="customConfigMap"
           :clearable="true"
           option-key="id"
           option-label="id"
@@ -134,14 +134,14 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.minKubernetesVersion"
+          v-model:value="value.spec.minKubernetesVersion"
           :mode="mode"
           :label="t('cis.minKubernetesVersion')"
         />
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.maxKubernetesVersion"
+          v-model:value="value.spec.maxKubernetesVersion"
           :mode="mode"
           :label="t('cis.maxKubernetesVersion')"
         />

package/edit/cis.cattle.io.clusterscanprofile.vue

@@ -38,7 +38,7 @@ export default {
 
   data() {
     if (!this.value.spec) {
-      this.$set(this.value, 'spec', {});
+      this.value['spec'] = {};
     }
 
     return { allBenchmarks: [], name: this.value.metadata.name };
@@ -128,7 +128,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledSelect
-              v-model="value.spec.benchmarkVersion"
+              v-model:value="value.spec.benchmarkVersion"
               :mode="mode"
               :label="t('cis.benchmarkVersion')"
               :options="compatibleBenchmarkNames"
@@ -139,7 +139,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <ArrayList
-              v-model="value.spec.skipTests"
+              v-model:value="value.spec.skipTests"
               :title="t('cis.testsToSkip')"
               :value-placeholder="t('cis.testID')"
               :mode="mode"

package/edit/cloudcredential.vue

@@ -152,13 +152,17 @@ export default {
       }
 
       for ( const id of types ) {
-        let bannerImage, bannerAbbrv;
+        let bannerAbbrv;
 
-        try {
-          bannerImage = require(`~shell/assets/images/providers/${ id }.svg`);
-        } catch (e) {
-          bannerImage = null;
-          bannerAbbrv = this.initialDisplayFor(id);
+        let bannerImage = this.$store.app.$plugin.getDynamic('image', `providers/${ id }.svg`);
+
+        if (!bannerImage) {
+          try {
+            bannerImage = require(`~shell/assets/images/providers/${ id }.svg`);
+          } catch (e) {
+            bannerImage = null;
+            bannerAbbrv = this.initialDisplayFor(id);
+          }
         }
 
         out.push({
@@ -241,7 +245,7 @@ export default {
         set(this.value, `${ field }credentialConfig`, {});
       }
 
-      this.$set(this.value, '_type', type);
+      this.value['_type'] = type;
       this.$emit('set-subtype', this.typeDisplay(type, driver));
     },
 
@@ -276,7 +280,7 @@ export default {
       @error="e=>errors = e"
     >
       <NameNsDescription
-        v-model="value"
+        :value="value"
         :name-editable="true"
         name-key="_name"
         description-key="description"
@@ -284,6 +288,7 @@ export default {
         name-placeholder="cluster.credential.name.placeholder"
         :mode="mode"
         :namespaced="false"
+        @update:value="$emit('input', $event)"
         @change="handleNameRequiredValidation"
       />
       <keep-alive>

package/edit/configmap.vue

@@ -8,9 +8,9 @@ import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 
 export default {
-  name: 'CruConfigMap',
-
-  components: {
+  name:         'CruConfigMap',
+  inheritAttrs: false,
+  components:   {
     CruResource,
     NameNsDescription,
     KeyValue,
@@ -75,10 +75,10 @@ export default {
     },
 
     updateValue(val, type) {
-      this.$set(this.value, type, {});
+      this.value[type] = {};
 
       Object.keys(val).forEach((key) => {
-        this.$set(this.value[type], key, val[key]);
+        this.value[type][key] = val[key];
       });
     },
   }
@@ -113,7 +113,7 @@ export default {
       >
         <KeyValue
           key="data"
-          v-model="data"
+          v-model:value="data"
           :mode="mode"
           :protip="t('configmap.tabs.data.protip')"
           :initial-empty-row="true"
@@ -131,7 +131,7 @@ export default {
       >
         <KeyValue
           key="binaryData"
-          v-model="binaryData"
+          v-model:value="binaryData"
           :initial-empty-row="true"
           :handle-base64="true"
           :add-allowed="true"