Provided default breakpoints when there's nothing defined

[gayanSandamal]

Description

Problem

When using old flow which doesn't have screen size breakpoints if throws undefined as the breakpoints are not defined under const breakpoints = b.sort((a, b) => a.px - b.px)

Solution

Provided default breakpoints when there's no breakpoints defined as per the documentation

This doesn't require any updates of the documentation of E2E tests

Related Issue(s)

#1370

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label

[Steve-Mcl]

Suggestions added.

While what you had would work in ideal conditions. Since this issue locks up the dashboard when it happens, I would prefer the check & default to be a little more guarded - i.e. apply defaults when breakpoints are missing OR not an array OR an empty array. While not a complete test of validity, it does ensure breakpoints are a valid array.

Please decide (and test) if my suggestion is ok with you or not.

[gayanSandamal]

default

@Steve-Mcl thank you for the suggestions provided. I've tested them locally with all the scenarios we can have in the this.page.breakpoints such as undefined, null, {}, [] and "".
Guard you suggested worked perfectly all the scenarios. Therefore I'm committing the suggestions you made in GH