[ADF-3643] Viewer shows both sidebar icons (#3852)

* Viewer shows both sidebar icons

* update readme

* add config editor for start-process

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

@@ -20,6 +20,27 @@
                 <mat-icon>info</mat-icon>
             </button>
         </mat-list-item>
+
+        <mat-list-item (click)="taskHeaderConfClick()">
+            <a matLine id="adf-task-conf" >Task header</a>
+            <button mat-icon-button>
+                <mat-icon>info</mat-icon>
+            </button>
+        </mat-list-item>
+
+        <mat-list-item (click)="processInstanceHeaderConfClick()">
+            <a matLine id="adf-process-conf" >Process instance Header</a>
+            <button mat-icon-button>
+                <mat-icon>info</mat-icon>
+            </button>
+        </mat-list-item>
+
+        <mat-list-item (click)="startProcessConfClick()">
+            <a matLine id="adf-start-process-conf">Start process</a>
+            <button mat-icon-button>
+                <mat-icon>info</mat-icon>
+            </button>
+        </mat-list-item>
     </mat-nav-list>
 
     <div>

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

@@ -87,6 +87,24 @@ export class ConfigEditorComponent {
         this.indentCode();
     }
 
+    taskHeaderConfClick() {
+        this.code = JSON.stringify(this.appConfig.config['adf-task-header']);
+        this.field = 'adf-task-header';
+        this.indentCode();
+    }
+
+    processInstanceHeaderConfClick() {
+        this.code = JSON.stringify(this.appConfig.config['adf-process-instance-header']);
+        this.field = 'adf-process-instance-header';
+        this.indentCode();
+    }
+
+    startProcessConfClick() {
+        this.code = JSON.stringify(this.appConfig.config['adf-start-process']);
+        this.field = 'adf-start-process';
+        this.indentCode();
+    }
+
     indentCode() {
         setTimeout(() => {
             this.editor.getAction('editor.action.formatDocument').run();

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

@@ -224,7 +224,17 @@
                         [color]="'primary'"
                         (change)="toggleAllowSidebar()"
                         [checked]="allowSidebar">
-                        Allow Sidebar
+                        Allow Right Sidebar
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-switch-allowLeftSidebar"
+                        [color]="'primary'"
+                        (change)="toggleAllowLeftSidebar()"
+                        [checked]="allowLeftSidebar">
+                        Allow Left Sidebar
                     </mat-slide-toggle>
                 </p>
 
@@ -268,6 +278,7 @@
         [allowPrint]="allowPrint"
         [allowDownload]="allowDownload"
         [allowSidebar]="allowSidebar"
+        [allowLeftSidebar]="allowLeftSidebar"
         [urlFile]="urlFile"
         [sidebarLeftTemplate]="sidebarLeftTemplate"
         [sidebarTemplate]="sidebarRightTemplate">

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

@@ -45,6 +45,7 @@ export class FileViewComponent implements OnInit {
     allowPrint = true;
     allowShare = true;
     allowSidebar = true;
+    allowLeftSidebar = true;
     moreActions = true;
     customName = false;
     fileUrlSwitch = false;
@@ -136,6 +137,10 @@ export class FileViewComponent implements OnInit {
         this.allowSidebar = !this.allowSidebar;
     }
 
+    toggleAllowLeftSidebar() {
+        this.allowLeftSidebar = !this.allowLeftSidebar;
+    }
+
     toggleCustomName() {
         this.customName = !this.customName;
 

docs/core/viewer.component.md

@@ -78,10 +78,11 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 | allowDownload | `boolean` | true | Toggles downloading. |
 | allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
 | allowGoBack | `boolean` | true | Allows `back` navigation |
+| allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
 | allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
 | allowPrint | `boolean` | false | Toggles printing. |
 | allowShare | `boolean` | false | (**Deprecated:** 2.5.0 - inject the share button directive as custom button) Toggles sharing. |
-| allowSidebar | `boolean` | false | Toggles the sidebar. |
+| allowSidebar | `boolean` | false | (**Deprecated:** 2.5.0 - will be renamed  allowRightSidebar in 3.0.0) Allow the right sidebar. |
 | allowThumbnails | `boolean` | true | Toggles PDF thumbnails. |
 | blobFile | [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) |  | Loads a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) File |
 | canNavigateBefore | `boolean` | true | Toggles the "before" ("<") button. Requires `allowNavigate` to be enabled. |

lib/core/viewer/components/viewer.component.html

@@ -10,7 +10,7 @@
 
                 <adf-toolbar-title>
 
-                    <ng-container *ngIf="allowSidebar">
+                    <ng-container *ngIf="allowLeftSidebar">
                         <button
                             mat-icon-button
                             title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
@@ -151,7 +151,7 @@
                 </div>
             </ng-container>
 
-            <ng-container *ngIf="allowSidebar && showLeftSidebar">
+            <ng-container *ngIf="allowLeftSidebar && showLeftSidebar">
                 <div class="adf-viewer__sidebar" [ngClass]="'adf-viewer__sidebar__left'" fxFlexOrder="1"  id="adf-left-sidebar" >
                     <ng-container *ngIf="sidebarLeftTemplate">
                         <ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext"></ng-container>

lib/core/viewer/components/viewer.component.spec.ts

@@ -285,7 +285,7 @@ describe('ViewerComponent', () => {
 
             it('should NOT display left sidebar if is not allowed', (done) => {
                 component.showLeftSidebar = true;
-                component.allowSidebar = false;
+                component.allowLeftSidebar = false;
                 fixture.detectChanges();
 
                 fixture.whenStable().then(() => {
@@ -297,7 +297,7 @@ describe('ViewerComponent', () => {
             });
 
             it('should display sidebar on the left side', (done) => {
-                component.allowSidebar = true;
+                component.allowLeftSidebar = true;
                 component.showLeftSidebar = true;
                 fixture.detectChanges();
 
@@ -315,27 +315,36 @@ describe('ViewerComponent', () => {
                 expect(element.querySelector('[data-automation-id="adf-toolbar-fullscreen"]')).toBeDefined();
             });
 
-            it('should not render fullscreen button', () => {
+            it('should not render fullscreen button', (done) => {
                 component.allowFullScreen = false;
                 fixture.detectChanges();
 
-                expect(element.querySelector('[data-automation-id="adf-toolbar-fullscreen"]')).toBeNull();
+                fixture.whenStable().then(() => {
+                    expect(element.querySelector('[data-automation-id="adf-toolbar-fullscreen"]')).toBeNull();
+                    done();
+                });
             });
 
-            it('should render default download button', () => {
+            it('should render default download button', (done) => {
                 component.allowDownload = true;
 
-                expect(element.querySelector('[data-automation-id="adf-toolbar-download"]')).toBeDefined();
+                fixture.whenStable().then(() => {
+                    expect(element.querySelector('[data-automation-id="adf-toolbar-download"]')).toBeDefined();
+                    done();
+                });
             });
 
-            it('should not render default download button', () => {
+            it('should not render default download button', (done) => {
                 component.allowDownload = false;
                 fixture.detectChanges();
 
-                expect(element.querySelector('[data-automation-id="adf-toolbar-download"]')).toBeNull();
+                fixture.whenStable().then(() => {
+                    expect(element.querySelector('[data-automation-id="adf-toolbar-download"]')).toBeNull();
+                    done();
+                });
             });
 
-            it('should invoke download action with the toolbar button', () => {
+            it('should invoke download action with the toolbar button', (done) => {
                 component.allowDownload = true;
                 spyOn(component, 'downloadContent').and.stub();
                 fixture.detectChanges();
@@ -343,7 +352,10 @@ describe('ViewerComponent', () => {
                 const button: HTMLButtonElement = element.querySelector('[data-automation-id="adf-toolbar-download"]') as HTMLButtonElement;
                 button.click();
 
-                expect(component.downloadContent).toHaveBeenCalled();
+                fixture.whenStable().then(() => {
+                    expect(component.downloadContent).toHaveBeenCalled();
+                    done();
+                });
             });
 
             it('should raise download event with the toolbar button', async(() => {
@@ -358,21 +370,27 @@ describe('ViewerComponent', () => {
                 button.click();
             }));
 
-            it('should render default print button', () => {
+            it('should render default print button', (done) => {
                 component.allowPrint = true;
                 fixture.detectChanges();
 
-                expect(element.querySelector('[data-automation-id="adf-toolbar-print"]')).toBeDefined();
+                fixture.whenStable().then(() => {
+                    expect(element.querySelector('[data-automation-id="adf-toolbar-print"]')).toBeDefined();
+                    done();
+                });
             });
 
-            it('should not render default print button', () => {
+            it('should not render default print button', (done) => {
                 component.allowPrint = false;
                 fixture.detectChanges();
 
-                expect(element.querySelector('[data-automation-id="adf-toolbar-print"]')).toBeNull();
+                fixture.whenStable().then(() => {
+                    expect(element.querySelector('[data-automation-id="adf-toolbar-print"]')).toBeNull();
+                    done();
+                });
             });
 
-            it('should invoke print action with the toolbar button', () => {
+            it('should invoke print action with the toolbar button', (done) => {
                 component.allowPrint = true;
                 fixture.detectChanges();
 
@@ -381,7 +399,10 @@ describe('ViewerComponent', () => {
                 const button: HTMLButtonElement = element.querySelector('[data-automation-id="adf-toolbar-print"]') as HTMLButtonElement;
                 button.click();
 
-                expect(component.printContent).toHaveBeenCalled();
+                fixture.whenStable().then(() => {
+                    expect(component.printContent).toHaveBeenCalled();
+                    done();
+                });
             });
 
             it('should raise the print event with the toolbar button', async(() => {
@@ -396,21 +417,27 @@ describe('ViewerComponent', () => {
                 button.click();
             }));
 
-            it('should render default share button', () => {
+            it('should render default share button', (done) => {
                 component.allowShare = true;
                 fixture.detectChanges();
 
-                expect(element.querySelector('[data-automation-id="adf-toolbar-share"]')).toBeDefined();
+                fixture.whenStable().then(() => {
+                    expect(element.querySelector('[data-automation-id="adf-toolbar-share"]')).toBeDefined();
+                    done();
+                });
             });
 
-            it('should not render default share button', () => {
+            it('should not render default share button', (done) => {
                 component.allowShare = false;
                 fixture.detectChanges();
 
-                expect(element.querySelector('[data-automation-id="adf-toolbar-share"]')).toBeNull();
+                fixture.whenStable().then(() => {
+                    expect(element.querySelector('[data-automation-id="adf-toolbar-share"]')).toBeNull();
+                    done();
+                });
             });
 
-            it('should invoke share action with the toolbar button', () => {
+            it('should invoke share action with the toolbar button', (done) => {
                 component.allowShare = true;
                 fixture.detectChanges();
 
@@ -419,7 +446,10 @@ describe('ViewerComponent', () => {
                 const button: HTMLButtonElement = element.querySelector('[data-automation-id="adf-toolbar-share"]') as HTMLButtonElement;
                 button.click();
 
-                expect(component.shareContent).toHaveBeenCalled();
+                fixture.whenStable().then(() => {
+                    expect(component.shareContent).toHaveBeenCalled();
+                    done();
+                });
             });
 
             it('should raise share event with the toolbar button', async(() => {
@@ -467,17 +497,25 @@ describe('ViewerComponent', () => {
                     });
                 });
 
-                it('should Click on close button hide the viewer', () => {
+                it('should Click on close button hide the viewer', (done) => {
                     let closebutton: any = element.querySelector('.adf-viewer-close-button');
                     closebutton.click();
                     fixture.detectChanges();
-                    expect(element.querySelector('.adf-viewer-content')).toBeNull();
+
+                    fixture.whenStable().then(() => {
+                        expect(element.querySelector('.adf-viewer-content')).toBeNull();
+                        done();
+                    });
                 });
 
-                it('should Esc button hide the viewer', () => {
+                it('should Esc button hide the viewer', (done) => {
                     EventMock.keyUp(27);
                     fixture.detectChanges();
-                    expect(element.querySelector('.adf-viewer-content')).toBeNull();
+
+                    fixture.whenStable().then(() => {
+                        expect(element.querySelector('.adf-viewer-content')).toBeNull();
+                        done();
+                    });
                 });
             });
 
@@ -488,10 +526,14 @@ describe('ViewerComponent', () => {
                     fixture.detectChanges();
                 });
 
-                it('should Esc button not hide the viewer if is not overlay mode', () => {
+                it('should Esc button not hide the viewer if is not overlay mode', (done) => {
                     EventMock.keyDown(27);
                     fixture.detectChanges();
-                    expect(element.querySelector('.adf-viewer-content')).not.toBeNull();
+
+                    fixture.whenStable().then(() => {
+                        expect(element.querySelector('.adf-viewer-content')).not.toBeNull();
+                        done();
+                    });
                 });
             });
         });
@@ -541,7 +583,7 @@ describe('ViewerComponent', () => {
 
         describe('Extension Type Test', () => {
 
-            it('should  extension file pdf  be loaded', async(() => {
+            it('should  extension file pdf  be loaded', (done) => {
                 component.urlFile = 'fake-test-file.pdf';
                 component.ngOnChanges(null);
                 fixture.detectChanges();
@@ -549,10 +591,11 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('adf-pdf-viewer')).not.toBeNull();
+                    done();
                 });
-            }));
+            });
 
-            it('should  extension file png be loaded', async(() => {
+            it('should  extension file png be loaded', (done) => {
                 component.urlFile = 'fake-url-file.png';
                 component.ngOnChanges(null);
                 fixture.detectChanges();
@@ -560,10 +603,11 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('#viewer-image')).not.toBeNull();
+                    done();
                 });
-            }));
+            });
 
-            it('should extension file mp4 be loaded', async(() => {
+            it('should extension file mp4 be loaded', (done) => {
                 component.urlFile = 'fake-url-file.mp4';
                 component.ngOnChanges(null);
                 fixture.detectChanges();
@@ -571,10 +615,11 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('adf-media-player')).not.toBeNull();
+                    done();
                 });
-            }));
+            });
 
-            it('should extension file mp3 be loaded', async(() => {
+            it('should extension file mp3 be loaded', (done) => {
                 component.urlFile = 'fake-url-file.mp3';
                 component.ngOnChanges(null);
                 fixture.detectChanges();
@@ -582,10 +627,11 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('adf-media-player')).not.toBeNull();
+                    done();
                 });
-            }));
+            });
 
-            it('should extension file wav be loaded', async(() => {
+            it('should extension file wav be loaded', (done) => {
                 component.urlFile = 'fake-url-file.wav';
                 component.ngOnChanges(null);
                 fixture.detectChanges();
@@ -593,10 +639,11 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('adf-media-player')).not.toBeNull();
+                    done();
                 });
-            }));
+            });
 
-            it('should extension file txt be loaded', async(() => {
+            it('should extension file txt be loaded', (done) => {
                 component.urlFile = 'fake-test-file.txt';
                 component.ngOnChanges(null);
                 fixture.detectChanges();
@@ -604,10 +651,11 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('adf-txt-viewer')).not.toBeNull();
+                    done();
                 });
-            }));
+            });
 
-            it('should display [unknown format] for unsupported extensions', async(() => {
+            it('should display [unknown format] for unsupported extensions', (done) => {
                 component.urlFile = 'fake-url-file.unsupported';
                 component.mimeType = '';
                 component.ngOnChanges(null);
@@ -616,13 +664,14 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('adf-viewer-unknown-format')).toBeDefined();
+                    done();
                 });
-            }));
+            });
         });
 
         describe('error handling', () => {
 
-            it('should show unknown view when node file not found', async(() => {
+            it('should show unknown view when node file not found', (done) => {
                 spyOn(alfrescoApiService.getInstance().nodes, 'getNodeInfo')
                     .and.returnValue(Promise.reject({}));
 
@@ -634,10 +683,11 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('adf-viewer-unknown-format')).not.toBeNull();
+                    done();
                 });
-            }));
+            });
 
-            it('should show unknown view when sharedLink file not found', async(() => {
+            it('should show unknown view when sharedLink file not found', (done) => {
                 spyOn(alfrescoApiService.getInstance().core.sharedlinksApi, 'getSharedLink')
                     .and.returnValue(Promise.reject({}));
 
@@ -649,9 +699,10 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('adf-viewer-unknown-format')).not.toBeNull();
+                    done();
                 });
 
-            }));
+            });
 
             it('should raise an event when the shared link is invalid', (done) => {
                 spyOn(alfrescoApiService.getInstance().core.sharedlinksApi, 'getSharedLink')
@@ -672,7 +723,7 @@ describe('ViewerComponent', () => {
 
         describe('MimeType handling', () => {
 
-            it('should display a PDF file identified by mimetype when the filename has no extension', async(() => {
+            it('should display a PDF file identified by mimetype when the filename has no extension', (done) => {
                 component.urlFile = 'content';
                 component.mimeType = 'application/pdf';
                 fixture.detectChanges();
@@ -681,11 +732,12 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('adf-pdf-viewer')).not.toBeNull();
+                    done();
                 });
 
-            }));
+            });
 
-            it('should display a PDF file identified by mimetype when the file extension is wrong', async(() => {
+            it('should display a PDF file identified by mimetype when the file extension is wrong', (done) => {
                 component.urlFile = 'content.bin';
                 component.mimeType = 'application/pdf';
                 component.ngOnChanges(null);
@@ -693,10 +745,11 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('adf-pdf-viewer')).not.toBeNull();
+                    done();
                 });
-            }));
+            });
 
-            it('should display an image file identified by mimetype when the filename has no extension', async(() => {
+            it('should display an image file identified by mimetype when the filename has no extension', (done) => {
                 component.urlFile = 'content';
                 component.mimeType = 'image/png';
                 fixture.detectChanges();
@@ -705,10 +758,11 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('#viewer-image')).not.toBeNull();
+                    done();
                 });
-            }));
+            });
 
-            it('should display a image file identified by mimetype when the file extension is wrong', async(() => {
+            it('should display a image file identified by mimetype when the file extension is wrong', (done) => {
                 component.urlFile = 'content.bin';
                 component.mimeType = 'image/png';
                 fixture.detectChanges();
@@ -717,10 +771,11 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('#viewer-image')).not.toBeNull();
+                    done();
                 });
-            }));
+            });
 
-            it('should display the media player if the file identified by mimetype is a media when the filename has wrong extension', async(() => {
+            it('should display the media player if the file identified by mimetype is a media when the filename has wrong extension', (done) => {
                 component.urlFile = 'content.bin';
                 component.mimeType = 'video/mp4';
                 fixture.detectChanges();
@@ -729,8 +784,9 @@ describe('ViewerComponent', () => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(element.querySelector('adf-media-player')).not.toBeNull();
+                    done();
                 });
-            }));
+            });
 
             it('should display the txt viewer if the file identified by mimetype is a txt when the filename has wrong extension', (done) => {
                 component.urlFile = 'content.bin';

lib/core/viewer/components/viewer.component.ts

@@ -141,7 +141,13 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     canNavigateNext = true;
 
-    /** Toggles the sidebar. */
+    /** Allow the left the sidebar. */
+    @Input()
+    allowLeftSidebar = false;
+
+    /** Allow the right sidebar.
+     * @deprecated 2.5.0 - will be renamed  allowRightSidebar in 3.0.0
+     */
     @Input()
     allowSidebar = false;