inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Angular 18 upgrade (#4448)

Browse Source
This commit is contained in:
dominikiwanekhyland
2025-05-15 14:39:45 +02:00
committed by GitHub
parent 4357fe9c08
commit 74e82c85a4
19 changed files with 6445 additions and 8032 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc.json
View File

@@ -299,13 +299,17 @@
], ],
"space-before-function-paren": "off", "space-before-function-paren": "off",
"space-in-parens": ["off", "never"], "space-in-parens": ["off", "never"],
"unicorn/filename-case": "error" "unicorn/filename-case": "error",
"@typescript-eslint/no-extra-semi": "error"
} }
}, },
{ {
"files": ["*.js"], "files": ["*.js"],
"extends": ["plugin:@nx/javascript"], "extends": ["plugin:@nx/javascript"],
"rules": {} "rules": {
"@typescript-eslint/no-extra-semi": "error",
"no-extra-semi": "off"
}
}, },
{ {
"files": ["*.html"], "files": ["*.html"],

3
.gitignore vendored
View File

@@ -60,4 +60,5 @@ Thumbs.db
/playwright-report/ /playwright-report/
/playwright/.cache/ /playwright/.cache/
.nx/cache .nx/cache
.nx/workspace-data

2
.nvmrc
View File

@@ -1 +1 @@
20.18.1 22.14.0

3
.prettierignore
View File

@@ -3,4 +3,5 @@ src/assets/i18n
/angular.json /angular.json
docs/**/*.md docs/**/*.md
/.nx/cache /.nx/cache
/.nx/workspace-data

2
Dockerfile
View File

@@ -1,6 +1,6 @@
# 1. Generate licenses # 1. Generate licenses
FROM node:20.18-alpine3.21 AS builder FROM node:22.14.0-alpine AS builder
WORKDIR /usr/src/alfresco WORKDIR /usr/src/alfresco
COPY package.json package.json COPY package.json package.json

126
migrations.json
View File

@@ -1,126 +0,0 @@
{
"migrations": [
{
"cli": "nx",
"version": "17.1.0-beta.5",
"requires": { "@angular/core": ">=17.0.0" },
"description": "Update the @angular/cli package version to ~17.0.0.",
"factory": "./src/migrations/update-17-1-0/update-angular-cli",
"package": "@nx/angular",
"name": "update-angular-cli-version-17-0-0"
},
{
"cli": "nx",
"version": "17.1.0-beta.5",
"requires": { "@angular/core": ">=17.0.0" },
"description": "Rename 'browserTarget' to 'buildTarget'.",
"factory": "./src/migrations/update-17-1-0/browser-target-to-build-target",
"package": "@nx/angular",
"name": "rename-browser-target-to-build-target"
},
{
"cli": "nx",
"version": "17.1.0-beta.5",
"requires": { "@angular/core": ">=17.0.0" },
"description": "Replace usages of '@nguniversal/builders' with '@angular-devkit/build-angular'.",
"factory": "./src/migrations/update-17-1-0/replace-nguniversal-builders",
"package": "@nx/angular",
"name": "replace-nguniversal-builders"
},
{
"cli": "nx",
"version": "17.1.0-beta.5",
"requires": { "@angular/core": ">=17.0.0" },
"description": "Replace usages of '@nguniversal/' packages with '@angular/ssr'.",
"factory": "./src/migrations/update-17-1-0/replace-nguniversal-engines",
"package": "@nx/angular",
"name": "replace-nguniversal-engines"
},
{
"cli": "nx",
"version": "17.1.0-beta.5",
"requires": { "@angular/core": ">=17.0.0" },
"description": "Replace the deep imports from 'zone.js/dist/zone' and 'zone.js/dist/zone-testing' with 'zone.js' and 'zone.js/testing'.",
"factory": "./src/migrations/update-17-1-0/update-zone-js-deep-import",
"package": "@nx/angular",
"name": "update-zone-js-deep-import"
},
{
"cli": "nx",
"version": "17.2.0-beta.2",
"description": "Rename '@nx/angular:webpack-dev-server' executor to '@nx/angular:dev-server'",
"factory": "./src/migrations/update-17-2-0/rename-webpack-dev-server",
"package": "@nx/angular",
"name": "rename-webpack-dev-server-executor"
},
{
"cli": "nx",
"version": "17.3.0-beta.10",
"requires": { "@angular/core": ">=17.1.0" },
"description": "Update the @angular/cli package version to ~17.1.0.",
"factory": "./src/migrations/update-17-3-0/update-angular-cli",
"package": "@nx/angular",
"name": "update-angular-cli-version-17-1-0"
},
{
"cli": "nx",
"version": "17.3.0-beta.10",
"requires": { "@angular/core": ">=17.1.0" },
"description": "Add 'browser-sync' as dev dependency when '@angular-devkit/build-angular:ssr-dev-server' or '@nx/angular:module-federation-dev-ssr' is used.",
"factory": "./src/migrations/update-17-3-0/add-browser-sync-dependency",
"package": "@nx/angular",
"name": "add-browser-sync-dependency"
},
{
"cli": "nx",
"version": "17.3.0-beta.10",
"requires": { "@angular/core": ">=17.1.0" },
"description": "Add 'autoprefixer' as dev dependency when '@nx/angular:ng-packagr-lite' or '@nx/angular:package` is used.",
"factory": "./src/migrations/update-17-3-0/add-autoprefixer-dependency",
"package": "@nx/angular",
"name": "add-autoprefixer-dependency"
},
{
"version": "17.0.0",
"description": "Angular v17 introduces a new control flow syntax that uses the @ and } characters. This migration replaces the existing usages with their corresponding HTML entities.",
"factory": "./migrations/block-template-entities/bundle",
"package": "@angular/core",
"name": "block-template-entities"
},
{
"version": "17.0.0",
"description": "CompilerOption.useJit and CompilerOption.missingTranslation are unused under Ivy. This migration removes their usage",
"factory": "./migrations/compiler-options/bundle",
"package": "@angular/core",
"name": "migration-v17-compiler-options"
},
{
"version": "17.0.0",
"description": "Updates `TransferState`, `makeStateKey`, `StateKey` imports from `@angular/platform-browser` to `@angular/core`.",
"factory": "./migrations/transfer-state/bundle",
"package": "@angular/core",
"name": "migration-transfer-state"
},
{
"version": "17.0.0-0",
"description": "Updates Angular Material to v17",
"factory": "./ng-update/index_bundled#updateToV17",
"package": "@angular/material",
"name": "migration-v17"
},
{
"version": "17.0.0-0",
"description": "Updates the Angular CDK to v17",
"factory": "./ng-update/index#updateToV17",
"package": "@angular/cdk",
"name": "migration-v17"
},
{
"description": "The road to v17-beta.1",
"version": "17.0.0-beta",
"factory": "./17_0_0-beta/index",
"package": "@ngrx/store-devtools",
"name": "ngrx-store-devtools-migration-17-0-0-beta"
}
]
}

13853
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

86
package.json
View File

@@ -30,61 +30,62 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@alfresco/adf-content-services": "8.1.0-14976464614", "@alfresco/adf-content-services": "8.1.0-15043883503",
"@alfresco/adf-core": "8.1.0-14976464614", "@alfresco/adf-core": "8.1.0-15043883503",
"@alfresco/adf-extensions": "8.1.0-14976464614", "@alfresco/adf-extensions": "8.1.0-15043883503",
"@alfresco/eslint-plugin-eslint-angular": "8.1.0-14976464614", "@alfresco/eslint-plugin-eslint-angular": "8.1.0-15043883503",
"@alfresco/js-api": "9.1.0-14976464614", "@alfresco/js-api": "9.1.0-15043883503",
"@angular/animations": "17.1.3", "@angular/animations": "18.2.9",
"@angular/cdk": "17.1.2", "@angular/cdk": "18.2.9",
"@angular/common": "17.1.3", "@angular/common": "18.2.9",
"@angular/compiler": "17.1.3", "@angular/compiler": "18.2.9",
"@angular/core": "17.1.3", "@angular/core": "18.2.9",
"@angular/forms": "17.1.3", "@angular/forms": "18.2.9",
"@angular/material": "17.1.2", "@angular/material": "18.2.9",
"@angular/material-date-fns-adapter": "17.1.2", "@angular/material-date-fns-adapter": "18.2.9",
"@angular/platform-browser": "17.1.3", "@angular/platform-browser": "18.2.9",
"@angular/platform-browser-dynamic": "17.1.3", "@angular/platform-browser-dynamic": "18.2.9",
"@angular/router": "17.1.3", "@angular/router": "18.2.9",
"@fontsource/open-sans": "^5.1.0", "@fontsource/open-sans": "^5.1.0",
"@mat-datetimepicker/core": "13.0.2", "@mat-datetimepicker/core": "14.0.0",
"@ngrx/effects": "17.0.1", "@ngrx/effects": "18.1.1",
"@ngrx/router-store": "17.0.1", "@ngrx/operators": "18.1.1",
"@ngrx/store": "17.0.1", "@ngrx/router-store": "18.1.1",
"@ngrx/store-devtools": "17.0.1", "@ngrx/store": "18.1.1",
"@ngrx/store-devtools": "18.1.1",
"@ngx-translate/core": "^14.0.0", "@ngx-translate/core": "^14.0.0",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"katex": "^0.16.21", "katex": "^0.16.21",
"material-icons": "^1.13.12", "material-icons": "^1.13.12",
"mermaid": "^11.5.0", "mermaid": "^11.5.0",
"minimatch-browser": "^1.0.0", "minimatch-browser": "^1.0.0",
"ngx-markdown": "^17.2.1", "ngx-markdown": "18.1.0",
"pdfjs-dist": "^5.1.91", "pdfjs-dist": "^5.1.91",
"prismjs": "^1.30.0", "prismjs": "^1.30.0",
"rxjs": "7.8.1", "rxjs": "7.8.1",
"tslib": "2.8.1", "tslib": "2.8.1",
"zone.js": "0.14.8" "zone.js": "0.14.10"
}, },
"devDependencies": { "devDependencies": {
"@alfresco/adf-cli": "8.1.0-14976464614", "@alfresco/adf-cli": "8.1.0-15043883503",
"@angular-devkit/build-angular": "17.3.16", "@angular-devkit/build-angular": "18.2.9",
"@angular-devkit/core": "17.1.4", "@angular-devkit/core": "18.2.9",
"@angular-devkit/schematics": "17.1.4", "@angular-devkit/schematics": "18.2.9",
"@angular-eslint/builder": "17.0.0", "@angular-eslint/builder": "18.4.3",
"@angular-eslint/eslint-plugin": "17.0.1", "@angular-eslint/eslint-plugin": "18.4.3",
"@angular-eslint/eslint-plugin-template": "17.0.1", "@angular-eslint/eslint-plugin-template": "18.4.3",
"@angular-eslint/schematics": "17.1.1", "@angular-eslint/schematics": "18.4.3",
"@angular-eslint/template-parser": "17.0.1", "@angular-eslint/template-parser": "18.4.3",
"@angular/cli": "17.1.3", "@angular/cli": "18.2.15",
"@angular/compiler-cli": "17.1.3", "@angular/compiler-cli": "18.2.9",
"@angular/language-service": "17.1.3", "@angular/language-service": "18.2.9",
"@cspell/eslint-plugin": "^8.14.1", "@cspell/eslint-plugin": "^8.14.1",
"@nx/angular": "17.3.2", "@nx/angular": "19.8.9",
"@nx/eslint-plugin": "17.3.2", "@nx/eslint-plugin": "19.8.9",
"@nx/workspace": "17.3.2", "@nx/workspace": "19.8.9",
"@playwright/test": "^1.47.2", "@playwright/test": "^1.47.2",
"@reportportal/agent-js-playwright": "^5.1.9", "@reportportal/agent-js-playwright": "^5.1.9",
"@schematics/angular": "17.1.4", "@schematics/angular": "18.2.9",
"@types/event-emitter": "^0.3.3", "@types/event-emitter": "^0.3.3",
"@types/jasmine": "~3.6.0", "@types/jasmine": "~3.6.0",
"@types/jasminewd2": "^2.0.8", "@types/jasminewd2": "^2.0.8",
@@ -92,6 +93,7 @@
"@types/superagent": "^4.1.10", "@types/superagent": "^4.1.10",
"@typescript-eslint/eslint-plugin": "6.21.0", "@typescript-eslint/eslint-plugin": "6.21.0",
"@typescript-eslint/parser": "6.21.0", "@typescript-eslint/parser": "6.21.0",
"@typescript-eslint/utils": "^7.16.0",
"dotenv": "16.4.5", "dotenv": "16.4.5",
"dotenv-expand": "^5.1.0", "dotenv-expand": "^5.1.0",
"eslint": "^8.42.0", "eslint": "^8.42.0",
@@ -114,13 +116,13 @@
"karma-jasmine-html-reporter": "^2.0.0", "karma-jasmine-html-reporter": "^2.0.0",
"karma-mocha-reporter": "^2.2.5", "karma-mocha-reporter": "^2.2.5",
"lint-staged": "^15.2.7", "lint-staged": "^15.2.7",
"ng-packagr": "17.1.2", "ng-packagr": "18.2.1",
"node-stream-zip": "^1.14.0", "node-stream-zip": "^1.14.0",
"nx": "17.3.2", "nx": "19.8.9",
"prettier": "3.5.3", "prettier": "3.5.3",
"stylelint": "^15.11.0", "stylelint": "^15.11.0",
"stylelint-config-standard-scss": "^7.0.1", "stylelint-config-standard-scss": "^7.0.1",
"ts-node": "^10.9.2", "ts-node": "^10.9.2",
"typescript": "5.3.3" "typescript": "5.5.4"
} }
} }

4
projects/aca-content/package.json
View File

@@ -18,8 +18,8 @@
"zone.js": ">=0.11.8" "zone.js": ">=0.11.8"
}, },
"dependencies": { "dependencies": {
"tslib": "^2.3.0", "tslib": ">=2.3.0",
"ngx-markdown": "^17.2.1" "ngx-markdown": ">=17.2.1"
}, },
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"

245
projects/aca-content/src/lib/components/details/details.component.spec.ts
View File

@@ -29,7 +29,7 @@ import { ActivatedRoute } from '@angular/router';
import { BehaviorSubject, of, Subject } from 'rxjs'; import { BehaviorSubject, of, Subject } from 'rxjs';
import { NO_ERRORS_SCHEMA } from '@angular/core'; import { NO_ERRORS_SCHEMA } from '@angular/core';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppHookService, ContentApiService } from '@alfresco/aca-shared'; import { AppExtensionService, AppHookService, ContentApiService } from '@alfresco/aca-shared';
import { NavigateToFolder, SetSelectedNodesAction } from '@alfresco/aca-shared/store'; import { NavigateToFolder, SetSelectedNodesAction } from '@alfresco/aca-shared/store';
import { Node, NodeEntry, PathElement } from '@alfresco/js-api'; import { Node, NodeEntry, PathElement } from '@alfresco/js-api';
import { RouterTestingModule } from '@angular/router/testing'; import { RouterTestingModule } from '@angular/router/testing';
@@ -57,14 +57,7 @@ describe('DetailsComponent', () => {
select: () => mockStream select: () => mockStream
}; };
const extensionsServiceMock = { const mockAspectActionsSubject$ = new BehaviorSubject<Array<ContentActionRef>>([]);
getAllowedSidebarActions: jasmine.createSpy('getAllowedSidebarActions')
};
const mockAspectActions: ContentActionRef[] = [];
const mockAspectActionsSubject$ = new BehaviorSubject(mockAspectActions);
extensionsServiceMock.getAllowedSidebarActions.and.returnValue(mockAspectActionsSubject$.asObservable());
const getBreadcrumb = (): BreadcrumbComponent => fixture.debugElement.query(By.directive(BreadcrumbComponent)).componentInstance; const getBreadcrumb = (): BreadcrumbComponent => fixture.debugElement.query(By.directive(BreadcrumbComponent)).componentInstance;
@@ -99,6 +92,9 @@ describe('DetailsComponent', () => {
schemas: [NO_ERRORS_SCHEMA] schemas: [NO_ERRORS_SCHEMA]
}); });
const appExtensionService = TestBed.inject(AppExtensionService);
spyOn(appExtensionService, 'getAllowedSidebarActions').and.returnValue(mockAspectActionsSubject$.asObservable());
fixture = TestBed.createComponent(DetailsComponent); fixture = TestBed.createComponent(DetailsComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
contentApiService = TestBed.inject(ContentApiService); contentApiService = TestBed.inject(ContentApiService);
@@ -130,138 +126,133 @@ describe('DetailsComponent', () => {
fixture.destroy(); fixture.destroy();
}); });
it('should get node id from router', () => {
fixture.detectChanges();
expect(component.nodeId).toBe('someId');
});
it('should set active tab from router', () => {
fixture.detectChanges();
expect(component.activeTab).toBe(2);
});
it('should get node info after setting node from router', () => {
fixture.detectChanges();
expect(contentApiService.getNode).toHaveBeenCalled();
});
it('should dispatch navigation to a given folder', () => {
const pathElement: PathElement = {
id: 'fake-id'
};
getBreadcrumb().navigate.emit(pathElement);
fixture.detectChanges();
expect(store.dispatch).toHaveBeenCalledWith(new NavigateToFolder({ entry: pathElement } as NodeEntry));
});
it('should pass different node as folderNode to breadcrumb when nodeUpdated from nodesApiService is triggered', () => {
fixture.detectChanges();
const breadcrumbComponent = getBreadcrumb();
const updatedNode = {
name: 'other node'
} as Node;
nodesApiService.nodeUpdated.next(updatedNode);
fixture.detectChanges();
expect(breadcrumbComponent.folderNode).toEqual(updatedNode);
expect(breadcrumbComponent.folderNode).not.toBe(updatedNode);
expect(updatedNode).not.toEqual(node.entry);
});
it('should dispatch node selection', () => {
fixture.detectChanges();
expect(store.dispatch).toHaveBeenCalledWith(new SetSelectedNodesAction([node]));
});
it('should set aspectActions from extensions', async () => {
extensionsServiceMock.getAllowedSidebarActions.and.returnValue(of(mockAspectActions));
fixture.detectChanges();
await fixture.whenStable().then(() => {
expect(component.aspectActions).toEqual(mockAspectActions);
});
});
it('should return the icon when getNodeIcon is called', () => {
const expectedIcon = 'assets/images/ft_ic_folder';
spyOn(contentService, 'getNodeIcon').and.returnValue(expectedIcon);
fixture.detectChanges();
component.ngOnInit();
expect(contentService.getNodeIcon).toHaveBeenCalled();
expect(component.nodeIcon).toContain(expectedIcon);
});
it('should set aspectActions from extension mock', () => { it('should set aspectActions from extension mock', () => {
const extensionMock = { const extensionMock = [
getAllowedSidebarActions: () => {
of([ id: 'app.sidebar.close',
{ order: 100,
id: 'app.sidebar.close', title: 'close',
order: 100, icon: 'highlight_off'
title: 'close', } as ContentActionRef
icon: 'highlight_off' ];
} mockAspectActionsSubject$.next(extensionMock);
])
};
extensionsServiceMock.getAllowedSidebarActions.and.returnValue(of(extensionMock));
fixture.detectChanges(); fixture.detectChanges();
fixture expect(component.aspectActions).toEqual([
.whenStable() {
.then(() => { id: 'app.sidebar.close',
expect(component.aspectActions).toEqual([ order: 100,
{ title: 'close',
id: 'app.sidebar.close', icon: 'highlight_off'
order: 100, } as ContentActionRef
title: 'close', ]);
icon: 'highlight_off' });
} as ContentActionRef
]); describe('', () => {
}) beforeEach(() => {
.catch((error) => { mockAspectActionsSubject$.next([]);
fail(`An error occurred: ${error}`); });
it('should get node id from router', () => {
fixture.detectChanges();
expect(component.nodeId).toBe('someId');
});
it('should set active tab from router', () => {
fixture.detectChanges();
expect(component.activeTab).toBe(2);
});
it('should get node info after setting node from router', () => {
fixture.detectChanges();
expect(contentApiService.getNode).toHaveBeenCalled();
});
it('should dispatch navigation to a given folder', () => {
const pathElement: PathElement = {
id: 'fake-id'
};
getBreadcrumb().navigate.emit(pathElement);
fixture.detectChanges();
expect(store.dispatch).toHaveBeenCalledWith(new NavigateToFolder({ entry: pathElement } as NodeEntry));
});
it('should pass different node as folderNode to breadcrumb when nodeUpdated from nodesApiService is triggered', () => {
fixture.detectChanges();
const breadcrumbComponent = getBreadcrumb();
const updatedNode = {
name: 'other node'
} as Node;
nodesApiService.nodeUpdated.next(updatedNode);
fixture.detectChanges();
expect(breadcrumbComponent.folderNode).toEqual(updatedNode);
expect(breadcrumbComponent.folderNode).not.toBe(updatedNode);
expect(updatedNode).not.toEqual(node.entry);
});
it('should dispatch node selection', () => {
fixture.detectChanges();
expect(store.dispatch).toHaveBeenCalledWith(new SetSelectedNodesAction([node]));
});
it('should set aspectActions from extensions', async () => {
fixture.detectChanges();
await fixture.whenStable().then(() => {
expect(component.aspectActions).toEqual([]);
}); });
}); });
it('should disable the permissions tab for smart folders based on aspects', () => { it('should return the icon when getNodeIcon is called', () => {
node.entry.isFolder = true; const expectedIcon = 'assets/images/ft_ic_folder';
node.entry.aspectNames = ['smf:customConfigSmartFolder']; spyOn(contentService, 'getNodeIcon').and.returnValue(expectedIcon);
fixture.detectChanges(); fixture.detectChanges();
component.ngOnInit(); component.ngOnInit();
expect(component.canManagePermissions).toBeFalse(); expect(contentService.getNodeIcon).toHaveBeenCalled();
expect(component.activeTab).not.toBe(2); expect(component.nodeIcon).toContain(expectedIcon);
}); });
it('should enable the permissions tab for regular folders based on aspects', () => { it('should disable the permissions tab for smart folders based on aspects', () => {
node.entry.isFolder = true; node.entry.isFolder = true;
node.entry.aspectNames = []; node.entry.aspectNames = ['smf:customConfigSmartFolder'];
fixture.detectChanges(); fixture.detectChanges();
component.ngOnInit(); component.ngOnInit();
expect(component.canManagePermissions).toBeFalse();
expect(component.activeTab).not.toBe(2);
});
expect(component.canManagePermissions).toBeTrue(); it('should enable the permissions tab for regular folders based on aspects', () => {
}); node.entry.isFolder = true;
node.entry.aspectNames = [];
fixture.detectChanges();
component.ngOnInit();
it('should change active tab based on canManagePermissions and tabName', () => { expect(component.canManagePermissions).toBeTrue();
component.nodeId = 'someNodeId'; });
component.activeTab = 0;
node.entry.isFolder = true; it('should change active tab based on canManagePermissions and tabName', () => {
node.entry.aspectNames = []; component.nodeId = 'someNodeId';
component.activeTab = 0;
fixture.detectChanges(); node.entry.isFolder = true;
component.ngOnInit(); node.entry.aspectNames = [];
component.setActiveTab('permissions'); fixture.detectChanges();
expect(component.activeTab).toBe(2); component.ngOnInit();
node.entry.isFolder = true; component.setActiveTab('permissions');
node.entry.aspectNames = ['smf:customConfigSmartFolder']; expect(component.activeTab).toBe(2);
fixture.detectChanges(); node.entry.isFolder = true;
component.ngOnInit(); node.entry.aspectNames = ['smf:customConfigSmartFolder'];
component.setActiveTab('permissions'); fixture.detectChanges();
expect(component.activeTab).not.toBe(2); component.ngOnInit();
component.setActiveTab('permissions');
expect(component.activeTab).not.toBe(2);
});
}); });
it('should navigate back when nodesDeleted event is triggered', () => { it('should navigate back when nodesDeleted event is triggered', () => {

5
projects/aca-content/src/lib/store/effects/viewer.effects.spec.ts
View File

@@ -22,13 +22,13 @@
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>. * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
*/ */
import { TestBed, fakeAsync, tick } from '@angular/core/testing'; import { fakeAsync, TestBed, tick } from '@angular/core/testing';
import { AppTestingModule } from '../../testing/app-testing.module'; import { AppTestingModule } from '../../testing/app-testing.module';
import { ViewerEffects } from './viewer.effects'; import { ViewerEffects } from './viewer.effects';
import { EffectsModule } from '@ngrx/effects'; import { EffectsModule } from '@ngrx/effects';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { ViewFileAction, ViewNodeAction, SetSelectedNodesAction, SetCurrentFolderAction } from '@alfresco/aca-shared/store'; import { SetCurrentFolderAction, SetSelectedNodesAction, ViewFileAction, ViewNodeAction } from '@alfresco/aca-shared/store';
import { MatDialogModule } from '@angular/material/dialog'; import { MatDialogModule } from '@angular/material/dialog';
describe('ViewerEffects', () => { describe('ViewerEffects', () => {
@@ -58,6 +58,7 @@ describe('ViewerEffects', () => {
tick(100); tick(100);
expect(router.navigateByUrl).toHaveBeenCalledWith('/folder1/preview/someId'); expect(router.navigateByUrl).toHaveBeenCalledWith('/folder1/preview/someId');
})); }));
it('should preview file from payload', fakeAsync(() => { it('should preview file from payload', fakeAsync(() => {
const node: any = { entry: { isFile: true, id: 'someId' } }; const node: any = { entry: { isFile: true, id: 'someId' } };
store.dispatch(new ViewFileAction(node)); store.dispatch(new ViewFileAction(node));

2
projects/aca-content/src/lib/ui/application.scss
View File

@@ -11,7 +11,7 @@ body {
font-size: 14px; font-size: 14px;
font-family: 'Open Sans', serif; font-family: 'Open Sans', serif;
color: mat.get-color-from-palette($foreground, text, 0.87); color: mat.m2-get-color-from-palette($foreground, text, 0.87);
margin: 0; margin: 0;
& > main { & > main {

34
projects/aca-content/src/lib/ui/custom-theme.scss
View File

@@ -6,25 +6,25 @@
@import './overrides/adf-about.theme'; @import './overrides/adf-about.theme';
@import './colors'; @import './colors';
$mat-primary-palette: mat.define-palette($aca-primary-blue, A100); $mat-primary-palette: mat.m2-define-palette($aca-primary-blue, A100);
$mat-accent-palette: mat.define-palette($aca-accent-green, A200); $mat-accent-palette: mat.m2-define-palette($aca-accent-green, A200);
$mat-warn-palette: mat.define-palette($aca-warn, A100); $mat-warn-palette: mat.m2-define-palette($aca-warn, A100);
$app-typography: mat.define-typography-config( $app-typography: mat.m2-define-typography-config(
$font-family: 'Open Sans', $font-family: 'Open Sans',
$headline-1: mat.define-typography-level(112px, 112px, 300), $headline-1: mat.m2-define-typography-level(112px, 112px, 300),
$headline-2: mat.define-typography-level(56px, 56px, 400), $headline-2: mat.m2-define-typography-level(56px, 56px, 400),
$headline-3: mat.define-typography-level(45px, 48px, 400), $headline-3: mat.m2-define-typography-level(45px, 48px, 400),
$headline-4: mat.define-typography-level(34px, 40px, 400), $headline-4: mat.m2-define-typography-level(34px, 40px, 400),
$headline-5: mat.define-typography-level(24px, 32px, 400), $headline-5: mat.m2-define-typography-level(24px, 32px, 400),
$headline-6: mat.define-typography-level(20px, 32px, 400), $headline-6: mat.m2-define-typography-level(20px, 32px, 400),
$subtitle-1: mat.define-typography-level(16px, 28px, 400), $subtitle-1: mat.m2-define-typography-level(16px, 28px, 400),
$subtitle-2: mat.define-typography-level(14px, 24px, 500), $subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
$body-2: mat.define-typography-level(14px, 24px, 500), $body-2: mat.m2-define-typography-level(14px, 24px, 500),
$body-1: mat.define-typography-level(14px, 20px, 400), $body-1: mat.m2-define-typography-level(14px, 20px, 400),
$caption: mat.define-typography-level(12px, 20px, 400), $caption: mat.m2-define-typography-level(12px, 20px, 400),
$button: mat.define-typography-level(14px, 14px, 500) $button: mat.m2-define-typography-level(14px, 14px, 500)
); );
$custom-theme: mat.define-light-theme( $custom-theme: mat.m2-define-light-theme(
( (
color: ( color: (
primary: $mat-primary-palette, primary: $mat-primary-palette,

13
projects/aca-content/src/lib/ui/overrides/ay11.scss
View File

@@ -117,11 +117,14 @@
} }
.mat-mdc-slide-toggle .mdc-form-field { .mat-mdc-slide-toggle .mdc-form-field {
.mdc-switch .mdc-switch__handle { button.mdc-switch.mdc-switch--selected,
width: 15px; button.mdc-switch.mdc-switch--unselected {
height: 15px; .mdc-switch__handle {
transform: translate(20%, 50%); width: 15px;
background-color: #484a4d; height: 15px;
transform: translate(20%, 50%);
background-color: #484a4d;
}
} }
.mdc-switch .mdc-switch__track { .mdc-switch .mdc-switch__track {

19
projects/aca-content/src/lib/ui/theme.scss
View File

@@ -11,6 +11,10 @@
--mdc-text-button-label-text-color: inherit; --mdc-text-button-label-text-color: inherit;
--mat-toolbar-container-text-color: inherit; --mat-toolbar-container-text-color: inherit;
--mat-form-field-container-height: unset; --mat-form-field-container-height: unset;
--mdc-checkbox-selected-icon-color: var(--theme-blue-checkbox-color);
--mdc-checkbox-selected-hover-icon-color: var(--theme-blue-checkbox-color);
--mdc-checkbox-selected-focus-icon-color: var(--theme-blue-checkbox-color);
--mat-dialog-container-max-width: 100%;
} }
mat-toolbar { mat-toolbar {
@@ -66,14 +70,6 @@ mat-toolbar {
height: 24px; height: 24px;
width: 24px; width: 24px;
} }
#{ms.$mat-checkbox-box}:has(#{ms.$mat-checkbox-native-control}):hover,
#{ms.$mat-checkbox-box}:has(#{ms.$mat-checkbox-native-control}) {
#{ms.$mat-checkbox-native-control}:enabled ~ #{ms.$mat-checkbox-background}:is(div) {
border-color: var(--theme-blue-checkbox-color);
background-color: var(--theme-blue-checkbox-color);
}
}
} }
#{ms.$mat-switch}:is(button)#{ms.$mat-switch-selected}#{ms.$mat-switch-checked} #{ms.$mat-switch-handle-track} #{ms.$mat-switch-handle}::after { #{ms.$mat-switch}:is(button)#{ms.$mat-switch-selected}#{ms.$mat-switch-checked} #{ms.$mat-switch-handle-track} #{ms.$mat-switch-handle}::after {
@@ -352,3 +348,10 @@ adf-dynamic-component {
#{ms.$mat-form-field-infix} { #{ms.$mat-form-field-infix} {
min-height: unset; min-height: unset;
} }
#{ms.$mat-mdc-submenu-icon} {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
}

48
projects/aca-content/src/lib/ui/variables/variables.scss
View File

@@ -4,10 +4,10 @@
$foreground: map-get($custom-theme, foreground); $foreground: map-get($custom-theme, foreground);
$background: map-get($custom-theme, background); $background: map-get($custom-theme, background);
$background-color: mat.get-color-from-palette($background, background); $background-color: mat.m2-get-color-from-palette($background, background);
$background-card-color: mat.get-color-from-palette($background, card); $background-card-color: mat.m2-get-color-from-palette($background, card);
$text-color: mat.get-color-from-palette($foreground, text); $text-color: mat.m2-get-color-from-palette($foreground, text);
$secondary-text: mat.get-color-from-palette($foreground, secondary-text); $secondary-text: mat.m2-get-color-from-palette($foreground, secondary-text);
// Custom variables - ACA specific styling: // Custom variables - ACA specific styling:
$data-table-thumbnail-width: 35px; $data-table-thumbnail-width: 35px;
@@ -44,7 +44,7 @@ $action-button-text-color: lighten($text-color, 35%);
$page-layout-header-background-color: $background-card-color; $page-layout-header-background-color: $background-card-color;
$search-chip-icon-color: #757575; $search-chip-icon-color: #757575;
$disabled-chip-background-color: #f5f5f5; $disabled-chip-background-color: #f5f5f5;
$contrast-gray: mat.get-color-from-palette($foreground, 'secondary-tex'); $contrast-gray: mat.m2-get-color-from-palette($foreground, 'secondary-tex');
$search-highlight-background-color: #ffd180; $search-highlight-background-color: #ffd180;
$info-snackbar-background: #1f74db; $info-snackbar-background: #1f74db;
$text-light-color: rgba(33, 35, 40, 0.7); $text-light-color: rgba(33, 35, 40, 0.7);
@@ -57,22 +57,22 @@ $light-grey-3: #dedede;
$defaults: ( $defaults: (
--theme-background-color: $background-color, --theme-background-color: $background-color,
--theme-search-background-color: darken($background-color, 1), --theme-search-background-color: darken($background-color, 1),
--theme-text-color: mat.get-color-from-palette($foreground, text, 0.54), --theme-text-color: mat.m2-get-color-from-palette($foreground, text, 0.54),
--theme-sidenav-text-color: mat.get-color-from-palette($foreground, text), --theme-sidenav-text-color: mat.m2-get-color-from-palette($foreground, text),
--theme-sidenav-hovered-text-color: mat.get-color-from-palette($foreground, text), --theme-sidenav-hovered-text-color: mat.m2-get-color-from-palette($foreground, text),
--theme-sidenav-user-menu-color: mat.get-color-from-palette($foreground, text), --theme-sidenav-user-menu-color: mat.m2-get-color-from-palette($foreground, text),
--theme-tab-active-text-color: mat.get-color-from-palette($foreground, text), --theme-tab-active-text-color: mat.m2-get-color-from-palette($foreground, text),
--theme-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87), --theme-text-bold-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
--theme-title-color: mat.get-color-from-palette($foreground, text, 0.87), --theme-title-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
--theme-text-disabled-color: mat.get-color-from-palette($foreground, text, 0.38), --theme-text-disabled-color: mat.m2-get-color-from-palette($foreground, text, 0.38),
--theme-border-color: mat.get-color-from-palette($foreground, text, 0.07), --theme-border-color: mat.m2-get-color-from-palette($foreground, text, 0.07),
--theme-card-background-color: mat.get-color-from-palette($background, card), --theme-card-background-color: mat.m2-get-color-from-palette($background, card),
--theme-foreground-text-color: mat.get-color-from-palette($foreground, text, 0.72), --theme-foreground-text-color: mat.m2-get-color-from-palette($foreground, text, 0.72),
--theme-foreground-text-bold-color: mat.get-color-from-palette($foreground, text, 0.87), --theme-foreground-text-bold-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
--theme-secondary-text-color: mat.get-color-from-palette($foreground, secondary-text), --theme-secondary-text-color: mat.m2-get-color-from-palette($foreground, secondary-text),
--theme-divider-color: mat.get-color-from-palette($foreground, divider, 0.07), --theme-divider-color: mat.m2-get-color-from-palette($foreground, divider, 0.07),
--theme-dialog-background-color: mat.get-color-from-palette($background, dialog), --theme-dialog-background-color: mat.m2-get-color-from-palette($background, dialog),
--theme-header-text-color: mat.get-color-from-palette($foreground, text, 0.87), --theme-header-text-color: mat.m2-get-color-from-palette($foreground, text, 0.87),
--new-button-font-size: 0.9rem, --new-button-font-size: 0.9rem,
--theme-grey-text-background-color: $grey-text-background, --theme-grey-text-background-color: $grey-text-background,
--theme-grey-background-color: $grey-background, --theme-grey-background-color: $grey-background,
@@ -86,10 +86,10 @@ $defaults: (
--theme-dropdown-color: $theme-dropdown-background, --theme-dropdown-color: $theme-dropdown-background,
--theme-dropdown-background-hover: $theme-dropdown-background-hover, --theme-dropdown-background-hover: $theme-dropdown-background-hover,
--theme-grey-divider-color: $grey-divider, --theme-grey-divider-color: $grey-divider,
--theme-pagination-background-color: mat.get-color-from-palette($background, background), --theme-pagination-background-color: mat.m2-get-color-from-palette($background, background),
--theme-about-panel-border-color: $grey-background, --theme-about-panel-border-color: $grey-background,
--theme-about-panel-background-color: mat.get-color-from-palette($background, card), --theme-about-panel-background-color: mat.m2-get-color-from-palette($background, card),
--theme-about-panel-title-color: mat.get-color-from-palette($foreground, text), --theme-about-panel-title-color: mat.m2-get-color-from-palette($foreground, text),
--theme-datetimepicker-font-color: $datetimepicker-font-color, --theme-datetimepicker-font-color: $datetimepicker-font-color,
--theme-datetimepicker-selected-date-background: $datetimepicker-selected-date-background, --theme-datetimepicker-selected-date-background: $datetimepicker-selected-date-background,
--theme-datetimepicker-cell-background: $datetimepicker-cell-background-color, --theme-datetimepicker-cell-background: $datetimepicker-cell-background-color,

16
projects/aca-content/viewer/src/lib/components/viewer/viewer.component.spec.ts
View File

@@ -22,20 +22,20 @@
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>. * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
*/ */
import { Router, ActivatedRoute } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing'; import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { AuthenticationService } from '@alfresco/adf-core'; import { AuthenticationService } from '@alfresco/adf-core';
import { UploadService, NodesApiService, DiscoveryApiService, DocumentListService } from '@alfresco/adf-content-services'; import { DiscoveryApiService, DocumentListService, NodesApiService, UploadService } from '@alfresco/adf-content-services';
import { ClosePreviewAction, RefreshPreviewAction, ViewNodeAction } from '@alfresco/aca-shared/store'; import { ClosePreviewAction, RefreshPreviewAction, ViewNodeAction } from '@alfresco/aca-shared/store';
import { AcaViewerComponent } from './viewer.component'; import { AcaViewerComponent } from './viewer.component';
import { of } from 'rxjs'; import { of } from 'rxjs';
import { import {
ContentApiService,
AppHookService, AppHookService,
DocumentBasePageService, ContentApiService,
LibTestingModule,
discoveryApiServiceMockValue, discoveryApiServiceMockValue,
DocumentBasePageServiceMock DocumentBasePageService,
DocumentBasePageServiceMock,
LibTestingModule
} from '@alfresco/aca-shared'; } from '@alfresco/aca-shared';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { Node } from '@alfresco/js-api'; import { Node } from '@alfresco/js-api';
@@ -69,7 +69,7 @@ describe('AcaViewerComponent', () => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [LibTestingModule, AcaViewerComponent], imports: [LibTestingModule, AcaViewerComponent],
providers: [ providers: [
{ provide: DocumentBasePageService, useValue: DocumentBasePageServiceMock }, { provide: DocumentBasePageService, useClass: DocumentBasePageServiceMock },
{ provide: DiscoveryApiService, useValue: discoveryApiServiceMockValue }, { provide: DiscoveryApiService, useValue: discoveryApiServiceMockValue },
{ provide: AuthenticationService, useValue: {} } { provide: AuthenticationService, useValue: {} }
] ]

4
projects/aca-playwright-shared/src/page-objects/components/adf-info-drawer.component.ts
View File

@@ -71,7 +71,7 @@ export class AdfInfoDrawerComponent extends BaseComponent {
public tagsAccordionPenButton = this.tagsAccordion.locator('[data-automation-id="showing-tag-input-button"]'); public tagsAccordionPenButton = this.tagsAccordion.locator('[data-automation-id="showing-tag-input-button"]');
public categoriesAccordionPenButton = this.categoriesAccordion.locator('[data-automation-id="meta-data-categories-edit"]'); public categoriesAccordionPenButton = this.categoriesAccordion.locator('[data-automation-id="meta-data-categories-edit"]');
public tagsInput = this.tagsCreator.locator('input'); public tagsInput = this.tagsCreator.locator('input');
public createTagButton = this.tagsCreator.locator('[role="button"]'); public createTagButton = this.tagsCreator.locator('.adf-create-tag-label');
public tagsChips = this.tagsCreator.locator('mat-chip'); public tagsChips = this.tagsCreator.locator('mat-chip');
public tagsChipsXButton = this.tagsChips.locator('.adf-dynamic-chip-list-delete-icon'); public tagsChipsXButton = this.tagsChips.locator('.adf-dynamic-chip-list-delete-icon');
public tagsAccordionCancelButton = this.getChild('[data-automation-id="reset-tags-metadata"]'); public tagsAccordionCancelButton = this.getChild('[data-automation-id="reset-tags-metadata"]');
@@ -79,7 +79,7 @@ export class AdfInfoDrawerComponent extends BaseComponent {
public categoriesAccordionCancelButton = this.getChild('[data-automation-id="reset-metadata"]'); public categoriesAccordionCancelButton = this.getChild('[data-automation-id="reset-metadata"]');
public categoriesAccordionConfirmButton = this.getChild('[data-automation-id="save-categories-metadata"]'); public categoriesAccordionConfirmButton = this.getChild('[data-automation-id="save-categories-metadata"]');
public categoriesInput = this.categoriesManagement.locator('input'); public categoriesInput = this.categoriesManagement.locator('input');
public categoriesListItems = this.categoriesManagement.locator('mat-list-item'); public categoriesListItems = this.categoriesManagement.locator('.adf-category');
public categoriesItemRemoveButton = this.categoriesManagement.locator('[data-automation-id="categories-remove-category-button"]'); public categoriesItemRemoveButton = this.categoriesManagement.locator('[data-automation-id="categories-remove-category-button"]');
public categoriesCreatedList = this.getChild('.adf-metadata-categories'); public categoriesCreatedList = this.getChild('.adf-metadata-categories');

4
tsconfig.json
View File

@@ -27,11 +27,11 @@
"@alfresco/aca-content/ms-office": ["projects/aca-content/ms-office/src/public-api.ts"], "@alfresco/aca-content/ms-office": ["projects/aca-content/ms-office/src/public-api.ts"],
"@alfresco/aca-content/preview": ["projects/aca-content/preview/src/public-api.ts"], "@alfresco/aca-content/preview": ["projects/aca-content/preview/src/public-api.ts"],
"@alfresco/aca-content/viewer": ["projects/aca-content/viewer/src/public-api.ts"], "@alfresco/aca-content/viewer": ["projects/aca-content/viewer/src/public-api.ts"],
"@alfresco/aca-playwright-shared": ["projects/aca-playwright-shared/src/public-api.ts"],
"@alfresco/aca-playwright-shared/*": ["projects/aca-playwright-shared/src/*/index.ts"],
"@alfresco/aca-shared": ["projects/aca-shared/src/public-api.ts"], "@alfresco/aca-shared": ["projects/aca-shared/src/public-api.ts"],
"@alfresco/aca-shared/rules": ["projects/aca-shared/rules/src/public-api.ts"], "@alfresco/aca-shared/rules": ["projects/aca-shared/rules/src/public-api.ts"],
"@alfresco/aca-shared/store": ["projects/aca-shared/store/src/public-api.ts"], "@alfresco/aca-shared/store": ["projects/aca-shared/store/src/public-api.ts"],
"@alfresco/aca-playwright-shared": ["projects/aca-playwright-shared/src/public-api.ts"],
"@alfresco/aca-playwright-shared/*": ["projects/aca-playwright-shared/src/*/index.ts"],
"package.json": ["package.json"] "package.json": ["package.json"]
} }
}, },