@rancher/shell 0.5.3 → 2.0.0

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

@@ -26,6 +26,7 @@ import {
 } from '@shell/utils/object';
 import { allHash } from '@shell/utils/promise';
 import { sortBy } from '@shell/utils/sort';
+import { vspherePoolConfigMerge } from '@shell/machine-config/vmwarevsphere-pool-config-merge';
 
 import { compare, sortable } from '@shell/utils/version';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
@@ -43,7 +44,7 @@ import semver from 'semver';
 
 import { SETTING } from '@shell/config/settings';
 import { base64Encode } from '@shell/utils/crypto';
-import { CAPI as CAPI_ANNOTATIONS } from '@shell/config/labels-annotations';
+import { CAPI as CAPI_ANNOTATIONS, CLUSTER_BADGE } from '@shell/config/labels-annotations';
 import AgentEnv from '@shell/edit/provisioning.cattle.io.cluster/AgentEnv';
 import Labels from '@shell/edit/provisioning.cattle.io.cluster/Labels';
 import MachinePool from '@shell/edit/provisioning.cattle.io.cluster/tabs/MachinePool';
@@ -60,11 +61,14 @@ import Upgrade from '@shell/edit/provisioning.cattle.io.cluster/tabs/upgrade';
 import Registries from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries';
 import AddOnConfig from '@shell/edit/provisioning.cattle.io.cluster/tabs/AddOnConfig';
 import Advanced from '@shell/edit/provisioning.cattle.io.cluster/tabs/Advanced';
+import ClusterAppearance from '@shell/components/form/ClusterAppearance';
 
 const HARVESTER = 'harvester';
 const HARVESTER_CLOUD_PROVIDER = 'harvester-cloud-provider';
 const NETBIOS_TRUNCATION_LENGTH = 15;
 
+const VMWARE_VSPHERE = 'vmwarevsphere';
+
 /**
  * Classes to be adopted by the node badges in Machine pools
  */
@@ -106,7 +110,8 @@ export default {
     Upgrade,
     Registries,
     AddOnConfig,
-    Advanced
+    Advanced,
+    ClusterAppearance
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -149,15 +154,15 @@ export default {
   },
 
   data() {
-    if ( !this.value.spec.rkeConfig ) {
+    if (!this.value.spec.rkeConfig) {
       set(this.value.spec, 'rkeConfig', {});
     }
 
-    if ( !this.value.spec.rkeConfig.chartValues ) {
+    if (!this.value.spec.rkeConfig.chartValues) {
       set(this.value.spec.rkeConfig, 'chartValues', {});
     }
 
-    if ( !this.value.spec.rkeConfig.upgradeStrategy ) {
+    if (!this.value.spec.rkeConfig.upgradeStrategy) {
       set(this.value.spec.rkeConfig, 'upgradeStrategy', {
         controlPlaneConcurrency:  '1',
         controlPlaneDrainOptions: {},
@@ -166,11 +171,19 @@ export default {
       });
     }
 
-    if ( !this.value.spec.rkeConfig.machineGlobalConfig ) {
+    if (!this.value.spec.rkeConfig.dataDirectories) {
+      set(this.value.spec.rkeConfig, 'dataDirectories', {
+        systemAgent:  '',
+        provisioning: '',
+        k8sDistro:    '',
+      });
+    }
+
+    if (!this.value.spec.rkeConfig.machineGlobalConfig) {
       set(this.value.spec, 'rkeConfig.machineGlobalConfig', {});
     }
 
-    if ( !this.value.spec.rkeConfig.machineSelectorConfig?.length ) {
+    if (!this.value.spec.rkeConfig.machineSelectorConfig?.length) {
       set(this.value.spec, 'rkeConfig.machineSelectorConfig', [{ config: {} }]);
     }
 
@@ -221,6 +234,15 @@ export default {
   },
 
   computed: {
+    clusterName() {
+      return this.value.metadata?.name || '';
+    },
+    showClusterAppearance() {
+      return this.mode === _CREATE;
+    },
+    clusterBadgeAbbreviation() {
+      return this.$store.getters['customisation/getPreviewCluster'];
+    },
     rkeConfig() {
       return this.value.spec.rkeConfig;
     },
@@ -251,11 +273,11 @@ export default {
       // If there are any other properties set, or multiple configs with no selector
       // show a warning that you're editing only part of the config in the UI.
 
-      for ( const conf of this.value.spec?.rkeConfig?.machineSelectorConfig ) {
-        if ( conf.machineLabelSelector ) {
+      for (const conf of this.value.spec?.rkeConfig?.machineSelectorConfig) {
+        if (conf.machineLabelSelector) {
           const keys = Object.keys(conf.config || {});
 
-          if ( keys.length === 0 || (keys.length === 1 && keys[0] === 'kubelet-arg') ) {
+          if (keys.length === 0 || (keys.length === 1 && keys[0] === 'kubelet-arg')) {
             kubeletOnly++;
           } else {
             other++;
@@ -268,7 +290,7 @@ export default {
       // eslint-disable-next-line no-console
       console.log(`Global: ${ global }, Kubelet Only: ${ kubeletOnly }, Other: ${ other }`);
 
-      return ( global > 1 || other > 0 );
+      return (global > 1 || other > 0);
     },
 
     versionOptions() {
@@ -291,26 +313,26 @@ export default {
       const showK3s = allValidK3sVersions.length && !existingRke2;
       const out = [];
 
-      if ( showRke2 ) {
-        if ( showK3s ) {
+      if (showRke2) {
+        if (showK3s) {
           out.push({ kind: 'group', label: this.t('cluster.provider.rke2') });
         }
 
         out.push(...allValidRke2Versions);
       }
 
-      if ( showK3s ) {
-        if ( showRke2 ) {
+      if (showK3s) {
+        if (showRke2) {
           out.push({ kind: 'group', label: this.t('cluster.provider.k3s') });
         }
 
         out.push(...allValidK3sVersions);
       }
 
-      if ( cur ) {
+      if (cur) {
         const existing = out.find((x) => x.value === cur);
 
-        if ( existing ) {
+        if (existing) {
           existing.disabled = false;
         }
       }
@@ -324,7 +346,7 @@ export default {
     selectedVersion() {
       const str = this.value.spec.kubernetesVersion;
 
-      if ( !str ) {
+      if (!str) {
         return;
       }
 
@@ -363,7 +385,7 @@ export default {
     },
 
     needCredential() {
-      if ( this.provider === 'custom' || this.provider === 'import' || this.isElementalCluster || this.mode === _VIEW || (this.providerConfig?.spec?.builtin === false && this.providerConfig?.spec?.addCloudCredential === false) ) {
+      if (this.provider === 'custom' || this.provider === 'import' || this.isElementalCluster || this.mode === _VIEW || (this.providerConfig?.spec?.builtin === false && this.providerConfig?.spec?.addCloudCredential === false)) {
         return false;
       }
 
@@ -382,7 +404,7 @@ export default {
     },
 
     hasMachinePools() {
-      if ( this.provider === 'custom' || this.provider === 'import' ) {
+      if (this.provider === 'custom' || this.provider === 'import') {
         return false;
       }
 
@@ -423,7 +445,7 @@ export default {
     machineConfigSchema() {
       let schema;
 
-      if ( !this.hasMachinePools ) {
+      if (!this.hasMachinePools) {
         return null;
       } else if (this.isElementalCluster) {
         schema = ELEMENTAL_SCHEMA_IDS.MACHINE_INV_SELECTOR_TEMPLATES;
@@ -457,53 +479,53 @@ export default {
         tooltip: {},
       };
 
-      for ( const role of roles ) {
+      for (const role of roles) {
         counts[role] = 0;
         out.color[role] = NODE_TOTAL.success.color;
         out.icon[role] = NODE_TOTAL.success.icon;
       }
 
-      for ( const row of this.machinePools || [] ) {
-        if ( row.remove ) {
+      for (const row of this.machinePools || []) {
+        if (row.remove) {
           continue;
         }
 
         const qty = parseInt(row.pool.quantity, 10);
 
-        if ( isNaN(qty) ) {
+        if (isNaN(qty)) {
           continue;
         }
 
-        for ( const role of roles ) {
+        for (const role of roles) {
           counts[role] = counts[role] + (row.pool[`${ role }Role`] ? qty : 0);
         }
       }
 
-      for ( const role of roles ) {
+      for (const role of roles) {
         out.label[role] = this.t(`cluster.machinePool.nodeTotals.label.${ role }`, { count: counts[role] });
         out.tooltip[role] = this.t(`cluster.machinePool.nodeTotals.tooltip.${ role }`, { count: counts[role] });
       }
 
-      if ( counts.etcd === 0 ) {
+      if (counts.etcd === 0) {
         out.color.etcd = NODE_TOTAL.error.color;
         out.icon.etcd = NODE_TOTAL.error.icon;
-      } else if ( counts.etcd === 1 || counts.etcd % 2 === 0 || counts.etcd > 7 ) {
+      } else if (counts.etcd === 1 || counts.etcd % 2 === 0 || counts.etcd > 7) {
         out.color.etcd = NODE_TOTAL.warning.color;
         out.icon.etcd = NODE_TOTAL.warning.icon;
       }
 
-      if ( counts.controlPlane === 0 ) {
+      if (counts.controlPlane === 0) {
         out.color.controlPlane = NODE_TOTAL.error.color;
         out.icon.controlPlane = NODE_TOTAL.error.icon;
-      } else if ( counts.controlPlane === 1 ) {
+      } else if (counts.controlPlane === 1) {
         out.color.controlPlane = NODE_TOTAL.warning.color;
         out.icon.controlPlane = NODE_TOTAL.warning.icon;
       }
 
-      if ( counts.worker === 0 ) {
+      if (counts.worker === 0) {
         out.color.worker = NODE_TOTAL.error.color;
         out.icon.worker = NODE_TOTAL.error.icon;
-      } else if ( counts.worker === 1 ) {
+      } else if (counts.worker === 1) {
         out.color.worker = NODE_TOTAL.warning.color;
         out.icon.worker = NODE_TOTAL.warning.icon;
       }
@@ -533,11 +555,11 @@ export default {
       }
 
       if (this.showCloudProvider) { // Shouldn't be removed such that changes to it will re-trigger this watch
-        if ( this.agentConfig?.['cloud-provider-name'] === 'rancher-vsphere' ) {
+        if (this.agentConfig?.['cloud-provider-name'] === 'rancher-vsphere') {
           names.push('rancher-vsphere-cpi', 'rancher-vsphere-csi');
         }
 
-        if ( this.agentConfig?.['cloud-provider-name'] === HARVESTER ) {
+        if (this.agentConfig?.['cloud-provider-name'] === HARVESTER) {
           names.push(HARVESTER_CLOUD_PROVIDER);
         }
       }
@@ -562,11 +584,11 @@ export default {
         value: '',
       }];
 
-      if ( !!this.agentArgs['cloud-provider-name']?.options ) {
+      if (!!this.agentArgs['cloud-provider-name']?.options) {
         const preferred = this.$store.getters['plugins/cloudProviderForDriver'](this.provider);
 
-        for ( const opt of this.agentArgs['cloud-provider-name']?.options ) {
-        // If we don't have a preferred provider... show all options
+        for (const opt of this.agentArgs['cloud-provider-name']?.options) {
+          // If we don't have a preferred provider... show all options
           const showAllOptions = preferred === undefined;
           // If we have a preferred provider... only show default, preferred and external
           const isPreferred = opt === preferred;
@@ -589,7 +611,7 @@ export default {
 
       const cur = this.agentConfig?.['cloud-provider-name'];
 
-      if ( cur && !out.find((x) => x.value === cur) ) {
+      if (cur && !out.find((x) => x.value === cur)) {
         out.unshift({ label: `${ cur } (Current)`, value: cur });
       }
 
@@ -623,7 +645,7 @@ export default {
         }
       }
 
-      if ( !out ) {
+      if (!out) {
         out = preferred || first;
       }
 
@@ -631,7 +653,7 @@ export default {
     },
 
     appsOSWarning() {
-      if (this.mode !== _EDIT ) {
+      if (this.mode !== _EDIT) {
         return null;
       }
       const { linuxWorkerCount, windowsWorkerCount } = this.value?.mgmt?.status || {};
@@ -698,12 +720,40 @@ export default {
 
       return validRequiredPools && base;
     },
+    currentCluster() {
+      if (this.mode === _EDIT) {
+        return { ...this.value };
+      } else {
+        return this.$store.getters['customisation/getPreviewCluster'];
+      }
+    }
   },
 
   watch: {
+    clusterBadgeAbbreviation: {
+      immediate: true,
+      handler(neu) {
+        if (!neu) {
+          return;
+        }
+
+        if (Object.keys(neu.badge).length <= 0) {
+          return { ...this.value };
+        }
+
+        const obj = {
+          [CLUSTER_BADGE.ICON_TEXT]: neu.badge.iconText, [CLUSTER_BADGE.COLOR]: neu.badge.color, [CLUSTER_BADGE.TEXT]: neu.badge.text
+        };
+
+        this.value.metadata.annotations = {
+          ...this.value.metadata.annotations,
+          ...obj
+        };
+      }
+    },
 
     credentialId(val) {
-      if ( val ) {
+      if (val) {
         this.credential = this.$store.getters['rancher/byId'](NORMAN.CLOUD_CREDENTIAL, this.credentialId);
 
         if (this.isHarvesterDriver) {
@@ -718,7 +768,7 @@ export default {
 
     addonNames(neu, old) {
       // To catch the 'some addons' --> 'no addons' case also check array length (`difference([], [1,2,3]) === []`)
-      const diff = old.length !== neu.length || difference(neu, old).length ;
+      const diff = old.length !== neu.length || difference(neu, old).length;
 
       if (diff) {
         // Allow time for addonNames to update... then fetch any missing addons
@@ -780,32 +830,32 @@ export default {
      * Initialize all the cluster specs
      */
     async initSpecs() {
-      if ( !this.value.spec ) {
+      if (!this.value.spec) {
         set(this.value, 'spec', {});
       }
 
-      if ( !this.value.spec.machineSelectorConfig ) {
+      if (!this.value.spec.machineSelectorConfig) {
         set(this.value.spec, 'machineSelectorConfig', []);
       }
 
-      if ( !this.value.spec.machineSelectorConfig.find((x) => !x.machineLabelSelector) ) {
+      if (!this.value.spec.machineSelectorConfig.find((x) => !x.machineLabelSelector)) {
         this.value.spec.machineSelectorConfig.unshift({ config: {} });
       }
 
-      if ( this.value.spec.cloudCredentialSecretName ) {
+      if (this.value.spec.cloudCredentialSecretName) {
         await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
         this.credentialId = `${ this.value.spec.cloudCredentialSecretName }`;
       }
 
-      if ( !this.value.spec.kubernetesVersion ) {
+      if (!this.value.spec.kubernetesVersion) {
         set(this.value.spec, 'kubernetesVersion', this.defaultVersion);
       }
 
-      if ( this.rkeConfig.etcd?.s3?.bucket ) {
+      if (this.rkeConfig.etcd?.s3?.bucket) {
         this.s3Backup = true;
       }
 
-      if ( !this.rkeConfig.etcd ) {
+      if (!this.rkeConfig.etcd) {
         set(this.rkeConfig, 'etcd', {
           disableSnapshots:     false,
           s3:                   null,
@@ -824,14 +874,14 @@ export default {
         this.allNamespaces = await this.$store.dispatch('management/findAll', { type: NAMESPACE });
       }
 
-      if ( !this.machinePools ) {
+      if (!this.machinePools) {
         await this.initMachinePools(this.value.spec.rkeConfig.machinePools);
-        if ( this.mode === _CREATE && !this.machinePools.length ) {
+        if (this.mode === _CREATE && !this.machinePools.length) {
           await this.addMachinePool();
         }
       }
 
-      if ( this.value.spec.defaultPodSecurityAdmissionConfigurationTemplateName === undefined ) {
+      if (this.value.spec.defaultPodSecurityAdmissionConfigurationTemplateName === undefined) {
         set(this.value.spec, 'defaultPodSecurityAdmissionConfigurationTemplateName', '');
       }
     },
@@ -840,7 +890,7 @@ export default {
      * Fetch RKE versions and their configurations to be mapped to the form
      */
     async fetchRke2Versions() {
-      if ( !this.rke2Versions ) {
+      if (!this.rke2Versions) {
         const hash = {
           rke2Versions: this.$store.dispatch('management/request', { url: '/v1-rke2-release/releases' }),
           k3sVersions:  this.$store.dispatch('management/request', { url: '/v1-k3s-release/releases' }),
@@ -886,7 +936,7 @@ export default {
           defaultK3s = k3sChannels.find((x) => x.id === 'default')?.latest;
         }
 
-        if ( !this.rke2Versions.length && !this.k3sVersions.length ) {
+        if (!this.rke2Versions.length && !this.k3sVersions.length) {
           throw new Error('No version info found in KDM');
         }
 
@@ -938,12 +988,12 @@ export default {
      */
     setAgentConfiguration() {
       // Cluster Agent Configuration
-      if ( !this.value.spec[CLUSTER_AGENT_CUSTOMIZATION]) {
+      if (!this.value.spec[CLUSTER_AGENT_CUSTOMIZATION]) {
         set(this.value.spec, CLUSTER_AGENT_CUSTOMIZATION, {});
       }
 
       // Fleet Agent Configuration
-      if ( !this.value.spec[FLEET_AGENT_CUSTOMIZATION] ) {
+      if (!this.value.spec[FLEET_AGENT_CUSTOMIZATION]) {
         set(this.value.spec, FLEET_AGENT_CUSTOMIZATION, {});
       }
     },
@@ -968,8 +1018,8 @@ export default {
     async initMachinePools(existing) {
       const out = [];
 
-      if ( existing?.length ) {
-        for ( const pool of existing ) {
+      if (existing?.length) {
+        for (const pool of existing) {
           let type;
 
           if (this.isElementalCluster) {
@@ -981,7 +1031,7 @@ export default {
           let config;
           let configMissing = false;
 
-          if ( this.$store.getters['management/canList'](type) ) {
+          if (this.$store.getters['management/canList'](type)) {
             try {
               config = await this.$store.dispatch('management/find', {
                 type,
@@ -1018,7 +1068,7 @@ export default {
 
     async addMachinePool(idx) {
       // this.machineConfigSchema is the schema for the Machine Pool's machine configuration for the given provider
-      if ( !this.machineConfigSchema ) {
+      if (!this.machineConfigSchema) {
         return;
       }
 
@@ -1065,7 +1115,7 @@ export default {
         },
       };
 
-      if (this.provider === 'vmwarevsphere') {
+      if (this.provider === VMWARE_VSPHERE) {
         pool.pool.machineOS = 'linux';
       }
 
@@ -1076,7 +1126,7 @@ export default {
       this.machinePools.push(pool);
 
       this.$nextTick(() => {
-        if ( this.$refs.pools?.select ) {
+        if (this.$refs.pools?.select) {
           this.$refs.pools.select(name);
         }
       });
@@ -1085,11 +1135,11 @@ export default {
     removeMachinePool(idx) {
       const entry = this.machinePools[idx];
 
-      if ( !entry ) {
+      if (!entry) {
         return;
       }
 
-      if ( entry.create ) {
+      if (entry.create) {
         // If this is a new pool that isn't saved yet, it can just be dropped
         removeObject(this.machinePools, entry);
       } else {
@@ -1110,7 +1160,12 @@ export default {
         // We don't allow the user to edit any of the fields in metadata from the UI so it's safe to override it with the
         // metadata defined by the latest backend value. This is primarily used to ensure the resourceVersion is up to date.
         delete clonedCurrentConfig.metadata;
-        machinePool.config = merge(clonedLatestConfig, clonedCurrentConfig);
+
+        if (this.provider === VMWARE_VSPHERE) {
+          machinePool.config = vspherePoolConfigMerge(clonedLatestConfig, clonedCurrentConfig);
+        } else {
+          machinePool.config = merge(clonedLatestConfig, clonedCurrentConfig);
+        }
       }
     },
 
@@ -1148,8 +1203,8 @@ export default {
         return await this.extensionProvider.saveMachinePoolConfigs(this.machinePools, this.value);
       }
 
-      for ( const entry of this.machinePools ) {
-        if ( entry.remove ) {
+      for (const entry of this.machinePools) {
+        if (entry.remove) {
           continue;
         }
 
@@ -1160,8 +1215,8 @@ export default {
 
         const prefix = `${ this.value.metadata.name }-${ entry.pool.name }`.substr(0, 50).toLowerCase();
 
-        if ( entry.create ) {
-          if ( !entry.config.metadata?.name ) {
+        if (entry.create) {
+          if (!entry.config.metadata?.name) {
             entry.config.metadata.generateName = `nc-${ prefix }-`;
           }
 
@@ -1171,12 +1226,12 @@ export default {
           entry.pool.machineConfigRef.name = neu.metadata.name;
           entry.create = false;
           entry.update = true;
-        } else if ( entry.update ) {
+        } else if (entry.update) {
           entry.config = await entry.config.save();
         }
 
         // Ensure Elemental clusters have a hostname prefix
-        if (this.isElementalCluster && !entry.pool.hostnamePrefix ) {
+        if (this.isElementalCluster && !entry.pool.hostnamePrefix) {
           entry.pool.hostnamePrefix = `${ prefix }-`;
         }
 
@@ -1187,11 +1242,11 @@ export default {
     },
 
     async cleanupMachinePools() {
-      for ( const entry of this.machinePools ) {
-        if ( entry.remove && entry.config ) {
+      for (const entry of this.machinePools) {
+        if (entry.remove && entry.config) {
           try {
             await entry.config.remove();
-          } catch (e) {}
+          } catch (e) { }
         }
       }
     },
@@ -1212,7 +1267,7 @@ export default {
     },
 
     cancelCredential() {
-      if ( this.$refs.cruresource ) {
+      if (this.$refs.cruresource) {
         this.$refs.cruresource.emitOrRoute();
       }
     },
@@ -1220,7 +1275,7 @@ export default {
     done() {
       let routeName = 'c-cluster-product-resource';
 
-      if ( this.mode === _CREATE && (this.provider === 'import' || this.provider === 'custom') ) {
+      if (this.mode === _CREATE && (this.provider === 'import' || this.provider === 'custom')) {
         // Go show the registration command
         routeName = 'c-cluster-product-resource-namespace-id';
       }
@@ -1329,7 +1384,9 @@ export default {
             set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.global.cattle.clusterName`, this.value.metadata.name);
           }
 
-          set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`, '/var/lib/rancher/rke2/etc/config-files/cloud-provider-config');
+          const distroRoot = this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro?.length ? this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro : '/var/lib/rancher/rke2';
+
+          set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`, `${ distroRoot }/etc/config-files/cloud-provider-config`);
         }
       } catch (err) {
         this.errors.push(err);
@@ -1365,7 +1422,7 @@ export default {
         return await this.extensionProvider?.saveCluster(this.value, this.schema);
       }
 
-      if ( this.isCreate ) {
+      if (this.isCreate) {
         url = url || this.schema.linkFor('collection');
         const res = await this.value.save({ url });
 
@@ -1410,12 +1467,12 @@ export default {
      * 2) We're ready to cache any values the user provides for each addon
      */
     async initAddons() {
-      for ( const chartName of this.addonNames ) {
+      for (const chartName of this.addonNames) {
         const entry = this.chartVersions[chartName];
 
         // prevent fetching of addon config for 'none' CNI option
         // https://github.com/rancher/dashboard/issues/10338
-        if ( this.versionInfo[chartName] || chartName.includes('none')) {
+        if (this.versionInfo[chartName] || chartName.includes('none')) {
           continue;
         }
 
@@ -1451,7 +1508,7 @@ export default {
     refreshComponentWithYamls(key) {
       const component = this.$refs[key];
 
-      if ( component ) {
+      if (component) {
         this.refreshYamls(component.$refs);
       }
     },
@@ -1459,11 +1516,11 @@ export default {
     refreshYamls(refs) {
       const keys = Object.keys(refs).filter((x) => x.startsWith('yaml'));
 
-      for ( const k of keys ) {
+      for (const k of keys) {
         const entry = refs[k];
         const list = isArray(entry) ? entry : [entry];
 
-        for ( const component of list ) {
+        for (const component of list) {
           component?.refresh(); // `yaml` ref can be undefined on switching from Basic to Addon tab (Azure --> Amazon --> addon)
         }
       }
@@ -1490,23 +1547,23 @@ export default {
     },
 
     initServerAgentArgs() {
-      for ( const k in this.serverArgs ) {
-        if ( this.serverConfig[k] === undefined ) {
+      for (const k in this.serverArgs) {
+        if (this.serverConfig[k] === undefined) {
           const def = this.serverArgs[k].default;
 
           set(this.serverConfig, k, (def !== undefined ? def : undefined));
         }
       }
 
-      for ( const k in this.agentArgs ) {
-        if ( this.agentConfig?.[k] === undefined ) {
+      for (const k in this.agentArgs) {
+        if (this.agentConfig?.[k] === undefined) {
           const def = this.agentArgs[k].default;
 
           set(this.agentConfig, k, (def !== undefined ? def : undefined));
         }
       }
 
-      if ( !this.serverConfig?.profile ) {
+      if (!this.serverConfig?.profile) {
         set(this.serverConfig, 'profile', null);
       }
     },
@@ -1539,22 +1596,22 @@ export default {
       let registrySecret = null;
       let regs = this.rkeConfig.registries;
 
-      if ( !regs ) {
+      if (!regs) {
         regs = {};
         set(this.rkeConfig, 'registries', regs);
       }
 
-      if ( !regs.configs ) {
+      if (!regs.configs) {
         set(regs, 'configs', {});
       }
 
-      if ( !regs.mirrors ) {
+      if (!regs.mirrors) {
         set(regs, 'mirrors', {});
       }
 
       const config = regs.configs[this.registryHost];
 
-      if ( config ) {
+      if (config) {
         registrySecret = config.authConfigSecretName;
       }
 
@@ -1574,21 +1631,21 @@ export default {
     setRegistryConfig() {
       const hostname = (this.registryHost || '').trim();
 
-      if ( this.systemRegistry ) {
+      if (this.systemRegistry) {
         // Empty string overrides the system default to nothing
         set(this.agentConfig, 'system-default-registry', '');
       } else {
         // No need to set anything
         set(this.agentConfig, 'system-default-registry', undefined);
       }
-      if ( !hostname || hostname === this.systemRegistry ) {
+      if (!hostname || hostname === this.systemRegistry) {
         // Undefined removes the key which uses the global setting without hardcoding it into the config
         set(this.agentConfig, 'system-default-registry', undefined);
       } else {
         set(this.agentConfig, 'system-default-registry', hostname);
       }
 
-      if ( hostname && this.registrySecret ) {
+      if (hostname && this.registrySecret) {
         // For a registry with basic auth, but no mirrors,
         // add a single registry config with the basic auth secret.
         const basicAuthConfig = {
@@ -1637,12 +1694,12 @@ export default {
         let isCurrentVersion = false;
         let label = obj.id;
 
-        if ( currentVersion ) {
+        if (currentVersion) {
           disabled = compare(obj.id, currentVersion) < 0;
           isCurrentVersion = compare(obj.id, currentVersion) === 0;
         }
 
-        if ( defaultVersion ) {
+        if (defaultVersion) {
           experimental = compare(defaultVersion, obj.id) < 0;
         }
 
@@ -1914,7 +1971,7 @@ export default {
           return this.t('cluster.banner.machinePoolError', {
             count: x[1].length, pool_name: x[0], fields: formattedFields
           }, true);
-        } )
+        })
         .filter((x) => x);
 
       if (!errors) {
@@ -1925,7 +1982,7 @@ export default {
     },
     handleS3BackupChanged(neu) {
       this.s3Backup = neu;
-      if ( neu ) {
+      if (neu) {
         // We need to make sure that s3 doesn't already have an existing value otherwise when editing a cluster with s3 defined this will clear s3.
         if (isEmpty(this.rkeConfig.etcd?.s3)) {
           set(this.rkeConfig.etcd, 's3', {});
@@ -1961,7 +2018,7 @@ export default {
       }
 
       for (const [index] of this.machinePools.entries()) { // validator machine config
-        if ( typeof this.$refs.pool[index]?.test === 'function' ) {
+        if (typeof this.$refs.pool[index]?.test === 'function') {
           try {
             const res = await this.$refs.pool[index].test();
 
@@ -2001,12 +2058,13 @@ export default {
     @done="done"
     @finish="saveOverride"
     @cancel="cancel"
-    @error="e=>errors = e"
+    @error="e => errors = e"
   >
     <div class="header-warnings">
       <Banner
         v-if="isEdit"
         color="warning"
+        data-testid="edit-cluster-reprovisioning-documentation"
       >
         <span v-clean-html="t('cluster.banner.rke2-k3-reprovisioning', {}, true)" />
       </Banner>
@@ -2038,8 +2096,18 @@ export default {
         name-placeholder="cluster.name.placeholder"
         description-label="cluster.description.label"
         description-placeholder="cluster.description.placeholder"
-        :rules="{name:fvGetAndReportPathRules('metadata.name')}"
-      />
+        :rules="{ name: fvGetAndReportPathRules('metadata.name') }"
+      >
+        <template
+          slot="customize"
+        >
+          <ClusterAppearance
+            :name="clusterName"
+            :currentCluster="currentCluster"
+            :mode="mode"
+          />
+        </template>
+      </NameNsDescription>
 
       <Banner
         v-if="appsOSWarning"
@@ -2110,8 +2178,9 @@ export default {
                 :machine-pools="machinePools"
                 :busy="busy"
                 :pool-id="obj.id"
+                :pool-create-mode="obj.create"
                 @error="handleMachinePoolError"
-                @validationChanged="v=>machinePoolValidationChanged(obj.id, v)"
+                @validationChanged="v => machinePoolValidationChanged(obj.id, v)"
               />
             </Tab>
           </template>
@@ -2351,13 +2420,15 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .min-height {
-    min-height: 40em;
-  }
-  .patch-version {
-    margin-top: 5px;
-  }
-  .header-warnings .banner {
-    margin-bottom: 0;
-  }
+.min-height {
+  min-height: 40em;
+}
+
+.patch-version {
+  margin-top: 5px;
+}
+
+.header-warnings .banner {
+  margin-bottom: 0;
+}
 </style>