[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,107 +23,125 @@
  * 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 {
-    private static USE_HASH_STRATEGY = true;
+  private static USE_HASH_STRATEGY = true;
 
-    private locators = {
-        app: by.css('app-root'),
-        layout: by.css('app-layout'),
-        overlay: by.css('.cdk-overlay-container'),
-        dialogContainer: by.css('.mat-dialog-container[role]'),
-        snackBarContainer: '.cdk-overlay-pane .mat-snack-bar-container',
-        snackBar: '.mat-simple-snackbar',
-        snackBarAction: '.mat-simple-snackbar-action button',
+  private locators = {
+    app: by.css('app-root'),
+    layout: by.css('app-layout'),
+    overlay: by.css('.cdk-overlay-container'),
+    dialogContainer: by.css('.mat-dialog-container'),
+    snackBarContainer: '.cdk-overlay-pane .mat-snack-bar-container',
+    snackBar: '.mat-simple-snackbar',
+    snackBarAction: '.mat-simple-snackbar-action button',
 
-        genericError: 'aca-generic-error',
-        genericErrorIcon: 'aca-generic-error .mat-icon',
-        genericErrorTitle: '.generic-error__title'
-    };
+    genericError: 'aca-generic-error',
+    genericErrorIcon: 'aca-generic-error .mat-icon',
+    genericErrorTitle: '.generic-error__title'
+  };
 
-    public app: ElementFinder = element(this.locators.app);
-    public layout: ElementFinder = element(this.locators.layout);
-    public overlay: ElementFinder = element(this.locators.overlay);
-    snackBar: ElementFinder = browser.$(this.locators.snackBar);
-    dialogContainer: ElementFinder = element(this.locators.dialogContainer);
-    snackBarContainer: ElementFinder = browser.$(this.locators.snackBarContainer);
-    snackBarAction: ElementFinder = browser.$(this.locators.snackBarAction);
+  public app: ElementFinder = element(this.locators.app);
+  public layout: ElementFinder = element(this.locators.layout);
+  public overlay: ElementFinder = element(this.locators.overlay);
+  snackBar: ElementFinder = browser.$(this.locators.snackBar);
+  dialogContainer: ElementFinder = element(this.locators.dialogContainer);
+  snackBarContainer: ElementFinder = browser.$(this.locators.snackBarContainer);
+  snackBarAction: ElementFinder = browser.$(this.locators.snackBarAction);
 
-    genericError: ElementFinder = browser.$(this.locators.genericError);
-    genericErrorIcon: ElementFinder = browser.$(this.locators.genericErrorIcon);
-    genericErrorTitle: ElementFinder = browser.$(this.locators.genericErrorTitle);
+  genericError: ElementFinder = browser.$(this.locators.genericError);
+  genericErrorIcon: ElementFinder = browser.$(this.locators.genericErrorIcon);
+  genericErrorTitle: ElementFinder = browser.$(this.locators.genericErrorTitle);
 
-    constructor(public url: string = '') {}
+  constructor(public url: string = '') {}
 
-    get title(): promise.Promise<string> {
-        return browser.getTitle();
-    }
+  get title(): promise.Promise<string> {
+    return browser.getTitle();
+  }
 
-    load(relativeUrl: string = ''): promise.Promise<void> {
-        const hash = Page.USE_HASH_STRATEGY ? '/#' : '';
-        const path = `${hash}${this.url}${relativeUrl}`;
+  load(relativeUrl: string = ''): promise.Promise<void> {
+    const hash = Page.USE_HASH_STRATEGY ? '/#' : '';
+    const path = `${hash}${this.url}${relativeUrl}`;
 
-        return browser.get(path);
-    }
+    return browser.get(path);
+  }
 
-    waitForApp() {
-        return browser.wait(EC.presenceOf(this.layout), BROWSER_WAIT_TIMEOUT);
-    }
+  waitForApp() {
+    return browser.wait(EC.presenceOf(this.layout), BROWSER_WAIT_TIMEOUT);
+  }
 
-    waitForSnackBarToAppear() {
-        return browser.wait(EC.visibilityOf(this.snackBarContainer), BROWSER_WAIT_TIMEOUT);
-    }
+  waitForSnackBarToAppear() {
+    return browser.wait(
+      EC.visibilityOf(this.snackBarContainer),
+      BROWSER_WAIT_TIMEOUT
+    );
+  }
 
-    waitForSnackBarToClose() {
-        return browser.wait(EC.not(EC.visibilityOf(this.snackBarContainer)), BROWSER_WAIT_TIMEOUT);
-    }
+  waitForSnackBarToClose() {
+    return browser.wait(
+      EC.not(EC.visibilityOf(this.snackBarContainer)),
+      BROWSER_WAIT_TIMEOUT
+    );
+  }
 
-    waitForDialog() {
-        return browser.wait(EC.visibilityOf(this.dialogContainer), BROWSER_WAIT_TIMEOUT);
-    }
+  waitForDialog() {
+    return browser.wait(
+      EC.visibilityOf(this.dialogContainer),
+      BROWSER_WAIT_TIMEOUT
+    );
+  }
 
-    waitForDialogToClose() {
-        return browser.wait(EC.not(EC.visibilityOf(this.dialogContainer)), BROWSER_WAIT_TIMEOUT);
-    }
+  waitForDialogToClose() {
+    return browser.wait(
+      EC.not(EC.visibilityOf(this.dialogContainer)),
+      BROWSER_WAIT_TIMEOUT
+    );
+  }
 
-    refresh(): promise.Promise<void> {
-        return browser.refresh();
-    }
+  refresh(): promise.Promise<void> {
+    return browser.refresh();
+  }
 
-    getDialogActionByLabel(label) {
-        return element(by.cssContainingText('.mat-button-wrapper', label));
-    }
+  getDialogActionByLabel(label) {
+    return element(by.cssContainingText('.mat-button-wrapper', label));
+  }
 
-    isSnackBarDisplayed(): promise.Promise<boolean> {
-        return this.snackBar.isDisplayed();
-    }
+  isSnackBarDisplayed(): promise.Promise<boolean> {
+    return this.snackBar.isDisplayed();
+  }
 
-    getSnackBarMessage(): promise.Promise<string> {
-        return this.waitForSnackBarToAppear()
-            .then(() => this.snackBar.getAttribute('innerText'));
-    }
+  getSnackBarMessage(): promise.Promise<string> {
+    return this.waitForSnackBarToAppear().then(() =>
+      this.snackBar.getAttribute('innerText')
+    );
+  }
 
-    getSnackBarAction() {
-        return this.waitForSnackBarToAppear()
-            .then(() => this.snackBarAction);
-    }
+  getSnackBarAction() {
+    return this.waitForSnackBarToAppear().then(() => this.snackBarAction);
+  }
 
-    clickSnackBarAction() {
-        return this.waitForSnackBarToAppear()
-            .then(() => {
-                return browser.executeScript(function (elem) {
-                    elem.click();
-                }, this.snackBarAction);
-            });
-    }
+  clickSnackBarAction() {
+    return this.waitForSnackBarToAppear().then(() => {
+      return browser.executeScript(function(elem) {
+        elem.click();
+      }, this.snackBarAction);
+    });
+  }
 
-    isGenericErrorDisplayed() {
-        return this.genericError.isDisplayed();
-    }
+  isGenericErrorDisplayed() {
+    return this.genericError.isDisplayed();
+  }
 
-    getGenericErrorTitle() {
-        return this.genericErrorTitle.getText();
-    }
+  getGenericErrorTitle() {
+    return this.genericErrorTitle.getText();
+  }
 }

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 dialogRef: MatDialog
+    private extensions: AppExtensionService
   ) {}
 
   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())
+  );
+}