Angular 18 upgrade (squashed) #500

lukestanley · 2024-11-11T11:01:44Z

Introduces Angular 18 compatibility, compatible Monaco Editor, Ag Grid issues, adds identifiers for Cypress tests to find, UI compatibility refactoring, styling and code clean-up, built on top of Gio's and J Black's work.

There were over 70 commits built on an old base branch, so to avoid introducing unintended regressions and to make sensible review process more possible, I rebuilt it as 6 commits, that merge diff patches from key commits. Many unneeded linting changes were removed. About half as many lines are used, and a lot less files are changed too.

I removed unrelated documentation changes and based it on develop so it will merge.

Angular & Dependency Upgrades
- Angular 18
- Angular Material (Removes legacy Material components)
  - Replaced deprecated MatLegacy* imports with current Mat* components
  - Updated class names (e.g., .mat-menu-item to .mat-mdc-menu-item)
  - Set appearance="outlined" for Material input fields
- CDK
- ESLint
- PWA dependencies with service worker integration in main.ts
Monaco Editor
- Changes Monaco Editor packages
- New loading and configuration code for Angular 18 compatibility
Ag Grid UI fixes
- Resolved compatibility issues with Angular 18
Component and UI Refactoring
- Material UI template updates
- Added mat-label for accessibility
- Updated Map Block dependencies (Leaflet and MarkerCluster)
- Replaced angular2-text-mask with maskito for input masking
- Updated Formly validation property naming (e.g., minlength to minLength)
Testing
- Added data-cy attributes for more reliable Cypress selection
- Improved Cypress intercept aliasing
- Enabled esModuleInterop
- Fix test file errors
- A test is disabled!
Styling & Code Clean-up
- Adjusted text and title alignment
- Added TypeScript types to address compile errors/warnings
- Updated Material theming and style variables
- Refined component-specific styles
- Removed unused CSS
- Messy: I had to undo a lot of deletion, might have missed readding some things correctly!

Risk Areas to Review

Material UI Refactoring: Check consistency of styling and class name updates across components
Angular & Ag Grid Compatibility: Watch for potential reactivity regressions with Angular 18
Form Validation & Input Masking: Verify Formly and maskito input masking reliability
Cypress Testing: Ensure accuracy of data-cy attributes and overall test stability

A more complete history may be helpful context, there are 117 commits in angular-18-upgrade-rebase: https://github.com/kendraio/kendraio-app/pull/496/commits (draft PR for easier reference that has filtering features the tree comparison view does not).

It builds, and tests are passing!

I noticed warnings, during build, that match the warnings in Gio's pull request so they are not a regression upon that.

I am not sure how to best include tasks and reference information that is on #487 backing up the existing angular-upgrade-18 branch and force merging this would help, and I am open to other ideas to ensure we don't loose the insights there. Discuss!

We are still on the look out for possible reactivity regressions. If we can get this (or something based on this) on production we can test it in a more realistic setting than the Vercel build.

The Vercel build is here.

Please review carefully, especially test changes, and there was a lot of manual work merging style changes, so there is greater risk of error there.

…lar, CDK, ESLint, PWA, and Material dependencies.

… errors.

vercel · 2024-11-11T11:01:48Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
kendraio-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 27, 2024 2:15pm

CodeKrakken

This all looks good. No comments - surprising for such a large PR. Good work!

gsambrotta · 2024-11-13T16:54:32Z

Nice work 👍
I left some minor comments.
And then looking at vercel preview, some style is missing:

Seems to me that the main problem is with Grid. It might be a style inclusion problem (see the comment I left for the style theme)
or maybe something with the AG Grid module.

CodeKrakken · 2024-11-13T17:03:28Z

I have noticed that when tests hang, they tend to be related to AG Grid. They don't fail, but they hang. Presumably the issues @gsambrotta found on the Vercel preview are not covered by our current tests - I suggest we remedy this.

lukestanley · 2024-11-13T17:15:27Z

Thanks both, good finds, I was adding to the description about the changes with the grid version upgrade and key patterns in the file changes of this when you added this!
I was unsure about some of the style changes, I can now check the Flow list and the schema list flows in the other versions.
@gsambrotta @CodeKrakken

…efect visible on the Flow at workflowCloud/listWorkflows which has a grid used that had wrongly overlapping text.

gsambrotta · 2024-11-14T13:06:20Z

Looks good now @lukestanley
Please let me know when you address my other comments, so I can review it again

lukestanley · 2024-11-14T17:56:06Z

Looks good now @lukestanley Please let me know when you address my other comments, so I can review it again

If you have other comments, maybe you need to submit them!
I only see your 2 comments from in this main thread.
@gsambrotta

gsambrotta

Sorry, you are right, I did not commit the other comments. Here they are

cypress/e2e/spec.ts

src/app/_shared/services/uphold_service.ts

src/app/app.component.html

src/styles.scss

…es it -Adds waiting assertions to ensure test starts in correct state -Simplified logic, used constants for readability and robustness.

CodeKrakken

All tests passing, no comments. Good stuff - approved!

gsambrotta · 2024-11-27T17:52:44Z

Looks good to me now.
All comments have been address and the preview looks good too.
Let's merge it 🚀 🌟

lukestanley added 6 commits November 10, 2024 17:46

Upgrade to Angular 16; remove legacy Material components; update Angu…

31a4e2f

…lar, CDK, ESLint, PWA, and Material dependencies.

Apply fixes for Angular 16 upgrade; tests should now pass.

40dda11

Fix Ag Grid UI and custom component rendering issues.

b94319e

Update tests and fix various issues after merging '44bc9e97'.

75bacfb

Merge updates from commit 'be101388'; fix map rendering and test file…

0280b5c

… errors.

Final adjustments; reduce unintentional differences and reapply styles.

a0da9c4

lukestanley requested review from gsambrotta and CodeKrakken November 12, 2024 10:38

lukestanley marked this pull request as ready for review November 12, 2024 10:38

lukestanley changed the title ~~Angular 18 squashed~~ Angular 18 upgrade (squashed) Nov 12, 2024

CodeKrakken approved these changes Nov 13, 2024

View reviewed changes

Fix: Adds corrected new Ag ag-grid styling path and theme to fix UI d…

56e8cc2

…efect visible on the Flow at workflowCloud/listWorkflows which has a grid used that had wrongly overlapping text.

vercel bot deployed to Preview November 14, 2024 12:11 View deployment

gsambrotta reviewed Nov 19, 2024

View reviewed changes

Add test for Grid column overlap check

b9bae54

vercel bot deployed to Preview November 21, 2024 10:33 View deployment

lukestanley added 2 commits November 26, 2024 16:17

Fixes unsaved flow leaving test using reliable selectors and re-enabl…

b429dc2

…es it -Adds waiting assertions to ensure test starts in correct state -Simplified logic, used constants for readability and robustness.

Ensures MatFormField label is always present

0b90eaf

vercel bot deployed to Preview November 26, 2024 17:05 View deployment

vercel bot deployed to Preview November 27, 2024 12:14 View deployment

Revert unrelated whitespace changes and comment keeps Cypress selector

f3259da

lukestanley force-pushed the angular-18-squashed branch from 9505bb4 to f3259da Compare November 27, 2024 14:14

vercel bot deployed to Preview November 27, 2024 14:15 View deployment

lukestanley requested a review from gsambrotta November 27, 2024 14:52

lukestanley requested a review from CodeKrakken November 27, 2024 14:52

CodeKrakken approved these changes Nov 27, 2024

View reviewed changes

gsambrotta approved these changes Nov 27, 2024

View reviewed changes

lukestanley merged commit c50db24 into develop Nov 28, 2024
3 checks passed

lukestanley mentioned this pull request Nov 28, 2024

Angular upgrade v18 #487

Closed

5 tasks

vercel bot deployed to Production November 29, 2024 17:17 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular 18 upgrade (squashed) #500

Angular 18 upgrade (squashed) #500

lukestanley commented Nov 11, 2024 •

edited

Loading

vercel bot commented Nov 11, 2024 •

edited

Loading

CodeKrakken left a comment

gsambrotta commented Nov 13, 2024

CodeKrakken commented Nov 13, 2024

lukestanley commented Nov 13, 2024

gsambrotta commented Nov 14, 2024

lukestanley commented Nov 14, 2024

gsambrotta left a comment

CodeKrakken left a comment

gsambrotta commented Nov 27, 2024

Angular 18 upgrade (squashed) #500

Angular 18 upgrade (squashed) #500

Conversation

lukestanley commented Nov 11, 2024 • edited Loading

vercel bot commented Nov 11, 2024 • edited Loading

CodeKrakken left a comment

Choose a reason for hiding this comment

gsambrotta commented Nov 13, 2024

CodeKrakken commented Nov 13, 2024

lukestanley commented Nov 13, 2024

gsambrotta commented Nov 14, 2024

lukestanley commented Nov 14, 2024

gsambrotta left a comment

Choose a reason for hiding this comment

CodeKrakken left a comment

Choose a reason for hiding this comment

gsambrotta commented Nov 27, 2024

lukestanley commented Nov 11, 2024 •

edited

Loading

vercel bot commented Nov 11, 2024 •

edited

Loading