@rancher/shell 2.0.0 → 3.0.0-rc.1

package/edit/policy.poddisruptionbudget.vue

@@ -27,12 +27,12 @@ export default {
 
   data() {
     if ( !this.value.spec ) {
-      this.$set(this.value, 'spec', {
+      this.value['spec'] = {
         selector: {
           matchExpressions: [],
           matchLabels:      {},
         }
-      });
+      };
     }
 
     return { POD };
@@ -47,11 +47,11 @@ export default {
         const isNumeric = /^\d+$/;
 
         if (val && isNumeric.test(val)) {
-          this.$set(this.value.spec, 'minAvailable', Number.parseInt(val));
+          this.value.spec['minAvailable'] = Number.parseInt(val);
         } else if (val) {
-          this.$set(this.value.spec, 'minAvailable', val);
+          this.value.spec['minAvailable'] = val;
         } else {
-          this.$delete(this.value.spec, 'minAvailable');
+          delete this.value.spec['minAvailable'];
         }
       }
     },
@@ -63,11 +63,11 @@ export default {
         const isNumeric = /^\d+$/;
 
         if (val && isNumeric.test(val)) {
-          this.$set(this.value.spec, 'maxUnavailable', Number.parseInt(val));
+          this.value.spec['maxUnavailable'] = Number.parseInt(val);
         } else if (val) {
-          this.$set(this.value.spec, 'maxUnavailable', val);
+          this.value.spec['maxUnavailable'] = val;
         } else {
-          this.$delete(this.value.spec, 'maxUnavailable');
+          delete this.value.spec['maxUnavailable'];
         }
       }
     },
@@ -95,9 +95,10 @@ export default {
     />
 
     <ResourceTabs
-      v-model="value"
+      :value="value"
       :mode="mode"
       :side-tabs="true"
+      @update:value="$emit('input', $event)"
     >
       <Tab
         name="volumeclaim"
@@ -107,14 +108,14 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledInput
-              v-model="minAvailable"
+              v-model:value="minAvailable"
               :mode="mode"
               :label="t('podDisruptionBudget.minAvailable.label')"
             />
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="maxUnavailable"
+              v-model:value="maxUnavailable"
               :mode="mode"
               :label="t('podDisruptionBudget.maxUnavailable.label')"
             />

package/edit/provisioning.cattle.io.cluster/AgentEnv.vue

@@ -25,7 +25,7 @@ export default {
     label-key="cluster.tabs.agentEnv"
   >
     <KeyValue
-      v-model="value.spec.agentEnvVars"
+      v-model:value="value.spec.agentEnvVars"
       :mode="mode"
       key-name="name"
       :as-map="false"

package/edit/provisioning.cattle.io.cluster/CustomCommand.vue

@@ -159,15 +159,15 @@ export default {
       <h3 v-t="'cluster.custom.nodeRole.label'" />
       <h4 v-t="'cluster.custom.nodeRole.detail'" />
       <Checkbox
-        v-model="etcd"
+        v-model:value="etcd"
         label-key="model.machine.role.etcd"
       />
       <Checkbox
-        v-model="controlPlane"
+        v-model:value="controlPlane"
         label-key="model.machine.role.controlPlane"
       />
       <Checkbox
-        v-model="worker"
+        v-model:value="worker"
         label-key="model.machine.role.worker"
       />
       <Banner
@@ -189,26 +189,26 @@ export default {
       <div class="row mb-10">
         <div class="col span-4">
           <LabeledInput
-            v-model="nodeName"
+            v-model:value="nodeName"
             label-key="cluster.custom.advanced.nodeName"
           />
         </div>
         <div class="col span-4">
           <LabeledInput
-            v-model="address"
+            v-model:value="address"
             label-key="cluster.custom.advanced.publicIp"
           />
         </div>
         <div class="col span-4">
           <LabeledInput
-            v-model="internalAddress"
+            v-model:value="internalAddress"
             label-key="cluster.custom.advanced.privateIp"
           />
         </div>
       </div>
 
       <KeyValue
-        v-model="labels"
+        v-model:value="labels"
         class="mb-10"
         mode="edit"
         :title="t('cluster.custom.advanced.nodeLabel.title')"
@@ -217,7 +217,7 @@ export default {
       />
 
       <Taints
-        v-model="taints"
+        v-model:value="taints"
         class="mb-10"
         mode="edit"
         :value="taints"
@@ -253,7 +253,7 @@ export default {
       </CopyCode>
       <Checkbox
         v-if="clusterToken.insecureNodeCommand"
-        v-model="insecure"
+        v-model:value="insecure"
         label-key="cluster.custom.registrationCommand.insecure"
       />
 
@@ -275,7 +275,7 @@ export default {
           </CopyCode>
           <Checkbox
             v-if="clusterToken.insecureWindowsNodeCommand"
-            v-model="insecureWindows"
+            v-model:value="insecureWindows"
             label-key="cluster.custom.registrationCommand.insecure"
           />
           <Banner

package/edit/provisioning.cattle.io.cluster/Labels.vue

@@ -16,6 +16,16 @@ export default {
       required: true,
     },
   },
+  computed: {
+    localValue: {
+      get() {
+        return this.value;
+      },
+      set(newValue) {
+        this.$emit('update:value', newValue);
+      }
+    },
+  },
 };
 </script>
 
@@ -25,9 +35,10 @@ export default {
     label-key="generic.labelsAndAnnotations"
   >
     <Labels
-      v-model="value"
+      v-model:value="localValue"
       :mode="mode"
       :display-side-by-side="false"
+      @input="$emit('input', $event)"
     />
   </Tab>
 </template>

package/edit/provisioning.cattle.io.cluster/SelectCredential.vue

@@ -162,9 +162,9 @@ export default {
   watch: {
     credentialId(val) {
       if ( val === _NEW || val === _NONE ) {
-        this.$emit('input', null);
+        this.$emit('update:value', null);
       } else {
-        this.$emit('input', val);
+        this.$emit('update:value', val);
       }
     },
   },
@@ -250,7 +250,7 @@ export default {
       />
 
       <NameNsDescription
-        v-model="newCredential"
+        v-model:value="newCredential"
         :namespaced="false"
         :description-hidden="true"
         name-key="name"
@@ -263,7 +263,7 @@ export default {
       <component
         :is="createComponent"
         ref="create"
-        v-model="newCredential"
+        v-model:value="newCredential"
         mode="create"
         :driver-name="driverName"
         @validationChanged="createValidationChanged"
@@ -277,7 +277,7 @@ export default {
       />
 
       <LabeledSelect
-        v-model="credentialId"
+        v-model:value="credentialId"
         :label="t('cluster.credential.label')"
         :options="options"
         option-key="value"

package/edit/provisioning.cattle.io.cluster/__tests__/Advanced.test.ts

@@ -15,18 +15,20 @@ describe('component: Advanced', () => {
       haveArgInfo:     true,
       selectedVersion: VERSION_CLUSTER
     },
-    mocks: {
-      $store: {
-        getters: {
-          currentStore:              () => 'current_store',
-          'current_store/schemaFor': jest.fn(),
-          'current_store/all':       jest.fn(),
-          'i18n/t':                  jest.fn(),
-          'i18n/exists':             jest.fn(),
-        }
-      },
-      $route:  { query: { AS: _YAML } },
-      $router: { applyQuery: jest.fn() },
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            currentStore:              () => 'current_store',
+            'current_store/schemaFor': jest.fn(),
+            'current_store/all':       jest.fn(),
+            'i18n/t':                  jest.fn(),
+            'i18n/exists':             jest.fn(),
+          }
+        },
+        $route:  { query: { AS: _YAML } },
+        $router: { applyQuery: jest.fn() },
+      }
     }
   };
 
@@ -43,9 +45,11 @@ describe('component: Advanced', () => {
         mountOptions
       );
 
-      const inputElem = wrapper.find('[data-testid="array-list-box0"]').element as HTMLElement;
+      // eslint-disable-next-line no-console
+      console.log(wrapper.html());
+      const inputElem = wrapper.find('[data-testid="array-list-box0"]');
 
-      expect(inputElem).toBeUndefined();
+      expect(inputElem.exists()).toBe(false);
     });
 
     it(`should support undefined machineSelectorConfig.config`, () => {
@@ -147,10 +151,10 @@ describe('component: Advanced', () => {
           const globalContainer = wrapper.find('[data-testid="global-kubelet-arg"]');
           const selectorContainer = wrapper.find('[data-testid="selector-kubelet-arg"]');
 
-          const globalInputElem = globalContainer.element as HTMLInputElement;
+          const globalInputElem = globalContainer;
           const selectorInputElem = selectorContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
 
-          expect(globalInputElem).toBeUndefined();
+          expect(globalInputElem.exists()).toBe(false);
           expect(selectorInputElem.value).toContain('config-from-machineSelectorConfig');
         });
 
@@ -170,10 +174,10 @@ describe('component: Advanced', () => {
           const globalContainer = wrapper.find('[data-testid="global-kubelet-arg"]');
           const selectorContainer = wrapper.find('[data-testid="selector-kubelet-arg"]');
 
-          const selectorInputElem = selectorContainer.element as HTMLInputElement;
+          const selectorInputElem = selectorContainer;
           const globalInputElem = globalContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
 
-          expect(selectorInputElem).toBeUndefined();
+          expect(selectorInputElem.exists()).toBe(false);
           expect(globalInputElem.value).toContain('config-from-machineGlobalConfig');
         });
 
@@ -219,22 +223,22 @@ describe('component: Advanced', () => {
         const globalContainer = wrapper.find('[data-testid="global-kubelet-arg"]');
         const selectorContainer = wrapper.find('[data-testid="selector-kubelet-arg"]');
 
-        const selectorInputElem = selectorContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
-        const globalInputElem = globalContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
+        const selectorInputElem = selectorContainer.find('[data-testid="input-0"]');
+        const globalInputElem = globalContainer.find('[data-testid="input-0"]');
 
         const emptyCharacter = wrapper.find('.info-box').find('.text-muted').element;
 
-        const globalAddButton = globalContainer.find('[data-testid="array-list-button"]').element;
-        const selectorAddButton = selectorContainer.find('[data-testid="array-list-button"]').element;
+        const globalAddButton = globalContainer.find('[data-testid="array-list-button"]');
+        const selectorAddButton = selectorContainer.find('[data-testid="array-list-button"]');
 
-        const removeButtonConfig = globalContainer.find('[data-testid="remove-item-0"]').element;
+        const removeButtonConfig = globalContainer.find('[data-testid="remove-item-0"]');
 
-        expect(selectorInputElem).toBeUndefined();
-        expect(globalInputElem).toBeUndefined();
-        expect(globalAddButton).toBeUndefined();
-        expect(selectorAddButton).toBeUndefined();
+        expect(selectorInputElem.exists()).toBe(false);
+        expect(globalInputElem.exists()).toBe(false);
+        expect(globalAddButton.exists()).toBe(false);
+        expect(selectorAddButton.exists()).toBe(false);
         expect(emptyCharacter).toBeDefined();
-        expect(removeButtonConfig).toBeFalsy();
+        expect(removeButtonConfig.exists()).toBeFalsy();
       });
 
       it(`mode: view, should show empty value'`, () => {
@@ -254,22 +258,22 @@ describe('component: Advanced', () => {
         const globalContainer = wrapper.find('[data-testid="global-kubelet-arg"]');
         const selectorContainer = wrapper.find('[data-testid="selector-kubelet-arg"]');
 
-        const selectorInputElem = selectorContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
-        const globalInputElem = globalContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
+        const selectorInputElem = selectorContainer.find('[data-testid="input-0"]');
+        const globalInputElem = globalContainer.find('[data-testid="input-0"]');
 
-        const emptyCharacter = wrapper.find('.info-box').find('.text-muted').element;
+        const emptyCharacter = wrapper.find('.info-box').find('.text-muted');
 
         const globalAddButton = globalContainer.find('[data-testid="array-list-button"]').element;
         const selectorAddButton = selectorContainer.find('[data-testid="array-list-button"]').element;
 
-        const removeButtonConfig = globalContainer.find('[data-testid="remove-item-0"]').element;
+        const removeButtonConfig = globalContainer.find('[data-testid="remove-item-0"]');
 
-        expect(selectorInputElem).toBeUndefined();
-        expect(globalInputElem).toBeUndefined();
+        expect(selectorInputElem.exists()).toBe(false);
+        expect(globalInputElem.exists()).toBe(false);
         expect(globalAddButton).toBeDefined();
         expect(selectorAddButton).toBeDefined();
-        expect(emptyCharacter).toBeUndefined();
-        expect(removeButtonConfig).toBeFalsy();
+        expect(emptyCharacter.exists()).toBe(false);
+        expect(removeButtonConfig.exists()).toBeFalsy();
       });
     });
   });