inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-3257] Add actions extension capability to info drawer (#1471)

Browse Source 
* info drawer action added

* actions added

* * improved docs

* * added unit test

* fixed e2e

* * rename actions to toolbar

* * minor changes

* Update application-features.md

Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>
This commit is contained in:
dhrn 2020-05-19 22:16:11 +05:30 committed by GitHub
parent 234b41b917
commit 3b4579c19c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 336 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
docs/extending/application-features.md
View File

@ -200,6 +200,7 @@ You can provide the following customizations for the Sidebar (aka Info Drawer) c
- Add extra tabs with custom components
- Disable tabs from the main application or extensions
- Replace content or properties of existing tabs
- Add toolbar buttons
```json
{
@ -208,25 +209,35 @@ You can provide the following customizations for the Sidebar (aka Info Drawer) c
"$name": "plugin1",
"features": {
"sidebar": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "Properties",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "Comments",
"component": "app.components.tabs.comments"
}
]
"sidebar": {
"toolbar": [
{
"id": "app.sidebar.close",
"order": 100,
"title": "close",
"icon": "highlight_off"
}
],
"tabs": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "Properties",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "Comments",
"component": "app.components.tabs.comments"
}
]
}
}
}
```
The example above renders two tabs:
The example above renders two tabs with `close` icon:
- `Properties` tab that references the `app.components.tabs.metadata` component
- `Comments` tab that references the `app.components.tabs.comments` component

30
docs/ja/extending/application-features.md
View File

@ -209,20 +209,22 @@ export interface NavBarLinkRef {
"$name": "plugin1",
"features": {
"sidebar": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "Properties",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "Comments",
"component": "app.components.tabs.comments"
}
]
"sidebar": {
"tabs": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "Properties",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "Comments",
"component": "app.components.tabs.comments"
}
]
}
}
}
```

44
e2e/resources/extensibility-configs/context-submenus-ext.json
View File

@ -903,27 +903,29 @@
}
]
},
"sidebar": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments"
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions"
}
],
"sidebar": {
"tabs": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments"
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions"
}
]
},
"content-metadata-presets": [
{
"id": "app.content.metadata.custom",

44
e2e/resources/extensibility-configs/document-presets-ext.json
View File

@ -821,27 +821,29 @@
}
]
},
"sidebar": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments"
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions"
}
],
"sidebar": {
"tabs": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments"
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions"
}
]
},
"content-metadata-presets": [
{
"id": "app.content.metadata.custom",

44
e2e/resources/extensibility-configs/extensions-default.json
View File

@ -806,26 +806,28 @@
}
]
},
"sidebar": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments"
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions"
}
]
"sidebar": {
"tabs": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments"
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions"
}
]
}
}
}

44
e2e/resources/extensibility-configs/header-ext.json
View File

@ -842,27 +842,29 @@
}
]
},
"sidebar": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments"
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions"
}
],
"sidebar": {
"tabs": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments"
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions"
}
]
},
"content-metadata-presets": [
{
"id": "app.content.metadata.custom",

22
e2e/resources/extensibility-configs/info-drawer-ext.json
View File

@ -1220,34 +1220,36 @@
}
]
},
"sidebar": [
{
"sidebar": {
"tabs": [
{
"id": "app.sidebar.properties",
"order": 1,
"title": "MY PROPERTIES",
"component": "app.components.tabs.metadata"
},
{
},
{
"id": "app.sidebar.custom",
"order": 2,
"icon": "mood",
"title": "MY CUSTOM TITLE",
"component": "app.toolbar.toggleFavorite"
},
{
},
{
"id": "app.sidebar.no_title",
"order": 3,
"icon": "check_circle",
"component": "app.components.tabs.metadata"
},
{
},
{
"id": "app.sidebar.comments",
"order": 4,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments"
}
],
}
]
},
"content-metadata-presets": [
{
"id": "app.content.metadata.custom",

44
e2e/resources/extensibility-configs/metadata-ext.json
View File

@ -841,27 +841,29 @@
}
]
},
"sidebar": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments"
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions"
}
],
"sidebar": {
"tabs": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments"
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions"
}
]
},
"content-metadata-presets": [
{
"id": "app.content.metadata.custom",

78
e2e/resources/extensibility-configs/viewer-ext.json
View File

@ -1244,45 +1244,47 @@
}
]
},
"sidebar": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata",
"rules": {
"visible": "app.navigation.isNotLibraries"
"sidebar": {
"tabs": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata",
"rules": {
"visible": "app.navigation.isNotLibraries"
}
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments",
"rules": {
"visible": "app.navigation.isNotLibraries"
}
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions",
"rules": {
"visible": "app.navigation.isNotLibraries"
}
},
{
"id": "app.sidebar.library.properties",
"order": 500,
"title": "APP.INFO_DRAWER.TABS.LIBRARY_PROPERTIES",
"component": "app.components.tabs.library.metadata",
"rules": {
"visible": "app.libraries.toolbar"
}
}
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments",
"rules": {
"visible": "app.navigation.isNotLibraries"
}
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions",
"rules": {
"visible": "app.navigation.isNotLibraries"
}
},
{
"id": "app.sidebar.library.properties",
"order": 500,
"title": "APP.INFO_DRAWER.TABS.LIBRARY_PROPERTIES",
"component": "app.components.tabs.library.metadata",
"rules": {
"visible": "app.libraries.toolbar"
}
}
],
]
},
"content-metadata-presets": [
{
"id": "app.content.metadata.custom",

17
extension.schema.json
View File

@ -803,9 +803,20 @@
},
"sidebar": {
"description": "Sidebar extensions",
"type": "array",
"items": { "$ref": "#/definitions/sidebarTabRef" },
"minItems": 1
"type": "object",
"properties": {
"toolbar": {
"description": "Toolbar entries",
"type": "array",
"items": { "$ref": "#/definitions/contentActionRef" }
},
"tabs": {
"description": "Tabs entries",
"type": "array",
"items": { "$ref": "#/definitions/sidebarTabRef" },
"minItems": 1
}
}
},
"toolbar": {
"description": "Toolbar entries",

6
projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html
View File

@ -7,6 +7,12 @@
cdkTrapFocus
cdkTrapFocusAutoCapture
>
<adf-toolbar class="adf-toolbar--inline" info-drawer-buttons>
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>
</adf-toolbar>
<adf-info-drawer-tab
*ngFor="let tab of tabs"
[icon]="tab.icon"

37
projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.spec.ts
View File

@ -22,18 +22,20 @@
* You should have received a copy of the GNU Lesser General Public License
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
import { ContentActionRef } from '@alfresco/adf-extensions';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { InfoDrawerComponent } from './info-drawer.component';
import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Store } from '@ngrx/store';
import {
SetInfoDrawerStateAction,
ToggleInfoDrawerAction
} from '@alfresco/aca-shared/store';
import { of, Subject } from 'rxjs';
import { InfoDrawerComponent } from './info-drawer.component';
import { LibTestingModule } from '../../testing/lib-testing-module';
import { AppExtensionService } from '../../services/app.extension.service';
import { ContentApiService } from '../../services/content-api.service';
import { of } from 'rxjs';
import { SharedToolbarModule } from '../tool-bar/shared-toolbar.module';
describe('InfoDrawerComponent', () => {
let fixture: ComponentFixture<InfoDrawerComponent>;
@ -41,16 +43,26 @@ describe('InfoDrawerComponent', () => {
let contentApiService: ContentApiService;
let tab;
let appExtensionService: AppExtensionService;
const mockStream = new Subject();
const storeMock = {
dispatch: jasmine.createSpy('dispatch')
dispatch: jasmine.createSpy('dispatch'),
select: () => mockStream
};
const extensionServiceMock = {
getSidebarTabs: () => {}
getSidebarTabs: () => {},
getAllowedSidebarActions: () => [
{
id: 'app.sidebar.close',
order: 100,
title: 'close',
icon: 'highlight_off'
}
]
};
beforeEach(() => {
TestBed.configureTestingModule({
imports: [LibTestingModule],
imports: [LibTestingModule, SharedToolbarModule],
declarations: [InfoDrawerComponent],
providers: [
ContentApiService,
@ -166,4 +178,17 @@ describe('InfoDrawerComponent', () => {
new ToggleInfoDrawerAction()
);
});
it('should show the icons from extension', () => {
fixture.detectChanges();
mockStream.next();
expect(component.actions).toEqual([
{
id: 'app.sidebar.close',
order: 100,
title: 'close',
icon: 'highlight_off'
} as ContentActionRef
]);
});
});

19
projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts
View File

@ -36,14 +36,17 @@ import {
MinimalNodeEntryEntity,
SiteEntry
} from '@alfresco/js-api';
import { SidebarTabRef } from '@alfresco/adf-extensions';
import { ContentActionRef, SidebarTabRef } from '@alfresco/adf-extensions';
import { Store } from '@ngrx/store';
import {
getAppSelection,
SetInfoDrawerStateAction,
ToggleInfoDrawerAction
} from '@alfresco/aca-shared/store';
import { AppExtensionService } from '../../services/app.extension.service';
import { ContentApiService } from '../../services/content-api.service';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Component({
selector: 'aca-info-drawer',
@ -58,6 +61,8 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
isLoading = false;
displayNode: MinimalNodeEntryEntity | SiteEntry;
tabs: Array<SidebarTabRef> = [];
actions: Array<ContentActionRef> = [];
onDestroy$ = new Subject<boolean>();
@HostListener('keydown.escape')
onEscapeKeyboardEvent(): void {
@ -72,9 +77,17 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
ngOnInit() {
this.tabs = this.extensions.getSidebarTabs();
this.store
.select(getAppSelection)
.pipe(takeUntil(this.onDestroy$))
.subscribe(() => {
this.actions = this.extensions.getAllowedSidebarActions();
});
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
this.store.dispatch(new SetInfoDrawerStateAction(false));
}
@ -91,6 +104,10 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
}
}
trackByActionId(_: number, action: ContentActionRef) {
return action.id;
}
private close() {
this.store.dispatch(new ToggleInfoDrawerAction());
}

7
projects/aca-shared/src/lib/components/info-drawer/shared-info-drawer.module.ts
View File

@ -26,16 +26,19 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { InfoDrawerComponent } from './info-drawer.component';
import { InfoDrawerModule } from '@alfresco/adf-core';
import { InfoDrawerModule, ToolbarModule } from '@alfresco/adf-core';
import { ExtensionsModule } from '@alfresco/adf-extensions';
import { MatProgressBarModule } from '@angular/material';
import { SharedToolbarModule } from '../tool-bar/shared-toolbar.module';
@NgModule({
imports: [
CommonModule,
InfoDrawerModule,
MatProgressBarModule,
ExtensionsModule
ExtensionsModule,
ToolbarModule,
SharedToolbarModule
],
declarations: [InfoDrawerComponent],
exports: [InfoDrawerComponent]

17
projects/aca-shared/src/lib/services/app.extension.service.ts
View File

@ -83,7 +83,8 @@ export class AppExtensionService implements RuleContext {
openWithActions: Array<ContentActionRef> = [];
createActions: Array<ContentActionRef> = [];
navbar: Array<NavBarGroupRef> = [];
sidebar: Array<SidebarTabRef> = [];
sidebarTabs: Array<SidebarTabRef> = [];
sidebarActions: Array<ContentActionRef> = [];
contentMetadata: any;
viewerRules: ViewerRules = {};
userActions: Array<ContentActionRef> = [];
@ -163,6 +164,10 @@ export class AppExtensionService implements RuleContext {
config,
'features.header'
);
this.sidebarActions = this.loader.getContentActions(
config,
'features.sidebar.toolbar'
);
this.toolbarActions = this.loader.getContentActions(
config,
'features.toolbar'
@ -189,9 +194,9 @@ export class AppExtensionService implements RuleContext {
'features.create'
);
this.navbar = this.loadNavBar(config);
this.sidebar = this.loader.getElements<SidebarTabRef>(
this.sidebarTabs = this.loader.getElements<SidebarTabRef>(
config,
'features.sidebar'
'features.sidebar.tabs'
);
this.userActions = this.loader.getContentActions(
config,
@ -382,7 +387,7 @@ export class AppExtensionService implements RuleContext {
}
getSidebarTabs(): Array<SidebarTabRef> {
return this.sidebar.filter(action => this.filterVisible(action));
return this.sidebarTabs.filter(action => this.filterVisible(action));
}
getComponentById(id: string): Type<{}> {
@ -486,6 +491,10 @@ export class AppExtensionService implements RuleContext {
.reduce(reduceSeparators, []);
}
getAllowedSidebarActions(): Array<ContentActionRef> {
return this.getAllowedActions(this.sidebarActions);
}
getAllowedToolbarActions(): Array<ContentActionRef> {
return this.getAllowedActions(this.toolbarActions);
}

78
src/assets/app.extensions.json
View File

@ -1007,45 +1007,47 @@
}
]
},
"sidebar": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata",
"rules": {
"visible": "app.navigation.isNotLibraries"
"sidebar": {
"tabs": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "APP.INFO_DRAWER.TABS.PROPERTIES",
"component": "app.components.tabs.metadata",
"rules": {
"visible": "app.navigation.isNotLibraries"
}
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments",
"rules": {
"visible": "app.navigation.isNotLibraries"
}
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions",
"rules": {
"visible": "app.navigation.isNotLibraries"
}
},
{
"id": "app.sidebar.library.properties",
"order": 500,
"title": "APP.INFO_DRAWER.TABS.LIBRARY_PROPERTIES",
"component": "app.components.tabs.library.metadata",
"rules": {
"visible": "app.selection.library"
}
}
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "APP.INFO_DRAWER.TABS.COMMENTS",
"component": "app.components.tabs.comments",
"rules": {
"visible": "app.navigation.isNotLibraries"
}
},
{
"id": "app.sidebar.versions",
"order": 300,
"disabled": true,
"title": "APP.INFO_DRAWER.TABS.VERSIONS",
"component": "app.components.tabs.versions",
"rules": {
"visible": "app.navigation.isNotLibraries"
}
},
{
"id": "app.sidebar.library.properties",
"order": 500,
"title": "APP.INFO_DRAWER.TABS.LIBRARY_PROPERTIES",
"component": "app.components.tabs.library.metadata",
"rules": {
"visible": "app.selection.library"
}
}
],
]
},
"content-metadata-presets": [
{
"id": "app.content.metadata.custom",