implemented review comments and removed process related code

projects/aca-content/src/lib/components/header-actions/header-actions.component.html

@@ -24,8 +24,6 @@
       </div>
     </mat-menu>
 
-    <app-main-action *ngIf="isTasksRoute() || isProcessesRoute()"></app-main-action>
-
     <adf-toolbar-divider *ngIf="canShowSearchSeparator()">
     </adf-toolbar-divider>
     <aca-search-input class="app-search-input"></aca-search-input>

projects/aca-content/src/lib/components/header-actions/header-actions.component.scss

@@ -1,80 +1,55 @@
 .aca-page-layout-header {
-    // display: flex;
-    // align-items: center;
-    // flex: 0 0 65px;
-    // flex-basis: 96px;
-    // background: var(--theme-page-layout-header-background-color);
-    // border-bottom: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
-    // padding: 0 24px;
 
-      .adf-breadcrumb-item {
+  .app-search-input {
-        font-size: 20px !important;
+    background: none;
-        font-weight: 400 !important;
-        letter-spacing: 0.15px !important;
-      }
-
-      .app-search-input {
-        background: none;
-      }
-    
-      .action-bar {
-        display: flex;
-        flex: auto;
-        height: 32px;
-        margin-left: 24px;
-
-        adf-toolbar-divider {
-          width: 24px !important;
-          height: 32px !important;
-          margin: 4px 0 0 12px !important;
-        }
-      }
-    
-      .aca-mat-button {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        letter-spacing: 0.25px;
-        font-weight: 500;
-        font-size: 14px;
-        font-style: normal;
-        border-radius: 6px;
-        border: none;
-      }   
-    
-      .aca-create-button {
-        width: 71px !important;
-        min-width: 71px;
-        height: 32px;
-        background-color: var(--theme-create-button-background-color);
-        color: var(--theme-create-button-text-color);
-        text-overflow: ellipsis;
-        display: flex;
-        padding: 0;
-      }
-    
-      .aca-upload-button {
-        width: 73px !important;
-        min-width: 73px;
-        height: 32px;
-        background-color: var(--theme-upload-button-background-color);
-        color: var(--theme-upload-button-text-color);
-        text-overflow: ellipsis;
-        display: flex;
-        padding: 0;
-        margin-left: 12px;
-      }
-    
-    //   .aca-process-button {
-    //     width: 130px !important;
-    //     min-width: 130px;
-    //     height: 32px;
-    //     background-color: var(--theme-upload-button-background-color);
-    //     color: var(--theme-upload-button-text-color);
-    //     text-overflow: ellipsis;
-    //     display: flex;
-    //     padding: 0;
-    //     margin-left: 12px;
-    //   }
   }
+
+  .action-bar {
+    display: flex;
+    flex: auto;
+    height: 32px;
+    margin-left: 24px;
+
+    adf-toolbar-divider {
+      width: 24px !important;
+      height: 32px !important;
+      margin: 4px 0 0 12px !important;
+    }
+  }
+
+  .aca-mat-button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    letter-spacing: 0.25px;
+    font-weight: 500;
+    font-size: 14px;
+    font-style: normal;
+    border-radius: 6px;
+    border: none;
+  }
+
+  .aca-create-button {
+    width: 71px !important;
+    min-width: 71px;
+    height: 32px;
+    background-color: var(--theme-create-button-background-color);
+    color: var(--theme-create-button-text-color);
+    text-overflow: ellipsis;
+    display: flex;
+    padding: 0;
+  }
+
+  .aca-upload-button {
+    width: 73px !important;
+    min-width: 73px;
+    height: 32px;
+    background-color: var(--theme-upload-button-background-color);
+    color: var(--theme-upload-button-text-color);
+    text-overflow: ellipsis;
+    display: flex;
+    padding: 0;
+    margin-left: 12px;
+  }
+}

projects/aca-content/src/lib/components/header-actions/header-actions.component.spec.ts

@@ -17,93 +17,125 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppTestingModule } from '../../testing/app-testing.module';
-import { HeaderActionsComponent } from './header-actions.component';
+import { HeaderActionsComponent } from './header-actions.component'
-import { HarnessLoader } from '@angular/cdk/testing';
+import { ContentActionType } from '@alfresco/adf-extensions';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { AppExtensionService } from '@alfresco/aca-shared';
-import { MatButtonHarness } from '@angular/material/button/testing';
+import { of } from 'rxjs';
-import { MatMenuHarness } from '@angular/material/menu/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
 import { By } from '@angular/platform-browser';
+import { CoreModule } from '@alfresco/adf-core';
+import { AppHeaderActionsModule } from './header-actions.module';
 
 describe('HeaderActionsComponent', () => {
   let component: HeaderActionsComponent;
   let fixture: ComponentFixture<HeaderActionsComponent>;
-  let loader: HarnessLoader;
+  
+  let extensionService: AppExtensionService;
+  let getCreateActionsSpy: jasmine.Spy;
+  let getUploadActionsSpy: jasmine.Spy;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [AppTestingModule, NoopAnimationsModule, MatButtonModule, MatMenuModule],
+      imports: [AppTestingModule, CoreModule.forRoot(), AppHeaderActionsModule],
       declarations: [HeaderActionsComponent]
     });
 
     fixture = TestBed.createComponent(HeaderActionsComponent);
     component = fixture.componentInstance;
-    loader = TestbedHarnessEnvironment.loader(fixture);
+    extensionService = TestBed.inject(AppExtensionService);
+
+    getCreateActionsSpy = spyOn(extensionService, 'getCreateActions');
+    getCreateActionsSpy.and.returnValue(
+      of([
+        {
+          id: 'action1',
+          type: ContentActionType.button,
+          title: 'create action one'
+        },
+        {
+          id: 'action2',
+          type: ContentActionType.button,
+          title: 'create action two'
+        }
+      ])
+    );
+
+    getUploadActionsSpy = spyOn(extensionService, 'getUploadActions');
+    getUploadActionsSpy.and.returnValue(
+      of([
+        {
+          id: 'action3',
+          type: ContentActionType.button,
+          title: 'upload action one'
+        }
+      ])
+    );
+
+    fixture = TestBed.createComponent(HeaderActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
   it('total number of buttons in header should be 2 if route is personal-files', async () => {
     spyOn(component, 'isPersonalFilesRoute').and.returnValue(true);
-    const buttons = await loader.getAllHarnesses(MatButtonHarness);
+    fixture.detectChanges();
-    const createButton = await loader.getAllHarnesses(MatButtonHarness.with({text: 'APP.HEADER.BUTTONS.CREATE'}));
+
-    const uploadButton = await loader.getAllHarnesses(MatButtonHarness.with({text: 'APP.HEADER.BUTTONS.UPLOAD'}));
+    const buttons = fixture.debugElement.queryAll(By.css('.action-bar > .aca-mat-button'));
+    const createButton: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
+    const uploadButton: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="upload-button"]')).nativeElement;
 
     expect(buttons.length).toBe(2);
-    expect(createButton.length).toBe(1);
+    expect(createButton).toBeTruthy();
-    expect(uploadButton.length).toBe(1);
+    expect(uploadButton).toBeTruthy();
   });
 
   it('total number of buttons in header should be 1 if route is libraries', async () => {
     spyOn(component, 'isLibrariesRoute').and.returnValue(true);
-    const buttons = await loader.getAllHarnesses(MatButtonHarness);
+    fixture.detectChanges();
-    const createButton = await loader.getAllHarnesses(MatButtonHarness.with({text: 'APP.HEADER.BUTTONS.CREATE'}));
+
+    const buttons = fixture.debugElement.queryAll(By.css('.action-bar > .aca-mat-button'));
+    const createButton: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
 
     expect(buttons.length).toBe(1);
-    expect(createButton.length).toBe(1);
+    expect(createButton).toBeTruthy();
   });
 
-  it('should open and close the create menu', async () => {
+  async function clickCreateMenu() {
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="create-button"]')).nativeElement;
+    button.click();
+  }
+
+  async function clickUploadMenu() {
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    const button: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="upload-button"]')).nativeElement;
+    button.click();
+  }
+
+  it('should render menu items when create menu is opened' , async () => {
     spyOn(component, 'isPersonalFilesRoute').and.returnValue(true);
-    const createMenu = await loader.getHarness(MatMenuHarness.with({ triggerText: 'APP.HEADER.BUTTONS.CREATE' }));
+    await clickCreateMenu();
 
-    expect(await createMenu.isOpen()).toBe(false);
+    const menuItems = fixture.debugElement.queryAll(By.css('.app-toolbar-menu-item'));
-    await createMenu.open();
+    expect(menuItems.length).toBe(2);
-    expect(await createMenu.isOpen()).toBe(true);
 
-    await createMenu.close();
+    const menuItemOne: HTMLSpanElement = (menuItems[0].nativeElement as HTMLButtonElement).querySelector('[data-automation-id="menu-item-title"]');
-    expect(await createMenu.isOpen()).toBe(false);
+    const menuItemTwo: HTMLSpanElement = (menuItems[1].nativeElement as HTMLButtonElement).querySelector('[data-automation-id="menu-item-title"]');
+    expect(menuItemOne.innerText).toBe('create action one');
+    expect(menuItemTwo.innerText).toBe('create action two');
   });
 
-  it('should open and close the upload menu', async () => {
+  it('should render menu items when upload menu is opened', async () => {
     spyOn(component, 'isPersonalFilesRoute').and.returnValue(true);
-    const uploadMenu = await loader.getHarness(MatMenuHarness.with({ triggerText: 'APP.HEADER.BUTTONS.UPLOAD' }));
+    await clickUploadMenu();
 
-    expect(await uploadMenu.isOpen()).toBe(false);
+    const menuItems = fixture.debugElement.queryAll(By.css('.app-toolbar-menu-item'));
-    await uploadMenu.open();
+    expect(menuItems.length).toBe(1);
-    expect(await uploadMenu.isOpen()).toBe(true);
 
-    await uploadMenu.close();
+    const menuItemOne: HTMLSpanElement = (menuItems[0].nativeElement as HTMLButtonElement).querySelector('[data-automation-id="menu-item-title"]');
-    expect(await uploadMenu.isOpen()).toBe(false);
+    expect(menuItemOne.innerText).toBe('upload action one');
-  });
-
-  it('should load create menu on click of create button', async () => {
-    spyOn(component, 'isPersonalFilesRoute').and.returnValue(true);
-
-    const buttons = await loader.getHarness(MatButtonHarness.with({ selector: '.aca-create-button' }));
-    buttons.click();
-
-    const createMenu = fixture.debugElement.queryAll(By.css('.app-create-menu__root-menu app-create-menu__sub-menu'));
-    expect(createMenu).toBeTruthy();
-  });
-
-  it('should load upload menu on click of upload button', async () => {
-    spyOn(component, 'isPersonalFilesRoute').and.returnValue(true);
-
-    const buttons = await loader.getHarness(MatButtonHarness.with({ selector: '.aca-upload-button' }));
-    buttons.click();
-
-    const uploadMenu = fixture.debugElement.queryAll(By.css('.app-upload-menu__root-menu app-upload-menu__sub-menu'));
-    expect(uploadMenu).toBeTruthy();
   });
 });

projects/aca-content/src/lib/components/header-actions/header-actions.component.ts

@@ -85,12 +85,4 @@ export class HeaderActionsComponent extends PageComponent implements OnInit, OnD
       return false;
     }
   }
-
-  isTasksRoute(): boolean {
-    return this.router.url.includes('/tasks');
-  }
-
-  isProcessesRoute(): boolean {
-    return this.router.url.includes('/processes');
-  }
 }

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

@@ -25,7 +25,7 @@
 
 import { DocumentListComponent, ShareDataRow } from '@alfresco/adf-content-services';
 import { ShowHeaderMode } from '@alfresco/adf-core';
-import { ContentActionRef, ContentActionType, DocumentListPresetRef, SelectionState } from '@alfresco/adf-extensions';
+import { ContentActionRef, DocumentListPresetRef, SelectionState } from '@alfresco/adf-extensions';
 import { OnDestroy, OnInit, OnChanges, ViewChild, SimpleChanges, Directive } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { MinimalNodeEntity, MinimalNodeEntryEntity, NodePaging } from '@alfresco/js-api';
@@ -70,15 +70,12 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
   filterSorting = 'name-asc';
   createActions: Array<ContentActionRef> = [];
   uploadActions: Array<ContentActionRef> = [];
-  mainAction$: Observable<ContentActionRef>;
-  actionTypes = ContentActionType;
 
   protected subscriptions: Subscription[] = [];
 
   protected constructor(protected store: Store<AppStore>, protected extensions: AppExtensionService, protected content: DocumentBasePageService) {}
 
   ngOnInit() {
-    this.mainAction$ = this.extensions.getMainAction().pipe(takeUntil(this.onDestroy$));
 
     this.extensions
       .getCreateActions()
@@ -144,10 +141,6 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
     this.store.dispatch(new SetSelectedNodesAction([]));
   }
 
-  runAction(action: string): void {
-    this.extensions.runActionById(action);
-  }
-
   showPreview(node: MinimalNodeEntity, extras?: ViewNodeExtras) {
     if (node && node.entry) {
       let id: string;

projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss

@@ -11,6 +11,12 @@
     background: var(--theme-page-layout-header-background-color);
     border-bottom: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
     padding: 0 24px;
+
+      .adf-breadcrumb-item {
+        font-size: 20px !important;
+        font-weight: 400 !important;
+        letter-spacing: 0.15px !important;
+      }
   }
 
   .aca-page-layout-content {