[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
This commit is contained in:
MichalKinas
2023-10-16 10:43:04 +02:00
committed by GitHub
parent bc98af0968
commit 928c6b5731
12 changed files with 166 additions and 59 deletions

View File

@@ -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",

View File

@@ -1,5 +1,5 @@
<div class="aca-custom-name-column">
<div [ngClass]="{ 'aca-name-column-container': isFile && isFileWriteLocked }">
<div class="aca-name-column-container">
<span
role="link"
tabindex="0"

View File

@@ -13,6 +13,10 @@
}
.aca-name-column-container {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
aca-locked-by {
display: flex;
align-items: center;

View File

@@ -117,6 +117,8 @@ export class CustomNameColumnComponent extends NameColumnComponent implements On
}
onBadgeClick(badge: Badge) {
this.appExtensionService.runActionById(badge.actions?.click, this.node);
if (badge.actions?.click) {
this.appExtensionService.runActionById(badge.actions?.click, this.node);
}
}
}

View File

@@ -32,7 +32,8 @@ import { AppState, EditOfflineAction, SetInfoDrawerMetadataAspectAction } from '
import { By } from '@angular/platform-browser';
import { AppExtensionService, NodePermissionService } from '@alfresco/aca-shared';
import { Actions } from '@ngrx/effects';
import { Subject } from 'rxjs';
import { of, Subject } from 'rxjs';
import { ContentActionType } from '@alfresco/adf-extensions';
describe('MetadataTabComponent', () => {
let fixture: ComponentFixture<MetadataTabComponent>;
@@ -42,6 +43,7 @@ describe('MetadataTabComponent', () => {
let extensions: AppExtensionService;
let nodePermissionService: NodePermissionService;
let actions$: Subject<EditOfflineAction>;
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();
});
});
});
});

View File

@@ -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"
>
</adf-content-metadata-card>
@@ -60,6 +61,7 @@ export class MetadataTabComponent implements OnInit, OnDestroy {
displayAspect$: Observable<string>;
canUpdateNode = false;
editable = false;
customPanels: Observable<ContentMetadataCustomPanel[]>;
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() {

View File

@@ -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",

View File

@@ -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();
});
});
});

View File

@@ -81,6 +81,7 @@ export class AppExtensionService implements RuleContext {
private _sidebarActions = new BehaviorSubject<Array<ContentActionRef>>([]);
private _badges = new BehaviorSubject<Array<Badge>>([]);
private _filesDocumentListPreset = new BehaviorSubject<Array<DocumentListPresetRef>>([]);
private _customMetadataPanels = new BehaviorSubject<Array<ContentActionRef>>([]);
documentListPresets: {
libraries: Array<DocumentListPresetRef>;
@@ -160,6 +161,7 @@ export class AppExtensionService implements RuleContext {
this._mainActions.next(this.loader.getFeatures(config).mainAction);
this._badges.next(this.loader.getElements<Badge>(config, 'features.badges'));
this._filesDocumentListPreset.next(this.getDocumentListPreset(config, 'files'));
this._customMetadataPanels.next(this.loader.getElements<ContentActionRef>(config, 'features.customMetadataPanels'));
this.navbar = this.loadNavBar(config);
this.sidebarTabs = this.loader.getElements<SidebarTabRef>(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<Array<ContentActionRef>> {
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));