From 928c6b5731c81a55a5d18b3daedf85d30f86d800 Mon Sep 17 00:00:00 2001 From: MichalKinas <113341662+MichalKinas@users.noreply.github.com> Date: Mon, 16 Oct 2023 10:43:04 +0200 Subject: [PATCH] [ACS-5611] Add custom metadata side panels as new extension feature (#3466) * [ACS-5611] Add custom metadata panels as new extensions feature * [ACS-5611] Add custom metadata panels unit tests * [ACS-5611] Minor fixes * [ACS-5611] Text ellipsis for name column to always display badges * [ACS-5611] Use latest ADF and JS-API * [ACS-5611] Unit test fix * [ACS-5611] Click action only if exists --- extension.schema.json | 6 ++ package-lock.json | 78 +++++++++---------- package.json | 14 ++-- projects/aca-content/package.json | 8 +- .../name-column/name-column.component.html | 2 +- .../name-column/name-column.component.scss | 4 + .../name-column/name-column.component.ts | 4 +- .../metadata-tab.component.spec.ts | 25 +++++- .../metadata-tab/metadata-tab.component.ts | 14 +++- projects/aca-shared/package.json | 8 +- .../services/app.extension.service.spec.ts | 56 +++++++++++++ .../src/lib/services/app.extension.service.ts | 6 ++ 12 files changed, 166 insertions(+), 59 deletions(-) diff --git a/extension.schema.json b/extension.schema.json index f946bfb8f..df831c342 100644 --- a/extension.schema.json +++ b/extension.schema.json @@ -641,6 +641,12 @@ } ] }, + "customMetadataPanels": { + "description": "List of cutom metadata panels to display in metadata card component", + "type": "array", + "items": { "ref": "#/definitions/contentActionRef" }, + "minItems": 1 + }, "badges": { "description": "List of badges to display in the name column", "type": "array", diff --git a/package-lock.json b/package-lock.json index 0417f9da7..238002633 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,11 @@ "hasInstallScript": true, "license": "LGPL-3.0", "dependencies": { - "@alfresco/adf-content-services": "6.4.0-6377399867", - "@alfresco/adf-core": "6.4.0-6377399867", - "@alfresco/adf-extensions": "6.4.0-6377399867", - "@alfresco/eslint-plugin-eslint-angular": "6.4.0-6377399867", - "@alfresco/js-api": "7.1.0-1371", + "@alfresco/adf-content-services": "6.4.0-6497510485", + "@alfresco/adf-core": "6.4.0-6497510485", + "@alfresco/adf-extensions": "6.4.0-6497510485", + "@alfresco/eslint-plugin-eslint-angular": "6.4.0-6497510485", + "@alfresco/js-api": "7.1.0-1384", "@angular/animations": "14.1.3", "@angular/cdk": "14.1.3", "@angular/common": "14.1.3", @@ -46,8 +46,8 @@ "zone.js": "0.11.8" }, "devDependencies": { - "@alfresco/adf-cli": "6.4.0-6377399867", - "@alfresco/adf-testing": "6.4.0-6377399867", + "@alfresco/adf-cli": "6.4.0-6497510485", + "@alfresco/adf-testing": "6.4.0-6497510485", "@angular-devkit/build-angular": "14.2.11", "@angular-devkit/core": "14.1.2", "@angular-devkit/schematics": "14.1.2", @@ -120,12 +120,12 @@ "dev": true }, "node_modules/@alfresco/adf-cli": { - "version": "6.4.0-6377399867", - "resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-6.4.0-6377399867.tgz", - "integrity": "sha512-PtPtUdP1p3r7QH3iNA6s+haCfYHt60afKZ9HQ5ka1xVt5XvQ0MLSuVn/YCOD2YfVxbpAdJ43lLzhvWkurh7FPA==", + "version": "6.4.0-6497510485", + "resolved": "https://registry.npmjs.org/@alfresco/adf-cli/-/adf-cli-6.4.0-6497510485.tgz", + "integrity": "sha512-WcAuQNigrqM2piHYrxrZ/Qr5zFaA5dHjsmxe77a3R7jx9buLIFCml/93JaRsG5MMpswVEy/4cyFo3MpP4Ic+wg==", "dev": true, "dependencies": { - "@alfresco/js-api": ">=7.1.0-1349", + "@alfresco/js-api": ">=7.1.0-1372", "commander": "^6.2.1", "ejs": "^3.1.9", "license-checker": "^25.0.1", @@ -140,15 +140,15 @@ } }, "node_modules/@alfresco/adf-content-services": { - "version": "6.4.0-6377399867", - "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-6.4.0-6377399867.tgz", - "integrity": "sha512-MssW0eKSh0Af0/oldEijw96CswqhQZRXpoK45vWdRueBncoTE976mYlk//sjHKjo+p4tehVHSv0I+ihE/Q9N/Q==", + "version": "6.4.0-6497510485", + "resolved": "https://registry.npmjs.org/@alfresco/adf-content-services/-/adf-content-services-6.4.0-6497510485.tgz", + "integrity": "sha512-WSjQ24MiXler6in10jDoEheRPiPllizV5JE1FlRpMCwmrKM06sYBF4Xr8gtf1z3dLIzfXJAiqHsqvExYKWksQg==", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { - "@alfresco/adf-core": ">=6.4.0-6377399867", - "@alfresco/js-api": ">=7.1.0-1349", + "@alfresco/adf-core": ">=6.4.0-6497510485", + "@alfresco/js-api": ">=7.1.0-1372", "@angular/animations": ">=14.1.3", "@angular/cdk": ">=14.1.2", "@angular/common": ">=14.1.3", @@ -164,9 +164,9 @@ } }, "node_modules/@alfresco/adf-core": { - "version": "6.4.0-6377399867", - "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-6.4.0-6377399867.tgz", - "integrity": "sha512-SJw7Yk4vGXXQeol15jpkhrSgHhsOHOpgtng/qyzn/4C5B5BjylqZtlctSqdQ5cu/2VbGQetrOyqNACwWXTWvzA==", + "version": "6.4.0-6497510485", + "resolved": "https://registry.npmjs.org/@alfresco/adf-core/-/adf-core-6.4.0-6497510485.tgz", + "integrity": "sha512-ksjN7Jeu0OEat7RDpCkYq0kJcoKGjq3YqwwPW9e/1+p0eSQhDzPbMX4pl6fRu5tg9VsxarI1BgZkGAJDxlyJ5g==", "dependencies": { "angular-oauth2-oidc": "^13.0.1", "angular-oauth2-oidc-jwks": "^13.0.1", @@ -174,8 +174,8 @@ "tslib": "^2.3.0" }, "peerDependencies": { - "@alfresco/adf-extensions": ">=6.4.0-6377399867", - "@alfresco/js-api": ">=7.1.0-1349", + "@alfresco/adf-extensions": ">=6.4.0-6497510485", + "@alfresco/js-api": ">=7.1.0-1372", "@angular/animations": ">=14.1.3", "@angular/cdk": ">=14.1.2", "@angular/common": ">=14.1.3", @@ -193,25 +193,25 @@ } }, "node_modules/@alfresco/adf-extensions": { - "version": "6.4.0-6377399867", - "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-6.4.0-6377399867.tgz", - "integrity": "sha512-qx2+3QuVuYNnO9cKNTzHl9IQeLJGLJqXX3i61tm4U07l5SppxubQ3eSvXhcJebN3sXcE0KbbtA9aDH82Isd4DQ==", + "version": "6.4.0-6497510485", + "resolved": "https://registry.npmjs.org/@alfresco/adf-extensions/-/adf-extensions-6.4.0-6497510485.tgz", + "integrity": "sha512-lbX+tZeFYgLPojQmz09tLWF0qEts7MQSgeTGuDvkioa/JjF0lfMxBHc6c0PRJjyrEWFPn9lgmf1dhAXjdDrpAA==", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { - "@alfresco/js-api": ">=7.1.0-1349", + "@alfresco/js-api": ">=7.1.0-1372", "@angular/common": ">=14.1.3", "@angular/core": ">=14.1.3" } }, "node_modules/@alfresco/adf-testing": { - "version": "6.4.0-6377399867", - "resolved": "https://registry.npmjs.org/@alfresco/adf-testing/-/adf-testing-6.4.0-6377399867.tgz", - "integrity": "sha512-7x02FfsQAzpkfTRr/Eg98K20YpchAlPxhEvtiF8uDT9IlbeDzqwROcRt9l78+Fmf1inrryrO4HKKQEwoVCLZQg==", + "version": "6.4.0-6497510485", + "resolved": "https://registry.npmjs.org/@alfresco/adf-testing/-/adf-testing-6.4.0-6497510485.tgz", + "integrity": "sha512-l6xP+KZUQzNE9SoZfp9e7RDnTR+4RTa4Cg9pPoEl1MQdIKws0zO4m8d4cPZ3i7Ut0Ja+uZAMtJyMKwNJzFioJg==", "dev": true, "dependencies": { - "@alfresco/js-api": "7.1.0-1349", + "@alfresco/js-api": "7.1.0-1372", "@angular/compiler": "14.1.3", "@angular/core": "14.1.3", "rxjs": "6.6.6", @@ -219,13 +219,13 @@ "zone.js": "~0.11.4" }, "peerDependencies": { - "@alfresco/js-api": ">=7.1.0-1349" + "@alfresco/js-api": ">=7.1.0-1372" } }, "node_modules/@alfresco/adf-testing/node_modules/@alfresco/js-api": { - "version": "7.1.0-1349", - "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-7.1.0-1349.tgz", - "integrity": "sha512-p0qfoF8mTmaj8BCJ2EhNedOv60uqc2kOFEVByX/VxxTCYrMbG/OHRRNorYWoybI896AqJI5ytqJaKAtGqBKeuQ==", + "version": "7.1.0-1372", + "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-7.1.0-1372.tgz", + "integrity": "sha512-jaJaZr7unhdKvcG5wzr2ZNfUR0+/74BHDbpdzZJ8Edp77JnhQrQCtXcIzvw2qDzM84PT7PELUe6x4Ys0h6FzJA==", "dev": true, "dependencies": { "event-emitter": "^0.3.5", @@ -234,14 +234,14 @@ } }, "node_modules/@alfresco/eslint-plugin-eslint-angular": { - "version": "6.4.0-6377399867", - "resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-6.4.0-6377399867.tgz", - "integrity": "sha512-ZKiinjfISK1C4g3cBn+w0HH04DrAzEuSapT03VdHcNtHk4LLjhOeKPrnMoYr3ozWtUwJtXBVa+R31FxNfiP9oA==" + "version": "6.4.0-6497510485", + "resolved": "https://registry.npmjs.org/@alfresco/eslint-plugin-eslint-angular/-/eslint-plugin-eslint-angular-6.4.0-6497510485.tgz", + "integrity": "sha512-pfGSYNQSbosqGmWdWpHlQkKGuThizxaYCT2DPd17U6s74WYYIakj3F1dQ2PKiQl7tFvmhGeQ6vP08ru1KB/0kw==" }, "node_modules/@alfresco/js-api": { - "version": "7.1.0-1371", - "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-7.1.0-1371.tgz", - "integrity": "sha512-6BSKyg6xyXRcKr+6P6srbelaXQ23d5BVGgvTxtJnJitaQnJhU12u/lyZy7bGGJOW8cAksw63Tx4ty2rLfJAcZA==", + "version": "7.1.0-1384", + "resolved": "https://registry.npmjs.org/@alfresco/js-api/-/js-api-7.1.0-1384.tgz", + "integrity": "sha512-kcD5ZBAo6eRLeXYCjY3qRtEVnBV/9jE+ruMyNARy+dCBo+doiTYTx2yjc7yc7EX/yEDe07VU8bzPnEWXK/XkQA==", "dependencies": { "event-emitter": "^0.3.5", "superagent": "^8.0.9", diff --git a/package.json b/package.json index 3c665ea34..f4bbca9c1 100644 --- a/package.json +++ b/package.json @@ -33,11 +33,11 @@ }, "private": true, "dependencies": { - "@alfresco/adf-content-services": "6.4.0-6377399867", - "@alfresco/adf-core": "6.4.0-6377399867", - "@alfresco/adf-extensions": "6.4.0-6377399867", - "@alfresco/eslint-plugin-eslint-angular": "6.4.0-6377399867", - "@alfresco/js-api": "7.1.0-1371", + "@alfresco/adf-content-services": "6.4.0-6497510485", + "@alfresco/adf-core": "6.4.0-6497510485", + "@alfresco/adf-extensions": "6.4.0-6497510485", + "@alfresco/eslint-plugin-eslint-angular": "6.4.0-6497510485", + "@alfresco/js-api": "7.1.0-1384", "@angular/animations": "14.1.3", "@angular/cdk": "14.1.3", "@angular/common": "14.1.3", @@ -69,8 +69,8 @@ "zone.js": "0.11.8" }, "devDependencies": { - "@alfresco/adf-cli": "6.4.0-6377399867", - "@alfresco/adf-testing": "6.4.0-6377399867", + "@alfresco/adf-cli": "6.4.0-6497510485", + "@alfresco/adf-testing": "6.4.0-6497510485", "@angular-devkit/build-angular": "14.2.11", "@angular-devkit/core": "14.1.2", "@angular-devkit/schematics": "14.1.2", diff --git a/projects/aca-content/package.json b/projects/aca-content/package.json index 511122760..76b70fe16 100644 --- a/projects/aca-content/package.json +++ b/projects/aca-content/package.json @@ -5,10 +5,10 @@ "peerDependencies": { "@angular/common": ">=14.1.0", "@angular/core": ">=14.1.0", - "@alfresco/adf-core": ">=6.4.0-6341205853", - "@alfresco/adf-content-services": ">=6.4.0-6341205853", - "@alfresco/adf-extensions": ">=6.4.0-6341205853", - "@alfresco/js-api": ">=7.1.0-1349", + "@alfresco/adf-core": ">=6.4.0-6497510485", + "@alfresco/adf-content-services": ">=6.4.0-6497510485", + "@alfresco/adf-extensions": ">=6.4.0-6497510485", + "@alfresco/js-api": ">=7.1.0-1384", "@angular/animations": ">=14.1.3", "@angular/cdk": ">=14.1.3", "@angular/forms": ">=14.1.3", diff --git a/projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.html b/projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.html index 7981cb859..6edbe0723 100644 --- a/projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.html +++ b/projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.html @@ -1,5 +1,5 @@
-
+
{ let fixture: ComponentFixture; @@ -42,6 +43,7 @@ describe('MetadataTabComponent', () => { let extensions: AppExtensionService; let nodePermissionService: NodePermissionService; let actions$: Subject; + let appExtensionService: AppExtensionService; const presets = { default: { @@ -61,6 +63,7 @@ describe('MetadataTabComponent', () => { ] }); nodePermissionService = TestBed.inject(NodePermissionService); + appExtensionService = TestBed.inject(AppExtensionService); spyOn(nodePermissionService, 'check').and.callFake((source: Node, permissions: string[]) => { return permissions.some((permission) => source.allowableOperations.includes(permission)); }); @@ -270,4 +273,24 @@ describe('MetadataTabComponent', () => { expect(initialState.componentInstance.displayAspect).toBe('EXIF'); }); }); + + describe('Custom metadata panels', () => { + beforeEach(() => { + fixture = TestBed.createComponent(MetadataTabComponent); + component = fixture.componentInstance; + }); + + it('should get custom metadata panels', (done) => { + spyOn(appExtensionService, 'getCustomMetadataPanels').and.returnValue( + of([{ id: 'test', type: ContentActionType.custom, title: 'testTitle', component: 'test-id' }]) + ); + component.ngOnInit(); + component.customPanels.subscribe((panels) => { + expect(panels.length).toBe(1); + expect(panels[0].panelTitle).toEqual('testTitle'); + expect(panels[0].component).toEqual('test-id'); + done(); + }); + }); + }); }); diff --git a/projects/aca-content/src/lib/components/info-drawer/metadata-tab/metadata-tab.component.ts b/projects/aca-content/src/lib/components/info-drawer/metadata-tab/metadata-tab.component.ts index dfcaad995..708cbf75d 100644 --- a/projects/aca-content/src/lib/components/info-drawer/metadata-tab/metadata-tab.component.ts +++ b/projects/aca-content/src/lib/components/info-drawer/metadata-tab/metadata-tab.component.ts @@ -29,8 +29,8 @@ import { AppStore, EditOfflineAction, infoDrawerMetadataAspect, NodeActionTypes import { AppConfigService, NotificationService } from '@alfresco/adf-core'; import { Observable, Subject } from 'rxjs'; import { Store } from '@ngrx/store'; -import { ContentMetadataModule, ContentMetadataService } from '@alfresco/adf-content-services'; -import { filter, takeUntil } from 'rxjs/operators'; +import { ContentMetadataModule, ContentMetadataService, ContentMetadataCustomPanel } from '@alfresco/adf-content-services'; +import { filter, map, takeUntil } from 'rxjs/operators'; import { CommonModule } from '@angular/common'; import { Actions, ofType } from '@ngrx/effects'; @@ -44,6 +44,7 @@ import { Actions, ofType } from '@ngrx/effects'; [preset]="'custom'" [node]="node" [displayAspect]="displayAspect$ | async" + [customPanels]="customPanels | async" [(editable)]="editable" > @@ -60,6 +61,7 @@ export class MetadataTabComponent implements OnInit, OnDestroy { displayAspect$: Observable; canUpdateNode = false; editable = false; + customPanels: Observable; constructor( private permission: NodePermissionService, @@ -93,6 +95,14 @@ export class MetadataTabComponent implements OnInit, OnDestroy { this.editable = false; } }); + this.customPanels = this.extensions.getCustomMetadataPanels({ entry: this.node }).pipe( + map((panels) => { + return panels.map((panel) => { + return { panelTitle: panel.title, component: panel.component }; + }); + }), + takeUntil(this.onDestroy$) + ); } ngOnDestroy() { diff --git a/projects/aca-shared/package.json b/projects/aca-shared/package.json index 7c792e315..6cc9d7a3c 100644 --- a/projects/aca-shared/package.json +++ b/projects/aca-shared/package.json @@ -5,10 +5,10 @@ "license": "LGPL-3.0", "scripts": {}, "peerDependencies": { - "@alfresco/adf-content-services": ">=6.4.0-6341205853", - "@alfresco/adf-core": ">=6.4.0-6341205853", - "@alfresco/adf-extensions": ">=6.4.0-6341205853", - "@alfresco/js-api": ">=7.1.0-1349", + "@alfresco/adf-content-services": ">=6.4.0-6497510485", + "@alfresco/adf-core": ">=6.4.0-6497510485", + "@alfresco/adf-extensions": ">=6.4.0-6497510485", + "@alfresco/js-api": ">=7.1.0-1384", "@angular/animations": ">=14.1.3", "@angular/common": ">=14.1.3", "@angular/compiler": ">=14.1.3", diff --git a/projects/aca-shared/src/lib/services/app.extension.service.spec.ts b/projects/aca-shared/src/lib/services/app.extension.service.spec.ts index 966b8865b..f7faa7e5c 100644 --- a/projects/aca-shared/src/lib/services/app.extension.service.spec.ts +++ b/projects/aca-shared/src/lib/services/app.extension.service.spec.ts @@ -1736,4 +1736,60 @@ describe('AppExtensionService', () => { done(); }); }); + + it('should get custom metadata panels from config', (done) => { + extensions.setEvaluators({ + 'action.enabled': () => true + }); + + applyConfig({ + $id: 'test', + $name: 'test', + $version: '1.0.0', + $license: 'MIT', + $vendor: 'Good company', + $runtime: '1.5.0', + features: { + customMetadataPanels: [ + { + id: 'panel1-id', + title: 'testTitle', + component: 'testComponent1', + rules: { + visible: 'action.enabled' + } + }, + { + id: 'panel2-id', + title: 'testTitle2', + component: 'testComponent2', + rules: { + visible: 'action.enabled' + } + } + ] + } + }); + + const node: NodeEntry = { + entry: { + id: 'testId', + name: 'testName', + nodeType: 'test', + isFile: true, + isFolder: false, + modifiedAt: undefined, + createdAt: undefined, + modifiedByUser: undefined, + createdByUser: undefined + } + }; + + service.getCustomMetadataPanels(node).subscribe((panels) => { + expect(panels.length).toBe(2); + expect(panels[0].id).toEqual('panel1-id'); + expect(panels[1].id).toEqual('panel2-id'); + done(); + }); + }); }); diff --git a/projects/aca-shared/src/lib/services/app.extension.service.ts b/projects/aca-shared/src/lib/services/app.extension.service.ts index 393c0339e..00e9e8ab8 100644 --- a/projects/aca-shared/src/lib/services/app.extension.service.ts +++ b/projects/aca-shared/src/lib/services/app.extension.service.ts @@ -81,6 +81,7 @@ export class AppExtensionService implements RuleContext { private _sidebarActions = new BehaviorSubject>([]); private _badges = new BehaviorSubject>([]); private _filesDocumentListPreset = new BehaviorSubject>([]); + private _customMetadataPanels = new BehaviorSubject>([]); documentListPresets: { libraries: Array; @@ -160,6 +161,7 @@ export class AppExtensionService implements RuleContext { this._mainActions.next(this.loader.getFeatures(config).mainAction); this._badges.next(this.loader.getElements(config, 'features.badges')); this._filesDocumentListPreset.next(this.getDocumentListPreset(config, 'files')); + this._customMetadataPanels.next(this.loader.getElements(config, 'features.customMetadataPanels')); this.navbar = this.loadNavBar(config); this.sidebarTabs = this.loader.getElements(config, 'features.sidebar.tabs'); @@ -375,6 +377,10 @@ export class AppExtensionService implements RuleContext { return this._badges.pipe(map((badges) => badges.filter((badge) => this.evaluateRule(badge.rules.visible, node)))); } + getCustomMetadataPanels(node: NodeEntry): Observable> { + return this._customMetadataPanels.pipe(map((panels) => panels.filter((panel) => this.evaluateRule(panel.rules.visible, node)))); + } + private buildMenu(actionRef: ContentActionRef): ContentActionRef { if (actionRef.type === ContentActionType.menu && actionRef.children && actionRef.children.length > 0) { const children = actionRef.children.filter((action) => this.filterVisible(action)).map((action) => this.buildMenu(action));