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()],