@rancher/shell 3.0.0-rc.6 → 3.0.0-rc.7

package/chart/monitoring/alerting/index.vue

@@ -81,27 +81,15 @@ export default {
   watch: {
     filteredSecrets(newValue) {
       if (isEmpty(newValue)) {
-        this.$set(
-          this.value.alertmanager.alertmanagerSpec,
-          'useExistingSecret',
-          false
-        );
+        this.value.alertmanager.alertmanagerSpec.useExistingSecret = false;
       }
 
       const { existingSecret } = this;
 
       if (existingSecret) {
         this.$nextTick(() => {
-          this.$set(
-            this.value.alertmanager.alertmanagerSpec,
-            'useExistingSecret',
-            true
-          );
-          this.$set(
-            this.value.alertmanager.alertmanagerSpec,
-            'configSecret',
-            existingSecret.metadata.name
-          );
+          this.value.alertmanager.alertmanagerSpec.useExistingSecret = true;
+          this.value.alertmanager.alertmanagerSpec.configSecret = existingSecret.metadata.name;
         });
       }
     },
@@ -110,11 +98,7 @@ export default {
 
       if (useExistingSecret) {
         if (existingSecret?.metadata?.name) {
-          this.$set(
-            this.value.alertmanager.alertmanagerSpec,
-            'configSecret',
-            existingSecret.metadata.name
-          );
+          this.value.alertmanager.alertmanagerSpec.configSecret = existingSecret.metadata.name;
         }
       } else {
         this.value.alertmanager.alertmanagerSpec['configSecret'] = '';

package/chart/monitoring/grafana/index.vue

@@ -249,7 +249,7 @@ export default {
               :mode="mode"
               :options="pvcs"
               :label="t('monitoring.grafana.storage.existingClaim')"
-              @updateName="(name) => $set(value.grafana.persistence, 'existingClaim', name)"
+              @updateName="(name) => value.grafana.persistence.existingClaim = name"
             />
           </div>
         </div>
@@ -271,7 +271,7 @@ export default {
                 :mode="mode"
                 :options="storageClasses"
                 :label="t('monitoring.prometheus.storage.className')"
-                @updateName="(name) => $set(value.grafana.persistence, 'storageClassName', name)"
+                @updateName="(name) => value.grafana.persistence.storageClassName = name"
               />
             </div>
           </div>
@@ -338,7 +338,7 @@ export default {
                 :mode="mode"
                 :options="storageClasses"
                 :label="t('monitoring.prometheus.storage.className')"
-                @updateName="(name) => $set(value.grafana.persistence, 'storageClassName', name)"
+                @updateName="(name) => value.grafana.persistence.storageClassName = name"
               />
             </div>
           </div>

package/chart/monitoring/prometheus/index.vue

@@ -123,21 +123,14 @@ export default {
   watch: {
     enablePersistentStorage(enabled) {
       if (!!enabled) {
-        this.$set(
-          this.value.prometheus.prometheusSpec.storageSpec,
-          'volumeClaimTemplate',
-          {
-            spec: {
-              accessModes: ['ReadWriteOnce'],
-              resources:   { requests: { storage: '50Gi' } },
-            }
+        this.value.prometheus.prometheusSpec.storageSpec.volumeClaimTemplate = {
+          spec: {
+            accessModes: ['ReadWriteOnce'],
+            resources:   { requests: { storage: '50Gi' } },
           }
-        );
+        };
       } else {
-        this.$delete(
-          this.value.prometheus.prometheusSpec.storageSpec,
-          'volumeClaimTemplate'
-        );
+        delete this.value.prometheus.prometheusSpec.storageSpec['volumeClaimTemplate'];
       }
     },
   },
@@ -328,7 +321,7 @@ export default {
                 :options="storageClasses"
                 :value="value.prometheus.prometheusSpec.storageSpec.volumeClaimTemplate.spec.storageClassName"
                 :label="t('monitoring.prometheus.storage.className')"
-                @updateName="(name) => $set(value.prometheus.prometheusSpec.storageSpec.volumeClaimTemplate.spec, 'storageClassName', name)"
+                @updateName="(name) => value.prometheus.prometheusSpec.storageSpec.volumeClaimTemplate.spec.storageClassName = name"
               />
             </div>
           </div>

package/components/ResourceDetail/index.vue

@@ -332,7 +332,11 @@ export default {
 
       const queryDiff = Object.keys(diff(neu, old));
 
-      if ( queryDiff.includes(MODE) || queryDiff.includes(AS)) {
+      if (Object.keys(neu).length <= 0) {
+        return;
+      }
+
+      if (queryDiff.includes(MODE) || queryDiff.includes(AS)) {
         this.$fetch();
       }
     },

package/components/form/PodAffinity.vue

@@ -379,7 +379,7 @@ export default {
                 :value="props.row.value._anti ?t('workload.scheduling.affinity.antiAffinityOption') :t('workload.scheduling.affinity.affinityOption') "
                 :label="t('workload.scheduling.affinity.type')"
                 :data-testid="`pod-affinity-type-index${props.i}`"
-                @update:value="$set(props.row.value, '_anti',!props.row.value._anti)"
+                @update:value="props.row.value._anti = !props.row.value._anti"
               />
             </div>
             <div class="col span-6">

package/components/nav/Header.vue

@@ -231,12 +231,16 @@ export default {
       }
     },
     // since the Header is a "persistent component" we need to update it at every route change...
-    $route(nue) {
-      if (nue) {
-        this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, nue);
+    $route: {
+      handler(nue) {
+        if (nue) {
+          this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, nue);
 
-        this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
-      }
+          this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
+        }
+      },
+      immediate: true,
+      deep:      true,
     }
   },
 

package/core/types.ts

@@ -26,7 +26,7 @@ export type CoreStoreInit = (store: any, ctx: any) => void;
 export type RegisterStore = () => (store: any) => void
 export type UnregisterStore = (store: any) => void
 
-export type PluginRouteRecordRaw = {parent?: string, route: RouteRecordRaw}
+export type PluginRouteRecordRaw = { [key: string]: any }
 
 export type OnEnterLeavePackageConfig = {
   clusterId: string,

package/edit/auth/googleoauth.vue

@@ -196,7 +196,7 @@ export default {
                 class="role-tertiary add mt-5"
                 :label="t('generic.readFromFile')"
                 :mode="mode"
-                @selected="$set(model, 'oauthCredential', $event)"
+                @selected="model.oauthCredential = $event"
               />
             </div>
           </div>
@@ -231,7 +231,7 @@ export default {
                 class="role-tertiary add mt-5"
                 :label="t('generic.readFromFile')"
                 :mode="mode"
-                @selected="$set(model, 'serviceAccountCredential', $event)"
+                @selected="model.serviceAccountCredential = $event"
               />
             </div>
           </div>

package/edit/auth/ldap/config.vue

@@ -120,7 +120,7 @@ export default {
           :step="1"
           :mode="mode"
           :label="t('authConfig.ldap.port')"
-          @update:value="e=>$set(model, 'port', e.replace(/[^0-9]*/g, ''))"
+          @update:value="e=> model.port = e.replace(/[^0-9]*/g, '')"
         />
       </div>
 
@@ -158,7 +158,7 @@ export default {
           class="role-tertiary add mt-5"
           :label="t('generic.readFromFile')"
           :mode="mode"
-          @selected="$set(model, 'certificate', $event)"
+          @selected="model.certificate = $event"
         />
       </div>
     </div>

package/edit/auth/oidc.vue

@@ -233,7 +233,7 @@ export default {
               class="role-tertiary add mt-5"
               :label="t('generic.readFromFile')"
               :mode="mode"
-              @selected="$set(model, 'privateKey', $event)"
+              @selected="model.privateKey = $event"
             />
           </div>
           <div class="col span-6">
@@ -248,7 +248,7 @@ export default {
               class="role-tertiary add mt-5"
               :label="t('generic.readFromFile')"
               :mode="mode"
-              @selected="$set(model, 'certificate', $event)"
+              @selected="model.certificate = $event"
             />
           </div>
         </div>

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

@@ -84,29 +84,28 @@ export default {
 
   watch: {
     'value.type'(neuType, oldType) {
-      const { $set } = this;
       let resourceSpec, podSpec, objectSpec, externalSpec;
 
       switch (neuType) {
       case 'External':
         externalSpec = this.initExternalSpec();
 
-        $set(this.value, 'external', externalSpec);
+        this.value.external = externalSpec;
         break;
       case 'Object':
         objectSpec = this.initObjectSpec();
 
-        $set(this.value, 'object', objectSpec);
+        this.value.object = objectSpec;
         break;
       case 'Pods':
         podSpec = this.initPodsSpec();
 
-        $set(this.value, 'pods', podSpec);
+        this.value.pods = podSpec;
         break;
       case 'Resource':
         resourceSpec = this.initResourceSpec();
 
-        $set(this.value, 'resource', resourceSpec.resource);
+        this.value.resource = resourceSpec.resource;
         break;
       default:
         break;

package/edit/monitoring.coreos.com.alertmanagerconfig/auth.vue

@@ -64,11 +64,7 @@ export default {
     initializeType(authOptions, type) {
       authOptions.forEach((authOption) => {
         if (authOption.value === type && type !== 'none') {
-          this.$set(
-            this.value,
-            authOption.value,
-            this.value[authOption.value] || authOption.default
-          );
+          this.value.authOption.value = this.value[authOption.value] || authOption.default;
         } else if (typeof this.value[authOption.value] !== 'undefined') {
           delete this.value[authOption.value];
         }

package/edit/monitoring.coreos.com.alertmanagerconfig/types/slack.vue

@@ -28,11 +28,7 @@ export default {
     this.value['sendResolved'] = this.value.sendResolved || false;
 
     if (this.mode === _CREATE) {
-      this.$set(
-        this.value,
-        'text',
-        this.value.text || '{{ template "slack.rancher.text" . }}'
-      );
+      this.value.text = this.value.text || '{{ template "slack.rancher.text" . }}';
     }
 
     return {

package/edit/monitoring.coreos.com.receiver/types/slack.vue

@@ -28,11 +28,7 @@ export default {
     this.value['send_resolved'] = this.value.send_resolved || false;
 
     if (this.mode === _CREATE) {
-      this.$set(
-        this.value,
-        'text',
-        this.value.text || '{{ template "slack.rancher.text" . }}'
-      );
+      this.value.text = this.value.text || '{{ template "slack.rancher.text" . }}';
     }
 
     return {};

package/edit/service.vue

@@ -226,11 +226,7 @@ export default {
         this.value.spec.sessionAffinityConfig = { clientIP: { timeoutSeconds: null } };
 
         // set it null and then set it with vue to make reactive.
-        this.$set(
-          this.value.spec.sessionAffinityConfig.clientIP,
-          'timeoutSeconds',
-          SESSION_STICKY_TIME_DEFAULT
-        );
+        this.value.spec.sessionAffinityConfig.clientIP.timeoutSeconds = SESSION_STICKY_TIME_DEFAULT;
       } else if (
         this.value?.spec?.sessionAffinityConfig?.clientIP?.timeoutSeconds
       ) {
@@ -425,7 +421,7 @@ export default {
               :mode="mode"
               :initial-empty-row="true"
               :protip="false"
-              @update:value="(e) => $set(value.spec, 'selector', e)"
+              @update:value="(e) => value.spec.selector = e"
             />
           </div>
         </div>
@@ -448,7 +444,7 @@ export default {
               :tooltip-key="
                 hasClusterIp ? 'servicesPage.ips.clusterIpHelpText' : null
               "
-              @update:value="(e) => $set(value.spec, 'clusterIP', e)"
+              @update:value="(e) => value.spec.clusterIP = e"
             />
           </div>
         </div>
@@ -465,7 +461,7 @@ export default {
               :tooltip-key="
                 hasClusterIp ? 'servicesPage.ips.loadBalancerIp.helpText' : null
               "
-              @update:value="(e) => $set(value.spec, 'loadBalancerIP', e)"
+              @update:value="(e) => value.spec.loadBalancerIP = e"
             />
           </div>
         </div>
@@ -478,7 +474,7 @@ export default {
               :value-placeholder="t('servicesPage.ips.external.placeholder')"
               :mode="mode"
               :protip="false"
-              @update:value="(e) => $set(value.spec, 'externalIPs', e)"
+              @update:value="(e) => value.spec.externalIPs = e"
             />
           </div>
         </div>
@@ -527,12 +523,7 @@ export default {
               :label="t('servicesPage.affinity.timeout.label')"
               :placeholder="t('servicesPage.affinity.timeout.placeholder')"
               @input="
-                (e) =>
-                  $set(
-                    value.spec.sessionAffinityConfig.clientIP,
-                    'timeoutSeconds',
-                    e
-                  )
+                (e) => value.spec.sessionAffinityConfig.clientIP.timeoutSeconds = e
               "
             />
           </div>

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

@@ -12,6 +12,8 @@ export default {
 
   mixins: [ChildHook],
 
+  emits: ['done'],
+
   data() {
     // Keep label and annotation filters in data so each resource CRUD page can alter individually
     return { errors: [] };

package/mixins/labeled-form-element.ts

@@ -10,6 +10,8 @@ interface LabeledFormElement {
 export default {
   inheritAttrs: false,
 
+  emits: ['update:validation', 'on-focus', 'on-blur'],
+
   props: {
     mode: {
       type:    String,

package/mixins/vue-select-overrides.js

@@ -1,5 +1,6 @@
 
 export default {
+  emits:   ['option:selecting', 'option:created', 'option:selected'],
   methods: {
     mappedKeys(map, vm) {
       // Defaults found at - https://github.com/sagalbot/vue-select/blob/master/src/components/Select.vue#L947

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.0-rc.6",
+  "version": "3.0.0-rc.7",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/types/shell/index.d.ts

@@ -2168,6 +2168,7 @@ declare module '@shell/mixins/create-edit-view/impl' {
 declare namespace _default {
     const name: string;
     const mixins: any[];
+    const emits: string[];
     function data(): {
         errors: any[];
     };
@@ -2274,7 +2275,7 @@ declare var _default: import("vue").DefineComponent<{
     save(buttonDone: any, url: any, depth?: number): any;
     actuallySave(url: any): Promise<void>;
     setErrors(errors: any): void;
-}, any, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     mode: {
         type: StringConstructor;
         default: any;
@@ -2303,7 +2304,9 @@ declare var _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+}>> & {
+    [x: string & `on${string}`]: (...args: any[]) => any;
+}, {
     mode: string;
     as: string;
     doneEvent: boolean;

package/utils/v-sphere.ts

@@ -96,7 +96,7 @@ class VSphereUtils {
     */
   async handleVsphereCpiSecret(rke2Component: Rke2Component) {
     const generateName = `${ rootGenerateName }cpi-`;
-    const downstreamName = 'vsphere-cpi-creds';
+    const downstreamName = 'rancher-vsphere-cpi-credentials';
     const downstreamNamespace = 'kube-system';
     const { value } = rke2Component;
 
@@ -104,6 +104,13 @@ class VSphereUtils {
     const { userValues, combined } = this.findChartValues(rke2Component, 'rancher-vsphere-cpi') || {};
 
     if (!combined?.vCenter?.credentialsSecret?.generate) {
+      if (userValues?.vCenter?.username) {
+        userValues.vCenter.username = '';
+      }
+      if (userValues?.vCenter?.password) {
+        userValues.vCenter.password = '';
+      }
+
       return;
     }
 
@@ -162,7 +169,7 @@ class VSphereUtils {
     */
   async handleVsphereCsiSecret(rke2Component: Rke2Component) {
     const generateName = `${ rootGenerateName }csi-`;
-    const downstreamName = 'vsphere-csi-creds';
+    const downstreamName = 'rancher-vsphere-csi-credentials';
     const downstreamNamespace = 'kube-system';
     const { value } = rke2Component;
 
@@ -170,6 +177,13 @@ class VSphereUtils {
     const { userValues, combined } = this.findChartValues(rke2Component, 'rancher-vsphere-csi') || {};
 
     if (!combined?.vCenter?.configSecret?.generate) {
+      if (userValues?.vCenter?.username) {
+        userValues.vCenter.username = '';
+      }
+      if (userValues?.vCenter?.password) {
+        userValues.vCenter.password = '';
+      }
+
       return;
     }
 
@@ -184,7 +198,7 @@ class VSphereUtils {
 
     // This is a copy of https://github.com/rancher/vsphere-charts/blob/a5c99d716df960dc50cf417d9ecffad6b55ca0ad/charts/rancher-vsphere-csi/values.yaml#L12-L21
     // Which makes it's way into the secret via https://github.com/rancher/vsphere-charts/blob/main/charts/rancher-vsphere-csi/templates/secret.yaml#L8
-    let configTemplateString = ' |\n      [Global]\n      cluster-id = {{ required \".Values.vCenter.clusterId must be provided\" (default .Values.vCenter.clusterId .Values.global.cattle.clusterId) | quote }}\n      user = {{ .Values.vCenter.username | quote }}\n      password = {{ .Values.vCenter.password | quote }}\n      port = {{ .Values.vCenter.port | quote }}\n      insecure-flag = {{ .Values.vCenter.insecureFlag | quote }}\n\n      [VirtualCenter {{ .Values.vCenter.host | quote }}]\n      datacenters = {{ .Values.vCenter.datacenters | quote }}';
+    let configTemplateString = '      [Global]\n      cluster-id = {{ required \".Values.vCenter.clusterId must be provided\" (default .Values.vCenter.clusterId .Values.global.cattle.clusterId) | quote }}\n      user = {{ .Values.vCenter.username | quote }}\n      password = {{ .Values.vCenter.password | quote }}\n      port = {{ .Values.vCenter.port | quote }}\n      insecure-flag = {{ .Values.vCenter.insecureFlag | quote }}\n\n      [VirtualCenter {{ .Values.vCenter.host | quote }}]\n      datacenters = {{ .Values.vCenter.datacenters | quote }}';
 
     configTemplateString = configTemplateString.replace('{{ required \".Values.vCenter.clusterId must be provided\" (default .Values.vCenter.clusterId .Values.global.cattle.clusterId) | quote }}', `"{{clusterId}}"`);
     configTemplateString = configTemplateString.replace('{{ .Values.vCenter.username | quote }}', `"${ username }"`);

package/vue.config.js

@@ -551,6 +551,8 @@ module.exports = function(dir, _appConfig) {
       // The static assets need to be in the built assets directory in order to get served (primarily the favicon)
       config.plugins.push(new CopyWebpackPlugin({ patterns: [{ from: path.join(SHELL_ABS, 'static'), to: '.' }] }));
 
+      config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /\/__tests__\// }));
+
       config.resolve.extensions.push(...['.tsx', '.ts', '.js', '.vue', '.scss']);
       config.watchOptions = {
         ...(config.watchOptions || {}),