@rancher/shell 0.3.24 → 0.3.26

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

@@ -3,7 +3,6 @@ import difference from 'lodash/difference';
 import throttle from 'lodash/throttle';
 import isArray from 'lodash/isArray';
 import merge from 'lodash/merge';
-import { mapGetters } from 'vuex';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import FormValidation from '@shell/mixins/form-validation';
 import { normalizeName } from '@shell/utils/kube';
@@ -29,7 +28,7 @@ import {
 import { allHash } from '@shell/utils/promise';
 import { sortBy } from '@shell/utils/sort';
 
-import { camelToTitle, nlToBr } from '@shell/utils/string';
+import { camelToTitle } from '@shell/utils/string';
 import { compare, sortable } from '@shell/utils/version';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
 import * as VERSION from '@shell/utils/version';
@@ -39,7 +38,7 @@ import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { BadgeState } from '@components/BadgeState';
 import { Banner } from '@components/Banner';
 import { Checkbox } from '@components/Form/Checkbox';
-import CruResource from '@shell/components/CruResource';
+import CruResource, { CONTEXT_HOOK_EDIT_YAML } from '@shell/components/CruResource';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Loading from '@shell/components/Loading';
@@ -52,9 +51,8 @@ import UnitInput from '@shell/components/form/UnitInput';
 import YamlEditor from '@shell/components/YamlEditor';
 import Questions from '@shell/components/Questions';
 
-import ClusterMembershipEditor, { canViewClusterMembershipEditor } from '@shell/components/form/Members/ClusterMembershipEditor';
+import { canViewClusterMembershipEditor } from '@shell/components/form/Members/ClusterMembershipEditor';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
-import { LEGACY } from '@shell/store/features';
 import semver from 'semver';
 
 import { SETTING } from '@shell/config/settings';
@@ -74,10 +72,8 @@ import { ELEMENTAL_SCHEMA_IDS, KIND, ELEMENTAL_CLUSTER_PROVIDER } from '../../co
 import AgentConfiguration from './AgentConfiguration';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import { ExtensionPoint, TabLocation } from '@shell/core/types';
-
-const PUBLIC = 'public';
-const PRIVATE = 'private';
-const ADVANCED = 'advanced';
+import MemberRoles from '@shell/edit/provisioning.cattle.io.cluster/MemberRoles';
+import Basics from '@shell/edit/provisioning.cattle.io.cluster/Basics';
 
 const HARVESTER = 'harvester';
 const HARVESTER_CLOUD_PROVIDER = 'harvester-cloud-provider';
@@ -115,7 +111,6 @@ export default {
     Banner,
     Checkbox,
     AgentConfiguration,
-    ClusterMembershipEditor,
     CruResource,
     DrainOptions,
     LabeledInput,
@@ -136,6 +131,8 @@ export default {
     Tabbed,
     UnitInput,
     YamlEditor,
+    MemberRoles,
+    Basics
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -210,7 +207,6 @@ export default {
       lastIdx:                         0,
       allPSPs:                         null,
       allPSAs:                         [],
-      nodeComponent:                   null,
       credentialId:                    '',
       credential:                      null,
       machinePools:                    null,
@@ -251,21 +247,14 @@ export default {
       truncateLimit,
       busy:                  false,
       machinePoolValidation: {}, // map of validation states for each machine pool
+      machinePoolErrors:     {},
       allNamespaces:         [],
-      initialCloudProvider:  this.value?.agentConfig?.['cloud-provider-name'],
+      initialCloudProvider:  this.value?.agentConfig?.['cloud-provider-name'] || '',
       extensionTabs:         getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.CLUSTER_CREATE_RKE2, this.$route, this),
     };
   },
 
   computed: {
-    ...mapGetters({ allCharts: 'catalog/charts' }),
-    ...mapGetters(['currentCluster']),
-    ...mapGetters({ features: 'features/get' }),
-    ...mapGetters(['namespaces']),
-
-    PUBLIC:   () => PUBLIC,
-    PRIVATE:  () => PRIVATE,
-    ADVANCED: () => ADVANCED,
 
     rkeConfig() {
       return this.value.spec.rkeConfig;
@@ -275,13 +264,6 @@ export default {
       return this.truncateLimit && this.truncateLimit !== NETBIOS_TRUNCATION_LENGTH;
     },
 
-    /**
-     * Check presence of PSPs as template or CLI creation
-     */
-    hasPsps() {
-      return !!this.psps?.count;
-    },
-
     isElementalCluster() {
       return this.provider === ELEMENTAL_CLUSTER_PROVIDER || this.value?.machineProvider?.toLowerCase() === KIND.MACHINE_INV_SELECTOR_TEMPLATES.toLowerCase();
     },
@@ -304,17 +286,6 @@ export default {
       return this.value.agentConfig;
     },
 
-    /**
-     * Define introduction of PSA and return need of PSA templates based on min k8s version
-     */
-    needsPSA() {
-      const release = this.value?.spec?.kubernetesVersion || '';
-      const version = release.match(/\d+/g);
-      const isRequiredVersion = version?.length ? +version[0] > 1 || +version[1] >= 23 : false;
-
-      return isRequiredVersion;
-    },
-
     /**
      * Define PSP deprecation and restrict use of PSP based on min k8s version
      */
@@ -410,196 +381,6 @@ export default {
       return (this.value?.spec?.kubernetesVersion || '').includes('k3s');
     },
 
-    profileOptions() {
-      const out = (this.agentArgs?.profile?.options || []).map((x) => {
-        return { label: x, value: x };
-      });
-
-      out.unshift({
-        label: this.$store.getters['i18n/t']('cluster.rke2.cisProfile.option'),
-        value: ''
-      });
-
-      return out;
-    },
-
-    /**
-     * Allow to display override if PSA is needed and profile is set
-     */
-    hasCisOverride() {
-      return (this.serverConfig?.profile || this.agentConfig?.profile) && this.needsPSA &&
-        // Also check other cases on when to display the override
-        this.hasPsaTemplates && this.showCisProfile && this.isCisSupported;
-    },
-
-    pspOptions() {
-      if ( this.isK3s ) {
-        return null;
-      }
-
-      const out = [{
-        label: this.$store.getters['i18n/t']('cluster.rke2.defaultPodSecurityPolicyTemplateName.option'),
-        value: ''
-      }];
-
-      if ( this.allPSPs ) {
-        for ( const pspt of this.allPSPs ) {
-          out.push({
-            label: pspt.nameDisplay,
-            value: pspt.id,
-          });
-        }
-      }
-
-      const cur = this.value.spec.defaultPodSecurityPolicyTemplateName;
-
-      if ( cur && !out.find((x) => x.value === cur) ) {
-        out.unshift({ label: `${ cur } (Current)`, value: cur });
-      }
-
-      return out;
-    },
-
-    /**
-     * Disable PSA if CIS hardening is enabled, except override
-     */
-    isPsaDisabled() {
-      const cisValue = this.agentConfig?.profile || this.serverConfig?.profile;
-
-      return !(!cisValue || this.cisOverride) && this.hasPsaTemplates && this.isCisSupported;
-    },
-
-    /**
-     * Get the default label for the PSA template option
-     */
-    defaultPsaOptionLabel() {
-      const optionCase = !this.needsPSP && !this.isK3s ? 'default' : 'none';
-
-      return this.$store.getters['i18n/t'](`cluster.rke2.defaultPodSecurityAdmissionConfigurationTemplateName.option.${ optionCase }`);
-    },
-
-    /**
-     * Convert PSA templates into options, sorting and flagging if any selected
-     */
-    psaOptions() {
-      if ( !this.needsPSA ) {
-        return [];
-      }
-      const out = [{
-        label: this.defaultPsaOptionLabel,
-        value: ''
-      }];
-
-      if ( this.allPSAs ) {
-        for ( const psa of this.allPSAs ) {
-          out.push({
-            label: psa.nameDisplay,
-            value: psa.id,
-          });
-        }
-      }
-      const cur = this.value.spec.defaultPodSecurityAdmissionConfigurationTemplateName;
-
-      if ( cur && !out.find((x) => x.value === cur) ) {
-        out.unshift({ label: `${ cur } (Current)`, value: cur });
-      }
-
-      return out;
-    },
-
-    /**
-     * Check if current CIS profile is required and listed in the options
-     */
-    isCisSupported() {
-      const cisProfile = this.serverConfig.profile || this.agentConfig.profile;
-
-      return !cisProfile || this.profileOptions.map((option) => option.value).includes(cisProfile);
-    },
-
-    disableOptions() {
-      return this.serverArgs.disable.options.map((value) => {
-        return {
-          label: this.$store.getters['i18n/withFallback'](`cluster.${ this.isK3s ? 'k3s' : 'rke2' }.systemService."${ value }"`, null, value.replace(/^(rke2|rancher)-/, '')),
-          value,
-        };
-      });
-    },
-
-    cloudProviderOptions() {
-      const out = [{
-        label: this.$store.getters['i18n/t']('cluster.rke2.cloudProvider.defaultValue.label'),
-        value: '',
-      }];
-
-      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
-        const showAllOptions = preferred === undefined;
-        // If we have a preferred provider... only show default, preferred and external
-        const isPreferred = opt === preferred;
-        const isExternal = opt === 'external';
-        let disabled = false;
-
-        if ((this.isHarvesterExternalCredential || this.isHarvesterIncompatible) && isPreferred) {
-          disabled = true;
-        }
-
-        if (showAllOptions || isPreferred || isExternal) {
-          out.push({
-            label: this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ opt }".label`, null, opt),
-            value: opt,
-            disabled,
-          });
-        }
-      }
-
-      const cur = this.agentConfig['cloud-provider-name'];
-
-      if (cur && !out.find((x) => x.value === cur)) {
-        // Localization missing
-        // Look up cur in the localization file
-        const label = this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ cur }".label`, null, cur);
-
-        out.unshift({
-          label:       `${ label } (Current)`,
-          value:       cur,
-          unsupported: true,
-          disabled:    true
-        });
-      }
-
-      const initial = this.initialCloudProvider;
-
-      if (cur !== initial && initial && !out.find((x) => x.value === initial)) {
-        const label = this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ initial }".label`, null, initial);
-
-        out.unshift({
-          label:       `${ label } (Current)`,
-          value:       initial,
-          unsupported: true,
-          disabled:    true
-        });
-      }
-
-      return out;
-    },
-
-    unsupportedCloudProvider() {
-      // The current cloud provider
-      const cur = this.initialCloudProvider;
-
-      const provider = cur && this.cloudProviderOptions.find((x) => x.value === cur);
-
-      return !!provider?.unsupported;
-    },
-
-    canNotEditCloudProvider() {
-      const canNotEdit = this.clusterIsAlreadyCreated && !this.unsupportedCloudProvider;
-
-      return canNotEdit;
-    },
-
     /**
      * Kube Version
      */
@@ -636,10 +417,6 @@ export default {
       return this.selectedVersion?.charts || {};
     },
 
-    showCisProfile() {
-      return (this.provider === 'custom' || this.isElementalCluster) && ( this.serverArgs?.profile || this.agentArgs?.profile );
-    },
-
     needCredential() {
       if ( this.provider === 'custom' || this.provider === 'import' || this.isElementalCluster || this.mode === _VIEW ) {
         return false;
@@ -789,56 +566,12 @@ export default {
       return out;
     },
 
-    enabledSystemServices: {
-      get() {
-        const out = difference(this.serverArgs.disable.options, this.serverConfig.disable || []);
-
-        return out;
-      },
-
-      set(neu) {
-        const out = difference(this.serverArgs.disable.options, neu);
-
-        set(this.serverConfig, 'disable', out);
-      },
-    },
-
-    showCloudConfigYaml() {
-      if ( !this.agentArgs['cloud-provider-name'] ) {
-        return false;
-      }
-
-      const name = this.agentConfig['cloud-provider-name'];
-
-      if ( !name ) {
-        return false;
-      }
-
-      switch ( name ) {
-      case 'none': return false;
-      case 'aws': return false;
-      case 'rancher-vsphere': return false;
-      case HARVESTER: return false;
-      default: return true;
-      }
-    },
-
-    showVsphereNote() {
-      if ( !this.agentArgs['cloud-provider-name'] ) {
-        return false;
-      }
-
-      const name = this.agentConfig['cloud-provider-name'];
-
-      return name === 'rancher-vsphere';
-    },
-
     showCni() {
       return !!this.serverArgs.cni;
     },
 
     showCloudProvider() {
-      return this.agentArgs['cloud-provider-name'];
+      return !!this.agentArgs['cloud-provider-name'];
     },
 
     /**
@@ -878,15 +611,66 @@ export default {
       return versions.filter((x) => !!x);
     },
 
-    showk8s21LegacyWarning() {
-      const isLegacyEnabled = this.features(LEGACY);
+    cloudProviderOptions() {
+      const out = [{
+        label: this.$store.getters['i18n/t']('cluster.rke2.cloudProvider.defaultValue.label'),
+        value: '',
+      }];
 
-      if (!isLegacyEnabled) {
-        return false;
+      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
+          const showAllOptions = preferred === undefined;
+          // If we have a preferred provider... only show default, preferred and external
+          const isPreferred = opt === preferred;
+          const isExternal = opt === 'external';
+          let disabled = false;
+
+          if ((this.isHarvesterExternalCredential || this.isHarvesterIncompatible) && isPreferred) {
+            disabled = true;
+          }
+
+          if (showAllOptions || isPreferred || isExternal) {
+            out.push({
+              label: this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ opt }".label`, null, opt),
+              value: opt,
+              disabled,
+            });
+          }
+        }
+      }
+
+      const cur = this.agentConfig['cloud-provider-name'];
+
+      if (cur && !out.find((x) => x.value === cur)) {
+        // Localization missing
+        // Look up cur in the localization file
+        const label = this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ cur }".label`, null, cur);
+
+        out.unshift({
+          label:       `${ label } (Current)`,
+          value:       cur,
+          unsupported: true,
+          disabled:    true
+        });
       }
-      const selectedVersion = semver.coerce(this.value.spec.kubernetesVersion);
 
-      return semver.satisfies(selectedVersion, '>=1.21.0');
+      const initial = this.initialCloudProvider;
+
+      if (cur !== initial && initial && !out.find((x) => x.value === initial)) {
+        const label = this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ initial }".label`, null, initial);
+
+        out.unshift({
+          label:       `${ label } (Current)`,
+          value:       initial,
+          unsupported: true,
+          disabled:    true
+        });
+      }
+
+      return out;
     },
 
     canManageMembers() {
@@ -923,33 +707,6 @@ export default {
       return out;
     },
 
-    ciliumIpv6: {
-      get() {
-        // eslint-disable-next-line no-unused-vars
-        const cni = this.serverConfig.cni; // force this property to recalculate if cni was changed away from cilium and chartValues['rke-cilium'] deleted
-
-        return this.userChartValues[this.chartVersionKey('rke2-cilium')]?.cilium?.ipv6?.enabled || false;
-      },
-      set(val) {
-        const name = this.chartVersionKey('rke2-cilium');
-        const values = this.userChartValues[name];
-
-        set(this, 'userChartValues', {
-          ...this.userChartValues,
-          [name]: {
-            ...values,
-            cilium: {
-              ...values?.cilium,
-              ipv6: {
-                ...values?.cilium?.ipv6,
-                enabled: val
-              }
-            }
-          }
-        });
-      }
-    },
-
     showIpv6Warning() {
       const clusterCIDR = this.serverConfig['cluster-cidr'] || '';
       const serviceCIDR = this.serverConfig['service-cidr'] || '';
@@ -1025,6 +782,14 @@ export default {
 
       return validRequiredPools && base;
     },
+    unsupportedCloudProvider() {
+      // The current cloud provider
+      const cur = this.initialCloudProvider;
+
+      const provider = cur && this.cloudProviderOptions.find((x) => x.value === cur);
+
+      return !!provider?.unsupported;
+    },
   },
 
   watch: {
@@ -1096,15 +861,10 @@ export default {
         set(this.agentConfig, 'cloud-provider-name', undefined);
       }
     },
-
-  },
-
-  mounted() {
-    window.rke = this;
   },
 
   created() {
-    this.registerBeforeHook(this.saveMachinePools, 'save-machine-pools');
+    this.registerBeforeHook(this.saveMachinePools, 'save-machine-pools', 1);
     this.registerBeforeHook(this.setRegistryConfig, 'set-registry-config');
     this.registerAfterHook(this.cleanupMachinePools, 'cleanup-machine-pools');
     this.registerAfterHook(this.saveRoleBindings, 'save-role-bindings');
@@ -1116,7 +876,6 @@ export default {
   },
 
   methods: {
-    nlToBr,
     set,
 
     /**
@@ -1400,6 +1159,7 @@ export default {
       }
 
       const name = `pool${ ++this.lastIdx }`;
+
       const pool = {
         id:     name,
         config,
@@ -1420,6 +1180,7 @@ export default {
             kind: this.machineConfigSchema.attributes?.kind,
             name: null,
           },
+          drainBeforeDelete: true
         },
       };
 
@@ -1472,7 +1233,27 @@ export default {
       }
     },
 
-    async saveMachinePools() {
+    async saveMachinePools(hookContext) {
+      if (hookContext === CONTEXT_HOOK_EDIT_YAML) {
+        await new Promise((resolve, reject) => {
+          this.$store.dispatch('cluster/promptModal', {
+            component:      'GenericPrompt',
+            componentProps: {
+              title:     this.t('cluster.rke2.modal.editYamlMachinePool.title'),
+              body:      this.t('cluster.rke2.modal.editYamlMachinePool.body'),
+              applyMode: 'editAndContinue',
+              confirm:   (confirmed) => {
+                if (confirmed) {
+                  resolve();
+                } else {
+                  reject(new Error('User Cancelled'));
+                }
+              }
+            },
+          });
+        });
+      }
+
       const finalPools = [];
 
       // If the extension provider wants to do this, let them
@@ -1865,16 +1646,6 @@ export default {
       this.syncChartValues(name);
     },
 
-    initQuestions(name) {
-      const defaultChartValue = this.versionInfo[name];
-      const startingChartValue = this.initYamlEditor(name);
-
-      return {
-        ...defaultChartValue,
-        values: startingChartValue,
-      };
-    },
-
     initYamlEditor(name) {
       const defaultChartValue = this.versionInfo[name];
       const key = this.chartVersionKey(name);
@@ -2305,6 +2076,9 @@ export default {
       this.lastDefaultPodSecurityPolicyTemplateName = value;
     },
 
+    handleShowDeprecatedPatchVersionsChanged(value) {
+      this.showDeprecatedPatchVersions = value;
+    },
     /**
      * Track Machine Pool validation status
      */
@@ -2314,6 +2088,71 @@ export default {
       } else {
         this.$set(this.machinePoolValidation, id, value);
       }
+    },
+    handleEnabledSystemServicesChanged(val) {
+      set(this.serverConfig, 'disable', val);
+    },
+    handleCiliumIpv6Changed(neu) {
+      const name = this.chartVersionKey('rke2-cilium');
+      const values = this.userChartValues[name];
+
+      set(this, 'userChartValues', {
+        ...this.userChartValues,
+        [name]: {
+          ...values,
+          cilium: {
+            ...values?.cilium,
+            ipv6: {
+              ...values?.cilium?.ipv6,
+              enabled: neu
+            }
+          }
+        }
+      });
+    },
+    handlePspChanged(neu) {
+      this.handlePspChange(neu);
+    },
+    handleCisChanged() {
+      this.handleCisChange();
+    },
+    handlePsaDefaultChanged() {
+      this.togglePsaDefault();
+    },
+    handleMachinePoolError(error) {
+      this.machinePoolErrors = merge(this.machinePoolErrors, error);
+
+      const errors = Object.entries(this.machinePoolErrors)
+        .map((x) => {
+          if (!x[1].length) {
+            return;
+          }
+
+          const formattedFields = (() => {
+            switch (x[1].length) {
+            case 1:
+              return x[1][0];
+            case 2:
+              return `${ x[1][0] } and ${ x[1][1] }`;
+            default: {
+              const [head, ...rest] = x[1];
+
+              return `${ rest.join(', ') }, and ${ head }`;
+            }
+            }
+          })();
+
+          return this.t('cluster.banner.machinePoolError', {
+            count: x[1].length, pool_name: x[0], fields: formattedFields
+          }, true);
+        } )
+        .filter((x) => x);
+
+      if (!errors) {
+        return;
+      }
+
+      this.errors = errors;
     }
   },
 };
@@ -2447,7 +2286,8 @@ export default {
                 :idx="idx"
                 :machine-pools="machinePools"
                 :busy="busy"
-                @error="e=>errors = e"
+                :pool-id="obj.id"
+                @error="handleMachinePoolError"
                 @validationChanged="v=>machinePoolValidationChanged(obj.id, v)"
               />
             </Tab>
@@ -2465,270 +2305,49 @@ export default {
         :side-tabs="true"
         class="min-height"
       >
-        <!-- Basic -->
         <Tab
           name="basic"
           label-key="cluster.tabs.basic"
           :weight="11"
           @active="refreshYamls"
         >
-          <Banner
-            v-if="!haveArgInfo"
-            color="warning"
-            :label="t('cluster.banner.haveArgInfo')"
-          />
-          <Banner
-            v-if="showk8s21LegacyWarning"
-            color="warning"
-            :label="t('cluster.legacyWarning')"
-          />
-          <Banner
-            v-if="isHarvesterDriver && isHarvesterIncompatible && showCloudProvider"
-            color="warning"
-          >
-            <span
-              v-clean-html="t('cluster.harvester.warning.cloudProvider.incompatible', null, true)"
-            />
-          </Banner>
-          <div class="row mb-10">
-            <div class="col span-6">
-              <LabeledSelect
-                v-model="value.spec.kubernetesVersion"
-                :mode="mode"
-                :options="versionOptions"
-                label-key="cluster.kubernetesVersion.label"
-                @input="handleKubernetesChange($event)"
-              />
-              <Checkbox
-                v-model="showDeprecatedPatchVersions"
-                :label="t('cluster.kubernetesVersion.deprecatedPatches')"
-                :tooltip="t('cluster.kubernetesVersion.deprecatedPatchWarning')"
-                class="patch-version"
-              />
-            </div>
-            <div
-              v-if="showCloudProvider"
-              class="col span-6"
-            >
-              <LabeledSelect
-                v-model="agentConfig['cloud-provider-name']"
-                :mode="mode"
-                :disabled="canNotEditCloudProvider"
-                :options="cloudProviderOptions"
-                :label="t('cluster.rke2.cloudProvider.label')"
-              />
-            </div>
-          </div>
-          <div
-            v-if="showCni"
-            :style="{'align-items':'center'}"
-            class="row"
-          >
-            <div class="col span-6">
-              <LabeledSelect
-                v-model="serverConfig.cni"
-                :mode="mode"
-                :disabled="clusterIsAlreadyCreated"
-                :options="serverArgs.cni.options"
-                :label="t('cluster.rke2.cni.label')"
-              />
-            </div>
-            <div
-              v-if="serverConfig.cni === 'cilium' || serverConfig.cni === 'multus,cilium'"
-              class="col"
-            >
-              <Checkbox
-                v-model="ciliumIpv6"
-                :mode="mode"
-                :label="t('cluster.rke2.address.ipv6.enable')"
-              />
-            </div>
-          </div>
-          <template v-if="showVsphereNote">
-            <Banner
-              color="warning"
-              label-key="cluster.cloudProvider.rancher-vsphere.note"
-            />
-          </template>
-          <template v-else-if="showCloudConfigYaml">
-            <div class="spacer" />
-
-            <div class="col span-12">
-              <Banner
-                v-if="unsupportedCloudProvider"
-                class="error mt-5"
-              >
-                {{ t('cluster.rke2.cloudProvider.unsupported') }}
-              </Banner>
-              <h3>
-                {{ t('cluster.rke2.cloudProvider.header') }}
-              </h3>
-              <YamlEditor
-                ref="yaml"
-                v-model="agentConfig['cloud-provider-config']"
-                :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
-                initial-yaml-values="# Cloud Provider Config"
-                class="yaml-editor"
-              />
-            </div>
-          </template>
-
-          <div class="spacer" />
-
-          <h3>
-            {{ t('cluster.rke2.security.header') }}
-          </h3>
-          <Banner
-            v-if="isEdit && !needsPSP && hasPsps"
-            color="warning"
-            :label="t('cluster.banner.invalidPsps')"
-          />
-          <Banner
-            v-else-if="isCreate && !needsPSP"
-            color="info"
-            :label="t('cluster.banner.removedPsp')"
-          />
-          <Banner
-            v-else-if="isCreate && hasPsps"
-            color="info"
-            :label="t('cluster.banner.deprecatedPsp')"
+          <!-- Basic -->
+          <Basics
+            v-model="value"
+            :live-value="liveValue"
+            :mode="mode"
+            :provider="provider"
+            :psps="psps"
+            :user-chart-values="userChartValues"
+            :credential="credential"
+            :cis-override="cisOverride"
+            :cis-psa-change-banner="cisPsaChangeBanner"
+            :all-psps="allPSPs"
+            :all-psas="allPSAs"
+            :addon-versions="addonVersions"
+            :show-deprecated-patch-versions="showDeprecatedPatchVersions"
+            :needs-psp="needsPSP"
+            :selected-version="selectedVersion"
+            :is-harvester-driver="isHarvesterDriver"
+            :is-harvester-incompatible="isHarvesterIncompatible"
+            :version-options="versionOptions"
+            :cluster-is-already-created="clusterIsAlreadyCreated"
+            :is-elemental-cluster="isElementalCluster"
+            :has-psa-templates="hasPsaTemplates"
+            :is-k3s="isK3s"
+            :have-arg-info="haveArgInfo"
+            :show-cni="showCni"
+            :show-cloud-provider="showCloudProvider"
+            :unsupported-cloud-provider="unsupportedCloudProvider"
+            :cloud-provider-options="cloudProviderOptions"
+            @cilium-ipv6-changed="handleCiliumIpv6Changed"
+            @enabled-system-services-changed="handleEnabledSystemServicesChanged"
+            @kubernetes-changed="handleKubernetesChange"
+            @psp-changed="handlePspChanged"
+            @cis-changed="handleCisChanged"
+            @psa-default-changed="handlePsaDefaultChanged"
+            @show-deprecated-patch-versions-changed="handleShowDeprecatedPatchVersionsChanged"
           />
-
-          <Banner
-            v-if="showCisProfile && !isCisSupported && isEdit"
-            color="info"
-          >
-            <p v-clean-html="t('cluster.rke2.banner.cisUnsupported', {cisProfile: serverConfig.profile || agentConfig.profile}, true)" />
-          </Banner>
-
-          <div class="row mb-10">
-            <div
-              v-if="pspOptions && needsPSP"
-              class="col span-6"
-            >
-              <!-- PSP template selector -->
-              <LabeledSelect
-                v-model="value.spec.defaultPodSecurityPolicyTemplateName"
-                data-testid="rke2-custom-edit-psp"
-                :mode="mode"
-                :options="pspOptions"
-                :label="t('cluster.rke2.defaultPodSecurityPolicyTemplateName.label')"
-                @input="handlePspChange($event)"
-              />
-            </div>
-
-            <div
-              v-if="showCisProfile"
-              class="col span-6"
-            >
-              <LabeledSelect
-                v-if="serverArgs && serverArgs.profile"
-                v-model="serverConfig.profile"
-                :mode="mode"
-                :options="profileOptions"
-                :label="t('cluster.rke2.cis.sever')"
-                @input="handleCisChange"
-              />
-              <LabeledSelect
-                v-else-if="agentArgs && agentArgs.profile"
-                v-model="agentConfig.profile"
-                data-testid="rke2-custom-edit-cis-agent"
-                :mode="mode"
-                :options="profileOptions"
-                :label="t('cluster.rke2.cis.agent')"
-                @input="handleCisChange"
-              />
-            </div>
-          </div>
-
-          <template v-if="hasCisOverride">
-            <Checkbox
-              v-model="cisOverride"
-              :mode="mode"
-              :label="t('cluster.rke2.cis.override')"
-              @input="togglePsaDefault"
-            />
-
-            <Banner
-              v-if="cisOverride"
-              color="warning"
-              :label="t('cluster.rke2.banner.cisOverride')"
-            />
-            <Banner
-              v-if="cisPsaChangeBanner && !cisOverride"
-              color="info"
-              :label="t('cluster.rke2.banner.psaChange')"
-            />
-          </template>
-
-          <div
-            v-if="needsPSA"
-            class="row mb-10 mt-10"
-          >
-            <div class="col span-6">
-              <!-- PSA template selector -->
-              <LabeledSelect
-                v-model="value.spec.defaultPodSecurityAdmissionConfigurationTemplateName"
-                :mode="mode"
-                data-testid="rke2-custom-edit-psa"
-                :options="psaOptions"
-                :disabled="isPsaDisabled"
-                :label="t('cluster.rke2.defaultPodSecurityAdmissionConfigurationTemplateName.label')"
-              />
-            </div>
-          </div>
-
-          <div class="row">
-            <div class="col span-12 mt-20">
-              <Checkbox
-                v-if="serverArgs['secrets-encryption']"
-                v-model="serverConfig['secrets-encryption']"
-                :mode="mode"
-                label="Encrypt Secrets"
-              />
-              <Checkbox
-                v-model="value.spec.enableNetworkPolicy"
-                :mode="mode"
-                :label="t('cluster.rke2.enableNetworkPolicy.label')"
-              />
-              <!-- <Checkbox v-if="agentArgs.selinux" v-model="agentConfig.selinux" :mode="mode" label="SELinux" /> -->
-            </div>
-          </div>
-
-          <div
-            v-if="serverConfig.cni === 'cilium' && value.spec.enableNetworkPolicy"
-            class="row"
-          >
-            <div class="col span-12">
-              <Banner
-                color="info"
-                :label="t('cluster.rke2.enableNetworkPolicy.warning')"
-              />
-            </div>
-          </div>
-
-          <div class="spacer" />
-
-          <div
-            v-if="serverArgs.disable"
-            class="row"
-          >
-            <div class="col span-12">
-              <div>
-                <h3>
-                  {{ t('cluster.rke2.systemService.header') }}
-                </h3>
-              </div>
-              <Checkbox
-                v-for="opt in disableOptions"
-                :key="opt.value"
-                v-model="enabledSystemServices"
-                :mode="mode"
-                :label="opt.label"
-                :value-when-true="opt.value"
-              />
-            </div>
-          </div>
         </Tab>
 
         <!-- Member Roles -->
@@ -2738,19 +2357,12 @@ export default {
           label-key="cluster.tabs.memberRoles"
           :weight="10"
         >
-          <Banner
-            v-if="isEdit"
-            color="info"
-          >
-            {{ t('cluster.memberRoles.removeMessage') }}
-          </Banner>
-          <ClusterMembershipEditor
+          <MemberRoles
+            v-model="value"
             :mode="mode"
-            :parent-id="value.mgmt ? value.mgmt.id : null"
-            @membership-update="onMembershipUpdate"
+            :on-membership-update="onMembershipUpdate"
           />
         </Tab>
-
         <!-- etcd -->
         <Tab
           name="etcd"
@@ -2961,11 +2573,11 @@ export default {
             v-if="get(rkeConfig, 'upgradeStrategy.controlPlaneDrainOptions.deleteEmptyDirData')"
             color="warning"
           >
-            {{ t('cluster.rke2.deleteEmptyDir', {}, true) }}
+            {{ t('cluster.rke2.drain.deleteEmptyDir.warning', {}, true) }}
           </Banner>
           <div class="row">
             <div class="col span-6">
-              <h3>Control Plane</h3>
+              <h3>{{ t('cluster.rke2.controlPlaneConcurrency.header') }}</h3>
               <LabeledInput
                 v-model="rkeConfig.upgradeStrategy.controlPlaneConcurrency"
                 :mode="mode"
@@ -3003,7 +2615,7 @@ export default {
           label-key="cluster.tabs.registry"
         >
           <div class="row">
-            <h3>Registry for Rancher System Container Images</h3>
+            <h3>{{ t('cluster.privateRegistry.label') }}</h3>
           </div>
           <div class="row">
             <div class="col span-12">