mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[ACS-9454] Create upgrade guide for ADF 7.0.0 (#10779)
This commit is contained in:
dominikiwanekhyland
GitHub
parent
d09b8daa3a
commit
c8f9bd21ea
183
docs/upgrade-guide/upgrade-6.9.0-7.0.0.md
Normal file
183
docs/upgrade-guide/upgrade-6.9.0-7.0.0.md
Normal file
@ -0,0 +1,183 @@
|
||||
---
|
||||
Title: Upgrading from ADF v6.9 to v7.0
|
||||
---
|
||||
|
||||
# Upgrading from ADF v6.9 to v7.0
|
||||
|
||||
This guide provides instructions on how to upgrade your v6.9.0 ADF projects to v7.0.0.
|
||||
|
||||
## Before you begin
|
||||
|
||||
Always perform upgrades on "clean" project state, backup your changes or make a project backup.
|
||||
|
||||
```shell
|
||||
# Recommended clean up
|
||||
nx reset && rm -rf .angular .nx dist node_modules nxcache tmp
|
||||
```
|
||||
|
||||
## Libraries updates
|
||||
|
||||
Node version used is now 20.18.1.
|
||||
|
||||
### Breaking changes with libraries:
|
||||
|
||||
- Angular: 17.1.3
|
||||
- Angular Material: 17.1.2
|
||||
- Typescript: 5.3.3
|
||||
- RXJS: 7.8.1
|
||||
- NX: 20.0.0
|
||||
|
||||
Angular updates can be done with "Update Guide" from Angular documentation.
|
||||
|
||||
### Added libraries:
|
||||
- eslint-plugin-storybook
|
||||
- jasmine-marbles
|
||||
- @editorjs/paragraph
|
||||
- editorjs-text-alignment-blocktune
|
||||
- graphql-ws
|
||||
|
||||
### Deleted libraries:
|
||||
- protractor
|
||||
- selenium-webdriver
|
||||
- webdriver-manager
|
||||
- shx
|
||||
- monaco-editor
|
||||
- ngx-monaco-editor-v2
|
||||
- @types/selenium-webdriver
|
||||
- protractor-retry-angular-cli
|
||||
- protractor-screenshoter-plugin
|
||||
- protractor-smartrunner
|
||||
|
||||
Reinstall your dependencies and make initial build:
|
||||
|
||||
```shell
|
||||
npm i
|
||||
npm run build
|
||||
```
|
||||
|
||||
Review your applications as some styles and classes of Angular Material components might have changed.
|
||||
|
||||
## Demo-Shell and e2e
|
||||
Demo shell and its e2e tests have been deleted.
|
||||
|
||||
|
||||
## Material module
|
||||
Material module is deprecated and will be removed in a future release. Please import components and modules independently.
|
||||
|
||||
|
||||
## Standalone components
|
||||
Most components have been changed to "standalone" and their modules have been deleted. Please import components directly.
|
||||
|
||||
| Deleted modules |
|
||||
|--------------------------------|
|
||||
| AttachmentModule |
|
||||
| AppsListModule |
|
||||
| TaskListModule |
|
||||
| ProcessListModule |
|
||||
| ProcessUserInfoModule |
|
||||
| TaskCommentsModule |
|
||||
| ProcessCommentsModule |
|
||||
| PeopleModule |
|
||||
| DynamicTableModule |
|
||||
| ContentWidgetModule |
|
||||
| AnalyticsProcessModule |
|
||||
| DiagramsModule |
|
||||
| ButtonsMenuModule |
|
||||
| SitesDropdownModule |
|
||||
| DataColumnModule |
|
||||
| ContentUserInfoModule |
|
||||
| AppCardViewModule |
|
||||
| AppCloudSharedModule |
|
||||
| FileViewModule |
|
||||
| AppProcessListModule |
|
||||
| FolderDirectiveModule |
|
||||
| ContentTypeModule |
|
||||
| SortingPickerModule |
|
||||
| ProcessServicesCloudPipeModule |
|
||||
| StartTaskCloudModule |
|
||||
| ProcessDirectiveModule |
|
||||
| StartProcessCloudModule |
|
||||
| TaskDirectiveModule |
|
||||
|
||||
|
||||
|
||||
## Removed components, directives and pipes
|
||||
| Deleted components, directives and pipes |
|
||||
|------------------------------------------|
|
||||
| IsIncludedPipe |
|
||||
| TabLabelsPipe |
|
||||
| BooleanPipe |
|
||||
| FilterOutArrayObjectsByPropPipe |
|
||||
| LocalizedRolePipe |
|
||||
| MimeTypeIconPipe |
|
||||
| FilterStringPipe |
|
||||
| ProcessNameCloudPipe |
|
||||
| FormStylePipe |
|
||||
| CancelProcessDirective |
|
||||
| MomentDateTimePipe |
|
||||
| MomentDatePipe |
|
||||
|
||||
|
||||
## A11y changes
|
||||
Components have been reviewed and changed to fix most important issues with accessibility. Please test your application thoroughly to ensure that everything is working as expected, as some components have changed their structure, html roles or attributes.
|
||||
|
||||
| Components changed | Description of changes |
|
||||
|--------------------------------|----------------------------------------------------------------------|
|
||||
| Tooltips | Tooltips have been changed from Angular Material to standard tooltip |
|
||||
| Search Page and Search Filters | mat-chip-option replaced with mat-chip |
|
||||
| Columns Selector | role attribute changes |
|
||||
| DataTable | role attribute changes |
|
||||
| Aspect List | structure of html changed |
|
||||
|
||||
|
||||
## Guards
|
||||
All guards have been converted to functional guards (using the new Angular functional route guard pattern). Please review any custom guards in your application and adapt them to the functional pattern as needed.
|
||||
|
||||
Example of converting a class-based guard to a functional guard:
|
||||
|
||||
```typescript
|
||||
// Before (class-based)
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AuthGuard implements CanActivate {
|
||||
constructor(private authService: AuthService, private router: Router) {}
|
||||
|
||||
canActivate() {
|
||||
if (this.authService.isLoggedIn()) {
|
||||
return true;
|
||||
}
|
||||
this.router.navigate(['/login']);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// After (functional)
|
||||
export const authGuard = () => {
|
||||
const authService = inject(AuthService);
|
||||
const router = inject(Router);
|
||||
|
||||
if (authService.isLoggedIn()) {
|
||||
return true;
|
||||
}
|
||||
return router.parseUrl('/login');
|
||||
};
|
||||
```
|
||||
|
||||
## Model and interface changes
|
||||
|
||||
Some models and interfaces have changed:
|
||||
|
||||
| Before | After | Notes |
|
||||
|-------------------------------|-----------------------|------------------------------|
|
||||
| TaskDetailsModel | TaskRepresentation | Rename all instances |
|
||||
| IdentityUserFilterInterface | Removed | Use type definitions instead |
|
||||
| IdentityUserServiceInterface | Removed | Use type definitions instead |
|
||||
| TaskCloudServiceInterface | Removed | Use type definitions instead |
|
||||
|
||||
|
||||
## Final steps
|
||||
|
||||
After you have updated the code, make sure to test your application thoroughly to ensure that everything is working as expected. Pay special attention to areas that use the renamed models or interfaces, and make sure all components are properly imported as standalone components.
|
||||
|
||||
If you encounter any issues during the upgrade process, refer to the Angular update guide or the ADF community for assistance.
|
||||
@ -314,8 +314,7 @@
|
||||
*ngSwitchCase="'date'"
|
||||
class="adf-cell-value adf-cell-date"
|
||||
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
|
||||
[attr.data-automation-id]="'date_' + (data.getValue(row, col, resolverFn) | adfLocalizedDate: 'medium') "
|
||||
>
|
||||
[attr.data-automation-id]="'date_' + (data.getValue(row, col, resolverFn) | adfLocalizedDate: 'medium') ">
|
||||
<adf-date-cell class="adf-datatable-center-date-column-ie"
|
||||
[data]="data"
|
||||
[column]="col"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user