@rancher/shell 3.0.9-rc.6 → 3.0.10

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

@@ -19,6 +19,7 @@ interface Props {
   mode?: string;
   value: string | string[];
   nginxSupported: boolean;
+  traefikSupported: boolean;
   nginxChart: string;
   traefikChart: string;
   userChartValues: any;
@@ -30,6 +31,7 @@ const {
   nginxChart,
   traefikChart,
   nginxSupported,
+  traefikSupported,
   userChartValues,
   versionInfo
 } = defineProps<Props>();
@@ -44,6 +46,9 @@ const showAdvanced = ref<Boolean>(false);
 const isView = computed(() => mode === _VIEW);
 const isEdit = computed(() => mode === _EDIT);
 const showTraefikBanner = ref<Boolean>(false);
+const traefikMerged = ref(initYamlEditor(traefikChart));
+const nginxMerged = ref(initYamlEditor(nginxChart));
+const showConfig = computed(() => !!versionInfo[traefikChart] || !!versionInfo[nginxChart]);
 
 const ingressSelection = computed(() => {
   if (Array.isArray(value) ) {
@@ -55,9 +60,21 @@ const ingressSelection = computed(() => {
   }
 });
 const ingressOptions = computed(() => {
-  return INGRESS_OPTIONS.filter((option) => !(option.id === INGRESS_DUAL && mode === _CREATE) &&
-  !((option.id === INGRESS_NGINX || option.id === INGRESS_DUAL) && !nginxSupported)
-  ).map((option) => {
+  return INGRESS_OPTIONS.filter((option) => {
+    if (option.id === INGRESS_NGINX) {
+      return nginxSupported;
+    } else if (option.id === TRAEFIK) {
+      return traefikSupported;
+    } else if (option.id === INGRESS_DUAL) {
+      if (mode === _CREATE) {
+        return false;
+      } else {
+        return traefikSupported && nginxSupported;
+      }
+    }
+
+    return true;
+  }).map((option) => {
     return {
       ...option,
       selected: option.id === ingressSelection.value
@@ -73,7 +90,13 @@ const ingressEnabled = computed({
     if (!val) {
       emit('update:value', INGRESS_NONE);
     } else {
-      emit('update:value', TRAEFIK);
+      if (traefikSupported) {
+        emit('update:value', TRAEFIK);
+      } else if (nginxSupported) {
+        emit('update:value', INGRESS_NGINX);
+      } else {
+        emit('update:value', INGRESS_NONE);
+      }
     }
   }
 });
@@ -102,9 +125,6 @@ function preconfigureTraefik() {
   emit('update-values', traefikChart, traefikMerged.value);
 }
 
-const traefikMerged = ref(initYamlEditor(traefikChart));
-const nginxMerged = ref(initYamlEditor(nginxChart));
-
 const nginxHttp = computed({
   get() {
     return get(nginxMerged.value, 'controller.hostPort.ports.http');
@@ -193,12 +213,14 @@ function updateYaml(component: any, value: any) {
   </div>
   <div v-else>
     <Banner
+      v-if="traefikSupported"
       color="info"
       label-key="cluster.ingress.banners.transitioning.label"
     />
     <IngressCards
       :options="ingressOptions"
       :mode="mode"
+      :class="!traefikSupported ? 'mt-10' : ''"
       @select="selectIngress"
     />
     <Banner
@@ -219,79 +241,81 @@ function updateYaml(component: any, value: any) {
         </template>
       </RichTranslation>
     </Banner>
-    <div class="mt-20">
-      <IngressConfiguration
-        v-model:compatibility-mode="compatibilityMode"
-        v-model:nginxHttp="nginxHttp"
-        v-model:nginxHttps="nginxHttps"
-        v-model:traefikHttp="traefikHttp"
-        v-model:traefikHttps="traefikHttps"
-        :mode="mode"
-        :ingress-selection="ingressSelection"
-        @validation-changed="emit('config-validation-changed', $event)"
-      />
-    </div>
-    <div>
-      <button
-        type="button"
-        class="btn role-link advanced-toggle mb-0"
-        @click="showAdvanced = !showAdvanced"
-      >
-        {{ showAdvanced ? t('cluster.ingress.hideAdvanced') : t('cluster.ingress.showAdvanced') }}
-      </button>
-    </div>
-    <template v-if="showAdvanced">
-      <div class="row">
-        <div
-          v-if="ingressSelection === TRAEFIK || ingressSelection === INGRESS_DUAL"
-          :class="{ 'col': true, 'span-6': ingressSelection === INGRESS_DUAL, 'span-12': ingressSelection !== INGRESS_DUAL }"
+    <div v-if="showConfig">
+      <div class="mt-20">
+        <IngressConfiguration
+          v-model:compatibility-mode="compatibilityMode"
+          v-model:nginxHttp="nginxHttp"
+          v-model:nginxHttps="nginxHttps"
+          v-model:traefikHttp="traefikHttp"
+          v-model:traefikHttps="traefikHttps"
+          :mode="mode"
+          :ingress-selection="ingressSelection"
+          @validation-changed="emit('config-validation-changed', $event)"
+        />
+      </div>
+      <div>
+        <button
+          type="button"
+          class="btn role-link advanced-toggle mb-0"
+          @click="showAdvanced = !showAdvanced"
         >
-          <p
-            v-if="ingressSelection === INGRESS_DUAL"
-            class="mb-10"
+          {{ showAdvanced ? t('cluster.ingress.hideAdvanced') : t('cluster.ingress.showAdvanced') }}
+        </button>
+      </div>
+      <template v-if="showAdvanced">
+        <div class="row">
+          <div
+            v-if="ingressSelection === TRAEFIK || ingressSelection === INGRESS_DUAL"
+            :class="{ 'col': true, 'span-6': ingressSelection === INGRESS_DUAL, 'span-12': ingressSelection !== INGRESS_DUAL }"
           >
-            {{ t('cluster.ingress.traefik.header') }}
-          </p>
-          <YamlEditor
-            ref="traefik-yaml"
-            class="ingress-yaml-editor"
-            data-testid="traefik-yaml-editor"
-            :value="traefikMerged"
-            :mode="mode"
-            :scrolling="true"
-            :as-object="true"
-            :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
-            :hide-preview-buttons="true"
-            @update:value="emit('update-values', traefikChart, $event)"
-            @validationChanged="emit('yaml-validation-changed', {name: traefikChart, val: $event})"
-          />
-        </div>
-        <div
-          v-if="ingressSelection === INGRESS_NGINX || ingressSelection === INGRESS_DUAL"
-          :class="{ 'col': true, 'span-6': ingressSelection === INGRESS_DUAL, 'span-12': ingressSelection !== INGRESS_DUAL }"
-        >
-          <p
-            v-if="ingressSelection === INGRESS_DUAL"
-            class="mb-10"
+            <p
+              v-if="ingressSelection === INGRESS_DUAL"
+              class="mb-10"
+            >
+              {{ t('cluster.ingress.traefik.header') }}
+            </p>
+            <YamlEditor
+              ref="traefik-yaml"
+              class="ingress-yaml-editor"
+              data-testid="traefik-yaml-editor"
+              :value="traefikMerged"
+              :mode="mode"
+              :scrolling="true"
+              :as-object="true"
+              :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
+              :hide-preview-buttons="true"
+              @update:value="emit('update-values', traefikChart, $event)"
+              @validationChanged="emit('yaml-validation-changed', {name: traefikChart, val: $event})"
+            />
+          </div>
+          <div
+            v-if="ingressSelection === INGRESS_NGINX || ingressSelection === INGRESS_DUAL"
+            :class="{ 'col': true, 'span-6': ingressSelection === INGRESS_DUAL, 'span-12': ingressSelection !== INGRESS_DUAL }"
           >
-            {{ t('cluster.ingress.nginx.header') }}
-          </p>
-          <YamlEditor
-            ref="nginx-yaml"
-            class="ingress-yaml-editor"
-            data-testid="ingress-nginx-yaml-editor"
-            :value="nginxMerged"
-            :mode="mode"
-            :scrolling="true"
-            :as-object="true"
-            :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
-            :hide-preview-buttons="true"
-            @update:value="emit('update-values', nginxChart, $event)"
-            @validationChanged="emit('yaml-validation-changed', {name: nginxChart, val: $event})"
-          />
+            <p
+              v-if="ingressSelection === INGRESS_DUAL"
+              class="mb-10"
+            >
+              {{ t('cluster.ingress.nginx.header') }}
+            </p>
+            <YamlEditor
+              ref="nginx-yaml"
+              class="ingress-yaml-editor"
+              data-testid="ingress-nginx-yaml-editor"
+              :value="nginxMerged"
+              :mode="mode"
+              :scrolling="true"
+              :as-object="true"
+              :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
+              :hide-preview-buttons="true"
+              @update:value="emit('update-values', nginxChart, $event)"
+              @validationChanged="emit('yaml-validation-changed', {name: nginxChart, val: $event})"
+            />
+          </div>
         </div>
-      </div>
-    </template>
+      </template>
+    </div>
   </div>
 </template>
 

package/edit/token.vue

@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import day from 'dayjs';
 import sortBy from 'lodash/sortBy';
-import { MANAGEMENT, EXT } from '@shell/config/types';
+import { MANAGEMENT, NORMAN } from '@shell/config/types';
 import { Banner } from '@components/Banner';
 import DetailText from '@shell/components/DetailText';
 import Footer from '@shell/components/form/Footer';
@@ -14,7 +14,6 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import { diffFrom } from '@shell/utils/time';
 import { filterHiddenLocalCluster, filterOnlyKubernetesClusters } from '@shell/utils/cluster';
 import { SETTING } from '@shell/config/settings';
-import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 
 export default {
   components: {
@@ -25,7 +24,6 @@ export default {
     LabeledSelect,
     RadioGroup,
     Select,
-    Checkbox,
   },
 
   mixins: [CreateEditView],
@@ -43,11 +41,7 @@ export default {
 
     return {
       errors: null,
-      user:   null,
       form:   {
-        enabled:           true,
-        description:       '',
-        clusterName:       '',
         expiryType:        'never',
         customExpiry:      0,
         customExpiryUnits: 'minute',
@@ -57,13 +51,11 @@ export default {
       accessKey:  '',
       secretKey:  '',
       maxTTL,
-      ttl:        ''
     };
   },
 
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
-
     scopes() {
       const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
       const kubeClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store);
@@ -79,20 +71,16 @@ export default {
       const options = ['never', 'day', 'month', 'year', 'custom'];
       let opts = options.map((opt) => ({ value: opt, label: this.t(`accountAndKeys.apiKeys.add.expiry.options.${ opt }`) }));
 
-      // When the TTL is greater than 0, present only two options
+      // When the TTL is anything other than 0, present only two options
       // (1) The maximum allowed
       // (2) Custom
-      if (this.maxTTL > 0 ) {
+      if (this.maxTTL !== 0 ) {
         const now = day();
         const expiry = now.add(this.maxTTL, 'minute');
         const max = diffFrom(expiry, now, this.t);
 
         opts = opts.filter((opt) => opt.value === 'custom');
         opts.unshift({ value: 'max', label: this.t('accountAndKeys.apiKeys.add.expiry.options.maximum', { value: max.string }) });
-      } else {
-        // maxTTL <= 0 means there is no maximum, so we can show the 'never' option which results in an infinite TTL
-        // OR if we set a positive TTL, then it assumes that value
-        opts = opts.filter((opt) => opt.value === 'never' || opt.value === 'custom');
       }
 
       return opts;
@@ -103,9 +91,6 @@ export default {
 
       return filtered.map((opt) => ({ value: opt, label: this.t(`accountAndKeys.apiKeys.add.customExpiry.options.${ opt }`) }));
     },
-    hasNeverOption() {
-      return this.expiryOptions?.filter((opt) => opt.value === 'never')?.length === 1;
-    }
   },
 
   mounted() {
@@ -130,33 +115,31 @@ export default {
       });
     },
 
-    async actuallySave() {
-      // update expiration value before save
+    async actuallySave(url) {
       this.updateExpiry();
-
       if ( this.isCreate ) {
-        const steveToken = await this.$store.dispatch('management/create', {
-          type: EXT.TOKEN,
-          spec: {
-            description:   this.form.description,
-            kind:          '',
-            userPrincipal: null, // will be set by the backend to the current user
-            clusterName:   this.form.clusterName,
-            enabled:       this.form.enabled,
-            ttl:           this.ttl
-            // userID: not needed as it will be set by the backend to the current user
-          }
-        });
-
-        const steveTokenSaved = await steveToken.save();
-
-        this.created = steveTokenSaved;
-        this.ttlLimited = this.created?.spec?.ttl !== this.ttl;
-        const token = this.created?.status?.bearerToken?.split(':');
+        // Description is a bit weird, so need to clone and set this
+        // rather than use this.value - need to find a way to set this if we ever
+        // want to allow edit (which I don't think we do)
+        const res = await this.value.save();
+
+        this.created = res;
+        this.ttlLimited = res.ttl !== this.value.ttl;
+        const token = this.created.token.split(':');
 
         this.accessKey = token[0];
         this.secretKey = (token.length > 1) ? token[1] : '';
-        this.token = this.created?.status?.bearerToken;
+        this.token = this.created.token;
+
+        // Force a refresh of the token so we get the expiry date correctly
+        await this.$store.dispatch('rancher/find', {
+          type: NORMAN.TOKEN,
+          id:   res.id,
+          opt:  { force: true }
+        }, { root: true });
+      } else {
+        // Note: update of existing key not supported currently
+        await this.value.save();
       }
     },
 
@@ -176,9 +159,7 @@ export default {
       const units = (v === 'custom') ? this.form.customExpiryUnits : v;
       let ttl = 0;
 
-      if (v === 'never') {
-        ttl = -1;
-      } else if (units === 'max') {
+      if (units === 'max') {
         ttl = this.maxTTL * 60 * 1000;
       } else if ( units !== 'never' ) {
         const now = day();
@@ -186,8 +167,7 @@ export default {
 
         ttl = expiry.diff(now);
       }
-
-      this.ttl = ttl;
+      this.value.ttl = ttl;
     }
   }
 };
@@ -198,7 +178,7 @@ export default {
     <div class="pl-10 pr-10">
       <LabeledInput
         key="description"
-        v-model:value="form.description"
+        v-model:value="value.description"
         :placeholder="t('accountAndKeys.apiKeys.add.description.placeholder')"
         label-key="accountAndKeys.apiKeys.add.description.label"
         mode="edit"
@@ -206,30 +186,13 @@ export default {
       />
 
       <LabeledSelect
-        v-model:value="form.clusterName"
+        v-model:value="value.clusterId"
         class="mt-20 scope-select"
         label-key="accountAndKeys.apiKeys.add.scope"
         :options="scopes"
       />
 
-      <Checkbox
-        v-model:value="form.enabled"
-        class="mt-20 mb-20"
-        :mode="mode"
-        label-key="accountAndKeys.apiKeys.add.enabled"
-      />
-
-      <Banner
-        v-if="hasNeverOption"
-        color="warning"
-        class="mt-20"
-      >
-        <div>
-          {{ t('accountAndKeys.apiKeys.info.expiryOptionsWithNever') }}
-        </div>
-      </Banner>
-
-      <h5 class="mb-20">
+      <h5 class="pt-20">
         {{ t('accountAndKeys.apiKeys.add.expiry.label') }}
       </h5>
 
@@ -241,9 +204,7 @@ export default {
           class="mr-20"
           name="expiryGroup"
         />
-        <div
-          class="ml-20 mt-10 expiry"
-        >
+        <div class="ml-20 mt-10 expiry">
           <input
             v-model="form.customExpiry"
             :disabled="form.expiryType !== 'custom'"

package/list/provisioning.cattle.io.cluster.vue

@@ -300,7 +300,7 @@ export default {
   </div>
 </template>
 
-<stye scoped lang="scss">
+<style scoped lang="scss">
   .capi-unsupported {
     &.has-description {
       border-bottom: none;
@@ -317,4 +317,4 @@ export default {
       display: flex;
     }
   }
-</stye>
+</style>

package/models/__tests__/chart.test.ts

@@ -236,12 +236,12 @@ describe('class Chart', () => {
 
       expect(result.footerItems).toHaveLength(3);
 
-      const categoryItem = result.footerItems.find((i) => i.icon === 'icon-category-alt');
+      const categoryItem = result.footerItems.find((i) => i.icon === 'category-alt');
 
       expect(categoryItem).toBeDefined();
       expect(categoryItem?.labels).toContain('database');
 
-      const tagItem = result.footerItems.find((i) => i.icon === 'icon-tag-alt');
+      const tagItem = result.footerItems.find((i) => i.icon === 'tag-alt');
 
       expect(tagItem).toBeDefined();
       expect(tagItem?.labels).toStrictEqual(expect.arrayContaining(['linux', 'experimentl']));

package/models/chart.js

@@ -164,7 +164,7 @@ export default class Chart extends SteveModel {
     const footerItems = [
       {
         type:         REPO,
-        icon:         'icon-repository-alt',
+        icon:         'repository-alt',
         iconTooltip:  { key: 'tableHeaders.repoName' },
         labels:       [this.repoNameDisplay],
         labelTooltip: this.t('catalog.charts.findSimilar.message', { type: this.t('catalog.charts.findSimilar.types.repo') }, true)
@@ -174,7 +174,7 @@ export default class Chart extends SteveModel {
     if (this.categories.length) {
       footerItems.push( {
         type:         CATEGORY,
-        icon:         'icon-category-alt',
+        icon:         'category-alt',
         iconTooltip:  { key: 'generic.category' },
         labels:       this.categories,
         labelTooltip: this.t('catalog.charts.findSimilar.message', { type: this.t('catalog.charts.findSimilar.types.category') }, true)
@@ -184,7 +184,7 @@ export default class Chart extends SteveModel {
     if (this.tags.length) {
       footerItems.push({
         type:         TAG,
-        icon:         'icon-tag-alt',
+        icon:         'tag-alt',
         iconTooltip:  { key: 'generic.tags' },
         labels:       this.tags,
         labelTooltip: this.t('catalog.charts.findSimilar.message', { type: this.t('catalog.charts.findSimilar.types.tag') }, true)

package/models/token.js

@@ -16,8 +16,4 @@ export default class extends NormanModel {
 
     return expiry.isBefore(day());
   }
-
-  get isDeprecated() {
-    return true;
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.9-rc.6",
+  "version": "3.0.10",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancher/dashboard",
   "license": "Apache-2.0",
@@ -8,7 +8,7 @@
   "private": false,
   "types": "types/shell/index.d.ts",
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=24.0.0"
   },
   "files": [
     "**/*"
@@ -41,7 +41,7 @@
     "@popperjs/core": "2.11.8",
     "@rancher/icons": "2.0.55",
     "@types/is-url": "1.2.30",
-    "@types/node": "20.10.8",
+    "@types/node": "25.3.3",
     "@types/semver": "^7.5.8",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
@@ -65,7 +65,7 @@
     "color": "5.0.3",
     "cookie-universal": "2.2.2",
     "cookie": "0.7.0",
-    "core-js": "3.45.0",
+    "core-js": "3.48.0",
     "cron-validator": "1.4.0",
     "cronstrue": "3.9.0",
     "cross-env": "7.0.3",
@@ -119,7 +119,7 @@
     "papaparse": "5.3.0",
     "portal-vue": "~3.0.0",
     "sass-loader": "12.6.0",
-    "sass": "1.89.2",
+    "sass": "1.97.3",
     "serve-static": "1.14.1",
     "set-cookie-parser": "2.4.6",
     "shell-quote": "1.7.3",
@@ -131,10 +131,10 @@
     "ufo": "0.7.11",
     "unfetch": "4.2.0",
     "url-parse": "1.5.10",
-    "vue-router": "4.5.1",
+    "vue-router": "4.6.4",
     "vue-select": "4.0.0-beta.6",
     "vue-server-renderer": "2.7.16",
-    "vue": "3.5.18",
+    "vue": "3.5.29",
     "vue3-resize": "0.2.0",
     "vue3-virtual-scroll-list": "0.2.1",
     "vuedraggable": "4.1.0",
@@ -164,7 +164,7 @@
     "roarr": "7.0.4",
     "semver": "7.5.4",
     "@types/lodash": "4.17.5",
-    "@types/node": "20.10.8",
+    "@types/node": "25.3.3",
     "@vue/cli-service/html-webpack-plugin": "^5.0.0"
   },
   "nyc": {