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

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

@@ -6,6 +6,8 @@ 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 { handleConflict } from '@shell/plugins/dashboard-store/normalize';
 
 import {
   CAPI,
@@ -66,6 +68,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 +121,8 @@ export default {
     AddOnConfig,
     Advanced,
     ClusterAppearance,
-    AddOnAdditionalManifest
+    AddOnAdditionalManifest,
+    AccountAccess
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -223,6 +227,7 @@ export default {
       allPSAs:                         [],
       credentialId:                    '',
       credential:                      null,
+      initialMachinePoolsValues:       {},
       machinePools:                    null,
       rke2Versions:                    null,
       k3sVersions:                     null,
@@ -251,7 +256,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 +270,8 @@ export default {
       clusterAgentDefaultPC:                    null,
       clusterAgentDefaultPDB:                   null,
       activeTab:                                null,
+      isAuthenticated:                          this.provider !== GOOGLE || this.mode === _EDIT,
+      projectId:                                null,
       REGISTRIES_TAB_NAME,
       labelForAddon
 
@@ -851,6 +858,9 @@ export default {
       set(newValue) {
         this.$emit('update:value', newValue);
       }
+    },
+    hideFooter() {
+      return this.needCredential && !this.credential;
     }
   },
 
@@ -941,6 +951,7 @@ export default {
     this.registerBeforeHook(this.setRegistryConfig, 'set-registry-config');
     this.registerBeforeHook(this.handleVsphereCpiSecret, 'sync-vsphere-cpi');
     this.registerBeforeHook(this.handleVsphereCsiSecret, 'sync-vsphere-csi');
+    this.registerBeforeHook(this.setHarvesterChartValues, 'set-harvester-chart-values');
     this.registerAfterHook(this.cleanupMachinePools, 'cleanup-machine-pools');
     this.registerAfterHook(this.saveRoleBindings, 'save-role-bindings');
 
@@ -1209,7 +1220,7 @@ export default {
           // @TODO what if the pool is missing?
           const id = `pool${ ++this.lastIdx }`;
 
-          out.push({
+          const poolData = {
             id,
             remove: false,
             create: false,
@@ -1217,7 +1228,15 @@ export default {
             pool:   clone(pool),
             config: config ? await this.$store.dispatch('management/clone', { resource: config }) : null,
             configMissing
-          });
+          };
+
+          // add data to machine pools array
+          out.push(poolData);
+
+          // but we also store the initial data so that we can handle conflicts
+          if (poolData?.config?.id) {
+            this.initialMachinePoolsValues[poolData.config.id] = structuredClone(poolData.config);
+          }
         }
       }
 
@@ -1312,17 +1331,25 @@ export default {
         const _latestConfig = await this.$store.dispatch('management/request', { url: `/v1/${ machinePool.config.type }s/${ machinePool.config.id }` });
         const latestConfig = await this.$store.dispatch('management/create', _latestConfig);
 
-        const clonedCurrentConfig = await this.$store.dispatch('management/clone', { resource: machinePool.config });
-        const clonedLatestConfig = await this.$store.dispatch('management/clone', { resource: latestConfig });
-
-        // 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;
+        const _initialMachinePoolValue = this.initialMachinePoolsValues[machinePool?.config?.id] || {};
+        const initialMachinePoolValue = await this.$store.dispatch('management/create', _initialMachinePoolValue);
+
+        // if there's the initial machine pool config, we are in a good position to apply the handleConflict function
+        // to deal with out-of-sync data between machinePools configs. This also mutates the data inside machinePool.config through object reference
+        const conflict = await handleConflict(
+          initialMachinePoolValue,
+          machinePool.config,
+          latestConfig,
+          {
+            dispatch: this.$store.dispatch,
+            getters:  this.$store.getters
+          },
+          'management'
+        );
 
-        if (this.provider === VMWARE_VSPHERE) {
-          machinePool.config = mergeWithReplace(clonedLatestConfig, clonedCurrentConfig, { mutateOriginal: true });
-        } else {
-          machinePool.config = merge(clonedLatestConfig, clonedCurrentConfig);
+        // if there's conflicts, throw Error stops save process and surfaces error to user
+        if (conflict) {
+          throw Error(conflict);
         }
       }
     },
@@ -1370,12 +1397,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 prefixFormatted = prefix.substr(0, 50).toLowerCase();
 
-        const prefix = `${ this.value.metadata.name }-${ entry.pool.name }`.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 +1436,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);
@@ -1512,41 +1558,7 @@ export default {
       }
 
       try {
-        const clusterId = get(this.credential, 'decodedData.clusterId') || '';
-
         this.applyChartValues(this.value.spec.rkeConfig);
-
-        const isUpgrade = this.isEdit && this.liveValue?.spec?.kubernetesVersion !== this.value?.spec?.kubernetesVersion;
-
-        if (this.agentConfig?.['cloud-provider-name'] === HARVESTER && clusterId && (this.isCreate || isUpgrade)) {
-          const namespace = this.machinePools?.[0]?.config?.vmNamespace;
-
-          const res = await this.$store.dispatch('management/request', {
-            url:    `/k8s/clusters/${ clusterId }/v1/harvester/kubeconfig`,
-            method: 'POST',
-            data:   {
-              csiClusterRoleName: 'harvesterhci.io:csi-driver',
-              clusterRoleName:    'harvesterhci.io:cloudprovider',
-              namespace,
-              serviceAccountName: this.value.metadata.name,
-            },
-          });
-
-          const kubeconfig = res.data;
-
-          const harvesterKubeconfigSecret = await this.createKubeconfigSecret(kubeconfig);
-
-          this.agentConfig['cloud-provider-config'] = `secret://fleet-default:${ harvesterKubeconfigSecret?.metadata?.name }`;
-
-          if (this.isCreate) {
-            set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.global.cattle.clusterName`, this.value.metadata.name);
-          }
-
-          const distroSubdir = this.value?.spec?.kubernetesVersion?.includes('k3s') ? DEFAULT_SUBDIRS.K8S_DISTRO_K3S : DEFAULT_SUBDIRS.K8S_DISTRO_RKE2;
-          const distroRoot = this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro?.length ? this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro : `${ DEFAULT_COMMON_BASE_PATH }/${ distroSubdir }`;
-
-          set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`, `${ distroRoot }/etc/config-files/cloud-provider-config`);
-        }
       } catch (err) {
         this.errors.push(err);
 
@@ -1593,6 +1605,62 @@ export default {
       }
     },
 
+    async setHarvesterChartValues() {
+      const isHarvester = this.agentConfig?.['cloud-provider-name'] === HARVESTER;
+
+      if (!isHarvester) {
+        return;
+      }
+      try {
+        const clusterId = get(this.credential, 'decodedData.clusterId') || '';
+        const isUpgrade = this.isEdit && this.liveValue?.spec?.kubernetesVersion !== this.value?.spec?.kubernetesVersion;
+
+        if (!this.value?.metadata?.name) {
+          const err = this.t('cluster.harvester.kubeconfigSecret.nameRequired');
+
+          throw new Error(err);
+        }
+
+        if (clusterId && (this.isCreate || isUpgrade)) {
+          const namespace = this.machinePools?.[0]?.config?.vmNamespace;
+
+          const res = await this.$store.dispatch('management/request', {
+            url:    `/k8s/clusters/${ clusterId }/v1/harvester/kubeconfig`,
+            method: 'POST',
+            data:   {
+              csiClusterRoleName: 'harvesterhci.io:csi-driver',
+              clusterRoleName:    'harvesterhci.io:cloudprovider',
+              namespace,
+              serviceAccountName: this.value.metadata.name,
+            },
+          });
+
+          const kubeconfig = res.data;
+
+          const harvesterKubeconfigSecret = await this.createKubeconfigSecret(kubeconfig);
+
+          this.agentConfig['cloud-provider-config'] = `secret://fleet-default:${ harvesterKubeconfigSecret?.metadata?.name }`;
+
+          const harvesterCloudProviderKey = this.chartVersionKey(HARVESTER_CLOUD_PROVIDER);
+
+          if (this.isCreate) {
+            set(this.userChartValues, `'${ harvesterCloudProviderKey }'.global.cattle.clusterName`, this.value.metadata.name);
+          }
+
+          const distroSubdir = this.value?.spec?.kubernetesVersion?.includes('k3s') ? DEFAULT_SUBDIRS.K8S_DISTRO_K3S : DEFAULT_SUBDIRS.K8S_DISTRO_RKE2;
+          const distroRoot = this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro?.length ? this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro : `${ DEFAULT_COMMON_BASE_PATH }/${ distroSubdir }`;
+
+          set(this.userChartValues, `'${ harvesterCloudProviderKey }'.cloudConfigPath`, `${ distroRoot }/etc/config-files/cloud-provider-config`);
+        }
+      } catch (e) {
+        const cause = e.errors ? e.errors.join('; ') : e?.message;
+        const msg = this.t('cluster.harvester.kubeconfigSecret.error', { err: cause });
+
+        this.errors.push(msg);
+        throw new Error(msg);
+      }
+    },
+
     // create a secret to reference the harvester cluster kubeconfig in rkeConfig
     async createKubeconfigSecret(kubeconfig = '') {
       const clusterName = this.value.metadata.name;
@@ -1869,6 +1937,7 @@ export default {
 
       charts.forEach((name) => {
         const key = this.chartVersionKey(name);
+
         const userValues = this.userChartValues[key];
 
         if (userValues) {
@@ -1926,27 +1995,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 +2069,12 @@ export default {
       };
     },
 
-    handleCisChanged() {
-      this.handleCisChange();
+    handleComplianceChanged() {
+      this.handleComplianceChange();
     },
 
     handlePsaDefaultChanged() {
-      this.cisOverride = !this.cisOverride;
+      this.complianceOverride = !this.complianceOverride;
       this.togglePsaDefault();
     },
 
@@ -2141,398 +2210,413 @@ 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"
+      v-else
+      class="authenticated"
     >
-      <NameNsDescription
-        v-if="!isView"
-        v-model:value="localValue"
+      <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"
+      v-if="hideFooter"
       #form-footer
     >
       <div><!-- Hide the outer footer --></div>
@@ -2541,6 +2625,12 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.authenticated {
+    display:flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
 .min-height {
   min-height: 40em;
 }