From 0462a00f5b1dd916610a565f4c098cfa8b39cb2a Mon Sep 17 00:00:00 2001 From: ppaidi Date: Thu, 10 Sep 2020 16:05:06 +0530 Subject: [PATCH 01/10] feat: create directive to act on escape key, use directive to close task and stage configurator modals on escape part of #1333 --- .../common/src/lib/client-shared.module.ts | 2 ++ .../common/src/lib/directives/action-on-escape.ts | 13 +++++++++++++ libs/lib-client/common/src/lib/directives/index.ts | 1 + .../task-configurator.component.html | 2 +- .../task-configurator.component.ts | 2 +- .../stage-configurator.component.html | 2 +- .../stage-configurator.component.ts | 2 +- 7 files changed, 20 insertions(+), 4 deletions(-) create mode 100644 libs/lib-client/common/src/lib/directives/action-on-escape.ts diff --git a/libs/lib-client/common/src/lib/client-shared.module.ts b/libs/lib-client/common/src/lib/client-shared.module.ts index d4f6c0d7a..27abb4988 100644 --- a/libs/lib-client/common/src/lib/client-shared.module.ts +++ b/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, ]; diff --git a/libs/lib-client/common/src/lib/directives/action-on-escape.ts b/libs/lib-client/common/src/lib/directives/action-on-escape.ts new file mode 100644 index 000000000..a4bc8b80c --- /dev/null +++ b/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(); + + @HostListener('document:keydown.escape') + onEscape() { + this.fgOnEscape.emit(); + } +} diff --git a/libs/lib-client/common/src/lib/directives/index.ts b/libs/lib-client/common/src/lib/directives/index.ts index 8da7f2701..b5465f41d 100644 --- a/libs/lib-client/common/src/lib/directives/index.ts +++ b/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'; diff --git a/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.html b/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.html index 70a361f7a..61025246b 100644 --- a/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.html +++ b/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.html @@ -1,4 +1,4 @@ -
+
Activity icon diff --git a/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.ts b/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.ts index 1e21bba88..277223a23 100644 --- a/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.ts +++ b/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.ts @@ -549,7 +549,7 @@ export class TaskConfiguratorComponent implements OnInit, OnDestroy { this.isActive = true; } - private close() { + close() { if (!this.contextChange$.closed) { this.contextChange$.emitAndComplete(); } diff --git a/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.html b/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.html index d5f9fe0b4..f1f351ca6 100644 --- a/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.html +++ b/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.html @@ -1,4 +1,4 @@ -
+
Activity icon diff --git a/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.ts b/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.ts index 5dc759cf5..930a56284 100644 --- a/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.ts +++ b/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.ts @@ -344,7 +344,7 @@ export class StageConfiguratorComponent implements OnInit, OnDestroy { this.isActive = true; } - private close() { + close() { if (!this.contextChange$.closed) { this.contextChange$.emitAndComplete(); } From 1dbeacf7d65aee4f97228db54c61deaf8ae2c97e Mon Sep 17 00:00:00 2001 From: ppaidi Date: Thu, 10 Sep 2020 18:35:27 +0530 Subject: [PATCH 02/10] feat: close branch configuration modal --- .../lib/branch-configurator/branch-configurator.component.html | 2 +- .../src/lib/task-configurator/task-configurator.component.html | 2 +- .../src/lib/task-configurator/task-configurator.component.ts | 2 +- .../lib/stage-configurator/stage-configurator.component.html | 2 +- .../src/lib/stage-configurator/stage-configurator.component.ts | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/libs/plugins/flow-client/src/lib/branch-configurator/branch-configurator.component.html b/libs/plugins/flow-client/src/lib/branch-configurator/branch-configurator.component.html index 4ce8d6914..475e51c6c 100644 --- a/libs/plugins/flow-client/src/lib/branch-configurator/branch-configurator.component.html +++ b/libs/plugins/flow-client/src/lib/branch-configurator/branch-configurator.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.html b/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.html index 61025246b..40aaa262b 100644 --- a/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.html +++ b/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.html @@ -1,4 +1,4 @@ -
+
Activity icon diff --git a/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.ts b/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.ts index 277223a23..1e21bba88 100644 --- a/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.ts +++ b/libs/plugins/flow-client/src/lib/task-configurator/task-configurator.component.ts @@ -549,7 +549,7 @@ export class TaskConfiguratorComponent implements OnInit, OnDestroy { this.isActive = true; } - close() { + private close() { if (!this.contextChange$.closed) { this.contextChange$.emitAndComplete(); } diff --git a/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.html b/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.html index f1f351ca6..87e56fc92 100644 --- a/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.html +++ b/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.html @@ -1,4 +1,4 @@ -
+
Activity icon diff --git a/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.ts b/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.ts index 930a56284..5dc759cf5 100644 --- a/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.ts +++ b/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.ts @@ -344,7 +344,7 @@ export class StageConfiguratorComponent implements OnInit, OnDestroy { this.isActive = true; } - close() { + private close() { if (!this.contextChange$.closed) { this.contextChange$.emitAndComplete(); } From d8cc1c8211344dd89604108ccc4ccd21f243d1e8 Mon Sep 17 00:00:00 2001 From: ppaidi Date: Thu, 10 Sep 2020 19:24:36 +0530 Subject: [PATCH 03/10] fix: update modal component to close on escape, close trigger configuration modal on escape --- .../modal/src/components/modal/modal.component.html | 2 +- .../modal/src/components/modal/modal.component.ts | 11 +++++++++++ .../lib/params-schema/params-schema.component.html | 2 +- .../triggers/configurator/configurator.component.html | 1 + .../lib/params-schema/params-schema.component.html | 2 +- .../triggers/configurator/configurator.component.html | 1 + 6 files changed, 16 insertions(+), 3 deletions(-) diff --git a/libs/lib-client/modal/src/components/modal/modal.component.html b/libs/lib-client/modal/src/components/modal/modal.component.html index d571c4ce8..b7f9b705d 100644 --- a/libs/lib-client/modal/src/components/modal/modal.component.html +++ b/libs/lib-client/modal/src/components/modal/modal.component.html @@ -1,7 +1,7 @@ (); @HostBinding('@modalAnimate') animate = true; + + closeModal() { + this.close.emit(); + } } diff --git a/libs/plugins/flow-client/src/lib/params-schema/params-schema.component.html b/libs/plugins/flow-client/src/lib/params-schema/params-schema.component.html index b61a40b6c..c415ad2cc 100644 --- a/libs/plugins/flow-client/src/lib/params-schema/params-schema.component.html +++ b/libs/plugins/flow-client/src/lib/params-schema/params-schema.component.html @@ -1,5 +1,5 @@
- +
diff --git a/libs/plugins/flow-client/src/lib/triggers/configurator/configurator.component.html b/libs/plugins/flow-client/src/lib/triggers/configurator/configurator.component.html index 031bd1c12..e1689e81e 100644 --- a/libs/plugins/flow-client/src/lib/triggers/configurator/configurator.component.html +++ b/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()" >
diff --git a/libs/plugins/stream-client/src/lib/params-schema/params-schema.component.html b/libs/plugins/stream-client/src/lib/params-schema/params-schema.component.html index 1f614376f..5970275ed 100644 --- a/libs/plugins/stream-client/src/lib/params-schema/params-schema.component.html +++ b/libs/plugins/stream-client/src/lib/params-schema/params-schema.component.html @@ -1,5 +1,5 @@
- +
diff --git a/libs/plugins/stream-client/src/lib/triggers/configurator/configurator.component.html b/libs/plugins/stream-client/src/lib/triggers/configurator/configurator.component.html index 36b8f7807..a7ca2d50f 100644 --- a/libs/plugins/stream-client/src/lib/triggers/configurator/configurator.component.html +++ b/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()" >
From 4e3fd1eb2d4872127e5f11becb14a5c6c2b6d040 Mon Sep 17 00:00:00 2001 From: ppaidi Date: Thu, 10 Sep 2020 20:03:37 +0530 Subject: [PATCH 04/10] fix: update confirmation modal component to close on escape, close contrib install modal on escape --- .../confirmation-modal/confirmation-modal.component.html | 2 +- .../src/confirmation-modal/confirmation-modal.component.ts | 6 +++++- .../src/lib/contrib-installer.component.html | 2 +- .../modal/src/components/modal/modal.component.ts | 7 ++----- .../flow-client/src/lib/sub-flow/sub-flow.component.html | 2 +- 5 files changed, 10 insertions(+), 9 deletions(-) diff --git a/libs/lib-client/confirmation/src/confirmation-modal/confirmation-modal.component.html b/libs/lib-client/confirmation/src/confirmation-modal/confirmation-modal.component.html index 3d63a56d9..237ad15cd 100644 --- a/libs/lib-client/confirmation/src/confirmation-modal/confirmation-modal.component.html +++ b/libs/lib-client/confirmation/src/confirmation-modal/confirmation-modal.component.html @@ -5,7 +5,7 @@
- diff --git a/apps/client/src/flogo/app/export-flows/export-flows.component.ts b/apps/client/src/flogo/app/export-flows/export-flows.component.ts index 838729e2b..5830e1d6b 100644 --- a/apps/client/src/flogo/app/export-flows/export-flows.component.ts +++ b/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(); } diff --git a/apps/client/src/flogo/app/missing-trigger-confirmation/missing-trigger-confirmation.component.html b/apps/client/src/flogo/app/missing-trigger-confirmation/missing-trigger-confirmation.component.html index 9483a31e5..97787e6a4 100644 --- a/apps/client/src/flogo/app/missing-trigger-confirmation/missing-trigger-confirmation.component.html +++ b/apps/client/src/flogo/app/missing-trigger-confirmation/missing-trigger-confirmation.component.html @@ -1,4 +1,4 @@ -
+
{{ 'APP.MISSING_TRIGGER.TITLE' | translate }} diff --git a/libs/plugins/flow-client/src/lib/triggers/configurator/confirmation/confirmation.component.html b/libs/plugins/flow-client/src/lib/triggers/configurator/confirmation/confirmation.component.html index 40d7ceac0..1497f5cc3 100644 --- a/libs/plugins/flow-client/src/lib/triggers/configurator/confirmation/confirmation.component.html +++ b/libs/plugins/flow-client/src/lib/triggers/configurator/confirmation/confirmation.component.html @@ -1,12 +1,12 @@ - -
+

Save or discard your changes before leaving this trigger

-

Continue editing this trigger

+

Continue editing this trigger

diff --git a/libs/plugins/flow-client/src/lib/triggers/configurator/confirmation/confirmation.component.ts b/libs/plugins/flow-client/src/lib/triggers/configurator/confirmation/confirmation.component.ts index ce6a6d7ea..11ffbbd64 100644 --- a/libs/plugins/flow-client/src/lib/triggers/configurator/confirmation/confirmation.component.ts +++ b/libs/plugins/flow-client/src/lib/triggers/configurator/confirmation/confirmation.component.ts @@ -1,4 +1,4 @@ -import { Component, HostListener, Inject } from '@angular/core'; +import { Component, Inject } from '@angular/core'; import { ConfirmationControl, ConfirmationContent, @@ -12,13 +12,12 @@ import { TRIGGER_STATUS_TOKEN } from './status.token'; styleUrls: ['./confirmation.component.less'], }) export class ConfirmationComponent implements ConfirmationContent { - @HostListener('document:keydown.escape') - closeModal() { - this.control.cancel(); - } - constructor( @Inject(TRIGGER_STATUS_TOKEN) public status: TriggerStatus, public control: ConfirmationControl ) {} + + closeModal() { + this.control.cancel(); + } } From 9d54279084cf3eab9487803e0c1d6d45c973dc16 Mon Sep 17 00:00:00 2001 From: ppaidi Date: Tue, 15 Sep 2020 20:11:43 +0530 Subject: [PATCH 09/10] fix: close select shim trigger modal on escape --- .../flogo/app/shim-trigger/shim-trigger.component.html | 8 ++++++-- .../src/flogo/app/shim-trigger/shim-trigger.component.ts | 4 ++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/apps/client/src/flogo/app/shim-trigger/shim-trigger.component.html b/apps/client/src/flogo/app/shim-trigger/shim-trigger.component.html index bf52c6263..c9fd416ab 100644 --- a/apps/client/src/flogo/app/shim-trigger/shim-trigger.component.html +++ b/apps/client/src/flogo/app/shim-trigger/shim-trigger.component.html @@ -1,5 +1,9 @@ -
- +
+
{{ 'TRIGGER-SHIM:MULTIPLE-TRIGGERS' | translate }} diff --git a/apps/client/src/flogo/app/shim-trigger/shim-trigger.component.ts b/apps/client/src/flogo/app/shim-trigger/shim-trigger.component.ts index 14d20d8e2..3b0183900 100644 --- a/apps/client/src/flogo/app/shim-trigger/shim-trigger.component.ts +++ b/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(); + } } From dda2b7c79e8d3a100a6e5cbff4556d7d5cb3a2de Mon Sep 17 00:00:00 2001 From: ppaidi Date: Tue, 15 Sep 2020 21:54:32 +0530 Subject: [PATCH 10/10] fix(plugins-stream-client): trigger configuration submodal enter into loop --- .../configurator/configurator.component.ts | 35 ++++++++++++++++--- .../confirmation/confirmation.component.html | 6 ++-- .../confirmation/confirmation.component.ts | 4 +++ 3 files changed, 37 insertions(+), 8 deletions(-) diff --git a/libs/plugins/stream-client/src/lib/triggers/configurator/configurator.component.ts b/libs/plugins/stream-client/src/lib/triggers/configurator/configurator.component.ts index b285f7632..5f04eb832 100644 --- a/libs/plugins/stream-client/src/lib/triggers/configurator/configurator.component.ts +++ b/libs/plugins/stream-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 { TriggerConfigureSelectors } from '../../core/state/triggers-configure'; @@ -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( @@ -137,4 +154,12 @@ export class ConfiguratorComponent implements OnInit, OnDestroy { takeUntil(this.ngDestroy$) ); } + + private isConfirmationModalOpen() { + return this.confirmationModalRef; + } + + private disposeConfirmationModalRef() { + this.confirmationModalRef = null; + } } diff --git a/libs/plugins/stream-client/src/lib/triggers/configurator/confirmation/confirmation.component.html b/libs/plugins/stream-client/src/lib/triggers/configurator/confirmation/confirmation.component.html index 40d7ceac0..1497f5cc3 100644 --- a/libs/plugins/stream-client/src/lib/triggers/configurator/confirmation/confirmation.component.html +++ b/libs/plugins/stream-client/src/lib/triggers/configurator/confirmation/confirmation.component.html @@ -1,12 +1,12 @@ - -
+

Save or discard your changes before leaving this trigger

-

Continue editing this trigger

+

Continue editing this trigger

diff --git a/libs/plugins/stream-client/src/lib/triggers/configurator/confirmation/confirmation.component.ts b/libs/plugins/stream-client/src/lib/triggers/configurator/confirmation/confirmation.component.ts index b994331c6..713b12bac 100644 --- a/libs/plugins/stream-client/src/lib/triggers/configurator/confirmation/confirmation.component.ts +++ b/libs/plugins/stream-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(); + } }