@rancher/shell 3.0.9-rc.5 → 3.0.9

package/plugins/dashboard-store/__tests__/resource-class.test.ts

@@ -428,6 +428,33 @@ describe('class: Resource', () => {
     });
   });
 
+  describe('getter: _glance', () => {
+    it('should not throw when currentCluster or currentProduct is undefined', () => {
+      const resource = new Resource({
+        type:     'test',
+        metadata: { creationTimestamp: '2024-01-01T00:00:00Z' }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: {
+          'i18n/t':            (key: string) => key,
+          currentCluster:      undefined,
+          currentProduct:      undefined,
+          'type-map/labelFor': () => 'Test',
+        },
+      });
+
+      expect(() => resource._glance).not.toThrow();
+
+      const glance = resource._glance;
+      const namespaceItem = glance.find((item: any) => item.name === 'namespace');
+
+      expect(namespaceItem.formatter).toBeUndefined();
+      expect(namespaceItem.formatterOpts.to.cluster).toBeUndefined();
+      expect(namespaceItem.formatterOpts.to.product).toBeUndefined();
+    });
+  });
+
   describe('getter: detailPageAdditionalActions', () => {
     it('should return undefined by default', () => {
       const resource = new Resource({ type: 'test-type' }, {

package/plugins/dashboard-store/actions.js

@@ -471,7 +471,7 @@ export default {
       return findAllGetter(getters, type, opt);
     }
 
-    console.log(`Find Page: [${ ctx.state.config.namespace }] ${ type }. Page: ${ opt.pagination.page }. Revision: ${ opt.revision || 'none' }. Size: ${ opt.pagination.pageSize }. Sort: ${ opt.pagination.sort.map((s) => s.field).join(', ') }`); // eslint-disable-line no-console
+    console.log(`Find Page: [${ ctx.state.config.namespace }] ${ type }. Page: ${ opt.pagination.page }. Revision: ${ opt.revision || 'none' }. Size: ${ opt.pagination.pageSize }. Sort: ${ opt.pagination.sort?.map((s) => s.field).join(', ') }`); // eslint-disable-line no-console
     opt = opt || {};
     opt.url = getters.urlFor(type, null, opt);
 
@@ -554,7 +554,6 @@ export default {
    */
   async findLabelSelector(ctx, {
     type,
-    context,
     matching: {
       namespace,
       labelSelector
@@ -562,14 +561,10 @@ export default {
     opt
   }) {
     const { getters, dispatch } = ctx;
-    const args = {
-      id: type,
-      context,
-    };
 
     opt = opt || {};
 
-    if (getters[`paginationEnabled`]?.(args)) {
+    if (getters[`paginationEnabled`]?.()) {
       if (isLabelSelectorEmpty(labelSelector)) {
         throw new Error(`labelSelector must not be empty when using findLabelSelector (avoid fetching all resources)`);
       }
@@ -581,7 +576,7 @@ export default {
           ...opt,
           namespaced: namespace,
           pagination: new FilterArgs({ labelSelector }),
-          transient:  opt?.transient !== undefined ? opt.transient : false // Call this out explicitly here, as by default findX methods ar eusually be cached AND watched
+          transient:  opt?.transient !== undefined ? opt.transient : false // Call this out explicitly here, as by default findX methods are usually cached AND watched
         }
       });
     }

package/plugins/dashboard-store/getters.js

@@ -144,8 +144,7 @@ export default {
       page?.namespace === namespace &&
       page?.pagination?.filters?.length === 0 &&
       page?.pagination.labelSelector &&
-      selector === labelSelectorToSelector(page?.pagination.labelSelector
-      )
+      selector === labelSelectorToSelector(page?.pagination.labelSelector)
     ) {
       return getters.all(type);
     }
@@ -155,11 +154,14 @@ export default {
       return getters.all(type);
     }
 
+    // Does the store contain a page, assume it's a subset of all resources still covering applicable resources, and
+    // apply labelSelector to get actual result
     if (getters['havePage'](type)) {
-      return getters.all(type);
+      return getters.matching( type, selector, namespace );
     }
 
-    // Does the store have all and we can pretend like it contains a result of a labelSelector?
+    // Does the store contain all resources, if so
+    // apply labelSelector to get actual result
     if (getters['haveAll'](type)) {
       return getters.matching( type, selector, namespace );
     }
@@ -177,7 +179,7 @@ export default {
 
     // Filter first by namespace if one is provided, since this is efficient
     if (namespace && typeof namespace === 'string') {
-      matching = type === POD ? getters['podsByNamespace'](namespace) : matching.filter((obj) => obj.namespace === namespace);
+      matching = type === POD && !selector ? getters['podsByNamespace'](namespace) : matching.filter((obj) => obj.namespace === namespace);
     }
 
     garbageCollect.gcUpdateLastAccessed({

package/plugins/dashboard-store/mutations.js

@@ -440,7 +440,10 @@ export default {
       cache.map.set(proxies[i][keyField], proxies[i]);
     }
 
-    cache.haveSelector[selector] = true;
+    cache.havePage = undefined;
+    cache.haveNamespace = undefined;
+    cache.haveSelector = { [selector]: true };
+    cache.haveAll = undefined;
     cache.revision = revision || 0;
   },
 

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

@@ -1956,12 +1956,12 @@ export default class Resource {
       {
         name:          'namespace',
         label:         this.t('component.resource.detail.glance.namespace'),
-        formatter:     'Link',
+        formatter:     this.$rootGetters['currentProduct']?.id && this.$rootGetters['currentCluster']?.id ? 'Link' : undefined,
         formatterOpts: {
           to: {
             name:     `c-cluster-product-resource-id`,
-            product:  this.$rootGetters['currentProduct'].id,
-            cluster:  this.$rootGetters['currentCluster'].id,
+            product:  this.$rootGetters['currentProduct']?.id,
+            cluster:  this.$rootGetters['currentCluster']?.id,
             resource: this.type
           },
           row:     {},

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

@@ -77,150 +77,111 @@ describe('class: Steve', () => {
         expect(parentProcessSaveResponse).toHaveBeenCalledWith(response);
       });
 
-      it('should show growl notification for autogenerated names on 201 status', () => {
-        const mockDispatch = jest.fn();
-        const mockT = jest.fn()
-          .mockReturnValueOnce('CustomResourceDefinition')
-          .mockReturnValueOnce('CustomResourceDefinition created')
-          .mockReturnValueOnce('Resource test-generated-abc123 created successfully');
-        const mockRootGetters = { 'i18n/t': mockT };
-        const steve = new Steve(customResource, {
-          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
-          dispatch:    mockDispatch,
-          rootGetters: mockRootGetters,
-        });
-
-        const response = {
-          _status:  201,
-          metadata: { generateName: 'test-generated-' },
-          id:       'default/test-generated-abc123'
-        };
-
-        steve.processSaveResponse(response);
-
-        expect(mockT).toHaveBeenCalledWith(`typeLabel."${ customResource.type }"`, { count: 1 });
-        expect(mockT).toHaveBeenCalledWith('generic.autogeneratedCreated.title', { resource: 'CustomResourceDefinition' });
-        expect(mockT).toHaveBeenCalledWith('generic.autogeneratedCreated.message', { id: 'test-generated-abc123' });
-        expect(mockDispatch).toHaveBeenCalledWith(
-          'growl/success',
-          {
-            title:   'CustomResourceDefinition created',
-            message: 'Resource test-generated-abc123 created successfully',
-            timeout: 3000
-          },
-          { root: true }
-        );
-      });
-
-      it('should show growl notification for autogenerated names without namespace', () => {
-        const mockDispatch = jest.fn();
-        const mockT = jest.fn()
-          .mockReturnValueOnce('CustomResourceDefinition')
-          .mockReturnValueOnce('CustomResourceDefinition created')
-          .mockReturnValueOnce('Resource simple-id created successfully');
-        const mockRootGetters = { 'i18n/t': mockT };
-        const steve = new Steve(customResource, {
-          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
-          dispatch:    mockDispatch,
-          rootGetters: mockRootGetters,
-        });
-
-        const response = {
-          _status:  201,
-          metadata: { generateName: 'simple-' },
-          id:       'simple-id'
-        };
-
-        steve.processSaveResponse(response);
-
-        expect(mockT).toHaveBeenCalledWith(`typeLabel."${ customResource.type }"`, { count: 1 });
-        expect(mockT).toHaveBeenCalledWith('generic.autogeneratedCreated.title', { resource: 'CustomResourceDefinition' });
-        expect(mockT).toHaveBeenCalledWith('generic.autogeneratedCreated.message', { id: 'simple-id' });
-        expect(mockDispatch).toHaveBeenCalledWith(
-          'growl/success',
-          {
-            title:   'CustomResourceDefinition created',
-            message: 'Resource simple-id created successfully',
-            timeout: 3000
-          },
-          { root: true }
-        );
-      });
-
-      it('should not show growl notification for non-201 status', () => {
-        const mockDispatch = jest.fn();
-        const mockT = jest.fn();
-        const mockRootGetters = { 'i18n/t': mockT };
-        const steve = new Steve(customResource, {
-          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
-          dispatch:    mockDispatch,
-          rootGetters: mockRootGetters,
+      describe('growl notifications', () => {
+        describe('should show growl notification', () => {
+          it.each([
+            {
+              name:     'for autogenerated names on 201 status',
+              response: {
+                _status:  201,
+                metadata: { generateName: 'test-generated-' },
+                id:       'default/test-generated-abc123'
+              },
+              expectedResource: 'CustomResourceDefinition',
+              expectedId:       'test-generated-abc123'
+            },
+            {
+              name:     'for autogenerated names without namespace',
+              response: {
+                _status:  201,
+                metadata: { generateName: 'simple-' },
+                id:       'simple-id'
+              },
+              expectedResource: 'CustomResourceDefinition',
+              expectedId:       'simple-id'
+            }
+          ])('$name', ({ response, expectedResource, expectedId }) => {
+            const mockDispatch = jest.fn();
+            const mockT = jest.fn((key, params) => {
+              if (key === 'generic.autogeneratedCreated.title') {
+                return `${ params.resource } created`;
+              }
+              if (key === 'generic.autogeneratedCreated.message') {
+                return `Resource ${ params.id } created successfully`;
+              }
+
+              return key;
+            });
+            const mockRootGetters = { 'i18n/t': mockT };
+            const steve = new Steve(customResource, {
+              getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+              dispatch:    mockDispatch,
+              rootGetters: mockRootGetters,
+            });
+
+            // Mock typeDisplay to return the expected resource label
+            Object.defineProperty(steve, 'typeDisplay', { get: jest.fn(() => expectedResource) });
+
+            steve.processSaveResponse(response);
+
+            expect(mockT).toHaveBeenCalledWith('generic.autogeneratedCreated.title', { resource: expectedResource });
+            expect(mockT).toHaveBeenCalledWith('generic.autogeneratedCreated.message', { id: expectedId, resource: expectedResource });
+
+            expect(mockDispatch).toHaveBeenCalledWith(
+              'growl/success',
+              {
+                title:   `${ expectedResource } created`,
+                message: `Resource ${ expectedId } created successfully`,
+                timeout: 3000
+              },
+              { root: true }
+            );
+          });
         });
 
-        const response = {
-          _status:  200,
-          metadata: { generateName: 'test-generated-' },
-          id:       'default/test-generated-abc123'
-        };
-
-        steve.processSaveResponse(response);
-
-        expect(mockT).not.toHaveBeenCalled();
-        expect(mockDispatch).not.toHaveBeenCalledWith(
-          'growl/success',
-          expect.any(Object),
-          { root: true }
-        );
-      });
-
-      it('should not show growl notification without generateName', () => {
-        const mockDispatch = jest.fn();
-        const mockT = jest.fn();
-        const mockRootGetters = { 'i18n/t': mockT };
-        const steve = new Steve(customResource, {
-          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
-          dispatch:    mockDispatch,
-          rootGetters: mockRootGetters,
+        describe('should not show growl notification', () => {
+          it.each([
+            {
+              name:     'for non-201 status',
+              response: {
+                _status:  200,
+                metadata: { generateName: 'test-generated-' },
+                id:       'default/test-generated-abc123'
+              }
+            },
+            {
+              name:     'without generateName',
+              response: {
+                _status: 201,
+                id:      'default/test-regular-name'
+              }
+            },
+            {
+              name:     'without id',
+              response: {
+                _status:  201,
+                metadata: { generateName: 'test-generated-' }
+              }
+            }
+          ])('$name', ({ response }) => {
+            const mockDispatch = jest.fn();
+            const mockT = jest.fn();
+            const mockRootGetters = { 'i18n/t': mockT };
+            const steve = new Steve(customResource, {
+              getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+              dispatch:    mockDispatch,
+              rootGetters: mockRootGetters,
+            });
+
+            steve.processSaveResponse(response);
+
+            expect(mockDispatch).not.toHaveBeenCalledWith(
+              'growl/success',
+              expect.any(Object),
+              { root: true }
+            );
+          });
         });
-
-        const response = {
-          _status: 201,
-          id:      'default/test-regular-name'
-        };
-
-        steve.processSaveResponse(response);
-
-        expect(mockT).not.toHaveBeenCalled();
-        expect(mockDispatch).not.toHaveBeenCalledWith(
-          'growl/success',
-          expect.any(Object),
-          { root: true }
-        );
-      });
-
-      it('should not show growl notification without id', () => {
-        const mockDispatch = jest.fn();
-        const mockT = jest.fn();
-        const mockRootGetters = { 'i18n/t': mockT };
-        const steve = new Steve(customResource, {
-          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
-          dispatch:    mockDispatch,
-          rootGetters: mockRootGetters,
-        });
-
-        const response = {
-          _status:  201,
-          metadata: { generateName: 'test-generated-' }
-        };
-
-        steve.processSaveResponse(response);
-
-        expect(mockT).not.toHaveBeenCalled();
-        expect(mockDispatch).not.toHaveBeenCalledWith(
-          'growl/success',
-          expect.any(Object),
-          { root: true }
-        );
       });
     });
   });

package/plugins/steve/steve-class.js

@@ -64,19 +64,28 @@ export default class SteveModel extends HybridModel {
     return this.$getters['paginationEnabled'](this.type);
   }
 
+  /**
+   * Override the default save response processing to conditionally show a growl when a resource is created with an autogenerated name.
+   * The growl will display the resource type and the generated name, providing immediate feedback to the user about the creation of the resource.
+   *
+   * @param {*} res
+   */
   processSaveResponse(res) {
     super.processSaveResponse(res);
 
     // Conditionally show the growl for autogenerated names
     if (res && res._status === 201 && res.metadata?.generateName && res.id) {
-      // Split to remove the namespace if present (default/generated-xxx)
+    // Split to remove the namespace if present (default/generated-xxx)
       const nameOnly = res.id.split('/').pop();
 
       // Avoid showing the growl without the ID.
       if (nameOnly.length > 0) {
+        const resource = this.typeDisplay;
+
+        // Show the growl with the resource type and generated name
         this.$dispatch('growl/success', {
-          title:   this.t('generic.autogeneratedCreated.title', { resource: this.t(`typeLabel."${ this.type }"`, { count: 1 }) }),
-          message: this.t('generic.autogeneratedCreated.message', { id: nameOnly }),
+          title:   this.t('generic.autogeneratedCreated.title', { resource }),
+          message: this.t('generic.autogeneratedCreated.message', { id: nameOnly, resource }),
           timeout: 3000
         }, { root: true });
       }

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

@@ -15,7 +15,8 @@ import {
   INGRESS,
   WORKLOAD_TYPES,
   HPA,
-  SECRET
+  SECRET,
+  EXT
 } 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';
@@ -234,6 +235,8 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     [NODE]: [
       { field: 'status.nodeInfo.kubeletVersion' },
       { field: 'status.nodeInfo.operatingSystem' },
+      { field: 'spec.taints.key' },
+      { field: 'status.addresses.type' },
     ],
     [POD]: [
       { field: 'spec.containers.image' },
@@ -765,7 +768,8 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStores = {
           { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
           { resource: CATALOG.APP, context: ['branding'] },
           SECRET,
-          CAPI.MACHINE_SET
+          CAPI.MACHINE_SET,
+          EXT.TOKEN
         ],
         generic: false,
       }

package/rancher-components/RcIcon/types.ts

@@ -146,6 +146,8 @@ export const RcIconTypeToClass = {
 };
 
 export const RcIconSizeToCSS = {
+  xxlarge: '40px',
+  xlarge:  '32px',
   large:   '25px',
   medium:  '18px',
   small:   '14px',

package/rancher-components/RcItemCard/RcItemCard.vue

@@ -6,6 +6,8 @@ import LazyImage from '@shell/components/LazyImage.vue';
 import { DropdownOption } from '@components/RcDropdown/types';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import RcItemCardAction from './RcItemCardAction';
+import RcIcon from '@components/RcIcon/RcIcon.vue';
+import { RcIconType } from '@components/RcIcon/types';
 
 const store = useStore();
 const { t } = useI18n(store);
@@ -25,11 +27,11 @@ type Label = {
 
 /**
  * Represents an image used in the card.
+ * Can be either a traditional image (src) or an icon (icon).
  */
-type Image = {
-  src: string;
-  alt?: Label;
-};
+type Image =
+ | { src?: never, icon: RcIconType; alt: Label; }
+ | { src: string; icon?: never, alt: Label; };
 
 /**
  * Optional pill badge, typically used to highlight a tag or state.
@@ -113,6 +115,12 @@ interface RcItemCardProps {
   /** Makes the card clickable and emits 'card-click' on click/enter/space */
   clickable?: boolean;
 
+  /** The card will have same style as hover clickable with the blue border when selected */
+  selected?: boolean;
+
+  /** Disables the card, preventing clicks and keyboard interaction */
+  disabled?: boolean;
+
   role?: 'link' | 'button' | undefined;
 }
 
@@ -131,6 +139,10 @@ const emit = defineEmits<{(e: 'card-click', value?: ItemValue): void; (e: 'actio
  * which then gets used to ignore 'card-click'
  */
 function _handleCardClick(e: MouseEvent | KeyboardEvent) {
+  if (props.disabled) {
+    return;
+  }
+
   const interactiveSelector = '[item-card-action]';
 
   // Prevent card click if the user clicks on an inner actionable element like repo, category, or tag
@@ -162,8 +174,8 @@ const statusTooltips = computed(() => props.header.statuses?.map((status) => lab
 
 const cardMeta = computed(() => ({
   ariaLabel:       props.clickable ? t('itemCard.ariaLabel.clickable', { cardTitle: labelText(props.header.title) }) : undefined,
-  tabIndex:        props.clickable ? '0' : undefined,
-  role:            props.role ?? (props.clickable ? 'button' : undefined),
+  tabIndex:        props.clickable && !props.disabled ? '0' : undefined,
+  role:            props.role ?? (props.clickable && !props.disabled ? 'button' : undefined),
   actionMenuLabel: props.actions && t('itemCard.actionMenu.label', { cardTitle: labelText(props.header.title) }),
 }));
 
@@ -177,7 +189,7 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
     :data-testid="`item-card-${id}`"
     :class="{
       'clickable':
-        clickable
+        clickable && !disabled,'selected': selected, 'disabled': disabled
     }"
     @click="_handleCardClick"
   >
@@ -190,11 +202,19 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
               :class="['item-card-image', variant]"
               data-testid="item-card-image"
             >
-              <LazyImage
-                :src="image.src"
-                :alt="imageAlt"
-                :style="{'width': '40px', 'height': '40px', 'object-fit': 'contain'}"
-              />
+              <template v-if="image.icon">
+                <RcIcon
+                  :type="image.icon"
+                  size="xxlarge"
+                />
+              </template>
+              <template v-else-if="image.src">
+                <LazyImage
+                  :src="image.src"
+                  :alt="imageAlt"
+                  :style="{'width': '40px', 'height': '40px', 'object-fit': 'contain'}"
+                />
+              </template>
             </div>
           </slot>
           <slot name="item-card-pill">
@@ -229,11 +249,19 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
                   :class="['item-card-image', variant]"
                   data-testid="item-card-image"
                 >
-                  <LazyImage
-                    :src="image.src"
-                    :alt="imageAlt"
-                    :style="{'width': '24px', 'height': '24px', 'object-fit': 'contain'}"
-                  />
+                  <template v-if="image.icon">
+                    <RcIcon
+                      :type="image.icon"
+                      size="xlarge"
+                    />
+                  </template>
+                  <template v-else-if="image.src">
+                    <LazyImage
+                      :src="image.src"
+                      :alt="imageAlt"
+                      :style="{'width': '32px', 'height': '32px', 'object-fit': 'contain'}"
+                    />
+                  </template>
                 </div>
               </slot>
             </template>
@@ -286,7 +314,10 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
           </div>
         </div>
 
-        <slot name="item-card-sub-header" />
+        <slot name="item-card-sub-header">
+          <!-- DIV added to add the gap if the sub-header is not provided -->
+          <div />
+        </slot>
 
         <template v-if="$slots['item-card-content']">
           <slot name="item-card-content">
@@ -324,10 +355,26 @@ $image-medium-box-width: 48px;
   background: var(--body-bg);
   cursor: v-bind(cursorValue);
 
-  &.clickable:hover {
+  &.clickable:hover,
+  &.selected {
     border-color: var(--primary);
   }
 
+  &.disabled {
+    cursor: not-allowed;
+    background-color: var(--disabled-bg);
+    color: var(--disabled-text);
+
+    .item-card-image {
+      background-color: var(--disabled-bg);
+    }
+
+    .item-card-header-title,
+    .item-card-content {
+      color: var(--disabled-text);
+    }
+  }
+
   &:has(.item-card-header-left:focus-visible) {
     border-color: var(--primary);
     @include focus-outline;
@@ -344,8 +391,9 @@ $image-medium-box-width: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: #fff;
+    background: var(--rc-image-bg);
     border-radius: var(--border-radius);
+    color: var(--rc-image-color);
 
     &.small {
       width: 32px;
@@ -362,6 +410,10 @@ $image-medium-box-width: 48px;
     height: 24px;
     color: var(--body-text);
 
+    &.small {
+      height: 32px;
+    }
+
     &-left,
     &-right {
       display: flex;

package/store/prefs.js

@@ -122,6 +122,9 @@ export const READ_SUPPORT_NOTICE = create('read-support-notice', '', { parseJSON
 export const READ_UPCOMING_SUPPORT_NOTICE = create('read-upcoming-support-notice', '', { parseJSON });
 export const READ_ANNOUNCEMENTS = create('read-announcements', '', { parseJSON });
 
+// Hidden banners
+export const HIDE_SUSE_APP_COLLECTION_REPO_BANNER = create('hide-suse-app-collection-repo-banner', false);
+
 // --------------------
 
 const cookiePrefix = 'R_';