Resolving nested Formly UI Schema, style fixes with test validation

[lukestanley]

Cypress ran into system specific issues and was very slow to start on my PC, so instead, I used Playwright to emulate issues / validate correct behaviour based on issues #605 and #607. (see playwright/issue-605-minimal-repros.spec.ts).

The end-to-end Playwright tests can be pointed at develop branch (deployed to https://dev.app.kendra.io ) or the main branch (deployed to https://app.kendra.io ), or ran for the current branch. The issue-605-minimal-repros.spec.ts Playwright tests show that the main branch has no errors, that develop has existing errors, and that this branch corrects the errors with all passing (and running many times faster for me).
Build with regression: https://kendraio-7lw9scl28-kendraio.vercel.app / https://kendraio-app-git-develop-kendraio.vercel.app

Fixed build: https://kendraio-app-git-develop-angular-18-fixes-kendraio.vercel.app

#607 Form Styling: Cards And Action Buttons

Regression: repeated sections look flatter, the button colour is different, and the add/remove controls stretch across the available width. Fix: restore the expected compact styling.

Bug	Fixed

#605 Lineup Field: Artist Selector

Regression: the lineup row appears as a plain text box. Fix: show the expected artist selector.

Bug	Fixed

#605 Connect Dialog: Missing Spacing

Regression: the form field sits against the dialog edge. Fix: restore the expected spacing.

Bug	Fixed

#605 User Page: Large Profile Image And Buttons

Regression: the profile image stretches to the full page width. Fix: keep the profile image and account controls at a sensible size.

Bug	Fixed

#605 Steppingstones: World Map Missing

Regression: the map area is blank after selecting P5. Fix: show the world map with country shapes and location markers.

Bug	Fixed

#605 Composer List: Readable Names

Regression: the composer name appears as [object Object]. Fix: show the readable composer label.

Bug	Fixed

#605 YouTube Video Details: Null Field

Regression: the type: "null" display field crashes because NullTypeComponent tries to read .value from a missing formControl. Fix: render the read-only null field without stopping later fields.

Bug	Fixed

#605 YouTube Video Details: Tags Widget

Regression: the tags widget crashes while rendering ng-select because ng-select-selection-model is not provided. Fix: render the existing tags control without Angular errors.

Bug	Fixed

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
kendraio-app	Ready	Preview, Comment	Jun 24, 2026 3:48pm

[lukestanley]

@copilot review issues #605 and #607 and how well the changes in the src directory of this branch (develop-angular-18-fixes) resolves them. Aim to rerun playwright/issue-605-minimal-repros.spec.ts on the https://dev.app.kendra.io (develop), https://app.kendra.io (main branch), and this branch which Vercel has deployed a build to (https://kendraio-app-git-develop-angular-18-fixes-kendraio.vercel.app) - focus on how well the source directory fixes and the 605 spec tests address the problems enumerated in issue 605 over other considerations.

[Copilot]

@copilot review issues #605 and #607 and how well the changes in the src directory of this...

I reviewed the source changes in src/ on this branch against issues #605 and #607. Here's my analysis:

Source fixes and how they address the issues:

1. kendraio.form.service.ts – Nested Formly UI Schema resolution (Issue Angular 18 upgrade: testing Flows on develop for merging #605: backstage/addgig lineup regression, teosto/unidentifiedWorksList [object Object])

   • The fix wraps the fieldArray mapping logic in mapFieldArray() which correctly handles the case where fieldArray is a function (lazy/deferred config) rather than a plain object. Previously the code always treated it as an object, which broke nested ui:widget resolution (e.g. blocks widget inside array items).
   • This directly addresses the backstage lineup regression (blocks widget inside array items not rendering) and the teosto nested-object display issue.

2. map-block.component.ts / .html (Issue Angular 18 upgrade: testing Flows on develop for merging #605: steppingstones/transposedspreadsheet map not displaying)

   • Removed dependency on leaflet.markercluster and markerClusterGroup which was crashing with markerClusterGroup is not a function.
   • Fixed DOMPurify import to use the shared dom-sanitiser.js wrapper (fixing sanitize is not a function).
   • Improved layer management: markers are now collected in a local array and assigned at the end; country GeoJSON layers are appended immutably via spread.
   • Tightened the lat/long null check.

3. blocks-dialog.component.html (Issue Style fixes for Material design upgrade #607: dialog padding)

   • Wrapped dialog content in <mat-dialog-content> which provides Material Design standard padding.

4. user-page.component.html / .scss (Issue Style fixes for Material design upgrade #607: full-width avatar/buttons)

   • Added .profile-picture class with fixed 96×96px dimensions.

Playwright issue-605-minimal-repros.spec.ts test coverage:

The 7 tests directly target the regressions enumerated in #605:

• keeps Formly array cards, shadows, and buttons compact → backstage/bandsintown button width + card shadow regressions
• renders an array item blocks widget → backstage lineup artist search regression
• opens a Flow dialog with enough padding → connect dialog padding regression (Style fixes for Material design upgrade #607)
• can display a mocked logged-in user page without full-width avatar or buttons → user page style regression (Style fixes for Material design upgrade #607)
• renders a map with custom pins and countries without sanitizer crashes → steppingstones map crash
• renders Steppingstones P5 and Non-Nuclear Weapon State maps from the real Flow dropdown → steppingstones map data regression
• renders nested object arrays in the Formly table widget → teosto [object Object] regression

CI status: The existing Cypress regression suite passes (51/51 specs, 0 failures). Vercel preview deployment succeeded.

Limitations of this review: I was unable to run the Playwright tests from this sandbox due to network restrictions (npm install fails because cdn.sheetjs.com is unreachable, and external deployments are also blocked). The tests should be run locally or in a CI environment that has full network access to validate against the three deployments.

[lukestanley]

@dahacouk The bot wasn't allowed free reign to check the sites but the top of this pull request should show each problem and fix clearly now.

[dahacouk]

@lukestanley can we make sure there are bi-directional links with the original issues? And also that those issues show the updated UI? Is that the best way? We can discuss. Cheers!