core
core copied to clipboard
core: Improve Global UI Synchronization with state management
Problem Statement
The global UI synchronization in dotCMS is inconsistent and causes issues such as the site selector getting lost and the lack of user preference storage for navigation group status.
User Story
-
As a dotCMS developer, I want to implement a robust state management system using @ngrx/signal store for the backoffice UI, so I can improve performance, maintainability, and user experience.
-
As a dotCMS user, I want a more responsive and consistent backoffice UI experience, so I can work more efficiently and with fewer interruptions or synchronization issues.
Steps to Reproduce
- Site selector gets lost all the time
- Can't update global breadcrumb with ease
- If refreshed, the position in the navigation is lost.
Questions we need to answer
[!WARNING]
We need spikes for sure.
- What to do with the configuration service?
- Can we include the feature flag service?
- What other "global" stuff we need to inclide?
ema
?
Acceptance Criteria
- Implement
@ngrx/SignalStore
for state management - Refactor the existing Angular site service
- Create store to handle sidenav, breadcrumb, site selector, announcements, notifications, and user preferences
- Implement data synchronization with the backend for user auth, notifications, sites, current site, announcements, and page list for navigation
- Address performance issues, particularly with the site selector
- Improve breadcrumb updates
- Implement user preferences storage
- All components (sidenav, breadcrumb, site selector, announcements, notifications) use the new state management system
- Unit tests are written for new store implementations
- Documentation is updated to reflect the new state management architecture
- Site selector performance is noticeably improved
- User preferences are maintained across sessions
Assumptions & Initiation Needs
- The current codebase uses Angular as the frontend framework
-
@ngrx/SignalStore
will be used for state management - Refactoring of existing components and services is necessary
- Backend APIs are available for data synchronization
Quality Assurance Notes & Workarounds
- Pay special attention to the performance of the site selector component
- Verify that user preferences are correctly stored and retrieved
- Ensure that the breadcrumb updates correctly in various navigation scenarios
- Test synchronization between frontend state and backend data
- Conduct user testing to verify improved responsiveness and consistency of the UI
Sub-Tasks & Estimates
- [ ] Analysis and Planning
- [ ] Set Up
@ngrx/SignalStore
- [ ] Refactor Site Service
- [ ] Implement Core State Management
- [ ] Refactor Individual Components
- [ ] Implement User Preferences
- [ ] Testing and Bug Fixing
- [ ] Documentation and Code Review
- [ ] User Acceptance Testing