[AAE-10766] upgrade to new About component (#2769)

* [AAE-10766] upgrade to new About component * upgrade to latest ADF alpha * update e2e to reflect snackbar changes * Revert "update e2e to reflect snackbar changes" This reverts commit 6164804bab. * ACS-3640 a 11 y aca 881740 snackbar messages disappear without option to adjust timing (#2734) * ACS-3640 Increasing time of autoclosing snackbar and adding X icon to close snackbar * ACS-3640 Fix lint issues * ACS-3640 Addressing PR comments * ACS-3640 Fix lint issue * ACS-3640 Added aria label for action icon * ACS-3640 Fixed one left file * ACS-3640 Fixed lint issues * use latest adf * ACS-3640 Correction for e2e Co-authored-by: Denys Vuika <denys.vuika@gmail.com> * remove the action check from the snackbar * update e2e * update e2e * update e2e * Update e2e Co-authored-by: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com> Co-authored-by: Aleksander Sklorz <Aleksander.Sklorz@hyland.com>
2025-07-24 17:31:52 +00:00 · 2022-11-14 23:55:06 +00:00
parent bc4905631b
commit 5ce4835e4c
13 changed files with 418 additions and 140 deletions
--- a/projects/aca-about/src/lib/about.component.html
+++ b/projects/aca-about/src/lib/about.component.html
@@ -1,5 +1,29 @@
 <aca-page-layout>
  <aca-page-layout-content [scrollable]="true">
-    <adf-about [dev]="dev" [pkg]="pkg"> </adf-about>
+    <adf-about>
+      <adf-about-panel *ngIf="dev" [label]="'ABOUT.SERVER_SETTINGS.TITLE' | translate">
+        <ng-template>
+            <adf-about-server-settings></adf-about-server-settings>
+        </ng-template>
+      </adf-about-panel>
+
+      <adf-about-panel [label]="'ABOUT.REPOSITORY' | translate" *ngIf="repository">
+        <ng-template>
+            <adf-about-repository-info [data]="repository"></adf-about-repository-info>
+        </ng-template>
+      </adf-about-panel>
+
+      <adf-about-panel *ngIf="dev" [label]="'ABOUT.PACKAGES.TITLE' | translate">
+        <ng-template>
+            <adf-about-package-list [dependencies]="pkg?.dependencies"></adf-about-package-list>
+        </ng-template>
+      </adf-about-panel>
+
+      <adf-about-panel *ngIf="extensions$ | async as extensions" [label]="'ABOUT.PLUGINS.TITLE' | translate">
+        <ng-template>
+            <adf-about-extension-list [data]="extensions"></adf-about-extension-list>
+        </ng-template>
+      </adf-about-panel>
+    </adf-about>
  </aca-page-layout-content>
 </aca-page-layout>
--- a/projects/aca-about/src/lib/about.component.ts
+++ b/projects/aca-about/src/lib/about.component.ts
@@ -23,21 +23,44 @@
 * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
 */

-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { DEV_MODE_TOKEN } from './dev-mode.tokens';
 import pkg from 'package.json';
+import { Observable } from 'rxjs';
+import { AppExtensionService, ExtensionRef } from '@alfresco/adf-extensions';
+import { AuthenticationService, DiscoveryApiService, RepositoryInfo } from '@alfresco/adf-core';

@Component({
  selector: 'app-about-page',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
 })
-export class AboutComponent {
+export class AboutComponent implements OnInit {
  pkg: any;
  dev = false;
+  extensions$: Observable<ExtensionRef[]>;
+  repository: RepositoryInfo = null;

-  constructor(@Inject(DEV_MODE_TOKEN) devMode) {
+  constructor(
+    @Inject(DEV_MODE_TOKEN) devMode,
+    private authService: AuthenticationService,
+    private appExtensions: AppExtensionService,
+    private discovery: DiscoveryApiService
+  ) {
    this.dev = !devMode;
    this.pkg = pkg;
+    this.extensions$ = this.appExtensions.references$;
+  }
+
+  ngOnInit(): void {
+    if (this.authService.isEcmLoggedIn()) {
+      this.setECMInfo();
+    }
+  }
+
+  setECMInfo() {
+    this.discovery.getEcmProductInfo().subscribe((repository) => {
+      this.repository = repository as RepositoryInfo;
+    });
  }
 }
--- a/projects/aca-shared/store/src/actions/snackbar.actions.ts
+++ b/projects/aca-shared/store/src/actions/snackbar.actions.ts
@@ -35,7 +35,7 @@ export interface SnackbarAction extends Action {
  payload: string;
  params?: any;
  userAction?: SnackbarUserAction;
-  duration: number;
+  duration?: number;
 }

 export class SnackbarUserAction {
@@ -46,7 +46,6 @@ export class SnackbarInfoAction implements SnackbarAction {
  readonly type = SnackbarActionTypes.Info;

  userAction?: SnackbarUserAction;
-  duration = 4000;

  constructor(public payload: string, public params?: any) {}
 }
@@ -55,7 +54,6 @@ export class SnackbarWarningAction implements SnackbarAction {
  readonly type = SnackbarActionTypes.Warning;

  userAction?: SnackbarUserAction;
-  duration = 4000;

  constructor(public payload: string, public params?: any) {}
 }
@@ -64,7 +62,6 @@ export class SnackbarErrorAction implements SnackbarAction {
  readonly type = SnackbarActionTypes.Error;

  userAction?: SnackbarUserAction;
-  duration = 4000;

  constructor(public payload: string, public params?: any) {}
 }
--- a/projects/aca-shared/store/src/effects/snackbar.effects.ts
+++ b/projects/aca-shared/store/src/effects/snackbar.effects.ts
@@ -23,7 +23,7 @@
 * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
 */

-import { TranslationService } from '@alfresco/adf-core';
+import { SnackbarContentComponent, SnackBarData, TranslationService } from '@alfresco/adf-core';
 import { Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Actions, ofType, createEffect } from '@ngrx/effects';
@@ -81,10 +81,17 @@ export class SnackbarEffects {
    if (action.userAction) {
      actionName = this.translate(action.userAction.title);
    }
-
-    const snackBarRef = this.snackBar.open(message, actionName, {
-      duration: action.duration || 4000,
-      panelClass
+    const snackBarRef = this.snackBar.openFromComponent<SnackbarContentComponent, SnackBarData>(SnackbarContentComponent, {
+      ...(action.duration !== undefined && action.duration !== null && { duration: action.duration }),
+      panelClass,
+      data: {
+        message,
+        actionLabel: actionName,
+        actionIcon: 'close',
+        actionIconAriaLabel: 'CLOSE',
+        showAction: true,
+        callActionOnIconClick: false
+      }
    });

    if (action.userAction) {
--- a/projects/aca-testing-shared/src/pages/page.ts
+++ b/projects/aca-testing-shared/src/pages/page.ts
@@ -23,7 +23,7 @@
 * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
 */

-import { browser, by, ElementFinder } from 'protractor';
+import { browser, by, ElementFinder, WebElement } from 'protractor';
 import { BrowserVisibility, Logger } from '@alfresco/adf-testing';
 import { APP_ROUTES, USE_HASH_STRATEGY } from './../configs';
 import { Utils, waitElement, waitForPresence, isPresentAndDisplayed } from '../utilities/utils';
@@ -35,10 +35,10 @@ export abstract class Page {

  layout = this.byCss('app-layout');
  overlay = this.byCss('.cdk-overlay-container');
-  snackBar = this.byCss('.mat-simple-snackbar-action button');
+  snackBar = this.byCss('.adf-snackbar-message-content-action-label');
  dialogContainer = this.byCss('.mat-dialog-container');
  snackBarContainer = this.byCss('.mat-snack-bar-container');
-  snackBarAction = this.byCss('.mat-simple-snackbar-action button');
+  snackBarAction = this.byCss('.adf-snackbar-message-content-action-label');
  genericError = this.byCss('aca-generic-error');
  genericErrorIcon = this.byCss('aca-generic-error .mat-icon');
  genericErrorTitle = this.byCss('.generic-error__title');
@@ -88,14 +88,25 @@ export abstract class Page {
  }

  async getSnackBarMessage(): Promise<string> {
-    const elem = await waitElement('.mat-snack-bar-container');
+    const elem = await waitElement('.adf-snackbar-message-content');
+    const attributeValue: string = await browser.executeScript(`return arguments[0].innerText`, elem);
+    return attributeValue || '';
+  }
+
+  async getSnackBarAction(): Promise<string> {
+    let elem: WebElement;
+    try {
+      elem = await waitElement('.adf-snackbar-message-content-action-label');
+    } catch (e) {
+      return '';
+    }
    const attributeValue: string = await browser.executeScript(`return arguments[0].innerText`, elem);
    return attributeValue || '';
  }

  async clickSnackBarAction(): Promise<void> {
    try {
-      const action = await waitElement('.mat-simple-snackbar-action button');
+      const action = await waitElement('.adf-snackbar-message-content-action-label');
      await action.click();
    } catch (e) {
      Logger.error(e, '.......failed on click snack bar action.........');