diff --git a/apps/client/src/flogo/app/export-flows/export-flows.component.html b/apps/client/src/flogo/app/export-flows/export-flows.component.html index 081ab1aca..13a23fd5c 100644 --- a/apps/client/src/flogo/app/export-flows/export-flows.component.html +++ b/apps/client/src/flogo/app/export-flows/export-flows.component.html @@ -1,5 +1,5 @@ -
- +
+
No actions to export
@@ -43,7 +43,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/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(); + } } diff --git a/apps/client/src/flogo/core/core.module.ts b/apps/client/src/flogo/core/core.module.ts index 409e71015..322aab505 100644 --- a/apps/client/src/flogo/core/core.module.ts +++ b/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], }) 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/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 @@
- -
+

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 16930d30a..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 @@ -16,4 +16,8 @@ export class ConfirmationComponent implements ConfirmationContent { @Inject(TRIGGER_STATUS_TOKEN) public status: TriggerStatus, public control: ConfirmationControl ) {} + + closeModal() { + this.control.cancel(); + } } 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/stage-configurator/stage-configurator.component.html b/libs/plugins/stream-client/src/lib/stage-configurator/stage-configurator.component.html index d5f9fe0b4..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/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()" >
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(); + } }