[ADF-2563] Upload new version information dialog (#3235)

* add majorVersion param
move common part in base class

* refactor upload queue

* fix after refactoring

* add comment functionality in versioning
add minor and major option in versioning
add animation in versioning
add new functionality in demo shell

* add animation test

* add missing properties test and base upload class

* fix reload after new version upload [ADF-2582]

* update documentation

* update doc and fix minor style issues

* fix tslint error

* change cachebuster

* ADF-2672 version manager disable buttons

* [ADF-2649] hide show actions in version list

* fix tests

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

@@ -13,7 +13,8 @@
             <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.VERSIONS' | translate">
                 <mat-card>
                     <mat-card-content>
-                        <adf-version-manager [node]="node" (uploadError)="uploadError($event)">
+                        <adf-version-manager [node]="node"
+                                             (uploadError)="uploadError($event)">
                         </adf-version-manager>
                     </mat-card-content>
                 </mat-card>
@@ -21,7 +22,7 @@
         </adf-info-drawer>
     </ng-template>
 
-    <adf-viewer [fileNodeId]="nodeId" [allowSidebar]="true" [sidebarTemplate]="sidebarTemplate">
+    <adf-viewer [nodeId]="nodeId" [allowSidebar]="true" [sidebarTemplate]="sidebarTemplate">
 
         <adf-viewer-toolbar-actions>
             <button mat-icon-button>

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

@@ -0,0 +1,3 @@
+.adf-viewer__sidebar {
+    width: 380px !important;
+}

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

@@ -15,24 +15,26 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AlfrescoApiService } from '@alfresco/adf-core';
 import { MatSnackBar } from '@angular/material';
 
 @Component({
     selector: 'app-file-view',
-    templateUrl: 'file-view.component.html'
+    templateUrl: 'file-view.component.html',
+    styleUrls: ['file-view.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class FileViewComponent implements OnInit {
 
     nodeId: string = null;
 
-    constructor(
+    constructor(private router: Router,
-        private router: Router,
+                private route: ActivatedRoute,
-        private route: ActivatedRoute,
+                private snackBar: MatSnackBar,
-        private snackBar: MatSnackBar,
+                private apiService: AlfrescoApiService) {
-        private apiService: AlfrescoApiService) {}
+    }
 
     ngOnInit() {
 
@@ -53,7 +55,7 @@ export class FileViewComponent implements OnInit {
         });
     }
 
-    uploadError(errorMessage: string) {
+    onUploadError(errorMessage: string) {
         this.snackBar.open(errorMessage, '', { duration: 4000 });
     }
 }

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

@@ -35,7 +35,7 @@
     <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
         <adf-upload-drag-area fxFlex="1 1 auto"
                               [disabled]="disableDragArea"
-                              [parentId]="getDocumentListCurrentFolderId()"
+                              [rootFolderId]="getDocumentListCurrentFolderId()"
                               [versioning]="versioning"
                               [adf-node-permission]="'create'"
                               [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">

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

@@ -63,7 +63,7 @@
     }
 
     .adf-manage-versions-sidebar {
-        width: 300px !important;
+        width: 360px !important;
         color: rgba(0, 0, 0, 0.87);
 
         .adf-manage-versions-empty,
@@ -79,25 +79,12 @@
             }
         }
 
-        & ::ng-deep .adf-info-drawer-layout-header {
+        & .adf-info-drawer-layout-header {
-            display: none;
+            display: none !important;
         }
 
-        & ::ng-deep .adf-info-drawer-layout-content {
+        & .adf-info-drawer-layout-content {
-            padding: 0;
+            padding: 10px !important;
-
-            .adf-version-upload,
-            .adf-new-version-file-upload {
-                width: 100%;
-
-                & .mat-raised-button {
-                    width: 100%;
-                }
-            }
-
-            .adf-new-version-uploader-container {
-                padding: 8px 24px 16px 24px;
-            }
         }
     }
 
@@ -143,13 +130,13 @@
             .adf-datatable-table-cell-header {
                 display: none;
             }
-    
+
             .adf-data-table-cell:first-child,
             .adf-datatable-table-cell-header:first-child,
             .adf-data-table-cell:nth-child(2),
             .adf-datatable-table-cell-header:nth-child(2) {
                 display: table-cell;
-            }                 
+            }
         }
 
         .adf-site-container-style {
@@ -172,11 +159,11 @@
 
     @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) {
                 display: none;
-            }                 
+            }
         }
-    }    
+    }
 }

docs/content-services/upload-button.component.md

@@ -29,7 +29,9 @@ Activates a file upload.
 | Name | Type | Default value | Description |
 | -- | -- | -- | -- |
 | acceptedFilesType | `string` | "\*" | Filter for accepted file types. |
+| comment | `string` |  | When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history |
 | disabled | `boolean` | false | Toggles component disabled state (if there is no node permission checking). |
+| majorVersion | `boolean` | false | majorVersion boolean field to true to indicate a major version should be created. |
 | maxFilesSize | `number` |  | Sets a limit on the maximum size (in bytes) of a file to be uploaded. Has no effect if undefined. |
 | multipleFiles | `boolean` | false | Allows/disallows multiple files |
 | rootFolderId | `string` | "-root-" | The ID of the root. Use the nodeId for Content Services or the taskId/processId for Process Services. |
@@ -44,7 +46,7 @@ Activates a file upload.
 | -- | -- | -- |
 | createFolder | `EventEmitter<Object>` | Emitted when a folder is created. |
 | error | `EventEmitter<Object>` | Emitted when an error occurs. |
-| permissionEvent | `EventEmitter<PermissionModel>` | Emitted when delete permission is missing. |
+| permissionEvent | `EventEmitter<PermissionModel>` | Emitted when create permission is missing. |
 | success | `EventEmitter<Object>` | Emitted when the file is uploaded successfully. |
 
 ## Details

docs/content-services/upload-drag-area.component.md

@@ -36,13 +36,18 @@ export class AppComponent {
 | Name | Type | Default value | Description |
 | -- | -- | -- | -- |
 | acceptedFilesType | `string` | "\*" | Filter for accepted file types. |
-| disabled | `boolean` | false | Toggle component disabled state. |
+| comment | `string` |  | When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history |
-| parentId | `string` |  | ID of parent folder node. |
+| disabled | `boolean` | false | Toggles component disabled state (if there is no node permission checking). |
-| versioning | `boolean` | false | When false, renames the file using an integer suffix if there is a name clash. Set to true to indicate that a major version should be created instead. |
+| majorVersion | `boolean` | false | majorVersion boolean field to true to indicate a major version should be created. |
+| maxFilesSize | `number` |  | Sets a limit on the maximum size (in bytes) of a file to be uploaded. Has no effect if undefined. |
+| rootFolderId | `string` | "-root-" | The ID of the root. Use the nodeId for Content Services or the taskId/processId for Process Services. |
+| versioning | `boolean` | false | Toggles versioning. |
+| parentId | `` |  |  |
 
 ### Events
 
 | Name | Type | Description |
 | -- | -- | -- |
-| error | `EventEmitter<Object>` | Raised when the file upload goes in error. |
+| createFolder | `EventEmitter<Object>` | Emitted when a folder is created. |
-| success | `EventEmitter<Object>` | Emitted when the file is uploaded. |
+| error | `EventEmitter<Object>` | Emitted when an error occurs. |
+| success | `EventEmitter<Object>` | Emitted when the file is uploaded successfully. |

docs/content-services/version-list.component.md

@@ -22,7 +22,8 @@ Displays the version history of a node in a Version Manager component
 | allowDownload | `boolean` | true | Enable/disable possibility to download a version of the current node. |
 | id | `string` |  | **Deprecated:** in 2.3.0 |
 | node | `MinimalNodeEntryEntity` |  |  |
-| showComments | `boolean` | true |  |
+| showActions | `boolean` | true | show/hide version actions |
+| showComments | `boolean` | true | show/hide comments |
 
 ## Details
 

docs/core/viewer.component.md

@@ -14,9 +14,12 @@ See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
 
 -   [Basic usage](#basic-usage)
 
+-   [Class members](#class-members)
+
     -   [Properties](#properties)
     -   [Events](#events)
-    -   [Keyboard shortcuts](#keyboard-shortcuts)
+
+-   [Keyboard shortcuts](#keyboard-shortcuts)
 
 -   [Details](#details)
 
@@ -69,52 +72,55 @@ Note that if you have a URL which contains a shared link ID, you should extract
 ID portion and use it with the `sharedLinkId` property rather than using the whole
 URL with `urlFile`.
 
+## Class members
+
 ### Properties
 
 | Name | Type | Default value | Description |
-| ---- | ---- | ------------- | ----------- |
+| -- | -- | -- | -- |
-| urlFile | `string` | `''` | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
+| allowDownload | `boolean` | true | Toggles downloading. |
-| urlFileViewer | `string` | `null` | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. |
+| allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
-| blobFile | `Blob` |  | Loads a Blob File  |
+| allowGoBack | `boolean` | true | Allows `back` navigation |
-| fileNodeId | `string` | `null` | Node Id of the file to load.  |
+| allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
-| sharedLinkId | `string` | `null` | Shared link id (to display shared file).  |
+| allowPrint | `boolean` | false | Toggles printing. |
-| overlayMode | `boolean` | `false` | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
+| allowShare | `boolean` | false | Toggles sharing. |
-| showViewer | `boolean` | `true` | Hide or show the viewer  |
+| allowSidebar | `boolean` | false | Toggles the sidebar. |
-| showToolbar | `boolean` | `true` | Hide or show the toolbar  |
+| allowThumbnails | `boolean` | true | Toggles PDF thumbnails. |
-| displayName | `string` |  | Specifies the name of the file when it is not available from the URL.  |
+| blobFile | `Blob` |  | Loads a Blob File |
-| allowGoBack | `boolean` | `true` | Allows `back` navigation  |
+| canNavigateBefore | `boolean` | true | Toggles the "before" ("<") button. Requires `allowNavigate` to be enabled. |
-| allowDownload | `boolean` | `true` | Toggles downloading.  |
+| canNavigateNext | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled. |
-| allowPrint | `boolean` | `false` | Toggles printing.  |
+| displayName | `string` |  | Specifies the name of the file when it is not available from the URL. |
-| allowShare | `boolean` | `false` | Toggles sharing.  |
+| downloadUrl | `string` |  null | URL to download. |
-| allowFullScreen | `boolean` | `true` | Toggles the 'Full Screen' feature.  |
+| fileName | `string` |  | Content filename. |
-| allowNavigate | `boolean` | `false` | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
+| maxRetries | `number` | 5 | Number of times the Viewer will retry fetching content Rendition. There is a delay of at least one second between attempts. |
-| canNavigateBefore | `boolean` | `true` | Toggles the "before" ("<") button. Requires `allowNavigate` to be enabled.  |
+| mimeType | `string` |  | MIME type of the file content (when not determined by the filename extension). |
-| canNavigateNext | `boolean` | `true` | Toggles the next (">") button. Requires `allowNavigate` to be enabled.  |
+| nodeId | `string` |  null | Node Id of the file to load. |
-| allowSidebar | `boolean` | `false` | Toggles the sidebar.  |
+| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
-| allowThumbnails | `boolean` | `true` | Toggles PDF thumbnails.  |
+| sharedLinkId | `string` |  null | Shared link id (to display shared file). |
-| showSidebar | `boolean` | `false` | Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`.  |
+| showSidebar | `boolean` | false | Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. |
-| sidebarPosition | `string` | `'right'` | The position of the sidebar. Can be `left` or `right`.  |
+| showToolbar | `boolean` | true | Hide or show the toolbar |
-| sidebarTemplate | `TemplateRef<any>` | `null` | The template for the sidebar. The template context contains the loaded node data.  |
+| showViewer | `boolean` | true | Hide or show the viewer |
-| thumbnailsTemplate | `TemplateRef<any>` | `null` | The template for the pdf thumbnails.  |
+| sidebarPosition | `string` | "right" | The position of the sidebar. Can be `left` or `right`. |
-| mimeType | `string` |  | MIME type of the file content (when not determined by the filename extension).  |
+| sidebarTemplate | `TemplateRef<any>` |  null | The template for the sidebar. The template context contains the loaded node data. |
-| fileName | `string` |  | Content filename.  |
+| thumbnailsTemplate | `TemplateRef<any>` |  null | The template for the pdf thumbnails. |
-| downloadUrl | `string` | `null` | URL to download.  |
+| urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
-| maxRetries | `number` | `5` | Number of times the Viewer will retry fetching content Rendition. There is a delay of at least one second between attempts. |
+| urlFileViewer | `string` |  null | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. |
+| fileNodeId | `` |  | Node Id of the file to load. |
 
 ### Events
 
 | Name | Type | Description |
-| ---- | ---- | ----------- |
+| -- | -- | -- |
-| goBack | `EventEmitter<BaseEvent<any>>` | Emitted when user clicks the 'Back' button.  |
+| download | `any` | Emitted when user clicks the 'Download' button. |
-| download | `EventEmitter<BaseEvent<any>>` | Emitted when user clicks the 'Download' button.  |
+| extensionChange | `any` | Emitted when the filename extension changes. |
-| print | `EventEmitter<BaseEvent<any>>` | Emitted when user clicks the 'Print' button.  |
+| goBack | `any` | Emitted when user clicks the 'Back' button. |
-| share | `EventEmitter<BaseEvent<any>>` | Emitted when user clicks the 'Share' button.  |
+| navigateBefore | `any` | Emitted when user clicks 'Navigate Before' ("&lt;") button. |
-| showViewerChange | `EventEmitter<boolean>` | Emitted when the viewer is shown or hidden.  |
+| navigateNext | `any` | Emitted when user clicks 'Navigate Next' (">") button. |
-| extensionChange | `EventEmitter<string>` | Emitted when the filename extension changes.  |
+| print | `any` | Emitted when user clicks the 'Print' button. |
-| navigateBefore | `EventEmitter<{}>` | Emitted when user clicks 'Navigate Before' ("&lt;") button.  |
+| share | `any` | Emitted when user clicks the 'Share' button. |
-| navigateNext | `EventEmitter<{}>` | Emitted when user clicks 'Navigate Next' (">") button.  |
+| showViewerChange | `any` | Emitted when the viewer is shown or hidden. |
 
-### Keyboard shortcuts
+## Keyboard shortcuts
 
 | Name | Description |
 | ---- | ----------- |
@@ -467,4 +473,4 @@ You can define multiple `adf-viewer-extension` templates if required:
 
 ## See also
 
--   [Document List component](../content-services/document-list.component.md)
+-   [Document List component](../content-services/document-list.component.md)

lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -55,9 +55,9 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
 
     constructor(private contentMetadataService: ContentMetadataService,
                 private cardViewUpdateService: CardViewUpdateService,
-                private nodesApi: NodesApiService,
+                private nodesApiService: NodesApiService,
                 private logService: LogService,
-                private apiService: AlfrescoApiService) {}
+                private alfrescoApiService: AlfrescoApiService) {}
 
     ngOnInit() {
         this.cardViewUpdateService.itemUpdated$
@@ -66,7 +66,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
                 (node) => {
                     this.nodeHasBeenUpdated = true;
                     this.node = node;
-                    this.apiService.nodeUpdated.next(node);
+                    this.alfrescoApiService.nodeUpdated.next(node);
                 },
                 error => this.logService.error(error)
             );
@@ -84,6 +84,6 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
     }
 
     private saveNode({ changed: nodeBody }): Observable<MinimalNodeEntryEntity> {
-        return this.nodesApi.updateNode(this.node.id, nodeBody);
+        return this.nodesApiService.updateNode(this.node.id, nodeBody);
     }
 }

lib/content-services/i18n/en.json

@@ -6,7 +6,12 @@
       "DOWNLOAD": "Download",
       "UPLOAD": {
         "TITLE": "Upload new version",
-        "TOOLTIP": "Restriction: you must upload a file with the same name to create a new version of it"
+        "TOOLTIP": "Restriction: you must upload a file with the same name to create a new version of it",
+        "MAJOR": "major changes (2.0)",
+        "MINOR": "minor changes (1.1)",
+        "COMMENT": "Leave a comment",
+        "ADD": "Add New Version",
+        "CANCEL": "Cancel"
       }
     },
     "CONFIRM_DELETE": {
@@ -241,12 +246,12 @@
     }
   },
   "PERMISSION_MANAGER": {
-      "PERMISSION_DISPLAY": {
+    "PERMISSION_DISPLAY": {
-         "INHERITED" : "Inherited",
+      "INHERITED": "Inherited",
-         "AUTHORITY_ID" : "Authority ID",
+      "AUTHORITY_ID": "Authority ID",
-         "ROLE": "Role",
+      "ROLE": "Role",
-         "LOCALLY_SET" : "Locally set",
+      "LOCALLY_SET": "Locally set",
-         "NO_PERMISSIONS" : "No permissions"
+      "NO_PERMISSIONS": "No permissions"
-      }
+    }
   }
 }

lib/content-services/upload/components/base-upload/upload-base.spec.ts

@@ -0,0 +1,268 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslationService, UploadService, setupTestBed, CoreModule, FileModel } from '@alfresco/adf-core';
+import { UploadBase } from './upload-base';
+import { TranslationMock } from '@alfresco/adf-core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+@Component({
+    selector: 'adf-upload-button-test',
+    template: 'test componente';
+})
+
+export class UploadTestComponent extends UploadBase {
+
+    constructor(protected uploadService: UploadService,
+                protected translationService: TranslationService) {
+        super(uploadService, translationService);
+    }
+}
+
+describe('UploadBase', () => {
+
+    let component: UploadTestComponent;
+    let fixture: ComponentFixture<UploadTestComponent>;
+    let uploadService: UploadService;
+
+    setupTestBed({
+        imports: [
+            NoopAnimationsModule,
+            CoreModule.forRoot()
+        ],
+        declarations: [
+            UploadTestComponent
+        ],
+        providers: [
+            UploadService,
+            { provide: TranslationService, useClass: TranslationMock }
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(UploadTestComponent);
+        uploadService = TestBed.get(UploadService);
+
+        spyOn(FileModel.prototype, 'generateId').and.returnValue('test');
+
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    describe('filesize', () => {
+
+        const files: File[] = [
+            <File> { name: 'bigFile.png', size: 1000 },
+            <File> { name: 'smallFile.png', size: 10 }
+        ];
+
+        let addToQueueSpy;
+
+        beforeEach(() => {
+            addToQueueSpy = spyOn(uploadService, 'addToQueue');
+        });
+
+        it('should filter out file, which are too big if max file size is set', () => {
+            component.maxFilesSize = 100;
+
+            component.uploadFiles(files);
+
+            const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
+            expect(filesCalledWith.length).toBe(1);
+            expect(filesCalledWith[0].name).toBe('smallFile.png');
+        });
+
+        it('should filter out all files if maxFilesSize is 0', () => {
+            component.maxFilesSize = 0;
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy.calls.mostRecent()).toBeUndefined();
+        });
+
+        it('should allow file of 0 size when the max file size is set to 0', () => {
+            const zeroFiles: File[] = [
+                <File> { name: 'zeroFile.png', size: 0 }
+            ];
+            component.maxFilesSize = 0;
+
+            component.uploadFiles(zeroFiles);
+
+            expect(addToQueueSpy.calls.mostRecent()).toBeDefined();
+        });
+
+        it('should filter out all files if maxFilesSize is <0', () => {
+            component.maxFilesSize = -2;
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy.calls.mostRecent()).toBeUndefined();
+        });
+
+        it('should output an error when you try to upload a file too big', (done) => {
+            component.maxFilesSize = 100;
+
+            component.error.subscribe(() => {
+                done();
+            });
+
+            component.uploadFiles(files);
+        });
+
+        it('should not filter out files if max file size is not set', () => {
+            component.maxFilesSize = null;
+
+            component.uploadFiles(files);
+
+            const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
+            expect(filesCalledWith.length).toBe(2);
+        });
+    });
+
+    describe('uploadFiles', () => {
+
+        const files: File[] = [
+            <File> { name: 'phobos.jpg' },
+            <File> { name: 'deimos.png' },
+            <File> { name: 'ganymede.bmp' }
+        ];
+
+        let addToQueueSpy;
+
+        beforeEach(() => {
+            addToQueueSpy = spyOn(uploadService, 'addToQueue');
+        });
+
+        it('should filter out file, which is not part of the acceptedFilesType', () => {
+            component.acceptedFilesType = '.jpg';
+
+            component.uploadFiles(files);
+
+            const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
+            expect(filesCalledWith.length).toBe(1, 'Files should contain only one element');
+            expect(filesCalledWith[0].name).toBe('phobos.jpg', 'png file should be filtered out');
+        });
+
+        it('should filter out files, which are not part of the acceptedFilesType', () => {
+            component.acceptedFilesType = '.jpg,.png';
+
+            component.uploadFiles(files);
+
+            const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
+            expect(filesCalledWith.length).toBe(2, 'Files should contain two elements');
+            expect(filesCalledWith[0].name).toBe('phobos.jpg');
+            expect(filesCalledWith[1].name).toBe('deimos.png');
+        });
+
+        it('should not filter out anything if acceptedFilesType is wildcard', () => {
+            component.acceptedFilesType = '*';
+
+            component.uploadFiles(files);
+
+            const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
+            expect(filesCalledWith.length).toBe(3, 'Files should contain all elements');
+            expect(filesCalledWith[0].name).toBe('phobos.jpg');
+            expect(filesCalledWith[1].name).toBe('deimos.png');
+            expect(filesCalledWith[2].name).toBe('ganymede.bmp');
+        });
+
+        it('should not add any file to que if everything is filtered out', () => {
+            component.acceptedFilesType = 'doc';
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('Comments', () => {
+
+        let addToQueueSpy;
+
+        const files: File[] = [
+            <File> { name: 'phobos.jpg' }
+        ];
+
+        beforeEach(() => {
+            addToQueueSpy = spyOn(uploadService, 'addToQueue');
+        });
+
+        it('should add the comment in the uploaded files', () => {
+            component.comment = 'example-comment';
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy).toHaveBeenCalledWith(new FileModel(files[0], {
+                comment: 'example-comment'
+                newVersion: false,
+                majorVersion: false,
+                parentId: '-root-',
+                path: ''
+            }));
+        });
+    });
+
+    describe('Versions', () => {
+
+        let addToQueueSpy;
+
+        const files: File[] = [
+            <File> { name: 'phobos.jpg' }
+        ];
+
+        beforeEach(() => {
+            addToQueueSpy = spyOn(uploadService, 'addToQueue');
+        });
+
+        it('should be a mahor version upload if majorVersion is true', () => {
+            component.majorVersion = true;
+            component.versioning = true;
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy).toHaveBeenCalledWith(new FileModel(files[0], {
+                comment: undefined,
+                newVersion: true,
+                majorVersion: true,
+                parentId: '-root-',
+                path: ''
+            }));
+        });
+
+        it('should not  be a mahor version upload if majorVersion is false', () => {
+            component.majorVersion = false;
+            component.versioning = true;
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy).toHaveBeenCalledWith(new FileModel(files[0], {
+                comment: undefined,
+                newVersion: true,
+                majorVersion: false,
+                parentId: '-root-',
+                path: ''
+            }));
+        });
+    });
+});

lib/content-services/upload/components/base-upload/upload-base.ts

@@ -15,16 +15,98 @@
  * limitations under the License.
  */
 
-import { FileModel } from '@alfresco/adf-core';
+import { FileModel, FileInfo } from '@alfresco/adf-core';
-import { Input } from '@angular/core';
+import { EventEmitter, Input, Output } from '@angular/core';
+import { UploadService, TranslationService } from '@alfresco/adf-core';
 
 export abstract class UploadBase {
 
+    /** Sets a limit on the maximum size (in bytes) of a file to be uploaded.
+     * Has no effect if undefined.
+     */
+    @Input()
+    maxFilesSize: number;
+
+    /** The ID of the root. Use the nodeId for
+     * Content Services or the taskId/processId for Process Services.
+     */
+    @Input()
+    rootFolderId: string = '-root-';
+
+    /** Toggles component disabled state (if there is no node permission checking). */
+    @Input()
+    disabled: boolean = false;
+
     /** Filter for accepted file types. */
     @Input()
     acceptedFilesType: string = '*';
 
-    constructor() {}
+    /** Toggles versioning. */
+    @Input()
+    versioning: boolean = false;
+
+    /** majorVersion boolean field to true to indicate a major version should be created. */
+    @Input()
+    majorVersion: boolean = false;
+
+    /** When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history */
+    @Input()
+    comment: string;
+
+    /** Emitted when the file is uploaded successfully. */
+    @Output()
+    success = new EventEmitter();
+
+    /** @deprecated 2.4.0 */
+    /** Emitted when a folder is created. */
+    @Output()
+    createFolder = new EventEmitter();
+
+    /** Emitted when an error occurs. */
+    @Output()
+    error = new EventEmitter();
+
+    constructor(protected uploadService: UploadService,
+                protected translationService: TranslationService) {
+    }
+
+    /**
+     * Upload a list of file in the specified path
+     * @param files
+     * @param path
+     */
+    uploadFiles(files: File[]): void {
+        const filteredFiles: FileModel[] = files
+            .map<FileModel>((file: File) => {
+                return this.createFileModel(file, this.rootFolderId, (file.webkitRelativePath || '').replace(/\/[^\/]*$/, ''));
+            });
+
+        this.uploadQueue(filteredFiles);
+    }
+
+    uploadFilesInfo(files: FileInfo[]): void {
+        const filteredFiles: FileModel[] = files
+            .map<FileModel>((fileInfo: FileInfo) => {
+                return this.createFileModel(fileInfo.file, this.rootFolderId, fileInfo.relativeFolder);
+            });
+
+        this.uploadQueue(filteredFiles);
+    }
+
+    private uploadQueue(files: FileModel[]) {
+        let filteredFiles = files
+            .filter(this.isFileAcceptable.bind(this))
+            .filter(this.isFileSizeAcceptable.bind(this));
+
+        if (filteredFiles.length > 0) {
+            this.uploadService.addToQueue(...filteredFiles);
+            this.uploadService.uploadFilesInTheQueue(this.success);
+            this.uploadService.fileUploadError.subscribe((error) => {
+                this.error.emit(error);
+            });
+        }
+    }
+
     /**
      * Checks if the given file is allowed by the extension filters
      *
@@ -45,4 +127,56 @@ export abstract class UploadBase {
 
         return false;
     }
+
+    /**
+     * Creates FileModel from File
+     *
+     * @param file
+     */
+    protected createFileModel(file: File, parentId: string, path: string): FileModel {
+        return new FileModel(file, {
+            comment: this.comment,
+            majorVersion: this.majorVersion,
+            newVersion: this.versioning,
+            parentId: parentId,
+            path: path
+        });
+    }
+
+    protected isFileSizeAllowed(file: FileModel) {
+        let isFileSizeAllowed = true;
+        if (this.isMaxFileSizeDefined()) {
+            isFileSizeAllowed = this.isFileSizeCorrect(file);
+        }
+
+        return isFileSizeAllowed;
+    }
+
+    protected isMaxFileSizeDefined() {
+        return this.maxFilesSize !== undefined && this.maxFilesSize !== null;
+    }
+
+    protected isFileSizeCorrect(file: FileModel) {
+        return this.maxFilesSize >= 0 && file.size <= this.maxFilesSize;
+    }
+
+    /**
+     * Checks if the given file is an acceptable size
+     *
+     * @param file FileModel
+     */
+    private isFileSizeAcceptable(file: FileModel): boolean {
+        let acceptableSize = true;
+
+        if (!this.isFileSizeAllowed(file)) {
+            acceptableSize = false;
+
+            this.translationService.get('FILE_UPLOAD.MESSAGES.EXCEED_MAX_FILE_SIZE', { fileName: file.name }).subscribe((message: string) => {
+                this.error.emit(message);
+            });
+        }
+
+        return acceptableSize;
+    }
+
 }

lib/content-services/upload/components/upload-button.component.ts

@@ -15,11 +15,14 @@
  * limitations under the License.
  */
 
-import { ContentService, EXTENDIBLE_COMPONENT, FileModel, FileUtils,
+import {
-    LogService, NodePermissionSubject, TranslationService, UploadService
+    ContentService, EXTENDIBLE_COMPONENT, FileUtils,
+    LogService, NodePermissionSubject, TranslationService, UploadService, PermissionsEnum
 } from '@alfresco/adf-core';
-import { Component, EventEmitter, forwardRef, Input,
+import {
-    OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+    Component, EventEmitter, forwardRef, Input,
+    OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation
+} from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { PermissionModel } from '../../document-list/models/permissions.model';
 import 'rxjs/add/observable/throw';
@@ -36,10 +39,6 @@ import { UploadBase } from './base-upload/upload-base';
 })
 export class UploadButtonComponent extends UploadBase implements OnInit, OnChanges, NodePermissionSubject {
 
-    /** Toggles component disabled state (if there is no node permission checking). */
-    @Input()
-    disabled: boolean = false;
-
     /** Allows/disallows upload folders (only for Chrome). */
     @Input()
     uploadFolders: boolean = false;
@@ -48,16 +47,6 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
     @Input()
     multipleFiles: boolean = false;
 
-    /** Toggles versioning. */
-    @Input()
-    versioning: boolean = false;
-
-    /** Sets a limit on the maximum size (in bytes) of a file to be uploaded.
-     * Has no effect if undefined.
-     */
-    @Input()
-    maxFilesSize: number;
-
     /** Defines the text of the upload button. */
     @Input()
     staticTitle: string;
@@ -66,25 +55,7 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
     @Input()
     tooltip: string = null;
 
-    /** The ID of the root. Use the nodeId for
+    /** Emitted when create permission is missing. */
-     * Content Services or the taskId/processId for Process Services.
-     */
-    @Input()
-    rootFolderId: string = '-root-';
-
-    /** Emitted when the file is uploaded successfully. */
-    @Output()
-    success = new EventEmitter();
-
-    /** Emitted when an error occurs. */
-    @Output()
-    error = new EventEmitter();
-
-    /** Emitted when a folder is created. */
-    @Output()
-    createFolder = new EventEmitter();
-
-    /** Emitted when delete permission is missing. */
     @Output()
     permissionEvent: EventEmitter<PermissionModel> = new EventEmitter<PermissionModel>();
 
@@ -92,12 +63,11 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
 
     private permissionValue: Subject<boolean> = new Subject<boolean>();
 
-    constructor(private uploadService: UploadService,
+    constructor(protected uploadService: UploadService,
                 private contentService: ContentService,
-                protected translateService: TranslationService,
+                protected translationService: TranslationService,
-                protected logService: LogService
+                protected logService: LogService) {
-            ) {
+        super(uploadService, translationService);
-                super();
     }
 
     ngOnInit() {
@@ -123,7 +93,7 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
         if (this.hasPermission) {
             this.uploadFiles(files);
         } else {
-            this.permissionEvent.emit(new PermissionModel({type: 'content', action: 'upload', permission: 'create'}));
+            this.permissionEvent.emit(new PermissionModel({ type: 'content', action: 'upload', permission: 'create' }));
         }
         // reset the value of the input file
         $event.target.value = '';
@@ -134,73 +104,12 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
             let files: File[] = FileUtils.toFileArray($event.currentTarget.files);
             this.uploadFiles(files);
         } else {
-            this.permissionEvent.emit(new PermissionModel({type: 'content', action: 'upload', permission: 'create'}));
+            this.permissionEvent.emit(new PermissionModel({ type: 'content', action: 'upload', permission: 'create' }));
         }
         // reset the value of the input file
         $event.target.value = '';
     }
 
-    /**
-     * Upload a list of file in the specified path
-     * @param files
-     * @param path
-     */
-    uploadFiles(files: File[]): void {
-        const latestFilesAdded: FileModel[] = files
-            .map<FileModel>(this.createFileModel.bind(this))
-            .filter(this.isFileAcceptable.bind(this))
-            .filter(this.isFileSizeAcceptable.bind(this));
-
-        if (latestFilesAdded.length > 0) {
-            this.uploadService.addToQueue(...latestFilesAdded);
-            this.uploadService.uploadFilesInTheQueue(this.success);
-        }
-    }
-
-    /**
-     * Creates FileModel from File
-     *
-     * @param file
-     */
-    protected createFileModel(file: File): FileModel {
-        return new FileModel(file, {
-            newVersion: this.versioning,
-            parentId: this.rootFolderId,
-            path: (file.webkitRelativePath || '').replace(/\/[^\/]*$/, '')
-        });
-    }
-
-    /**
-     * Checks if the given file is an acceptable size
-     *
-     * @param file FileModel
-     */
-    private isFileSizeAcceptable(file: FileModel): boolean {
-        let acceptableSize = true;
-
-        if (this.isFileSizeAllowed(file)) {
-            acceptableSize = false;
-
-            this.translateService.get('FILE_UPLOAD.MESSAGES.EXCEED_MAX_FILE_SIZE', {fileName: file.name}).subscribe((message: string) => {
-                this.error.emit(message);
-            });
-        }
-
-        return acceptableSize;
-    }
-
-    private isFileSizeAllowed(file: FileModel) {
-        return this.isMaxFileSizeDefined() && this.isFileSizeCorrect(file);
-    }
-
-    private isMaxFileSizeDefined() {
-        return this.maxFilesSize !== undefined && this.maxFilesSize !== null;
-    }
-
-    private isFileSizeCorrect(file: FileModel) {
-        return this.maxFilesSize < 0 || file.size > this.maxFilesSize;
-    }
-
     checkPermission() {
         if (this.rootFolderId) {
             let opts: any = {
@@ -209,16 +118,9 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
             };
 
             this.contentService.getNode(this.rootFolderId, opts).subscribe(
-                res => this.permissionValue.next(this.hasCreatePermission(res.entry)),
+                res => this.permissionValue.next(this.contentService.hasPermission(res.entry, PermissionsEnum.CREATE)),
                 error => this.error.emit(error)
             );
         }
     }
-
-    private hasCreatePermission(node: any): boolean {
-        if (node && node.allowableOperations) {
-            return node.allowableOperations.find(permission => permission === 'create') ? true : false;
-        }
-        return false;
-    }
 }

lib/content-services/upload/components/upload-drag-area.component.ts

@@ -16,23 +16,17 @@
  */
 
 import {
-    EXTENDIBLE_COMPONENT,
+    EXTENDIBLE_COMPONENT, FileInfo, FileModel, FileUtils, NodePermissionSubject,
-    FileInfo,
+    NotificationService, TranslationService, UploadService, ContentService, PermissionsEnum
-    FileModel,
-    FileUtils,
-    NodePermissionSubject,
-    NotificationService,
-    TranslationService,
-    UploadService
 } from '@alfresco/adf-core';
-import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } from '@angular/core';
+import { Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
 import { UploadBase } from './base-upload/upload-base';
 
 @Component({
     selector: 'adf-upload-drag-area',
     templateUrl: './upload-drag-area.component.html',
     styleUrls: ['./upload-drag-area.component.css'],
-    host: {'class': 'adf-upload-drag-area'},
+    host: { 'class': 'adf-upload-drag-area' },
     viewProviders: [
         { provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent) }
     ],
@@ -40,32 +34,17 @@ import { UploadBase } from './base-upload/upload-base';
 })
 export class UploadDragAreaComponent extends UploadBase implements NodePermissionSubject {
 
-    /** Toggle component disabled state. */
+    /** @deprecaretd 2.4.0  use rootFolderId ID of parent folder node. */
     @Input()
-    disabled: boolean = false;
+    set parentId(nodeId: string) {
+        this.rootFolderId = nodeId;
+    }
 
-    /** When false, renames the file using an integer suffix if there is a name clash.
+    constructor(protected uploadService: UploadService,
-     * Set to true to indicate that a major version should be created instead.
+                protected translationService: TranslationService,
-     */
+                private notificationService: NotificationService,
-    @Input()
+                private contentService: ContentService) {
-    versioning: boolean = false;
+        super(uploadService, translationService);
-
-    /** ID of parent folder node. */
-    @Input()
-    parentId: string;
-
-    /** Emitted when the file is uploaded. */
-    @Output()
-    success = new EventEmitter();
-
-    /** Raised when the file upload goes in error. */
-    @Output()
-    error = new EventEmitter();
-
-    constructor(private uploadService: UploadService,
-                private translateService: TranslationService,
-                private notificationService: NotificationService) {
-                    super();
     }
 
     /**
@@ -75,12 +54,7 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
      */
     onFilesDropped(files: File[]): void {
         if (!this.disabled && files.length) {
-            const fileModels = files.map(file => new FileModel(file, {
+            this.uploadFiles(files);
-                newVersion: this.versioning,
-                path: '/',
-                parentId: this.parentId
-            })).filter(this.isFileAcceptable.bind(this));
-            this.addNodeInUploadQueue(fileModels);
         }
     }
 
@@ -92,14 +66,9 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
     onFilesEntityDropped(item: any): void {
         if (!this.disabled) {
             item.file((file: File) => {
-                const fileModel = new FileModel(file, {
+                // const fileModel = this.createFileModel(file, this.rootFolderId, item.fullPath.replace(item.name, ''));
-                    newVersion: this.versioning,
+
-                    parentId: this.parentId,
+                this.uploadFiles([file]);
-                    path: item.fullPath.replace(item.name, '')
-                });
-                if (this.isFileAcceptable(fileModel)) {
-                    this.addNodeInUploadQueue([fileModel]);
-                }
             });
         }
     }
@@ -111,29 +80,12 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
      */
     onFolderEntityDropped(folder: any): void {
         if (!this.disabled && folder.isDirectory) {
-            FileUtils.flattern(folder).then(entries => {
+            FileUtils.flattern(folder).then(filesInfo => {
-                let files = entries.map(entry => {
+                this.uploadFilesInfo(filesInfo);
-                    return new FileModel(entry.file, {
-                        newVersion: this.versioning,
-                        parentId: this.parentId,
-                        path: entry.relativeFolder
-                    });
-                }).filter(this.isFileAcceptable.bind(this));
-                this.addNodeInUploadQueue(files);
             });
         }
     }
 
-    private addNodeInUploadQueue(files: FileModel[]) {
-        if (files.length) {
-            this.uploadService.addToQueue(...files);
-            this.uploadService.uploadFilesInTheQueue(this.success);
-            this.uploadService.fileUploadError.subscribe((error) => {
-                this.error.emit(error);
-                });
-        }
-    }
-
     /**
      * Show undo notification bar.
      *
@@ -141,8 +93,8 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
      */
     showUndoNotificationBar(latestFilesAdded: FileModel[]) {
         let messageTranslate: any, actionTranslate: any;
-        messageTranslate = this.translateService.get('FILE_UPLOAD.MESSAGES.PROGRESS');
+        messageTranslate = this.translationService.get('FILE_UPLOAD.MESSAGES.PROGRESS');
-        actionTranslate = this.translateService.get('FILE_UPLOAD.ACTION.UNDO');
+        actionTranslate = this.translationService.get('FILE_UPLOAD.ACTION.UNDO');
 
         this.notificationService.openSnackMessageAction(messageTranslate.value, actionTranslate.value, 3000).onAction().subscribe(() => {
             this.uploadService.cancelUpload(...latestFilesAdded);
@@ -162,35 +114,13 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
     onUploadFiles(event: CustomEvent) {
         event.stopPropagation();
         event.preventDefault();
-        let isAllowed: boolean = this.hasCreatePermission(event.detail.data.obj.entry);
+        let isAllowed: boolean = this.contentService.hasPermission(event.detail.data.obj.entry, PermissionsEnum.CREATE);
         if (isAllowed) {
-            let files: FileInfo[] = event.detail.files;
+            let fileInfo: FileInfo[] = event.detail.files;
-            if (files && files.length > 0) {
+            if (fileInfo && fileInfo.length > 0) {
-                let parentId = this.parentId;
+                this.uploadFilesInfo(fileInfo);
-                if (event.detail.data && event.detail.data.obj.entry.isFolder) {
-                    parentId = event.detail.data.obj.entry.id || this.parentId;
-                }
-                const fileModels = files.map(fileInfo => new FileModel(fileInfo.file, {
-                    newVersion: this.versioning,
-                    path: fileInfo.relativeFolder,
-                    parentId: parentId
-                })).filter(this.isFileAcceptable.bind(this));
-                this.addNodeInUploadQueue(fileModels);
             }
         }
     }
 
-    /**
-     * Check if "create" permission is present on the given node
-     *
-     * @param node
-     */
-    private hasCreatePermission(node: any): boolean {
-        let isPermitted = false;
-        if (node && node['allowableOperations']) {
-            let permFound = node['allowableOperations'].find(element => element === 'create');
-            isPermitted = permFound ? true : false;
-        }
-        return isPermitted;
-    }
 }

lib/content-services/upload/components/upload-version-button.component.ts

@@ -39,18 +39,19 @@ export class UploadVersionButtonComponent extends UploadButtonComponent implemen
         super.ngOnChanges(changes);
 
         if (changes['acceptedFilesType']) {
-            const message = this.translateService.instant('FILE_UPLOAD.VERSION.MESSAGES.NO_ACCEPTED_FILE_TYPES');
+            const message = this.translationService.instant('FILE_UPLOAD.VERSION.MESSAGES.NO_ACCEPTED_FILE_TYPES');
             this.logService.error(message);
         }
         this.acceptedFilesType = '.' + this.node.name.split('.').pop();
     }
 
     protected createFileModel(file: File): FileModel {
-        const fileModel = super.createFileModel(file);
+        const fileModel = super.createFileModel(file, this.rootFolderId, (file.webkitRelativePath || '').replace(/\/[^\/]*$/, ''));
+
         fileModel.options.newVersionBaseName = this.node.name;
 
         if (!this.isFileAcceptable(fileModel)) {
-            const message = this.translateService.instant('FILE_UPLOAD.VERSION.MESSAGES.INCOMPATIBLE_VERSION');
+            const message = this.translationService.instant('FILE_UPLOAD.VERSION.MESSAGES.INCOMPATIBLE_VERSION');
             this.error.emit(message);
         }
 

lib/content-services/version-manager/version-list.component.html

@@ -1,5 +1,5 @@
 <mat-list class="adf-version-list" *ngIf="!isLoading; else loading_template">
-    <mat-list-item *ngFor="let version of versions">
+    <mat-list-item *ngFor="let version of versions; let idx = index">
         <mat-icon mat-list-icon>insert_drive_file</mat-icon>
         <h4 mat-line class="adf-version-list-item-name">{{version.entry.name}}</h4>
         <p mat-line>
@@ -8,30 +8,39 @@
         </p>
         <p mat-line class="adf-version-list-item-comment" *ngIf="showComments">{{version.entry.versionComment}}</p>
 
-        <mat-menu #versionMenu="matMenu" yPosition="below" xPosition="before">
+        <div *ngIf="showActions">
-            <button *ngIf="canUpdate()"
+            <mat-menu [id]="'adf-version-list-action-menu-'+idx"
-                mat-menu-item
+                      #versionMenu="matMenu" yPosition="below" xPosition="before">
-                (click)="restore(version.entry.id)">
+                <button
-                {{ 'ADF_VERSION_LIST.ACTIONS.RESTORE' | translate }}
+                    [id]="'adf-version-list-action-restore-'+idx"
-            </button>
+                    [disabled]="!canUpdate()"
-            <button *ngIf="allowDownload"
+                    mat-menu-item
-                mat-menu-item
+                    (click)="restore(version.entry.id)">
-                (click)="downloadVersion(version.entry.id)">
+                    {{ 'ADF_VERSION_LIST.ACTIONS.RESTORE' | translate }}
-                {{ 'ADF_VERSION_LIST.ACTIONS.DOWNLOAD' | translate }}
+                </button>
-            </button>
+                <button *ngIf="allowDownload"
-            <button *ngIf="canUpdate()"
+                        [id]="'adf-version-list-action-download-'+idx"
-                (click)="deleteVersion(version.entry.id)"
+                        mat-menu-item
-                mat-menu-item>
+                        (click)="downloadVersion(version.entry.id)">
-                {{ 'ADF_VERSION_LIST.ACTIONS.DELETE' | translate }}
+                    {{ 'ADF_VERSION_LIST.ACTIONS.DOWNLOAD' | translate }}
-            </button>
+                </button>
-        </mat-menu>
+                <button
+                    [disabled]="!canDelete()"
+                    [id]="'adf-version-list-action-delete-'+idx"
+                    (click)="deleteVersion(version.entry.id)"
+                    mat-menu-item>
+                    {{ 'ADF_VERSION_LIST.ACTIONS.DELETE' | translate }}
+                </button>
+            </mat-menu>
 
-        <button mat-icon-button [matMenuTriggerFor]="versionMenu">
+            <button mat-icon-button [matMenuTriggerFor]="versionMenu" [id]="'adf-version-list-action-menu-button-'+idx">
-            <mat-icon>more_vert</mat-icon>
+                <mat-icon>more_vert</mat-icon>
-        </button>
+            </button>
+        </div>
     </mat-list-item>
 </mat-list>
 
 <ng-template #loading_template>
-    <mat-progress-bar data-automation-id="version-history-loading-bar" mode="indeterminate" color="accent"></mat-progress-bar>
+    <mat-progress-bar data-automation-id="version-history-loading-bar" mode="indeterminate"
+                      color="accent"></mat-progress-bar>
 </ng-template>

lib/content-services/version-manager/version-list.component.scss

@@ -1,5 +1,5 @@
 .adf-version-list {
-    .mat-list-item {
+    .mat-list-item-content {
         border-bottom:1px solid #d8d8d8;
     }
 

lib/content-services/version-manager/version-list.component.spec.ts

@@ -22,6 +22,7 @@ import { VersionListComponent } from './version-list.component';
 import { AlfrescoApiService, setupTestBed, CoreModule, AlfrescoApiServiceMock } from '@alfresco/adf-core';
 import { MatDialog } from '@angular/material';
 import { Observable } from 'rxjs/Observable';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('VersionListComponent', () => {
     let component: VersionListComponent;
@@ -34,7 +35,8 @@ describe('VersionListComponent', () => {
 
     setupTestBed({
         imports: [
-            CoreModule.forRoot()
+            CoreModule.forRoot(),
+            NoopAnimationsModule
         ],
         declarations: [
             VersionListComponent
@@ -56,7 +58,7 @@ describe('VersionListComponent', () => {
         dialog = TestBed.get(MatDialog);
 
         component = fixture.componentInstance;
-        component.node = { id: nodeId, allowableOperations: [ 'update' ] };
+        component.node = { id: nodeId, allowableOperations: ['update'] };
 
         spyOn(component, 'downloadContent').and.stub();
     });
@@ -117,7 +119,7 @@ describe('VersionListComponent', () => {
 
         it('should use loading bar', () => {
             spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and
-                .callFake(() => Promise.resolve({ list: { entries: []}}));
+                .callFake(() => Promise.resolve({ list: { entries: [] } }));
 
             let loadingProgressBar = fixture.debugElement.query(By.css('[data-automation-id="version-history-loading-bar"]'));
             expect(loadingProgressBar).toBeNull();
@@ -131,7 +133,7 @@ describe('VersionListComponent', () => {
 
         it('should load the versions for a given id', () => {
             spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and
-                .callFake(() => Promise.resolve({ list: { entries: []}}));
+                .callFake(() => Promise.resolve({ list: { entries: [] } }));
 
             component.ngOnChanges();
             fixture.detectChanges();
@@ -142,11 +144,15 @@ describe('VersionListComponent', () => {
         it('should show the versions after loading', (done) => {
             fixture.detectChanges();
             spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.callFake(() => {
-                return Promise.resolve({ list: { entries: [
+                return Promise.resolve({
-                    {
+                    list: {
-                        entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' }
+                        entries: [
+                            {
+                                entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' }
+                            }
+                        ]
                     }
-                ]}});
+                });
             });
 
             component.ngOnChanges();
@@ -193,8 +199,14 @@ describe('VersionListComponent', () => {
         });
 
         it('should be able to download a version', () => {
-            const versionEntry =  { entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' }};
+            const versionEntry = {
-            spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.returnValue(Promise.resolve({ list: { entries: [ versionEntry ] }}));
+                entry: {
+                    name: 'test-file-name',
+                    id: '1.0',
+                    versionComment: 'test-version-comment'
+                }
+            };
+            spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.returnValue(Promise.resolve({ list: { entries: [versionEntry] } }));
             spyOn(alfrescoApiService.contentApi, 'getContentUrl').and.returnValue('the/download/url');
 
             fixture.detectChanges();
@@ -204,9 +216,15 @@ describe('VersionListComponent', () => {
         });
 
         it('should NOT be able to download a version if configured so', () => {
-            const versionEntry =  { entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' }};
+            const versionEntry = {
+                entry: {
+                    name: 'test-file-name',
+                    id: '1.0',
+                    versionComment: 'test-version-comment'
+                }
+            };
             spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and
-                .callFake(() => Promise.resolve({ list: { entries: [ versionEntry ] }}));
+                .callFake(() => Promise.resolve({ list: { entries: [versionEntry] } }));
             const spyOnDownload = spyOn(alfrescoApiService.contentApi, 'getContentUrl').and.stub();
 
             component.allowDownload = false;
@@ -240,20 +258,20 @@ describe('VersionListComponent', () => {
         it('should load the versions for a given id', () => {
             fixture.detectChanges();
             spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and
-                .callFake(() => Promise.resolve({ list: { entries: []}}));
+                .callFake(() => Promise.resolve({ list: { entries: [] } }));
             const spyOnRevertVersion = spyOn(alfrescoApiService.versionsApi, 'revertVersion').and
                 .callFake(() => Promise.resolve(
-                    { entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' }}));
+                    { entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' } }));
 
             component.restore(versionId);
 
-            expect(spyOnRevertVersion).toHaveBeenCalledWith(nodeId, versionId, { majorVersion: true, comment: ''});
+            expect(spyOnRevertVersion).toHaveBeenCalledWith(nodeId, versionId, { majorVersion: true, comment: '' });
         });
 
         it('should reload the version list after a version restore', (done) => {
             fixture.detectChanges();
             const spyOnListVersionHistory = spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and
-                .callFake(() => Promise.resolve({ list: { entries: []}}));
+                .callFake(() => Promise.resolve({ list: { entries: [] } }));
             spyOn(alfrescoApiService.versionsApi, 'revertVersion').and.callFake(() => Promise.resolve());
 
             component.restore(versionId);
@@ -264,4 +282,149 @@ describe('VersionListComponent', () => {
             });
         });
     });
+
+    describe('Actions buttons', () => {
+
+        describe('showActions', () => {
+
+            beforeEach(() => {
+                fixture.detectChanges();
+                component.node = { id: nodeId };
+                spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.callFake(() => {
+                    return Promise.resolve({
+                        list: {
+                            entries: [
+                                {
+                                    entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' }
+                                }
+                            ]
+                        }
+                    });
+                });
+
+                component.ngOnChanges();
+            });
+
+            it('should show Actions if showActions is true', (done) => {
+                component.showActions = true;
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let menuButton = fixture.debugElement.query(By.css('#adf-version-list-action-menu-button-0'));
+
+                    expect(menuButton).not.toBeNull();
+                    done();
+                });
+            });
+
+            it('should hide Actions if showActions is false', (done) => {
+                component.showActions = false;
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let menuButton = fixture.debugElement.query(By.css('#adf-version-list-action-menu-button-0'));
+
+                    expect(menuButton).toBeNull();
+                    done();
+                });
+            });
+        });
+
+        describe('disabled', () => {
+
+            beforeEach(() => {
+                fixture.detectChanges();
+                component.node = { id: nodeId };
+                spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.callFake(() => {
+                    return Promise.resolve({
+                        list: {
+                            entries: [
+                                {
+                                    entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' }
+                                }
+                            ]
+                        }
+                    });
+                });
+
+                component.ngOnChanges();
+            });
+
+            it('should disable delete action if is not allowed', (done) => {
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let menuButton = fixture.debugElement.query(By.css('#adf-version-list-action-menu-button-0'));
+                    menuButton.nativeElement.click();
+
+                    let deleteButton = fixture.debugElement.query(By.css('#adf-version-list-action-delete-0'));
+
+                    expect(deleteButton.nativeElement.disabled).toBe(true);
+                    done();
+                });
+            });
+
+            it('should disable restore action if is not allowed', (done) => {
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let menuButton = fixture.debugElement.query(By.css('#adf-version-list-action-menu-button-0'));
+                    menuButton.nativeElement.click();
+
+                    let restoreButton = fixture.debugElement.query(By.css('#adf-version-list-action-restore-0'));
+
+                    expect(restoreButton.nativeElement.disabled).toBe(true);
+                    done();
+                });
+            });
+        });
+
+        describe('enabled', () => {
+
+            beforeEach(() => {
+                fixture.detectChanges();
+                component.node = { id: nodeId, allowableOperations: ['update', 'delete'] };
+                spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.callFake(() => {
+                    return Promise.resolve({
+                        list: {
+                            entries: [
+                                {
+                                    entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' }
+                                }
+                            ]
+                        }
+                    });
+                });
+
+                component.ngOnChanges();
+            });
+
+            it('should enable delete action if is allowed', (done) => {
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let menuButton = fixture.debugElement.query(By.css('#adf-version-list-action-menu-button-0'));
+                    menuButton.nativeElement.click();
+
+                    let deleteButton = fixture.debugElement.query(By.css('#adf-version-list-action-delete-0'));
+
+                    expect(deleteButton.nativeElement.disabled).toBe(false);
+                    done();
+                });
+            });
+
+            it('should enable restore action if is allowed', (done) => {
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    let menuButton = fixture.debugElement.query(By.css('#adf-version-list-action-menu-button-0'));
+                    menuButton.nativeElement.click();
+
+                    let restoreButton = fixture.debugElement.query(By.css('#adf-version-list-action-restore-0'));
+
+                    expect(restoreButton.nativeElement.disabled).toBe(false);
+                    done();
+                });
+            });
+        });
+    });
+
 });

lib/content-services/version-manager/version-list.component.ts

@@ -17,7 +17,7 @@
 
 import { AlfrescoApiService, ContentService } from '@alfresco/adf-core';
 import { Component, Input, OnChanges, ViewEncapsulation, ElementRef } from '@angular/core';
-import { VersionsApi, MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { VersionsApi, MinimalNodeEntryEntity, VersionEntry } from 'alfresco-js-api';
 import { MatDialog } from '@angular/material';
 import { ConfirmDialogComponent } from '../dialogs/confirm.dialog';
 
@@ -33,7 +33,7 @@ import { ConfirmDialogComponent } from '../dialogs/confirm.dialog';
 export class VersionListComponent implements OnChanges {
 
     private versionsApi: VersionsApi;
-    versions: any = [];
+    versions: VersionEntry[] = [];
     isLoading = true;
 
     /** @deprecated in 2.3.0 */
@@ -43,6 +43,7 @@ export class VersionListComponent implements OnChanges {
     @Input()
     node: MinimalNodeEntryEntity;
 
+    /** show/hide comments */
     @Input()
     showComments = true;
 
@@ -50,11 +51,14 @@ export class VersionListComponent implements OnChanges {
     @Input()
     allowDownload = true;
 
-    constructor(
+    /** show/hide version actions */
-        private alfrescoApi: AlfrescoApiService,
+    @Input()
-        private contentService: ContentService,
+    showActions = true;
-        private dialog: MatDialog,
+
-        private el: ElementRef) {
+    constructor(private alfrescoApi: AlfrescoApiService,
+                private contentService: ContentService,
+                private dialog: MatDialog,
+                private el: ElementRef) {
         this.versionsApi = this.alfrescoApi.versionsApi;
     }
 
@@ -66,10 +70,14 @@ export class VersionListComponent implements OnChanges {
         return this.contentService.hasPermission(this.node, 'update');
     }
 
+    canDelete(): boolean {
+        return this.contentService.hasPermission(this.node, 'delete');
+    }
+
     restore(versionId) {
         if (this.canUpdate()) {
             this.versionsApi
-                .revertVersion(this.node.id, versionId, { majorVersion: true, comment: ''})
+                .revertVersion(this.node.id, versionId, { majorVersion: true, comment: '' })
                 .then(() => this.onVersionRestored());
         }
     }

lib/content-services/version-manager/version-manager.component.html

@@ -1,15 +1,39 @@
-<div class="adf-new-version-uploader-container" fxLayout="row" fxLayoutAlign="end center">
+<div class="adf-new-version-container">
-    <adf-version-upload
+    <div class="adf-new-version-uploader-container" fxLayout="row" fxLayoutAlign="end center" [@uploadToggle]="uploadState">
-        [node]="node"
+        <table class="adf-version-upload">
-        (success)="onUploadSuccess($event)"
+            <tr>
-        (error)="uploadError.emit($event)">
+                <td>
-    </adf-version-upload>
+                    <adf-version-upload
-</div>
+                        id="adf-version-upload-button"
-<div class="adf-version-list-container">
+                        [node]="node"
-    <adf-version-list
+                        (success)="onUploadSuccess($event)"
-        #versionList
+                        (cancel)="onUploadCancel()"
-        [node]="node"
+                        (error)="uploadError.emit($event)">
-        [allowDownload]="allowDownload"
+                    </adf-version-upload>
-        [showComments]="showComments">
+                </td>
-    </adf-version-list>
+            </tr>
+        </table>
+    </div>
+
+    <div class="adf-version-list-container">
+        <div class="adf-version-list-table">
+            <div>
+                <button mat-raised-button
+                        id="adf-show-version-upload-button"
+                        (click)="toggleNewVersion()" color="primary"
+                        *ngIf="uploadState ==='close'">{{
+                    'ADF_VERSION_LIST.ACTIONS.UPLOAD.ADD'|
+                    translate }}
+                </button>
+            </div>
+            <div>
+                <adf-version-list
+                    #versionList
+                    [node]="node"
+                    [allowDownload]="allowDownload"
+                    [showComments]="showComments">
+                </adf-version-list>
+            </div>
+        </div>
+    </div>
 </div>

lib/content-services/version-manager/version-manager.component.scss

@@ -1,8 +1,40 @@
 .adf-button.upload-new-version {
     box-shadow: none;
+    width: 100%;
+    height: 175px;
+    float: left;
+    position: relative;
 }
 
 .adf-new-version-uploader-container {
-    border-bottom:1px solid #d8d8d8;
+    border-bottom: 1px solid #d8d8d8;
     padding: 16px 0;
-}
+    width: 100%;
+    height: 0%;
+
+    float: left;
+    position: relative;
+    visibility: hidden;
+}
+
+.adf-new-version-container {
+    height: 800px;
+    overflow: hidden;
+}
+
+.adf-version-list-table {
+    width: 100%;
+}
+
+.adf-version-upload-table {
+    width: 100%;
+}
+
+.adf-version-list {
+    width: 100% !important;
+    float: left !important;
+}
+
+.adf-new-version-uploader-container {
+    float: left !important;
+}

lib/content-services/version-manager/version-manager.component.spec.ts

@@ -22,11 +22,13 @@ import { AlfrescoApiService, setupTestBed, CoreModule, AlfrescoApiServiceMock }
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { VersionManagerComponent } from './version-manager.component';
 import { VersionListComponent } from './version-list.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('VersionManagerComponent', () => {
     let component: VersionManagerComponent;
     let fixture: ComponentFixture<VersionManagerComponent>;
     let spyOnListVersionHistory: jasmine.Spy;
+    let alfrescoApiService: AlfrescoApiService;
 
     const expectedComment = 'test-version-comment';
     const  node: MinimalNodeEntryEntity = {
@@ -44,7 +46,8 @@ describe('VersionManagerComponent', () => {
 
     setupTestBed({
         imports: [
-            CoreModule.forRoot()
+            CoreModule.forRoot(),
+            NoopAnimationsModule
         ],
         declarations: [
             VersionManagerComponent,
@@ -61,7 +64,7 @@ describe('VersionManagerComponent', () => {
         component = fixture.componentInstance;
         component.node = node;
 
-        const alfrescoApiService = TestBed.get(AlfrescoApiService);
+        alfrescoApiService = TestBed.get(AlfrescoApiService);
         spyOnListVersionHistory = spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and
             .callFake(() => Promise.resolve({ list: { entries: [ versionEntry ] }}));
     });
@@ -94,7 +97,7 @@ describe('VersionManagerComponent', () => {
         });
     }));
 
-    it('should emit success event upon successful upload of a new version', () => {
+    it('should emit success event upon successful upload of a new version', async(() => {
         fixture.detectChanges();
 
         const emittedData = { value: { entry: node }};
@@ -102,5 +105,35 @@ describe('VersionManagerComponent', () => {
             expect(event).toBe(emittedData);
         });
         component.onUploadSuccess(emittedData);
+    }));
+
+    it('should emit nodeUpdated event upon successful upload of a new version', (done) => {
+        fixture.detectChanges();
+        alfrescoApiService.nodeUpdated.subscribe(() => {
+            done();
+        });
+
+        const emittedData = { value: { entry: node }};
+        component.onUploadSuccess(emittedData);
+    });
+
+    describe('Animation', () => {
+
+        it('should upload button be hide by default', () => {
+            fixture.detectChanges();
+
+            expect(component.uploadState).toEqual('close');
+        });
+
+        it('should upload button be visible after click on add new version button', () => {
+            fixture.detectChanges();
+
+            let showUploadButton = fixture.debugElement.query(By.css('#adf-show-version-upload-button'));
+
+            showUploadButton.nativeElement.click();
+
+            expect(component.uploadState).toEqual('open');
+        });
+
     });
 });

lib/content-services/version-manager/version-manager.component.ts

@@ -18,12 +18,27 @@
 import { Component, Input, ViewEncapsulation, ViewChild, Output, EventEmitter } from '@angular/core';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { VersionListComponent } from './version-list.component';
-import { AppConfigService, ContentService } from '@alfresco/adf-core';
+import { AppConfigService, ContentService, AlfrescoApiService } from '@alfresco/adf-core';
+import { trigger, state, style, animate, transition } from '@angular/animations';
 
 @Component({
     selector: 'adf-version-manager',
     templateUrl: './version-manager.component.html',
     styleUrls: ['./version-manager.component.scss'],
+    animations: [
+        trigger('uploadToggle', [
+            state('open', style({ height: '175px', opacity: 1, visibility: 'visible' })),
+            state('close', style({ height: '0%', opacity: 0, visibility: 'hidden' })),
+            transition('open => close', [
+                style({ visibility: 'hidden' }),
+                animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)')
+            ]),
+            transition('close => open', [
+                style({ visibility: 'visible' }),
+                animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)')
+            ])
+        ])
+    ],
     encapsulation: ViewEncapsulation.None
 })
 export class VersionManagerComponent {
@@ -46,16 +61,28 @@ export class VersionManagerComponent {
     @ViewChild('versionList')
     versionListComponent: VersionListComponent;
 
-    constructor(
+    uploadState: string = 'close';
-        config: AppConfigService,
+
-        private contentService: ContentService) {
+    constructor(config: AppConfigService,
+                private contentService: ContentService,
+                private alfrescoApiService: AlfrescoApiService) {
         this.showComments = config.get('adf-version-manager.allowComments', true);
         this.allowDownload = config.get('adf-version-manager.allowDownload', true);
     }
 
-    onUploadSuccess(event): void {
+    onUploadSuccess(event) {
+        this.alfrescoApiService.nodeUpdated.next(event.value.entry);
         this.versionListComponent.loadVersionHistory();
         this.uploadSuccess.emit(event);
+        this.uploadState = 'close';
+    }
+
+    onUploadCancel() {
+        this.uploadState = 'close';
+    }
+
+    toggleNewVersion() {
+        this.uploadState = this.uploadState === 'open' ? 'close' : 'open';
     }
 
     canUpdate(): boolean {

lib/content-services/version-manager/version-manager.module.ts

@@ -16,6 +16,7 @@
  */
 
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { MaterialModule } from '../material.module';
 import { TranslateModule } from '@ngx-translate/core';
@@ -30,12 +31,14 @@ import { UploadModule } from '../upload/upload.module';
         CommonModule,
         MaterialModule,
         TranslateModule,
-        UploadModule
+        UploadModule,
+        FormsModule
     ],
     exports: [
         VersionUploadComponent,
         VersionManagerComponent,
-        VersionListComponent
+        VersionListComponent,
+        FormsModule
     ],
     declarations: [
         VersionUploadComponent,

lib/content-services/version-manager/version-upload.component.html

@@ -1,12 +1,37 @@
-<adf-upload-version-button
+<div class="adf-new-version-max-width">
-    data-automation-id="adf-new-version-file-upload"
+    <mat-radio-group class="adf-new-version-radio-group" [(ngModel)]="semanticVersion">
-    class="adf-new-version-file-upload"
+        <mat-radio-button class="adf-new-version-radio-button" [value]="'minor'">{{
-    staticTitle="{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.TITLE' | translate }}"
+            'ADF_VERSION_LIST.ACTIONS.UPLOAD.MINOR' |
-    [node]="node"
+            translate }}
-    [disabled]="!canUpload()"
+        </mat-radio-button>
-    [rootFolderId]="node.parentId"
+        <mat-radio-button class="adf-new-version-radio-button" [value]="'major'">{{
-    tooltip="{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.TOOLTIP' | translate }}"
+            'ADF_VERSION_LIST.ACTIONS.UPLOAD.MAJOR' |
-    [versioning]="true"
+            translate }}
-    (success)="success.emit($event)"
+        </mat-radio-button>
-    (error)="error.emit($event)">
+    </mat-radio-group>
-</adf-upload-version-button>
+    <mat-form-field class="adf-new-version-max-width">
+                    <input matInput [(ngModel)]="comment"
+                              placeholder="{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.COMMENT' | translate }}">
+    </mat-form-field>
+
+</div>
+<div>
+    <button mat-raised-button (click)="cancelUpload()" class="adf-cancel-button">{{
+        'ADF_VERSION_LIST.ACTIONS.UPLOAD.CANCEL'| translate }}
+    </button>
+    <adf-upload-version-button
+        data-automation-id="adf-new-version-file-upload"
+        class="adf-new-version-file-upload"
+        staticTitle="{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.TITLE' | translate }}"
+        [node]="node"
+        [disabled]="!canUpload()"
+        [rootFolderId]="node.parentId"
+        tooltip="{{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.TOOLTIP' | translate }}"
+        [comment]="comment"
+        [versioning]="true"
+        [majorVersion]="isMajorVersion()"
+        (success)="success.emit($event)"
+        (error)="error.emit($event)">
+    </adf-upload-version-button>
+</div>
+

lib/content-services/version-manager/version-upload.component.scss

@@ -0,0 +1,22 @@
+.adf-new-version-radio-group {
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.adf-new-version-radio-button {
+    margin: 5px;
+}
+
+.adf-cancel-button {
+    margin-left: 20px;
+    float: right;
+}
+
+.adf-new-version-file-upload {
+    float: right;
+}
+
+.adf-new-version-max-width {
+    width: 100%;
+    float: right;
+}

lib/content-services/version-manager/version-upload.component.ts

@@ -22,11 +22,16 @@ import { ContentService } from '@alfresco/adf-core';
 @Component({
     selector: 'adf-version-upload',
     templateUrl: './version-upload.component.html',
+    styleUrls: ['./version-upload.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { 'class': 'adf-version-upload' }
 })
 export class VersionUploadComponent {
 
+    semanticVersion: string = 'minor';
+    comment: string;
+    uploadVersion: boolean = false;
+
     @Input()
     node: MinimalNodeEntryEntity;
 
@@ -36,6 +41,9 @@ export class VersionUploadComponent {
     @Output()
     error = new EventEmitter();
 
+    @Output()
+    cancel = new EventEmitter();
+
     constructor(private contentService: ContentService) {
     }
 
@@ -43,4 +51,12 @@ export class VersionUploadComponent {
         return this.contentService.hasPermission(this.node, 'update');
     }
 
+    isMajorVersion(): boolean {
+        return this.semanticVersion === 'minor' ? false : true;
+    }
+
+    cancelUpload() {
+        this.cancel.emit();
+    }
+
 }

lib/core/collapsable/accordion-group.component.scss

@@ -1,52 +1,55 @@
 @mixin adf-accordion-theme($theme) {
     $primary: map-get($theme, primary);
 
-    .adf-panel-heading {
+    .adf-panel {
-        float: left;
-        font-size: 14px;
-        font-weight: bold;
-        font-style: normal;
-        font-stretch: normal;
-        line-height: normal;
-        letter-spacing: normal;
-        text-align: left;
-        width: 100%;
-        cursor: pointer;
-    }
 
-    .adf-panel-heading-selected {
+        &-heading {
-        color: mat-color($primary);
+            float: left;
-    }
+            font-size: 14px;
+            font-weight: bold;
+            font-style: normal;
+            font-stretch: normal;
+            line-height: normal;
+            letter-spacing: normal;
+            text-align: left;
+            width: 100%;
+            cursor: pointer;
+        }
 
-    .adf-panel-heading-icon {	
+        &-heading-selected {
-         float: left;	
+            color: mat-color($primary);
-    }
+        }
 
-    .adf-panel-heading-text {
+        &-heading-icon {
-        float: left;
+            float: left;
-        padding-left: 20px;
+        }
-        padding-top: 4px;
-    }
 
-    .mat-expansion-panel {
+        &-heading-text {
-        transition: none !important;
+            float: left;
-        box-shadow: none !important;
+            padding-left: 20px;
-        background: none !important;
+            padding-top: 4px;
-    }
+        }
 
-    .mat-expansion-panel-body {
+        .mat-expansion-panel {
-        padding: 1px !important;
+            transition: none !important;
-    }
+            box-shadow: none !important;
+            background: none !important;
+        }
 
-    .mat-expansion-panel-header {
+        .mat-expansion-panel-body {
-        padding: 0px !important;
+            padding: 1px !important;
-    }
+        }
 
-    .mat-expansion-panel-header-title {
+        .mat-expansion-panel-header {
-        margin-right: 0px !important;
+            padding: 0px !important;
-    }
+        }
 
-    .mat-expansion-indicator {
+        .mat-expansion-panel-header-title {
+            margin-right: 0px !important;
+        }
+
+        .mat-expansion-indicator {
             margin-right: 25px !important;
+        }
     }
 }

lib/core/models/file.model.ts

@@ -22,7 +22,9 @@ export interface FileUploadProgress {
 }
 
 export interface FileUploadOptions {
+    comment?: string;
     newVersion?: boolean;
+    majorVersion?: boolean;
     newVersionBaseName?: string;
     parentId?: string;
     path?: string;
@@ -66,10 +68,10 @@ export class FileModel {
 
         this.options = Object.assign({}, {
             newVersion: false
-        },                           options);
+        }, options);
     }
 
-    private generateId(): string {
+    generateId(): string {
         return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
             let r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
             return v.toString(16);

lib/core/services/upload.service.spec.ts

@@ -158,7 +158,7 @@ describe('UploadService', () => {
         service.uploadFilesInTheQueue(emitter);
 
         expect(jasmine.Ajax.requests.mostRecent().url.endsWith('autoRename=true')).toBe(false);
-        expect(jasmine.Ajax.requests.mostRecent().params.has('majorVersion')).toBe(true);
+        expect(jasmine.Ajax.requests.mostRecent().params.has('majorVersion')).toBe(false);
     });
 
     it('If newVersionBaseName is set, name should be a param', () => {

lib/core/services/upload.service.ts

@@ -80,7 +80,7 @@ export class UploadService {
      * @returns Array of files that were not blocked from upload by the ignore list
      */
     addToQueue(...files: FileModel[]): FileModel[] {
-        const allowedFiles = files.filter(f => this.filterElement(f));
+        const allowedFiles = files.filter(currentFile => this.filterElement(currentFile));
         this.queue = this.queue.concat(allowedFiles);
         this.queueChanged.next(this.queue);
         return allowedFiles;
@@ -101,7 +101,7 @@ export class UploadService {
      */
     uploadFilesInTheQueue(emitter: EventEmitter<any>): void {
         if (!this.activeTask) {
-            let file = this.queue.find(f => f.status === FileUploadStatus.Pending);
+            let file = this.queue.find(currentFile => currentFile.status === FileUploadStatus.Pending);
             if (file) {
                 this.onUploadStarting(file);
 
@@ -162,7 +162,8 @@ export class UploadService {
 
         if (file.options.newVersion === true) {
             opts.overwrite = true;
-            opts.majorVersion = true;
+            opts.majorVersion = file.options.majorVersion;
+            opts.comment = file.options.comment;
         } else {
             opts.autoRename = true;
         }

lib/core/utils/file-utils.ts

@@ -36,10 +36,10 @@ export class FileUtils {
                         iterations.push(Promise.all(entries.map(entry => {
                             if (entry.isFile) {
                                 return new Promise(resolveFile => {
-                                    entry.file(function (f: File) {
+                                    entry.file(function (file: File) {
                                         files.push({
                                             entry: entry,
-                                            file: f,
+                                            file: file,
                                             relativeFolder: entry.fullPath.replace(/\/[^\/]*$/, '')
                                         });
                                         resolveFile();

lib/core/viewer/components/viewer.component.scss

@@ -136,10 +136,10 @@
             &__right {
                 border-left: 1px solid mat-color($foreground, text, 0.07);
             }
-    
+
             &__left {
                 border-right: 1px solid mat-color($foreground, text, 0.07);
-            }                
+            }
         }
 
         &__thumbnails {
@@ -163,6 +163,7 @@
             .adf-info-drawer-layout-content {
                 padding: 0;
                 height: 100%;
+                overflow: hidden;
             }
 
             .info-drawer-content {

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

@@ -68,9 +68,16 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     blobFile: Blob;
 
+    /** @deprecated 2.4.0 use nodeId */
     /** Node Id of the file to load. */
     @Input()
-    fileNodeId: string = null;
+    set fileNodeId(nodeId: string) {
+        this.nodeId = nodeId;
+    }
+
+    /** Node Id of the file to load. */
+    @Input()
+    nodeId: string = null;
 
     /** Shared link id (to display shared file). */
     @Input()
@@ -214,6 +221,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     extension: string;
     sidebarTemplateContext: { node: MinimalNodeEntryEntity } = { node: null };
 
+    private cacheBusterNumber;
+
     private subscriptions: Subscription[] = [];
 
     // Extensions that are supported by the Viewer without conversion
@@ -239,7 +248,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     }
 
     isSourceDefined(): boolean {
-        return (this.urlFile || this.blobFile || this.fileNodeId || this.sharedLinkId) ? true : false;
+        return (this.urlFile || this.blobFile || this.nodeId || this.sharedLinkId) ? true : false;
     }
 
     ngOnInit() {
@@ -254,7 +263,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     }
 
     private onNodeUpdated(node: MinimalNodeEntryEntity) {
-        if (node && node.id === this.fileNodeId) {
+        if (node && node.id === this.nodeId) {
+            this.generateCacheBusterNumber();
             this.setUpNodeFile(node);
         }
     }
@@ -268,9 +278,9 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
                 this.setUpBlobData();
             } else if (this.urlFile) {
                 this.setUpUrlFile();
-            } else if (this.fileNodeId) {
+            } else if (this.nodeId) {
                 this.isLoading = true;
-                this.apiService.nodesApi.getNodeInfo(this.fileNodeId).then(
+                this.apiService.nodesApi.getNodeInfo(this.nodeId).then(
                     (data: MinimalNodeEntryEntity) => {
                         this.setUpNodeFile(data);
                     },
@@ -326,7 +336,10 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     private setUpNodeFile(data: MinimalNodeEntryEntity) {
         this.mimeType = data.content.mimeType;
         this.displayName = data.name;
+
         this.urlFileContent = this.apiService.contentApi.getContentUrl(data.id);
+        this.urlFileContent = this.cacheBusterNumber ? this.urlFileContent + '&' + this.cacheBusterNumber : this.urlFileContent;
+
         this.extension = this.getFileExtension(data.name);
 
         this.fileName = data.name;
@@ -373,8 +386,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
 
     toggleSidebar() {
         this.showSidebar = !this.showSidebar;
-        if (this.showSidebar && this.fileNodeId) {
+        if (this.showSidebar && this.nodeId) {
-            this.apiService.getInstance().nodes.getNodeInfo(this.fileNodeId, {include: ['allowableOperations']})
+            this.apiService.getInstance().nodes.getNodeInfo(this.nodeId, { include: ['allowableOperations'] })
                 .then((data: MinimalNodeEntryEntity) => {
                     this.sidebarTemplateContext.node = data;
                 });
@@ -658,7 +671,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
             return rendition;
         } else if (status === 'NOT_CREATED') {
             try {
-                await this.apiService.renditionsApi.createRendition(nodeId, {id: renditionId});
+                await this.apiService.renditionsApi.createRendition(nodeId, { id: renditionId });
                 return await this.waitRendition(nodeId, renditionId, 0);
             } catch (err) {
                 this.logService.error(err);
@@ -693,4 +706,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         return this.sidebarPosition === 'left' ? 'adf-viewer__sidebar__left' : 'adf-viewer__sidebar__right';
     }
 
+    private generateCacheBusterNumber() {
+        this.cacheBusterNumber = Date.now();
+    }
+
 }

lib/package.json

@@ -17,7 +17,6 @@
     "bundlesize-map": "npm run webpack -- --config config/webpack.bundle-check.js --progress --profile --bail",
     "bundlesize-check": "bundlesize",
     "markdownlint": "markdownlint ../docs",
-    "doc": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.doc.js --progress --profile --bail",
     "docindex": "node config/DocProcessor/docProcessor.js ../docs",
     "copy-i18n": "mkdir -p dist/core/bundles/assets/adf-core/i18n && cp -R core/i18n/* dist/core/bundles/assets/adf-core/i18n && mkdir -p dist/content-services/bundles/assets/adf-content-services/i18n && cp -R content-services/i18n/* dist/content-services/bundles/assets/adf-content-services/i18n && mkdir -p dist/process-services/bundles/assets/adf-process-services/i18n && cp -R process-services/i18n/* dist/process-services/bundles/assets/adf-process-services/i18n && mkdir -p dist/insights/bundles/assets/adf-insights/i18n && cp -R insights/i18n/* dist/insights/bundles/assets/adf-insights/i18n",
     "copy-assets": "cp -R core/assets/* dist/core/bundles/assets && cp -R content-services/assets/* dist/content-services/bundles/assets && cp -R process-services/assets/* dist/process-services/bundles/assets",
@@ -135,6 +134,7 @@
     "null-loader": "0.1.1",
     "raw-loader": "0.5.1",
     "remap-istanbul": "0.6.3",
+    "remark": "^9.0.0",
     "remark-frontmatter": "^1.2.0",
     "rimraf": "^2.6.2",
     "rollup-plugin-cleanup": "^2.0.0",