Fix for custom banner header without fontSize breaks top navigation (old obj structure) (#10242)

* support old ui-banner setting structure + update unit test to cover this scenario

* fix lint issue

---------

Co-authored-by: Alexandre Alves <aalves@Alexandres-MacBook-Pro.local>
This commit is contained in:
Alexandre Alves 2024-01-24 09:55:28 +00:00 committed by GitHub
parent d154e53bac
commit a35ebb2c2b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 41 additions and 3 deletions

View File

@ -73,12 +73,17 @@ export default {
if (bannerSettings) {
const parsed = JSON.parse(bannerSettings.value);
const {
showFooter, showHeader, bannerFooter, bannerHeader
showFooter, showHeader, bannerFooter, bannerHeader, banner
} = parsed;
// add defaults to accomodate older JSON structures for banner definitions without breaking the UI
// https://github.com/rancher/dashboard/issues/10140
const bannerHeaderFontSize = bannerHeader?.fontSize || banner?.fontSize || '14px';
const bannerFooterFontSize = bannerFooter?.fontSize || banner?.fontSize || '14px';
return {
headerFont: showHeader === 'true' ? this.pxToEm(bannerHeader.fontSize) : '0px',
footerFont: showFooter === 'true' ? this.pxToEm(bannerFooter.fontSize) : '0px'
headerFont: showHeader === 'true' ? this.pxToEm(bannerHeaderFontSize) : '0px',
footerFont: showFooter === 'true' ? this.pxToEm(bannerFooterFontSize) : '0px'
};
}

View File

@ -1,5 +1,6 @@
import { mount, Wrapper } from '@vue/test-utils';
import TopLevelMenu from '@shell/components/nav/TopLevelMenu';
import { SETTING } from '@shell/config/settings';
// DISCLAIMER: This should not be added here, although we have several store requests which are irrelevant
const defaultStore = {
@ -32,6 +33,38 @@ describe('topLevelMenu', () => {
expect(cluster.exists()).toBe(true);
});
it('should not "crash" the component if the structure of banner settings is in an old format', () => {
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
mocks: {
$store: {
getters: {
'management/all': () => [{ name: 'whatever' },
// object based on https://github.com/rancher/dashboard/issues/10140#issuecomment-1883252402
{
id: SETTING.BANNERS,
value: JSON.stringify({
banner: {
color: '#78c9cf',
background: '#27292e',
text: 'Hello World!'
},
showHeader: 'true',
showFooter: 'true'
})
}],
...defaultStore
},
},
},
stubs: ['BrandImage', 'nuxt-link']
});
expect(wrapper.vm.globalBannerSettings).toStrictEqual({
headerFont: '2em',
footerFont: '2em'
});
});
describe('searching a term', () => {
describe('should displays a no results message if have clusters but', () => {
it('given no matching clusters', () => {