@rancher/shell 2.0.0 → 3.0.0-rc.1

package/edit/provisioning.cattle.io.cluster/tabs/etcd/S3Config.vue

@@ -67,7 +67,7 @@ export default {
     update() {
       const out = { ...this.config };
 
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
   },
 };
@@ -76,7 +76,7 @@ export default {
 <template>
   <div>
     <SelectOrCreateAuthSecret
-      v-model="config.cloudCredentialName"
+      v-model:value="config.cloudCredentialName"
       :register-before-hook="registerBeforeHook"
       in-store="management"
       :allow-ssh="false"
@@ -85,25 +85,25 @@ export default {
       :namespace="namespace"
       generate-name="etcd-backup-s3-"
       :cache-secrets="true"
-      @input="update"
+      @update:value="update"
     />
 
     <div class="row mt-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="config.bucket"
+          v-model:value="config.bucket"
           label="Bucket"
           :placeholder="ccData.defaultBucket"
           :required="!ccData.defaultBucket"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="config.folder"
+          v-model:value="config.folder"
           label="Folder"
           :placeholder="ccData.defaultFolder"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -111,18 +111,18 @@ export default {
     <div class="row mt-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="config.region"
+          v-model:value="config.region"
           label="Region"
           :placeholder="ccData.defaultRegion"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="config.endpoint"
+          v-model:value="config.endpoint"
           label="Endpoint"
           :placeholder="ccData.defaultEndpoint"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -132,19 +132,19 @@ export default {
       class="mt-20"
     >
       <Checkbox
-        v-model="config.skipSSLVerify"
+        v-model:value="config.skipSSLVerify"
         :mode="mode"
         label="Accept any certificate (insecure)"
-        @input="update"
+        @update:value="update"
       />
 
       <LabeledInput
         v-if="!config.skipSSLVerify"
-        v-model="config.endpointCA"
+        v-model:value="config.endpointCA"
         type="multiline"
         label="Endpoint CA Cert"
         :placeholder="ccData.defaultEndpointCA"
-        @input="update"
+        @update:value="update"
       />
     </div>
   </div>

package/edit/provisioning.cattle.io.cluster/tabs/etcd/index.vue

@@ -61,7 +61,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <RadioGroup
-          v-model="etcd.disableSnapshots"
+          v-model:value="etcd.disableSnapshots"
           name="etcd-disable-snapshots"
           :options="[true, false]"
           :label="t('cluster.rke2.etcd.disableSnapshots.label')"
@@ -76,7 +76,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledInput
-          v-model="etcd.snapshotScheduleCron"
+          v-model:value="etcd.snapshotScheduleCron"
           type="cron"
           placeholder="0 * * * *"
           :mode="mode"
@@ -85,7 +85,7 @@ export default {
       </div>
       <div class="col span-6">
         <UnitInput
-          v-model="etcd.snapshotRetention"
+          v-model:value="etcd.snapshotRetention"
           :mode="mode"
           :label="t('cluster.rke2.etcd.snapshotRetention.label')"
           :suffix="t('cluster.rke2.snapshots.suffix')"
@@ -103,12 +103,12 @@ export default {
         label="Backup Snapshots to S3"
         :labels="['Disable','Enable']"
         :mode="mode"
-        @input="$emit('s3-backup-changed', $event)"
+        @update:value="$emit('s3-backup-changed', $event)"
       />
 
       <S3Config
         v-if="s3Backup"
-        v-model="etcd.s3"
+        v-model:value="etcd.s3"
         :namespace="value.metadata.namespace"
         :register-before-hook="registerBeforeHook"
         :mode="mode"
@@ -127,7 +127,7 @@ export default {
           :label="t('cluster.rke2.etcd.exportMetric.label')"
           :labels="[t('cluster.rke2.etcd.exportMetric.false'), t('cluster.rke2.etcd.exportMetric.true')]"
           :mode="mode"
-          @input="$emit('config-etcd-expose-metrics-changed', $event)"
+          @update:value="$emit('config-etcd-expose-metrics-changed', $event)"
         />
       </div>
     </div>

package/edit/provisioning.cattle.io.cluster/tabs/networking/ACE.vue

@@ -49,7 +49,7 @@ export default {
     <h3 v-t="'cluster.tabs.ace'" />
 
     <RadioGroup
-      v-model="config.enabled"
+      v-model:value="config.enabled"
       name="enabled"
       :options="[false, true]"
       :labels="[t('generic.disabled'), t('generic.enabled')]"
@@ -60,7 +60,7 @@ export default {
       <div class="row mb-20">
         <div class="col span-6">
           <LabeledInput
-            v-model="config.fqdn"
+            v-model:value="config.fqdn"
             :mode="mode"
             label="FQDN"
             :tooltip="t('cluster.rke2.address.fqdn.toolTip')"
@@ -68,7 +68,7 @@ export default {
         </div>
         <div class="col span-6">
           <LabeledInput
-            v-model="config.caCerts"
+            v-model:value="config.caCerts"
             :mode="mode"
             :label="t('cluster.rke2.address.caCerts.label')"
             type="multiline"

package/edit/provisioning.cattle.io.cluster/tabs/networking/index.vue

@@ -63,7 +63,15 @@ export default {
     },
     isView() {
       return this.mode === _VIEW;
-    }
+    },
+    localValue: {
+      get() {
+        return this.value;
+      },
+      set(newValue) {
+        this.$emit('update:value', newValue);
+      }
+    },
   },
 };
 </script>
@@ -89,7 +97,7 @@ export default {
         class="col span-6"
       >
         <LabeledInput
-          v-model="serverConfig['cluster-cidr']"
+          v-model:value="serverConfig['cluster-cidr']"
           :mode="mode"
           :disabled="isEdit"
           :label="t('cluster.rke2.address.clusterCidr.label')"
@@ -100,7 +108,7 @@ export default {
         class="col span-6"
       >
         <LabeledInput
-          v-model="serverConfig['service-cidr']"
+          v-model:value="serverConfig['service-cidr']"
           :mode="mode"
           :disabled="isEdit"
           :label="t('cluster.rke2.address.serviceCidr.label')"
@@ -114,7 +122,7 @@ export default {
         class="col span-6"
       >
         <LabeledInput
-          v-model="serverConfig['cluster-dns']"
+          v-model:value="serverConfig['cluster-dns']"
           :mode="mode"
           :disabled="isEdit"
           :label="t('cluster.rke2.address.dns.label')"
@@ -125,7 +133,7 @@ export default {
         class="col span-6"
       >
         <LabeledInput
-          v-model="serverConfig['cluster-domain']"
+          v-model:value="serverConfig['cluster-domain']"
           :mode="mode"
           :disabled="isEdit"
           :label="t('cluster.rke2.address.domain.label')"
@@ -139,7 +147,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledInput
-          v-model="serverConfig['service-node-port-range']"
+          v-model:value="serverConfig['service-node-port-range']"
           :mode="mode"
           :label="t('cluster.rke2.address.nodePortRange.label')"
         />
@@ -155,7 +163,7 @@ export default {
           :mode="mode"
           :label="t('cluster.rke2.truncateHostnames')"
           data-testid="network-tab-truncate-hostname"
-          @input="$emit('truncate-hostname', $event)"
+          @update:value="$emit('truncate-hostname', $event)"
         />
         <Banner
           v-if="hostnameTruncationManuallySet"
@@ -174,7 +182,7 @@ export default {
     >
       <div class="col span-6">
         <ArrayList
-          v-model="serverConfig['tls-san']"
+          v-model:value="serverConfig['tls-san']"
           :protip="false"
           :mode="mode"
           :title="t('cluster.rke2.address.tlsSan.label')"
@@ -183,8 +191,9 @@ export default {
     </div>
 
     <ACE
-      v-model="value"
+      v-model:value="localValue"
       :mode="mode"
+      @update:value="$emit('input', $event)"
     />
   </div>
 </template>

package/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs.vue

@@ -1,12 +1,12 @@
 <script>
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
-import { set } from '@shell/utils/object';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import SecretSelector from '@shell/components/form/SecretSelector';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
+import { base64Decode, base64Encode } from '@shell/utils/crypto';
 
 export default {
   components: {
@@ -55,7 +55,7 @@ export default {
       if (configMap[hostname]) {
         configMap[hostname].insecureSkipVerify = configMap[hostname].insecureSkipVerify ?? defaultAddValue.insecureSkipVerify;
         configMap[hostname].authConfigSecretName = configMap[hostname].authConfigSecretName ?? defaultAddValue.authConfigSecretName;
-        configMap[hostname].caBundle = configMap[hostname].caBundle ?? defaultAddValue.caBundle;
+        configMap[hostname].caBundle = base64Decode(configMap[hostname].caBundle ?? defaultAddValue.caBundle);
         configMap[hostname].tlsSecretName = configMap[hostname].tlsSecretName ?? defaultAddValue.tlsSecretName;
       }
       entries.push({
@@ -94,11 +94,15 @@ export default {
           continue;
         }
 
-        configs[h] = { ...entry };
+        configs[h] = {
+          ...entry,
+          caBundle: base64Encode(entry.caBundle)
+        };
+
         delete configs[h].hostname;
       }
 
-      set(this.value, 'spec.rkeConfig.registries.configs', configs);
+      this.value.spec.rkeConfig.registries.configs = configs;
       this.$emit('updateConfigs', configs);
     },
 
@@ -131,27 +135,26 @@ export default {
       {{ t('registryConfig.description') }}
     </p>
     <ArrayListGrouped
-      v-model="entries"
+      v-model:value="entries"
       :add-label="t('registryConfig.addLabel')"
       :default-add-value="defaultAddValue"
       :initial-empty-row="true"
       :mode="mode"
       data-testid="registry-authentication"
-      @input="update"
+      @update:value="update"
     >
       <template #default="{row, i}">
         <div class="row">
           <div class="col span-6">
             <LabeledInput
-              v-model="row.value.hostname"
+              v-model:value="row.value.hostname"
               label="Registry Hostname"
               :mode="mode"
               :data-testid="`registry-auth-host-input-${i}`"
             />
 
             <SelectOrCreateAuthSecret
-              :key="`${row.value.hostname}-${row.value.authConfigSecretName}`"
-              v-model="row.value.authConfigSecretName"
+              v-model:value="row.value.authConfigSecretName"
               :register-before-hook="wrapRegisterBeforeHook"
               :append-unique-id-to-hook="true"
               in-store="management"
@@ -167,7 +170,7 @@ export default {
           </div>
           <div class="col span-6">
             <SecretSelector
-              v-model="row.value.tlsSecretName"
+              v-model:value="row.value.tlsSecretName"
               in-store="management"
               :mode="mode"
               :types="[TLS]"
@@ -176,7 +179,8 @@ export default {
             />
 
             <LabeledInput
-              v-model="row.value.caBundle"
+              v-model:value="row.value.caBundle"
+              :data-testid="`registry-caBundle-${i}`"
               class="mt-20"
               type="multiline"
               label="CA Cert Bundle"
@@ -185,7 +189,7 @@ export default {
 
             <div>
               <Checkbox
-                v-model="row.value.insecureSkipVerify"
+                v-model:value="row.value.insecureSkipVerify"
                 class="mt-10"
                 :mode="mode"
                 label="Skip TLS Verifications"

package/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryMirrors.vue

@@ -85,7 +85,7 @@ export default {
       {{ t('registryMirror.description') }}
     </p>
     <ArrayListGrouped
-      v-model="entries"
+      v-model:value="entries"
       :add-label="t('registryMirror.addLabel')"
       :default-add-value="defaultAddValue"
       :initial-empty-row="true"
@@ -96,7 +96,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledInput
-              v-model="row.value.hostname"
+              v-model:value="row.value.hostname"
               :label="t('registryMirror.hostnameLabel')"
               :placeholder="t('registryMirror.hostnamePlaceholder')"
               :mode="mode"
@@ -104,7 +104,7 @@ export default {
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="row.value.endpoints"
+              v-model:value="row.value.endpoints"
               :label="t('registryMirror.endpointsLabel')"
               :placeholder="t('registryMirror.endpointsPlaceholder')"
               :mode="mode"
@@ -121,7 +121,7 @@ export default {
               />
             </h3>
             <KeyValue
-              v-model="row.value.rewrite"
+              v-model:value="row.value.rewrite"
               :mode="mode"
               :add-label="t('registryMirrorRewrite.addLabel')"
               :read-allowed="false"

package/edit/provisioning.cattle.io.cluster/tabs/registries/__tests__/RegistryConfigs.test.ts

@@ -0,0 +1,64 @@
+import { mount, Wrapper } from '@vue/test-utils';
+import { clone } from '@shell/utils/object';
+import { _EDIT } from '@shell/config/query-params';
+import { PROV_CLUSTER } from '@shell/edit/provisioning.cattle.io.cluster/__tests__/utils/cluster';
+import RegistryConfigs from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs.vue';
+
+describe.skip('(Vue3 Skip) component: RegistryConfigs', () => {
+  let wrapper: Wrapper<InstanceType<typeof RegistryConfigs> & { [key: string]: any }>;
+
+  const mountOptions = {
+    propsData: {
+      value:                     {},
+      mode:                      _EDIT,
+      clusterRegisterBeforeHook: () => {}
+    },
+    global: {
+      stubs: {
+        SelectOrCreateAuthSecret: true,
+        SecretSelector:           true,
+      },
+      mocks: { $store: { getters: { 'i18n/t': jest.fn() } } }
+    }
+  };
+
+  describe('key CA Cert Bundle', () => {
+    it('should display default key', () => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.registries.configs = { foo: { caBundle: 'Zm9vYmFy' } };
+
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(
+        RegistryConfigs,
+        mountOptions
+      );
+
+      const registry = wrapper.find('[data-testid^="registry-caBundle"]').element as HTMLTextAreaElement;
+
+      expect(registry.value).toBe('foobar');
+    });
+
+    it('should update key in base64 format', async() => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.registries.configs = { foo: { caBundle: 'Zm9vYmFy' } };
+
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(
+        RegistryConfigs,
+        mountOptions
+      );
+
+      const registry = wrapper.find('[data-testid^="registry-caBundle"]');
+
+      await registry.setValue('ssh key');
+
+      wrapper.vm.update();
+
+      expect(wrapper.emitted('updateConfigs')![0][0]['foo']['caBundle']).toBe('c3NoIGtleQ==');
+    });
+  });
+});

package/edit/provisioning.cattle.io.cluster/tabs/registries/index.vue

@@ -80,7 +80,7 @@ export default {
         class="mb-20"
         :label="t('cluster.privateRegistry.label')"
         data-testid="registries-enable-checkbox"
-        @input="$emit('custom-registry-changed', $event)"
+        @update:value="$emit('custom-registry-changed', $event)"
       />
     </div>
     <div
@@ -94,10 +94,10 @@ export default {
           placeholder-key="catalog.chart.registry.custom.placeholder"
           :min-height="30"
           data-testid="registry-host-input"
-          @input="$emit('registry-host-changed', $event)"
+          @update:value="$emit('registry-host-changed', $event)"
         />
         <SelectOrCreateAuthSecret
-          v-model="registrySecret"
+          :value="registrySecret"
           :register-before-hook="registerBeforeHook"
           :hook-priority="1"
           :mode="mode"
@@ -108,7 +108,7 @@ export default {
           :namespace="value.metadata.namespace"
           generate-name="registryconfig-auth-"
           :cache-secrets="true"
-          @input="$emit('registry-secret-changed', $event)"
+          @update:value="$emit('registry-secret-changed', $event)"
         />
       </div>
     </div>
@@ -130,15 +130,17 @@ export default {
             :label-key="value.isK3s ? 'cluster.privateRegistry.docsLinkK3s' : 'cluster.privateRegistry.docsLinkRke2'"
           />
           <RegistryMirrors
-            v-model="value"
+            :value="value"
             class="mt-20"
             :mode="mode"
+            @update:value="$emit('input', $event)"
           />
           <RegistryConfigs
-            v-model="value"
+            :value="value"
             class="mt-20"
             :mode="mode"
             :cluster-register-before-hook="registerBeforeHook"
+            @update:value="$emit('input', $event)"
             @updateConfigs="$emit('update-configs-changed', $event)"
           />
         </AdvancedSection>

package/edit/provisioning.cattle.io.cluster/tabs/upgrade/DrainOptions.vue

@@ -70,7 +70,7 @@ export default {
         out.timeout = 0;
       }
 
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
   },
 };
@@ -79,63 +79,63 @@ export default {
 <template>
   <div>
     <RadioGroup
-      v-model="enabled"
+      v-model:value="enabled"
       name="enabled"
       :options="[false, true]"
       :label="t('cluster.rke2.drain.label')"
       :labels="[t('generic.no'), t('generic.yes')]"
       :tooltip="t('cluster.rke2.drain.toolTip')"
       :mode="mode"
-      @input="update"
+      @update:value="update"
     />
 
     <template v-if="enabled">
       <div class="mt-20">
         <Checkbox
-          v-model="deleteEmptyDirData"
+          v-model:value="deleteEmptyDirData"
           label-key="cluster.rke2.drain.deleteEmptyDir.label"
           tooltip-key="cluster.rke2.drain.deleteEmptyDir.tooltip"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div>
         <Checkbox
-          v-model="force"
+          v-model:value="force"
           label="Delete standalone pods"
           label-key="cluster.rke2.drain.force.label"
           tooltip="Delete standalone pods which are not managed by a Workload controller (Deployment, Job, etc).  Draining will fail if this is not set and there are standalone pods."
           tooltop-key="cluster.rke2.drain.force.tooltip"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div>
         <Checkbox
-          v-model="customGracePeriod"
+          v-model:value="customGracePeriod"
           label-key="cluster.rke2.drain.gracePeriod.checkboxLabel"
-          @input="update"
+          @update:value="update"
         />
         <UnitInput
           v-if="customGracePeriod"
-          v-model="gracePeriod"
+          v-model:value="gracePeriod"
           label-key="cluster.rke2.drain.gracePeriod.inputLabel"
           :suffix="t('suffix.seconds', {count: timeout})"
           class="mb-10"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div>
         <Checkbox
-          v-model="customTimeout"
+          v-model:value="customTimeout"
           label-key="cluster.rke2.drain.timeout.checkboxLabel"
-          @input="update"
+          @update:value="update"
         />
         <UnitInput
           v-if="customTimeout"
-          v-model="timeout"
+          v-model:value="timeout"
           label-key="cluster.rke2.drain.timeout.inputLabel"
           :suffix="t('suffix.seconds', {count: timeout})"
           class="drain-timeout"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </template>

package/edit/provisioning.cattle.io.cluster/tabs/upgrade/index.vue

@@ -44,14 +44,14 @@ export default {
       <div class="col span-6">
         <h3>{{ t('cluster.rke2.controlPlaneConcurrency.header') }}</h3>
         <LabeledInput
-          v-model="rkeConfig.upgradeStrategy.controlPlaneConcurrency"
+          v-model:value="rkeConfig.upgradeStrategy.controlPlaneConcurrency"
           :mode="mode"
           :label="t('cluster.rke2.controlPlaneConcurrency.label')"
           :tooltip="t('cluster.rke2.controlPlaneConcurrency.toolTip')"
         />
         <div class="spacer" />
         <DrainOptions
-          v-model="rkeConfig.upgradeStrategy.controlPlaneDrainOptions"
+          v-model:value="rkeConfig.upgradeStrategy.controlPlaneDrainOptions"
           :mode="mode"
         />
       </div>
@@ -60,14 +60,14 @@ export default {
           {{ t('cluster.rke2.workNode.label') }}
         </h3>
         <LabeledInput
-          v-model="rkeConfig.upgradeStrategy.workerConcurrency"
+          v-model:value="rkeConfig.upgradeStrategy.workerConcurrency"
           :mode="mode"
           :label="t('cluster.rke2.workerConcurrency.label')"
           :tooltip="t('cluster.rke2.workerConcurrency.toolTip')"
         />
         <div class="spacer" />
         <DrainOptions
-          v-model="rkeConfig.upgradeStrategy.workerDrainOptions"
+          v-model:value="rkeConfig.upgradeStrategy.workerDrainOptions"
           :mode="mode"
         />
       </div>