[1333]close modals/overlays on escape

apps/client/src/flogo/app/export-flows/export-flows.component.html

@@ -1,5 +1,5 @@
-<div class="flogo-export-flow-modal">
-  <i class="flogo-icon-close flogo-export-flow-close" (click)="control.close()"></i>
+<div class="flogo-export-flow-modal" (fgOnEscape)="closeModal()">
+  <i class="flogo-icon-close flogo-export-flow-close" (click)="closeModal()"></i>
   <div *ngIf="exportFlowsData.flows?.length === 0" class="content-empty__message">
     No actions to export
   </div>
@@ -43,7 +43,7 @@
         <button
           type="button"
           class="flogo-button--secondary flogo-flows-add-cancel"
-          (click)="control.close()"
+          (click)="closeModal()"
         >
           {{ 'DETAILS:EXPORT-CANCEL' | translate }}
         </button>

apps/client/src/flogo/app/export-flows/export-flows.component.ts

@@ -94,6 +94,10 @@ export class FlogoExportFlowsComponent {
         });
   }
 
+  public closeModal() {
+    this.control.close();
+  }
+
   private resetForm() {
     this.unselectAllFlows();
   }

apps/client/src/flogo/app/missing-trigger-confirmation/missing-trigger-confirmation.component.html

@@ -1,4 +1,4 @@
-<div class="body">
+<div class="body" (fgOnEscape)="cancel()">
   <div class="lead">
     <i class="flogo-icon-info lead__icon"></i>
     <span>{{ 'APP.MISSING_TRIGGER.TITLE' | translate }}</span>

apps/client/src/flogo/app/shim-trigger/shim-trigger.component.html

@@ -1,5 +1,9 @@
-<div [class]="'flogo-common-modal shim-trigger__modal'" #shimTriggersModal>
-  <i class="flogo-icon-close shim-trigger__modal-close" (click)="control.close()"></i>
+<div
+  [class]="'flogo-common-modal shim-trigger__modal'"
+  #shimTriggersModal
+  (fgOnEscape)="closeModal()"
+>
+  <i class="flogo-icon-close shim-trigger__modal-close" (click)="closeModal()"></i>
   <div *ngIf="!isTriggerSelected">
     <div class="shim-trigger__modal-header">
       {{ 'TRIGGER-SHIM:MULTIPLE-TRIGGERS' | translate }}

apps/client/src/flogo/app/shim-trigger/shim-trigger.component.ts

@@ -89,4 +89,8 @@ export class TriggerShimBuildComponent {
       env: { os: env.os, arch: env.arch },
     });
   }
+
+  closeModal() {
+    this.control.close();
+  }
 }

apps/client/src/flogo/core/core.module.ts

@@ -7,6 +7,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { PortalModule } from '@angular/cdk/portal';
 import { ContribInstallerModule } from '@flogo-web/lib-client/contrib-installer';
 import { ModalModule } from '@flogo-web/lib-client/modal';
+import { SharedModule } from '@flogo-web/lib-client/common';
 
 @NgModule({
   declarations: [FlogoNavbarComponent],
@@ -18,6 +19,7 @@ import { ModalModule } from '@flogo-web/lib-client/modal';
     TranslateModule,
     ContribInstallerModule,
     ModalModule,
+    SharedModule,
   ],
   exports: [FlogoNavbarComponent],
 })

libs/lib-client/common/src/lib/client-shared.module.ts

@@ -12,6 +12,7 @@ import {
   EditableInputDirective,
   JsonDownloaderDirective,
   ClickOutsideDirective,
+  ActionOnEscapeDirective,
 } from './directives';
 import { LoadingIndicatorComponent, FlogoDeletePopupComponent } from './components';
 
@@ -25,6 +26,7 @@ const ALL_MODULE_DECLARABLES = [
   EditableInputDirective,
   TimeFromNowPipe,
   ClickOutsideDirective,
+  ActionOnEscapeDirective,
   FlogoDeletePopupComponent,
   ObjectPropertiesPipe,
 ];

libs/lib-client/common/src/lib/directives/action-on-escape.ts

@@ -0,0 +1,13 @@
+import { Directive, HostListener, EventEmitter, Output } from '@angular/core';
+
+@Directive({
+  selector: '[fgOnEscape]',
+})
+export class ActionOnEscapeDirective {
+  @Output() fgOnEscape = new EventEmitter<KeyboardEvent>();
+
+  @HostListener('document:keydown.escape')
+  onEscape() {
+    this.fgOnEscape.emit();
+  }
+}

libs/lib-client/common/src/lib/directives/index.ts

@@ -4,3 +4,4 @@ export { ContenteditableDirective } from './contenteditable.directive';
 export { DraggableDirective } from './draggable.directive';
 export { EditableInputDirective } from './editable-input.directive';
 export { JsonDownloaderDirective } from './json-downloader.directive';
+export { ActionOnEscapeDirective } from './action-on-escape';

libs/lib-client/confirmation/src/confirmation-modal/confirmation-modal.component.html

@@ -5,7 +5,7 @@
   </div>
 
   <div class="confirmation-modal-footer">
-    <button class="flogo-button--secondary" (click)="control.cancel()">
+    <button class="flogo-button--secondary" (click)="closeModal()">
       {{ 'MODAL:CANCEL' | translate }}
     </button>
     <button class="flogo-button--primary" (click)="control.confirm()">

libs/lib-client/confirmation/src/confirmation-modal/confirmation-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, InjectionToken } from '@angular/core';
+import { Component, HostListener, Inject, InjectionToken } from '@angular/core';
 import { ConfirmationControl } from '../confirmation-control';
 import { ConfirmationContent } from '../confirmation-content';
 import { animate, style, transition, trigger } from '@angular/animations';
@@ -33,4 +33,8 @@ export class ConfirmationModalComponent implements ConfirmationContent {
     @Inject(CONFIRMATION_MODAL_TOKEN) public data: ConfirmationModal,
     public control: ConfirmationControl
   ) {}
+
+  @HostListener('document:keydown.escape') closeModal() {
+    this.control.cancel();
+  }
 }

libs/lib-client/contrib-installer/src/lib/contrib-installer.component.html

@@ -1,4 +1,4 @@
-<div>
+<div (fgOnEscape)="closeModal()">
   <i class="flogo-installer-modal-close" (click)="closeModal()"></i>
   <div *ngIf="_status == showBlock.standByMode">
     <header class="container-fluid">

libs/lib-client/modal/src/components/modal/modal.component.html

@@ -1,7 +1,7 @@
 <svg
   *ngIf="showClose"
   class="close-icon"
-  (click)="close.emit()"
+  (click)="closeModal()"
   width="24px"
   height="24px"
   viewBox="0 0 24 24"

libs/lib-client/modal/src/components/modal/modal.component.ts

@@ -1,6 +1,7 @@
 import {
   Component,
   HostBinding,
+  HostListener,
   Input,
   Output,
   EventEmitter,
@@ -40,4 +41,11 @@ export class ModalComponent {
   @Output() close = new EventEmitter<void>();
 
   @HostBinding('@modalAnimate') animate = true;
+
+  /**
+   * close the modal on escape keypress
+   */
+  @HostListener('document:keydown.escape') closeModal() {
+    this.close.emit();
+  }
 }

libs/plugins/flow-client/src/lib/branch-configurator/branch-configurator.component.html

@@ -1,4 +1,4 @@
-<div class="modal-wrapper" *ngIf="isActive" [@dialog]>
+<div class="modal-wrapper" *ngIf="isActive" [@dialog] (fgOnEscape)="cancel()">
   <div class="mapper-modal qa-transform-modal">
     <div class="mapper-modal__header header">
       <div class="header__title">

libs/plugins/flow-client/src/lib/params-schema/params-schema.component.html

@@ -1,5 +1,5 @@
 <form [formGroup]="paramsForm" novalidate (submit)="saveParams()">
-  <flogo-modal [showClose]="false">
+  <flogo-modal [showClose]="false" (close)="cancelInputSchemaModel()">
     <flogo-modal-header>
       <div class="flow-input-params-header">
         <div class="flow-input-params-header__title">

libs/plugins/flow-client/src/lib/sub-flow/sub-flow.component.html

@@ -1,4 +1,4 @@
-<flogo-modal clas="modal" size="large" (close)="closeModal()">
+<flogo-modal class="modal" size="large" (close)="closeModal()">
   <flogo-modal-header class="header">
     <div class="header__title">
       {{ 'FLOWS-LIST:HEADER-TEXT' | translate }}

libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.html

@@ -1,4 +1,4 @@
-<div class="modal-wrapper" *ngIf="isActive" [@dialog]>
+<div class="modal-wrapper" *ngIf="isActive" [@dialog] (fgOnEscape)="cancel()">
   <div class="mapper-modal qa-transform-modal">
     <div class="mapper-modal__header header">
       <img [src]="iconUrl" class="header__icon" alt="Activity icon" />

libs/plugins/flow-client/src/lib/triggers/configurator/configurator.component.html

@@ -2,6 +2,7 @@
   @configurationPanel
   class="trigger-configuration__main"
   *ngIf="isOpen && selectedTriggerId"
+  (fgOnEscape)="onCloseOrDismiss()"
 >
   <div class="background"></div>
   <div class="mapper-modal__header header" @triggerConfiguratorLayoutElement>

libs/plugins/flow-client/src/lib/triggers/configurator/configurator.component.ts

@@ -5,8 +5,9 @@ import { switchMap, takeUntil } from 'rxjs/operators';
 
 import { SingleEmissionSubject } from '@flogo-web/lib-client/core';
 import {
-  ConfirmationService,
+  ConfirmationControl,
   ConfirmationResult,
+  ConfirmationService,
 } from '@flogo-web/lib-client/confirmation';
 import { IconProvider } from '@flogo-web/lib-client/diagram';
 
@@ -34,6 +35,7 @@ export class ConfiguratorComponent implements OnInit, OnDestroy {
   currentTriggerDetailStatus: TriggerStatus;
   selectedTriggerId: string;
   isOpen: boolean;
+  confirmationModalRef: ConfirmationControl;
 
   private ngDestroy$ = SingleEmissionSubject.create();
 
@@ -81,11 +83,18 @@ export class ConfiguratorComponent implements OnInit, OnDestroy {
   }
 
   changeTriggerSelection(triggerId: string) {
-    const switchTrigger = () =>
+    if (this.isConfirmationModalOpen()) {
+      return;
+    }
+    const switchTrigger = () => {
+      this.disposeConfirmationModalRef();
       this.store.dispatch(new TriggerConfigureActions.SelectTrigger(triggerId));
+    };
     this.checkForContextSwitchConfirmation((result?: ConfirmationResult) => {
       if (!result || result === ConfirmationResult.Discard) {
         switchTrigger();
+      } else if (result === ConfirmationResult.Cancel) {
+        this.disposeConfirmationModalRef();
       } else if (result === ConfirmationResult.Confirm) {
         this.triggerConfiguratorService.save().subscribe(() => {});
         switchTrigger();
@@ -99,10 +108,18 @@ export class ConfiguratorComponent implements OnInit, OnDestroy {
   }
 
   onCloseOrDismiss() {
-    const close = () => this.store.dispatch(new TriggerConfigureActions.CloseConfigure());
+    if (this.isConfirmationModalOpen()) {
+      return;
+    }
+    const close = () => {
+      this.disposeConfirmationModalRef();
+      this.store.dispatch(new TriggerConfigureActions.CloseConfigure());
+    };
     this.checkForContextSwitchConfirmation((result?: ConfirmationResult) => {
       if (!result || result === ConfirmationResult.Discard) {
         close();
+      } else if (result === ConfirmationResult.Cancel) {
+        this.disposeConfirmationModalRef();
       } else if (result === ConfirmationResult.Confirm) {
         this.triggerConfiguratorService.save().subscribe(() => {});
         close();
@@ -119,11 +136,11 @@ export class ConfiguratorComponent implements OnInit, OnDestroy {
     }
     const injectionTokens = new WeakMap();
     injectionTokens.set(TRIGGER_STATUS_TOKEN, status);
-    const confirmation = this.confirmationService.openModal(
+    this.confirmationModalRef = this.confirmationService.openModal(
       ConfirmationComponent,
       injectionTokens
     );
-    confirmation.result.subscribe(onResult);
+    this.confirmationModalRef.result.subscribe(onResult);
   }
 
   private observeWhileConfiguratorIsActive<T>(
@@ -137,4 +154,12 @@ export class ConfiguratorComponent implements OnInit, OnDestroy {
       takeUntil(this.ngDestroy$)
     );
   }
+
+  private isConfirmationModalOpen() {
+    return this.confirmationModalRef;
+  }
+
+  private disposeConfirmationModalRef() {
+    this.confirmationModalRef = null;
+  }
 }

libs/plugins/flow-client/src/lib/triggers/configurator/confirmation/confirmation.component.html

@@ -1,12 +1,12 @@
-<button class="uxpl-modal__close" (click)="control.cancel()">
+<button class="uxpl-modal__close" (click)="closeModal()">
   <span class="sr-only" aria-hidden="true">Close</span>
 </button>
 
-<div class="uxpl-modal-confirmation__body">
+<div class="uxpl-modal-confirmation__body" (fgOnEscape)="closeModal()">
   <p class="uxpl-modal-confirmation__lead">
     Save or discard your changes before leaving this trigger
   </p>
-  <p><a role="button" (click)="control.cancel()">Continue editing this trigger</a></p>
+  <p><a role="button" (click)="closeModal()">Continue editing this trigger</a></p>
 </div>
 
 <div class="uxpl-modal-confirmation__footer footer">

libs/plugins/flow-client/src/lib/triggers/configurator/confirmation/confirmation.component.ts

@@ -16,4 +16,8 @@ export class ConfirmationComponent implements ConfirmationContent {
     @Inject(TRIGGER_STATUS_TOKEN) public status: TriggerStatus,
     public control: ConfirmationControl
   ) {}
+
+  closeModal() {
+    this.control.cancel();
+  }
 }

libs/plugins/stream-client/src/lib/params-schema/params-schema.component.html

@@ -1,5 +1,5 @@
 <form [formGroup]="paramsForm" novalidate (submit)="saveParams()" class="fullscreen">
-  <flogo-modal [showClose]="false">
+  <flogo-modal [showClose]="false" (close)="cancelInputSchemaModel()">
     <flogo-modal-header>
       <div class="stream-input-params-header">
         <div class="stream-input-params-header__title">

libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.html

@@ -1,4 +1,4 @@
-<div class="modal-wrapper" *ngIf="isActive" [@dialog]>
+<div class="modal-wrapper" *ngIf="isActive" [@dialog] (fgOnEscape)="cancel()">
   <div class="mapper-modal qa-transform-modal">
     <div class="mapper-modal__header header">
       <img [src]="iconUrl" class="header__icon" alt="Activity icon" />

libs/plugins/stream-client/src/lib/triggers/configurator/configurator.component.html

@@ -2,6 +2,7 @@
   @configurationPanel
   class="trigger-configuration__main"
   *ngIf="isOpen && selectedTriggerId"
+  (fgOnEscape)="onCloseOrDismiss()"
 >
   <div class="background"></div>
   <div class="mapper-modal__header header" @triggerConfiguratorLayoutElement>