@rancher/shell 0.3.22 → 0.3.24

package/components/nav/Type.vue

@@ -40,6 +40,10 @@ export default {
     showCount() {
       return typeof this.type.count !== 'undefined';
     },
+
+    namespaceIcon() {
+      return this.type.namespaced;
+    },
   },
 
   methods: {
@@ -102,6 +106,10 @@ export default {
           v-if="showFavorite"
           :resource="type.name"
         />
+        <i
+          v-if="namespaceIcon"
+          class="icon icon-namespace namespaced"
+        />
         {{ type.count }}
       </span>
     </a>
@@ -127,13 +135,16 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  .namespaced {
+    margin-right: 4px;
+  }
+
   .child {
     margin: 0 var(--outline) 0 0;
 
     .label {
       align-items: center;
       grid-area: label;
-      display: flex;
       overflow: hidden;
       text-overflow: ellipsis;
 
@@ -166,6 +177,7 @@ export default {
       text-overflow: ellipsis;
       white-space: nowrap;
       color: var(--body-text);
+      height: 33px;
 
       &:hover {
         background: var(--nav-hover);
@@ -181,26 +193,40 @@ export default {
       grid-area: favorite;
       font-size: 12px;
       position: relative;
+      vertical-align: middle;
+      margin-right: 4px;
     }
 
     .count {
-      grid-area: count;
       font-size: 12px;
-      text-align: right;
       justify-items: center;
       padding-right: 4px;
+      display: flex;
+      align-items: center;
     }
 
     &.nav-type:not(.depth-0) {
       A {
-        font-size: 13px;
-        padding: 5.5px 7px 5.5px 10px;
+        padding-left: 16px;
       }
 
       ::v-deep .label I {
         padding-right: 2px;
       }
     }
+
+    &.nav-type:is(.depth-1) {
+      A {
+        font-size: 13px;
+        padding-left: 23px;
+      }
+    }
+
+    &.nav-type:not(.depth-0):not(.depth-1) {
+      A {
+        padding-left: 14px;
+      }
+    }
   }
 
 </style>

package/creators/pkg/init

@@ -174,8 +174,8 @@ if (addWorkflowFolder) {
   }
 
   const files = [
-    'build-extension.yml',
-    'build-container.yml'
+    'build-extension-catalog.yml',
+    'build-extension-charts.yml'
   ];
 
   files.forEach((fileName) => {

package/edit/fleet.cattle.io.gitrepo.vue

@@ -131,18 +131,18 @@ export default {
     const addRepositorySteps = [stepRepoInfo, stepTargetInfo].sort((a, b) => (b.weight || 0) - (a.weight || 0));
 
     return {
-      allClusters:          [],
-      allClusterGroups:     [],
-      allWorkspaces:        [],
-      tempCachedValues:     {},
-      username:             null,
-      password:             null,
-      publicKey:            null,
-      privateKey:           null,
-      tlsMode:              null,
-      caBundle:             null,
-      targetAdvancedErrors: null,
-      matchingClusters:     null,
+      allClusters:             [],
+      allClusterGroups:        [],
+      allWorkspaces:           [],
+      tempCachedValues:        {},
+      username:                null,
+      password:                null,
+      publicKey:               null,
+      privateKey:              null,
+      tlsMode:                 null,
+      caBundle:                null,
+      targetAdvancedErrors:    null,
+      matchingClusters:        null,
       ref,
       refValue,
       targetMode,
@@ -152,6 +152,7 @@ export default {
       stepRepoInfo,
       stepTargetInfo,
       addRepositorySteps,
+      displayHelmRepoURLRegex: false
     };
   },
 
@@ -261,9 +262,8 @@ export default {
     targetCluster:              'updateTargets',
     targetClusterGroup:         'updateTargets',
     targetAdvanced:             'updateTargets',
-
-    tlsMode:  'updateTls',
-    caBundle: 'updateTls',
+    tlsMode:                    'updateTls',
+    caBundle:                   'updateTls',
 
     workspace(neu) {
       if ( this.isCreate ) {
@@ -289,6 +289,10 @@ export default {
 
     updateCachedAuthVal(val, key) {
       this.tempCachedValues[key] = typeof val === 'string' ? { selected: val } : { ...val };
+
+      if (key === 'helmSecretName') {
+        this.toggleHelmRepoURLRegex(val && val.selected !== AUTH_TYPE._NONE);
+      }
     },
 
     updateAuth(val, key) {
@@ -303,6 +307,14 @@ export default {
       this.updateCachedAuthVal(val, key);
     },
 
+    toggleHelmRepoURLRegex(active) {
+      this.displayHelmRepoURLRegex = active;
+
+      if (!active) {
+        delete this.value.spec?.helmRepoURLRegex;
+      }
+    },
+
     updateTargets() {
       const spec = this.value.spec;
       const mode = this.targetMode;
@@ -583,6 +595,22 @@ export default {
         @inputauthval="updateCachedAuthVal($event, 'helmSecretName')"
       />
 
+      <div
+        v-if="displayHelmRepoURLRegex"
+        class="row mt-20"
+      >
+        <div
+          class="col span-6"
+          data-testid="gitrepo-helm-repo-url-regex"
+        >
+          <LabeledInput
+            v-model="value.spec.helmRepoURLRegex"
+            :mode="mode"
+            label-key="fleet.gitRepo.helmRepoURLRegex"
+          />
+        </div>
+      </div>
+
       <template v-if="isTls">
         <div class="spacer" />
         <div class="row">

package/edit/logging.banzaicloud.io.output/index.vue

@@ -258,6 +258,13 @@ export default {
   $logo: 60px;
 
 .output {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  .side-tabs {
+    flex: 1;
+  }
   .provider {
     h1 {
       display: inline-block;

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

@@ -8,6 +8,8 @@ import KeyValue from '@shell/components/form/KeyValue';
 import Taints from '@shell/components/form/Taints';
 import { MANAGEMENT } from '@shell/config/types';
 
+import { sanitizeKey, sanitizeIP, sanitizeValue } from '@shell/utils/string';
+
 export default {
   components: {
     Banner, Checkbox, CopyCode, InfoBox, KeyValue, LabeledInput, Taints
@@ -52,7 +54,7 @@ export default {
       this.etcd && out.push('--etcd');
       this.controlPlane && out.push('--controlplane');
       this.worker && out.push('--worker');
-      this.address && out.push(`--address ${ sanitizeValue(this.address) }`);
+      this.address && out.push(`--address ${ sanitizeIP(this.address) }`);
       this.internalAddress && out.push(`--internal-address ${ sanitizeValue(this.internalAddress) }`);
       this.nodeName && out.push(`--node-name ${ sanitizeValue(this.nodeName) }`);
 
@@ -146,13 +148,6 @@ export default {
   },
 };
 
-function sanitizeKey(k) {
-  return (k || '').replace(/[^a-z0-9./_-]/ig, '');
-}
-
-function sanitizeValue(v) {
-  return (v || '').replace(/[^a-z0-9._-]/ig, '');
-}
 </script>
 
 <template>

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

@@ -219,6 +219,13 @@ export default {
       defaultRke2:                     '',
       defaultK3s:                      '',
       s3Backup:                        false,
+      /**
+       * All info related to a specific version of the chart
+       *
+       * This includes chart itself, README and values
+       *
+       * { [chartName:string]: { chart: json, readme: string, values: json } }
+       */
       versionInfo:                     {},
       membershipUpdate:                {},
       showDeprecatedPatchVersions:     false,
@@ -245,6 +252,7 @@ export default {
       busy:                  false,
       machinePoolValidation: {}, // map of validation states for each machine pool
       allNamespaces:         [],
+      initialCloudProvider:  this.value?.agentConfig?.['cloud-provider-name'],
       extensionTabs:         getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.CLUSTER_CREATE_RKE2, this.$route, this),
     };
   },
@@ -548,13 +556,53 @@ export default {
 
       const cur = this.agentConfig['cloud-provider-name'];
 
-      if ( cur && !out.find((x) => x.value === cur) ) {
-        out.unshift({ label: `${ cur } (Current)`, value: cur });
+      if (cur && !out.find((x) => x.value === cur)) {
+        // Localization missing
+        // Look up cur in the localization file
+        const label = this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ cur }".label`, null, cur);
+
+        out.unshift({
+          label:       `${ label } (Current)`,
+          value:       cur,
+          unsupported: true,
+          disabled:    true
+        });
+      }
+
+      const initial = this.initialCloudProvider;
+
+      if (cur !== initial && initial && !out.find((x) => x.value === initial)) {
+        const label = this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ initial }".label`, null, initial);
+
+        out.unshift({
+          label:       `${ label } (Current)`,
+          value:       initial,
+          unsupported: true,
+          disabled:    true
+        });
       }
 
       return out;
     },
 
+    unsupportedCloudProvider() {
+      // The current cloud provider
+      const cur = this.initialCloudProvider;
+
+      const provider = cur && this.cloudProviderOptions.find((x) => x.value === cur);
+
+      return !!provider?.unsupported;
+    },
+
+    canNotEditCloudProvider() {
+      const canNotEdit = this.clusterIsAlreadyCreated && !this.unsupportedCloudProvider;
+
+      return canNotEdit;
+    },
+
+    /**
+     * Kube Version
+     */
     selectedVersion() {
       const str = this.value.spec.kubernetesVersion;
 
@@ -579,6 +627,11 @@ export default {
       return this.selectedVersion?.agentArgs || {};
     },
 
+    /**
+     * The addons (kube charts) applicable for the selected kube version
+     *
+     * { [chartName:string]: { repo: string, version: string } }
+     */
     chartVersions() {
       return this.selectedVersion?.charts || {};
     },
@@ -788,6 +841,9 @@ export default {
       return this.agentArgs['cloud-provider-name'];
     },
 
+    /**
+     * The chart names of the addons applicable to the current kube version and selected cloud provider
+     */
     addonNames() {
       const names = [];
       const cni = this.serverConfig.cni;
@@ -811,8 +867,13 @@ export default {
       return names;
     },
 
+    /**
+     * The charts of the addons applicable to the current kube version and selected cloud provider
+     *
+     * These are the charts themselves and do not include chart readme or values
+     */
     addonVersions() {
-      const versions = this.addonNames.map((name) => this.chartVersionFor(name));
+      const versions = this.addonNames.map((name) => this.versionInfo[name]?.chart);
 
       return versions.filter((x) => !!x);
     },
@@ -1723,41 +1784,37 @@ export default {
       });
     },
 
-    chartVersionFor(chartName) {
-      const entry = this.chartVersions[chartName];
-
-      if ( !entry ) {
-        return null;
-      }
-
-      const out = this.$store.getters['catalog/version']({
-        repoType:    'cluster',
-        repoName:    entry.repo,
-        chartName,
-        versionName: entry.version,
-      });
-
-      return out;
-    },
-
+    /**
+     * Ensure all chart information required to show addons is available
+     *
+     * This basically means
+     * 1) That the full chart relating to the addon is fetched (which includes core chart, readme and values)
+     * 2) We're ready to cache any values the user provides for each addon
+     */
     async initAddons() {
-      for ( const v of this.addonVersions ) {
-        if ( this.versionInfo[v.name] ) {
+      for ( const chartName of this.addonNames ) {
+        const entry = this.chartVersions[chartName];
+
+        if ( this.versionInfo[chartName] ) {
           continue;
         }
 
-        const res = await this.$store.dispatch('catalog/getVersionInfo', {
-          repoType:    'cluster',
-          repoName:    v.repoName,
-          chartName:   v.name,
-          versionName: v.version
-        });
+        try {
+          const res = await this.$store.dispatch('catalog/getVersionInfo', {
+            repoType:    'cluster',
+            repoName:    entry.repo,
+            chartName,
+            versionName: entry.version,
+          });
 
-        set(this.versionInfo, v.name, res);
-        const key = this.chartVersionKey(v.name);
+          set(this.versionInfo, chartName, res);
+          const key = this.chartVersionKey(chartName);
 
-        if (!this.userChartValues[key]) {
-          this.userChartValues[key] = {};
+          if (!this.userChartValues[key]) {
+            this.userChartValues[key] = {};
+          }
+        } catch (e) {
+          console.error(`Failed to fetch or process chart info for ${ chartName }`); // eslint-disable-line no-console
         }
       }
     },
@@ -2226,6 +2283,18 @@ export default {
         if (this.isHarvesterDriver && this.mode === _CREATE && this.isHarvesterIncompatible) {
           this.setHarvesterDefaultCloudProvider();
         }
+
+        // Cloud Provider check
+        // If the cloud provider is unsupported, switch provider to 'external'
+        if (this.unsupportedCloudProvider) {
+          set(this.agentConfig, 'cloud-provider-name', 'external');
+        } else {
+          // Switch the cloud provider back to the initial value
+          // Use changed the Kubernetes version back to a version where the initial cloud provider is valid - so switch back to this one
+          // to undo the change to external that we may have made
+          // Note: Cloud Provider can only be changed on edit when the initial provider is no longer supported
+          set(this.agentConfig, 'cloud-provider-name', this.initialCloudProvider);
+        }
       }
     },
 
@@ -2444,7 +2513,7 @@ export default {
               <LabeledSelect
                 v-model="agentConfig['cloud-provider-name']"
                 :mode="mode"
-                :disabled="clusterIsAlreadyCreated"
+                :disabled="canNotEditCloudProvider"
                 :options="cloudProviderOptions"
                 :label="t('cluster.rke2.cloudProvider.label')"
               />
@@ -2485,6 +2554,12 @@ export default {
             <div class="spacer" />
 
             <div class="col span-12">
+              <Banner
+                v-if="unsupportedCloudProvider"
+                class="error mt-5"
+              >
+                {{ t('cluster.rke2.cloudProvider.unsupported') }}
+              </Banner>
               <h3>
                 {{ t('cluster.rke2.cloudProvider.header') }}
               </h3>

package/edit/resources.cattle.io.backup.vue

@@ -16,6 +16,8 @@ import { allHash } from '@shell/utils/promise';
 import { NAMESPACE, _VIEW } from '@shell/config/query-params';
 import { sortBy } from '@shell/utils/sort';
 import { get } from '@shell/utils/object';
+import { formatEncryptionSecretNames } from '@shell/utils/formatter';
+
 export default {
 
   components: {
@@ -108,7 +110,7 @@ export default {
     },
 
     encryptionSecretNames() {
-      return this.allSecrets.filter((secret) => (secret.data || {})['encryption-provider-config.yaml'] && secret.metadata.namespace === this.chartNamespace && !secret.metadata?.state?.error).map((secret) => secret.metadata.name);
+      return formatEncryptionSecretNames(this.allSecrets, this.chartNamespace);
     },
 
     storageOptions() {

package/edit/resources.cattle.io.restore.vue

@@ -13,6 +13,8 @@ import { SECRET, BACKUP_RESTORE, CATALOG } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { get } from '@shell/utils/object';
 import { _CREATE } from '@shell/config/query-params';
+import { formatEncryptionSecretNames } from '@shell/utils/formatter';
+
 export default {
 
   components: {
@@ -93,7 +95,7 @@ export default {
     },
 
     encryptionSecretNames() {
-      return this.allSecrets.filter((secret) => !!(secret.data || {})['encryption-provider-config.yaml'] && secret.metadata.namespace === this.chartNamespace && !secret.metadata?.state?.error).map((secret) => secret.metadata.name);
+      return formatEncryptionSecretNames(this.allSecrets, this.chartNamespace);
     },
 
     isEncrypted() {

package/edit/workload/storage/ContainerMountPaths.vue

@@ -1,10 +1,12 @@
 <script>
-import ButtonDropdown from '@shell/components/ButtonDropdown';
-import Mount from '@shell/edit/workload/storage/Mount';
+import { clone } from '@shell/utils/object';
 import { _VIEW } from '@shell/config/query-params';
-import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { randomStr } from '@shell/utils/string';
 
+import Mount from '@shell/edit/workload/storage/Mount';
+import ButtonDropdown from '@shell/components/ButtonDropdown';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
+
 export default {
   name:       'ContainerMountPaths',
   components: {
@@ -109,7 +111,7 @@ export default {
       const names = volumeMounts.map(({ name }) => name);
 
       // Extract storage volumes to allow mutation, if matches mount map
-      return this.value.volumes.filter((volume) => names.includes(volume.name));
+      return clone(this.value.volumes.filter((volume) => names.includes(volume.name)));
     },
 
     getSelectedContainerVolumes() {
@@ -118,7 +120,7 @@ export default {
       const names = volumeMounts.map(({ name }) => name);
 
       // Extract storage volumes to allow mutation, if matches mount map
-      return this.value.volumes.filter((volume) => names.includes(volume.name));
+      return clone(this.value.volumes.filter((volume) => names.includes(volume.name)));
     },
 
     /**

package/initialize/App.js

@@ -1,3 +1,5 @@
+// Taken from @nuxt/vue-app/template/App.js
+
 import Vue from 'vue';
 
 import { getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError } from '../utils/nuxt';