ACS-10934: migrate from adf-toolbar to mat-toolbar (#4969)

* ACS-10934: migrate from adf-toolbar to mat-toolbar

* update e2e

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html

@@ -1,11 +1,9 @@
 <aca-page-layout>
 
   <div class="aca-page-layout-header">
-    <adf-toolbar class="adf-toolbar--inline">
-      <button mat-icon-button (click)="goBack()" [attr.aria-label]="'ACA_FOLDER_RULES.ACTIONS.GO_BACK' | translate">
-        <mat-icon>arrow_back</mat-icon>
-      </button>
-    </adf-toolbar>
+    <button mat-icon-button (click)="goBack()" [attr.aria-label]="'ACA_FOLDER_RULES.ACTIONS.GO_BACK' | translate">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
     <h1 class="aca-page-title">{{ 'ACA_FOLDER_RULES.ACTIONS.MANAGE_RULES' | translate }}</h1>
   </div>
 
@@ -18,12 +16,12 @@
 
       <ng-template #onLoaded>
         <ng-container *ngIf="folderInfo$ | async; else genericError">
-          <adf-toolbar class="adf-toolbar--inline aca-manage-rules__actions-bar">
+          <mat-toolbar class="aca-manage-rules__toolbar aca-manage-rules__actions-bar">
 
-            <adf-toolbar-title class="aca-manage-rules__actions-bar__title">
+            <span class="aca-manage-rules__actions-bar__title">
               <mat-icon class="icon-aligner">folder</mat-icon>
-              <h2 class="aca-page-title">{{ (folderInfo$ | async).name }}:{{'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.BREADCRUMB.RULES' | translate}}</h2>
-            </adf-toolbar-title>
+              <span class="aca-page-title">{{ (folderInfo$ | async).name }}:{{'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.BREADCRUMB.RULES' | translate}}</span>
+            </span>
 
             <mat-slide-toggle
               data-automation-id="manage-rules-inheritance-toggle-button"
@@ -55,7 +53,7 @@
               </button>
             </div>
 
-          </adf-toolbar>
+          </mat-toolbar>
           <mat-divider />
 
           <div class="aca-manage-rules__container" *ngIf="isMainRuleSetNotEmpty || isInheritedRuleSetsNotEmpty; else emptyContent">

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss

@@ -16,6 +16,16 @@
     background: var(--mdc-switch-selected-pressed-handle-color);
   }
 
+  &__toolbar {
+    color: var(--adf-theme-foreground-text-color-064);
+    height: 64px;
+    font-size: var(--theme-body-1-font-size);
+    white-space: normal;
+    background-color: inherit;
+    border: none;
+    padding: 0;
+  }
+
   &__actions-bar {
     padding: 0 30px;
     display: flex;
@@ -26,8 +36,10 @@
     }
 
     &__title {
+      display: flex;
       align-items: center;
       flex: 1;
+      font-size: var(--theme-body-1-font-size);
     }
 
     &__buttons {

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.ts

@@ -32,7 +32,7 @@ import { NodeInfo } from '@alfresco/aca-shared/store';
 import { delay } from 'rxjs/operators';
 import { EditRuleDialogUiComponent } from '../rule-details/edit-rule-dialog.ui-component';
 import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent, EmptyContentComponent, NotificationService, ToolbarComponent, ToolbarTitleComponent } from '@alfresco/adf-core';
+import { ConfirmDialogComponent, EmptyContentComponent, NotificationService } from '@alfresco/adf-core';
 import { ActionDefinitionTransformed } from '../model/rule-action.model';
 import { ActionsService } from '../services/actions.service';
 import { FolderRuleSetsService } from '../services/folder-rule-sets.service';
@@ -49,6 +49,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { RuleListUiComponent } from '../rule-list/rule-list/rule-list.ui-component';
 import { RuleDetailsUiComponent } from '../rule-details/rule-details.ui-component';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatToolbar } from '@angular/material/toolbar';
 
 @Component({
   imports: [
@@ -65,8 +66,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
     GenericErrorComponent,
     RuleDetailsUiComponent,
     EmptyContentComponent,
-    ToolbarTitleComponent,
-    ToolbarComponent
+    MatToolbar
   ],
   selector: 'aca-manage-rules',
   templateUrl: 'manage-rules.smart-component.html',

projects/aca-playwright-shared/src/page-objects/components/dataTable/toolbar.component.ts

@@ -27,18 +27,18 @@ import { Page } from '@playwright/test';
 
 export class ToolbarComponent extends BaseComponent {
   private static rootElement = 'adf-toolbar';
-  private createRuleButton = this.getChild('[data-automation-id="manage-rules-create-button"]');
-  private linkRulesButton = this.getChild('[data-automation-id="manage-rules-link-button"]');
 
   constructor(page: Page) {
     super(page, ToolbarComponent.rootElement);
   }
 
   async clickCreateRuleButton(): Promise<void> {
-    await this.createRuleButton.click();
+    const button = this.page.locator('[data-automation-id="manage-rules-create-button"]');
+    await button.click();
   }
 
   async clickLinkRulesButton(): Promise<void> {
-    await this.linkRulesButton.click();
+    const button = this.page.locator('[data-automation-id="manage-rules-link-button"]');
+    await button.click();
   }
 }