@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.6

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

@@ -6,6 +6,7 @@ import merge from 'lodash/merge';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import FormValidation from '@shell/mixins/form-validation';
 import { normalizeName } from '@shell/utils/kube';
+import AccountAccess from '@shell/components/google/AccountAccess.vue';
 
 import {
   CAPI,
@@ -66,6 +67,7 @@ import AddOnAdditionalManifest from '@shell/edit/provisioning.cattle.io.cluster/
 import VsphereUtils, { VMWARE_VSPHERE } from '@shell/utils/v-sphere';
 import { mapGetters } from 'vuex';
 const HARVESTER = 'harvester';
+const GOOGLE = 'google';
 const HARVESTER_CLOUD_PROVIDER = 'harvester-cloud-provider';
 const NETBIOS_TRUNCATION_LENGTH = 15;
 
@@ -118,7 +120,8 @@ export default {
     AddOnConfig,
     Advanced,
     ClusterAppearance,
-    AddOnAdditionalManifest
+    AddOnAdditionalManifest,
+    AccountAccess
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -251,7 +254,7 @@ export default {
         path: 'metadata.name', rules: ['subDomain'], translationKey: 'nameNsDescription.name.label'
       }],
       harvesterVersionRange:                    {},
-      cisOverride:                              false,
+      complianceOverride:                       false,
       truncateLimit,
       busy:                                     false,
       machinePoolValidation:                    {}, // map of validation states for each machine pool
@@ -265,6 +268,8 @@ export default {
       clusterAgentDefaultPC:                    null,
       clusterAgentDefaultPDB:                   null,
       activeTab:                                null,
+      isAuthenticated:                          this.provider !== GOOGLE || this.mode === _EDIT,
+      projectId:                                null,
       REGISTRIES_TAB_NAME,
       labelForAddon
 
@@ -1319,7 +1324,7 @@ export default {
         // metadata defined by the latest backend value. This is primarily used to ensure the resourceVersion is up to date.
         delete clonedCurrentConfig.metadata;
 
-        if (this.provider === VMWARE_VSPHERE) {
+        if (this.provider === VMWARE_VSPHERE || this.provider === GOOGLE) {
           machinePool.config = mergeWithReplace(clonedLatestConfig, clonedCurrentConfig, { mutateOriginal: true });
         } else {
           machinePool.config = merge(clonedLatestConfig, clonedCurrentConfig);
@@ -1370,12 +1375,31 @@ export default {
 
         // Capitals and such aren't allowed;
         entry.pool.name = normalizeName(entry.pool.name) || 'pool';
+        const prefix = `${ this.value.metadata.name }-${ entry.pool.name }`;
 
-        const prefix = `${ this.value.metadata.name }-${ entry.pool.name }`.substr(0, 50).toLowerCase();
+        const prefixFormatted = prefix.substr(0, 50).toLowerCase();
+
+        // For Google, we need to set internal and external firewall prefixes if enabled,
+        // but it is better to track it here since cluster and pool names are guaranteed to be set by now.
+        if (this.provider === GOOGLE) {
+          if (!!entry.config.setInternalFirewallRulePrefix) {
+            entry.config.internalFirewallRulePrefix = `${ this.value.metadata.name }`;
+          } else if (!!entry.config.internalFirewallRulePrefix) {
+            delete entry.config.internalFirewallRulePrefix;
+          }
+          if (!!entry.config.setExternalFirewallRulePrefix) {
+            entry.config.externalFirewallRulePrefix = prefix;
+          } else if (!!entry.config.externalFirewallRulePrefix) {
+            delete entry.config.externalFirewallRulePrefix;
+          }
+          // These have to be removed regardless of their value because they are not part of the object we are sending
+          delete entry.config.setInternalFirewallRulePrefix;
+          delete entry.config.setExternalFirewallRulePrefix;
+        }
 
         if (entry.create) {
           if (!entry.config.metadata?.name) {
-            entry.config.metadata.generateName = `nc-${ prefix }-`;
+            entry.config.metadata.generateName = `nc-${ prefixFormatted }-`;
           }
 
           const neu = await entry.config.save();
@@ -1390,7 +1414,7 @@ export default {
 
         // Ensure Elemental clusters have a hostname prefix
         if (this.isElementalCluster && !entry.pool.hostnamePrefix) {
-          entry.pool.hostnamePrefix = `${ prefix }-`;
+          entry.pool.hostnamePrefix = `${ prefixFormatted }-`;
         }
 
         finalPools.push(entry.pool);
@@ -1926,27 +1950,27 @@ export default {
     togglePsaDefault() {
       // This option is created from the server and is guaranteed to exist #8032
       const hardcodedTemplate = 'rancher-restricted';
-      const cisValue = this.agentConfig?.profile || this.serverConfig?.profile;
+      const complianceValue = this.agentConfig?.profile || this.serverConfig?.profile;
 
-      if (!this.cisOverride) {
-        if (cisValue) {
+      if (!this.complianceOverride) {
+        if (complianceValue) {
           this.value.spec.defaultPodSecurityAdmissionConfigurationTemplateName = hardcodedTemplate;
         }
       }
     },
 
-    handleCisChange() {
+    handleComplianceChange() {
       this.togglePsaDefault();
-      this.updateCisProfile();
+      this.updateComplianceProfile();
     },
 
-    updateCisProfile() {
-      // If the user selects any Worker CIS Profile,
+    updateComplianceProfile() {
+      // If the user selects any Worker Compliance Profile,
       // protect-kernel-defaults should be set to false
       // in the RKE2 worker/agent config.
-      const selectedCisProfile = this.agentConfig?.profile;
+      const selectedComplianceProfile = this.agentConfig?.profile;
 
-      if (selectedCisProfile) {
+      if (selectedComplianceProfile) {
         this.agentConfig['protect-kernel-defaults'] = true;
       } else {
         this.agentConfig['protect-kernel-defaults'] = false;
@@ -2000,12 +2024,12 @@ export default {
       };
     },
 
-    handleCisChanged() {
-      this.handleCisChange();
+    handleComplianceChanged() {
+      this.handleComplianceChange();
     },
 
     handlePsaDefaultChanged() {
-      this.cisOverride = !this.cisOverride;
+      this.complianceOverride = !this.complianceOverride;
       this.togglePsaDefault();
     },
 
@@ -2141,396 +2165,408 @@ export default {
         <span v-clean-html="t('cluster.banner.rke2-k3-reprovisioning', {}, true)" />
       </Banner>
     </div>
-    <SelectCredential
-      v-if="needCredential"
-      v-model:value="credentialId"
+    <AccountAccess
+      v-if="!isAuthenticated"
+      v-model:credential="credential"
+      v-model:project="projectId"
+      v-model:is-authenticated="isAuthenticated"
       :mode="mode"
-      :provider="provider"
-      :cancel="cancelCredential"
-      :showing-form="showForm"
-      :default-on-cancel="true"
-      data-testid="select-credential"
-      class="mt-20"
+      @error="e=>errors.push(e)"
+      @cancel-credential="cancelCredential"
     />
-
-    <div
-      v-if="showForm"
-      data-testid="form"
-      class="mt-20"
-    >
-      <NameNsDescription
-        v-if="!isView"
-        v-model:value="localValue"
+    <div v-else>
+      <SelectCredential
+        v-if="needCredential"
+        v-model:value="credentialId"
         :mode="mode"
-        :namespaced="needsNamespace"
-        :namespace-options="allNamespaces"
-        name-label="cluster.name.label"
-        name-placeholder="cluster.name.placeholder"
-        description-label="cluster.description.label"
-        description-placeholder="cluster.description.placeholder"
-        :rules="{ name: fvGetAndReportPathRules('metadata.name') }"
-        @update:value="$emit('input', $event)"
+        :provider="provider"
+        :cancel="cancelCredential"
+        :showing-form="showForm"
+        :default-on-cancel="true"
+        data-testid="select-credential"
+        class="mt-20"
+      />
+
+      <div
+        v-if="showForm"
+        data-testid="form"
+        class="mt-20"
       >
-        <template #customize>
-          <ClusterAppearance
-            :name="clusterName"
-            :currentCluster="currentCluster"
-            :mode="mode"
-          />
-        </template>
-      </NameNsDescription>
-
-      <Banner
-        v-if="appsOSWarning"
-        color="error"
-      >
-        {{ appsOSWarning }}
-      </Banner>
-
-      <!-- Pools Extras -->
-      <template v-if="hasMachinePools">
-        <div class="clearfix">
-          <h2
-            v-t="'cluster.tabs.machinePools'"
-            class="pull-left"
-          />
-          <div
-            v-if="!isView"
-            class="pull-right"
-          >
-            <BadgeState
-              v-clean-tooltip="nodeTotals.tooltip.etcd"
-              :color="nodeTotals.color.etcd"
-              :icon="nodeTotals.icon.etcd"
-              :label="nodeTotals.label.etcd"
-              class="mr-10"
-            />
-            <BadgeState
-              v-clean-tooltip="nodeTotals.tooltip.controlPlane"
-              :color="nodeTotals.color.controlPlane"
-              :icon="nodeTotals.icon.controlPlane"
-              :label="nodeTotals.label.controlPlane"
-              class="mr-10"
+        <NameNsDescription
+          v-if="!isView"
+          v-model:value="localValue"
+          :mode="mode"
+          :namespaced="needsNamespace"
+          :namespace-options="allNamespaces"
+          name-label="cluster.name.label"
+          name-placeholder="cluster.name.placeholder"
+          description-label="cluster.description.label"
+          description-placeholder="cluster.description.placeholder"
+          :rules="{ name: fvGetAndReportPathRules('metadata.name') }"
+          @update:value="$emit('input', $event)"
+        >
+          <template #customize>
+            <ClusterAppearance
+              :name="clusterName"
+              :currentCluster="currentCluster"
+              :mode="mode"
             />
-            <BadgeState
-              v-clean-tooltip="nodeTotals.tooltip.worker"
-              :color="nodeTotals.color.worker"
-              :icon="nodeTotals.icon.worker"
-              :label="nodeTotals.label.worker"
+          </template>
+        </NameNsDescription>
+
+        <Banner
+          v-if="appsOSWarning"
+          color="error"
+        >
+          {{ appsOSWarning }}
+        </Banner>
+
+        <!-- Pools Extras -->
+        <template v-if="hasMachinePools">
+          <div class="clearfix">
+            <h2
+              v-t="'cluster.tabs.machinePools'"
+              class="pull-left"
             />
+            <div
+              v-if="!isView"
+              class="pull-right"
+            >
+              <BadgeState
+                v-clean-tooltip="nodeTotals.tooltip.etcd"
+                :color="nodeTotals.color.etcd"
+                :icon="nodeTotals.icon.etcd"
+                :label="nodeTotals.label.etcd"
+                class="mr-10"
+              />
+              <BadgeState
+                v-clean-tooltip="nodeTotals.tooltip.controlPlane"
+                :color="nodeTotals.color.controlPlane"
+                :icon="nodeTotals.icon.controlPlane"
+                :label="nodeTotals.label.controlPlane"
+                class="mr-10"
+              />
+              <BadgeState
+                v-clean-tooltip="nodeTotals.tooltip.worker"
+                :color="nodeTotals.color.worker"
+                :icon="nodeTotals.icon.worker"
+                :label="nodeTotals.label.worker"
+              />
+            </div>
           </div>
-        </div>
 
-        <!-- Extra Tabs for Machine Pool -->
+          <!-- Extra Tabs for Machine Pool -->
+          <Tabbed
+            ref="pools"
+            :side-tabs="true"
+            :show-tabs-add-remove="!isView"
+            @addTab="addMachinePool($event)"
+            @removeTab="removeMachinePool($event)"
+          >
+            <template
+              v-for="(obj, idx) in machinePools"
+              :key="idx"
+            >
+              <Tab
+                v-if="!obj.remove"
+                :key="obj.id"
+                :name="obj.id"
+                :label="obj.pool.name || '(Not Named)'"
+                :show-header="false"
+                :error="!machinePoolValidation[obj.id]"
+              >
+                <MachinePool
+                  ref="pool"
+                  :value="obj"
+                  :cluster="value"
+                  :mode="mode"
+                  :provider="provider"
+                  :credential-id="credentialId"
+                  :project-id="projectId"
+                  :idx="idx"
+                  :machine-pools="machinePools"
+                  :busy="busy"
+                  :pool-id="obj.id"
+                  :pool-create-mode="obj.create"
+                  @error="handleMachinePoolError"
+                  @validationChanged="v => machinePoolValidationChanged(obj.id, v)"
+                />
+              </Tab>
+            </template>
+            <div v-if="!unremovedMachinePools.length">
+              {{ t('cluster.machinePool.noPoolsDisclaimer') }}
+            </div>
+          </Tabbed>
+          <div class="spacer" />
+        </template>
+
+        <!-- Cluster Tabs -->
+        <h2 v-t="'cluster.tabs.cluster'" />
         <Tabbed
-          ref="pools"
           :side-tabs="true"
-          :show-tabs-add-remove="!isView"
-          @addTab="addMachinePool($event)"
-          @removeTab="removeMachinePool($event)"
+          class="min-height"
+          :use-hash="useTabbedHash"
+          @changed="handleTabChange"
         >
-          <template
-            v-for="(obj, idx) in machinePools"
-            :key="idx"
+          <Tab
+            name="basic"
+            label-key="cluster.tabs.basic"
+            :weight="11"
+            @active="refreshComponentWithYamls('tab-Basics')"
           >
-            <Tab
-              v-if="!obj.remove"
-              :key="obj.id"
-              :name="obj.id"
-              :label="obj.pool.name || '(Not Named)'"
-              :show-header="false"
-              :error="!machinePoolValidation[obj.id]"
-            >
-              <MachinePool
-                ref="pool"
-                :value="obj"
-                :cluster="value"
-                :mode="mode"
-                :provider="provider"
-                :credential-id="credentialId"
-                :idx="idx"
-                :machine-pools="machinePools"
-                :busy="busy"
-                :pool-id="obj.id"
-                :pool-create-mode="obj.create"
-                @error="handleMachinePoolError"
-                @validationChanged="v => machinePoolValidationChanged(obj.id, v)"
-              />
-            </Tab>
-          </template>
-          <div v-if="!unremovedMachinePools.length">
-            {{ t('cluster.machinePool.noPoolsDisclaimer') }}
-          </div>
-        </Tabbed>
-        <div class="spacer" />
-      </template>
-
-      <!-- Cluster Tabs -->
-      <h2 v-t="'cluster.tabs.cluster'" />
-      <Tabbed
-        :side-tabs="true"
-        class="min-height"
-        @changed="handleTabChange"
-      >
-        <Tab
-          name="basic"
-          label-key="cluster.tabs.basic"
-          :weight="11"
-          @active="refreshComponentWithYamls('tab-Basics')"
-        >
-          <!-- Basic -->
-          <Basics
-            ref="tab-Basics"
-            v-model:value="localValue"
-            :live-value="liveValue"
-            :mode="mode"
-            :provider="provider"
-            :user-chart-values="userChartValues"
-            :credential="credential"
-            :cis-override="cisOverride"
-            :all-psas="allPSAs"
-            :addon-versions="addonVersions"
-            :show-deprecated-patch-versions="showDeprecatedPatchVersions"
-            :selected-version="selectedVersion"
-            :is-harvester-driver="isHarvesterDriver"
-            :is-harvester-incompatible="isHarvesterIncompatible"
-            :version-options="versionOptions"
-            :is-elemental-cluster="isElementalCluster"
-            :have-arg-info="haveArgInfo"
-            :show-cni="showCni"
-            :show-cloud-provider="showCloudProvider"
-            :cloud-provider-options="cloudProviderOptions"
-            :is-azure-provider-unsupported="isAzureProviderUnsupported"
-            :can-azure-migrate-on-edit="canAzureMigrateOnEdit"
-            @update:value="$emit('input', $event)"
-            @cilium-values-changed="handleCiliumValuesChanged"
-            @enabled-system-services-changed="handleEnabledSystemServicesChanged"
-            @kubernetes-changed="handleKubernetesChange"
-            @cis-changed="handleCisChanged"
-            @psa-default-changed="handlePsaDefaultChanged"
-            @show-deprecated-patch-versions-changed="handleShowDeprecatedPatchVersionsChanged"
-          />
-        </Tab>
-
-        <!-- Member Roles -->
-        <Tab
-          v-if="canManageMembers"
-          name="memberRoles"
-          label-key="cluster.tabs.memberRoles"
-          :weight="10"
-        >
-          <MemberRoles
-            v-model:value="localValue"
-            :mode="mode"
-            :on-membership-update="onMembershipUpdate"
-            @update:value="$emit('input', $event)"
-          />
-        </Tab>
-        <!-- etcd -->
-        <Tab
-          name="etcd"
-          label-key="cluster.tabs.etcd"
-        >
-          <Etcd
-            v-model:value="localValue"
-            :mode="mode"
-            :s3-backup="s3Backup"
-            :register-before-hook="registerBeforeHook"
-            :selected-version="selectedVersion"
-            @update:value="$emit('input', $event)"
-            @s3-backup-changed="handleS3BackupChanged"
-            @config-etcd-expose-metrics-changed="handleConfigEtcdExposeMetricsChanged"
-          />
-        </Tab>
+            <!-- Basic -->
+            <Basics
+              ref="tab-Basics"
+              v-model:value="localValue"
+              :live-value="liveValue"
+              :mode="mode"
+              :provider="provider"
+              :user-chart-values="userChartValues"
+              :credential="credential"
+              :compliance-override="complianceOverride"
+              :all-psas="allPSAs"
+              :addon-versions="addonVersions"
+              :show-deprecated-patch-versions="showDeprecatedPatchVersions"
+              :selected-version="selectedVersion"
+              :is-harvester-driver="isHarvesterDriver"
+              :is-harvester-incompatible="isHarvesterIncompatible"
+              :version-options="versionOptions"
+              :is-elemental-cluster="isElementalCluster"
+              :have-arg-info="haveArgInfo"
+              :show-cni="showCni"
+              :show-cloud-provider="showCloudProvider"
+              :cloud-provider-options="cloudProviderOptions"
+              :is-azure-provider-unsupported="isAzureProviderUnsupported"
+              :can-azure-migrate-on-edit="canAzureMigrateOnEdit"
+              @update:value="$emit('input', $event)"
+              @cilium-values-changed="handleCiliumValuesChanged"
+              @enabled-system-services-changed="handleEnabledSystemServicesChanged"
+              @kubernetes-changed="handleKubernetesChange"
+              @compliance-changed="handleComplianceChanged"
+              @psa-default-changed="handlePsaDefaultChanged"
+              @show-deprecated-patch-versions-changed="handleShowDeprecatedPatchVersionsChanged"
+            />
+          </Tab>
+
+          <!-- Member Roles -->
+          <Tab
+            v-if="canManageMembers"
+            name="memberRoles"
+            label-key="cluster.tabs.memberRoles"
+            :weight="10"
+          >
+            <MemberRoles
+              v-model:value="localValue"
+              :mode="mode"
+              :on-membership-update="onMembershipUpdate"
+              @update:value="$emit('input', $event)"
+            />
+          </Tab>
+          <!-- etcd -->
+          <Tab
+            name="etcd"
+            label-key="cluster.tabs.etcd"
+          >
+            <Etcd
+              v-model:value="localValue"
+              :mode="mode"
+              :s3-backup="s3Backup"
+              :register-before-hook="registerBeforeHook"
+              :selected-version="selectedVersion"
+              @update:value="$emit('input', $event)"
+              @s3-backup-changed="handleS3BackupChanged"
+              @config-etcd-expose-metrics-changed="handleConfigEtcdExposeMetricsChanged"
+            />
+          </Tab>
 
-        <!-- Networking -->
-        <Tab
-          v-if="haveArgInfo"
-          name="networking"
-          label-key="cluster.tabs.networking"
-        >
-          <Networking
-            v-model:value="localValue"
-            :mode="mode"
-            :selected-version="selectedVersion"
-            :truncate-limit="truncateLimit"
-            @truncate-hostname-changed="truncateHostname"
-            @cluster-cidr-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['cluster-cidr'] = val"
-            @service-cidr-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['service-cidr'] = val"
-            @cluster-domain-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['cluster-domain'] = val"
-            @cluster-dns-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['cluster-dns'] = val"
-            @service-node-port-range-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['service-node-port-range'] = val"
-            @tls-san-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['tls-san'] = val"
-            @local-cluster-auth-endpoint-changed="enableLocalClusterAuthEndpoint"
-            @ca-certs-changed="(val)=>localValue.spec.localClusterAuthEndpoint.caCerts = val"
-            @fqdn-changed="(val)=>localValue.spec.localClusterAuthEndpoint.fqdn = val"
-          />
-        </Tab>
+          <!-- Networking -->
+          <Tab
+            v-if="haveArgInfo"
+            name="networking"
+            label-key="cluster.tabs.networking"
+          >
+            <Networking
+              v-model:value="localValue"
+              :mode="mode"
+              :selected-version="selectedVersion"
+              :truncate-limit="truncateLimit"
+              @truncate-hostname-changed="truncateHostname"
+              @cluster-cidr-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['cluster-cidr'] = val"
+              @service-cidr-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['service-cidr'] = val"
+              @cluster-domain-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['cluster-domain'] = val"
+              @cluster-dns-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['cluster-dns'] = val"
+              @service-node-port-range-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['service-node-port-range'] = val"
+              @tls-san-changed="(val)=>localValue.spec.rkeConfig.machineGlobalConfig['tls-san'] = val"
+              @local-cluster-auth-endpoint-changed="enableLocalClusterAuthEndpoint"
+              @ca-certs-changed="(val)=>localValue.spec.localClusterAuthEndpoint.caCerts = val"
+              @fqdn-changed="(val)=>localValue.spec.localClusterAuthEndpoint.fqdn = val"
+            />
+          </Tab>
 
-        <!-- Upgrade -->
-        <Tab
-          name="upgrade"
-          label-key="cluster.tabs.upgrade"
-        >
-          <Upgrade
-            v-model:value="localValue"
-            :mode="mode"
-            @update:value="$emit('input', $event)"
-          />
-        </Tab>
+          <!-- Upgrade -->
+          <Tab
+            name="upgrade"
+            label-key="cluster.tabs.upgrade"
+          >
+            <Upgrade
+              v-model:value="localValue"
+              :mode="mode"
+              @update:value="$emit('input', $event)"
+            />
+          </Tab>
 
-        <!-- Registries -->
-        <Tab
-          :name="REGISTRIES_TAB_NAME"
-          label-key="cluster.tabs.registry"
-        >
-          <Registries
-            v-if="isActiveTabRegistries"
+          <!-- Registries -->
+          <Tab
+            :name="REGISTRIES_TAB_NAME"
+            label-key="cluster.tabs.registry"
+          >
+            <Registries
+              v-if="isActiveTabRegistries"
+              v-model:value="localValue"
+              :mode="mode"
+              :register-before-hook="registerBeforeHook"
+              :show-custom-registry-input="showCustomRegistryInput"
+              :registry-host="registryHost"
+              :registry-secret="registrySecret"
+              :show-custom-registry-advanced-input="showCustomRegistryAdvancedInput"
+              @update:value="$emit('input', $event)"
+              @update-configs-changed="updateConfigs"
+              @custom-registry-changed="toggleCustomRegistry"
+              @registry-host-changed="handleRegistryHostChanged"
+              @registry-secret-changed="handleRegistrySecretChanged"
+            />
+          </Tab>
+
+          <!-- Add-on Configs -->
+          <Tab
+            v-for="v in addonVersions"
+            :key="v.name"
+            :name="v.name"
+            :label="labelForAddon($store, v.name, false)"
+            :weight="9"
+            :showHeader="false"
+            :error="addonConfigValidation[v.name]===false"
+            @active="showAddons(v.name)"
+          >
+            <AddOnConfig
+              :ref="v.name"
+              v-model:value="localValue"
+              :mode="mode"
+              :version-info="versionInfo"
+              :addon-version="v"
+              :addons-rev="addonsRev"
+              :user-chart-values-temp="userChartValuesTemp"
+              :init-yaml-editor="initYamlEditor"
+              @update:value="$emit('input', $event)"
+              @update-questions="syncChartValues"
+              @update-values="updateValues"
+              @validationChanged="e => addonConfigValidationChanged(v.name, e)"
+            />
+          </Tab>
+
+          <!-- Add-on Additional Manifest -->
+          <Tab
+            name="additionalmanifest"
+            label-key="cluster.tabs.addOnAdditionalManifest"
+            :showHeader="false"
+            @active="refreshComponentWithYamls('additionalmanifest')"
+          >
+            <AddOnAdditionalManifest
+              ref="additionalmanifest"
+              :value="value"
+              :mode="mode"
+              @additional-manifest-changed="updateAdditionalManifest"
+            />
+          </Tab>
+
+          <!-- Cluster Agent Configuration -->
+          <Tab
+            v-if="value.spec.clusterAgentDeploymentCustomization"
+            name="clusteragentconfig"
+            label-key="cluster.agentConfig.tabs.cluster"
+          >
+            <AgentConfiguration
+              v-model:value="value.spec.clusterAgentDeploymentCustomization"
+              data-testid="rke2-cluster-agent-config"
+              type="cluster"
+              :mode="mode"
+              :scheduling-customization-feature-enabled="schedulingCustomizationFeatureEnabled"
+              :default-p-c="clusterAgentDefaultPC"
+              :default-p-d-b="clusterAgentDefaultPDB"
+              :scheduling-customization-originally-enabled="schedulingCustomizationOriginallyEnabled"
+              @scheduling-customization-changed="setSchedulingCustomization"
+            />
+          </Tab>
+
+          <!-- Fleet Agent Configuration -->
+          <Tab
+            name="fleetagentconfig"
+            label-key="cluster.agentConfig.tabs.fleet"
+          >
+            <AgentConfiguration
+              v-if="value.spec.fleetAgentDeploymentCustomization"
+              v-model:value="value.spec.fleetAgentDeploymentCustomization"
+              data-testid="rke2-fleet-agent-config"
+              type="fleet"
+              :mode="mode"
+            />
+          </Tab>
+
+          <!-- Advanced -->
+          <Tab
+            v-if="haveArgInfo || agentArgs['protect-kernel-defaults']"
+            name="advanced"
+            label-key="cluster.tabs.advanced"
+            :weight="-1"
+          >
+            <Advanced
+              v-model:value="localValue"
+              :mode="mode"
+              :have-arg-info="haveArgInfo"
+              :selected-version="selectedVersion"
+              @update:value="$emit('input', $event)"
+            />
+          </Tab>
+
+          <AgentEnv
             v-model:value="localValue"
             :mode="mode"
-            :register-before-hook="registerBeforeHook"
-            :show-custom-registry-input="showCustomRegistryInput"
-            :registry-host="registryHost"
-            :registry-secret="registrySecret"
-            :show-custom-registry-advanced-input="showCustomRegistryAdvancedInput"
             @update:value="$emit('input', $event)"
-            @update-configs-changed="updateConfigs"
-            @custom-registry-changed="toggleCustomRegistry"
-            @registry-host-changed="handleRegistryHostChanged"
-            @registry-secret-changed="handleRegistrySecretChanged"
           />
-        </Tab>
-
-        <!-- Add-on Configs -->
-        <Tab
-          v-for="v in addonVersions"
-          :key="v.name"
-          :name="v.name"
-          :label="labelForAddon($store, v.name, false)"
-          :weight="9"
-          :showHeader="false"
-          :error="addonConfigValidation[v.name]===false"
-          @active="showAddons(v.name)"
-        >
-          <AddOnConfig
-            :ref="v.name"
+          <Labels
             v-model:value="localValue"
             :mode="mode"
-            :version-info="versionInfo"
-            :addon-version="v"
-            :addons-rev="addonsRev"
-            :user-chart-values-temp="userChartValuesTemp"
-            :init-yaml-editor="initYamlEditor"
             @update:value="$emit('input', $event)"
-            @update-questions="syncChartValues"
-            @update-values="updateValues"
-            @validationChanged="e => addonConfigValidationChanged(v.name, e)"
           />
-        </Tab>
-
-        <!-- Add-on Additional Manifest -->
-        <Tab
-          name="additionalmanifest"
-          label-key="cluster.tabs.addOnAdditionalManifest"
-          :showHeader="false"
-          @active="refreshComponentWithYamls('additionalmanifest')"
-        >
-          <AddOnAdditionalManifest
-            ref="additionalmanifest"
-            :value="value"
-            :mode="mode"
-            @additional-manifest-changed="updateAdditionalManifest"
-          />
-        </Tab>
-
-        <!-- Cluster Agent Configuration -->
-        <Tab
-          v-if="value.spec.clusterAgentDeploymentCustomization"
-          name="clusteragentconfig"
-          label-key="cluster.agentConfig.tabs.cluster"
-        >
-          <AgentConfiguration
-            v-model:value="value.spec.clusterAgentDeploymentCustomization"
-            data-testid="rke2-cluster-agent-config"
-            type="cluster"
-            :mode="mode"
-            :scheduling-customization-feature-enabled="schedulingCustomizationFeatureEnabled"
-            :default-p-c="clusterAgentDefaultPC"
-            :default-p-d-b="clusterAgentDefaultPDB"
-            :scheduling-customization-originally-enabled="schedulingCustomizationOriginallyEnabled"
-            @scheduling-customization-changed="setSchedulingCustomization"
-          />
-        </Tab>
 
-        <!-- Fleet Agent Configuration -->
-        <Tab
-          name="fleetagentconfig"
-          label-key="cluster.agentConfig.tabs.fleet"
-        >
-          <AgentConfiguration
-            v-if="value.spec.fleetAgentDeploymentCustomization"
-            v-model:value="value.spec.fleetAgentDeploymentCustomization"
-            data-testid="rke2-fleet-agent-config"
-            type="fleet"
-            :mode="mode"
-          />
-        </Tab>
-
-        <!-- Advanced -->
-        <Tab
-          v-if="haveArgInfo || agentArgs['protect-kernel-defaults']"
-          name="advanced"
-          label-key="cluster.tabs.advanced"
-          :weight="-1"
-        >
-          <Advanced
-            v-model:value="localValue"
-            :mode="mode"
-            :have-arg-info="haveArgInfo"
-            :selected-version="selectedVersion"
-            @update:value="$emit('input', $event)"
-          />
-        </Tab>
+          <!-- Extension tabs -->
+          <Tab
+            v-for="tab, i in extensionTabs"
+            :key="`${tab.name}${i}`"
+            :name="tab.name"
+            :label="tab.label"
+            :label-key="tab.labelKey"
+            :weight="tab.weight"
+            :tooltip="tab.tooltip"
+            :show-header="tab.showHeader"
+            :display-alert-icon="tab.displayAlertIcon"
+            :error="tab.error"
+            :badge="tab.badge"
+          >
+            <component
+              :is="tab.component"
+              :resource="value"
+            />
+          </Tab>
+        </Tabbed>
+      </div>
 
-        <AgentEnv
-          v-model:value="localValue"
-          :mode="mode"
-          @update:value="$emit('input', $event)"
-        />
-        <Labels
-          v-model:value="localValue"
-          :mode="mode"
-          @update:value="$emit('input', $event)"
-        />
-
-        <!-- Extension tabs -->
-        <Tab
-          v-for="tab, i in extensionTabs"
-          :key="`${tab.name}${i}`"
-          :name="tab.name"
-          :label="tab.label"
-          :label-key="tab.labelKey"
-          :weight="tab.weight"
-          :tooltip="tab.tooltip"
-          :show-header="tab.showHeader"
-          :display-alert-icon="tab.displayAlertIcon"
-          :error="tab.error"
-          :badge="tab.badge"
-        >
-          <component
-            :is="tab.component"
-            :resource="value"
-          />
-        </Tab>
-      </Tabbed>
+      <Banner
+        v-if="unsupportedSelectorConfig"
+        color="warning"
+        :label="t('cluster.banner.warning')"
+      />
     </div>
-
-    <Banner
-      v-if="unsupportedSelectorConfig"
-      color="warning"
-      :label="t('cluster.banner.warning')"
-    />
-
     <template
       v-if="needCredential && !credentialId"
       #form-footer