Custom banner header without fontSize breaks top navigation

[braunsonm]

Setup

• Rancher version: v2.8.0
• Rancher UI Extensions: None
• Browser type & version: Chrome

Describe the bug
In Rancher 2.7.9, if you customized your UI to have a custom header banner, the fontSize is not a required field. This worked fine and it fell back to the default of 14px.

In Rancher 2.8.0, fontSize not being set will result in the entire Vue component failing to render, breaking navigation.

The error comes from this line: https://github.com/rancher/dashboard/blob/master/shell/components/nav/TopLevelMenu.vue#L79
which will be undefined if the fontSize is not set.

To Reproduce
Set a custom header banner without a fontSize defined.

Result
Your navigation will no longer render and you will see console errors.

Expected Result
The navbar should work with a fallback default fontSize

[braunsonm]

Seems like the UI configuration JSON also changed the key from banner to bannerHeader in 2.8.0. Existing configurations will be broken in other ways if a migration doesn't take place (didn't in my case).

[aalves08]

@braunsonm I cannot reproduce this in v2.8.0. Can you send the me that old JSON structure, please? Also, did you update Rancher recently? Was it from v2.7.9 to v2.8.0?

How did you achieve the "setting" of that fontSize to a null, for example? We cannot change the Select on the Banners configuration for it to be a null.

I had to hack the network request to mimic that and even with that, I couldn't reproduce this.

Thanks in advance

[braunsonm]

The old, broken, JSON structure is

{
  "banner": {
    "color": "#78c9cf",
    "background": "#27292e",
    "text": "Hello World!"
  },
  "showHeader": "true",
  "showFooter": "false"
}

@aalves08

[richard-cox]

/backport v2.8.next1

[richard-cox]

Workaround details in #10368 (comment)

[aalves08]

Removing the label automation-candidate and remove the label QA-manual-test because there's a unit test that covers this scenario, introduced by https://github.com/rancher/dashboard/pull/10242/files#diff-141a080e9f374303d0363dc0a050d25097537505821af46c93df538c103031c1

FYI @nwmac @gaktive

[izaac]

The component unit test covers this and covers this scenario properly cc @yonasberhe23