Feat/angular 21 migration - #37
Open
likhithThammegowda wants to merge 19 commits into
Open
Conversation
Add repo CLAUDE.md with migration rules (NgModule-only, @ws-widget/* libs, Material legacy->MDC map, dist/www/en output, nvs node setup) and a migrate-feature-module skill for the repetitive per-module work on the Angular 16->21 upgrade. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…lse, sunbird -ang-17-20 pkgs Toolchain flipped to Angular 20.3.x (esbuild application builder, TS 5.9, RxJS 7.8, Jest+ESLint+Prettier). @sunbird-cb on -ang-17-20 npm packages (collection + utils/resolver non-v2 for app + utils-v2/resolver-v2 for collection). Material legacy->MDC across 96 files, standalone:false on 169 decorators, provideHttpClient, deep-import + moment + untilDestroyed + SwUpdate fixes. Build down from 294 -> ~38 errors; remaining = Material theming SCSS migration plus a few template/TS items. WIP checkpoint (build not yet green). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Untrack /src/assets in .gitignore (was blocking host.config.json, site.config.json, etc.) so local config and placeholder image assets can be served by ng serve without proxying to the staging backend. Only env.js (runtime per-deployment site config) stays untracked. Also adds src/assets to angular.json's assets list, removes the /assets/** proxy rule that was shadowing local files, and makes environment.*.ts defensive against window.env being unset.
…nt setup Audit found more assets/... paths still 404ing: home welcome-hero banner, public-logout login background, work-allocation/event/table icons, app logos, language flag icons, and the ie-check.js script tag in index.html. Add placeholders for all of them and mirror into dist/assets/ for the Express server path. Also document the local asset/config serving setup in CLAUDE.md and add a short local-dev-setup note to README.md pointing at it.
…class mixin
The Angular 16->20 migration switched theme/typography Sass to Material's M3
("Material You") API, which uses a different type-scale/shape/spacing token
system than the one all component CSS was authored against, and silently
dropped the theme-based-configurations() call from every theme file -
breaking dozens of .ws-mat-* utility classes used across ~142 components.
Rewrite all 9 theme-*.scss files, _theme-mixins.scss, and mat-typography.scss
on the M2-compatible API (mat.m2-*), restoring original brand colors and
typography scale, and re-enable the utility-class mixin in every theme.
Verified via standalone sass compilation and a full `ng build --configuration=dev`
(theme-igot/theme-blue output CSS contains the restored brand colors and
.ws-mat-* classes; no build errors, only pre-existing unrelated budget warnings).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Three visual regressions vs production after the Angular 16→20 MDC migration:
1. White toolbar → indigo: `@angular/material/prebuilt-themes/indigo-pink.css`
was injected globally, setting `.mat-toolbar.mat-primary { background: #3f51b5 }`.
Our custom theme-igot (primary palette 500 = #ffffff) has higher specificity but
the prebuilt fires before Angular bootstraps. Fix: remove the prebuilt — we have
complete custom themes that set all MDC CSS variables.
2. Active sidebar menu (solid blue fill): @sunbird-cb/collection@0.0.9-ang-17-20
added `::ng-deep .ws-active-route-menu { background: #1b4ca1; color: #fff }` which
overwrites the _theme-mixins light-grey + left-border style. Override globally in
styles.scss to restore production appearance (rgba(0,0,0,0.04) bg + 3px blue left
border, dark text).
3. Sidebar logo showing placeholder: home.json logoPath pointed to `aastar-source.png`
(our placeholder); use the real `aastar-logo.svg` that is already in assets.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Download the actual production images instead of generated placeholders: - src/assets/images/banners/home/aastrika-sphere-fb.jpg (56 KB, welcome-page hero) - src/assets/instances/eagle/app_logos/aastar-source.png (7 KB, sidebar org logo) Also restore home.json logoPath to aastar-source.png (was incorrectly changed to aastar-logo.svg in the previous UI-fix commit). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…on updates Events module: - Replaced all mat-form-field/mat-select/mat-raised-button with native inputs styled via design system mixins to fix MDC 70px-tall inputs and grey disabled btn - Added floating filter dropdown with chip selectors, active filter tags, null-safe search/filter logic, and click-outside close via @HostListener - event-details: design-system tabs, v2-btn-primary edit button, breadcrumb tokens - event-overview: design-system stat cards, add-participant + certificate buttons - Fixed deprecated positional subscribe() → object form; added readonly to all DI params Design system (_ws-design-system-v2.scss): - New tokens: $v2-shadow-card-hover, $v2-color-card-description, $v2-color-select-border, $v2-font-section-h2, semantic $v2-status-* chip tokens, $v2-font-micro - New mixins: v2-card-grid, v2-action-card, v2-card-action-btn, v2-custom-select-input, v2-empty-state-card, v2-empty-state-icon, v2-shimmer + @Keyframes shimmer-sweep - Fixed v2-custom-select-wrapper to be structural-only (position:relative; width:100%) Migration / toolchain: - Angular 16 → 20 toolchain: app.module.ts, main.ts, tsconfig.app.json, styles - Added shared view-only access directives and feature-access service - Updated CLAUDE.md mixin reference table and .claude/skills/ui-design-fix skill file
…polish Apply FRAC table spec (40px rows, font-weight 600, 16px cell padding, #f9fbff hover) to all mat-table pages (users, roles, competencies, upload history); add shimmer skeleton loading to users page; remove unused resolver that blocked users navigation; redesign file-upload, roles-access, and competencies with design system v2; add Non-QR participant handling with amber badge; update skill-table and filter-dialog with full design tokens; fix paginator select appearance:none with SVG chevron across all tables; add local manifest assets to eliminate 404s.
…fecycle methods, expression statements, var declaration - Replace wrapper type String with primitive string in dropdown-dob - Remove empty ngOnInit methods from confirm-dialog, role-confirm-dialog, search-selected-filter, signup components - Convert ternary-as-statement to if/else in skill-table toggleAllRows - Convert comma-expression assignments to separate statements in public-about - Replace declare var with declare const in mobile-apps.service
…m ci - Replace node:10/12/18 with node:20.20.1 across all environment Dockerfiles - Switch from yarn to npm ci for reproducible, lock-file-based installs - Remove redundant yarn add moment/vis-util (both already in package.json) - Drop dead --prod --build-optimizer flags (not forwarded to ng by npm run) - Merge consecutive RUN layers into single instructions to reduce image size
…bug logs - Replace featureButton anchors with mat-icon-buttons; hide feature_notification - Gate feature_home behind hasAdminRole, feature_mydashboard behind MDO_DASHBOARD_VIEWER - Redesign profile dropdown: blue initials avatar, name header (#eef4fb bg), red logout icon - Use inline styles on overlay content to bypass CDK overlay CSS scoping - Add global ws-nav-profile-menu panel styles (border-radius, shadow, hover) in styles.scss - Add BtnFeatureModule, ErrorResolverModule, StickyHeaderModule, TourModule to AppShellModule - Add MDO_ADMIN and MDO_DASHBOARD_VIEWER to DEFAULT_REQUIRED_ROLES in env.util.ts - Remove all [Init] debug console logs from init.service.ts; re-throw original error - Remove title="toolbar" from toolbar wrapper div (was showing native browser tooltip)
- version in package.json: 1.0.0 -> 2.0.0 - RELEASE_NOTES/release-2.0.0.md: full 2.0.0 release notes (Angular 16->20 migration) - RELEASE_NOTES/TEMPLATE.md: update naming to release-X.Y.Z.md (matches CBP convention) - setup-jest.ts: add @angular/localize/init to fix $localize ReferenceError in Jest - 83 spec files: replace deprecated async with waitForAsync (Angular 16+ breaking change) - app-nav-bar.component.spec.ts: rewrite with proper mocks, 9 unit tests for new methods - disable-for-view-only.directive.ts: suppress directive-selector prefix lint error - hide-for-view-only.directive.ts: suppress directive-selector and no-input-rename lint errors
…bscriptions All components and services that called .subscribe() without any cleanup mechanism now implement OnDestroy and pipe every subscription through takeUntil(this.destroy$), preventing memory leaks on route navigation.
…spec errors - Move rcMdoTemplatesUrl and orgPowerBiDashboardUrl to host.config.json externalUrls block; components read from config with S3 fallback - Replace jasmine.SpyObj/createSpyObj/.and.returnValue with jest equivalents in activity-upload, competency-upload, role-upload specs - Fix wrong class name imports: FracUploadComponent -> FracUploadPopupComponent, MapActivitiyCompetenciesComponent -> MapActivityCompetenciesComponent (typo) - Fix directive spec constructor calls: pass null-as-any for required args - Fix event-list-view spec import path for ParticipantsComponent - Replace TestBed.get() with TestBed.inject() in competency.service.spec
- Migrated 130+ spec files from Karma/Jasmine to Jest (jasmine.createSpyObj → jest.fn(), waitForAsync, provideHttpClient + provideHttpClientTesting) - Fixed NG0301 exportAs errors: added MatAutocompleteModule, MatMenuModule to specs that use #auto="matAutocomplete" / #editMenu="matMenu" in templates - Fixed MatFormField appearance="none" (invalid in MDC): changed to "fill" in search-input and search/home templates - Fixed NG0904 unsafe iframe src: overrideTemplate on iframe-loader spec - Fixed NG0302 pipeLimitTo pipe: added MockPipeLimitTo to qanda-card, item-tile - Restored sharedGoals: any[] = [] in notification.component (template still referenced commented-out property) - Fixed async/await in fakeAsync: replaced flushMicrotasks with fixture.whenStable for activity-upload upload redirect test - Fixed missing providers across 14+ specs (MatDialogRef, MAT_DIALOG_DATA, ActivatedRoute, Router, EventService, ConfigurationsService, BreakpointObserver) - Fixed mock data shapes: instanceConfig.introVideo for about-video, sessionID + Sessions mock for profile-detail, eventdata.data.Home for app-gallery - Fixed Blob early-return bug in frac-response-parser parseApiResponse - Added FormsModule/ReactiveFormsModule where ngModel/formControl were missing - Removed HttpClientModule in favour of provideHttpClient(withInterceptorsFromDi())
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.