[AAE-6309] Fix for displaying main action on collapsed menu (#2369)

* [AAE-6309] Fix for displaying main action on collapsed sidenav

* [AAE-6309] Cleaning code

* Fix after rebase

* [AAE-6309] Fix tests

src/app/components/create-menu/create-menu.component.scss

@@ -3,18 +3,6 @@
 }
 
 .app-create-menu {
-  width: 100%;
-
-  .mat-stroked-button:not(.app-create-menu-secondary-button) {
-    background-color: var(--theme-accent-color);
-    color: var(--theme-primary-color-default-contrast);
-    margin-top: 0px;
-
-    .mat-icon {
-      color: var(--theme-primary-color-default-contrast);
-    }
-  }
-
   .mat-stroked-button {
     width: 100%;
     height: 37.5px;
@@ -34,6 +22,16 @@
       height: 20px;
       text-align: left;
     }
+
+    &:not(.app-create-menu-secondary-button) {
+      background-color: var(--theme-accent-color);
+      color: var(--theme-primary-color-default-contrast);
+      margin-top: 0px;
+
+      .mat-icon {
+        color: var(--theme-primary-color-default-contrast);
+      }
+    }
   }
 
   &__root-menu {
@@ -52,18 +50,22 @@
     outline: none;
     color: var(--theme-secondary-text-color);
     cursor: pointer;
-    &:hover {
-      color: var(--theme-accent-color);
-    }
     margin: 0;
     border: none;
     background: none;
-  }
 
+    &:not(.app-create-menu-secondary-button) {
       .app-create-menu--icon {
         color: var(--theme-accent-color);
       }
 
+      &:hover {
+        color: var(--theme-accent-color);
+      }
+    }
+  }
+
+  .app-create-menu--icon {
     &__sub-menu {
       .mat-menu-item {
         display: flex;
@@ -91,4 +93,5 @@
         }
       }
     }
+  }
 }

src/app/components/main-action/main-action.component.html

@@ -1,15 +1,28 @@
 <ng-container *ngIf="(mainAction$ | async) as action">
     <ng-container [ngSwitch]="action.type">
+        <ng-container *ngSwitchCase="actionTypes.button">
             <button
-            *ngSwitchCase="actionTypes.button"
+                *ngIf="expanded"
                 mat-stroked-button
-            [id]="action.id"
-            [disabled]="action.disabled"
                 (click)="runAction(action.actions.click)"
+                [disabled]="action.disabled"
                 class="app-main-action-button"
+                data-automation-id="app-main-action-button"
             >
                 {{action.title | translate}}
             </button>
+
+            <button
+                *ngIf="expanded === false"
+                mat-icon-button
+                (click)="runAction(action.actions.click)"
+                [disabled]="action.disabled"
+                data-automation-id="app-main-action-icon"
+                title="{{ action.title| translate }}"
+            >
+                <mat-icon class="main-action-menu-icon">{{action.icon}}</mat-icon>
+            </button>
+        </ng-container>
     </ng-container>
 </ng-container>
 

src/app/components/main-action/main-action.component.scss

@@ -4,3 +4,7 @@
     background-color: var(--theme-accent-color);
     color: var(--theme-primary-color-default-contrast);
 }
+
+.main-action-menu-icon {
+    color: var(--theme-accent-color);
+}

src/app/components/main-action/main-action.component.spec.ts

@@ -36,6 +36,9 @@ import { TranslateModule } from '@ngx-translate/core';
 
 describe('MainActionComponent', () => {
   let mainActionComponent: MainActionComponent;
+  const buttonQuery = '[data-automation-id="app-main-action-button"]';
+  const iconQuery = '[data-automation-id="app-main-action-icon"]';
+
   let fixture: ComponentFixture<MainActionComponent>;
   let appExtensionService: AppExtensionServiceMock;
 
@@ -52,14 +55,20 @@ describe('MainActionComponent', () => {
 
     fixture = TestBed.createComponent(MainActionComponent);
     mainActionComponent = fixture.componentInstance;
+  });
 
+  describe('component is in expanded mode', () => {
+    beforeEach(async () => {
+      mainActionComponent.expanded = true;
       fixture.detectChanges();
     });
 
     it('should display button if main action is configured', () => {
-    const button = fixture.debugElement.nativeElement.querySelector('.app-main-action-button');
-    expect(button).toBeTruthy();
-    expect(button.textContent.trim()).toBe(ACTION_TITLE);
+      const buttonMainAction = fixture.debugElement.nativeElement.querySelector(buttonQuery);
+      const iconMainAction = fixture.debugElement.nativeElement.querySelector(iconQuery);
+
+      expect(iconMainAction).toBeFalsy();
+      expect(buttonMainAction.textContent.trim()).toBe(ACTION_TITLE);
     });
 
     it('should not display button if main action is not configured', () => {
@@ -67,14 +76,14 @@ describe('MainActionComponent', () => {
       mainActionComponent.ngOnInit();
       fixture.detectChanges();
 
-    const button = fixture.debugElement.nativeElement.querySelector('.app-main-action-button');
+      const button = fixture.debugElement.nativeElement.querySelector(buttonQuery);
       expect(button).toBeFalsy();
     });
 
     it('should call extension action', () => {
       const runExtensionActionSpy = spyOn(appExtensionService, 'runActionById');
 
-    const button = fixture.debugElement.nativeElement.querySelector('button');
+      const button = fixture.debugElement.nativeElement.querySelector(buttonQuery);
       button.click();
 
       expect(runExtensionActionSpy).toHaveBeenCalledWith(ACTION_CLICK);
@@ -90,9 +99,59 @@ describe('MainActionComponent', () => {
       mainActionComponent.ngOnInit();
       fixture.detectChanges();
 
-    const button = fixture.debugElement.nativeElement.querySelector(`#${disabledMainActionRef.id}`);
+      const button = fixture.debugElement.nativeElement.querySelector(buttonQuery);
       button.click();
 
       expect(runAction).not.toHaveBeenCalled();
     });
+  });
+
+  describe('component is displayed as icon', () => {
+    beforeEach(async () => {
+      mainActionComponent.expanded = false;
+      fixture.detectChanges();
+    });
+
+    it('should display icon if main action is configured', () => {
+      const buttonMainAction = fixture.debugElement.nativeElement.querySelector(buttonQuery);
+      const iconMainAction = fixture.debugElement.nativeElement.querySelector(iconQuery);
+
+      expect(buttonMainAction).toBeFalsy();
+      expect(iconMainAction).toBeTruthy();
+    });
+
+    it('should not display icon if main action is not configured', () => {
+      spyOn(appExtensionService, 'getMainAction').and.returnValue(of(undefined));
+      mainActionComponent.ngOnInit();
+      fixture.detectChanges();
+
+      const mainAction = fixture.debugElement.nativeElement.querySelector(iconQuery);
+      expect(mainAction).toBeFalsy();
+    });
+
+    it('should call extension action', () => {
+      const runExtensionActionSpy = spyOn(appExtensionService, 'runActionById');
+
+      const mainAction = fixture.debugElement.nativeElement.querySelector(iconQuery);
+      mainAction.click();
+
+      expect(runExtensionActionSpy).toHaveBeenCalledWith(ACTION_CLICK);
+    });
+
+    it('should not call icon if main action is disabled', () => {
+      const disabledMainActionRef = getContentActionRef();
+      disabledMainActionRef.disabled = true;
+
+      spyOn(appExtensionService, 'getMainAction').and.returnValue(of(disabledMainActionRef));
+      const runAction = spyOn(mainActionComponent, 'runAction');
+
+      mainActionComponent.ngOnInit();
+      fixture.detectChanges();
+
+      const button = fixture.debugElement.nativeElement.querySelector(iconQuery);
+      button.click();
+
+      expect(runAction).not.toHaveBeenCalled();
+    });
+  });
 });

src/app/components/main-action/main-action.component.ts

@@ -25,7 +25,7 @@
 
 import { AppExtensionService } from '@alfresco/aca-shared';
 import { ContentActionRef, ContentActionType } from '@alfresco/adf-extensions';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -35,6 +35,8 @@ import { takeUntil } from 'rxjs/operators';
   styleUrls: ['./main-action.component.scss']
 })
 export class MainActionComponent implements OnInit, OnDestroy {
+  @Input() expanded: boolean;
+
   mainAction$: Observable<ContentActionRef>;
 
   actionTypes = ContentActionType;

src/app/components/main-action/main-action.module.ts

@@ -28,9 +28,10 @@ import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { TranslateModule } from '@ngx-translate/core';
 import { MainActionComponent } from './main-action.component';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
-  imports: [CommonModule, MatButtonModule, TranslateModule.forChild()],
+  imports: [CommonModule, MatButtonModule, MatIconModule, TranslateModule.forChild()],
   exports: [MainActionComponent],
   declarations: [MainActionComponent]
 })

src/app/components/sidenav/sidenav.component.html

@@ -1,8 +1,7 @@
 <div class="sidenav">
   <ng-container [ngSwitch]="mode">
     <div class="section action-menu" [ngClass]="'section--' + mode">
-      <app-main-action></app-main-action>
-
+      <app-main-action [expanded]="mode === 'expanded'"></app-main-action>
       <app-create-menu [expanded]="mode === 'expanded'"></app-create-menu>
     </div>