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

package/components/ActionDropdownShell.vue

@@ -35,6 +35,7 @@ const setBulkActionOfInterest = (act: HiddenAction | null, event: 'mouseover' |
   >
     <rc-dropdown-trigger
       class="bulk-actions-dropdown"
+      size="large"
       :disabled="disabled"
     >
       <template #before>
@@ -42,7 +43,7 @@ const setBulkActionOfInterest = (act: HiddenAction | null, event: 'mouseover' |
       </template>
       <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
       <template #after>
-        <i class="ml-10 icon icon-chevron-down" />
+        <i class="icon icon-chevron-down" />
       </template>
     </rc-dropdown-trigger>
     <template #dropdownCollection>

package/components/CruResourceFooter.vue

@@ -3,13 +3,16 @@ import { mapGetters } from 'vuex';
 
 import AsyncButton from '@shell/components/AsyncButton';
 import ResourceCancelModal from '@shell/components/ResourceCancelModal';
+import { RcButton } from '@components/RcButton';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
   emits: ['cancel-confirmed', 'finish'],
 
-  components: { AsyncButton, ResourceCancelModal },
-  props:      {
+  components: {
+    AsyncButton, RcButton, ResourceCancelModal
+  },
+  props: {
     mode: {
       type:    String,
       default: 'create',
@@ -84,16 +87,17 @@ export default {
   <div class="cru-resource-footer">
     <slot name="footer-prefix" />
     <slot name="cancel">
-      <button
+      <RcButton
         v-if="!isView && showCancel"
         id="cru-cancel"
         :data-testid="componentTestid + '-cancel'"
         type="button"
-        class="btn role-secondary"
+        variant="secondary"
+        size="large"
         @click="confirmCancelRequired ? checkCancel(true) : $emit('cancel-confirmed', true)"
       >
         <t k="generic.cancel" />
-      </button>
+      </RcButton>
     </slot>
     <slot :checkCancel="checkCancel">
       <AsyncButton

package/components/ExplorerProjectsNamespaces.vue

@@ -295,7 +295,7 @@ export default {
       return this.$store.getters['i18n/t']('resourceTable.groupLabel.notInAProject');
     },
     showCreateNsButton() {
-      return this.groupPreference !== 'namespace';
+      return this.groupPreference !== 'namespace' && this.isNamespaceCreatable;
     },
     projectGroupBy() {
       return this.groupPreference === 'none' ? null : 'groupById';

package/components/InstallHelmCharts.vue

@@ -248,7 +248,7 @@ export default {
 
       };
 
-      this.installCmd.namespace = this.targetNamespace || this.chart?.targetNamespace || 'default';
+      this.installCmd.namespace = this.targetNamespace || this.versionInfo?.chart?.annotations?.[CATALOG_ANNOTATIONS.NAMESPACE] || this.chart?.targetNamespace || 'default';
     }
   },
 
@@ -360,7 +360,7 @@ export default {
           this.canInstallChart = false;
         } else {
           try {
-            const app = await this.$store.dispatch(`${ this.store }/find`, { type: CATALOG.APP, id: `${ this.targetNamespace || this.chart?.targetNamespace || 'default' }/${ this.chartName }` });
+            const app = await this.$store.dispatch(`${ this.store }/find`, { type: CATALOG.APP, id: `${ this.targetNamespace || this.versionInfo?.chart?.annotations?.[CATALOG_ANNOTATIONS.NAMESPACE] || this.chart?.targetNamespace || 'default' }/${ this.chartName }` });
 
             if (app) {
               this.installedVersion = app?.spec?.chart?.metadata?.appVersion;

package/components/LandingPagePreference.vue

@@ -14,10 +14,6 @@ export default {
     Select,
   },
 
-  async fetch() {
-    this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
-  },
-
   data() {
     // Store the route as it was on page load (before the user may have changed it)
     const customRoute = this.$store.getters['prefs/get'](AFTER_LOGIN_ROUTE);
@@ -90,13 +86,25 @@ export default {
   },
 
   methods: {
-    updateLoginRoute(neu) {
+    async updateLoginRoute(neu) {
       if (neu) {
         this.afterLoginRoute = neu;
       } else {
+        this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
         this.afterLoginRoute = this.routeFromDropdown?.value || this.routeDropdownOptions[0]?.value;
       }
     },
+  },
+
+  watch: {
+    afterLoginRoute: {
+      async handler(neu) {
+        if (typeof neu === 'object') {
+          this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
+        }
+      },
+      immediate: true
+    },
   }
 };
 </script>
@@ -129,6 +137,7 @@ export default {
           />
           <Select
             v-model:value="routeFromDropdown"
+            :loading="clusters.length < 1"
             :aria-label="t('landing.landingPrefs.ariaLabelTakeMeToCluster')"
             :searchable="true"
             :disabled="afterLoginRoute === 'home' || afterLoginRoute === 'last-visited'"

package/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue

@@ -103,12 +103,26 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
     flex-direction: column;
 
     .row {
+      gap: 8px;
+
+      // Hide clearfix pseudo-elements inherited from the global .row class
+      &::before, &::after {
+        display: none;
+      }
+
       &:not(:last-of-type) {
         margin-bottom: 8px;
       }
 
       .full-custom-value {
         flex: 1;
+        min-width: 0;
+
+        // Override inline-block on .popover-card-target so it respects the
+        // parent's width constraint instead of sizing to its content
+        :deep(.popover-card-target) {
+          width: 100%;
+        }
       }
 
       .value {
@@ -128,7 +142,7 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
 
       .label {
         width: 30%;
-        min-width: 120px;
+        min-width: min-content;
       }
 
       .status {

package/components/Resource/Detail/Metadata/index.vue

@@ -82,6 +82,12 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
 
 <style lang="scss" scoped>
 .metadata {
+    .identifying-info {
+      // Allow the grid cell to shrink below its content size without
+      // using overflow:hidden, which would clip the namespace popover
+      min-width: 0;
+    }
+
     .labels-and-annotations-empty {
       grid-column: span 2;
     }

package/components/Resource/Detail/ResourcePopover/index.vue

@@ -115,11 +115,22 @@ const actionInvoked = () => {
 
   .display {
     display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+
+    // Truncate the link text instead of wrapping to a second line
+    a {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
   }
 
   .rc-status-indicator {
+      // Keep the status dot from collapsing when the link text is long
+      flex-shrink: 0;
       margin-right: 12px;
-      margin-top: 4px;
       height: initial;
       line-height: initial;
   }

package/components/Resource/Detail/SpacedRow.vue

@@ -7,9 +7,11 @@
 <style lang="scss" scoped>
 .spaced-row {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   grid-auto-flow: dense;
   grid-gap: 24px;
   justify-content: space-evenly;
+  // Match the title bar floor so sections scroll together
+  min-width: $resource-detail-min-width;
 }
 </style>

package/components/Resource/Detail/TitleBar/index.vue

@@ -159,23 +159,20 @@ const showAdditionalActionButtons = computed(() => isArray(additionalActions));
 
 <style lang="scss" scoped>
 .title-bar {
-  min-width: 740px;
+  min-width: $resource-detail-min-width;
 
   .badge-state {
     font-size: 16px;
     margin-left: 12px;
     position: relative;
-  }
-
-  .icon-document {
-    width: 15px;
-    font-size: 16px;
-    margin-right: 10px;
+    flex: 0 0 auto;
   }
 
   .actions {
     display: flex;
     align-items: center;
+    flex: 0 0 auto;
+    margin-left: 16px;
   }
 
   .show-configuration, &:deep() .actions > button {
@@ -198,15 +195,17 @@ const showAdditionalActionButtons = computed(() => isArray(additionalActions));
     max-width: 60%;
   }
 
-  // This prevents the title from overlapping with the actions
+  // Title takes the remaining row space; min-width: 0 lets its children
+  // (resource-name) shrink so the action buttons stay visible on narrow viewports.
   .title {
-    max-width: calc(100% - 260px);
+    flex: 1 1 auto;
+    min-width: 0;
   }
 
-  // We want the resource name to be what collaspes wh
   .resource-name {
     display: inline-block;
-    flex: 1;
+    flex: 0 1 auto;
+    min-width: 0;
     white-space: nowrap;
     overflow-x: hidden;
     overflow-y: clip;

package/components/ResourceList/Masthead.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import Favorite from '@shell/components/nav/Favorite';
 import TypeDescription from '@shell/components/TypeDescription';
+import { RcButton } from '@components/RcButton';
 import { get } from '@shell/utils/object';
 import { AS, _YAML } from '@shell/config/query-params';
 import ResourceLoadingIndicator from './ResourceLoadingIndicator';
@@ -16,6 +17,7 @@ export default {
 
   components: {
     Favorite,
+    RcButton,
     TypeDescription,
     ResourceLoadingIndicator,
     TabTitle
@@ -221,22 +223,24 @@ export default {
           <slot name="extraActions" />
 
           <slot name="createButton">
-            <router-link
+            <RcButton
               v-if="hasEditComponent && _isCreatable"
-              :to="_createLocation"
-              class="btn role-primary"
+              variant="primary"
+              size="large"
               :data-testid="componentTestid+'-create'"
+              :to="_createLocation"
             >
               {{ _createButtonlabel }}
-            </router-link>
-            <router-link
+            </RcButton>
+            <RcButton
               v-else-if="_isYamlCreatable"
-              :to="_yamlCreateLocation"
-              class="btn role-primary"
+              variant="primary"
+              size="large"
               :data-testid="componentTestid+'-create-yaml'"
+              :to="_yamlCreateLocation"
             >
               {{ t("resourceList.head.createFromYaml") }}
-            </router-link>
+            </RcButton>
           </slot>
         </div>
       </slot>

package/components/SelectIconGrid.vue

@@ -131,16 +131,6 @@ export default {
         class="side-label"
         :class="{'indicator': true }"
       />
-      <div v-if="r.deploysOnWindows">
-        <label class="deploys-os-label">
-          {{ t('catalog.charts.deploysOnWindows') }}
-        </label>
-      </div>
-      <div v-if="r.windowsIncompatible">
-        <label class="os-incompatible-label">
-          {{ t('catalog.charts.windowsIncompatible') }}
-        </label>
-      </div>
       <div
         v-if="get(r, sideLabelField)"
         class="side-label"

package/components/SingleClusterInfo.vue

@@ -13,6 +13,7 @@ export default {
   },
 
   async fetch() {
+    // There's only one cluster, might as well fetch them all...
     this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
   },
 

package/components/SortableTable/__tests__/sorting.test.ts

@@ -0,0 +1,126 @@
+import sorting from '@shell/components/SortableTable/sorting';
+
+const { arrangedRows } = sorting.computed;
+
+describe('sorting mixin', () => {
+  describe('arrangedRows', () => {
+    function createContext({
+      rows = [] as any[],
+      sortFields = ['id'],
+      descending = false,
+      sortGeneration = undefined as string | undefined,
+      sortGenerationFn = (() => 'gen1') as (() => string) | undefined,
+      externalPaginationEnabled = false,
+      cacheKey = null as string | null,
+      cachedRows = null as any[] | null,
+      cachedRowsRef = null as any[] | null,
+    } = {}) {
+      return {
+        rows,
+        sortFields,
+        descending,
+        sortGeneration,
+        sortGenerationFn,
+        externalPaginationEnabled,
+        cacheKey,
+        cachedRows,
+        cachedRowsRef,
+      };
+    }
+
+    it('should return undefined when externalPaginationEnabled is true', () => {
+      const ctx = createContext({ externalPaginationEnabled: true });
+
+      expect(arrangedRows.call(ctx)).toBeUndefined();
+    });
+
+    it('should sort rows by the given sort fields', () => {
+      const rows = [{ id: 'b' }, { id: 'a' }, { id: 'c' }];
+      const ctx = createContext({ rows, sortGenerationFn: undefined });
+
+      const result = arrangedRows.call(ctx);
+
+      expect(result.map((r: any) => r.id)).toStrictEqual(['a', 'b', 'c']);
+    });
+
+    it('should cache results when sortGenerationFn is provided', () => {
+      const rows = [{ id: 'b' }, { id: 'a' }];
+      const ctx = createContext({ rows });
+
+      const result1 = arrangedRows.call(ctx);
+
+      expect(ctx.cacheKey).not.toBeNull();
+      expect(ctx.cachedRows).toStrictEqual(result1);
+
+      const result2 = arrangedRows.call(ctx);
+
+      expect(result2).toBe(ctx.cachedRows);
+    });
+
+    it('should invalidate cache when rows change to different items with the same count', () => {
+      const rowsA = [{ id: 'alpha' }];
+      const rowsB = [{ id: 'beta' }];
+      const ctx = createContext({ rows: rowsA });
+
+      const resultA = arrangedRows.call(ctx);
+
+      expect(resultA.map((r: any) => r.id)).toStrictEqual(['alpha']);
+
+      ctx.rows = rowsB;
+      const resultB = arrangedRows.call(ctx);
+
+      expect(resultB.map((r: any) => r.id)).toStrictEqual(['beta']);
+    });
+
+    it('should return cached rows when same rows are passed again', () => {
+      const rows = [{ id: 'x' }, { id: 'y' }];
+      const ctx = createContext({ rows });
+
+      arrangedRows.call(ctx);
+      const cached = ctx.cachedRows;
+
+      const result = arrangedRows.call(ctx);
+
+      expect(result).toBe(cached);
+    });
+
+    it('should invalidate cache when descending changes', () => {
+      const rows = [{ id: 'a' }, { id: 'b' }];
+      const ctx = createContext({ rows });
+
+      arrangedRows.call(ctx);
+
+      ctx.descending = true;
+      const result = arrangedRows.call(ctx);
+
+      expect(result.map((r: any) => r.id)).toStrictEqual(['b', 'a']);
+    });
+
+    it('should not cache when there is no sortGenerationFn or sortGeneration', () => {
+      const rows = [{ id: 'a' }];
+      const ctx = createContext({ rows });
+
+      ctx.sortGenerationFn = undefined;
+      ctx.sortGeneration = undefined;
+
+      arrangedRows.call(ctx);
+
+      expect(ctx.cacheKey).toBeNull();
+      expect(ctx.cachedRows).toBeNull();
+    });
+
+    it('should use sortGeneration over sortGenerationFn when provided', () => {
+      const rows = [{ id: 'a' }];
+      const ctx = createContext({
+        rows,
+        sortGeneration:   'custom-gen',
+        sortGenerationFn: () => 'fn-gen',
+      });
+
+      arrangedRows.call(ctx);
+
+      expect(ctx.cacheKey).toContain('custom-gen');
+      expect(ctx.cacheKey).not.toContain('fn-gen');
+    });
+  });
+});

package/components/SortableTable/index.vue

@@ -26,6 +26,7 @@ import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 import ActionDropdownShell from '@shell/components/ActionDropdownShell.vue';
+import { RcButton } from '@components/RcButton';
 import { useTabCountUpdater } from '@shell/components/form/ResourceTabs/composable';
 
 // Uncomment for table performance debugging
@@ -65,6 +66,7 @@ export default {
     ButtonMultiAction,
     ActionMenu,
     ActionDropdownShell,
+    RcButton,
   },
 
   mixins: [
@@ -1116,17 +1118,17 @@ export default {
         >
           <slot name="header-left">
             <template v-if="tableActions">
-              <button
+              <RcButton
                 v-for="(act) in availableActions"
                 :id="act.action"
                 :key="act.action"
                 v-clean-tooltip="actionTooltip"
                 type="button"
-                class="btn role-primary"
+                variant="primary"
+                size="large"
                 :class="{[bulkActionClass]:true}"
                 :disabled="!act.enabled"
                 :data-testid="componentTestid + '-' + act.action"
-                role="button"
                 :aria-label="act.label"
                 @click="applyTableAction(act, null, $event)"
                 @keydown.enter.stop
@@ -1138,7 +1140,7 @@ export default {
                   :class="act.icon"
                 />
                 <span v-clean-html="act.label" />
-              </button>
+              </RcButton>
               <template v-if="featureDropdownMenu">
                 <ActionDropdownShell
                   :disabled="!selectedRows.length"
@@ -2154,11 +2156,6 @@ export default {
         }
       }
 
-      .bulk-action  {
-        .icon {
-          vertical-align: -10%;
-        }
-      }
     }
 
     .middle {

package/components/SortableTable/selection.js

@@ -626,27 +626,45 @@ function _execute(resources, action, args, opts = {}, ctx) {
     return action.invoke.apply(ctx, [actionOpts, resources || [], args]);
   }
 
+  /**
+   * for the given resource find it's action matching the target action. if that target action has an alt resource return it
+   */
+  const findResourceFromAction = (r) => {
+    const actualAction = r.availableActions.find((aa) => aa.action === action.action);
+
+    return actualAction?.altResource || r;
+  };
+
+  // if there there are multiple resources and a bulk action, use it and pass in the resources
+  // for example cluster management cluster list Download KubeConfig
   if ( resources.length > 1 && action.bulkAction && !opts.alt ) {
-    const fn = resources[0][action.bulkAction];
+    const applyResource = findResourceFromAction(resources[0]);
+    const fn = applyResource[action.bulkAction];
 
     if ( fn ) {
-      return fn.call(resources[0], resources, ...args);
+      const applyResources = resources.map(findResourceFromAction);
+
+      return fn.call(applyResource, applyResources, ...args);
     }
   }
 
   const promises = [];
 
+  // if there is a single resource or no bulk action, for each resource execute it's action
+  // for example delete when only one row is selected
   for ( const resource of resources ) {
     let fn;
 
+    const applyResource = findResourceFromAction(resource);
+
     if (opts.alt && action.altAction) {
-      fn = resource[action.altAction];
+      fn = applyResource[action.altAction];
     } else {
-      fn = resource[action.action];
+      fn = applyResource[action.action];
     }
 
     if ( fn ) {
-      promises.push(fn.apply(resource, args));
+      promises.push(fn.apply(applyResource, args));
     }
   }
 

package/components/SortableTable/sorting.js

@@ -50,7 +50,8 @@ export default {
 
       if ( sortGenerationKey) {
         key = `${ sortGenerationKey }/${ this.rows.length }/${ this.descending }/${ this.sortFields.join(',') }`;
-        if ( this.cacheKey === key ) {
+
+        if ( this.cacheKey === key && this.cachedRowsRef === this.rows ) {
           return this.cachedRows;
         }
       }
@@ -60,6 +61,7 @@ export default {
       if ( key ) {
         this.cacheKey = key;
         this.cachedRows = out;
+        this.cachedRowsRef = this.rows;
       }
 
       return out;
@@ -104,8 +106,9 @@ export default {
     return {
       sortBy,
       descending,
-      cachedRows: null,
-      cacheKey:   null,
+      cachedRows:    null,
+      cachedRowsRef: null,
+      cacheKey:      null,
     };
   },