[AAE-4515] Provide a way to disable/enable the main file uploading di… (#1981)

* [AAE-4515] Provide a way to disable/enable the main file uploading dialog

* Fix expression has been changed after is has been checked error

* Add unit tests

* Fix linting errors

projects/aca-shared/store/src/actions/app.actions.ts

@@ -43,7 +43,8 @@ export enum AppActionTypes {
   ResetSelection = 'RESET_SELECTION',
   SetInfoDrawerState = 'SET_INFO_DRAWER_STATE',
   SetInfoDrawerMetadataAspect = 'SET_INFO_DRAWER_METADATA_ASPECT',
-  CloseModalDialogs = 'CLOSE_MODAL_DIALOGS'
+  CloseModalDialogs = 'CLOSE_MODAL_DIALOGS',
+  SetFileUploadingDialog = 'SET_FILE_UPLOADING_DIALOG'
 }
 
 export class SetSettingsParameterAction implements Action {
@@ -127,3 +128,9 @@ export class SetRepositoryInfoAction implements Action {
 
   constructor(public payload: RepositoryInfo) {}
 }
+
+export class SetFileUploadingDialogAction implements Action {
+  readonly type = AppActionTypes.SetFileUploadingDialog;
+
+  constructor(public payload: boolean) {}
+}

projects/aca-shared/store/src/selectors/app.selectors.ts

@@ -44,6 +44,7 @@ export const getDocumentDisplayMode = createSelector(selectApp, (state) => state
 export const getRepositoryStatus = createSelector(selectApp, (state) => state.repository);
 export const isQuickShareEnabled = createSelector(getRepositoryStatus, (info) => info.status.isQuickShareEnabled);
 export const isAdmin = createSelector(selectApp, (state) => state.user.isAdmin);
+export const getFileUploadingDialog = createSelector(selectApp, (state) => state.fileUploadingDialog);
 
 export const getSideNavState = createSelector(getAppSelection, getNavigationState, (selection, navigation) => {
   return {

projects/aca-shared/store/src/states/app.state.ts

@@ -41,6 +41,7 @@ export interface AppState {
   showFacetFilter: boolean;
   documentDisplayMode: string;
   repository: RepositoryInfo;
+  fileUploadingDialog: boolean;
 }
 
 export interface AppStore {

src/app/components/layout/app-layout/app-layout.component.html

@@ -10,13 +10,7 @@
   >
     <adf-sidenav-layout-header>
       <ng-template let-isMenuMinimized="isMenuMinimized">
-        <app-header
+        <app-header role="heading" aria-level="1" *ngIf="!hideSidenav" (toggleClicked)="layout.toggleMenu()" [expandedSidenav]="!isMenuMinimized()">
-          role="heading"
-          aria-level="1"
-          *ngIf="!hideSidenav"
-          (toggleClicked)="layout.toggleMenu()"
-          [expandedSidenav]="!isMenuMinimized()"
-        >
         </app-header>
       </ng-template>
     </adf-sidenav-layout-header>
@@ -25,9 +19,7 @@
       <ng-template let-isMenuMinimized="isMenuMinimized">
         <app-sidenav
           [mode]="isMenuMinimized() ? 'collapsed' : 'expanded'"
-          [attr.data-automation-id]="
+          [attr.data-automation-id]="isMenuMinimized() ? 'collapsed' : 'expanded'"
-            isMenuMinimized() ? 'collapsed' : 'expanded'
-          "
           (swipeleft)="hideMenu($event)"
         >
         </app-sidenav>
@@ -41,7 +33,7 @@
     </adf-sidenav-layout-content>
   </adf-sidenav-layout>
 
-  <adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
+  <adf-file-uploading-dialog *ngIf="showFileUploadingDialog" position="left"></adf-file-uploading-dialog>
 </adf-upload-drag-area>
 
 <router-outlet name="viewer"></router-outlet>

src/app/components/layout/app-layout/app-layout.component.spec.ts

@@ -25,13 +25,14 @@
 
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
+import { AppConfigService, FileModel, UploadService, UserPreferencesService } from '@alfresco/adf-core';
 import { AppLayoutComponent } from './app-layout.component';
 import { AppTestingModule } from '../../../testing/app-testing.module';
 import { Store } from '@ngrx/store';
 import { AppStore, SetSelectedNodesAction, ResetSelectionAction } from '@alfresco/aca-shared/store';
 import { Router, NavigationStart } from '@angular/router';
-import { Subject } from 'rxjs';
+import { of, Subject } from 'rxjs';
+import { By } from '@angular/platform-browser';
 
 class MockRouter {
   private url = 'some-url';
@@ -52,6 +53,8 @@ describe('AppLayoutComponent', () => {
   let userPreference: UserPreferencesService;
   let store: Store<AppStore>;
   let router: Router;
+  let uploadService: UploadService;
+  let fakeFileList: FileModel[];
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -73,6 +76,10 @@ describe('AppLayoutComponent', () => {
     store = TestBed.inject(Store);
     router = TestBed.inject(Router);
     userPreference = TestBed.inject(UserPreferencesService);
+
+    fakeFileList = [new FileModel(new File([], 'fakeFile'))];
+
+    uploadService = TestBed.inject(UploadService);
   });
 
   beforeEach(() => {
@@ -178,4 +185,36 @@ describe('AppLayoutComponent', () => {
 
     expect(component.layout.container.toggleMenu).toHaveBeenCalled();
   });
+
+  describe('File Uploading Dialog', () => {
+    it('should the uploading file dialog be visible on the left when the showFileUploadingDialog is true', async () => {
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      uploadService.addToQueue(...fakeFileList);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const fileUploadingDialog = fixture.debugElement.query(By.css('adf-file-uploading-dialog'));
+
+      expect(fileUploadingDialog.attributes['position']).toEqual('left');
+      expect(component.showFileUploadingDialog).toEqual(true);
+      expect(fileUploadingDialog).not.toEqual(null);
+    });
+
+    it('should the uploading file dialog not be visible when the showFileUploadingDialog is false', async () => {
+      spyOn(store, 'select').and.returnValue(of(false));
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      uploadService.addToQueue(...fakeFileList);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const fileUploadingDialog = fixture.debugElement.query(By.css('adf-file-uploading-dialog'));
+
+      expect(component.showFileUploadingDialog).toEqual(false);
+      expect(fileUploadingDialog).toEqual(null);
+    });
+  });
 });

src/app/components/layout/app-layout/app-layout.component.ts

@@ -28,10 +28,10 @@ import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@ang
 import { NavigationEnd, Router, NavigationStart } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Subject, Observable } from 'rxjs';
-import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators';
+import { filter, takeUntil, map, withLatestFrom, delay } from 'rxjs/operators';
 import { NodePermissionService } from '@alfresco/aca-shared';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { AppStore, getCurrentFolder, ResetSelectionAction } from '@alfresco/aca-shared/store';
+import { AppStore, getCurrentFolder, getFileUploadingDialog, ResetSelectionAction } from '@alfresco/aca-shared/store';
 import { Directionality } from '@angular/cdk/bidi';
 
 @Component({
@@ -56,6 +56,8 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
   hideSidenav = false;
   direction: Directionality;
 
+  showFileUploadingDialog: boolean;
+
   private minimizeConditions: string[] = ['search'];
   private hideConditions: string[] = ['/preview/'];
 
@@ -119,6 +121,13 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
       .subscribe(() => {
         this.store.dispatch(new ResetSelectionAction());
       });
+
+    this.store
+      .select(getFileUploadingDialog)
+      .pipe(delay(0), takeUntil(this.onDestroy$))
+      .subscribe((fileUploadingDialog: boolean) => {
+        this.showFileUploadingDialog = fileUploadingDialog;
+      });
   }
 
   ngOnDestroy() {

src/app/store/initial-state.ts

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

src/app/store/reducers/app.reducer.ts

@@ -38,7 +38,8 @@ import {
   SetInfoDrawerStateAction,
   SetInfoDrawerMetadataAspectAction,
   SetHeaderColorAction,
-  SetCurrentNodeVersionAction
+  SetCurrentNodeVersionAction,
+  SetFileUploadingDialogAction
 } from '@alfresco/aca-shared/store';
 import { INITIAL_APP_STATE } from '../initial-state';
 
@@ -94,6 +95,9 @@ export function appReducer(state: AppState = INITIAL_APP_STATE, action: Action):
     case SearchActionTypes.HideFilter:
       newState = hideSearchFilter(state);
       break;
+    case AppActionTypes.SetFileUploadingDialog:
+      newState = setUploadDialogVisibility(state, action as SetFileUploadingDialogAction);
+      break;
     default:
       newState = { ...state };
   }
@@ -256,3 +260,9 @@ function updateRepositoryStatus(state: AppState, action: SetRepositoryInfoAction
   newState.repository = action.payload;
   return newState;
 }
+
+function setUploadDialogVisibility(state: AppState, action: SetFileUploadingDialogAction): AppState {
+  const newState = { ...state };
+  newState.fileUploadingDialog = action.payload;
+  return newState;
+}