Migrate all toolbar components to standalone and use the new syntax #32257
+997
−930
Conversation
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
…and remove unused DotDropdownModule
…omputed properties for improved state management
…hub.com:dotCMS/core into 32256-new-angular-syntax-in-dottoolbarcomponent
…and computed properties for improved state management and accessibility
…testing capabilities
nicobytes
changed the title
…nent restructuring
oidacra
reviewed
May 29, 2025
| @@ -1,10 +1,16 @@ | |||
| import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; | |||
|
|
|||
| import { INotification, NotificationIcons } from '@models/notifications'; | |||
| import { DotCustomTimeModule } from '../../../../../_common/dot-custom-time.component/dot-custom-time.module'; | |||
There was a problem hiding this comment.
Could you move this component to the UI lib?
oidacra
reviewed
May 29, 2025
| @@ -1,4 +1,4 @@ | |||
| import { NgClass, CommonModule } from '@angular/common'; | |||
| import { CommonModule } from '@angular/common'; | |||
There was a problem hiding this comment.
Could you move this component to the UI lib?
oidacra
reviewed
May 29, 2025
| @@ -1,16 +1,18 @@ | |||
| import { animate, style, transition, trigger } from '@angular/animations'; | |||
| import { | |||
| Component, | |||
| computed, | |||
There was a problem hiding this comment.
Why not use dropdown from primeNg instead of DotDropdownComponent
…for improved readability and maintainability
nicobytes
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR modernizes several UI components by migrating them to Angular standalone components with reactive signals and the new Angular 17 template syntax, while cleaning up unused dependencies.
- Refactors components (e.g., DotDropdownComponent, DotCrumbtrailComponent) to use standalone and reactive inputs/outputs.
- Removes deprecated modules and unused imports.
- Updates test suites and templates to align with new syntax (@if, @for, etc.).
Reviewed Changes
Copilot reviewed 35 out of 35 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| dot-login-as.component.ts | Removed redundant CommonModule import in favor of standalone component usage. |
| dot-crumbtrail.service.ts | Switched from Subject to BehaviorSubject with inferred type; removed unused import. |
| dot-crumbtrail.module.ts | Entire module removed as part of the migration to standalone components. |
| dot-crumbtrail.component.ts | Converted to standalone component; updated imports and providers. |
| dot-crumbtrail.component.spec.ts | Updated tests utilizing Spectator and new test selectors. |
| dot-comment-and-assign-form.* | Updated template syntax from *ngIf to @if blocks. |
| dot-textarea-content.component.html | Updated template to use new Angular 17 directives. |
| dot-global-message.* | Adjusted selectors to use lowercase data-testid and updated conditionals. |
| dot-empty-state.component.html | Changed *ngIf/*ngFor to @if/@for syntax; improved conditional rendering. |
| dot-dropdown-component/* | Replaced module with standalone component and migrated inputs/outputs to reactive signals. |
| shared.module.ts | Removed unused DotDropdownModule from shared module imports/exports. |
| dot-starter.component.html, dot-whats-changed.component.html, dot-palette-input-filter.component.html | Updated template syntax to new Angular 17 @if/@for directives and self-closing syntax. |
| modules.ts | Replaced DotToolbarModule with the standalone DotToolbarComponent. |
| @@ -15,7 +15,7 @@ import { | |||
| @Injectable() | |||
| export class DotCrumbtrailService { | |||
| private URL_EXCLUDES = ['/content-types-angular/create/content']; | |||
| private crumbTrail: Subject<DotCrumb[]> = new BehaviorSubject([]); | |||
| private crumbTrail = new BehaviorSubject([]); | |||
There was a problem hiding this comment.
Consider explicitly specifying a generic type for the BehaviorSubject (e.g., BehaviorSubject<DotCrumb[]>) to improve code clarity and maintainability.
Suggested change
| private crumbTrail = new BehaviorSubject([]); | |
| private crumbTrail = new BehaviorSubject<DotCrumb[]>([]); |
Copilot uses AI. Check for mistakes.
...s/dotcms-ui/src/app/view/components/_common/dot-dropdown-component/dot-dropdown.component.ts
Outdated
Show resolved
Hide resolved
…and maintainability
…hub.com:dotCMS/core into 32256-new-angular-syntax-in-dottoolbarcomponent
…ntax for improved compatibility
…ntax for improved compatibility
…opdown-component/dot-dropdown.component.ts Co-authored-by: Copilot <[email protected]>
…for improved readability and maintainability
… compatibility issues
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Proposed Changes
This pull request introduces significant updates to the
dotcms-uiproject, focusing on modernizing components by adopting Angular's standalone components, improving code maintainability, and simplifying module dependencies. The changes include refactoring theDotDropdownComponent, transitioning several components to standalone mode, and removing unused or redundant imports.Component Refactoring and Modernization:
DotDropdownComponentto use Angular's signals and standalone components, replacing@Inputand@Outputwith reactive inputs/outputs and computed properties for better state management. Removed the corresponding module (DotDropdownModule) as it is no longer needed. [1] [2] [3] [4]Transition to Standalone Components:
DotToolbarComponent,DotToolbarAnnouncementsComponent,DotNotificationsItemComponent, and others) to standalone components, simplifying their dependency management by directly importing required modules and pipes. [1] [2] [3] [4] [5] [6] [7] [8] [9]Dependency Cleanup:
CommonModuleandNgClassfrom components that no longer require them due to the transition to standalone components. This reduces unnecessary dependencies and improves build performance. [1] [2] [3] [4]Test Updates:
DotToolbarNotificationsComponentto reflect the changes in imports and declarations caused by the transition to standalone components. [1] [2]Module Updates:
DotToolbarModulewithDotToolbarComponentinmodules.tsto align with the standalone component approach. [1] [2]These updates streamline the codebase, improve maintainability, and align with Angular's latest best practices.
Checklist
Additional Info
** any additional useful context or info **