Code cleanup and optimisations (#3383)

* cleanup unused css

* remove unused store/reducer blocks

* fix typo in toolbar ("tool-bar")

* toolbar action: break dependency on adf-core

* unified toolbar component

* break dependency on adf toolbar module

* update e2e

* update e2e

* update e2e

* update e2e

* update e2e

* fix search results toolbar spacing

* cleanup unused app state

* cleanup unused code

* fix toolbar divider color

* fix missing buttons in the info drawer

* fix css nesting

* fix search results css

projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts

@@ -36,7 +36,6 @@ import {
   ReloadDocumentListAction,
   getCurrentFolder,
   getAppSelection,
-  getDocumentDisplayMode,
   isInfoDrawerOpened,
   getSharedUrl,
   ViewNodeAction,
@@ -61,7 +60,6 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
   infoDrawerOpened$: Observable<boolean>;
   node: MinimalNodeEntryEntity;
   selection: SelectionState;
-  documentDisplayMode$: Observable<string>;
   sharedPreviewUrl$: Observable<string>;
   actions: Array<ContentActionRef> = [];
   viewerToolbarActions: Array<ContentActionRef> = [];
@@ -94,8 +92,6 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
     this.sharedPreviewUrl$ = this.store.select(getSharedUrl);
     this.infoDrawerOpened$ = this.store.select(isInfoDrawerOpened).pipe(map((infoDrawerState) => !this.isOutletPreviewUrl() && infoDrawerState));
 
-    this.documentDisplayMode$ = this.store.select(getDocumentDisplayMode);
-
     this.store
       .select(getAppSelection)
       .pipe(takeUntil(this.onDestroy$))

projects/aca-shared/src/lib/components/document-base-page/document-base-page.spec.ts

@@ -66,7 +66,6 @@ export const INITIAL_APP_STATE: AppState = {
   infoDrawerMetadataAspect: '',
   showFacetFilter: true,
   fileUploadingDialog: true,
-  documentDisplayMode: 'list',
   showLoader: false,
   repository: {
     status: {

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html

@@ -3,11 +3,7 @@
 </div>
 <ng-container *ngIf="!isLoading && !!displayNode">
   <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE'" cdkTrapFocus cdkTrapFocusAutoCapture>
-    <adf-toolbar class="adf-toolbar--inline" info-drawer-buttons>
-      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
-        <aca-toolbar-action [actionRef]="entry" [color]="getEntryColor(entry)"></aca-toolbar-action>
-      </ng-container>
-    </adf-toolbar>
+    <aca-toolbar [items]="actions" info-drawer-buttons></aca-toolbar>
 
     <adf-info-drawer-tab *ngFor="let tab of tabs" [icon]="tab.icon" [label]="tab.title">
       <adf-dynamic-tab [node]="$any(displayNode)" [id]="tab.component" [attr.data-automation-id]="tab.component"> </adf-dynamic-tab>

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts

@@ -31,26 +31,16 @@ import { AppExtensionService } from '../../services/app.extension.service';
 import { ContentApiService } from '../../services/content-api.service';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
-import { ThemePalette } from '@angular/material/core';
 import { CommonModule } from '@angular/common';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { InfoDrawerModule, ToolbarModule } from '@alfresco/adf-core';
+import { InfoDrawerModule } from '@alfresco/adf-core';
 import { TranslateModule } from '@ngx-translate/core';
 import { A11yModule } from '@angular/cdk/a11y';
-import { ToolbarActionComponent } from '../tool-bar/toolbar-action/toolbar-action.component';
+import { ToolbarComponent } from '../toolbar/toolbar.component';
 
 @Component({
   standalone: true,
-  imports: [
-    CommonModule,
-    TranslateModule,
-    MatProgressBarModule,
-    InfoDrawerModule,
-    ExtensionsModule,
-    ToolbarModule,
-    A11yModule,
-    ToolbarActionComponent
-  ],
+  imports: [CommonModule, TranslateModule, MatProgressBarModule, InfoDrawerModule, ExtensionsModule, A11yModule, ToolbarComponent],
   selector: 'aca-info-drawer',
   templateUrl: './info-drawer.component.html',
   encapsulation: ViewEncapsulation.None
@@ -114,14 +104,6 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
     }
   }
 
-  trackByActionId(_: number, action: ContentActionRef) {
-    return action.id;
-  }
-
-  getEntryColor(entry: any): ThemePalette {
-    return entry?.color;
-  }
-
   private close() {
     this.store.dispatch(new ToggleInfoDrawerAction());
   }

projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.html

@@ -7,7 +7,7 @@
     <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>
+  <div *ngSwitchCase="'separator'" [id]="actionRef.id" class="aca-toolbar-divider"></div>
 
   <ng-container *ngSwitchCase="'menu'">
     <app-toolbar-menu [actionRef]="actionRef" [color]="color" [data]="actionRef.data"></app-toolbar-menu>

projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.ts

@@ -27,12 +27,11 @@ import { ContentActionRef, ExtensionsModule } from '@alfresco/adf-extensions';
 import { ToolbarButtonComponent, ToolbarButtonType } from '../toolbar-button/toolbar-button.component';
 import { ThemePalette } from '@angular/material/core';
 import { CommonModule } from '@angular/common';
-import { ToolbarModule } from '@alfresco/adf-core';
 import { ToolbarMenuComponent } from '../toolbar-menu/toolbar-menu.component';
 
 @Component({
   standalone: true,
-  imports: [CommonModule, ExtensionsModule, ToolbarModule, ToolbarButtonComponent, ToolbarMenuComponent],
+  imports: [CommonModule, ExtensionsModule, ToolbarButtonComponent, ToolbarMenuComponent],
   selector: 'aca-toolbar-action',
   templateUrl: './toolbar-action.component.html',
   styleUrls: ['./toolbar-action.component.scss'],

projects/aca-shared/src/lib/components/toolbar/toolbar.component.html

@@ -0,0 +1,5 @@
+<mat-toolbar>
+  <ng-container *ngFor="let item of items; trackBy: trackByActionId">
+    <aca-toolbar-action [actionRef]="item"></aca-toolbar-action>
+  </ng-container>
+</mat-toolbar>

projects/aca-shared/src/lib/components/toolbar/toolbar.component.scss

@@ -0,0 +1,27 @@
+aca-toolbar {
+  .mat-toolbar {
+    min-height: 48px;
+    color: var(--adf-theme-foreground-text-color-054);
+    background-color: inherit;
+    border: none;
+    padding: 0;
+  }
+
+  .mat-toolbar-row {
+    height: 48px;
+    font-size: var(--theme-body-1-font-size);
+    white-space: normal;
+  }
+
+  .mat-toolbar-single-row {
+    height: 64px;
+  }
+
+  .aca-toolbar-divider {
+    height: 24px;
+    width: 1px;
+    background: var(--adf-theme-foreground-text-color-025);
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+}

projects/aca-shared/src/lib/components/toolbar/toolbar.component.ts

@@ -0,0 +1,45 @@
+/*!
+ * 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 { Component, Input, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { ToolbarActionComponent } from './toolbar-action/toolbar-action.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+@Component({
+  selector: 'aca-toolbar',
+  standalone: true,
+  imports: [CommonModule, ToolbarActionComponent, MatToolbarModule],
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class ToolbarComponent {
+  @Input() items: ContentActionRef[];
+
+  trackByActionId(_: number, action: ContentActionRef) {
+    return action.id;
+  }
+}

projects/aca-shared/src/lib/deprecated/shared-toolbar.module.ts

@@ -26,10 +26,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@alfresco/adf-core';
 import { ExtensionsModule } from '@alfresco/adf-extensions';
-import { ToolbarButtonComponent } from '../components/tool-bar/toolbar-button/toolbar-button.component';
-import { ToolbarActionComponent } from '../components/tool-bar/toolbar-action/toolbar-action.component';
-import { ToolbarMenuItemComponent } from '../components/tool-bar/toolbar-menu-item/toolbar-menu-item.component';
-import { ToolbarMenuComponent } from '../components/tool-bar/toolbar-menu/toolbar-menu.component';
+import { ToolbarButtonComponent } from '../components/toolbar/toolbar-button/toolbar-button.component';
+import { ToolbarActionComponent } from '../components/toolbar/toolbar-action/toolbar-action.component';
+import { ToolbarMenuItemComponent } from '../components/toolbar/toolbar-menu-item/toolbar-menu-item.component';
+import { ToolbarMenuComponent } from '../components/toolbar/toolbar-menu/toolbar-menu.component';
 
 // @deprecated
 @NgModule({

projects/aca-shared/src/lib/testing/lib-testing-module.ts

@@ -64,7 +64,6 @@ export const initialState = {
     infoDrawerOpened: false,
     infoDrawerMetadataAspect: '',
     showFacetFilter: true,
-    documentDisplayMode: 'list',
     repository: {
       status: {
         isQuickShareEnabled: true

projects/aca-shared/src/public-api.ts

@@ -30,10 +30,11 @@ export * from './lib/components/page-layout/page-layout.component';
 export * from './lib/components/page-layout/page-layout.module';
 export * from './lib/components/locked-by/locked-by.component';
 export * from './lib/components/generic-error/generic-error.component';
-export * from './lib/components/tool-bar/toolbar-action/toolbar-action.component';
-export * from './lib/components/tool-bar/toolbar-button/toolbar-button.component';
-export * from './lib/components/tool-bar/toolbar-menu/toolbar-menu.component';
-export * from './lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component';
+export * from './lib/components/toolbar/toolbar.component';
+export * from './lib/components/toolbar/toolbar-action/toolbar-action.component';
+export * from './lib/components/toolbar/toolbar-button/toolbar-button.component';
+export * from './lib/components/toolbar/toolbar-menu/toolbar-menu.component';
+export * from './lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component';
 export * from './lib/components/info-drawer/info-drawer.component';
 export * from './lib/components/document-base-page/document-base-page.component';
 export * from './lib/components/document-base-page/document-base-page.service';