@rancher/shell 2.0.1 → 3.0.0-rc.2

package/edit/networking.k8s.io.ingress/Rules.vue

@@ -54,7 +54,7 @@ export default {
   beforeUpdate() {
     for (const rule of this.value.spec.rules) {
       if (!rule.vKey) {
-        this.$set(rule, 'vKey', random32(1));
+        rule['vKey'] = random32(1);
       }
     }
   },
@@ -134,7 +134,7 @@ export default {
   </div>
   <div v-else>
     <ArrayListGrouped
-      v-model="value.spec.rules"
+      v-model:value="value.spec.rules"
       :add-label="t('ingress.rules.addRule')"
       :default-add-value="{}"
       :mode="mode"
@@ -144,7 +144,7 @@ export default {
         <Rule
           ref="lastRule"
           :key="props.row.value.vKey"
-          v-model="props.row.value"
+          v-model:value="props.row.value"
           :service-targets="serviceTargets"
           :ingress="value"
           :rules="rules"

package/edit/networking.k8s.io.ingress/index.vue

@@ -19,8 +19,9 @@ import Loading from '@shell/components/Loading';
 import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
-  name:       'CRUIngress',
-  components: {
+  name:         'CRUIngress',
+  inheritAttrs: false,
+  components:   {
     IngressClass,
     Certificates,
     CruResource,
@@ -196,12 +197,12 @@ export default {
   },
 
   created() {
-    this.$set(this.value, 'spec', this.value.spec || {});
-    this.$set(this.value.spec, 'rules', this.value.spec.rules || [{}]);
-    this.$set(this.value.spec, 'backend', this.value.spec.backend || {});
+    this.value['spec'] = this.value.spec || {};
+    this.value.spec['rules'] = this.value.spec.rules || [{}];
+    this.value.spec['backend'] = this.value.spec.backend || {};
 
     if (!this.value.spec.tls || Object.keys(this.value.spec.tls[0] || {}).length === 0) {
-      this.$set(this.value.spec, 'tls', []);
+      this.value.spec['tls'] = [];
     }
 
     this.registerBeforeHook(this.willSave, 'willSave');
@@ -279,11 +280,12 @@ export default {
         :error="tabErrors.rules"
       >
         <Rules
-          v-model="value"
+          :value="value"
           :mode="mode"
           :service-targets="serviceTargets"
           :certificates="certificates"
           :rules="rulesPathRules"
+          @update:value="$emit('input', $event)"
         />
       </Tab>
       <Tab
@@ -293,10 +295,11 @@ export default {
         :error="tabErrors.defaultBackend"
       >
         <DefaultBackend
-          v-model="value"
+          :value="value"
           :service-targets="serviceTargets"
           :mode="mode"
           :rules="defaultBackendPathRules"
+          @update:value="$emit('input', $event)"
         />
       </Tab>
       <Tab
@@ -306,10 +309,11 @@ export default {
         :weight="2"
       >
         <Certificates
-          v-model="value"
+          :value="value"
           :mode="mode"
           :certificates="certificates"
           :rules="{host: fvGetAndReportPathRules('spec.tls.hosts')}"
+          @update:value="$emit('input', $event)"
         />
       </Tab>
       <Tab
@@ -318,9 +322,10 @@ export default {
         :weight="1"
       >
         <IngressClass
-          v-model="value"
+          :value="value"
           :mode="mode"
           :ingress-classes="ingressClasses"
+          @update:value="$emit('input', $event)"
         />
       </Tab>
       <Tab

package/edit/networking.k8s.io.networkpolicy/PolicyRule.vue

@@ -59,7 +59,7 @@ export default {
           />
         </h2>
         <ArrayListGrouped
-          v-model="value[targetKey]"
+          v-model:value="value[targetKey]"
           :add-label="t(`networkpolicy.rules.${type}.add`)"
           :default-add-value="{}"
           :mode="mode"
@@ -67,7 +67,7 @@ export default {
           <template #default="props">
             <PolicyRuleTarget
               ref="lastTarget"
-              v-model="props.row.value"
+              v-model:value="props.row.value"
               :mode="mode"
               :type="type"
               :namespace="namespace"
@@ -89,7 +89,7 @@ export default {
           />
         </h2>
         <ArrayListGrouped
-          v-model="value.ports"
+          v-model:value="value.ports"
           :add-label="t('networkpolicy.rules.addPort')"
           :default-add-value="{}"
           :mode="mode"
@@ -97,7 +97,7 @@ export default {
           <template #default="props">
             <PolicyRulePort
               ref="lastPort"
-              v-model="props.row.value"
+              v-model:value="props.row.value"
               :mode="mode"
             />
           </template>

package/edit/networking.k8s.io.networkpolicy/PolicyRulePort.vue

@@ -39,7 +39,7 @@ export default {
     </div>
     <div class="col span-4">
       <LabeledSelect
-        v-model="value.protocol"
+        v-model:value="value.protocol"
         :mode="mode"
         :options="portOptions"
         :multiple="false"

package/edit/networking.k8s.io.networkpolicy/PolicyRuleTarget.vue

@@ -61,7 +61,7 @@ export default {
       !this.value[TARGET_OPTIONS.NAMESPACE_AND_POD_SELECTOR]
     ) {
       this.$nextTick(() => {
-        this.$set(this.value, TARGET_OPTIONS.IP_BLOCK, {});
+        this.value[TARGET_OPTIONS.IP_BLOCK] = {};
       });
     }
 
@@ -86,7 +86,7 @@ export default {
         );
       },
       set(podSelectorExpressions) {
-        this.$set(this.value, TARGET_OPTIONS.POD_SELECTOR, simplify(podSelectorExpressions));
+        this.value[TARGET_OPTIONS.POD_SELECTOR] = simplify(podSelectorExpressions);
       }
     },
     namespaceSelectorExpressions: {
@@ -97,7 +97,7 @@ export default {
         );
       },
       set(namespaceSelectorExpressions) {
-        this.$set(this.value, TARGET_OPTIONS.NAMESPACE_SELECTOR, simplify(namespaceSelectorExpressions));
+        this.value[TARGET_OPTIONS.NAMESPACE_SELECTOR] = simplify(namespaceSelectorExpressions);
       }
     },
     selectTargetOptions() {
@@ -126,24 +126,15 @@ export default {
         return null;
       },
       set(targetType) {
-        this.$delete(this.value, TARGET_OPTIONS.IP_BLOCK);
-        this.$delete(this.value, TARGET_OPTIONS.NAMESPACE_SELECTOR);
-        this.$delete(this.value, TARGET_OPTIONS.POD_SELECTOR);
-        this.$delete(this.value, TARGET_OPTIONS.NAMESPACE_AND_POD_SELECTOR);
+        delete this.value[TARGET_OPTIONS.IP_BLOCK];
+        delete this.value[TARGET_OPTIONS.NAMESPACE_SELECTOR];
+        delete this.value[TARGET_OPTIONS.POD_SELECTOR];
+        delete this.value[TARGET_OPTIONS.NAMESPACE_AND_POD_SELECTOR];
         this.$nextTick(() => {
-          this.$set(this.value, targetType, {});
+          this.value[targetType] = {};
         });
       }
     },
-    updateMatches() {
-      return {
-        handler: throttle(function() {
-          this.matchingNamespaces = this.getMatchingNamespaces();
-          this.matchingPods = this.getMatchingPods();
-        }, this.throttle, { leading: true }),
-        immediate: true
-      };
-    },
     matchingNamespacesAndPods() {
       return {
         policyNamespace: this.namespace,
@@ -153,16 +144,40 @@ export default {
     }
   },
   watch: {
-    namespace:                    'updateMatches',
-    allNamespaces:                'updateMatches',
-    'value.podSelector':          'updateMatches',
-    'value.namespaceSelector':    'updateMatches',
-    'value.ipBlock.cidr':         'validateCIDR',
-    'value.ipBlock.except':       'validateCIDR',
-    podSelectorExpressions:       'updateMatches',
-    namespaceSelectorExpressions: 'updateMatches',
+    namespace: {
+      handler:   'updateMatches',
+      immediate: true
+    },
+    allNamespaces: {
+      handler:   'updateMatches',
+      immediate: true
+    },
+    'value.podSelector': {
+      handler:   'updateMatches',
+      immediate: true
+    },
+    'value.namespaceSelector': {
+      handler:   'updateMatches',
+      immediate: true
+    },
+    'value.ipBlock.cidr':   'validateCIDR',
+    'value.ipBlock.except': 'validateCIDR',
+    podSelectorExpressions: {
+      handler:   'updateMatches',
+      immediate: true
+    },
+    namespaceSelectorExpressions: {
+      handler:   'updateMatches',
+      immediate: true
+    }
   },
   methods: {
+    updateMatches() {
+      throttle(() => {
+        this.matchingNamespaces = this.getMatchingNamespaces();
+        this.matchingPods = this.getMatchingPods();
+      }, this.throttle, { leading: true })();
+    },
     validateCIDR() {
       const exceptCidrs = this.value[TARGET_OPTIONS.IP_BLOCK]?.except || [];
 
@@ -214,7 +229,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledSelect
-          v-model="targetType"
+          v-model:value="targetType"
           data-testid="policy-rule-target-type-labeled-select"
           :mode="mode"
           :tooltip="targetType === TARGET_OPTIONS.NAMESPACE_AND_POD_SELECTOR ? t('networkpolicy.selectors.matchingNamespacesAndPods.tooltip') : null"
@@ -228,7 +243,7 @@ export default {
       <div class="row">
         <div class="col span-6">
           <LabeledInput
-            v-model="value[TARGET_OPTIONS.IP_BLOCK].cidr"
+            v-model:value="value[TARGET_OPTIONS.IP_BLOCK].cidr"
             data-testid="labeled-input-ip-block-selector"
             :mode="mode"
             :placeholder="t('networkpolicy.rules.ipBlock.cidr.placeholder')"
@@ -249,7 +264,7 @@ export default {
       <div class="row mt-20">
         <div class="col span-12">
           <ArrayList
-            v-model="value[TARGET_OPTIONS.IP_BLOCK].except"
+            v-model:value="value[TARGET_OPTIONS.IP_BLOCK].except"
             :add-label="t('networkpolicy.rules.ipBlock.addExcept')"
             :mode="mode"
             :show-header="true"
@@ -280,7 +295,7 @@ export default {
       <div class="row mb-0">
         <div class="col span-12">
           <MatchExpressions
-            v-model="podSelectorExpressions"
+            v-model:value="podSelectorExpressions"
             data-testid="match-expression-pod-selector"
             :mode="mode"
             :show-remove="false"
@@ -304,7 +319,7 @@ export default {
       <div class="row mb-0">
         <div class="col span-12">
           <MatchExpressions
-            v-model="namespaceSelectorExpressions"
+            v-model:value="namespaceSelectorExpressions"
             data-testid="match-expression-namespace-selector"
             :mode="mode"
             :show-remove="false"
@@ -337,7 +352,7 @@ export default {
         </div>
         <div class="col span-11">
           <MatchExpressions
-            v-model="namespaceSelectorExpressions"
+            v-model:value="namespaceSelectorExpressions"
             data-testid="match-expression-namespace-and-pod-selector-ns-rule"
             :mode="mode"
             :show-add-button="false"
@@ -356,7 +371,7 @@ export default {
         </div>
         <div class="col span-11">
           <MatchExpressions
-            v-model="podSelectorExpressions"
+            v-model:value="podSelectorExpressions"
             data-testid="match-expression-namespace-and-pod-selector-pod-rule"
             :mode="mode"
             :show-add-button="false"

package/edit/networking.k8s.io.networkpolicy/PolicyRules.vue

@@ -39,7 +39,7 @@ export default {
   },
   data() {
     if (!this.value.spec[this.type]) {
-      this.$set(this.value.spec, this.type, []);
+      this.value.spec[this.type] = [];
     }
 
     return {};
@@ -70,7 +70,7 @@ export default {
         >
           <Tab
             v-for="(policyRule, idx) in value.spec[type]"
-            :key="'filtered-rule-' + type + idx"
+            :key="idx"
             :name="'rule-' + type + idx"
             :label="policyRouleLabel(idx)"
             :show-header="false"
@@ -78,7 +78,7 @@ export default {
           >
             <PolicyRule
               ref="lastRule"
-              v-model="value.spec[type][idx]"
+              v-model:value="value.spec[type][idx]"
               :mode="mode"
               :type="type"
               :namespace="value.metadata.namespace"

package/edit/networking.k8s.io.networkpolicy/__tests__/PolicyRuleTarget.test.ts

@@ -44,20 +44,22 @@ describe.each([
     data() {
       return { throttleTime: 0 };
     },
-    propsData: {
+    props: {
       namespace:     mock.defaultNamespace,
       allNamespaces: mock.allNamespaces,
       allPods:       mock.allPods,
       type:          'ingress',
       mode
     },
-    mocks: {
-      $store: {
-        getters: {
-          'i18n/exists': mockExists,
-          'i18n/t':      (key: string, matchData: MatchData) => matchData ? `${ key }-${ matchData.total }` : key,
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            'i18n/exists': mockExists,
+            'i18n/t':      (key: string, matchData: MatchData) => matchData ? `${ key }-${ matchData.total }` : key,
+          }
         }
-      }
+      },
     }
   });
 
@@ -70,12 +72,12 @@ describe.each([
       const selectors = new PolicyRuleTargetSelectors(wrapper);
 
       // Check rule type selector
-      expect(selectors.ruleType.vm.$data._value.value).toBe('ipBlock');
+      expect(wrapper.vm.targetType).toBe('ipBlock');
 
-      expect(selectors.namespace.element).toBeUndefined();
-      expect(selectors.pod.element).toBeUndefined();
-      expect(selectors.namespaceAndPod.namespaceRule.element).toBeUndefined();
-      expect(selectors.namespaceAndPod.podRule.element).toBeUndefined();
+      expect(selectors.namespace.exists()).toBe(false);
+      expect(selectors.pod.exists()).toBe(false);
+      expect(selectors.namespaceAndPod.namespaceRule.exists()).toBe(false);
+      expect(selectors.namespaceAndPod.podRule.exists()).toBe(false);
 
       expect(selectors.ipBlock.element._value).toStrictEqual(ipBlock.cidr);
     });
@@ -88,7 +90,7 @@ describe.each([
       const selectors = new PolicyRuleTargetSelectors(wrapper);
 
       // Check rule type selector
-      expect(selectors.ruleType.vm.$data._value.value).toBe('namespaceSelector');
+      expect(wrapper.vm.targetType).toBe('namespaceSelector');
 
       // Check the matching namespaces displayed by the banner
       expect(wrapper.vm.$data.matchingNamespaces.matched).toBe(1);
@@ -98,9 +100,9 @@ describe.each([
       expect(wrapper.vm.$data.matchingNamespaces.matches[0].metadata.name).toBe('default');
       expect(wrapper.vm.$data.matchingNamespaces.matches[0].metadata.labels['user']).toBe('alice');
 
-      expect(selectors.pod.element).toBeUndefined();
-      expect(selectors.namespaceAndPod.namespaceRule.element).toBeUndefined();
-      expect(selectors.namespaceAndPod.podRule.element).toBeUndefined();
+      expect(selectors.pod.exists()).toBe(false);
+      expect(selectors.namespaceAndPod.namespaceRule.exists()).toBe(false);
+      expect(selectors.namespaceAndPod.podRule.exists()).toBe(false);
 
       expect(selectors.namespace.element).toBeDefined();
 
@@ -112,10 +114,9 @@ describe.each([
         ]
       });
 
-      const matchingNamespacesMessage = wrapper.find('[data-testid="matching-namespaces-message"]').text();
-      const totalInMessage = matchingNamespacesMessage.split('-')[1];
+      const expectedTotal = 3;
 
-      expect(totalInMessage).toBe(`${ wrapper.vm.$data.matchingNamespaces.total }`);
+      expect(wrapper.vm.$data.matchingNamespaces.total).toBe(expectedTotal);
     });
 
     it('should display pod selector rule', async() => {
@@ -126,7 +127,7 @@ describe.each([
       const selectors = new PolicyRuleTargetSelectors(wrapper);
 
       // Check rule type selector
-      expect(selectors.ruleType.vm.$data._value.value).toBe('podSelector');
+      expect(wrapper.vm.targetType).toBe('podSelector');
 
       // Check if namespace's labels match
       expect(wrapper.vm.$data.matchingPods.matched).toBe(1);
@@ -135,9 +136,9 @@ describe.each([
       expect(wrapper.vm.$data.matchingPods.matches[0].metadata.name).toBe('test-pod');
       expect(wrapper.vm.$data.matchingPods.matches[0].metadata.labels['foo']).toBe('bar');
 
-      expect(selectors.namespace.element).toBeUndefined();
-      expect(selectors.namespaceAndPod.namespaceRule.element).toBeUndefined();
-      expect(selectors.namespaceAndPod.podRule.element).toBeUndefined();
+      expect(selectors.namespace.exists()).toBe(false);
+      expect(selectors.namespaceAndPod.namespaceRule.exists()).toBe(false);
+      expect(selectors.namespaceAndPod.podRule.exists()).toBe(false);
 
       expect(selectors.pod.element).toBeDefined();
     });
@@ -156,7 +157,7 @@ describe.each([
       const selectors = new PolicyRuleTargetSelectors(wrapper);
 
       // Check rule type selector
-      expect(selectors.ruleType.vm.$data._value.value).toBe('namespaceAndPodSelector');
+      expect(wrapper.vm.targetType).toBe('namespaceAndPodSelector');
 
       // Check the matching pods displayed by the banner
       expect(wrapper.vm.$data.matchingPods.matched).toBe(1);
@@ -169,8 +170,8 @@ describe.each([
       expect(wrapper.vm.$data.matchingPods.matches[0].metadata.name).toBe('test-pod');
       expect(wrapper.vm.$data.matchingPods.matches[0].metadata.labels['foo']).toBe('bar');
 
-      expect(selectors.namespace.element).toBeUndefined();
-      expect(selectors.pod.element).toBeUndefined();
+      expect(selectors.namespace.exists()).toBe(false);
+      expect(selectors.pod.exists()).toBe(false);
 
       expect(selectors.namespaceAndPod.namespaceRule.element).toBeDefined();
       expect(selectors.namespaceAndPod.podRule.element).toBeDefined();

package/edit/networking.k8s.io.networkpolicy/index.vue

@@ -24,8 +24,8 @@ const POLICY_TYPES = {
 export default {
   // Props are found in CreateEditView
   // props: {},
-
-  components: {
+  inheritAttrs: false,
+  components:   {
     Banner,
     Checkbox,
     CruResource,
@@ -54,13 +54,13 @@ export default {
 
   data() {
     if ( !this.value.spec ) {
-      this.$set(this.value, 'spec', {
+      this.value['spec'] = {
         policyTypes: [],
         podSelector: {
           matchExpressions: [],
           matchLabels:      {},
         }
-      });
+      };
     }
 
     const matchingPods = {
@@ -96,14 +96,14 @@ export default {
         if (hasIngressPolicies) {
           addObject(policyTypes, POLICY_TYPES.INGRESS);
           if (!this.value.spec.ingress) {
-            this.$set(this.value.spec, 'ingress', []);
+            this.value.spec['ingress'] = [];
           }
         } else {
           policyTypes = removeObject(policyTypes, POLICY_TYPES.INGRESS);
-          this.$delete(this.value.spec, 'ingress');
+          delete this.value.spec['ingress'];
         }
 
-        this.$set(this.value.spec, 'policyTypes', policyTypes);
+        this.value.spec['policyTypes'] = policyTypes;
       }
     },
     hasEgressPolicies: {
@@ -116,14 +116,14 @@ export default {
         if (hasEgressPolicies) {
           addObject(policyTypes, POLICY_TYPES.EGRESS);
           if (!this.value.spec.egress) {
-            this.$set(this.value.spec, 'egress', []);
+            this.value.spec['egress'] = [];
           }
         } else {
           policyTypes = removeObject(policyTypes, POLICY_TYPES.EGRESS);
-          this.$delete(this.value.spec, 'egress');
+          delete this.value.spec['egress'];
         }
 
-        this.$set(this.value.spec, 'policyTypes', policyTypes);
+        this.value.spec['policyTypes'] = policyTypes;
       }
     },
     podSelectorExpressions: {
@@ -134,7 +134,7 @@ export default {
         );
       },
       set(podSelectorExpressions) {
-        this.$set(this.value.spec, 'podSelector', simplify(podSelectorExpressions));
+        this.value.spec['podSelector'] = simplify(podSelectorExpressions);
       }
     },
   },
@@ -195,7 +195,7 @@ export default {
               {{ t('networkpolicy.ingress.label') }}
             </h2>
             <Checkbox
-              v-model="hasIngressPolicies"
+              v-model:value="hasIngressPolicies"
               class="mt-20 mb-10"
               :mode="mode"
               :label="t('networkpolicy.ingress.enable')"
@@ -203,11 +203,12 @@ export default {
             />
             <PolicyRules
               v-if="hasIngressPolicies"
-              v-model="value"
+              :value="value"
               type="ingress"
               :mode="mode"
               :all-namespaces="allNamespaces"
               :all-pods="allPods"
+              @update:value="$emit('input', $event)"
             />
           </Tab>
           <Tab
@@ -220,18 +221,19 @@ export default {
               {{ t('networkpolicy.egress.label') }}
             </h2>
             <Checkbox
-              v-model="hasEgressPolicies"
+              v-model:value="hasEgressPolicies"
               class="mt-20 mb-10"
               :mode="mode"
               :label="t('networkpolicy.egress.enable')"
             />
             <PolicyRules
               v-if="hasEgressPolicies"
-              v-model="value"
+              :value="value"
               type="egress"
               :mode="mode"
               :all-namespaces="allNamespaces"
               :all-pods="allPods"
+              @update:value="$emit('input', $event)"
             />
           </Tab>
           <Tab
@@ -250,7 +252,7 @@ export default {
             <div class="row">
               <div class="col span-12">
                 <MatchExpressions
-                  v-model="podSelectorExpressions"
+                  v-model:value="podSelectorExpressions"
                   :mode="mode"
                   :show-remove="false"
                   :type="POD"

package/edit/node.vue

@@ -17,9 +17,9 @@ export default {
     Taints,
   },
 
-  mixins: [createEditView],
-
-  props: {
+  mixins:       [createEditView],
+  inheritAttrs: false,
+  props:        {
     value: {
       type:     Object,
       required: true,
@@ -46,8 +46,9 @@ export default {
       :mode="mode"
     />
     <ResourceTabs
-      v-model="value"
+      :value="value"
       :mode="mode"
+      @update:value="$emit('input', $event)"
     >
       <Tab
         name="taints"
@@ -55,7 +56,7 @@ export default {
         :weight="0"
       >
         <Taints
-          v-model="value.spec.taints"
+          v-model:value="value.spec.taints"
           :mode="mode"
         />
       </Tab>

package/edit/nodeDriver.vue

@@ -59,7 +59,12 @@ export default {
     <CreateDriver
       :mode="mode"
       :value="value"
-      :rules="{url:fvGetAndReportPathRules('url'), uiUrl:fvGetAndReportPathRules('uiUrl'), checksum:fvGetAndReportPathRules('checksum'), whitelistDomains:fvGetAndReportPathRules('whitelistDomains')}"
+      :rules="{
+        url: fvGetAndReportPathRules('url'),
+        uiUrl: fvGetAndReportPathRules('uiUrl'),
+        checksum: fvGetAndReportPathRules('checksum'),
+        whitelistDomains: fvGetAndReportPathRules('whitelistDomains')
+      }"
     />
   </CruResource>
 </template>