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

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

@@ -110,9 +110,12 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     }
 
     .row {
-        display: block;
-        width: 100%;
         display: inline-block;
+        width: 100%;
+
+        &::before, &::after {
+            display: none;
+        }
 
         &:not(:nth-child(2)) {
             margin-top: 4px;

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

@@ -92,18 +92,14 @@ const previewId = randomStr();
     max-width: calc(100%);
   }
 
-  .rc-tag {
-    display: inline-block;
-    line-height: normal;
-  }
-
   .tag-data {
     display: inline-block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    min-width: 0;
     max-width: calc(100%);
-    line-height: normal;
+    line-height: 1;
   }
 
   & .btn.btn-medium.rc-button.variant-ghost {

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/ResourceDetail/index.vue

@@ -169,7 +169,7 @@ export default {
     } else {
       let fqid = id;
 
-      if ( schema.attributes?.namespaced && namespace ) {
+      if ( schema?.attributes?.namespaced && namespace ) {
         fqid = `${ namespace }/${ fqid }`;
       }
 

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
@@ -72,6 +74,11 @@ export default {
       default: false
     },
 
+    showFavorite: {
+      type:    Boolean,
+      default: true
+    },
+
     /**
      * Inherited global identifier prefix for tests
      * Define a term based on the parent component to avoid conflicts on multiple components
@@ -200,7 +207,7 @@ export default {
     <div class="title">
       <h1 class="m-0">
         <TabTitle>{{ _typeDisplay }}</TabTitle> <Favorite
-          v-if="isExplorer"
+          v-if="isExplorer && showFavorite"
           :resource="favoriteResource || resource"
         />
       </h1>
@@ -221,22 +228,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>
@@ -263,6 +272,7 @@ export default {
       'title actions'
       'sub-header sub-header'
       'state-banner state-banner';
+    margin-bottom: 24px;
   }
 
   .sub-header {

package/components/ResourceList/index.vue

@@ -10,6 +10,9 @@ import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import { sameContents } from '@shell/utils/array';
 import perfSettingsUtils from '@shell/utils/perf-setting.utils';
+import { BadgeState } from '@components/BadgeState';
+import { stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
+import { useStateColor } from '@shell/composables/useStateColor';
 
 export default {
   name: ResourceListComponentName,
@@ -20,10 +23,17 @@ export default {
     Masthead,
     ResourceLoadingIndicator,
     IconMessage,
-    ExtensionPanel
+    ExtensionPanel,
+    BadgeState,
   },
   mixins: [ResourceFetch],
 
+  setup() {
+    const { toStateColor } = useStateColor();
+
+    return { toStateColor };
+  },
+
   props: {
     hasAdvancedFiltering: {
       type:    Boolean,
@@ -155,6 +165,41 @@ export default {
       return perfSettingsUtils.incrementalLoadingUtils.isEnabled(this.calcCanPaginate(), this.perfConfig);
     },
 
+    activeStateFilters() {
+      const raw = this.$route?.query?.stateFilter;
+
+      if (!raw) {
+        return [];
+      }
+
+      const states = raw.split(',').filter(Boolean);
+
+      return states.map((s) => {
+        const match = this.rows.find((row) => row.metadata?.state?.name === s);
+
+        if (match) {
+          return {
+            label: match.stateDisplay,
+            color: match.stateBackground,
+          };
+        }
+
+        return {
+          label: stateDisplay(s, true),
+          color: `bg-${ this.toStateColor(s, this.resource) }`,
+        };
+      });
+    },
+
+  },
+
+  methods: {
+    clearStateFilter() {
+      const query = { ...this.$route.query };
+
+      delete query.stateFilter;
+      this.$router.push({ ...this.$route, query });
+    },
   },
 
   watch: {
@@ -260,6 +305,28 @@ export default {
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
     >
+      <template
+        v-if="activeStateFilters.length"
+        #subHeader
+      >
+        <div class="state-filter-bar text-muted">
+          {{ t('resourceList.stateFilterApplied') }}
+          <BadgeState
+            v-for="state in activeStateFilters"
+            :key="state.label"
+            :color="state.color"
+            :label="state.label"
+            class="badge-state-font-size"
+          />
+          <span>.</span>
+          <a
+            role="button"
+            @click="clearStateFilter"
+          >
+            {{ t('resourceList.clearStateFilter') }}
+          </a>
+        </div>
+      </template>
       <template #extraActions>
         <slot name="extraActions" />
       </template>
@@ -317,4 +384,18 @@ export default {
       top: 10px;
       right: 10px;
     }
+
+    .state-filter-bar {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      a {
+        cursor: pointer;
+      }
+    }
+
+    .badge-state-font-size {
+      font-size: .85em;
+    }
 </style>

package/components/RichTranslation.vue

@@ -74,8 +74,11 @@ export default defineComponent({
           const content = enclosingTagName ? match[2] : '';
 
           if (slots[tagName]) {
-            // If a slot is provided for this tag, render the slot with the content.
-            children.push(slots[tagName]({ content: purifyHTML(content) }));
+            const slotContent = slots[tagName]({ content: purifyHTML(content) });
+
+            if (slotContent) {
+              children.push(...slotContent);
+            }
           } else if (ALLOWED_TAGS.includes(tagName.toLowerCase())) {
             // If it's an allowed HTML tag, render it directly.
             if (content) {

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/Setting.vue

@@ -29,6 +29,7 @@ export default {
           <span
             v-if="value.fromEnv"
             class="modified"
+            :data-testid="`advanced-setting-env-label-${value.id}`"
           >{{ t('advancedSettings.setEnv') }}</span>
           <span
             v-else-if="value.customized"

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,
     };
   },