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
2025-07-24 17:31:52 +00:00 · 2023-08-14 19:43:33 +01:00
parent 5279472a0a
commit 27eddf3596
78 changed files with 316 additions and 634 deletions
--- a/projects/aca-shared/src/lib/components/toolbar/toolbar-button/toolbar-button.component.html
+++ b/projects/aca-shared/src/lib/components/toolbar/toolbar-button/toolbar-button.component.html
@@ -0,0 +1,47 @@
+<ng-container [ngSwitch]="data?.buttonType || type">
+  <ng-container *ngSwitchCase="'icon-button'">
+    <button
+      [id]="actionRef.id"
+      mat-icon-button
+      [color]="color"
+      [attr.aria-label]="actionRef.description || actionRef.title | translate"
+      [attr.title]="actionRef.description || actionRef.title | translate"
+      [disabled]="actionRef.disabled"
+      (click)="runAction()"
+    >
+      <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">{{ actionRef.title | translate }}</span>
+    </button>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'stroked-button'">
+    <button
+      [id]="actionRef.id"
+      [color]="data?.color || color"
+      mat-stroked-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">{{ actionRef.title | translate }}</span>
+    </button>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'menu-item'">
+    <app-toolbar-menu-item [actionRef]="actionRef"></app-toolbar-menu-item>
+  </ng-container>
+</ng-container>
--- a/projects/aca-shared/src/lib/components/toolbar/toolbar-button/toolbar-button.component.spec.ts
+++ b/projects/aca-shared/src/lib/components/toolbar/toolbar-button/toolbar-button.component.spec.ts
@@ -0,0 +1,84 @@
+/*!
+ * 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 { ToolbarButtonComponent, ToolbarButtonType } from './toolbar-button.component';
+import { Store } from '@ngrx/store';
+import { of } from 'rxjs';
+import { AppExtensionService } from '../../../services/app.extension.service';
+import { ContentActionType } from '@alfresco/adf-extensions';
+import { LibTestingModule } from '@alfresco/aca-shared';
+
+describe('ToolbarButtonComponent', () => {
+  let fixture: ComponentFixture<ToolbarButtonComponent>;
+  let component: ToolbarButtonComponent;
+  let appExtensionService: AppExtensionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [LibTestingModule, ToolbarButtonComponent],
+      providers: [
+        { provide: AppExtensionService, useValue: { runActionById() {} } },
+        {
+          provide: Store,
+          useValue: {
+            dispatch: () => {},
+            select: () => of({ count: 1 })
+          }
+        }
+      ]
+    });
+
+    fixture = TestBed.createComponent(ToolbarButtonComponent);
+    component = fixture.componentInstance;
+    appExtensionService = TestBed.inject(AppExtensionService);
+  });
+
+  it('should be icon button by default', () => {
+    expect(component.type).toBe(ToolbarButtonType.ICON_BUTTON);
+  });
+
+  it('should run action on click', async () => {
+    const runActionById = spyOn(appExtensionService, 'runActionById');
+
+    component.actionRef = {
+      id: 'button1',
+      type: ContentActionType.button,
+      actions: {
+        click: 'ON_CLICK'
+      }
+    };
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = fixture.nativeElement.querySelector('[id="button1"]');
+    button.click();
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(runActionById).toHaveBeenCalled();
+  });
+});
--- a/projects/aca-shared/src/lib/components/toolbar/toolbar-button/toolbar-button.component.ts
+++ b/projects/aca-shared/src/lib/components/toolbar/toolbar-button/toolbar-button.component.ts
@@ -0,0 +1,79 @@
+/*!
+ * 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 { ContentActionRef } from '@alfresco/adf-extensions';
+import { AppExtensionService } from '../../../services/app.extension.service';
+import { ThemePalette } from '@angular/material/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { IconModule } from '@alfresco/adf-core';
+import { TranslateModule } from '@ngx-translate/core';
+import { ToolbarMenuItemComponent } from '../toolbar-menu-item/toolbar-menu-item.component';
+
+export enum ToolbarButtonType {
+  ICON_BUTTON = 'icon-button',
+  FLAT_BUTTON = 'flat-button',
+  STROKED_BUTTON = 'stroked-button',
+  MENU_ITEM = 'menu-item'
+}
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, TranslateModule, MatButtonModule, IconModule, ToolbarMenuItemComponent],
+  selector: 'app-toolbar-button',
+  templateUrl: './toolbar-button.component.html',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toolbar-button' }
+})
+export class ToolbarButtonComponent {
+  @Input()
+  data: {
+    buttonType?: ToolbarButtonType;
+    color?: string;
+  };
+
+  @Input()
+  type: ToolbarButtonType = ToolbarButtonType.ICON_BUTTON;
+
+  @Input()
+  color: ThemePalette;
+
+  @Input()
+  actionRef: ContentActionRef;
+
+  constructor(private extensions: AppExtensionService) {}
+
+  runAction() {
+    if (this.hasClickAction(this.actionRef)) {
+      this.extensions.runActionById(this.actionRef.actions.click, {
+        focusedElementOnCloseSelector: `#${this.actionRef.id.replace(/\./g, '\\.')}`
+      });
+    }
+  }
+
+  private hasClickAction(actionRef: ContentActionRef): boolean {
+    return !!(actionRef && actionRef.actions && actionRef.actions.click);
+  }
+}