@rancher/shell 3.0.9-rc.6 → 3.0.10

package/pages/account/index.vue

@@ -9,107 +9,94 @@ import { mapGetters } from 'vuex';
 
 import { Banner } from '@components/Banner';
 import ResourceTable from '@shell/components/ResourceTable';
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
 import TabTitle from '@shell/components/TabTitle';
 
-import { allHash } from '@shell/utils/promise';
-
-import {
-  ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE,
-  LAST_USED, AGE_NORMAN, SCOPE_NORMAN, NORMAN_KEY_DEPRECATION
-} from '@shell/config/table-headers';
-import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+const API_ENDPOINT = '/v3';
 
 export default {
   components: {
-    BackLink, Banner, Loading, ResourceTable, Principal, TabTitle
+    CopyToClipboardText, BackLink, Banner, Loading, ResourceTable, Principal, TabTitle
   },
   mixins: [BackRoute],
   async fetch() {
-    const hashedRequests = {};
-
     this.canChangePassword = await this.calcCanChangePassword();
 
-    this.normanTokenSchema = this.$store.getters[`rancher/schemaFor`](NORMAN.TOKEN);
-    this.steveTokenSchema = this.$store.getters[`management/schemaFor`](EXT.TOKEN);
+    if (this.apiKeySchema) {
+      this.rows = await this.$store.dispatch('rancher/findAll', { type: NORMAN.TOKEN });
+    }
 
-    const selfUser = await this.$store.dispatch('auth/getSelfUser');
+    // Get all settings - the API host setting may not be set, so this avoids a 404 request if we look for the specific setting
+    const allSettings = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.SETTING });
+    const apiHostSetting = allSettings.find((i) => i.id === SETTING.API_HOST);
+    const serverUrlSetting = allSettings.find((i) => i.id === SETTING.SERVER_URL);
 
-    if (this.normanTokenSchema) {
-      hashedRequests.normanTokens = this.$store.dispatch('rancher/findAll', { type: NORMAN.TOKEN });
-    }
+    this.apiHostSetting = apiHostSetting?.value;
+    this.serverUrlSetting = serverUrlSetting?.value;
 
-    if (this.steveTokenSchema) {
-      this.filterByUserTokens = this.$store.getters[`management/paginationEnabled`](EXT.TOKEN);
-
-      if (this.filterByUserTokens && selfUser?.status?.userID) {
-        // Only get associated with the current user
-        const opt = { // Of type ActionFindPageArgs
-          pagination: new FilterArgs({
-            filters: PaginationParamFilter.createSingleField({
-              field: 'metadata.fields.1',
-              value: selfUser.status?.userID,
-            })
-          })
-        };
-
-        hashedRequests.steveTokens = this.$store.dispatch(`management/findPage`, { type: EXT.TOKEN, opt });
-      } else {
-        hashedRequests.steveTokens = this.$store.dispatch('management/findAll', { type: EXT.TOKEN });
-      }
-    }
+    const selfUser = await this.$store.dispatch('auth/getSelfUser');
 
     if (selfUser?.canGetUser && selfUser.status?.userID) {
       // Fetch the user info for ChangePassword (ChangePasswordDialog needs the user info for the user whose password is being changed)
-      hashedRequests.user = this.$store.dispatch('management/find', {
+      this.user = await this.$store.dispatch('management/find', {
         type: MANAGEMENT.USER,
         id:   selfUser.status?.userID
       });
+    } else {
+      throw new Error(this.t('changePassword.errors.cannotFetchSelf'));
     }
-
-    // Get all settings - the API host setting may not be set, so this avoids a 404 request if we look for the specific setting
-    hashedRequests.allSettings = this.$store.dispatch('management/findAll', { type: MANAGEMENT.SETTING });
-
-    const {
-      normanTokens, steveTokens, allSettings, user
-    } = await allHash(hashedRequests);
-
-    this.normanTokens = normanTokens;
-    this.steveTokens = steveTokens;
-    this.user = user;
-
-    const apiHostSetting = allSettings.find((i) => i.id === SETTING.API_HOST);
-    const serverUrlSetting = allSettings.find((i) => i.id === SETTING.SERVER_URL);
-
-    this.apiHostSetting = apiHostSetting?.value;
-    this.serverUrlSetting = serverUrlSetting?.value;
   },
   data() {
     return {
-      normanTokenSchema: undefined,
-      steveTokenSchema:  undefined,
       apiHostSetting:    null,
       serverUrlSetting:  null,
       rows:              null,
       canChangePassword: false,
-      user:              null,
-      normanTokens:      null,
-      steveTokens:       null,
+      user:              null
     };
   },
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
     apiKeyheaders() {
-      return [
-        EXPIRY_STATE,
-        ACCESS_KEY,
-        DESCRIPTION,
-        SCOPE_NORMAN,
-        NORMAN_KEY_DEPRECATION,
-        LAST_USED,
-        EXPIRES,
-        AGE_NORMAN
-      ];
+      return this.apiKeySchema ? this.$store.getters['type-map/headersFor'](this.apiKeySchema) : [];
+    },
+
+    // Port of Ember code for API Url - see: https://github.com/rancher/ui/blob/8e07c492673171731f3b26af14c978bc103d1828/lib/shared/addon/endpoint/service.js#L58
+    apiUrlBase() {
+      let setting = this.apiHostSetting;
+
+      if (setting && setting.indexOf('http') !== 0) {
+        setting = `http://${ setting }`;
+      }
+
+      // Use Server Setting URL if the api host setting is not set
+      let url = setting || this.serverUrlSetting;
+
+      // If the URL is relative, add on the current base URL from the browser
+      if ( url.indexOf('http') !== 0 ) {
+        url = `${ window.location.origin }/${ url.replace(/^\/+/, '') }`;
+      }
+
+      // URL must end in a single slash
+      url = `${ url.replace(/\/+$/, '') }/`;
+
+      return url;
+    },
+
+    apiUrl() {
+      const base = this.apiUrlBase;
+      const path = API_ENDPOINT.replace(/^\/+/, '');
+
+      return `${ base }${ path }`;
+    },
+
+    apiKeySchema() {
+      try {
+        return this.$store.getters[`rancher/schemaFor`](NORMAN.TOKEN);
+      } catch (e) {}
+
+      return null;
     },
 
     principal() {
@@ -123,7 +110,7 @@ export default {
       return principal || {};
     },
 
-    filteredNormanTokens() {
+    apiKeys() {
       // Filter out tokens that are not API Keys and are not expired UI Sessions
       const isApiKey = (key) => {
         const labels = key.labels;
@@ -133,24 +120,7 @@ export default {
         return ( !expired || !labels || !labels['ui-session'] ) && !current;
       };
 
-      return !this.normanTokens ? [] : this.normanTokens.filter(isApiKey);
-    },
-
-    filteredNewTokens() {
-      // Filter out tokens that are not API Keys and are not expired UI Sessions
-      const isApiKey = (key) => {
-        const labels = key.metadata?.labels;
-        const expired = key.status?.expired;
-        const current = key.status?.current;
-
-        return ( !expired || !labels || !labels['ui-session'] ) && !current;
-      };
-
-      return !this.steveTokens ? [] : this.steveTokens.filter(isApiKey);
-    },
-
-    apiKeys() {
-      return (this.filteredNormanTokens || []).concat(this.filteredNewTokens || []);
+      return !this.rows ? [] : this.rows.filter(isApiKey);
     }
   },
 
@@ -221,9 +191,16 @@ export default {
     <div class="keys-header">
       <div>
         <h2 v-t="'accountAndKeys.apiKeys.title'" />
+        <div class="api-url">
+          <span>{{ t("accountAndKeys.apiKeys.apiEndpoint") }}</span>
+          <CopyToClipboardText
+            :aria-label="t('accountAndKeys.apiKeys.copyApiEnpoint')"
+            :text="apiUrl"
+          />
+        </div>
       </div>
       <button
-        v-if="steveTokenSchema"
+        v-if="apiKeySchema"
         role="button"
         :aria-label="t('accountAndKeys.apiKeys.add.label')"
         class="btn role-primary add mb-20"
@@ -234,17 +211,11 @@ export default {
       </button>
     </div>
     <div
-      v-if="steveTokenSchema"
+      v-if="apiKeySchema"
       class="keys"
     >
-      <Banner
-        v-if="filteredNormanTokens.length"
-        color="warning"
-        class="mb-20"
-        :label="t('accountAndKeys.apiKeys.normanTokenDeprecation')"
-      />
       <ResourceTable
-        :schema="steveTokenSchema"
+        :schema="apiKeySchema"
         :rows="apiKeys"
         :headers="apiKeyheaders"
         key-field="id"

package/pages/c/_cluster/apps/charts/AppChartCardFooter.vue

@@ -1,26 +1,78 @@
 <script setup lang="ts">
+import { reactive } from 'vue';
 import { RcItemCardAction } from '@components/RcItemCard';
 import { RcButton } from '@components/RcButton';
+import { isTruncated } from '@shell/utils/style';
+import RcIcon from '@components/RcIcon/RcIcon.vue';
+import type { RcIconType } from '@components/RcIcon/types';
 
 interface FooterItem {
-  icon?: string;
-  iconTooltip?: Record<{key?: string, text?: string}>;
+  icon?: RcIconType;
+  iconTooltip?: { key?: string; text?: string };
   labels: string[];
   labelTooltip?: string;
   type?: string;
 }
 
-const emit = defineEmits<{(e: 'click:item', type: string, label: string): void; }>();
+const emit = defineEmits<{(e: 'click:item', type: string, label: string): void }>();
 
 defineProps<{
   items: FooterItem[];
   clickable?: boolean;
 }>();
 
-function onClickItem(type: string, label: string) {
+const tooltipOverrides = reactive<Record<string, string | undefined>>({});
+const labelElements: Record<string, HTMLElement | null> = {};
+
+function onClickItem(type: string, label: string): void {
   emit('click:item', type, label);
 }
 
+/**
+ * Creates a unique key for identifying a label element.
+ * @param itemIndex - Index of the footer item
+ * @param labelIndex - Index of the label within the footer item
+ */
+function createLabelKey(itemIndex: number, labelIndex: number): string {
+  return `${ itemIndex }-${ labelIndex }`;
+}
+
+/**
+ * Registers a label element reference for truncation detection.
+ * @param key - Unique identifier for the label
+ * @param el - The HTML element or null
+ */
+function registerLabelRef(key: string, el: HTMLElement | null): void {
+  labelElements[key] = el;
+}
+
+/**
+ * Updates the tooltip content based on whether the label text is truncated.
+ * If truncated, prepends the full label text to the base tooltip.
+ * @param key - Unique identifier for the label
+ * @param label - The label text content
+ * @param baseTooltip - The original tooltip content
+ */
+function updateTooltipOnHover(key: string, label: string, baseTooltip?: string): void {
+  if (!baseTooltip) {
+    tooltipOverrides[key] = undefined;
+
+    return;
+  }
+
+  const element = labelElements[key];
+
+  tooltipOverrides[key] = isTruncated(element) ? `${ label }. ${ baseTooltip }` : baseTooltip;
+}
+
+/**
+ * Returns the tooltip to display for a given label.
+ * @param key - Unique identifier for the label
+ * @param fallback - Fallback tooltip if no override exists
+ */
+function getTooltip(key: string, fallback?: string): string | undefined {
+  return tooltipOverrides[key] ?? fallback;
+}
 </script>
 
 <template>
@@ -31,43 +83,52 @@ function onClickItem(type: string, label: string) {
       class="app-chart-card-footer-item"
       data-testid="app-chart-card-footer-item"
     >
+      <RcIcon
+        v-if="footerItem.icon"
+        v-clean-tooltip="footerItem.iconTooltip?.key ? t(footerItem.iconTooltip.key) : undefined"
+        class="app-chart-card-footer-item-icon"
+        :type="footerItem.icon"
+      />
       <template
         v-for="(label, j) in footerItem.labels"
         :key="j"
       >
         <rc-item-card-action
           v-if="clickable && footerItem.type"
-          class="app-chart-card-footer-item-text"
+          class="app-chart-card-footer-item-action"
         >
           <rc-button
-            v-clean-tooltip="footerItem.labelTooltip"
+            v-clean-tooltip="getTooltip(createLabelKey(i, j), footerItem.labelTooltip)"
             variant="ghost"
             class="app-chart-card-footer-button secondary-text-link"
             data-testid="app-chart-card-footer-item-text"
             :aria-label="t('catalog.charts.appChartCard.footerItem.ariaLabel', { filter: label })"
             @click="onClickItem(footerItem.type, label)"
+            @mouseenter="updateTooltipOnHover(createLabelKey(i, j), label, footerItem.labelTooltip)"
           >
-            <template
-              v-if="footerItem.icon"
-              #before
-            >
-              <i
-                v-clean-tooltip="t(footerItem.iconTooltip?.key)"
-                :class="['icon', 'app-chart-card-footer-item-icon', footerItem.icon]"
-              />
-            </template>
-            {{ label }}
-            <span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
+            <span
+              :ref="(el) => registerLabelRef(createLabelKey(i, j), el as HTMLElement)"
+              class="app-chart-card-footer-button-label"
+            >{{ label }}</span>
           </rc-button>
+          <span
+            v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1"
+            class="app-chart-card-footer-item-separator"
+          >,</span>
         </rc-item-card-action>
         <span
           v-else
-          v-clean-tooltip="footerItem.labelTooltip"
+          :ref="(el) => registerLabelRef(createLabelKey(i, j), el as HTMLElement)"
+          v-clean-tooltip="getTooltip(createLabelKey(i, j), footerItem.labelTooltip)"
           class="app-chart-card-footer-item-text"
           data-testid="app-chart-card-footer-item-text"
+          @mouseenter="updateTooltipOnHover(createLabelKey(i, j), label, footerItem.labelTooltip)"
         >
           {{ label }}
-          <span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
+          <span
+            v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1"
+            class="app-chart-card-footer-item-separator"
+          >,</span>
         </span>
       </template>
     </div>
@@ -78,6 +139,7 @@ function onClickItem(type: string, label: string) {
 .app-chart-card-footer {
   display: flex;
   flex-wrap: wrap;
+  max-width: 100%;
 
   &-item {
     display: flex;
@@ -85,18 +147,31 @@ function onClickItem(type: string, label: string) {
     color: var(--link-text-secondary);
     margin-top: 8px;
     margin-right: 8px;
+    min-width: 0;
+    max-width: 100%;
+
+    &-action {
+      display: flex;
+      align-items: center;
+      min-width: 0; // Critical for truncation in flex containers
+      max-width: 100%;
+    }
 
     &-text {
-      margin-right: 8px;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
+      display: block;
       overflow: hidden;
       text-overflow: ellipsis;
-      word-break: break-all;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    &-separator {
+      flex-shrink: 0;
+      margin-right: 4px;
     }
 
     &-icon {
+      flex-shrink: 0;
       width: 20px;
       height: 20px;
       display: flex;
@@ -109,6 +184,15 @@ function onClickItem(type: string, label: string) {
 
   &-button {
     text-transform: capitalize;
+    min-width: 0;
+    max-width: 100%;
+
+    &-label {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 

package/pages/c/_cluster/apps/charts/index.vue

@@ -321,7 +321,7 @@ export default {
         pill:   chart.featured ? { label: { key: 'generic.shortFeatured' }, tooltip: { key: 'generic.featured' } } : undefined,
         header: {
           title:    { text: chart.chartNameDisplay },
-          statuses: this.addStatusesToCharts(chart),
+          statuses: chart.cardContent.statuses
         },
         subHeaderItems: chart.cardContent.subHeaderItems,
         image:          { src: chart.latestCompatibleVersion.icon, alt: { text: this.t('catalog.charts.iconAlt', { app: get(chart, 'chartNameDisplay') }) } },
@@ -553,16 +553,6 @@ export default {
       }
     },
 
-    addStatusesToCharts(chart) {
-      if (this.suseAppCollectionRepo.includes(chart.repoName)) {
-        return [{
-          icon: 'icon-notify-info', color: 'info', tooltip: { key: 'catalog.charts.isFromSuseAppCoRepository' }
-        }, ...chart.cardContent.statuses];
-      }
-
-      return chart.cardContent.statuses;
-    },
-
     async closeSuseAppCollectionBanner() {
       this.showAppCollectionBanner = false;
       await this.$store.dispatch('prefs/set', { key: HIDE_SUSE_APP_COLLECTION_REPO_BANNER, value: true });

package/pages/c/_cluster/explorer/index.vue

@@ -394,29 +394,12 @@ export default {
     },
 
     metricAggregations() {
-      let checkNodes = this.nodes;
-
-      // Special case local cluster
-      if (this.currentCluster.isLocal) {
-        const nodeNames = this.nodes.reduce((acc, n) => {
-          acc[n.id] = n;
-
-          return acc;
-        }, {});
-
-        checkNodes = this.mgmtNodes.filter((n) => {
-          const nodeName = n.metadata?.labels?.['management.cattle.io/nodename'] || n.id;
-
-          return !!nodeNames[nodeName];
-        });
-      }
-
-      const someNonWorkerRoles = checkNodes.some((node) => node.hasARole && !node.isWorker);
       const metrics = this.nodeMetrics.filter((nodeMetrics) => {
         const node = this.nodes.find((nd) => nd.id === nodeMetrics.id);
 
-        return node && (!someNonWorkerRoles || node.isWorker);
+        return node;
       });
+
       const initialAggregation = {
         cpu:    0,
         memory: 0

package/pages/c/_cluster/explorer/tools/index.vue

@@ -98,7 +98,7 @@ export default {
           },
           subHeaderItems: chart.cardContent.subHeaderItems,
           footerItems:    chart.deploysOnWindows ? [{
-            icon:        'icon-tag-alt',
+            icon:        'tag-alt',
             iconTooltip: { key: 'generic.tags' },
             labels:      [this.t('catalog.charts.deploysOnWindows')],
           }] : [],

package/pages/c/_cluster/manager/cloudCredential/index.vue

@@ -9,7 +9,7 @@ import {
   ID_UNLINKED,
   NAME_UNLINKED,
 } from '@shell/config/table-headers';
-import { allHash } from 'utils/promise';
+import { allHash } from '@shell/utils/promise';
 
 export default {
   components: {

package/pages/c/_cluster/uiplugins/index.vue

@@ -873,7 +873,7 @@ export default {
       }
 
       return labels.length ? [{
-        icon:        'icon-tag-alt',
+        icon:        'tag-alt',
         iconTooltip: { key: 'generic.tags' },
         labels,
       }] : [];

package/pkg/auto-import.js

@@ -11,6 +11,43 @@ function replaceAll(str, find, replace) {
   return str.split(find).join(replace);
 }
 
+// Injected at the top of every generated importTypes() function.
+// Ensures both $extension (newer Rancher) and $plugin (older Rancher) are available on
+// Vue globalProperties, regardless of which one the host injected. This makes all
+// extensions compatible across Rancher versions without any per-extension code changes.
+const COMPAT_SHIM = `  if (typeof document !== 'undefined') {
+    var patchGlobalProps = function() {
+      var __vueApp = document.getElementById('app').__vue_app__;
+
+      if (!__vueApp) {
+        // no __vue_app__, vueApp.mount('#app') has not been called yet
+        return false;
+      }
+
+      if (__vueApp.config && __vueApp.config.globalProperties) {
+        var __gp = __vueApp.config.globalProperties;
+        if (!__gp.$extension && __gp.$plugin) { __gp.$extension = __gp.$plugin; }
+        else if (!__gp.$plugin && __gp.$extension) { __gp.$plugin = __gp.$extension; }
+        return true;
+      }
+
+      // Fallback to failure case
+      return false;
+    };
+
+    if (!patchGlobalProps()) {
+      // Could not patch, keep retrying until it works
+      var __retry = setInterval(function() {
+        if (patchGlobalProps()) {
+          clearInterval(__retry);
+        }
+      }, 100);
+
+      // Fallback: clear interval after 10 seconds just in case
+      setTimeout(function() { clearInterval(__retry); }, 10000);
+    }
+  }\n`;
+
 function registerFile(file, type, pkg, f) {
   const importType = (f === 'models') ? 'require' : 'import';
   const chunkName = (f === 'l10n') ? '' : `/* webpackChunkName: "${ f }" */`;
@@ -31,6 +68,8 @@ function register(file, pkg, f) {
 function generateTypeImport(pkg, dir) {
   let content = 'export function importTypes($extension) { \n';
 
+  content += COMPAT_SHIM;
+
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {
     const filePath = path.join(dir, f);
@@ -79,6 +118,8 @@ function generateDynamicTypeImport(pkg, dir) {
   const template = fs.readFileSync(path.join(__dirname, 'import.js'), { encoding: 'utf8' });
   let content = 'export function importTypes($extension) { \n';
 
+  content += COMPAT_SHIM;
+
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {
     if (fs.existsSync(path.join(dir, f))) {

package/plugins/dashboard-store/resource-class.js

@@ -1193,7 +1193,7 @@ export default class Resource {
    * Allow to handle the response of the save request
    * @param {*} res Full request response
    */
-  processSaveResponse(res) { }
+  processSaveResponse(res, opt = {}) { }
 
   async _save(opt = { }) {
     const forNew = !this.id;
@@ -1280,7 +1280,7 @@ export default class Resource {
       const res = await this.$dispatch('request', { opt, type: this.type } );
 
       // Allow to process response independently from the related models
-      this.processSaveResponse(res);
+      this.processSaveResponse(res, opt);
 
       // Steve sometimes returns Table responses instead of the resource you just saved.. ignore
       if ( res && res.kind !== 'Table') {

package/plugins/steve/__tests__/steve-class.test.ts

@@ -74,7 +74,7 @@ describe('class: Steve', () => {
 
         steve.processSaveResponse(response);
 
-        expect(parentProcessSaveResponse).toHaveBeenCalledWith(response);
+        expect(parentProcessSaveResponse).toHaveBeenCalledWith(response, {});
       });
 
       describe('growl notifications', () => {

package/plugins/steve/steve-class.js

@@ -70,11 +70,11 @@ export default class SteveModel extends HybridModel {
    *
    * @param {*} res
    */
-  processSaveResponse(res) {
-    super.processSaveResponse(res);
+  processSaveResponse(res, opt = {}) {
+    super.processSaveResponse(res, opt);
 
     // Conditionally show the growl for autogenerated names
-    if (res && res._status === 201 && res.metadata?.generateName && res.id) {
+    if (res && res._status === 201 && res.metadata?.generateName && res.id && !opt.suppressSuccessToast) {
     // Split to remove the namespace if present (default/generated-xxx)
       const nameOnly = res.id.split('/').pop();
 

package/plugins/steve/steve-pagination-utils.ts

@@ -15,8 +15,7 @@ import {
   INGRESS,
   WORKLOAD_TYPES,
   HPA,
-  SECRET,
-  EXT
+  SECRET
 } from '@shell/config/types';
 import { CAPI as CAPI_LAB_AND_ANO, CATTLE_PUBLIC_ENDPOINTS, STORAGE, UI_PROJECT_SECRET_COPY } from '@shell/config/labels-annotations';
 import { Schema } from '@shell/plugins/steve/schema';
@@ -768,8 +767,7 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStores = {
           { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
           { resource: CATALOG.APP, context: ['branding'] },
           SECRET,
-          CAPI.MACHINE_SET,
-          EXT.TOKEN
+          CAPI.MACHINE_SET
         ],
         generic: false,
       }