@rancher/shell 0.3.0 → 0.3.2

package/edit/persistentvolumeclaim.vue

@@ -77,31 +77,7 @@ export default {
     const defaultTab = this.$route.query[FOCUS] || null;
 
     return {
-      secondaryResourceData: {
-        namespace: this.value?.metadata?.namespace || null,
-        data:      {
-          [PV]: {
-            applyTo: [
-              { var: 'persistentVolumes' },
-              {
-                var:         'persistentVolumeOptions',
-                parsingFunc: (data) => {
-                  return data
-                    .map((s) => {
-                      const status = s.status.phase === 'Available' ? '' : ` (${ s.status.phase })`;
-
-                      return {
-                        label: `${ s.metadata.name }${ status }`,
-                        value: s.metadata.name
-                      };
-                    })
-                    .sort((l, r) => l.label.localeCompare(r.label));
-                }
-              }
-            ]
-          },
-        }
-      },
+      secondaryResourceData:   this.secondaryResourceDataConfig(),
       sourceOptions,
       source:                  this.value.spec.volumeName ? sourceOptions[1].value : sourceOptions[0].value,
       immutableMode:           this.realMode === _CREATE ? _CREATE : _VIEW,
@@ -178,6 +154,33 @@ export default {
     }
   },
   methods: {
+    secondaryResourceDataConfig() {
+      return {
+        namespace: this.value?.metadata?.namespace || null,
+        data:      {
+          [PV]: {
+            applyTo: [
+              { var: 'persistentVolumes' },
+              {
+                var:         'persistentVolumeOptions',
+                parsingFunc: (data) => {
+                  return data
+                    .map((s) => {
+                      const status = s.status.phase === 'Available' ? '' : ` (${ s.status.phase })`;
+
+                      return {
+                        label: `${ s.metadata.name }${ status }`,
+                        value: s.metadata.name
+                      };
+                    })
+                    .sort((l, r) => l.label.localeCompare(r.label));
+                }
+              }
+            ]
+          },
+        }
+      };
+    },
     checkboxSetter(key, value) {
       if (value) {
         this.value.spec.accessModes.push(key);
@@ -230,16 +233,16 @@ export default {
       :namespaced="true"
     />
 
-    <ResourceTabs
-      v-model="value"
-      :mode="mode"
-      :side-tabs="true"
-      :default-tab="defaultTab"
+    <ResourceTabs
+      v-model="value"
+      :mode="mode"
+      :side-tabs="true"
+      :default-tab="defaultTab"
     >
-      <Tab
-        name="volumeclaim"
-        :label="t('persistentVolumeClaim.volumeClaim.label')"
-        :weight="4"
+      <Tab
+        name="volumeclaim"
+        :label="t('persistentVolumeClaim.volumeClaim.label')"
+        :weight="4"
       >
         <div class="row">
           <div class="col span-6">
@@ -254,9 +257,9 @@ export default {
           </div>
           <div class="col span-6">
             <div class="row">
-              <div
-                v-if="source === 'new'"
-                class="col span-12"
+              <div
+                v-if="source === 'new'"
+                class="col span-12"
               >
                 <LabeledSelect
                   v-if="canListStorageClasses"
@@ -273,9 +276,9 @@ export default {
                   :tooltip="t('persistentVolumeClaim.volumeClaim.tooltips.noStorageClass')"
                 />
               </div>
-              <div
-                v-else
-                class="col span-12"
+              <div
+                v-else
+                class="col span-12"
               >
                 <LabeledSelect
                   v-if="canListPersistentVolumes"
@@ -308,17 +311,17 @@ export default {
                   :min="1"
                   :required="true"
                 />
-                <Banner
-                  v-if="isEdit && !value.expandable"
-                  color="info"
-                  class="mt-10"
+                <Banner
+                  v-if="isEdit && !value.expandable"
+                  color="info"
+                  class="mt-10"
                 >
                   {{ t('persistentVolumeClaim.expand.notSupported') }}
                 </Banner>
-                <Banner
-                  v-else-if="isEdit && !value.bound"
-                  color="info"
-                  class="mt-10"
+                <Banner
+                  v-else-if="isEdit && !value.bound"
+                  color="info"
+                  class="mt-10"
                 >
                   {{ t('persistentVolumeClaim.expand.notBound') }}
                 </Banner>
@@ -327,42 +330,42 @@ export default {
           </div>
         </div>
       </Tab>
-      <Tab
-        name="customize"
-        :label="t('persistentVolumeClaim.customize.label')"
-        :weight="3"
+      <Tab
+        name="customize"
+        :label="t('persistentVolumeClaim.customize.label')"
+        :weight="3"
       >
         <div class="access">
           <h3>{{ t('persistentVolumeClaim.accessModes') }}</h3>
           <span class="text-error">*</span>
         </div>
-        <div>
-          <Checkbox
-            v-model="readWriteOnce"
-            :label="t('persistentVolumeClaim.customize.accessModes.readWriteOnce')"
-            :mode="immutableMode"
-          />
+        <div>
+          <Checkbox
+            v-model="readWriteOnce"
+            :label="t('persistentVolumeClaim.customize.accessModes.readWriteOnce')"
+            :mode="immutableMode"
+          />
         </div>
-        <div>
-          <Checkbox
-            v-model="readOnlyMany"
-            :label="t('persistentVolumeClaim.customize.accessModes.readOnlyMany')"
-            :mode="immutableMode"
-          />
+        <div>
+          <Checkbox
+            v-model="readOnlyMany"
+            :label="t('persistentVolumeClaim.customize.accessModes.readOnlyMany')"
+            :mode="immutableMode"
+          />
         </div>
-        <div>
-          <Checkbox
-            v-model="readWriteMany"
-            :label="t('persistentVolumeClaim.customize.accessModes.readWriteMany')"
-            :mode="immutableMode"
-          />
+        <div>
+          <Checkbox
+            v-model="readWriteMany"
+            :label="t('persistentVolumeClaim.customize.accessModes.readWriteMany')"
+            :mode="immutableMode"
+          />
         </div>
       </Tab>
-      <Tab
-        v-if="isView"
-        name="status"
-        :label="t('persistentVolumeClaim.status.label')"
-        :weight="2"
+      <Tab
+        v-if="isView"
+        name="status"
+        :label="t('persistentVolumeClaim.status.label')"
+        :weight="2"
       >
         <StatusTable :resource="value" />
       </Tab>

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

@@ -2,7 +2,6 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
 import { _EDIT } from '@shell/config/query-params';
-import { importMachineConfig } from '@shell/utils/dynamic-importer';
 import Taints from '@shell/components/form/Taints.vue';
 import KeyValue from '@shell/components/form/KeyValue.vue';
 import AdvancedSection from '@shell/components/AdvancedSection.vue';
@@ -109,13 +108,11 @@ export default {
 
   computed: {
     configComponent() {
-      const haveProviders = this.$store.getters['plugins/machineDrivers'];
-
-      if ( haveProviders.includes(this.provider) ) {
-        return importMachineConfig(this.provider);
+      if (this.$store.getters['type-map/hasCustomMachineConfigComponent'](this.provider)) {
+        return this.$store.getters['type-map/importMachineConfig'](this.provider);
       }
 
-      return importMachineConfig('generic');
+      return this.$store.getters['type-map/importMachineConfig']('generic');
     },
 
     isWindows() {
@@ -155,6 +152,12 @@ export default {
 
         return errors;
       }
+    },
+    // handle emitted matched machine inventories on selector so that machine count
+    // on machine pool can be kept up to date
+    // (only used on Elemental because it comes from "machineinventoryselectortemplate" machine-config)
+    updateMachineCount(val) {
+      this.value.pool.quantity = val || 1;
     }
   }
 };
@@ -208,7 +211,7 @@ export default {
     <hr class="mt-10">
     <component
       :is="configComponent"
-      v-if="value.config"
+      v-if="value.config && configComponent"
       ref="configComponent"
       :cluster="cluster"
       :uuid="uuid"
@@ -219,6 +222,7 @@ export default {
       :pool-index="idx"
       :machine-pools="machinePools"
       @error="e=>errors = e"
+      @updateMachineCount="updateMachineCount"
     />
     <Banner
       v-else-if="value.configMissing"

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

@@ -75,6 +75,10 @@ export default {
     window.z = this;
   },
 
+  // created() {
+  //   set(this.value, 'spec.rkeConfig.registries.configs', {});
+  // },
+
   methods: {
     update() {
       const configs = {};
@@ -91,6 +95,7 @@ export default {
       }
 
       set(this.value, 'spec.rkeConfig.registries.configs', configs);
+      this.$emit('updateConfigs', configs);
     },
 
     wrapRegisterBeforeHook(fn, ...args) {
@@ -118,12 +123,16 @@ export default {
         class="icon icon-info"
       />
     </h3>
+    <p class="mb-20">
+      {{ t('registryConfig.description') }}
+    </p>
     <ArrayListGrouped
       v-model="entries"
       :add-label="t('registryConfig.addLabel')"
       :default-add-value="defaultAddValue"
+      :initial-empty-row="true"
       :mode="mode"
-      @input="update()"
+      @input="update"
     >
       <template #default="{row}">
         <div class="row">

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

@@ -1,9 +1,13 @@
 <script>
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import KeyValue from '@shell/components/form/KeyValue';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import { set } from '@shell/utils/object';
 
 export default {
-  components: { KeyValue },
+  components: {
+    ArrayListGrouped, KeyValue, LabeledInput
+  },
 
   props: {
     mode: {
@@ -25,12 +29,29 @@ export default {
       entries.push({
         hostname,
         endpoints: (mirrorMap[hostname].endpoint || []).join(', '),
+        rewrite:   mirrorMap[hostname].rewrite || {},
       });
     }
 
     return { entries };
   },
 
+  created() {
+    if (!this.value.spec.rkeConfig?.registries?.mirrors) {
+      set(this.value, 'spec.rkeConfig.registries.mirrors', {});
+    }
+  },
+
+  computed: {
+    defaultAddValue() {
+      return {
+        hostname:  '',
+        endpoints: '',
+        rewrite:   {}
+      };
+    },
+  },
+
   methods: {
     update(entries) {
       const mirrors = {};
@@ -41,8 +62,10 @@ export default {
         }
 
         mirrors[entry.hostname] = { endpoint: entry.endpoints.split(/\s*,\s*/).map(x => x.trim()) };
+        if (entry.rewrite) {
+          mirrors[entry.hostname].rewrite = entry.rewrite;
+        }
       }
-
       set(this.value, 'spec.rkeConfig.registries.mirrors', mirrors);
     },
   }
@@ -50,29 +73,66 @@ export default {
 </script>
 
 <template>
-  <KeyValue
-    key="labels"
-    :value="entries"
-    :as-map="false"
-    key-label="Registry Hostname"
-    key-name="hostname"
-    key-placeholder="e.g. docker.io or *"
-    value-label="Mirror Endpoints"
-    value-placeholder="e.g. a.registry.com:5000, b.registry.com:5000"
-    value-name="endpoints"
-    :add-label="t('registryMirror.addLabel')"
-    :mode="mode"
-    :read-allowed="false"
-    @input="update"
-  >
-    <template #title>
-      <h3>
-        {{ t('registryMirror.header') }}
-        <i
-          v-tooltip="t('registryMirror.toolTip')"
-          class="icon icon-info"
-        />
-      </h3>
-    </template>
-  </KeyValue>
+  <div>
+    <h3>
+      {{ t('registryMirror.header') }}
+      <i
+        v-tooltip="t('registryMirror.toolTip')"
+        class="icon icon-info"
+      />
+    </h3>
+    <p class="mb-20">
+      {{ t('registryMirror.description') }}
+    </p>
+    <ArrayListGrouped
+      v-model="entries"
+      :add-label="t('registryMirror.addLabel')"
+      :default-add-value="defaultAddValue"
+      :initial-empty-row="true"
+      :mode="mode"
+      @input="update"
+    >
+      <template #default="{row}">
+        <div class="row">
+          <div class="col span-6">
+            <LabeledInput
+              v-model="row.value.hostname"
+              :label="t('registryMirror.hostnameLabel')"
+              :placeholder="t('registryMirror.hostnamePlaceholder')"
+              :mode="mode"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model="row.value.endpoints"
+              :label="t('registryMirror.endpointsLabel')"
+              :placeholder="t('registryMirror.endpointsPlaceholder')"
+              :mode="mode"
+            />
+          </div>
+        </div>
+        <div class="row mt-20">
+          <div class="col span-12">
+            <h3>
+              {{ t('registryMirrorRewrite.header') }}
+              <i
+                v-tooltip="t('registryMirrorRewrite.toolTip')"
+                class="icon icon-info"
+              />
+            </h3>
+            <KeyValue
+              v-model="row.value.rewrite"
+              :mode="mode"
+              :add-label="t('registryMirrorRewrite.addLabel')"
+              :read-allowed="false"
+              :key-label="t('registryMirrorRewrite.keyLabel')"
+              :key-placeholder="t('registryMirrorRewrite.keyPlaceholder')"
+              :value-label="t('registryMirrorRewrite.valueLabel')"
+              :value-placeholder="t('registryMirrorRewrite.valuePlaceholder')"
+            />
+          </div>
+        </div>
+      </template>
+    </ArrayListGrouped>
+  </div>
 </template>

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

@@ -6,7 +6,6 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { Banner } from '@components/Banner';
-import { importCloudCredential } from '@shell/utils/dynamic-importer';
 import { CAPI } from '@shell/config/labels-annotations';
 import { clear } from '@shell/utils/array';
 
@@ -132,13 +131,11 @@ export default {
     },
 
     createComponent() {
-      const haveDrivers = this.$store.getters['plugins/credentialDrivers'];
-
-      if ( haveDrivers.includes(this.driverName) ) {
-        return importCloudCredential(this.driverName);
+      if (this.$store.getters['type-map/hasCustomCloudCredentialComponent'](this.driverName)) {
+        return this.$store.getters['type-map/importCloudCredential'](this.driverName);
       }
 
-      return importCloudCredential('generic');
+      return this.$store.getters['type-map/importCloudCredential']('generic');
     },
 
     validationPassed() {

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

@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils';
+import rke2 from '@shell/edit/provisioning.cattle.io.cluster/rke2.vue';
+
+describe('component: rke2', () => {
+  it.each([
+    'v1.25.0+rke2r1',
+    'v1.24.0+rke2r1',
+    'v1.23.0+rke2r1',
+    'v1.25.0+k3s1',
+    'v1.24.0+k3s1',
+    'v1.23.0+k3s1',
+  ])('should display PSA option', () => {
+    const label = 'whatever';
+    const option = { label, value: label };
+    const wrapper = mount(rke2, {
+      propsData: {
+        mode:  'create',
+        value: {
+          spec: {
+            rkeConfig:                                            { etcd: { disableSnapshots: false } },
+            chartValues:                                          {},
+            defaultPodSecurityAdmissionConfigurationTemplateName: label,
+            kubernetesVersion:                                    'v1.25.0+rke2r1'
+          }
+        },
+        provider: 'whatever',
+        resource: {}
+      },
+      computed: {
+        showForm() {
+          return true;
+        },
+        hasMachinePools() {
+          return false;
+        },
+        showk8s21LegacyWarning() {
+          return false;
+        },
+      },
+      mocks: {
+        $fetchState: { pending: false },
+        $route:      {
+          name:  'anything',
+          query: { AS: 'yaml' },
+        },
+        $store: {
+          getters: {
+            currentStore:           () => 'current_store',
+            'management/schemaFor': jest.fn(),
+            'current_store/all':    jest.fn(),
+            'i18n/t':               jest.fn(),
+            'i18n/withFallback':    jest.fn(),
+          },
+          dispatch: {
+            'management/find':    jest.fn(),
+            'management/findAll': () => ([option]),
+          }
+        },
+      },
+      stubs: {
+        CruResource:              { template: '<div><slot></slot></div>' }, // Required to render the slot content
+        Banner:                   true,
+        LabeledSelect:            true,
+        ACE:                      true,
+        AgentEnv:                 true,
+        ArrayList:                true,
+        ArrayListGrouped:         true,
+        BadgeState:               true,
+        Checkbox:                 true,
+        ClusterMembershipEditor:  true,
+        DrainOptions:             true,
+        LabeledInput:             true,
+        Labels:                   true,
+        Loading:                  true,
+        MachinePool:              true,
+        MatchExpressions:         true,
+        NameNsDescription:        true,
+        Questions:                true,
+        RadioGroup:               true,
+        RegistryConfigs:          true,
+        RegistryMirrors:          true,
+        S3Config:                 true,
+        SelectCredential:         true,
+        SelectOrCreateAuthSecret: true,
+        Tab:                      true,
+        Tabbed:                   true,
+        UnitInput:                true,
+        YamlEditor:               true,
+      }
+    });
+
+    const select = wrapper.find('[data-testid="rke2-custom-edit-psa"]');
+
+    expect((select.vm as unknown as any).options[0].label).toBe(`${ label } (Current)`);
+  });
+});

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

@@ -10,7 +10,7 @@ import { CAPI, HCI } from '@shell/config/types';
 import ClusterMembershipEditor from '@shell/components/form/Members/ClusterMembershipEditor';
 import { Banner } from '@components/Banner';
 import { canViewClusterMembershipEditor } from '@shell/components/form/Members/ClusterMembershipEditor.vue';
-import { NAME as HARVESTER_MANAGER } from '@shell/config/product/harvester-manager';
+import { NAME as HARVESTER_MANAGER } from '@/pkg/harvester-manager/config/harvester-manager';
 import { HARVESTER as HARVESTER_FEATURE, mapFeature } from '@shell/store/features';
 import { addObject } from '@shell/utils/array';
 import { HIDE_DESC, mapPref } from '@shell/store/prefs';

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

@@ -18,6 +18,7 @@ import { CAPI, MANAGEMENT, DEFAULT_WORKSPACE } from '@shell/config/types';
 import { mapFeature, RKE2 as RKE2_FEATURE } from '@shell/store/features';
 import { allHash } from '@shell/utils/promise';
 import { BLANK_CLUSTER } from '@shell/store';
+import { ELEMENTAL_PRODUCT_NAME, ELEMENTAL_CLUSTER_PROVIDER } from '../../config/elemental-types';
 import Rke2Config from './rke2';
 import Import from './import';
 
@@ -32,7 +33,7 @@ const SORT_GROUPS = {
   custom2:   5,
 };
 
-// uSed to proxy stylesheets for custom drviers that provide custom UI (RKE1)
+// uSed to proxy stylesheets for custom drivers that provide custom UI (RKE1)
 const PROXY_ENDPOINT = '/meta/proxy';
 
 export default {
@@ -157,6 +158,7 @@ export default {
 
   computed: {
     ...mapGetters({ allCharts: 'catalog/charts' }),
+    ...mapGetters('type-map', ['activeProducts']),
     preferredProvisioner: mapPref(PROVISIONER),
     _RKE1:                () => _RKE1,
     _RKE2:                () => _RKE2,
@@ -205,10 +207,6 @@ export default {
 
     rke2Enabled: mapFeature(RKE2_FEATURE),
 
-    showRkeToggle() {
-      return this.rke2Enabled && !this.isImport;
-    },
-
     provisioner: {
       get() {
         // This can incorrectly return rke1 instead
@@ -246,6 +244,7 @@ export default {
     subTypes() {
       const getters = this.$store.getters;
       const isImport = this.isImport;
+      const isElementalActive = !!this.activeProducts.find(item => item.name === ELEMENTAL_PRODUCT_NAME);
 
       const out = [];
 
@@ -287,6 +286,10 @@ export default {
           });
 
           addType('custom', 'custom2', false);
+
+          if (isElementalActive) {
+            addType(ELEMENTAL_CLUSTER_PROVIDER, 'custom2', false);
+          }
         }
       }
 
@@ -352,9 +355,29 @@ export default {
 
       return sortBy(Object.values(out), 'sort');
     },
+
+    firstNodeDriverItem() {
+      return this.groupedSubTypes.findIndex(obj => [_RKE1, _RKE2].includes(obj.name));
+    },
+
+    firstCustomClusterItem() {
+      return this.groupedSubTypes.findIndex(obj => ['custom', 'custom1', 'custom2'].includes(obj.name));
+    },
   },
 
   methods: {
+    showRkeToggle(i) {
+      if (this.isImport || !this.rke2Enabled) {
+        return false;
+      }
+
+      if (this.firstNodeDriverItem >= 0) {
+        return i === this.firstNodeDriverItem;
+      }
+
+      return i === this.firstCustomClusterItem;
+    },
+
     loadStylesheet(url, id) {
       if ( !id ) {
         console.error('loadStylesheet called without an id'); // eslint-disable-line no-console
@@ -469,7 +492,7 @@ export default {
       >
         <h4>
           <div
-            v-if="showRkeToggle && [_RKE1,_RKE2].includes(obj.name)"
+            v-if="showRkeToggle(i)"
             class="grouped-type"
           >
             <ToggleSwitch