[no-issue] fix e2e uploader (#3840)

* fix e2e upload
move viewer subbfolder

* fix CS services e2e test

* add log for error in upload delete

* aysnc get node

* new tentative

* attempt 2

* attempt 3

* new demo shell test
travis change for test

* excluded file tslint fix

* remove desktop only class

* renable tests

* decrease time notification

* add process service multiselect demo test
fix e2e

* remove log

* add custom toolbar example

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

@@ -19,7 +19,7 @@
 
                 <app-search-bar fxFlex="0 1 auto"></app-search-bar>
 
-                <div class="adf-header-delimiter"></div>
+                <div class="adf-header-delimiexpandedSidenavter"></div>
 
                 <adf-userinfo
                     class="adf-app-layout-user-profile"

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

@@ -90,6 +90,7 @@ export class AppLayoutComponent implements OnInit {
         this.headerService.redirectUrl.subscribe(redirectUrl => this.redirectUrl = redirectUrl);
         this.headerService.tooltip.subscribe(tooltip => this.tooltip = tooltip);
         this.headerService.position.subscribe(position => this.position = position);
+        this.headerService.hideSidenav.subscribe(hideSidenav => this.hideSidenav = hideSidenav);
     }
 
     constructor(

demo-shell/src/app/components/config-editor/config-editor.component.html

@@ -1,29 +1,41 @@
+<div>
+    <mat-nav-list class="adf-list-confgurations">
+        <mat-list-item  (click)="metadataConfClick()">
+            <a matLine id="adf-metadata-conf">Metadata App config editor</a>
+            <button mat-icon-button>
+                <mat-icon>info</mat-icon>
+            </button>
+        </mat-list-item>
 
-<h2>Metadata App config editor</h2>
+        <mat-list-item (click)="searchConfClick()">
+            <a matLine id="adf-search-conf" >Search App config editor</a>
+            <button mat-icon-button>
+                <mat-icon>info</mat-icon>
+            </button>
+        </mat-list-item>
 
-<ngx-monaco-editor id="adf-metadata-editor" class="adf-metadata-editor" [options]="editorOptions" [(ngModel)]="metadataConf" (onInit)="onInitMetadata($event)" ></ngx-monaco-editor>
+        <mat-list-item (click)="fileConfClick()">
+            <a matLine id="adf-file-conf" >Excluded config file</a>
+            <button mat-icon-button>
+                <mat-icon>info</mat-icon>
+            </button>
+        </mat-list-item>
+    </mat-nav-list>
 
-<button  mat-raised-button id="adf-metadata-save"  (click)="onSaveMetadata()" color="primary">Save metadata configuration</button>
-<button  mat-raised-button id="adf-metadata-clear" (click)="onClearMetadata()" color="primary">Clear metadata configuration</button>
-
-<br>
-<br>
-<br>
-
-<h2>Search App config editor</h2>
-
-<ngx-monaco-editor id="adf-search-editor" class="adf-search-editor" [options]="editorOptions" [(ngModel)]="searchConf" (onInit)="onInitSearch($event)" ></ngx-monaco-editor>
-
-<button  mat-raised-button id="adf-search-save"  (click)="onSaveSearch()" color="primary">Save Search configuration</button>
-<button  mat-raised-button id="adf-search-clear" (click)="onClearSearch()" color="primary">Clear Search configuration</button>
-
-<br>
-
-<h2>Excluded File config editor</h2>
-
-<ngx-monaco-editor id="adf-excluded-file" class="adf-excluded-file-editor" [options]="editorOptions" [(ngModel)]="excludedFileConf" (onInit)="onInitExcludedFile($event)" ></ngx-monaco-editor>
-
-<button  mat-raised-button id="adf-excluded-file-save"  (click)="onSaveExcludedFile()" color="primary">Save excluded file configuration</button>
-<button  mat-raised-button id="adf-excluded-file-clear" (click)="onClearExcludedFile()" color="primary">Clear excluded file configuration</button>
-
-<br>
+    <div>
+        <ngx-monaco-editor id="adf-code-configuration-editor"
+                           class="adf-file-editor"
+                           [options]="editorOptions"
+                           [(ngModel)]="code"
+                           (onInit)="onInit($event)">
+        </ngx-monaco-editor>
+        <div class="adf-list-confgurations-buttons">
+            <button mat-raised-button id="adf-configuration-save" (click)="onSave()" color="primary">
+                Save
+            </button>
+            <button mat-raised-button id="adf-configuration-clear" (click)="onClear()" color="primary">
+                Clear
+            </button>
+        </div>
+    </div>
+</div>

demo-shell/src/app/components/config-editor/config-editor.component.scss

@@ -1,3 +1,16 @@
-.adf-metadata-editor {
-    height: 300px;
+.adf-file-editor {
+    height: 500px;
+    width: 65%;
+    float: left;
+}
+
+.adf-list-confgurations {
+    float: left;
+    width: 30%;
+}
+
+.adf-list-confgurations-buttons {
+    width: 200px;
+    margin-left:  30%;
+    float: left;
 }

demo-shell/src/app/components/config-editor/config-editor.component.ts

@@ -26,8 +26,9 @@ import { AppConfigService, NotificationService } from '@alfresco/adf-core';
 export class ConfigEditorComponent {
 
     editor: any;
-    editorSearch: any;
-    editorExcludedFile: any;
+    code: any;
+    field = 'content-metadata';
+    invalidJson = false;
 
     editorOptions = {
         theme: 'vs-dark',
@@ -37,79 +38,59 @@ export class ConfigEditorComponent {
         formatOnType: true
     };
 
-    metadataConf: string;
-    searchConf: string;
-    excludedFileConf: string;
-
-    onInitMetadata(editor) {
+    onInit(editor) {
         this.editor = editor;
-        setTimeout(() => {
-            this.editor.getAction('editor.action.formatDocument').run();
-        }, 1000);
-    }
-
-    onInitSearch(editor) {
-        this.editorSearch = editor;
-        setTimeout(() => {
-            this.editorSearch.getAction('editor.action.formatDocument').run();
-        }, 1000);
-    }
-
-    onInitExcludedFile(excludedFile) {
-        this.editorExcludedFile = excludedFile;
-        setTimeout(() => {
-            this.editorExcludedFile.getAction('editor.action.formatDocument').run();
-        }, 1000);
+        this.indentCode();
     }
 
     constructor(private appConfig: AppConfigService, private notificationService: NotificationService) {
-        this.metadataConf = JSON.stringify(appConfig.config['content-metadata']);
-        this.searchConf = JSON.stringify(appConfig.config['search']);
-        this.excludedFileConf = JSON.stringify(appConfig.config['files']);
+        this.code = JSON.stringify(appConfig.config['content-metadata']);
     }
 
-    onSaveMetadata() {
+    onSave() {
         try {
-            this.appConfig.config['content-metadata'] = JSON.parse(this.editor.getValue());
+            this.appConfig.config[this.field] = JSON.parse(this.editor.getValue());
         } catch (error) {
+            this.invalidJson = true;
             this.notificationService.openSnackMessage(
-                'Wrong metadata configuration',
+                'Wrong Code configuration ' + error,
                 4000
             );
+        } finally {
+            if (!this.invalidJson) {
+                this.notificationService.openSnackMessage(
+                    'Saved'
+                );
+            }
         }
     }
 
-    onSaveSearch() {
-        try {
-            this.appConfig.config['search'] = JSON.parse(this.editorSearch.getValue());
-        } catch (error) {
-            this.notificationService.openSnackMessage(
-                'Wrong search configuration',
-                4000
-            );
-        }
+    onClear() {
+        this.code = '';
     }
 
-    onSaveExcludedFile() {
-        try {
-            this.appConfig.config['files'] = JSON.parse(this.editorExcludedFile.getValue());
-        } catch (error) {
-            this.notificationService.openSnackMessage(
-                'Wrong exclude file configuration',
-                4000
-            );
-        }
+    fileConfClick() {
+        this.code = JSON.stringify(this.appConfig.config['files']);
+        this.field = 'files';
+        this.indentCode();
     }
 
-    onClearMetadata() {
-        this.metadataConf = '';
+    searchConfClick() {
+        this.code = JSON.stringify(this.appConfig.config['search']);
+        this.field = 'search';
+        this.indentCode();
     }
 
-    onClearSearch() {
-        this.searchConf = '';
+    metadataConfClick() {
+        this.code = JSON.stringify(this.appConfig.config['content-metadata']);
+        this.field = 'content-metadata';
+        this.indentCode();
     }
 
-    onClearExcludedFile() {
-        this.searchConf = '';
+    indentCode() {
+        setTimeout(() => {
+            this.editor.getAction('editor.action.formatDocument').run();
+        }, 300);
     }
+
 }

demo-shell/src/app/components/file-view/file-view.component.html

@@ -70,6 +70,7 @@
                         Custom preset
                     </mat-slide-toggle>
                 </p>
+
                 <p class="toggle">
                     <ng-container *ngIf="isPreset">
                         <mat-form-field floatPlaceholder="float">
@@ -227,6 +228,16 @@
                     </mat-slide-toggle>
                 </p>
 
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-toggle-custom-toolbar"
+                        [color]="'primary'"
+                        (change)="toggleToolbar()"
+                        [checked]="customToolbar">
+                        Custom Toolbar
+                    </mat-slide-toggle>
+                </p>
+
                 <p class="toggle">
                     <button mat-raised-button id="adf-switch-showrightsidebar" (click)="toggleShowRightSidebar()" color="primary">
                       Toggle Right Sidebar
@@ -244,6 +255,8 @@
         </adf-info-drawer>
     </ng-template>
 
+    <ng-template let-node="node" #sidebarTemplate> <adf-info-drawer-layout> <div info-drawer-content> <mat-card> My info </mat-card> </div> </adf-info-drawer-layout> </ng-template>
+
     <adf-viewer
         [nodeId]="nodeId"
         [showSidebar]="showRightSidebar"
@@ -259,6 +272,10 @@
         [sidebarLeftTemplate]="sidebarLeftTemplate"
         [sidebarTemplate]="sidebarRightTemplate">
 
+        <adf-viewer-toolbar *ngIf="customToolbar">
+            <h1>My custom toolbar</h1>
+        </adf-viewer-toolbar>
+
         <adf-viewer-toolbar-actions *ngIf="moreActions">
             <button mat-icon-button id="adf-viewer-time">
                 <mat-icon>alarm</mat-icon>

demo-shell/src/app/components/file-view/file-view.component.ts

@@ -50,6 +50,7 @@ export class FileViewComponent implements OnInit {
     fileUrlSwitch = false;
     showLeftSidebar = null;
     showRightSidebar = false;
+    customToolbar = false;
 
     constructor(private router: Router,
                 private route: ActivatedRoute,
@@ -158,6 +159,10 @@ export class FileViewComponent implements OnInit {
         }
     }
 
+    toggleToolbar() {
+        this.customToolbar = !this.customToolbar;
+    }
+
     applyCustomPreset() {
         this.isPreset = false;
         setTimeout(() => {

demo-shell/src/app/components/files/files.component.html

@@ -197,7 +197,7 @@
                 [currentFolderId]="currentFolderId"
                 [contextMenuActions]="true"
                 [contentActions]="true"
-                [allowDropFiles]="true"
+                [allowDropFiles]="allowDropFiles"
                 [selectionMode]="selectionMode"
                 [multiselect]="multiselect"
                 [display]="displayMode"
@@ -265,6 +265,11 @@
                         </ng-template>
                     </data-column>
                     -->
+                    <data-column
+                        class="full-width ellipsis-cell"
+                        title="{{'DOCUMENT_LIST.COLUMNS.NODE_ID' | translate}}"
+                        key="id">
+                    </data-column>
                     <data-column
                         class="desktop-only"
                         title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
@@ -468,43 +473,49 @@
         </section>
 
         <section>
-            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' |
-                translate}}
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">
+                {{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' | translate}}
             </mat-slide-toggle>
         </section>
 
         <section>
-            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">
+            <mat-slide-toggle id="adf-multiple-upload-switch" [color]="'primary'" [(ngModel)]="multipleFileUpload">
                 {{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}
             </mat-slide-toggle>
         </section>
 
         <section>
-            <mat-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">{{'DOCUMENT_LIST.FOLDER_UPLOAD' |
-                translate}}
+            <mat-slide-toggle id="adf-folder-upload-switch" [color]="'primary'" [(ngModel)]="folderUpload">
+                {{'DOCUMENT_LIST.FOLDER_UPLOAD' | translate}}
             </mat-slide-toggle>
         </section>
 
         <section>
-            <mat-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">{{'DOCUMENT_LIST.CUSTOM_FILTER' |
-                translate}}
+            <mat-slide-toggle id="adf-extension-filter-upload-switch" [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">
+                {{'DOCUMENT_LIST.CUSTOM_FILTER' | translate}}
             </mat-slide-toggle>
         </section>
 
         <section>
-            <mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
-                translate}}
+            <mat-slide-toggle id="adf-max-size-filter-upload-switch" [color]="'primary'" [(ngModel)]="maxSizeShow">
+                {{'DOCUMENT_LIST.MAX_SIZE' | translate}}
             </mat-slide-toggle>
         </section>
 
         <section>
-            <mat-slide-toggle [color]="'primary'" (click)="toggleThumbnails()" id="enableThumbnails">{{'DOCUMENT_LIST.THUMBNAILS' |
-                translate}}
+            <mat-slide-toggle id="adf-thumbnails-upload-switch" [color]="'primary'" (click)="toggleThumbnails()">
+                {{'DOCUMENT_LIST.THUMBNAILS' | translate}}
             </mat-slide-toggle>
         </section>
 
         <section>
-            <mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">
+            <mat-slide-toggle id="adf-document-list-enable-drop-files" [color]="'primary'" (click)="toggleAllowDropFiles()" >
+                {{'DOCUMENT_LIST.ALLOW_DROP_FILES' | translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle  id="adf-version-upload-switch"  [color]="'primary'" [(ngModel)]="versioning">
                 {{'DOCUMENT_LIST.ENABLE_VERSIONING' | translate}}
             </mat-slide-toggle>
         </section>
@@ -565,7 +576,6 @@
                 #uploadButton
                 tooltip="Custom tooltip"
                 [disabled]="!enableUpload"
-                data-automation-id="multiple-file-upload"
                 [rootFolderId]="documentList.currentFolderId"
                 [multipleFiles]="multipleFileUpload"
                 [uploadFolders]="folderUpload"
@@ -583,7 +593,6 @@
                 #uploadButton
                 tooltip="Custom tooltip"
                 [disabled]="!enableUpload"
-                data-automation-id="multiple-file-upload"
                 [rootFolderId]="documentList.currentFolderId"
                 [acceptedFilesType]="acceptedFilesType"
                 [multipleFiles]="multipleFileUpload"

demo-shell/src/app/components/files/files.component.scss

@@ -164,8 +164,8 @@
     @media (max-device-width: 1024px) {
         adf-document-list .adf-data-table {
 
-            .adf-data-table-cell:nth-child(4),
-            .adf-datatable-table-cell-header:nth-child(4) {
+            .adf-data-table-cell:nth-child(5),
+            .adf-datatable-table-cell-header:nth-child(5) {
                 display: none;
             }
         }

demo-shell/src/app/components/files/files.component.ts

@@ -59,6 +59,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     fileNodeId: any;
     showViewer = false;
     showVersions = false;
+    allowDropFiles = true;
     displayMode = DisplayMode.List;
     includeFields = ['isFavorite', 'isLocked', 'aspectNames'];
 
@@ -227,6 +228,11 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.documentList.reload();
     }
 
+    toggleAllowDropFiles() {
+        this.allowDropFiles = !this.allowDropFiles;
+        this.documentList.reload();
+    }
+
     ngOnInit() {
         if (!this.pagination) {
             this.pagination = <Pagination> {
@@ -340,7 +346,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     openSnackMessage(event: any) {
         this.notificationService.openSnackMessage(
             event,
-            4000
+            6000
         );
     }
 

demo-shell/src/app/components/header-data/header-data.component.html

@@ -53,6 +53,20 @@
                 <mat-radio-button value="end">End</mat-radio-button>
             </mat-radio-group>
         </div>
+        <br>
+        <br>
+        <section>
+            <mat-slide-toggle id="adf-hide-sidenav" [color]="'primary'" (click)="changeSidenavVisibility()">
+                Hide Sidebar
+            </mat-slide-toggle>
+        </section>
+
+        <div>
+            <mat-radio-group [(ngModel)]="position" (change)="changePosition()">
+                <mat-radio-button value="start">Start</mat-radio-button>
+                <mat-radio-button value="end">End</mat-radio-button>
+            </mat-radio-group>
+        </div>
 
     </mat-card>
 </div>

demo-shell/src/app/components/header-data/header-data.component.ts

@@ -25,6 +25,7 @@ import { HeaderDataService } from './header-data.service';
 export class HeaderDataComponent {
     checkbox = true;
     position = 'start';
+    hideSidenavToggle = false;
 
     constructor(private headerService: HeaderDataService) {
     }
@@ -65,4 +66,9 @@ export class HeaderDataComponent {
     changePosition() {
         this.headerService.changePosition(this.position);
     }
+
+    changeSidenavVisibility() {
+        this.hideSidenavToggle = !this.hideSidenavToggle;
+        this.headerService.changeSidenavVisibility(this.hideSidenavToggle);
+    }
 }

demo-shell/src/app/components/header-data/header-data.service.ts

@@ -29,6 +29,7 @@ export class HeaderDataService {
     @Output() redirectUrl: EventEmitter<string | any[]> = new EventEmitter();
     @Output() tooltip: EventEmitter<string> = new EventEmitter();
     @Output() position: EventEmitter<string> = new EventEmitter();
+    @Output() hideSidenav: EventEmitter<string> = new EventEmitter();
 
     hideMenuButton() {
         this.show = !this.show;
@@ -59,4 +60,8 @@ export class HeaderDataService {
     changePosition(position) {
         this.position.emit(position);
     }
+
+    changeSidenavVisibility(hideSidenav) {
+        this.hideSidenav.emit(hideSidenav);
+    }
 }

demo-shell/src/app/components/process-service/process-service.component.html

@@ -48,6 +48,7 @@
                         (success)="onSuccessTaskList($event)"
                         (row-click)="onRowClick($event)"
                         (row-dblclick)="onTaskRowDblClick($event)"
+                        [multiselect]="multiSelectTask"
                         #taskList>
                         <!-- Custom column definition demo -->
 
@@ -153,6 +154,7 @@
                         [sort]="processFilter?.filter?.sort"
                         (rowClick)="onProcessRowClick($event)"
                         (row-dblclick)="onProcessRowDblClick($event)"
+                        [multiselect]="multiSelectProcess"
                         (success)="onSuccessProcessList($event)">
                         <!-- Custom column definition demo -->
 
@@ -257,6 +259,12 @@
                 <div>
                     <mat-slide-toggle id="adf-show-header" (change)="toggleHeaderContent()" [checked]="showHeaderContent">{{ 'PS-TAB.TASK-SHOW-HEADER'| translate }}</mat-slide-toggle>
                 </div>
+                <div>
+                    <mat-slide-toggle id="adf-process-multiselect"  (change)="toggleTasProcesssMultiselect()" [checked]="multiSelectProcess">Multiselect Process List</mat-slide-toggle>
+                </div>
+                <div>
+                    <mat-slide-toggle id="adf-task-multiselect"  (change)="toggleTaskMultiselect()" [checked]="multiSelectTask">Multiselect Task List</mat-slide-toggle>
+                </div>
             </div>
         </div>
     </mat-tab>

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -118,6 +118,8 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     changePageSize: EventEmitter<Pagination> = new EventEmitter();
 
     selectFirstReport = false;
+    multiSelectTask = false;
+    multiSelectProcess = false;
 
     private tabs = { tasks: 0, processes: 1, reports: 2 };
 
@@ -505,7 +507,16 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     changeTaskFilterIcon() {
         this.showTaskFilterIcon = !this.showTaskFilterIcon;
     }
+
     changeProcessFilterIcon() {
         this.showProcessFilterIcon = !this.showProcessFilterIcon;
     }
+
+    toggleTasProcesssMultiselect() {
+        this.multiSelectProcess = !this.multiSelectProcess;
+    }
+
+    toggleTaskMultiselect() {
+        this.multiSelectTask = !this.multiSelectTask;
+    }
 }