diff --git a/src/app/components/info-drawer/info-drawer.component.html b/src/app/components/info-drawer/info-drawer.component.html
index 8cf1471d7..9a57ca301 100644
--- a/src/app/components/info-drawer/info-drawer.component.html
+++ b/src/app/components/info-drawer/info-drawer.component.html
@@ -2,7 +2,11 @@
-
+
{
expect(component.displayNode).toBe(response);
expect(contentApiService.getNodeInfo).toHaveBeenCalled();
}));
+
+ it('should dispatch close panel on Esc keyboard event', () => {
+ const event = new KeyboardEvent('keydown', {
+ code: 'Escape',
+ key: 'Escape',
+ keyCode: 27
+ } as KeyboardEventInit);
+
+ fixture.detectChanges();
+
+ fixture.debugElement.nativeElement.dispatchEvent(event);
+
+ expect(storeMock.dispatch).toHaveBeenCalledWith(
+ new ToggleInfoDrawerAction()
+ );
+ });
});
diff --git a/src/app/components/info-drawer/info-drawer.component.ts b/src/app/components/info-drawer/info-drawer.component.ts
index 447080b89..9d514a943 100644
--- a/src/app/components/info-drawer/info-drawer.component.ts
+++ b/src/app/components/info-drawer/info-drawer.component.ts
@@ -23,7 +23,14 @@
* along with Alfresco. If not, see .
*/
-import { Component, Input, OnChanges, OnInit, OnDestroy } from '@angular/core';
+import {
+ Component,
+ HostListener,
+ Input,
+ OnChanges,
+ OnInit,
+ OnDestroy
+} from '@angular/core';
import {
MinimalNodeEntity,
MinimalNodeEntryEntity,
@@ -33,7 +40,10 @@ import { ContentApiService } from '@alfresco/aca-shared';
import { AppExtensionService } from '../../extensions/extension.service';
import { SidebarTabRef } from '@alfresco/adf-extensions';
import { Store } from '@ngrx/store';
-import { SetInfoDrawerStateAction } from '@alfresco/aca-shared/store';
+import {
+ SetInfoDrawerStateAction,
+ ToggleInfoDrawerAction
+} from '@alfresco/aca-shared/store';
@Component({
selector: 'aca-info-drawer',
@@ -49,6 +59,11 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
displayNode: MinimalNodeEntryEntity | SiteEntry;
tabs: Array = [];
+ @HostListener('keydown.escape', ['$event'])
+ onEscapeKeyboardEvent(event: KeyboardEvent): void {
+ this.close();
+ }
+
constructor(
private store: Store,
private contentApi: ContentApiService,
@@ -76,6 +91,10 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
}
}
+ private close() {
+ this.store.dispatch(new ToggleInfoDrawerAction());
+ }
+
private loadNodeInfo(nodeId: string) {
if (nodeId) {
this.isLoading = true;
diff --git a/src/app/components/info-drawer/info.drawer.module.ts b/src/app/components/info-drawer/info.drawer.module.ts
index 9ec8afd25..7876a98b1 100644
--- a/src/app/components/info-drawer/info.drawer.module.ts
+++ b/src/app/components/info-drawer/info.drawer.module.ts
@@ -39,6 +39,7 @@ import { MetadataTabComponent } from './metadata-tab/metadata-tab.component';
import { LibraryMetadataTabComponent } from './library-metadata-tab/library-metadata-tab.component';
import { LibraryMetadataFormComponent } from './library-metadata-tab/library-metadata-form.component';
import { VersionsTabComponent } from './versions-tab/versions-tab.component';
+import { A11yModule } from '@angular/cdk/a11y';
export function components() {
return [
@@ -59,7 +60,8 @@ export function components() {
ExtensionsModule,
ContentMetadataModule,
VersionManagerModule,
- DirectivesModule
+ DirectivesModule,
+ A11yModule
],
declarations: [...components()],
exports: [...components()],