@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/edit/management.cattle.io.user.vue

@@ -174,7 +174,7 @@ export default {
         await wait(5000);
       }
 
-      const user = this.value.save();
+      const user = await this.value.save();
 
       return user;
     },
@@ -214,8 +214,10 @@ export default {
         return;
       }
 
+      const userId = user?.id || this.value.id;
+
       try {
-        await this.$refs.grb.save(user.id);
+        await this.$refs.grb.save(userId);
       } catch (err) {
         if (this.isCreate) {
           try {
@@ -245,6 +247,7 @@ export default {
     :can-yaml="false"
     class="create-edit"
     @finish="save"
+    @error="e=>errors = e"
   >
     <div class="credentials">
       <h2> {{ t("user.edit.credentials.label") }}</h2>

package/edit/networking.k8s.io.ingress/DefaultBackend.vue

@@ -43,7 +43,9 @@ export default {
     const backend = get(this.value.spec, this.value.defaultBackendPath);
 
     this.serviceName = get(backend, this.value.serviceNamePath) || '';
-    this.servicePort = get(backend, this.value.servicePortPath) || '';
+    this.servicePort = get(backend, this.value.servicePortPath) ||
+      get(backend, this.value.servicePortNamePath) ||
+      '';
   },
   computed: {
     isView() {
@@ -75,10 +77,14 @@ export default {
   },
   methods: {
     update() {
-      const backend = get(this.value.spec, this.value.defaultBackendPath) || {};
+      // Fresh object so the old port path (name vs number) doesn't linger.
+      const backend = {};
+      const parsed = Number.parseInt(this.servicePort);
+      const servicePort = Number.isNaN(parsed) ? this.servicePort : parsed;
+      const portPath = typeof servicePort === 'number' ? this.value.servicePortPath : this.value.servicePortNamePath;
 
       set(backend, this.value.serviceNamePath, this.serviceName);
-      set(backend, this.value.servicePortPath, this.servicePort);
+      set(backend, portPath, servicePort);
       set(this.value.spec, this.value.defaultBackendPath, backend);
 
       this.$emit('update:value', this.value);
@@ -119,10 +125,12 @@ export default {
         class="col span-3"
         :style="{'margin-right': '0px'}"
       >
+        <!-- :required drives the asterisk; portRequired doesn't have .name === 'required' -->
         <LabeledInput
           v-if="portOptions.length === 0 || isView"
-          v-model:value.number="servicePort"
+          v-model:value="servicePort"
           :mode="mode"
+          :required="true"
           :label="t('ingress.defaultBackend.port.label')"
           :placeholder="t('ingress.defaultBackend.port.placeholder')"
           :rules="rules.port"
@@ -132,6 +140,7 @@ export default {
           v-else
           v-model:value="servicePort"
           :mode="mode"
+          :required="true"
           :options="portOptions"
           :label="t('ingress.defaultBackend.port.label')"
           :placeholder="t('ingress.defaultBackend.port.placeholder')"

package/edit/networking.k8s.io.ingress/RulePath.vue

@@ -79,20 +79,24 @@ export default {
     set(this.value, 'path', this.value.path || '');
     set(this.value, 'pathType', this.value.pathType || this.pathTypes[0]);
     set(this.value.backend, this.ingress.serviceNamePath, get(this.value.backend, this.ingress.serviceNamePath) || '');
-    set(this.value.backend, this.ingress.servicePortPath, get(this.value.backend, this.ingress.servicePortPath) || '');
 
     this.serviceName = get(this.value.backend, this.ingress.serviceNamePath);
-    this.servicePort = get(this.value.backend, this.ingress.servicePortPath);
+    this.servicePort = get(this.value.backend, this.ingress.servicePortPath) ||
+      get(this.value.backend, this.ingress.servicePortNamePath) ||
+      '';
   },
   methods: {
     update() {
-      const servicePort = Number.parseInt(this.servicePort) || this.servicePort;
+      const parsed = Number.parseInt(this.servicePort);
+      const servicePort = Number.isNaN(parsed) ? this.servicePort : parsed;
       const serviceName = this.serviceName.label || this.serviceName;
       const out = {
         id: this.value.id, backend: {}, path: this.path, pathType: this.pathType
       };
 
-      set(out.backend, this.ingress.servicePortPath, servicePort);
+      const portPath = typeof servicePort === 'number' ? this.ingress.servicePortPath : this.ingress.servicePortNamePath;
+
+      set(out.backend, portPath, servicePort);
       set(out.backend, this.ingress.serviceNamePath, serviceName);
 
       this.$emit('update:value', out);

package/edit/networking.k8s.io.ingress/index.vue

@@ -87,21 +87,21 @@ export default {
           path: 'spec.rules.http.paths.path', rules: ['absolutePath'], translationKey: 'ingress.rules.path.label'
         },
         {
-          path: 'spec.rules.http.paths.backend.service.port.number', rules: ['required'], translationKey: 'ingress.rules.port.label'
+          path: 'spec.rules.http.paths.backend.service.port', rules: ['portRequired', 'portRange'], translationKey: 'ingress.rules.port.label'
         },
         {
           path: 'spec.rules.http.paths.backend.service.name', rules: ['required'], translationKey: 'ingress.rules.target.label'
         },
         { path: 'spec', rules: ['backEndOrRules'] },
         {
-          path: 'spec.defaultBackend.service.name', rules: ['required'], translationKey: 'ingress.defaultBackend.targetService.label'
+          path: 'spec.defaultBackend.service.name', rules: ['defaultBackendNameRequired'], translationKey: 'ingress.defaultBackend.targetService.label'
         },
         {
-          path: 'spec.defaultBackend.service.port.number', rules: ['required', 'requiredInt', 'portNumber'], translationKey: 'ingress.defaultBackend.port.label'
+          path: 'spec.defaultBackend.service.port', rules: ['defaultBackendPortRequired', 'portRange'], translationKey: 'ingress.defaultBackend.port.label'
         },
         { path: 'spec.tls.hosts', rules: ['required', 'wildcardHostname'] }
       ],
-      fvReportedValidationPaths: ['spec.rules.http.paths.backend.service.port.number', 'spec.rules.http.paths.path', 'spec.rules.http.paths.backend.service.name']
+      fvReportedValidationPaths: ['spec.rules.http.paths.backend.service.port', 'spec.rules.http.paths.path', 'spec.rules.http.paths.backend.service.name']
     };
   },
 
@@ -125,35 +125,89 @@ export default {
         }
       };
 
-      return { backEndOrRules };
+      const portLabel = this.t('ingress.rules.port.label');
+
+      // Built-in `required` won't work: it passes for empty objects like {} or { name: '' }.
+      const portRequired = (port) => {
+        if (typeof port === 'string' || typeof port === 'number') {
+          if (!port) {
+            return this.t('validation.required', { key: portLabel });
+          }
+        } else if (!port || (!port.number && !port.name)) {
+          return this.t('validation.required', { key: portLabel });
+        }
+      };
+
+      const portRange = (port) => {
+        let num;
+
+        if (typeof port === 'number') {
+          num = port;
+        } else if (typeof port === 'string') {
+          num = Number.parseInt(port);
+        } else if (port?.number) {
+          num = port.number;
+        }
+
+        if (num !== undefined && !Number.isNaN(num) && (num < 1 || num > 65535)) {
+          return this.t('validation.number.between', {
+            key: portLabel, min: '1', max: '65535'
+          });
+        }
+      };
+
+      const hasDefaultBackendService = () => {
+        const backend = get(this.value?.spec, this.value.defaultBackendPath);
+
+        return !!get(backend, this.value.serviceNamePath);
+      };
+
+      const nameLabel = this.t('ingress.defaultBackend.targetService.label');
+
+      // Only enforce required on the default backend when a service is selected.
+      // Selecting "None" means the user wants to remove the backend; willSave() handles cleanup.
+      const defaultBackendNameRequired = (name) => {
+        if (hasDefaultBackendService() && !name) {
+          return this.t('validation.required', { key: nameLabel });
+        }
+      };
+
+      const defaultBackendPortRequired = (port) => {
+        if (!hasDefaultBackendService()) {
+          return;
+        }
+
+        return portRequired(port);
+      };
+
+      return {
+        backEndOrRules,
+        portRequired,
+        portRange,
+        defaultBackendNameRequired,
+        defaultBackendPortRequired,
+      };
     },
     tabErrors() {
       return {
-        rules:          this.fvGetPathErrors(['spec.rules.host', 'spec.rules.http.paths.path', 'spec.rules.http.paths.backend.service.port.number', 'spec.rules.http.paths.backend.service.name'])?.length > 0,
-        defaultBackend: this.fvGetPathErrors(['spec.defaultBackend.service.name', 'spec.defaultBackend.service.port.number'])?.length > 0
+        rules:          this.fvGetPathErrors(['spec.rules.host', 'spec.rules.http.paths.path', 'spec.rules.http.paths.backend.service.port', 'spec.rules.http.paths.backend.service.name'])?.length > 0,
+        defaultBackend: this.fvGetPathErrors(['spec.defaultBackend.service.name', 'spec.defaultBackend.service.port'])?.length > 0
       };
     },
     rulesPathRules() {
       return {
         requestHost: this.fvGetAndReportPathRules('spec.rules.host'),
         path:        this.fvGetAndReportPathRules('spec.rules.http.paths.path'),
-        port:        this.fvGetAndReportPathRules('spec.rules.http.paths.backend.service.port.number'),
+        port:        this.fvGetAndReportPathRules('spec.rules.http.paths.backend.service.port'),
         target:      this.fvGetAndReportPathRules('spec.rules.http.paths.backend.service.name'),
 
       };
     },
     defaultBackendPathRules() {
-      const rulesExist = (this.value?.spec?.rules || []).length > 0;
-      const defaultBackendExist = !!this.value?.spec?.defaultBackend?.service;
-
-      if (!rulesExist || defaultBackendExist) {
-        return {
-          name: this.fvGetAndReportPathRules('spec.defaultBackend.service.name'),
-          port: this.fvGetAndReportPathRules('spec.defaultBackend.service.port.number'),
-        };
-      }
-
-      return { name: [], port: [] };
+      return {
+        name: this.fvGetAndReportPathRules('spec.defaultBackend.service.name'),
+        port: this.fvGetAndReportPathRules('spec.defaultBackend.service.port'),
+      };
     },
     serviceTargets() {
       return this.ingressHelper.findAndMapServiceTargets(this.services);
@@ -188,7 +242,8 @@ export default {
     willSave() {
       const backend = get(this.value.spec, this.value.defaultBackendPath);
       const serviceName = get(backend, this.value.serviceNamePath);
-      const servicePort = get(backend, this.value.servicePortPath);
+      const servicePort = get(backend, this.value.servicePortPath) ||
+        get(backend, this.value.servicePortNamePath);
 
       if (backend && (!serviceName || !servicePort)) {
         const path = this.value.defaultBackendPath;

package/edit/provisioning.cattle.io.cluster/__tests__/MachinePool.test.ts

@@ -0,0 +1,104 @@
+import { shallowMount } from '@vue/test-utils';
+import MachinePool from '@shell/edit/provisioning.cattle.io.cluster/tabs/MachinePool.vue';
+
+const TRANSLATION_KEY = '%cluster.machinePool.name.unique%';
+
+function createPool(name: string, { remove = false } = {}) {
+  return {
+    id:     `pool-${ name }`,
+    remove,
+    create: false,
+    update: true,
+    pool:   {
+      name,
+      etcdRole:         false,
+      controlPlaneRole: false,
+      workerRole:       true,
+      quantity:         1,
+    },
+    config: null,
+  };
+}
+
+function mountMachinePool(currentPool: ReturnType<typeof createPool>, allPools: ReturnType<typeof createPool>[]) {
+  return shallowMount(MachinePool, {
+    props: {
+      value:          currentPool,
+      mode:           'create',
+      provider:       'custom',
+      idx:            0,
+      machinePools:   allPools,
+      poolId:         currentPool.id,
+      poolCreateMode: true,
+    },
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            'i18n/t':                                   (key: string) => key,
+            'i18n/exists':                              () => false,
+            'type-map/hasCustomMachineConfigComponent': () => false,
+            'type-map/importMachineConfig':             () => null,
+            'features/get':                             () => false,
+          },
+          dispatch: jest.fn(),
+        },
+      },
+      stubs: {
+        LabeledInput:    true,
+        Checkbox:        true,
+        Taints:          true,
+        KeyValue:        true,
+        AdvancedSection: true,
+        Banner:          true,
+        UnitInput:       true,
+      },
+    },
+  });
+}
+
+describe('component: MachinePool', () => {
+  describe('uniquePoolName validation', () => {
+    it('should return undefined when the name is empty', () => {
+      const pool = createPool('');
+      const wrapper = mountMachinePool(pool, [pool]);
+
+      expect(wrapper.vm.fvExtraRules.uniquePoolName('')).toBeUndefined();
+    });
+
+    it('should return undefined when the pool name is unique', () => {
+      const pool1 = createPool('pool1');
+      const pool2 = createPool('pool2');
+      const wrapper = mountMachinePool(pool1, [pool1, pool2]);
+
+      expect(wrapper.vm.fvExtraRules.uniquePoolName('pool1')).toBeUndefined();
+    });
+
+    it('should return an error message when the pool name is duplicated', () => {
+      const pool1 = createPool('same-name');
+      const pool2 = createPool('same-name');
+      const wrapper = mountMachinePool(pool1, [pool1, pool2]);
+
+      expect(wrapper.vm.fvExtraRules.uniquePoolName('same-name')).toStrictEqual(TRANSLATION_KEY);
+    });
+
+    it('should ignore pools marked for removal', () => {
+      const pool1 = createPool('same-name');
+      const pool2 = createPool('same-name', { remove: true });
+      const wrapper = mountMachinePool(pool1, [pool1, pool2]);
+
+      expect(wrapper.vm.fvExtraRules.uniquePoolName('same-name')).toBeUndefined();
+    });
+
+    it.each([
+      ['Pool1', 'pool1'],
+      ['POOL', 'pool'],
+    ])('should flag names that differ only by case as duplicates (%s vs %s)', (nameA, nameB) => {
+      const pool1 = createPool(nameA);
+      const pool2 = createPool(nameB);
+      const wrapper = mountMachinePool(pool1, [pool1, pool2]);
+
+      expect(wrapper.vm.fvExtraRules.uniquePoolName(nameA)).toStrictEqual(TRANSLATION_KEY);
+    });
+  });
+});

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

@@ -5,7 +5,7 @@ import { Banner } from '@components/Banner';
 import CruResource from '@shell/components/CruResource';
 import SelectIconGrid from '@shell/components/SelectIconGrid';
 import {
-  CHART, FROM_CLUSTER, SUB_TYPE, RKE_TYPE, _EDIT, _IMPORT, _CONFIG, _VIEW
+  CHART, FROM_CLUSTER, SUB_TYPE, RKE_TYPE, _EDIT, _IMPORT, _CONFIG, _VIEW, _CREATE
 } from '@shell/config/query-params';
 import { mapGetters } from 'vuex';
 import { sortBy } from '@shell/utils/sort';
@@ -80,16 +80,20 @@ export default {
   },
 
   async fetch() {
-    const hash = {
-      // These aren't explicitly used, but need to be listening for change events
-      mgmtClusters: this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
-      provClusters: this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
-    };
+    const hash = {};
+
+    if (this.mode === _CREATE) {
+      // After we create we wait for these to exist, so start watching
+      await this.$store.dispatch('management/watch', { type: MANAGEMENT.CLUSTER, registerType: true });
+      await this.$store.dispatch('management/watch', { type: CAPI.RANCHER_CLUSTER, registerType: true });
+    } else {
+      hash.mgmtClusters = this.value.waitForMgmt();
+    }
 
     // No need to fetch charts when editing an RKE1 cluster
     // The computed property `isRke1` in this file is based on the RKE1/RKE2 toggle, which is not applicable in this case
     // Instead, we should rely on the value from the model: `this.value.isRke1`
-    if (!this.value.isRke1 || (this.value.isRke1 && this.mode !== 'edit')) {
+    if (!this.value.isRke1 || (this.value.isRke1 && this.mode !== _EDIT)) {
       hash['catalog'] = this.$store.dispatch('catalog/load');
     }
 

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

@@ -94,8 +94,8 @@ const NODE_TOTAL = {
 };
 const CLUSTER_AGENT_CUSTOMIZATION = 'clusterAgentDeploymentCustomization';
 const FLEET_AGENT_CUSTOMIZATION = 'fleetAgentDeploymentCustomization';
-
 const REGISTRIES_TAB_NAME = 'registry';
+const INIT_HOOKS = '_initHooks';
 
 const isAzureK8sUnsupported = (version) => semver.gte(version, '1.30.0');
 
@@ -174,7 +174,7 @@ export default {
     Object.entries(this.chartValues).forEach(([name, value]) => {
       const key = this.chartVersionKey(name);
 
-      this.set(this.userChartValues, key, value);
+      this.userChartValues[key] = value;
     });
     this.setAgentConfiguration();
   },
@@ -274,6 +274,7 @@ export default {
       truncateLimit:                            this.value.defaultHostnameLengthLimit || 0,
       busy:                                     false,
       machinePoolValidation:                    {}, // map of validation states for each machine pool
+      infrastructureClusterValid:               true,
       machinePoolErrors:                        {},
       addonConfigValidation:                    {}, // validation state of each addon config (boolean of whether codemirror's yaml lint passed)
       stackPreferenceError:                     false, //  spec.networking.stackPreference is validated in conjunction with hasOnlyIpv6Pools
@@ -298,7 +299,9 @@ export default {
       isEmpty,
       AGENT_CONFIGURATION_TYPES,
       basicsValid:                              true,
+      registryConfigValid:                      true,
       originalIngressController:                this.value.spec.rkeConfig.machineGlobalConfig?.[INGRESS_CONTROLLER] || INGRESS_NONE,
+      infrastructureCluster:                    null,
     };
   },
 
@@ -328,6 +331,14 @@ export default {
       return this.provider === ELEMENTAL_CLUSTER_PROVIDER || this.value?.machineProvider?.toLowerCase() === KIND.MACHINE_INV_SELECTOR_TEMPLATES.toLowerCase();
     },
 
+    isUpstreamCAPIProvider() {
+      if (this.extensionProvider?.isUpstreamCAPIProvider !== undefined) {
+        return !!this.extensionProvider.isUpstreamCAPIProvider;
+      }
+
+      return false;
+    },
+
     chartValues() {
       return this.value.spec.rkeConfig.chartValues;
     },
@@ -547,7 +558,7 @@ export default {
           getters:    this.$store.getters,
           axios:      this.$store.$axios,
           $extension: this.$store.app.$extension,
-          $t:         this.t,
+          t:          (...args) => this.t.apply(this, args),
           isCreate:   this.isCreate
         });
       }
@@ -825,6 +836,10 @@ export default {
       return null;
     },
 
+    extensionInfrastructureSection() {
+      return this.extensionProvider?.extensionInfrastructureSection || null;
+    },
+
     showForm() {
       return !!this.credentialId || !this.needCredential;
     },
@@ -878,7 +893,9 @@ export default {
 
       const hasAddonConfigErrors = Object.values(this.addonConfigValidation).filter((v) => v === false).length > 0;
 
-      return validRequiredPools && base && !hasAddonConfigErrors && !this.stackPreferenceError;
+      const hasInfrastructureClusterError = this.isUpstreamCAPIProvider ? !this.infrastructureClusterValid : false;
+
+      return validRequiredPools && base && !hasAddonConfigErrors && !hasInfrastructureClusterError && !this.stackPreferenceError;
     },
 
     currentCluster() {
@@ -906,7 +923,8 @@ export default {
       return this.validationPassed &&
             this.fvFormIsValid &&
             this.etcdConfigValid &&
-            this.basicsValid;
+            this.basicsValid &&
+            this.registryConfigValid;
     },
     nginxSupported() {
       if (this.serverArgs?.disable?.options.includes(RKE2_INGRESS_NGINX)) {
@@ -1013,6 +1031,11 @@ export default {
   },
 
   created() {
+    // Hooks to be run when cluster is getting initialized
+    if (this.extensionProvider?.registerInitHooks) {
+      this.extensionProvider.registerInitHooks(this.registerHook.bind(this, INIT_HOOKS), this.value);
+    }
+    // Other hooks to be run before/after saving the cluster
     this.registerBeforeHook(this.showIpv6Warning, 'show-ipv6-warning', 1);
     this.registerBeforeHook(this.saveMachinePools, 'save-machine-pools', 2);
     this.registerBeforeHook(this.setRegistryConfig, 'set-registry-config');
@@ -1031,6 +1054,21 @@ export default {
   methods: {
     set,
 
+    updateExtensionInfrastructureSection(neu) {
+      if (!neu || typeof neu !== 'object') {
+        return;
+      }
+
+      if (!this.infrastructureCluster || typeof this.infrastructureCluster !== 'object') {
+        this.infrastructureCluster = neu;
+
+        return;
+      }
+
+      // Preserve the original resource model instance while applying extension updates.
+      mergeWithReplace(this.infrastructureCluster, neu, { mutateOriginal: true });
+    },
+
     async handleVsphereCpiSecret() {
       return VsphereUtils.handleVsphereCpiSecret(this);
     },
@@ -1054,8 +1092,8 @@ export default {
       if (!this.value.spec.machineSelectorConfig.find((x) => !x.machineLabelSelector)) {
         this.value.spec.machineSelectorConfig.unshift({ config: {} });
       }
-
-      if (this.value.spec.cloudCredentialSecretName) {
+      // TODO handle upstream capi once credentials part is clear
+      if (this.value.spec.cloudCredentialSecretName ) {
         await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
         this.credentialId = `${ this.value.spec.cloudCredentialSecretName }`;
       }
@@ -1104,6 +1142,9 @@ export default {
       if ( isEmpty(this.value?.spec?.localClusterAuthEndpoint) ) {
         set(this.value, 'spec.localClusterAuthEndpoint', { enabled: false });
       }
+
+      await this.applyHooks(INIT_HOOKS, this.value);
+      this.localValue = this.value;
     },
 
     /**
@@ -1279,6 +1320,10 @@ export default {
 
           if (this.isElementalCluster) {
             type = ELEMENTAL_SCHEMA_IDS.MACHINE_INV_SELECTOR_TEMPLATES;
+          } else if (this.isUpstreamCAPIProvider && pool.machineConfigRef?.apiVersion) {
+            const [group] = (pool.machineConfigRef.apiVersion || '').split('/');
+
+            type = `${ group }.${ pool.machineConfigRef.kind.toLowerCase() }`;
           } else {
             type = `${ CAPI.MACHINE_CONFIG_GROUP }.${ pool.machineConfigRef.kind.toLowerCase() }`;
           }
@@ -1384,10 +1429,20 @@ export default {
         pool.pool.machineOS = 'linux';
       }
 
-      if (this.isElementalCluster) {
+      if (this.isElementalCluster && this.machineConfigSchema?.attributes) {
         pool.pool.machineConfigRef.apiVersion = `${ this.machineConfigSchema.attributes.group }/${ this.machineConfigSchema.attributes.version }`;
       }
 
+      // Upstream CAPI MachineTemplate resources are referenced by full apiVersion so that
+      // initMachinePools can resolve the correct management store type on subsequent loads.
+      if (this.isUpstreamCAPIProvider && this.machineConfigSchema?.attributes) {
+        const { group, version } = this.machineConfigSchema.attributes;
+
+        if (group && version) {
+          pool.pool.machineConfigRef.apiVersion = `${ group }/${ version }`;
+        }
+      }
+
       this.machinePools.push(pool);
 
       this.$nextTick(() => {
@@ -1536,6 +1591,10 @@ export default {
     },
 
     async cleanupMachinePools() {
+      // Allow the extension provider to handle its own resource cleanup
+      if (this.extensionProvider?.cleanupMachinePools) {
+        return await this.extensionProvider.cleanupMachinePools(this.machinePools);
+      }
       for (const entry of this.machinePools) {
         if (entry.remove && entry.config) {
           try {
@@ -2347,7 +2406,8 @@ export default {
       if (this.errors) {
         clear(this.errors);
       }
-      if (this.value.cloudProvider === 'aws') {
+
+      if ( this.value.cloudProvider === 'aws') {
         const missingProfileName = this.machinePools.some((mp) => !mp.config.iamInstanceProfile);
 
         if (missingProfileName) {
@@ -2356,7 +2416,7 @@ export default {
       }
 
       for (const [index] of this.machinePools.entries()) { // validator machine config
-        if (typeof this.$refs.pool[index]?.test === 'function') {
+        if (typeof this.$refs.pool?.[index]?.test === 'function') {
           try {
             const res = await this.$refs.pool[index].test();
 
@@ -2473,7 +2533,22 @@ export default {
         >
           {{ appsOSWarning }}
         </Banner>
-
+        <div class="span-12">
+          <component
+            :is="extensionInfrastructureSection"
+            v-if="extensionInfrastructureSection"
+            :value="infrastructureCluster"
+            :mode="mode"
+            :provider="provider"
+            :credential-id="credentialId"
+            :provisioning-cluster="value"
+            data-testid="extension-top-section"
+            class="span-12"
+            @update:value="updateExtensionInfrastructureSection"
+            @error="e => errors.push(e)"
+            @validationChanged="(val) => infrastructureClusterValid = val"
+          />
+        </div>
         <!-- Pools Extras -->
         <template v-if="hasMachinePools">
           <div class="clearfix">
@@ -2507,7 +2582,6 @@ export default {
               />
             </div>
           </div>
-
           <!-- Extra Tabs for Machine Pool -->
           <Tabbed
             ref="pools"
@@ -2518,14 +2592,14 @@ export default {
           >
             <template
               v-for="(obj, idx) in machinePools"
-              :key="idx"
+              :key="obj.id"
             >
               <Tab
                 v-if="!obj.remove"
                 :key="obj.id"
                 :weight="-1 * idx"
                 :name="obj.id"
-                :label="obj.pool.name || '(Not Named)'"
+                :label="obj.pool.name || t('cluster.machinePool.name.notNamed')"
                 :show-header="false"
                 :error="!machinePoolValidation[obj.id]"
               >
@@ -2542,6 +2616,8 @@ export default {
                   :busy="busy"
                   :pool-id="obj.id"
                   :pool-create-mode="obj.create"
+                  :infrastructure-cluster="infrastructureCluster"
+                  :hide-advanced="isUpstreamCAPIProvider"
                   @error="handleMachinePoolError"
                   @validationChanged="v => machinePoolValidationChanged(obj.id, v)"
                 />
@@ -2688,6 +2764,7 @@ export default {
           <Tab
             :name="REGISTRIES_TAB_NAME"
             label-key="cluster.tabs.registry"
+            :error="!registryConfigValid"
           >
             <Registries
               v-if="isActiveTabRegistries"
@@ -2703,6 +2780,7 @@ export default {
               @custom-registry-changed="toggleCustomRegistry"
               @registry-host-changed="handleRegistryHostChanged"
               @registry-secret-changed="handleRegistrySecretChanged"
+              @registry-validation-changed="(val) => registryConfigValid = val"
             />
           </Tab>