Migrate content-types-portlet #34362
Conversation
There was a problem hiding this comment.
Pull request overview
This PR migrates the content-types portlet from legacy PrimeNG components to newer versions, modernizes styling from SCSS to Tailwind CSS, and updates tests to work with the new component APIs.
Changes:
- Migrates PrimeNG components (p-dropdown → p-select, p-tabview → p-tabs, p-dialog updates)
- Replaces custom dot-icon component with Material Icons throughout
- Converts SCSS stylesheets to Tailwind CSS utility classes
- Updates tests with proper mocks (matchMedia), fakeAsync timing, and new component selectors
Reviewed changes
Copilot reviewed 68 out of 69 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Cleanup of unused wildcard dependencies |
| dot-link.component.html | Changed icon element from <i> to <span> |
| dot-copy-button.component.ts | Added missing p-button class to button |
| dot-listing-data-table/* | Updated to TableLazyLoadEvent type, added ChangeDetectorRef usage |
| dot-base-type-selector/* | Migrated from p-dropdown to p-select with SelectChangeEvent |
| dot-page-selector/* | Removed unused SCSS file, migrated styles to Tailwind |
| content-types-listing/* | Added ChangeDetectorRef, migrated to p-dialog, updated tests |
| content-types-edit/* | Removed SCSS files, migrated to p-dialog and p-tabs, fixed test timing |
| content-types-layout/* | Replaced dot-icon with Material Icons, migrated to Tailwind, updated toolbar |
| content-types-form/* | Removed SCSS, migrated banner styles to Tailwind |
| content-type-fields/* | Extensive migration of field components, rows, tabs to Tailwind classes |
| dot-binary-settings/* | Removed SCSS, migrated input styling |
| dot-block-editor-settings.spec.ts | Restructured tests with proper mock setup |
...es-edit/components/fields/content-types-fields-list/content-types-fields-list.component.html
Show resolved
Hide resolved
core-web/libs/ui/src/lib/components/dot-link/dot-link.component.html
Outdated
Show resolved
Hide resolved
...-types-edit/components/fields/content-type-fields-tab/content-type-fields-tab.component.html
Outdated
Show resolved
Hide resolved
...t/components/fields/content-type-fields-drop-zone/content-type-fields-drop-zone.component.ts
Show resolved
Hide resolved
.../fields/content-type-fields-properties-form/content-type-fields-properties-form.component.ts
Outdated
Show resolved
Hide resolved
...portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html
Outdated
Show resolved
Hide resolved
...nt-types-edit/components/fields/content-type-fields-row/content-type-fields-row.component.ts
Show resolved
Hide resolved
...s-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.spec.ts
Outdated
Show resolved
Hide resolved
|
Semgrep found 25
Risk: Affected versions of @angular/compiler and @angular/core are vulnerable to Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting'). Angular's template compiler fails to classify the Fix: Upgrade this library to at least version 21.0.7 at core/core-web/package-lock.json:5082. Reference(s): GHSA-jrmj-c5cx-3cw6, CVE-2026-22610 If this is a critical or high severity finding, please also link this issue in the #security channel in Slack. |
Legal RiskThe following dependencies were released under a license that RecommendationWhile merging is not directly blocked, it's best to pause and consider what it means to use this license before continuing. If you are unsure, reach out to your security team or Semgrep admin to address this issue. GPL-2.0 MPL-2.0
|
![semgrep-code-dotcms-test[bot]](https://avatars.githubusercontent.com/u/1005263?s=60&v=4){kind=small}
| @Component({ | ||
| selector: 'dot-key-value-table-header-row', | ||
| styleUrls: ['./dot-key-value-table-header-row.component.scss'], | ||
| templateUrl: './dot-key-value-table-header-row.component.html', | ||
| host: { class: 'contents' }, | ||
| imports: [ | ||
| ButtonModule, | ||
| ToggleSwitchModule, |
There was a problem hiding this comment.
High severity and reachable issue identified in your code:
Line 19 has a vulnerable usage of @angular/compiler, introducing a high severity vulnerability.
ℹ️ Why this is reachable
A reachable issue is a real security risk because your project actually executes the vulnerable code. This issue is reachable because your code uses a certain version of @angular/compiler.
Affected versions of @angular/compiler and @angular/core are vulnerable to Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting'). Angular's template compiler fails to classify the href and xlink:href attributes on SVG <script> elements as Resource URL contexts. This allows an attacker to bind a malicious data: URI or external script via [attr.href] or [attr.xlink:href], resulting in arbitrary JavaScript execution (XSS) in the victim's browser.
To resolve this comment:
Upgrade this dependency to at least version 21.0.7 at core-web/package-lock.json.
💬 Ignore this finding
To ignore this, reply with:
/fp <comment>for false positive/ar <comment>for acceptable risk/other <comment>for all other reasons
If this is a critical or high severity finding, please also link this issue in the #security channel in Slack.
You can view more details on this finding in the Semgrep AppSec Platform here.
Summary
Migrated the Content Types portlet UI to PrimeNG + Angular 21 standalone patterns so it aligns with the modern DotCMS UI while keeping behavior intact.
Scope
Areas Updated
/content-types-angular)/content-types-angular/create/:type)/content-types-angular/edit/:id)apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/Acceptance
Tests
Targeted specs executed.
DEMO:
Screen.Recording.2026-01-22.at.2.37.43.PM.mov