@rancher/shell 3.0.9 → 3.0.10

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

package/rancher-components/Pill/RcCounterBadge/RcCounterBadge.vue

@@ -11,27 +11,27 @@ const displayCount = computed(() => props.count < 1000 ? props.count : '999+');
     :class="{[props.type]: true, disabled: props.disabled}"
     data-testid="rc-counter-badge"
   >
-    {{ displayCount }}
+    <span class="count">{{ displayCount }}</span>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .rc-counter-badge {
+    box-sizing: border-box;
+    height: 21px;
+
     display: inline-flex;
-    padding: 1px 8px;
+    padding: 2px 8px;
     align-items: center;
-    gap: 8px;
 
     border-radius: 30px;
     border: 1px solid var(--rc-active-border);
 
-    overflow: hidden;
-    text-overflow: ellipsis;
     font-family: Lato;
-    font-size: 13px;
+    font-size: 12px;
     font-style: normal;
     font-weight: 400;
-    line-height: 22px;
+    line-height: 17px;
     color: var(--body-text);
 
     &.active {

package/rancher-components/Pill/RcStatusBadge/RcStatusBadge.vue

@@ -20,17 +20,20 @@ const { backgroundColor, borderColor, textColor } = useStatusColors(status, 'out
 
 <style lang="scss" scoped>
 .rc-status-badge {
+    box-sizing: border-box;
+    height: 21px;
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 1px 7px;
+    padding: 2px 7px;
 
     border: 1px solid transparent;
     border-radius: 30px;
 
     font-family: Lato;
     font-size: 12px;
-    line-height: 19px;
+    line-height: 17px;
 
     background-color: v-bind(backgroundColor);
     border-color: v-bind(borderColor);

package/rancher-components/RcIcon/types.ts

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

package/rancher-components/RcSection/RcSection.test.ts

@@ -0,0 +1,323 @@
+import { mount } from '@vue/test-utils';
+import RcSection from './RcSection.vue';
+
+describe('component: RcSection', () => {
+  const defaultProps = {
+    type:       'primary' as const,
+    mode:       'with-header' as const,
+    background: 'primary' as const,
+    expandable: false,
+    title:      'Test title',
+  };
+
+  describe('type prop', () => {
+    it('should apply type-primary class when type is "primary"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, type: 'primary' } });
+
+      expect(wrapper.find('.rc-section').classes()).toContain('type-primary');
+    });
+
+    it('should apply type-secondary class when type is "secondary"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, type: 'secondary' } });
+
+      expect(wrapper.find('.rc-section').classes()).toContain('type-secondary');
+    });
+  });
+
+  describe('background prop', () => {
+    it('should apply bg-primary class when background is "primary"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, background: 'primary' } });
+
+      expect(wrapper.find('.rc-section').classes()).toContain('bg-primary');
+    });
+
+    it('should apply bg-secondary class when background is "secondary"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, background: 'secondary' } });
+
+      expect(wrapper.find('.rc-section').classes()).toContain('bg-secondary');
+    });
+
+    it('should default to "primary" background when no background prop and no parent', () => {
+      const { background: _, ...propsWithoutBg } = defaultProps;
+      const wrapper = mount(RcSection, { props: propsWithoutBg });
+
+      expect(wrapper.find('.rc-section').classes()).toContain('bg-primary');
+    });
+
+    it('should alternate background from parent via provide/inject', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, background: 'primary', expanded: true
+        },
+        slots: {
+          default: {
+            components: { RcSection },
+            template:   '<RcSection type="secondary" mode="with-header" :expandable="false" title="Child" />',
+          },
+        },
+      });
+
+      const childSection = wrapper.findAll('.rc-section')[1];
+
+      expect(childSection.classes()).toContain('bg-secondary');
+    });
+
+    it('should allow explicit background to override the injected alternation', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, background: 'primary', expanded: true
+        },
+        slots: {
+          default: {
+            components: { RcSection },
+            template:   '<RcSection type="secondary" mode="with-header" :expandable="false" background="primary" title="Child" />',
+          },
+        },
+      });
+
+      const childSection = wrapper.findAll('.rc-section')[1];
+
+      expect(childSection.classes()).toContain('bg-primary');
+    });
+  });
+
+  describe('mode prop', () => {
+    it('should render section-header when mode is "with-header"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, mode: 'with-header' } });
+
+      expect(wrapper.find('.section-header').exists()).toBe(true);
+    });
+
+    it('should not render section-header when mode is "no-header"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, mode: 'no-header' } });
+
+      expect(wrapper.find('.section-header').exists()).toBe(false);
+    });
+
+    it('should apply no-header class to content when mode is "no-header"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, mode: 'no-header' } });
+
+      expect(wrapper.find('.section-content').classes()).toContain('no-header');
+    });
+  });
+
+  describe('title prop', () => {
+    it('should render the title text', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, title: 'My Section' } });
+
+      expect(wrapper.find('.title').text()).toBe('My Section');
+    });
+
+    it('should render the title slot when provided', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps },
+        slots: { title: '<span class="custom-title">Custom</span>' },
+      });
+
+      expect(wrapper.find('.custom-title').exists()).toBe(true);
+      expect(wrapper.find('.custom-title').text()).toBe('Custom');
+    });
+  });
+
+  describe('expandable behavior', () => {
+    it('should render toggle button when expandable is true', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, expandable: true } });
+
+      expect(wrapper.find('.toggle-button').exists()).toBe(true);
+    });
+
+    it('should not render toggle button when expandable is false', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, expandable: false } });
+
+      expect(wrapper.find('.toggle-button').exists()).toBe(false);
+    });
+
+    it('should set aria-expanded on toggle button when expandable', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: true
+        }
+      });
+
+      expect(wrapper.find('.toggle-button').attributes('aria-expanded')).toBe('true');
+    });
+
+    it('should set aria-expanded="false" on toggle button when collapsed', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: false
+        }
+      });
+
+      expect(wrapper.find('.toggle-button').attributes('aria-expanded')).toBe('false');
+    });
+
+    it('should set aria-label to "Collapse section" on toggle button when expanded', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: true
+        }
+      });
+
+      expect(wrapper.find('.toggle-button').attributes('aria-label')).toBe('Collapse section');
+    });
+
+    it('should set aria-label to "Expand section" on toggle button when collapsed', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: false
+        }
+      });
+
+      expect(wrapper.find('.toggle-button').attributes('aria-label')).toBe('Expand section');
+    });
+
+    it('should emit update:expanded with false when clicking an expanded header', async() => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: true
+        }
+      });
+
+      await wrapper.find('.section-header').trigger('click');
+
+      expect(wrapper.emitted('update:expanded')).toHaveLength(1);
+      expect(wrapper.emitted('update:expanded')![0]).toStrictEqual([false]);
+    });
+
+    it('should emit update:expanded with true when clicking a collapsed header', async() => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: false
+        }
+      });
+
+      await wrapper.find('.section-header').trigger('click');
+
+      expect(wrapper.emitted('update:expanded')).toHaveLength(1);
+      expect(wrapper.emitted('update:expanded')![0]).toStrictEqual([true]);
+    });
+
+    it('should not emit update:expanded when clicking a non-expandable header', async() => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, expandable: false } });
+
+      await wrapper.find('.section-header').trigger('click');
+
+      expect(wrapper.emitted('update:expanded')).toBeUndefined();
+    });
+
+    it('should emit update:expanded when toggle button is clicked', async() => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: true
+        }
+      });
+
+      await wrapper.find('.toggle-button').trigger('click');
+
+      expect(wrapper.emitted('update:expanded')).toHaveLength(1);
+      expect(wrapper.emitted('update:expanded')![0]).toStrictEqual([false]);
+    });
+  });
+
+  describe('expanded prop', () => {
+    it('should default expanded to true', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, expandable: true } });
+
+      expect(wrapper.find('.section-content').exists()).toBe(true);
+    });
+
+    it('should render content when expanded is true', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps, expanded: true },
+        slots: { default: '<p>Content</p>' },
+      });
+
+      expect(wrapper.find('.section-content').exists()).toBe(true);
+      expect(wrapper.find('p').text()).toBe('Content');
+    });
+
+    it('should hide content when expanded is false', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps, expanded: false },
+        slots: { default: '<p>Content</p>' },
+      });
+
+      expect(wrapper.find('.section-content').exists()).toBe(false);
+    });
+
+    it('should apply expandable-content class when expandable is true', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: true
+        }
+      });
+
+      expect(wrapper.find('.section-content').classes()).toContain('expandable-content');
+    });
+
+    it('should not apply expandable-content class when expandable is false', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: false, expanded: true
+        }
+      });
+
+      expect(wrapper.find('.section-content').classes()).not.toContain('expandable-content');
+    });
+
+    it('should add collapsed class to header when not expanded', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: false
+        }
+      });
+
+      expect(wrapper.find('.section-header').classes()).toContain('collapsed');
+    });
+  });
+
+  describe('slots', () => {
+    it('should render badges slot inside right-wrapper', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps },
+        slots: { badges: '<span class="test-badge">Badge</span>' },
+      });
+
+      expect(wrapper.find('.right-wrapper .status-badges .test-badge').exists()).toBe(true);
+    });
+
+    it('should render actions slot inside right-wrapper', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps },
+        slots: { actions: '<button class="test-action">Act</button>' },
+      });
+
+      expect(wrapper.find('.right-wrapper .actions .test-action').exists()).toBe(true);
+    });
+
+    it('should not render right-wrapper when no badges or actions slots', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps } });
+
+      expect(wrapper.find('.right-wrapper').exists()).toBe(false);
+    });
+
+    it('should render counter slot', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps },
+        slots: { counter: '<span class="test-counter">5</span>' },
+      });
+
+      expect(wrapper.find('.test-counter').exists()).toBe(true);
+    });
+
+    it('should render errors slot', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps },
+        slots: { errors: '<span class="test-error">!</span>' },
+      });
+
+      expect(wrapper.find('.test-error').exists()).toBe(true);
+    });
+  });
+});