@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.5

package/edit/helm.cattle.io.projecthelmchart.vue

@@ -150,6 +150,7 @@ export default {
             tabbed="multiple"
             :target-namespace="value.metadata.namespace"
             :source="selectedNamespaceQuestions"
+            :mode="mode"
           />
         </Tabbed>
       </div>

package/edit/{management.cattle.io.setting.vue → management.cattle.io.setting/index.vue}

@@ -32,13 +32,14 @@ export default {
     const t = this.$store.getters['i18n/t'];
 
     return {
-      setting:        ALLOWED_SETTINGS[this.value.id],
-      description:    t(`advancedSettings.descriptions.${ this.value.id }`),
-      editHelp:       t(`advancedSettings.editHelp.${ this.value.id }`),
-      enumOptions:    [],
-      canReset:       false,
-      errors:         [],
-      fvFormRuleSets: [],
+      setting:             ALLOWED_SETTINGS[this.value.id],
+      description:         t(`advancedSettings.descriptions.${ this.value.id }`),
+      editHelp:            t(`advancedSettings.editHelp.${ this.value.id }`),
+      enumOptions:         [],
+      canReset:            false,
+      errors:              [],
+      fvFormRuleSets:      [],
+      customEditComponent: null
     };
   },
 
@@ -60,6 +61,14 @@ export default {
     if (isServerUrl(this.value.id) && !this.value.default) {
       this.canReset = false;
     }
+
+    let component;
+
+    try {
+      component = require(`@shell/edit/management.cattle.io.setting/${ this.value.id }.vue`).default;
+    } catch {}
+
+    this.customEditComponent = component;
   },
 
   computed: {
@@ -195,8 +204,22 @@ export default {
       :label="err"
       data-testid="setting-error-banner"
     />
-
-    <div class="mt-20">
+    <div
+      v-if="customEditComponent"
+      class="mt-20"
+    >
+      <component
+        :is="customEditComponent"
+        :setting-value="value.value"
+        :default-value="value.default"
+        :rules="fvGetAndReportPathRules('value')"
+        @update:setting-value="value.value=$event"
+      />
+    </div>
+    <div
+      v-else
+      class="mt-20"
+    >
       <div v-if="setting.kind === 'enum'">
         <LabeledSelect
           v-model:value="value.value"

package/edit/management.cattle.io.setting/system-default-registry-pull-secrets.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, toRef } from 'vue';
+import { useStore } from 'vuex';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { SECRET } from '@shell/config/types';
+import { SECRET_TYPES } from '@shell/config/secret';
+
+const AUTH_TYPES = [
+  SECRET_TYPES.DOCKER_JSON,
+  SECRET_TYPES.BASIC,
+  SECRET_TYPES.SSH,
+  SECRET_TYPES.RKE_AUTH_CONFIG
+];
+
+const props = defineProps<{
+  settingValue: Record<string, any>;
+  defaultValue?: Record<string, any>;
+  rules?: Array<(value: any) => string | undefined>;
+}>();
+
+const emit = defineEmits(['update:settingValue']);
+
+const store = useStore();
+const settingValue = toRef(props, 'settingValue');
+const defaultValue = toRef(props, 'defaultValue');
+const secrets = ref<any[]>([]);
+
+const secretOptions = computed(() => secrets.value
+  .filter((s) => AUTH_TYPES.includes(s._type))
+  .map((s) => {
+    const { dataPreview, subTypeDisplay, metadata } = s;
+
+    const label = subTypeDisplay && dataPreview ? `${ metadata.name } (${ subTypeDisplay }: ${ dataPreview })` : `${ metadata.name } (${ subTypeDisplay })`;
+
+    return {
+      label,
+      value: s.metadata?.name
+    };
+  })
+);
+
+const selectedSecrets = computed({
+  get: () => {
+    const sValue = settingValue.value || defaultValue.value || '';
+
+    return sValue.split(',').reduce((all: string[], secret: string) => {
+      if (!!secret.trim()) {
+        all.push(secret.trim());
+      }
+
+      return all;
+    }, []);
+  },
+  set: (neu: string[]) => {
+    const newSettingValue = neu?.length ? neu.join(',') : null;
+
+    emit('update:settingValue', newSettingValue);
+  },
+});
+
+onMounted(async() => {
+  const res = await store.dispatch('management/findAll', {
+    type: SECRET,
+    opt:  { namespaced: 'cattle-system' },
+  });
+
+  secrets.value = Array.isArray(res) ? res : [];
+});
+
+</script>
+
+<template>
+  <LabeledSelect
+    id="pull-secrets"
+    v-model:value="selectedSecrets"
+    label="Image Pull Secrets"
+    :options="secretOptions"
+    :rules="rules"
+    :multiple="true"
+  />
+</template>

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/provisioning.cattle.io.cluster/SelectCredential.vue

@@ -1,7 +1,7 @@
 <script>
 import Loading from '@shell/components/Loading';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { NORMAN, DEFAULT_WORKSPACE } from '@shell/config/types';
+import { NORMAN } from '@shell/config/types';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
@@ -50,11 +50,8 @@ export default {
     const field = this.$store.getters['plugins/credentialFieldForDriver'](this.driverName);
 
     this.newCredential = await this.$store.dispatch('rancher/create', {
-      type:     NORMAN.CLOUD_CREDENTIAL,
-      metadata: {
-        namespace:   DEFAULT_WORKSPACE,
-        annotations: { [CAPI.CREDENTIAL_DRIVER]: this.driverName }
-      },
+      type:                           NORMAN.CLOUD_CREDENTIAL,
+      annotations:                    { [CAPI.CREDENTIAL_DRIVER]: this.driverName },
       [`${ field }credentialConfig`]: {}
     });
 
@@ -216,12 +213,6 @@ export default {
         }
       }
 
-      if ( this.newCredential.metadata.name ) {
-        delete this.newCredential.metadata.generateName;
-      } else {
-        this.newCredential.metadata.generateName = 'cloud-credential-';
-      }
-
       try {
         const res = await this.newCredential.save();
 

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

@@ -806,4 +806,22 @@ describe('component: rke2', () => {
       expect(wrapper.vm.value.spec.rkeConfig.machineGlobalConfig[INGRESS_CONTROLLER]).toBe(INGRESS_NGINX);
     });
   });
+
+  describe('computed: canEditAsYaml', () => {
+    it('should return false when isUpstreamCAPIProvider is true', () => {
+      const vm = { isUpstreamCAPIProvider: true } as any;
+
+      const canEditAsYaml = rke2.computed!.canEditAsYaml.call(vm);
+
+      expect(canEditAsYaml).toBe(false);
+    });
+
+    it('should return true when isUpstreamCAPIProvider is false', () => {
+      const vm = { isUpstreamCAPIProvider: false } as any;
+
+      const canEditAsYaml = rke2.computed!.canEditAsYaml.call(vm);
+
+      expect(canEditAsYaml).toBe(true);
+    });
+  });
 });

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');
 
@@ -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
@@ -300,6 +301,7 @@ export default {
       basicsValid:                              true,
       registryConfigValid:                      true,
       originalIngressController:                this.value.spec.rkeConfig.machineGlobalConfig?.[INGRESS_CONTROLLER] || INGRESS_NONE,
+      infrastructureCluster:                    null,
     };
   },
 
@@ -329,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;
     },
@@ -548,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
         });
       }
@@ -826,6 +836,10 @@ export default {
       return null;
     },
 
+    extensionInfrastructureSection() {
+      return this.extensionProvider?.extensionInfrastructureSection || null;
+    },
+
     showForm() {
       return !!this.credentialId || !this.needCredential;
     },
@@ -879,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() {
@@ -903,6 +919,10 @@ export default {
       return this.needCredential && !this.credentialId;
     },
 
+    canEditAsYaml() {
+      return !(this.isUpstreamCAPIProvider);
+    },
+
     overallFormValidationPassed() {
       return this.validationPassed &&
             this.fvFormIsValid &&
@@ -1015,6 +1035,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');
@@ -1033,6 +1058,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);
     },
@@ -1056,8 +1096,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 }`;
       }
@@ -1082,7 +1122,6 @@ export default {
 
         this.rkeConfig.etcd.disableSnapshots = disableSnapshots;
       }
-
       // Namespaces if required - this is mainly for custom provisioners via extensions that want
       // to allow creating their resources in a different namespace
       if (this.needsNamespace) {
@@ -1106,6 +1145,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;
     },
 
     /**
@@ -1281,6 +1323,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() }`;
           }
@@ -1386,10 +1432,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(() => {
@@ -1538,6 +1594,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 {
@@ -2349,7 +2409,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) {
@@ -2358,7 +2419,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();
 
@@ -2401,6 +2462,7 @@ export default {
     :done-route="doneRoute"
     :apply-hooks="applyHooks"
     :generate-yaml="generateYaml"
+    :can-yaml="canEditAsYaml"
     class="rke2"
     component-testid="rke2-custom-create"
     @done="done"
@@ -2475,7 +2537,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">
@@ -2509,7 +2586,6 @@ export default {
               />
             </div>
           </div>
-
           <!-- Extra Tabs for Machine Pool -->
           <Tabbed
             ref="pools"
@@ -2544,6 +2620,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)"
                 />

package/edit/provisioning.cattle.io.cluster/tabs/MachinePool.vue

@@ -41,6 +41,11 @@ export default {
       default: () => ({})
     },
 
+    infrastructureCluster: {
+      type:    Object,
+      default: () => ({})
+    },
+
     // no credentials are required for elemental machine pools
     credentialId: {
       type:    String,
@@ -86,6 +91,10 @@ export default {
     poolCreateMode: {
       type:     Boolean,
       required: true,
+    },
+    hideAdvanced: {
+      type:    Boolean,
+      default: false
     }
   },
 
@@ -368,6 +377,7 @@ export default {
       v-model:is-ipv6="value.isIpv6"
       v-model:is-dualStack="value.isDualStack"
       :cluster="cluster"
+      :infrastructure-cluster="infrastructureCluster"
       :uuid="uuid"
       :mode="mode"
       :value="value.config"
@@ -396,6 +406,7 @@ export default {
     />
 
     <AdvancedSection
+      v-if="!hideAdvanced"
       ref="advanced"
       :mode="mode"
       class="advanced"

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

@@ -40,7 +40,6 @@ export default {
       type:     Function,
       required: true,
     },
-
   },
 
   computed: {

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

@@ -1,8 +1,6 @@
 <script>
-import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
-import { Checkbox } from '@components/Form/Checkbox';
-import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
+import PrivateRegistry from '@shell/components/form/PrivateRegistry.vue';
 import AdvancedSection from '@shell/components/AdvancedSection.vue';
 import RegistryConfigs from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs';
 import RegistryMirrors from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryMirrors';
@@ -10,10 +8,8 @@ import RegistryMirrors from '@shell/edit/provisioning.cattle.io.cluster/tabs/reg
 export default {
   emits:      ['custom-registry-changed', 'registry-host-changed', 'registry-secret-changed', 'input', 'update-configs-changed', 'registry-validation-changed'],
   components: {
-    LabeledInput,
     Banner,
-    Checkbox,
-    SelectOrCreateAuthSecret,
+    PrivateRegistry,
     AdvancedSection,
     RegistryConfigs,
     RegistryMirrors
@@ -65,55 +61,18 @@ export default {
     <div class="row">
       <h3>{{ t('cluster.privateRegistry.label') }}</h3>
     </div>
-    <div class="row">
-      <div class="col span-12">
-        <Banner
-          :closable="false"
-          class="cluster-tools-tip"
-          color="info"
-          label-key="cluster.privateRegistry.description"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <Checkbox
-        :value="showCustomRegistryInput"
-        :mode="mode"
-        :label="t('cluster.privateRegistry.label')"
-        data-testid="registries-enable-checkbox"
-        @update:value="$emit('custom-registry-changed', $event)"
-      />
-    </div>
-    <div
-      v-if="showCustomRegistryInput"
-      class="row mt-20"
-    >
-      <div class="col span-6">
-        <LabeledInput
-          :value="registryHost"
-          :mode="mode"
-          label-key="catalog.chart.registry.custom.inputLabel"
-          placeholder-key="catalog.chart.registry.custom.placeholder"
-          :min-height="30"
-          data-testid="registry-host-input"
-          @update:value="$emit('registry-host-changed', $event)"
-        />
-        <SelectOrCreateAuthSecret
-          :value="registrySecret"
-          :register-before-hook="registerBeforeHook"
-          :hook-priority="1"
-          :mode="mode"
-          in-store="management"
-          :allow-ssh="false"
-          :allow-rke="true"
-          :vertical="true"
-          :namespace="value.metadata.namespace"
-          generate-name="registryconfig-auth-"
-          :cache-secrets="true"
-          @update:value="$emit('registry-secret-changed', $event)"
-        />
-      </div>
-    </div>
+    <PrivateRegistry
+      :value="registryHost"
+      :enabled="showCustomRegistryInput"
+      :mode="mode"
+      :pull-secret="registrySecret"
+      :register-before-hook="registerBeforeHook"
+      checkbox-test-id="registries-enable-checkbox"
+      input-test-id="registry-host-input"
+      @update:value="$emit('registry-host-changed', $event)"
+      @update:enabled="$emit('custom-registry-changed', $event)"
+      @update:pull-secret="$emit('registry-secret-changed', $event)"
+    />
     <div
       class="row"
     >

package/list/group.principal.vue

@@ -9,10 +9,11 @@ import { NAME } from '@shell/config/product/auth';
 import { MODE, _EDIT } from '@shell/config/query-params';
 import { mapState } from 'vuex';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
+import { RcButton } from '@components/RcButton';
 
 export default {
   components: {
-    AsyncButton, ResourceTable, Masthead, Loading
+    AsyncButton, ResourceTable, Masthead, Loading, RcButton
   },
   props: {
     resource: {
@@ -130,13 +131,13 @@ export default {
           :class="{'mr-5': canCreateGlobalRoleBinding}"
           @click="refreshGroupMemberships"
         />
-        <router-link
+        <rc-button
           v-if="canCreateGlobalRoleBinding"
+          size="large"
           :to="assignLocation"
-          class="btn role-primary"
         >
           {{ t("authGroups.actions.assignRoles") }}
-        </router-link>
+        </rc-button>
       </template>
     </Masthead>