[EPIC] Modernization Upgrade PrimeNG from 17.18.11 to 20

[hmoreras]

Upgrade PrimeNG from 17.18.11 to 20

Overview

This issue tracks the migration from PrimeNG 17.18.11 to PrimeNG 20, which includes significant breaking changes that require careful migration planning and execution.

Current State

• Current Version: PrimeNG 17.18.11
• Target Version: PrimeNG 20
• Angular Version: 20.3.9 (compatible)
• Related Dependencies:
  • primeicons: 7.0.0 (may need update)
  • primeflex: 3.3.1 (verify compatibility)

Major Breaking Changes

Component Migrations Required

The following components have been deprecated/renamed and need migration:

1. Calendar → DatePicker

   • All CalendarModule imports and <p-calendar> usage must be migrated to DatePickerModule and <p-datePicker>
   • Found in: dot-edit-content-calendar-field and other date input components

2. Dropdown → Select

   • All DropdownModule imports and <p-dropdown> usage must be migrated to SelectModule and <p-select>
   • Extensively used throughout the codebase (experiments, content drive, analytics, etc.)

3. TabView → Tabs

   • All TabViewModule imports and <p-tabView> usage must be migrated to TabsModule and <p-tabs>
   • Found in: experiments reports, edit content forms, and various portlets

4. Sidebar → Drawer

   • All SidebarModule imports and <p-sidebar> usage must be migrated to DrawerModule and <p-drawer>
   • Found in: block editor sidebar, edit content sidebar, layout properties

5. Messages → Message

   • All MessagesModule imports and <p-messages> usage must be migrated to MessageModule and <p-message>
   • Found in: EMA shell, analytics dashboard, global message components

6. Chip → AutoComplete (for multiple selection)

   • Review ChipModule usage - may need to use AutoComplete with multiple enabled
   • Found in: EMA page tools, experiments header

7. InputSwitch → ToggleSwitch

   • All InputSwitchModule imports must be migrated to ToggleSwitchModule
   • Check Storybook stories and component usage

8. OverlayPanel → Popover

   • All OverlayPanelModule imports must be migrated to PopoverModule
   • Found in: toolbar overlay components, Storybook stories

9. pDefer → Angular @defer

   • Replace PrimeNG's pDefer directive with Angular's native @defer control flow
   • Found in: Storybook stories

Additional Considerations

• API Changes: Review primeng/api imports for any deprecated interfaces or services
• Styling: Verify PrimeFlex 3.3.1 compatibility with PrimeNG 20
• Module Imports: All module imports remain similar but verify import paths
• TypeScript Types: Check for any type changes in component props/events

Migration Strategy

Phase 1: Preparation

• Review PrimeNG 20 migration guide: https://primeng.org/guides/migration
• Audit all PrimeNG component usage in the codebase
• Create a comprehensive list of affected files
• Set up a feature branch for the migration

Phase 2: Dependency Updates

• Update primeng to version 20 in package.json
• Update primeicons if required for PrimeNG 20 compatibility
• Verify primeflex compatibility
• Run npm install and resolve any dependency conflicts

Phase 3: Component Migrations

• Migrate Calendar → DatePicker
• Migrate Dropdown → Select
• Migrate TabView → Tabs
• Migrate Sidebar → Drawer
• Migrate Messages → Message
• Review and migrate Chip usage
• Migrate InputSwitch → ToggleSwitch
• Migrate OverlayPanel → Popover
• Replace pDefer with Angular @defer

Phase 4: Testing

• Update all component unit tests
• Update Storybook stories
• Run E2E tests
• Manual QA testing of all affected features
• Visual regression testing

Phase 5: Documentation

• Update component documentation
• Update migration notes
• Update developer guidelines

Affected Areas

Based on codebase analysis, the following areas will be significantly affected:

• Edit Content Module: Calendar fields, dropdown selectors, tab views
• Block Editor: Sidebar components, dialogs
• Experiments Portlet: Tables, dropdowns, tabs, chips
• Content Drive: Multi-select, tree components
• Analytics: Dropdowns, calendars, messages
• EMA Editor: Sidebars, dialogs, messages
• UI Library: Various shared PrimeNG components
• Storybook: Multiple PrimeNG component stories

Resources

• PrimeNG 20 Migration Guide
• PrimeNG 20 Documentation
• PrimeNG 20 Release Notes

Notes

• This is a major version upgrade with breaking changes
• Consider creating a migration script or codemod for repetitive changes
• Plan for extensive testing across all affected features
• Coordinate with QA team for comprehensive testing
• Consider a phased rollout if possible

[github-actions]

PRs linked to this issue

• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes

PRs linked to this issue

• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• form first pass by @fmontes

PRs linked to this issue

• Issue 33882 one field by @fmontes
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• form first pass by @fmontes

PRs linked to this issue

• Issue 33882 one field by @fmontes
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• form first pass by @fmontes

PRs linked to this issue

• Issue 33882 one field by @fmontes
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• fix: migrate Stencil from v2 to v4 and fix build errors by @hmoreras
• form first pass by @fmontes

PRs linked to this issue

• Issue 33882 one field by @fmontes
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• fix: migrate Stencil from v2 to v4 and fix build errors by @hmoreras
• form first pass by @fmontes
• refactor(language-selector): enhance model synchronization and reset … by @fmontes

PRs linked to this issue

• Issue 33882 one field by @fmontes
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• fix: migrate Stencil from v2 to v4 and fix build errors by @hmoreras
• form first pass by @fmontes
• refactor(dot-toolbar, dot-crumbtrail, main-legacy): update component … by @fmontes
• refactor(language-selector): enhance model synchronization and reset … by @fmontes

PRs linked to this issue

• Issue 33882 one field by @fmontes
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• fix: migrate Stencil from v2 to v4 and fix build errors by @hmoreras
• fix: resolve MCP server TS and calendar SCSS build errors by @hmoreras
• form first pass by @fmontes
• refactor(dot-toolbar, dot-crumbtrail, main-legacy): update component … by @fmontes
• refactor(language-selector): enhance model synchronization and reset … by @fmontes

PRs linked to this issue

• Issue 33882 one field by @fmontes
• Issue 33882 primeng update dynamic colors by @hmoreras
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• fix: migrate Stencil from v2 to v4 and fix build errors by @hmoreras
• fix: resolve MCP server TS and calendar SCSS build errors by @hmoreras
• form first pass by @fmontes
• refactor(dot-toolbar, dot-crumbtrail, main-legacy): update component … by @fmontes
• refactor(language-selector): enhance model synchronization and reset … by @fmontes

PRs linked to this issue

• Issue 33882 one field by @fmontes
• Issue 33882 primeng update dynamic colors by @hmoreras
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• feedback analytics dashboards by @hmoreras
• fix: migrate Stencil from v2 to v4 and fix build errors by @hmoreras
• fix: resolve MCP server TS and calendar SCSS build errors by @hmoreras
• form first pass by @fmontes
• refactor(dot-toolbar, dot-crumbtrail, main-legacy): update component … by @fmontes
• refactor(language-selector): enhance model synchronization and reset … by @fmontes

PRs linked to this issue

• Enhance UI components: Added host class to DotPageSelector, adjusted … by @KevinDavilaDotCMS
• Issue 33882 one field by @fmontes
• Issue 33882 primeng update dynamic colors by @hmoreras
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• feedback analytics dashboards by @hmoreras
• fix: migrate Stencil from v2 to v4 and fix build errors by @hmoreras
• fix: resolve MCP server TS and calendar SCSS build errors by @hmoreras
• form first pass by @fmontes
• refactor(dot-toolbar, dot-crumbtrail, main-legacy): update component … by @fmontes
• refactor(language-selector): enhance model synchronization and reset … by @fmontes

PRs linked to this issue

• Enhance UI components: Added host class to DotPageSelector, adjusted … by @KevinDavilaDotCMS
• Issue 33882 one field by @fmontes
• Issue 33882 primeng update dynamic colors by @hmoreras
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• feedback analytics dashboards by @hmoreras
• fix: migrate Stencil from v2 to v4 and fix build errors by @hmoreras
• fix: resolve MCP server TS and calendar SCSS build errors by @hmoreras
• form first pass by @fmontes
• refactor(dot-toolbar, dot-crumbtrail, main-legacy): update component … by @fmontes
• refactor(language-selector): enhance model synchronization and reset … by @fmontes
• udpate angular and primenNG version + fixing test by @hmoreras

PRs linked to this issue

• Changed size of content drive multiselects by @KevinDavilaDotCMS
• Enhance UI components: Added host class to DotPageSelector, adjusted … by @KevinDavilaDotCMS
• Issue 33882 one field by @fmontes
• Issue 33882 primeng update dynamic colors by @hmoreras
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• feedback analytics dashboards by @hmoreras
• fix: migrate Stencil from v2 to v4 and fix build errors by @hmoreras
• fix: resolve MCP server TS and calendar SCSS build errors by @hmoreras
• form first pass by @fmontes
• refactor(dot-toolbar, dot-crumbtrail, main-legacy): update component … by @fmontes
• refactor(language-selector): enhance model synchronization and reset … by @fmontes
• udpate angular and primenNG version + fixing test by @hmoreras

PRs linked to this issue

• Changed size of content drive multiselects by @KevinDavilaDotCMS
• Enhance UI components: Added host class to DotPageSelector, adjusted … by @KevinDavilaDotCMS
• Issue 33882 one field by @fmontes
• Issue 33882 primeng update dynamic colors by @hmoreras
• Issue 33882 primeng update by @hmoreras
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• feedback analytics dashboards by @hmoreras
• fix: migrate Stencil from v2 to v4 and fix build errors by @hmoreras
• fix: resolve MCP server TS and calendar SCSS build errors by @hmoreras
• form first pass by @fmontes
• refactor(dot-toolbar, dot-crumbtrail, main-legacy): update component … by @fmontes
• refactor(language-selector): enhance model synchronization and reset … by @fmontes
• udpate angular and primenNG version + fixing test by @hmoreras

PRs linked to this issue

• Adjust font size on dropdown in content drive by @KevinDavilaDotCMS
• Changed size of content drive multiselects by @KevinDavilaDotCMS
• Enhance UI components: Added host class to DotPageSelector, adjusted … by @KevinDavilaDotCMS
• Issue 33882 one field by @fmontes
• Issue 33882 primeng update dynamic colors by @hmoreras
• Issue 33882 primeng update by @hmoreras
• Replace app.module with appConfig, loads lara theme and added tailwind by @fmontes
• build(dotcms-ui): migrate to Esbuild/Vite and modernize build pipeline by @fmontes
• feedback analytics dashboards by @hmoreras
• fix: migrate Stencil from v2 to v4 and fix build errors by @hmoreras
• fix: resolve MCP server TS and calendar SCSS build errors by @hmoreras
• form first pass by @fmontes
• refactor(dot-toolbar, dot-crumbtrail, main-legacy): update component … by @fmontes
• refactor(language-selector): enhance model synchronization and reset … by @fmontes
• udpate angular and primenNG version + fixing test by @hmoreras