[ACS-3742] Layout changes for workspace (#2980)

* Layout changes for workspace sidemenu * added header and search layout changes * implemented review comments and removed process related code * Added expand and collapse functionality * Modified the paths * linting fixes * use standard material settings icon * use only specific modules needed for page layout * use standard "menu" icon for now * use standard avatar icon for now * cleanup user profile menu item * cleanup About component layout * remove hardcoded settings route * deprecate "headerImagePath" * deprecate "headerTextColor" customisation * deprecate "headerColor" customisation * proper toggle of the side menu * proper sidebar header implementation * user profile basic cleanup * minor fixes * cleanup buttons * remove old app layout and use ADF one * remove old header component * cleanup old layout module * fix unit tests * cleanup unit tests * cleanup header actions module * deprecate unused main-action component * cleanup styles * restore removed method * cleanup search results toolbar * restore expand menu functionality * cleanup code, back buttons for about and profile * restore original code * proper collapse button * remove unused i18n key * styles cleanup * cleanup sidebar * cleanup user profile * add safety checks for focus after close * layout fixes * update view profile unit tests * code cleanup after reviews * cleanup header actions * fix menu population, user info * improved upload and create actions * remove useless tests * fix folder rules tests * search button workaround * e2e: remove wait * add create/upload tooltips * e2e fix * e2e fix * e2e fix * e2e fix * e2e fix * e2e fix * e2e fix * e2e fix * e2e fix * e2e fix * e2e fix * e2e fix * try fix e2e * update e2e extension configs * try fix e2e * try fix e2e * fix eslint config * try fix e2e * move search button to extensions * move upload and create to extensions * remove header actions as no longer needed * cleanup * e2e fixes and cleanup for unwanted files * linting fixes * linting fixes * added button type to support text buttons * linting fixes * added more unit tests to achieve code coverage requirement * fixing code covergae for aca-content * fixed code coverage for aca-shared * linting fixes * linting fixes * cleanup * version fix --------- Co-authored-by: SheenaMalhotra182 <sheena.malhotra@globallogic.com> Co-authored-by: Denys Vuika <denys.vuika@gmail.com> Co-authored-by: SheenaMalhotra182 <sheena.malhotra@contractors.onbase.com>
2025-07-24 17:31:52 +00:00 · 2023-04-20 16:48:24 +05:30
parent d042b80386
commit 6fac964d94
140 changed files with 1663 additions and 2177 deletions
--- a/projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts
+++ b/projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts
@@ -67,12 +67,20 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
  nodeResult: NodePaging;
  showHeader = ShowHeaderMode.Data;
  filterSorting = 'name-asc';
+  createActions: Array<ContentActionRef> = [];

  protected subscriptions: Subscription[] = [];

  protected constructor(protected store: Store<AppStore>, protected extensions: AppExtensionService, protected content: DocumentBasePageService) {}

  ngOnInit() {
+    this.extensions
+      .getCreateActions()
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((actions) => {
+        this.createActions = actions;
+      });
+
    this.sharedPreviewUrl$ = this.store.select(getSharedUrl);
    this.infoDrawerOpened$ = this.store.select(isInfoDrawerOpened).pipe(map((infoDrawerState) => !this.isOutletPreviewUrl() && infoDrawerState));

--- a/projects/aca-shared/src/lib/components/document-base-page/document-base-page.spec.ts
+++ b/projects/aca-shared/src/lib/components/document-base-page/document-base-page.spec.ts
@@ -41,10 +41,7 @@ import { Subscription } from 'rxjs';

 export const INITIAL_APP_STATE: AppState = {
  appName: 'Alfresco Content Application',
-  headerColor: '#ffffff',
-  headerTextColor: '#000000',
  logoPath: 'assets/images/alfresco-logo-white.svg',
-  headerImagePath: 'assets/images/mastHead-bg-shapesPattern.svg',
  customCssPath: '',
  webFontPath: '',
  sharedUrl: '',
--- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html
+++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html
@@ -1,3 +1,11 @@
-<ng-content select="aca-page-layout-header"></ng-content>
-<ng-content select="aca-page-layout-error" *ngIf="hasError"></ng-content>
-<ng-content select="aca-page-layout-content" *ngIf="!hasError"></ng-content>
+  <div class="aca-content-header">
+      <button *ngIf="(appNavNarMode$ | async) === 'collapsed'"
+        mat-icon-button
+        (click)="toggleClick()"
+        title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <ng-content select="aca-page-layout-header"></ng-content>
+  </div>
+  <ng-content select="aca-page-layout-error" *ngIf="hasError"></ng-content>
+  <ng-content select="aca-page-layout-content" *ngIf="!hasError"></ng-content>
--- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss
+++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss
@@ -3,14 +3,25 @@
 .aca-page-layout {
  @include flex-column;

+  .aca-content-header {
+    background: var(--theme-page-layout-header-background-color);
+    height: 96px;
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+  }
+
  .aca-page-layout-header {
    display: flex;
    align-items: center;
-    flex: 0 0 65px;
-    flex-basis: 48px;
-    background: var(--theme-background-color);
-    border-bottom: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
-    padding: 0 24px;
+    flex: auto;
+    width: 100%;
+
+    .adf-breadcrumb-item {
+      font-size: 20px;
+      font-weight: 400;
+      letter-spacing: 0.15px;
+    }
  }

  .aca-page-layout-content {
@@ -32,14 +43,6 @@
      overflow: auto !important;
    }
  }
-
-  .sidebar {
-    display: block;
-    height: 100%;
-    overflow-y: scroll;
-    max-width: 350px;
-    width: 350px;
-  }
 }

 [dir='rtl'] .aca-page-layout {
--- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.spec.ts
+++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.spec.ts
@@ -0,0 +1,57 @@
+/*!
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Alfresco Example Content Application
+ *
+ * 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
+ * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PageLayoutComponent } from './page-layout.component';
+import { AppService } from '../../services/app.service';
+import { BehaviorSubject, Subject } from 'rxjs';
+
+describe('PageLayoutComponent', () => {
+  let fixture: ComponentFixture<PageLayoutComponent>;
+  let component: PageLayoutComponent;
+  const appServiceMock = {
+    toggleAppNavBar$: new Subject(),
+    appNavNarMode$: new BehaviorSubject<'collapsed' | 'expanded'>('expanded')
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PageLayoutComponent],
+      providers: [
+        {
+          provide: AppService,
+          useValue: appServiceMock
+        }
+      ]
+    });
+    fixture = TestBed.createComponent(PageLayoutComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should toggle the appService toggleAppNavBar$ Subject', () => {
+    spyOn(appServiceMock.toggleAppNavBar$, 'next');
+    component.toggleClick();
+    expect(appServiceMock.toggleAppNavBar$.next).toHaveBeenCalled();
+  });
+});
--- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts
+++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts
@@ -22,17 +22,35 @@
 * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
 */

-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ViewEncapsulation, Input, OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { AppService } from '../../services/app.service';

@Component({
  selector: 'aca-page-layout',
  templateUrl: './page-layout.component.html',
  styleUrls: ['./page-layout.component.scss'],
  encapsulation: ViewEncapsulation.None,
-  host: { class: 'aca-page-layout' },
-  changeDetection: ChangeDetectionStrategy.OnPush
+  host: { class: 'aca-page-layout' }
 })
-export class PageLayoutComponent {
+export class PageLayoutComponent implements OnDestroy {
  @Input()
  hasError = false;
+
+  private onDestroy$ = new Subject<boolean>();
+  appNavNarMode$: Observable<'collapsed' | 'expanded'>;
+
+  constructor(private appService: AppService) {
+    this.appNavNarMode$ = appService.appNavNarMode$.pipe(takeUntil(this.onDestroy$));
+  }
+
+  toggleClick() {
+    this.appService.toggleAppNavBar$.next();
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
 }
--- a/projects/aca-shared/src/lib/components/page-layout/page-layout.module.ts
+++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.module.ts
@@ -28,9 +28,12 @@ import { PageLayoutErrorComponent } from './page-layout-error.component';
 import { PageLayoutHeaderComponent } from './page-layout-header.component';
 import { PageLayoutComponent } from './page-layout.component';
 import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';

@NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, MatIconModule, TranslateModule, MatButtonModule],
  declarations: [PageLayoutContentComponent, PageLayoutErrorComponent, PageLayoutHeaderComponent, PageLayoutComponent],
  exports: [PageLayoutContentComponent, PageLayoutErrorComponent, PageLayoutHeaderComponent, PageLayoutComponent]
 })
--- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.html
+++ b/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.html
@@ -4,13 +4,13 @@
  </ng-container>

  <ng-container *ngSwitchCase="'button'">
-    <app-toolbar-button [type]="type" [actionRef]="actionRef" [color]="color"> </app-toolbar-button>
+    <app-toolbar-button [type]="data?.buttonType || type" [actionRef]="actionRef" [color]="color" [data]="actionRef.data"> </app-toolbar-button>
  </ng-container>

  <adf-toolbar-divider *ngSwitchCase="'separator'" [id]="actionRef.id"></adf-toolbar-divider>

  <ng-container *ngSwitchCase="'menu'">
-    <app-toolbar-menu [actionRef]="actionRef" [color]="color"> </app-toolbar-menu>
+    <app-toolbar-menu [actionRef]="actionRef" [color]="color" [data]="actionRef.data"></app-toolbar-menu>
  </ng-container>

  <ng-container *ngSwitchCase="'custom'">
--- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.ts
+++ b/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.ts
@@ -36,6 +36,12 @@ import { ThemePalette } from '@angular/material/core';
  host: { class: 'aca-toolbar-action' }
 })
 export class ToolbarActionComponent implements DoCheck {
+  @Input()
+  data: {
+    buttonType?: ToolbarButtonType;
+    color?: string;
+  };
+
  @Input()
  type: ToolbarButtonType = ToolbarButtonType.ICON_BUTTON;

--- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.html
+++ b/projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.html
@@ -1,4 +1,4 @@
-<ng-container [ngSwitch]="type">
+<ng-container [ngSwitch]="data?.buttonType || type">
  <ng-container *ngSwitchCase="'icon-button'">
    <button
      [id]="actionRef.id"
@@ -12,6 +12,19 @@
      <adf-icon [value]="actionRef.icon"></adf-icon>
    </button>
  </ng-container>
+  <ng-container *ngSwitchCase="'flat-button'">
+    <button
+      [id]="actionRef.id"
+      [color]="data?.color || color"
+      mat-flat-button
+      [attr.aria-label]="actionRef.description || actionRef.title | translate"
+      [attr.title]="actionRef.description || actionRef.title | translate"
+      [disabled]="actionRef.disabled"
+      (click)="runAction()"
+    >
+      <span *ngIf="actionRef.title" data-automation-id="flat-button-title">{{ actionRef.title | translate }}</span>
+    </button>
+  </ng-container>
  <ng-container *ngSwitchCase="'menu-item'">
    <app-toolbar-menu-item [actionRef]="actionRef"></app-toolbar-menu-item>
  </ng-container>
--- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.ts
+++ b/projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.ts
@@ -29,6 +29,7 @@ import { ThemePalette } from '@angular/material/core';

 export enum ToolbarButtonType {
  ICON_BUTTON = 'icon-button',
+  FLAT_BUTTON = 'flat-button',
  MENU_ITEM = 'menu-item'
 }

@@ -39,6 +40,12 @@ export enum ToolbarButtonType {
  host: { class: 'app-toolbar-button' }
 })
 export class ToolbarButtonComponent {
+  @Input()
+  data: {
+    buttonType?: ToolbarButtonType;
+    color?: string;
+  };
+
  @Input()
  type: ToolbarButtonType = ToolbarButtonType.ICON_BUTTON;

--- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html
+++ b/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html
@@ -1,15 +1,49 @@
-<button
-  [id]="actionRef.id"
-  [color]="color"
-  mat-icon-button
-  [attr.aria-label]="actionRef.description || actionRef.title | translate"
-  [attr.title]="actionRef.description || actionRef.title | translate"
-  [matMenuTriggerFor]="menu"
-  [disabled]="actionRef.disabled"
-  #matTrigger="matMenuTrigger"
->
-  <adf-icon [value]="actionRef.icon"></adf-icon>
-</button>
+<ng-container [ngSwitch]="type">
+  <ng-container *ngSwitchCase="'button'">
+    <button
+      [id]="actionRef.id"
+      [color]="data?.color || color"
+      mat-button
+      [attr.aria-label]="actionRef.description || actionRef.title | translate"
+      [attr.title]="actionRef.description || actionRef.title | translate"
+      [matMenuTriggerFor]="menu"
+      [disabled]="actionRef.disabled"
+      #matTrigger="matMenuTrigger"
+    >
+      <span *ngIf="actionRef.title" data-automation-id="menu-item-title">{{ actionRef.title | translate }}</span>
+    </button>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'flat-button'">
+    <button
+      [id]="actionRef.id"
+      [color]="data?.color || color"
+      mat-flat-button
+      [attr.aria-label]="actionRef.description || actionRef.title | translate"
+      [attr.title]="actionRef.description || actionRef.title | translate"
+      [matMenuTriggerFor]="menu"
+      [disabled]="actionRef.disabled"
+      #matTrigger="matMenuTrigger"
+    >
+      <span *ngIf="actionRef.title" data-automation-id="menu-item-title">{{ actionRef.title | translate }}</span>
+    </button>
+  </ng-container>
+
+  <ng-container *ngSwitchDefault>
+    <button
+      [id]="actionRef.id"
+      [color]="data?.color || color"
+      mat-icon-button
+      [attr.aria-label]="actionRef.description || actionRef.title | translate"
+      [attr.title]="actionRef.description || actionRef.title | translate"
+      [matMenuTriggerFor]="menu"
+      [disabled]="actionRef.disabled"
+      #matTrigger="matMenuTrigger"
+    >
+      <adf-icon *ngIf="actionRef.icon" [value]="actionRef.icon"></adf-icon>
+    </button>
+  </ng-container>
+</ng-container>

 <mat-menu #menu="matMenu" [overlapTrigger]="false">
  <ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId">
--- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts
+++ b/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts
@@ -50,6 +50,16 @@ export class ToolbarMenuComponent implements AfterViewInit {
  @ViewChildren(ToolbarMenuItemComponent)
  toolbarMenuItems: QueryList<ToolbarMenuItemComponent>;

+  @Input()
+  data: {
+    menuType?: string;
+    color?: string;
+  };
+
+  get type(): string {
+    return this.data?.menuType || 'default';
+  }
+
  @HostListener('document:keydown.Escape')
  handleKeydownEscape() {
    this.matTrigger.closeMenu();
--- a/projects/aca-shared/src/lib/services/app.service.ts
+++ b/projects/aca-shared/src/lib/services/app.service.ts
@@ -22,9 +22,9 @@
 * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
 */

-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, OnDestroy } from '@angular/core';
 import { AuthenticationService, AppConfigService, AlfrescoApiService, PageTitleService, UserPreferencesService } from '@alfresco/adf-core';
-import { Observable, BehaviorSubject } from 'rxjs';
+import { Observable, BehaviorSubject, Subject } from 'rxjs';
 import { GroupService, SearchQueryBuilderService, SharedLinksApiService, UploadService, FileUploadErrorEvent } from '@alfresco/adf-content-services';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { ActivatedRoute, ActivationEnd, NavigationStart, Router } from '@angular/router';
@@ -53,14 +53,19 @@ import { AcaMobileAppSwitcherService } from './aca-mobile-app-switcher.service';
  providedIn: 'root'
 })
 // After moving shell to ADF to core, AppService will implement ShellAppService
-export class AppService {
+export class AppService implements OnDestroy {
  private ready: BehaviorSubject<boolean>;
  ready$: Observable<boolean>;

  pageHeading$: Observable<string>;

+  appNavNarMode$: Subject<'collapsed' | 'expanded'> = new BehaviorSubject('expanded');
+  toggleAppNavBar$ = new Subject();
+
  hideSidenavConditions = ['/preview/'];
-  minimizeSidenavConditions = ['search'];
+  minimizeSidenavConditions = ['search', 'about', 'profile'];
+
+  onDestroy$ = new Subject<boolean>();

  /**
   * Whether `withCredentials` mode is enabled.
@@ -107,6 +112,11 @@ export class AppService {
    );
  }

+  ngOnDestroy(): void {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
  init(): void {
    this.alfrescoApiService.getInstance().on('error', (error: { status: number; response: any }) => {
      if (error.status === 401 && !this.alfrescoApiService.isExcludedErrorListener(error?.response?.req?.url)) {
@@ -200,10 +210,7 @@ export class AppService {
    const state: AppState = {
      ...this.initialAppState,
      appName: this.config.get<string>('application.name'),
-      headerColor: this.config.get<string>('headerColor'),
-      headerTextColor: this.config.get<string>('headerTextColor', '#000000'),
      logoPath: this.config.get<string>('application.logo'),
-      headerImagePath: this.config.get<string>('application.headerImagePath'),
      customCssPath: this.config.get<string>('customCssPath'),
      webFontPath: this.config.get<string>('webFontPath'),
      sharedUrl: baseShareUrl
--- a/projects/aca-shared/src/lib/testing/lib-testing-module.ts
+++ b/projects/aca-shared/src/lib/testing/lib-testing-module.ts
@@ -42,9 +42,7 @@ import { CommonModule } from '@angular/common';
 export const initialState = {
  app: {
    appName: 'Alfresco Content Application',
-    headerColor: '#ffffff',
    logoPath: 'assets/images/alfresco-logo-white.svg',
-    headerImagePath: 'assets/images/mastHead-bg-shapesPattern.svg',
    sharedUrl: '',
    user: {
      isAdmin: null,