Create Developer Onboarding Guide for Next.js with UVE #33941
Conversation
…y resolver - Removed the DotStarterResolver and associated tests, simplifying the onboarding process. - Introduced a new onboarding structure with detailed steps, commands, and troubleshooting sections. - Updated the component's HTML and SCSS for a modernized layout and improved user experience. - Enhanced progress tracking and local storage management for user onboarding steps. - Adjusted module imports to include necessary PrimeNG components for the new design.
- Moved the import of MarkdownModule to the top of the dot-starter.component.spec.ts and dot-starter.module.ts files for improved organization and consistency across the codebase.
- Introduced a new progress tracking section with a current step display and a reset button. - Updated the HTML structure for improved accessibility and user experience. - Enhanced SCSS styles for a modern look, including a sticky progress bar and responsive layout. - Added new TypeScript getters for current step information and total steps, improving the onboarding logic. - Integrated PrimeNG Knob component for visual progress representation.
…yles - Updated HTML structure to enhance accessibility and user experience by introducing a new content wrapper. - Modified SCSS styles for improved layout, including a flexbox design for better responsiveness. - Simplified progress tracking display and adjusted component alignment for a cleaner look. - Removed unnecessary elements and streamlined the code for better maintainability.
- Replaced the status display with a PrimeNG tag component for improved visual feedback on step completion. - Removed legacy SCSS styles related to the status display to streamline the code. - Added TagModule import to the module for the new component integration. - Adjusted styles for better alignment and responsiveness in the onboarding component.
- Updated HTML structure to improve accessibility and user experience, including a new header template for accordion tabs. - Adjusted SCSS styles for better typography and layout consistency, including new styles for headings and improved spacing. - Simplified the component structure by removing unnecessary elements and enhancing the visual presentation of steps and notes.
- Upgraded ngx-markdown to version 20.1.0 for improved functionality. - Updated prismjs to version 1.30.0, enhancing syntax highlighting capabilities. - Added PrismJS styles and scripts to the dotcms-ui project for better code presentation. - Refined HTML structure in the onboarding component for improved readability and maintainability. - Enhanced SCSS styles for better layout and responsiveness in the onboarding component.
- Introduced a new ButtonCopyComponent for clipboard copy functionality, improving user experience. - Updated dot-starter.component.html to integrate the new clipboard feature within the onboarding process. - Added clipboard.js dependency to package.json for enhanced clipboard operations. - Refined HTML structure and styles in dot-starter.component.html for better layout and responsiveness. - Updated dot-starter.module.ts to include the new ButtonCopyComponent and TooltipModule for improved UI interactions.
- Simplified HTML structure by consolidating command and troubleshooting sections for better readability. - Updated SCSS styles to improve layout responsiveness and visual hierarchy, including adjustments to flex properties. - Replaced deprecated description fields with explanation fields in TypeScript interfaces for clarity. - Enhanced markdown rendering for commands and troubleshooting items to improve user experience during onboarding.
… rebuild performance
- Commented out legacy title and description fields in the HTML for future reference. - Updated accordion component to set the active index for better user experience. - Improved command display by restructuring the command explanation into title and description fields. - Enhanced SCSS styles for better layout, including new styles for headings and command descriptions. - Added margin adjustments to ensure consistent spacing in the onboarding steps.
…larity and security
…arity and relevance
…h scrolling to next step
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. MPL-2.0 |
…n and visual editing instructions
…tion and improved UI elements
…utomatic undo for completed steps
…nboarding component HTML
…ontent with new framework options
…n onboarding component
…e updates and improve onboarding flow
…s and enhancing progress tracking logic
…roducing a dedicated interface and streamlining framework info handling
…re and enhance component state management for improved user experience
…onsolidate module imports into the component for improved structure
…sual clarity and step completion indication
…ed index in step tracking
…g in navigation items
…improving structure, adding framework options validation, and ensuring localStorage handling is robust
…improving structure, adding framework options validation, and ensuring localStorage handling is robust
…hanced user permissions handling and update onboarding layout for improved user experience
![semgrep-code-dotcms-test[bot]](https://avatars.githubusercontent.com/u/1005263?s=60&v=4){kind=small}
| @Component({ | ||
| selector: 'dot-button-copy', | ||
| imports: [CommonModule, TooltipModule], | ||
| templateUrl: './button-copy.component.html', | ||
| styleUrl: './button-copy.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| standalone: true | ||
| }) |
There was a problem hiding this comment.
High severity vulnerability may affect your project—review required:
Line 12 lists a dependency (@angular/compiler) with a known High severity vulnerability.
ℹ️ Why this matters
Affected versions of @angular/compiler are vulnerable to Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting'). A stored XSS vulnerability in the Angular Template Compiler arises because its internal security schema doesn't classify certain URL‐ holding attributes (e.g. xlink:href, math|href, annotation|href) or the attributeName binding on SVG animation elements (<animate>, <set>, etc.) as requiring strict URL sanitization. An attacker who can supply untrusted input to template bindings like [attr.xlink:href] or <animate [attributeName]="'href'" [values]="maliciousURL"> can inject a javascript: URL payload. When the element is activated (e.g. clicked) or the animation runs, the malicious script executes in the application's origin, enabling session hijacking, data exfiltration, or unauthorized actions.
To resolve this comment:
Check if you allow SVG/MathML attributes (e.g., xlink:href, href) or to the attributeName field of SVG animation tags (, , etc.) in HTML templates.
- If you're affected, upgrade this dependency to at least version 19.2.17 at core-web/yarn.lock.
- If you're not affected, comment
/fp we don't use this [condition]
💬 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.
| @Component({ | ||
| selector: 'dot-starter', | ||
| templateUrl: './dot-starter.component.html', | ||
| styleUrls: ['./dot-starter.component.scss'], | ||
| standalone: false | ||
| imports: [DotOnboardingDevComponent, DotOnboardingAuthorComponent] | ||
| }) |
There was a problem hiding this comment.
High severity vulnerability may affect your project—review required:
Line 6 lists a dependency (@angular/compiler) with a known High severity vulnerability.
ℹ️ Why this matters
Affected versions of @angular/compiler are vulnerable to Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting'). A stored XSS vulnerability in the Angular Template Compiler arises because its internal security schema doesn't classify certain URL‐ holding attributes (e.g. xlink:href, math|href, annotation|href) or the attributeName binding on SVG animation elements (<animate>, <set>, etc.) as requiring strict URL sanitization. An attacker who can supply untrusted input to template bindings like [attr.xlink:href] or <animate [attributeName]="'href'" [values]="maliciousURL"> can inject a javascript: URL payload. When the element is activated (e.g. clicked) or the animation runs, the malicious script executes in the application's origin, enabling session hijacking, data exfiltration, or unauthorized actions.
To resolve this comment:
Check if you allow SVG/MathML attributes (e.g., xlink:href, href) or to the attributeName field of SVG animation tags (, , etc.) in HTML templates.
- If you're affected, upgrade this dependency to at least version 19.2.17 at core-web/yarn.lock.
- If you're not affected, comment
/fp we don't use this [condition]
💬 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.
| @Component({ | ||
| selector: 'dot-onboarding-dev', | ||
| templateUrl: './onboarding-dev.component.html', | ||
| styleUrls: ['./onboarding-dev.component.scss'], | ||
| imports: [ | ||
| AccordionModule, | ||
| ButtonCopyComponent, | ||
| ButtonModule, | ||
| CommonModule, | ||
| FormsModule, | ||
| KnobModule, | ||
| MarkdownModule, | ||
| OverlayPanelModule, | ||
| ProgressBarModule, | ||
| RadioButtonModule, | ||
| RouterModule, | ||
| TagModule, | ||
| TooltipModule | ||
| ] | ||
| }) |
There was a problem hiding this comment.
High severity vulnerability may affect your project—review required:
Line 24 lists a dependency (@angular/compiler) with a known High severity vulnerability.
ℹ️ Why this matters
Affected versions of @angular/compiler are vulnerable to Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting'). A stored XSS vulnerability in the Angular Template Compiler arises because its internal security schema doesn't classify certain URL‐ holding attributes (e.g. xlink:href, math|href, annotation|href) or the attributeName binding on SVG animation elements (<animate>, <set>, etc.) as requiring strict URL sanitization. An attacker who can supply untrusted input to template bindings like [attr.xlink:href] or <animate [attributeName]="'href'" [values]="maliciousURL"> can inject a javascript: URL payload. When the element is activated (e.g. clicked) or the animation runs, the malicious script executes in the application's origin, enabling session hijacking, data exfiltration, or unauthorized actions.
To resolve this comment:
Check if you allow SVG/MathML attributes (e.g., xlink:href, href) or to the attributeName field of SVG animation tags (, , etc.) in HTML templates.
- If you're affected, upgrade this dependency to at least version 19.2.17 at core-web/yarn.lock.
- If you're not affected, comment
/fp we don't use this [condition]
💬 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.
| @Component({ | ||
| selector: 'dot-onboarding-author', | ||
| templateUrl: './onboarding-author.component.html', | ||
| styleUrls: ['./onboarding-author.component.scss'], | ||
| providers: [DotAccountService], | ||
| standalone: true, | ||
| imports: [AsyncPipe, DotMessagePipe, CheckboxModule, RouterLink] | ||
| }) |
There was a problem hiding this comment.
High severity vulnerability may affect your project—review required:
Line 23 lists a dependency (@angular/compiler) with a known High severity vulnerability.
ℹ️ Why this matters
Affected versions of @angular/compiler are vulnerable to Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting'). A stored XSS vulnerability in the Angular Template Compiler arises because its internal security schema doesn't classify certain URL‐ holding attributes (e.g. xlink:href, math|href, annotation|href) or the attributeName binding on SVG animation elements (<animate>, <set>, etc.) as requiring strict URL sanitization. An attacker who can supply untrusted input to template bindings like [attr.xlink:href] or <animate [attributeName]="'href'" [values]="maliciousURL"> can inject a javascript: URL payload. When the element is activated (e.g. clicked) or the animation runs, the malicious script executes in the application's origin, enabling session hijacking, data exfiltration, or unauthorized actions.
To resolve this comment:
Check if you allow SVG/MathML attributes (e.g., xlink:href, href) or to the attributeName field of SVG animation tags (, , etc.) in HTML templates.
- If you're affected, upgrade this dependency to at least version 19.2.17 at core-web/yarn.lock.
- If you're not affected, comment
/fp we don't use this [condition]
💬 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.
| component: DotStarterComponent, | ||
| imports: [DotMessagePipe, CheckboxModule], | ||
| providers: [ | ||
| provideHttpClient(), |
There was a problem hiding this comment.
High severity and reachable issue identified in your code:
Line 295 has a vulnerable usage of @angular/common, 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/common.
Affected versions of @angular/common are vulnerable to Exposure of Private Personal Information to an Unauthorized Actor / Insertion of Sensitive Information Into Sent Data. HttpClient incorrectly treats protocol-relative URLs as same-origin and attaches the X-XSRF-TOKEN header, allowing an attacker-triggered request to leak the victim’s XSRF token to an attacker-controlled domain.
To resolve this comment:
Upgrade this dependency to at least version 19.2.16 at core-web/yarn.lock.
💬 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.
| component: DotStarterComponent, | ||
| imports: [DotMessagePipe, CheckboxModule], | ||
| providers: [ | ||
| provideHttpClient(), |
There was a problem hiding this comment.
High severity and reachable issue identified in your code:
Line 113 has a vulnerable usage of @angular/common, 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/common.
Affected versions of @angular/common are vulnerable to Exposure of Private Personal Information to an Unauthorized Actor / Insertion of Sensitive Information Into Sent Data. HttpClient incorrectly treats protocol-relative URLs as same-origin and attaches the X-XSRF-TOKEN header, allowing an attacker-triggered request to leak the victim’s XSRF token to an attacker-controlled domain.
To resolve this comment:
Upgrade this dependency to at least version 19.2.16 at core-web/yarn.lock.
💬 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.
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 |
…se absolute URLs for consistency
This pull request introduces a major redesign of the Dot Starter onboarding experience in the
dotcms-uiapp. It removes the legacy user/permissions-based starter resolver and the old starter UI, replacing them with a modern, step-based onboarding flow. The new design features a progress tracker, step-by-step accordion navigation, and enhanced code/command display with copy functionality. Additionally, project configuration is updated to support these UI enhancements, including the integration of PrismJS for syntax highlighting and clipboard support.Redesign and onboarding experience:
dot-starter.component.html. The new UI uses accordions for steps, supports substeps with explanations, file paths, and command formatting, and integrates copy-to-clipboard buttons for code snippets.dot-starter-resolver.service.tsanddot-starter-resolver.service.spec.ts). The onboarding experience is now decoupled from user permissions logic. [1] [2]Project configuration and dependency updates:
stylesandscriptsarrays inproject.jsonaccordingly.These changes collectively modernize the onboarding experience, streamline the codebase, and enhance the visual and interactive aspects of onboarding for new users.