[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

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">
-            <button *ngIf="canUpdate()"
-                mat-menu-item
-                (click)="restore(version.entry.id)">
-                {{ 'ADF_VERSION_LIST.ACTIONS.RESTORE' | translate }}
-            </button>
-            <button *ngIf="allowDownload"
-                mat-menu-item
-                (click)="downloadVersion(version.entry.id)">
-                {{ 'ADF_VERSION_LIST.ACTIONS.DOWNLOAD' | translate }}
-            </button>
-            <button *ngIf="canUpdate()"
-                (click)="deleteVersion(version.entry.id)"
-                mat-menu-item>
-                {{ 'ADF_VERSION_LIST.ACTIONS.DELETE' | translate }}
-            </button>
-        </mat-menu>
+        <div *ngIf="showActions">
+            <mat-menu [id]="'adf-version-list-action-menu-'+idx"
+                      #versionMenu="matMenu" yPosition="below" xPosition="before">
+                <button
+                    [id]="'adf-version-list-action-restore-'+idx"
+                    [disabled]="!canUpdate()"
+                    mat-menu-item
+                    (click)="restore(version.entry.id)">
+                    {{ 'ADF_VERSION_LIST.ACTIONS.RESTORE' | translate }}
+                </button>
+                <button *ngIf="allowDownload"
+                        [id]="'adf-version-list-action-download-'+idx"
+                        mat-menu-item
+                        (click)="downloadVersion(version.entry.id)">
+                    {{ 'ADF_VERSION_LIST.ACTIONS.DOWNLOAD' | translate }}
+                </button>
+                <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">
-            <mat-icon>more_vert</mat-icon>
-        </button>
+            <button mat-icon-button [matMenuTriggerFor]="versionMenu" [id]="'adf-version-list-action-menu-button-'+idx">
+                <mat-icon>more_vert</mat-icon>
+            </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: [
-                    {
-                        entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' }
+                return Promise.resolve({
+                    list: {
+                        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' }};
-            spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.returnValue(Promise.resolve({ list: { entries: [ versionEntry ] }}));
+            const 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(
-        private alfrescoApi: AlfrescoApiService,
-        private contentService: ContentService,
-        private dialog: MatDialog,
-        private el: ElementRef) {
+    /** show/hide version actions */
+    @Input()
+    showActions = true;
+
+    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">
-    <adf-version-upload
-        [node]="node"
-        (success)="onUploadSuccess($event)"
-        (error)="uploadError.emit($event)">
-    </adf-version-upload>
-</div>
-<div class="adf-version-list-container">
-    <adf-version-list
-        #versionList
-        [node]="node"
-        [allowDownload]="allowDownload"
-        [showComments]="showComments">
-    </adf-version-list>
+<div class="adf-new-version-container">
+    <div class="adf-new-version-uploader-container" fxLayout="row" fxLayoutAlign="end center" [@uploadToggle]="uploadState">
+        <table class="adf-version-upload">
+            <tr>
+                <td>
+                    <adf-version-upload
+                        id="adf-version-upload-button"
+                        [node]="node"
+                        (success)="onUploadSuccess($event)"
+                        (cancel)="onUploadCancel()"
+                        (error)="uploadError.emit($event)">
+                    </adf-version-upload>
+                </td>
+            </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(
-        config: AppConfigService,
-        private contentService: ContentService) {
+    uploadState: string = 'close';
+
+    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
-    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 }}"
-    [versioning]="true"
-    (success)="success.emit($event)"
-    (error)="error.emit($event)">
-</adf-upload-version-button>
+<div class="adf-new-version-max-width">
+    <mat-radio-group class="adf-new-version-radio-group" [(ngModel)]="semanticVersion">
+        <mat-radio-button class="adf-new-version-radio-button" [value]="'minor'">{{
+            'ADF_VERSION_LIST.ACTIONS.UPLOAD.MINOR' |
+            translate }}
+        </mat-radio-button>
+        <mat-radio-button class="adf-new-version-radio-button" [value]="'major'">{{
+            'ADF_VERSION_LIST.ACTIONS.UPLOAD.MAJOR' |
+            translate }}
+        </mat-radio-button>
+    </mat-radio-group>
+    <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();
+    }
+
 }