@rancher/shell 3.0.10 → 3.0.11

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

@@ -379,7 +379,7 @@ export default {
     /* Look for annotation to say this app is a legacy migrated app (we look in either place for now) */
     this.migratedApp = (this.existing?.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.MIGRATED] === 'true');
 
-    if (this.repo.isSuseAppCollection) {
+    if (this.repo?.isSuseAppCollection) {
       let defaultSelectedSecret = await this.$store.getters['cluster/byId'](SECRET, `cattle-system/${ this.repo.spec.clientSecret.name }`);
 
       if (!defaultSelectedSecret) {
@@ -823,7 +823,7 @@ export default {
         }
       }
 
-      if (this.repo.isSuseAppCollection) {
+      if (this.repo?.isSuseAppCollection) {
         await this.initializeDataForNamespaceChanges();
       }
     },
@@ -938,7 +938,7 @@ export default {
 
     async initializeDataForNamespaceChanges() {
       // Skip the flow if the data still not fetched, it will trigger after fetching manually
-      if (!this.appCoDataFetched) {
+      if (this.appCoDataFetched) {
         try {
           this.defaultImagePullSecret = await this.$store.dispatch('cluster/find', { type: SECRET, id: `${ this.targetNamespace }/${ this.repo.spec.clientSecret.name }-image-pull-secret` });
         } catch (e) {
@@ -1028,7 +1028,7 @@ export default {
     },
 
     async setImagePullSecretData() {
-      if (this.selectedSecret && this.repo.isSuseAppCollection && this.dontUseDefaultOption !== null) {
+      if (this.selectedSecret && this.repo?.isSuseAppCollection && this.dontUseDefaultOption !== null) {
         if (!this.dontUseDefaultOption && this.defaultImagePullSecret) {
           // If the default option is used and the default secret already exists, use it
           this.selectedImagePullSecret = this.defaultImagePullSecret.name;
@@ -1159,7 +1159,7 @@ export default {
 
         // Create namespace if it doesn't exist (before hooks run)
         // And only if it is SUSE APP Collection, overall should just do the same flow
-        if (!isUpgrade && this.isNamespaceNew && this.repo.isSuseAppCollection) {
+        if (!isUpgrade && this.isNamespaceNew && this.repo?.isSuseAppCollection) {
           await this.createNamespaceIfNeeded();
         }
 
@@ -1355,7 +1355,7 @@ export default {
           ...migratedAnnotations,
           [CATALOG_ANNOTATIONS.SOURCE_REPO_TYPE]: this.chart.repoType,
           [CATALOG_ANNOTATIONS.SOURCE_REPO_NAME]: this.chart.repoName,
-          ...(this.repo.isSuseAppCollection ? { [CATALOG_ANNOTATIONS.SUSE_APP_COLLECTION]: 'true' } : {}),
+          ...(this.repo?.isSuseAppCollection ? { [CATALOG_ANNOTATIONS.SUSE_APP_COLLECTION]: 'true' } : {}),
         },
         values,
       };
@@ -1497,7 +1497,7 @@ export default {
     },
 
     async createImagePullSecret() {
-      if (!this.repo.isSuseAppCollection) {
+      if (!this.repo?.isSuseAppCollection) {
         return;
       }
 
@@ -1655,7 +1655,6 @@ export default {
             </div>
           </div>
           <NameNsDescription
-            v-if="showNameEditor"
             v-model:value="value"
             :description-hidden="true"
             :mode="mode"
@@ -1686,7 +1685,7 @@ export default {
             </template>
           </NameNsDescription>
           <div
-            v-if="repo.isSuseAppCollection"
+            v-if="repo?.isSuseAppCollection"
             class="mb-20"
           >
             <Banner

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

@@ -2,6 +2,8 @@
 import { mapGetters } from 'vuex';
 import { SERVICE } from '@shell/config/types';
 import Loading from '@shell/components/Loading';
+import kialiSvg from '~shell/assets/images/vendor/kiali.svg';
+import jaegerSvg from '~shell/assets/images/vendor/jaeger.svg';
 export default {
   components: { Loading },
 
@@ -23,7 +25,7 @@ export default {
 
     kialiLogo() {
       // @TODO move to theme css
-      return require(`~shell/assets/images/vendor/kiali.svg`);
+      return kialiSvg;
     },
 
     kialiUrl() {
@@ -31,7 +33,7 @@ export default {
     },
 
     jaegerLogo() {
-      return require(`~shell/assets/images/vendor/jaeger.svg`);
+      return jaegerSvg;
     },
 
     jaegerUrl() {

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

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import { SERVICE } from '@shell/config/types';
 import IconMessage from '@shell/components/IconMessage';
 import LazyImage from '@shell/components/LazyImage';
+import longhornSvg from '~shell/assets/images/vendor/longhorn.svg';
 import Loading from '@shell/components/Loading';
 
 export default {
@@ -24,7 +25,7 @@ export default {
 
   data() {
     return {
-      longhornImgSrc: require('~shell/assets/images/vendor/longhorn.svg'),
+      longhornImgSrc: longhornSvg,
       uiServices:     null
     };
   },

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

@@ -9,6 +9,8 @@ import LazyImage from '@shell/components/LazyImage';
 import SimpleBox from '@shell/components/SimpleBox';
 import { canViewAlertManagerLink, canViewGrafanaLink, canViewPrometheusLink } from '@shell/utils/monitoring';
 import Loading from '@shell/components/Loading';
+import grafanaSrc from '~shell/assets/images/vendor/grafana.svg';
+import prometheusSrc from '~shell/assets/images/vendor/prometheus.svg';
 
 export default {
   components: {
@@ -23,8 +25,6 @@ export default {
   },
 
   data() {
-    const grafanaSrc = require('~shell/assets/images/vendor/grafana.svg');
-    const prometheusSrc = require('~shell/assets/images/vendor/prometheus.svg');
     const currentCluster = this.$store.getters['currentCluster'];
 
     return {

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

@@ -4,6 +4,7 @@ import { NEU_VECTOR_NAMESPACE } from '@shell/config/product/neuvector';
 
 import LazyImage from '@shell/components/LazyImage';
 import Loading from '@shell/components/Loading';
+import neuvectorSvg from '~shell/assets/images/vendor/neuvector.svg';
 
 export default {
   components: { LazyImage, Loading },
@@ -11,7 +12,7 @@ export default {
   data() {
     return {
       externalLinks:   [],
-      neuvectorImgSrc: require('~shell/assets/images/vendor/neuvector.svg'),
+      neuvectorImgSrc: neuvectorSvg,
     };
   },
 

package/pages/c/_cluster/settings/performance.vue

@@ -237,11 +237,6 @@ export default {
             {{ t('performance.serverPagination.label') }}
           </h2>
           <p>{{ t('performance.serverPagination.description') }}</p>
-          <Banner
-            color="warning"
-          >
-            <div v-clean-html="t(`performance.serverPagination.featureFlag`, { ffUrl }, true)" />
-          </Banner>
           <Collapse
             :title="t('performance.serverPagination.applicable')"
             :open="steveCacheEnabled && ssPApplicableTypesOpen"

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

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import ChartReadme from '@shell/components/ChartReadme';
 import LazyImage from '@shell/components/LazyImage';
 import { MANAGEMENT } from '@shell/config/types';
+import genericPluginSvg from '~shell/assets/images/generic-plugin.svg';
 import { SETTING } from '@shell/config/settings';
 import { useWatcherBasedSetupFocusTrapWithDestroyIncluded } from '@shell/composables/focusTrap';
 import { getPluginChartVersionLabel, getPluginChartVersion } from '@shell/utils/uiplugins';
@@ -36,7 +37,7 @@ export default {
       infoVersion:      undefined,
       versionInfo:      undefined,
       versionError:     undefined,
-      defaultIcon:      require('~shell/assets/images/generic-plugin.svg'),
+      defaultIcon:      genericPluginSvg,
       headerBannerSize: 0,
       isActive:         false
     };

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

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import day from 'dayjs';
 import { mapPref, PLUGIN_DEVELOPER } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
+import genericPluginSvg from '~shell/assets/images/generic-plugin.svg';
 import { allHash } from '@shell/utils/promise';
 import { CATALOG, UI_PLUGIN, MANAGEMENT, ZERO_TIME } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
@@ -73,7 +74,7 @@ export default {
       menuTargetEvent:                null,
       menuOpen:                       false,
       hasFeatureFlag:                 true,
-      defaultIcon:                    require('~shell/assets/images/generic-plugin.svg'),
+      defaultIcon:                    genericPluginSvg,
       reloadRequired:                 false,
       rancherVersion:                 null
     };

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

@@ -766,8 +766,7 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStores = {
           { resource: CAPI.RANCHER_CLUSTER, context: ['side-bar'] },
           { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
           { resource: CATALOG.APP, context: ['branding'] },
-          SECRET,
-          CAPI.MACHINE_SET
+          SECRET
         ],
         generic: false,
       }

package/plugins/steve/subscribe.js

@@ -131,11 +131,17 @@ const isWaitingForDestroy = (storeName, store) => {
 };
 
 const waitForSettingsSchema = (storeName, store) => {
-  return waitFor(() => isWaitingForDestroy(storeName, store) || !!store.getters['management/byId'](SCHEMA, MANAGEMENT.SETTING));
+  return waitFor(
+    () => isWaitingForDestroy(storeName, store) || !!store.getters['management/byId'](SCHEMA, MANAGEMENT.SETTING),
+    'management settings schema to be available'
+  );
 };
 
 const waitForSettings = (storeName, store) => {
-  return waitFor(() => isWaitingForDestroy(storeName, store) || !!store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE));
+  return waitFor(
+    () => isWaitingForDestroy(storeName, store) || !!store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE),
+    'UI performance settings to be available'
+  );
 };
 
 const isAdvancedWorker = (ctx) => {
@@ -195,8 +201,20 @@ export async function createWorker(store, ctx) {
     };
   }
 
-  await waitForSettingsSchema(storeName, store);
-  await waitForSettings(storeName, store);
+  try {
+    await waitForSettingsSchema(storeName, store);
+    await waitForSettings(storeName, store);
+  } catch (e) {
+    // Clean up the mock worker and abort so callers are not permanently blocked.
+    if (store.$workers[storeName]?.destroy) {
+      store.$workers[storeName].destroy();
+    } else {
+      delete store.$workers[storeName];
+    }
+
+    return;
+  }
+
   if (store.$workers[storeName].waitingForDestroy()) {
     store.$workers[storeName].destroy();
 
@@ -382,6 +400,13 @@ const sharedActions = {
       if (!this.$workers[getters.storeName]) {
         await createWorker(this, ctx);
       }
+
+      // createWorker cleans up and returns early when schema/settings are unavailable.
+      // Guard against calling postMessage on a non-existent worker.
+      if (!this.$workers[getters.storeName]) {
+        return;
+      }
+
       const options = { parseJSON: false };
       const csrf = rootGetters['cookies/get']({ key: CSRF, options });
 

package/rancher-components/RcButton/RcButton.vue

@@ -253,7 +253,7 @@ button {
   &.btn-small {
     //:not(.btn-sm) is being used to make the style more specific to override global styles. We may want to get rid of those styles at some point.
     &, &:not(.btn-sm) {
-      line-height: 15px;
+      line-height: 140%;
       font-size: 12px;
       min-height: 24px;
 
@@ -265,7 +265,7 @@ button {
   &.btn-medium {
     //:not(.btn-sm) is being used to make the style more specific to override global styles. We may want to get rid of those styles at some point.
     &, &:not(.btn-sm) {
-      line-height: 18px;
+      line-height: 140%;
       font-size: 14px;
       min-height: 32px;
 
@@ -277,7 +277,7 @@ button {
   &.btn-large {
     // This is the default size brought by the global button styling
     &, &:not(.btn-sm) {
-      line-height: 20px;
+      line-height: 140%;
       font-size: 16px;
       min-height: 40px;
 

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

@@ -0,0 +1,253 @@
+import { mount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import RcButtonSplit from './RcButtonSplit.vue';
+import { ButtonVariant, ButtonSize } from '@components/RcButton/types';
+
+// v-dropdown is provided by floating-vue and must be mocked in unit tests.
+// The default slot is the trigger anchor; the popper slot is the dropdown content.
+const vDropdownMock = defineComponent({
+  template: `
+    <div>
+      <slot />
+      <slot name="popper" />
+    </div>
+  `,
+});
+
+const globalConfig = { global: { components: { 'v-dropdown': vDropdownMock } } };
+
+// RcButton and RcDropdownTrigger both use single-root attribute inheritance, so
+// the class added to the component falls through to the rendered <button> element.
+// Selectors like '.rc-button-split-action' refer directly to the <button> element.
+
+describe('rcButtonSplit.vue', () => {
+  it('renders the main action button', () => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    expect(wrapper.find('.rc-button-split-action').exists()).toBe(true);
+  });
+
+  it('renders the dropdown trigger', () => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    expect(wrapper.find('.rc-button-split-trigger').exists()).toBe(true);
+  });
+
+  it('emits click when the main action button is clicked', async() => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    await wrapper.find('.rc-button-split-action').trigger('click');
+
+    expect(wrapper.emitted('click')).toHaveLength(1);
+    expect(wrapper.emitted('click')![0][0]).toBeInstanceOf(MouseEvent);
+  });
+
+  it('does not emit click when the dropdown trigger is clicked', async() => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    await wrapper.find('.rc-button-split-trigger').trigger('click');
+
+    expect(wrapper.emitted('click')).toBeUndefined();
+  });
+
+  describe('variant prop', () => {
+    it.each([
+      ['primary', 'variant-primary'],
+      ['secondary', 'variant-secondary'],
+      ['tertiary', 'variant-tertiary'],
+    ] as [ButtonVariant, string][])('applies %s variant class to the action button', (variant, className) => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { variant } });
+
+      expect(wrapper.find('.rc-button-split-action').classes()).toContain(className);
+    });
+
+    it.each([
+      ['primary', 'variant-primary'],
+      ['secondary', 'variant-secondary'],
+      ['tertiary', 'variant-tertiary'],
+    ] as [ButtonVariant, string][])('applies %s variant class to the dropdown trigger button', (variant, className) => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { variant } });
+
+      expect(wrapper.find('.rc-button-split-trigger').classes()).toContain(className);
+    });
+  });
+
+  describe('size prop', () => {
+    it.each([
+      ['small', 'btn-small'],
+      ['medium', 'btn-medium'],
+      ['large', 'btn-large'],
+    ] as [ButtonSize, string][])('applies %s size class to the action button', (size, className) => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { size } });
+
+      expect(wrapper.find('.rc-button-split-action').classes()).toContain(className);
+    });
+
+    it.each([
+      ['small', 'btn-small'],
+      ['medium', 'btn-medium'],
+      ['large', 'btn-large'],
+    ] as [ButtonSize, string][])('applies %s size class to the dropdown trigger button', (size, className) => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { size } });
+
+      expect(wrapper.find('.rc-button-split-trigger').classes()).toContain(className);
+    });
+  });
+
+  describe('slots', () => {
+    it('renders default slot content in the main button', () => {
+      const wrapper = mount(RcButtonSplit, {
+        ...globalConfig,
+        slots: { default: 'Save' },
+      });
+
+      expect(wrapper.find('.rc-button-split-action').text()).toContain('Save');
+    });
+
+    it('renders before slot content in the main button', () => {
+      const wrapper = mount(RcButtonSplit, {
+        ...globalConfig,
+        slots: {
+          default: 'Save',
+          before:  '<span class="before-content">Before</span>',
+        },
+      });
+
+      expect(wrapper.find('.rc-button-split-action .before-content').exists()).toBe(true);
+    });
+
+    it('renders after slot content in the main button', () => {
+      const wrapper = mount(RcButtonSplit, {
+        ...globalConfig,
+        slots: {
+          default: 'Save',
+          after:   '<span class="after-content">After</span>',
+        },
+      });
+
+      expect(wrapper.find('.rc-button-split-action .after-content').exists()).toBe(true);
+    });
+
+    it('renders dropdownCollection slot content', () => {
+      const wrapper = mount(RcButtonSplit, {
+        ...globalConfig,
+        slots: { dropdownCollection: '<div class="dropdown-item-test">Item 1</div>' },
+      });
+
+      expect(wrapper.find('.dropdown-item-test').exists()).toBe(true);
+      expect(wrapper.find('.dropdown-item-test').text()).toStrictEqual('Item 1');
+    });
+  });
+
+  it('dropdown trigger has aria-haspopup="menu" attribute', () => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    expect(wrapper.find('.rc-button-split-trigger').attributes('aria-haspopup')).toBe('menu');
+  });
+
+  it('emits update:open when dropdown open state changes', async() => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    await wrapper.findComponent({ name: 'RcDropdown' }).vm.$emit('update:open', true);
+
+    expect(wrapper.emitted('update:open')).toHaveLength(1);
+    expect(wrapper.emitted('update:open')![0]).toStrictEqual([true]);
+  });
+
+  it('applies default variant "primary" when no variant is provided', () => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    expect(wrapper.find('.rc-button-split-action').classes()).toContain('variant-primary');
+  });
+
+  it('applies default size "medium" when no size is provided', () => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    expect(wrapper.find('.rc-button-split-action').classes()).toContain('btn-medium');
+  });
+
+  describe('aria label props', () => {
+    it('ariaLabel is applied to the action button', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { ariaLabel: 'Save document' } });
+
+      expect(wrapper.find('.rc-button-split-action').attributes('aria-label')).toBe('Save document');
+    });
+
+    it('ariaLabel is absent from the trigger button', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { ariaLabel: 'Save document' } });
+
+      expect(wrapper.find('.rc-button-split-trigger').attributes('aria-label')).toBeUndefined();
+    });
+
+    it('ariaLabelTrigger is applied to the trigger button', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { ariaLabelTrigger: 'More save options' } });
+
+      expect(wrapper.find('.rc-button-split-trigger').attributes('aria-label')).toBe('More save options');
+    });
+
+    it('ariaLabelTrigger is absent from the action button', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { ariaLabelTrigger: 'More save options' } });
+
+      expect(wrapper.find('.rc-button-split-action').attributes('aria-label')).toBeUndefined();
+    });
+
+    it('ariaLabelDropdown is forwarded to RcDropdown', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { ariaLabelDropdown: 'Save actions' } });
+
+      expect(wrapper.findComponent({ name: 'RcDropdown' }).props('ariaLabel')).toBe('Save actions');
+    });
+  });
+
+  describe('items prop', () => {
+    const items = [
+      { id: 'draft', label: 'Save as Draft' },
+      { id: 'template', label: 'Save as Template' },
+      { id: 'discard', label: 'Discard Changes' },
+    ];
+
+    it('renders an RcDropdownItem for each entry in items', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { items } });
+
+      const dropdownItems = wrapper.findAllComponents({ name: 'RcDropdownItem' });
+
+      expect(dropdownItems).toHaveLength(3);
+    });
+
+    it('renders each item\'s label text', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { items } });
+
+      const dropdownItems = wrapper.findAllComponents({ name: 'RcDropdownItem' });
+
+      expect(dropdownItems[0].text()).toContain('Save as Draft');
+      expect(dropdownItems[1].text()).toContain('Save as Template');
+      expect(dropdownItems[2].text()).toContain('Discard Changes');
+    });
+
+    it('emits select with the item id when a prop item is clicked', async() => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { items } });
+
+      await wrapper.findAllComponents({ name: 'RcDropdownItem' })[0].trigger('click');
+
+      expect(wrapper.emitted('select')).toHaveLength(1);
+      expect(wrapper.emitted('select')![0]).toStrictEqual(['draft']);
+    });
+
+    it('does not emit select when no items prop is provided', async() => {
+      const wrapper = mount(RcButtonSplit, globalConfig);
+
+      expect(wrapper.emitted('select')).toBeUndefined();
+    });
+
+    it('renders both prop items and dropdownCollection slot content when both are supplied', () => {
+      const wrapper = mount(RcButtonSplit, {
+        ...globalConfig,
+        props: { items: [{ id: 'draft', label: 'Save as Draft' }] },
+        slots: { dropdownCollection: '<div class="slot-item">Slot Item</div>' },
+      });
+
+      expect(wrapper.findAllComponents({ name: 'RcDropdownItem' })).toHaveLength(1);
+      expect(wrapper.find('.slot-item').exists()).toBe(true);
+      expect(wrapper.find('.slot-item').text()).toStrictEqual('Slot Item');
+    });
+  });
+});