[ACA] Dialogs - close on navigation by default (#634)

* close modals on navigation by default

* lint

* modals effect and action

* add to store module

* register in module

* close modals if auth fails

* rename action

* change dialog selector

e2e/pages/page.ts

@@ -23,7 +23,14 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { browser, element, by, ElementFinder, promise, ExpectedConditions as EC } from 'protractor';
+import {
+  browser,
+  element,
+  by,
+  ElementFinder,
+  promise,
+  ExpectedConditions as EC
+} from 'protractor';
 import { BROWSER_WAIT_TIMEOUT } from './../configs';
 
 export abstract class Page {
@@ -33,7 +40,7 @@ export abstract class Page {
     app: by.css('app-root'),
     layout: by.css('app-layout'),
     overlay: by.css('.cdk-overlay-container'),
-        dialogContainer: by.css('.mat-dialog-container[role]'),
+    dialogContainer: by.css('.mat-dialog-container'),
     snackBarContainer: '.cdk-overlay-pane .mat-snack-bar-container',
     snackBar: '.mat-simple-snackbar',
     snackBarAction: '.mat-simple-snackbar-action button',
@@ -73,19 +80,31 @@ export abstract class Page {
   }
 
   waitForSnackBarToAppear() {
-        return browser.wait(EC.visibilityOf(this.snackBarContainer), BROWSER_WAIT_TIMEOUT);
+    return browser.wait(
+      EC.visibilityOf(this.snackBarContainer),
+      BROWSER_WAIT_TIMEOUT
+    );
   }
 
   waitForSnackBarToClose() {
-        return browser.wait(EC.not(EC.visibilityOf(this.snackBarContainer)), BROWSER_WAIT_TIMEOUT);
+    return browser.wait(
+      EC.not(EC.visibilityOf(this.snackBarContainer)),
+      BROWSER_WAIT_TIMEOUT
+    );
   }
 
   waitForDialog() {
-        return browser.wait(EC.visibilityOf(this.dialogContainer), BROWSER_WAIT_TIMEOUT);
+    return browser.wait(
+      EC.visibilityOf(this.dialogContainer),
+      BROWSER_WAIT_TIMEOUT
+    );
   }
 
   waitForDialogToClose() {
-        return browser.wait(EC.not(EC.visibilityOf(this.dialogContainer)), BROWSER_WAIT_TIMEOUT);
+    return browser.wait(
+      EC.not(EC.visibilityOf(this.dialogContainer)),
+      BROWSER_WAIT_TIMEOUT
+    );
   }
 
   refresh(): promise.Promise<void> {
@@ -101,19 +120,18 @@ export abstract class Page {
   }
 
   getSnackBarMessage(): promise.Promise<string> {
-        return this.waitForSnackBarToAppear()
+    return this.waitForSnackBarToAppear().then(() =>
-            .then(() => this.snackBar.getAttribute('innerText'));
+      this.snackBar.getAttribute('innerText')
+    );
   }
 
   getSnackBarAction() {
-        return this.waitForSnackBarToAppear()
+    return this.waitForSnackBarToAppear().then(() => this.snackBarAction);
-            .then(() => this.snackBarAction);
   }
 
   clickSnackBarAction() {
-        return this.waitForSnackBarToAppear()
+    return this.waitForSnackBarToAppear().then(() => {
-            .then(() => {
+      return browser.executeScript(function(elem) {
-                return browser.executeScript(function (elem) {
         elem.click();
       }, this.snackBarAction);
     });

src/app/app.component.ts

@@ -39,7 +39,8 @@ import {
   SetLanguagePickerAction,
   SnackbarErrorAction,
   SetCurrentUrlAction,
-  SetInitialStateAction
+  SetInitialStateAction,
+  CloseModalDialogsAction
 } from './store/actions';
 import {
   AppStore,
@@ -47,7 +48,6 @@ import {
   INITIAL_APP_STATE
 } from './store/states/app.state';
 import { filter } from 'rxjs/operators';
-import { MatDialog } from '@angular/material';
 
 @Component({
   selector: 'app-root',
@@ -64,8 +64,7 @@ export class AppComponent implements OnInit {
     private alfrescoApiService: AlfrescoApiService,
     private authenticationService: AuthenticationService,
     private uploadService: UploadService,
-    private extensions: AppExtensionService,
+    private extensions: AppExtensionService
-    private dialogRef: MatDialog
   ) {}
 
   ngOnInit() {
@@ -76,9 +75,9 @@ export class AppComponent implements OnInit {
             provider: 'ECM',
             url: this.router.url
           });
-          this.router.navigate(['/login']);
 
-          this.dialogRef.closeAll();
+          this.store.dispatch(new CloseModalDialogsAction());
+          this.router.navigate(['/login']);
         }
       }
     });

src/app/material.module.ts

@@ -31,7 +31,8 @@ import {
   MatDialogModule,
   MatInputModule,
   MatSnackBarModule,
-  MatProgressBarModule
+  MatProgressBarModule,
+  MAT_DIALOG_DEFAULT_OPTIONS
 } from '@angular/material';
 
 @NgModule({
@@ -52,6 +53,12 @@ import {
     MatInputModule,
     MatSnackBarModule,
     MatProgressBarModule
+  ],
+  providers: [
+    {
+      provide: MAT_DIALOG_DEFAULT_OPTIONS,
+      useValue: { closeOnNavigation: true, hasBackdrop: true }
+    }
   ]
 })
 export class MaterialModule {}

src/app/store/actions.ts

@@ -32,3 +32,4 @@ export * from './actions/viewer.actions';
 export * from './actions/search.actions';
 export * from './actions/library.actions';
 export * from './actions/upload.actions';
+export * from './actions/modals.actions';

src/app/store/actions/modals.actions.ts

@@ -0,0 +1,33 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Action } from '@ngrx/store';
+
+export const CLOSE_MODAL_DIALOGS = 'CLOSE_MODAL_DIALOGS';
+
+export class CloseModalDialogsAction implements Action {
+  readonly type = CLOSE_MODAL_DIALOGS;
+  constructor() {}
+}

src/app/store/app-store.module.ts

@@ -40,7 +40,8 @@ import {
   SearchEffects,
   SiteEffects,
   UploadEffects,
-  FavoriteEffects
+  FavoriteEffects,
+  ModalsEffects
 } from './effects';
 
 @NgModule({
@@ -56,7 +57,8 @@ import {
       SearchEffects,
       SiteEffects,
       UploadEffects,
-      FavoriteEffects
+      FavoriteEffects,
+      ModalsEffects
     ]),
     !environment.production
       ? StoreDevtoolsModule.instrument({ maxAge: 25 })

src/app/store/effects.ts

@@ -32,3 +32,4 @@ export * from './effects/viewer.effects';
 export * from './effects/search.effects';
 export * from './effects/library.effects';
 export * from './effects/upload.effects';
+export * from './effects/modals.effects';

src/app/store/effects/modals.effects.ts

@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Injectable } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { CloseModalDialogsAction, CLOSE_MODAL_DIALOGS } from '../actions';
+import { MatDialog } from '@angular/material';
+
+@Injectable()
+export class ModalsEffects {
+  constructor(private actions$: Actions, private matDialog: MatDialog) {}
+
+  @Effect({ dispatch: false })
+  closeAll$ = this.actions$.pipe(
+    ofType<CloseModalDialogsAction>(CLOSE_MODAL_DIALOGS),
+    map(() => this.matDialog.closeAll())
+  );
+}