[ADF-1751] Version manager POC (#2551)

* First try * Upload new versions * Add versionComment * Permission handling for sidebar also * Add tests * Fix rebase * Add documentation
2025-05-12 17:04:57 +00:00 · 2017-10-26 14:22:34 +01:00 · 2017-10-26 14:22:34 +01:00 · 2588bbda7d
commit 2588bbda7d
parent e7e2007c93
26 changed files with 753 additions and 225 deletions
--- a/demo-shell-ng2/src/app/app.module.ts
+++ b/demo-shell-ng2/src/app/app.module.ts
@ -35,6 +35,7 @@ import { FileViewComponent } from './components/file-view/file-view.component';
 import { WebscriptComponent } from './components/webscript/webscript.component';
 import { TagComponent } from './components/tag/tag.component';
 import { SocialComponent } from './components/social/social.component';
+import { VersionManagerDialogAdapterComponent } from './components/files/version-manager-dialog-adapter.component';

 import { ThemePickerModule } from './components/theme-picker/theme-picker';
 import { DebugAppConfigService } from './services/debug-app-config.service';
@ -67,7 +68,8 @@ import { routing } from './app.routes';
    WebscriptComponent,
    TagComponent,
    SocialComponent,
-    CustomSourcesComponent
+    CustomSourcesComponent,
+    VersionManagerDialogAdapterComponent
  ],
  imports: [
    BrowserModule,
@ -93,6 +95,9 @@ import { routing } from './app.routes';
      }
    }
  ],
+  entryComponents: [
+    VersionManagerDialogAdapterComponent
+  ],
  bootstrap: [AppComponent]
 })
 export class AppModule {
--- a/demo-shell-ng2/src/app/components/files/files.component.html
+++ b/demo-shell-ng2/src/app/components/files/files.component.html
@ -3,7 +3,8 @@
        <adf-sites-dropdown (change)="getSiteContent($event)">
        </adf-sites-dropdown>
    </div>
-    <adf-upload-drag-area
+    <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
+        <adf-upload-drag-area fxFlex="1 1 auto"
            [parentId]="getDocumentListCurrentFolderId()"
            [versioning]="versioning"
            [adf-node-permission]="'create'"
@ -59,7 +60,7 @@
                    </button>
                </div>

-            <button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker">
+                <button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker">
                    <mat-icon>format_color_fill</mat-icon>
                </button>

@ -70,6 +71,11 @@
                    <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
                </mat-menu>

+                <button mat-icon-button (click)="showVersions = !showVersions">
+                    <mat-icon *ngIf="!showVersions">chevron_left</mat-icon>
+                    <mat-icon *ngIf="showVersions">chevron_right</mat-icon>
+                </button>
+
                <adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>

                <button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
@ -214,6 +220,12 @@
                        (success)="onContentActionSuccess($event)"
                        handler="move">
                    </content-action>
+                    <content-action
+                        icon="storage"
+                        target="document"
+                        title="Manage versions..."
+                        (execute)="onManageVersions($event)">
+                    </content-action>
                    <content-action
                        icon="delete"
                        target="document"
@ -227,6 +239,30 @@
                </content-actions>
            </adf-document-list>
        </adf-upload-drag-area>
+        <adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
+            <div info-drawer-content>
+                <ng-container *ngIf="hasOneFileSelected();else choose_document_template">
+                    <ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions">
+                        <adf-version-manager
+                            [node]="documentList.selection[0].entry">
+                        </adf-version-manager>
+                    </ng-container>
+                </ng-container>
+                <ng-template #choose_document_template>
+                    <div class="adf-manage-versions-empty">
+                        <mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
+                        Please choose a document to see the versions of it.
+                    </div>
+                </ng-template>
+                <ng-template #no_permission_to_versions>
+                    <div class="adf-manage-versions-no-permission">
+                        <mat-icon class="adf-manage-versions-no-permission-icon">warning</mat-icon>
+                        You don't have permission to manage the versions of this content.
+                    </div>
+                </ng-template>
+            </div>
+        </adf-info-drawer-layout>
+    </div>
 </div>

 <context-menu-holder></context-menu-holder>
--- a/demo-shell-ng2/src/app/components/files/files.component.scss
+++ b/demo-shell-ng2/src/app/components/files/files.component.scss
@ -74,6 +74,45 @@ adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell::befo
    }
 }

+.adf-manage-versions-sidebar {
+    width: 300px;
+    color: rgba(0, 0, 0, 0.87);
+
+    .adf-manage-versions-empty,
+    .adf-manage-versions-no-permission {
+        margin: 24px;
+        color: grey;
+        text-align: justify;
+
+        &-icon {
+            display: block;
+            font-size: 48px;
+            margin: 0 auto 32px auto;
+        }
+    }
+
+    & ::ng-deep .adf-info-drawer-layout-header {
+        display: none;
+    }
+
+    & ::ng-deep .adf-info-drawer-layout-content {
+        padding: 0;
+
+        .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;
+        }
+    }
+}
+
@media (max-width: $minimumDocumentListWidth) {
    adf-document-list ::ng-deep adf-datatable  {
        & ::ng-deep .adf-data-table-cell--fileSize {
--- a/demo-shell-ng2/src/app/components/files/files.component.ts
+++ b/demo-shell-ng2/src/app/components/files/files.component.ts
@ -26,6 +26,7 @@ import {
 } from 'ng2-alfresco-core';
 import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
 import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
+import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';

 const DEFAULT_FOLDER_TO_SHOW = '-my-';

@ -41,6 +42,7 @@ export class FilesComponent implements OnInit {
    errorMessage: string = null;
    fileNodeId: any;
    showViewer: boolean = false;
+    showVersions: boolean = false;

    toolbarColor = 'default';

@ -211,6 +213,17 @@ export class FilesComponent implements OnInit {
        });
    }

+    onManageVersions(event) {
+        const contentEntry = event.value.entry;
+
+        if (this.contentService.hasPermission(contentEntry, 'update')) {
+            this.dialog.open(VersionManagerDialogAdapterComponent, { data: { contentEntry }, panelClass: 'adf-version-manager-dialog', width: '630px' });
+        } else {
+            const translatedErrorMessage: any = this.translateService.get('OPERATION.ERROR.PERMISSION');
+            this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
+        }
+    }
+
    getSiteContent(site: SiteModel) {
        this.currentFolderId = site && site.guid ? site.guid : DEFAULT_FOLDER_TO_SHOW;
    }
@ -223,6 +236,17 @@ export class FilesComponent implements OnInit {
        return selection && selection.length > 0;
    }

+    hasOneFileSelected(): boolean {
+        const selection: Array<MinimalNodeEntity> = this.documentList.selection;
+        const hasOneFileSelected = selection && selection.length === 1 && selection[0].entry.isFile;
+        return hasOneFileSelected;
+    }
+
+    userHasPermissionToManageVersions(): boolean {
+        const selection: Array<MinimalNodeEntity> = this.documentList.selection;
+        return this.contentService.hasPermission(selection[0].entry, 'update');
+    }
+
    downloadNodes(selection: Array<MinimalNodeEntity>) {
        if (!selection || selection.length === 0) {
            return;
--- a/demo-shell-ng2/src/app/components/files/version-manager-dialog-adapter.component.html
+++ b/demo-shell-ng2/src/app/components/files/version-manager-dialog-adapter.component.html
@ -0,0 +1,7 @@
+<header mat-dialog-title>Manage versions</header>
+<section mat-dialog-content>
+    <adf-version-manager [node]="contentEntry"></adf-version-manager>
+</section>
+<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+    <button mat-button (click)="close($event)">Close</button>
+</footer>
--- a/demo-shell-ng2/src/app/components/files/version-manager-dialog-adapter.component.ts
+++ b/demo-shell-ng2/src/app/components/files/version-manager-dialog-adapter.component.ts
@ -0,0 +1,38 @@
+/*!
+ * @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, Inject, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+@Component({
+    templateUrl: './version-manager-dialog-adapter.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class VersionManagerDialogAdapterComponent {
+
+    public contentEntry: MinimalNodeEntryEntity;
+
+    constructor(@Inject(MAT_DIALOG_DATA) data: any,
+                private containingDialog?: MatDialogRef<VersionManagerDialogAdapterComponent>) {
+        this.contentEntry = data.contentEntry;
+    }
+
+    close() {
+        this.containingDialog.close();
+    }
+}
--- a/docs/README.md
+++ b/docs/README.md
@ -422,6 +422,7 @@ for more information about installing and using the source code.
 - [Document list component](document-list.component.md)
 - [Sites dropdown component](sites-dropdown.component.md)
 - [*Content node selector component](../ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts)
+- [Version Manager Component](version-manager.component.md)

 ### Models

--- a/docs/docassets/images/version-manager.png
+++ b/docs/docassets/images/version-manager.png
--- a/docs/seeAlsoGraph.json
+++ b/docs/seeAlsoGraph.json
@ -38,6 +38,7 @@
        "nodes-api.service"
    ],
    "dropdown-breadcrumb.component": ["document-list.component", "breadcrumb.component"],
+    "version-manager": ["document-list.component"],
    "extensibility": [],
    "file-uploading-dialog.component": [],
    "folder-actions.service": ["document-actions.service"],
--- a/docs/version-manager.component.md
+++ b/docs/version-manager.component.md
@ -0,0 +1,25 @@
+# Version Manager Component
+
+The Version manager component displays the version history of a node with the ability to upload a new version.
+
+![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `This component is still in experimental phase, it has several limitations which will be resolved soon.`
+
+![Breadcrumb](docassets/images/version-manager.png)
+
+## Basic Usage
+
+```html
+<adf-version-manager [node]="aMinimalNodeEntryEntity"></adf-version-manager>
+```
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| node | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | The node you want to see the version history of. |
+
+
+<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
+<!-- seealso start -->
+## See also
+<!-- seealso end -->
--- a/ng2-components/ng2-alfresco-core/src/services/alfresco-api.service.ts
+++ b/ng2-components/ng2-alfresco-core/src/services/alfresco-api.service.ts
@ -18,7 +18,8 @@
 import { Injectable } from '@angular/core';
 import {
    AlfrescoApi, ContentApi, FavoritesApi, NodesApi,
-    PeopleApi, RenditionsApi, SharedlinksApi, SitesApi
+    PeopleApi, RenditionsApi, SharedlinksApi, SitesApi,
+    VersionsApi
 } from 'alfresco-js-api';
 import * as alfrescoApi from 'alfresco-js-api';
 import { AppConfigService } from './app-config.service';
@ -65,6 +66,10 @@ export class AlfrescoApiService {
        return this.getInstance().search.searchApi;
    }

+    get versionsApi(): VersionsApi {
+        return this.getInstance().core.versionsApi;
+    }
+
    constructor(private appConfig: AppConfigService,
                private storage: StorageService) {

--- a/ng2-components/ng2-alfresco-documentlist/index.ts
+++ b/ng2-components/ng2-alfresco-documentlist/index.ts
@ -16,8 +16,10 @@
 */

 import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
+import { UploadModule } from 'ng2-alfresco-upload';

 import { BreadcrumbComponent } from './src/components/breadcrumb/breadcrumb.component';
 import { DropdownBreadcrumbComponent } from './src/components/breadcrumb/dropdown-breadcrumb.component';
@ -29,6 +31,9 @@ import { ContentNodeSelectorComponent } from './src/components/content-node-sele
 import { DocumentListComponent } from './src/components/document-list.component';
 import { EmptyFolderContentDirective } from './src/components/empty-folder/empty-folder-content.directive';
 import { DropdownSitesComponent } from './src/components/site-dropdown/sites-dropdown.component';
+import { VersionListComponent } from './src/components/version-manager/version-list.component';
+import { VersionManagerComponent } from './src/components/version-manager/version-manager.component';
+import { VersionUploadComponent } from './src/components/version-manager/version-upload.component';
 import { MaterialModule } from './src/material.module';

 import { ContentNodeSelectorService } from './src/components/content-node-selector/content-node-selector.service';
@ -75,7 +80,10 @@ export const DOCUMENT_LIST_DIRECTIVES: any[] = [
    BreadcrumbComponent,
    DropdownSitesComponent,
    DropdownBreadcrumbComponent,
-    ContentNodeSelectorComponent
+    ContentNodeSelectorComponent,
+    VersionListComponent,
+    VersionUploadComponent,
+    VersionManagerComponent
 ];

 export const DOCUMENT_LIST_PROVIDERS: any[] = [
@ -89,8 +97,10 @@ export const DOCUMENT_LIST_PROVIDERS: any[] = [
@NgModule({
    imports: [
        CoreModule,
+        UploadModule,
        DataTableModule,
-        MaterialModule
+        MaterialModule,
+        FlexLayoutModule
    ],
    declarations: [
        ...DOCUMENT_LIST_DIRECTIVES
--- a/ng2-components/ng2-alfresco-documentlist/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/package.json
@ -47,6 +47,7 @@
    "@angular/common": "4.4.5",
    "@angular/compiler": "4.4.5",
    "@angular/core": "4.4.5",
+    "@angular/flex-layout": "2.0.0-beta.9",
    "@angular/forms": "4.4.5",
    "@angular/http": "4.4.5",
    "@angular/material": "2.0.0-beta.12",
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
@ -35,7 +35,6 @@ import { NodeMinimal, NodeMinimalEntry, NodePaging } from '../models/document-li
 import { ImageResolver } from './../data/image-resolver.model';
 import { RowFilter } from './../data/row-filter.model';

-
 import { DocumentListService } from './../services/document-list.service';
 import { DocumentListComponent } from './document-list.component';

--- a/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.html
@ -0,0 +1,23 @@
+<mat-list class="adf-version-list" *ngIf="!isLoading; else loading_template">
+    <mat-list-item *ngFor="let version of versions">
+        <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>
+            <span class="adf-version-list-item-version">{{version.entry.id}}</span> -
+            <span class="adf-version-list-item-date">{{version.entry.modifiedAt | date}}</span>
+        </p>
+        <p mat-line class="adf-version-list-item-comment">{{version.entry.versionComment}}</p>
+
+        <mat-menu #versionMenu="matMenu" yPosition="below" xPosition="before">
+            <button mat-menu-item (click)="restore(version.entry.id)"> Restore </button>
+        </mat-menu>
+
+        <button mat-icon-button [matMenuTriggerFor]="versionMenu">
+            <mat-icon>more_vert</mat-icon>
+        </button>
+    </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>
+</ng-template>
--- a/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.scss
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.scss
@ -0,0 +1,17 @@
+.adf-version-list {
+    .mat-list-item {
+        border-bottom:1px solid #d8d8d8;
+    }
+
+    &-item-version {
+        font-weight: bold;
+    }
+
+    &-item-date {
+        opacity: 0.6;
+    }
+
+    &-item-comment {
+        opacity: 0.5;
+    }
+}
--- a/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.spec.ts
@ -0,0 +1,135 @@
+/*!
+ * @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 { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { AlfrescoApiService, CoreModule } from 'ng2-alfresco-core';
+import { MaterialModule } from '../../material.module';
+import { VersionListComponent } from './version-list.component';
+
+describe('VersionListComponent', () => {
+    let component: VersionListComponent;
+    let fixture: ComponentFixture<VersionListComponent>;
+    let element: DebugElement;
+
+    const nodeId = 'test-id';
+    const versionId = '1.0';
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule,
+                MaterialModule
+            ],
+            declarations: [
+                VersionListComponent
+            ],
+            providers: [
+                AlfrescoApiService
+            ],
+            schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        }).compileComponents();
+    }));
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(VersionListComponent);
+        element = fixture.debugElement;
+        component = fixture.componentInstance;
+        component.id = nodeId;
+    });
+
+    describe('Version history fetching', () => {
+
+        it('should use loading bar', () => {
+            let loadingProgressBar = fixture.debugElement.query(By.css('[data-automation-id="version-history-loading-bar"]'));
+            expect(loadingProgressBar).toBeNull();
+
+            component.ngOnChanges();
+            fixture.detectChanges();
+
+            loadingProgressBar = fixture.debugElement.query(By.css('[data-automation-id="version-history-loading-bar"]'));
+            expect(loadingProgressBar).not.toBeNull();
+        });
+
+        it('should load the versions for a given id', () => {
+            const alfrescoApiService = TestBed.get(AlfrescoApiService);
+            spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.callThrough();
+
+            component.ngOnChanges();
+            fixture.detectChanges();
+
+            expect(alfrescoApiService.versionsApi.listVersionHistory).toHaveBeenCalledWith(nodeId);
+        });
+
+        it('should show the versions after loading', () => {
+            fixture.detectChanges();
+            const alfrescoApiService = TestBed.get(AlfrescoApiService);
+            spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.callFake(() => {
+                return Promise.resolve([
+                    {
+                        entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' }
+                    }
+                ]);
+            });
+
+            component.ngOnChanges();
+
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                let versionFileName = fixture.debugElement.query(By.css('.adf-version-list-item-name')).nativeElement.innerText;
+                let versionIdText = fixture.debugElement.query(By.css('.adf-version-list-item-version')).nativeElement.innerText;
+                let versionComment = fixture.debugElement.query(By.css('.adf-version-list-item-comment')).nativeElement.innerText;
+
+                expect(versionFileName).toBe('test-file-name');
+                expect(versionIdText).toBe('1.0');
+                expect(versionComment).toBe('test-version-comment');
+            });
+        });
+    });
+
+    describe('Version restoring', () => {
+
+        it('should load the versions for a given id', () => {
+            fixture.detectChanges();
+            const alfrescoApiService = TestBed.get(AlfrescoApiService);
+            spyOn(alfrescoApiService.versionsApi, 'revertVersion').and.callThrough();
+
+            component.restore(versionId);
+
+            expect(alfrescoApiService.versionsApi.revertVersion).toHaveBeenCalledWith(nodeId, versionId, { majorVersion: true, comment: ''});
+        });
+
+        it('should reload the version list after a version restore', () => {
+            fixture.detectChanges();
+            const alfrescoApiService = TestBed.get(AlfrescoApiService);
+            spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.callThrough();
+            spyOn(alfrescoApiService.versionsApi, 'revertVersion').and.callFake(() => Promise.resolve());
+
+            component.restore(versionId);
+
+            fixture.whenStable().then(() => {
+                expect(alfrescoApiService.versionsApi.listVersionHistory).toHaveBeenCalledTimes(1);
+            });
+        });
+    });
+});
--- a/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.ts
@ -0,0 +1,61 @@
+/*!
+ * @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, Input, OnChanges, ViewEncapsulation } from '@angular/core';
+import { VersionsApi } from 'alfresco-js-api';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'adf-version-list',
+    templateUrl: './version-list.component.html',
+    styleUrls: ['./version-list.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'class': 'adf-version-list'
+    }
+})
+export class VersionListComponent implements OnChanges {
+
+    private versionsApi: VersionsApi;
+    versions: any = [];
+    isLoading: boolean = true;
+
+    @Input()
+    id: string;
+
+    constructor(private alfrescoApi: AlfrescoApiService) {
+        this.versionsApi = this.alfrescoApi.versionsApi;
+    }
+
+    ngOnChanges() {
+        this.loadVersionHistory();
+    }
+
+    restore(versionId) {
+        this.versionsApi
+            .revertVersion(this.id, versionId, { majorVersion: true, comment: ''})
+            .then(this.loadVersionHistory.bind(this));
+    }
+
+    private loadVersionHistory() {
+        this.isLoading = true;
+        this.versionsApi.listVersionHistory(this.id).then((data) => {
+            this.versions = data.list.entries;
+            this.isLoading = false;
+        });
+    }
+}
--- a/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-manager.component.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-manager.component.html
@ -0,0 +1,6 @@
+<div class="adf-new-version-uploader-container" fxLayout="row" fxLayoutAlign="end center">
+    <adf-version-upload [node]="node"></adf-version-upload>
+</div>
+<div class="adf-version-list-container">
+    <adf-version-list [id]="node.id"></adf-version-list>
+</div>
--- a/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-manager.component.scss
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-manager.component.scss
@ -0,0 +1,8 @@
+.adf-button.upload-new-version {
+    box-shadow: none;
+}
+
+.adf-new-version-uploader-container {
+    border-bottom:1px solid #d8d8d8;
+    padding: 16px 0;
+}
--- a/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-manager.component.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-manager.component.ts
@ -0,0 +1,31 @@
+/*!
+ * @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, Input, ViewEncapsulation } from '@angular/core';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+@Component({
+    selector: 'adf-version-manager',
+    templateUrl: './version-manager.component.html',
+    styleUrls: ['./version-manager.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class VersionManagerComponent {
+
+    @Input()
+    node: MinimalNodeEntryEntity;
+}
--- a/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-upload.component.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-upload.component.html
@ -0,0 +1,8 @@
+<adf-upload-button
+    data-automation-id="adf-new-version-file-upload"
+    class="adf-new-version-file-upload"
+    staticTitle="Upload new version"
+    [rootFolderId]="node.parentId"
+    tooltip="Restriction: upload file with the same name to create a new version of it"
+    [versioning]="true">
+</adf-upload-button>
--- a/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-upload.component.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-upload.component.ts
@ -0,0 +1,33 @@
+/*!
+ * @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, Input, ViewEncapsulation } from '@angular/core';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+@Component({
+    selector: 'adf-version-upload',
+    templateUrl: './version-upload.component.html',
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'class': 'adf-version-upload'
+    }
+})
+export class VersionUploadComponent {
+
+    @Input()
+    node: MinimalNodeEntryEntity;
+}
--- a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.spec.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.spec.ts
@ -20,8 +20,8 @@ import { CoreModule } from 'ng2-alfresco-core';
 import { DataColumn, DataRow, DataSorting } from 'ng2-alfresco-datatable';
 import { FileNode, FolderNode } from './../assets/document-library.model.mock';
 import { DocumentListService } from './../services/document-list.service';
-import { ShareDataTableAdapter } from './share-datatable-adapter';
 import { ShareDataRow } from './share-data-row.model';
+import { ShareDataTableAdapter } from './share-datatable-adapter';

 describe('ShareDataTableAdapter', () => {

--- a/ng2-components/ng2-alfresco-documentlist/src/material.module.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/material.module.ts
@ -21,6 +21,7 @@ import {
    MatDialogModule,
    MatIconModule,
    MatInputModule,
+    MatListModule,
    MatMenuModule,
    MatOptionModule,
    MatProgressSpinnerModule,
@ -34,6 +35,7 @@ export function modules() {
        MatDialogModule,
        MatButtonModule,
        MatIconModule,
+        MatListModule,
        MatInputModule,
        MatProgressSpinnerModule,
        MatSelectModule,
--- a/ng2-components/ng2-alfresco-login/src/material.module.ts
+++ b/ng2-components/ng2-alfresco-login/src/material.module.ts
@ -18,9 +18,15 @@
 import { NgModule } from '@angular/core';
 import {
    MatCheckboxModule,
+    MatDialogModule,
    MatIconModule,
    MatInputModule,
-    MatProgressSpinnerModule
+    MatListModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSlideToggleModule
 } from '@angular/material';

 export function modules() {
@ -28,7 +34,14 @@ export function modules() {
        MatCheckboxModule,
        MatIconModule,
        MatInputModule,
-        MatProgressSpinnerModule
+        MatProgressSpinnerModule,
+        MatSlideToggleModule,
+        MatInputModule,
+        MatSelectModule,
+        MatListModule,
+        MatDialogModule,
+        MatSidenavModule,
+        MatProgressBarModule
    ];
 }