From f0df6b3a5f15afbbccd620f5fc003b1fe50b1cc6 Mon Sep 17 00:00:00 2001
From: Urse Daniel <daniel.urse@hotmail.com>
Date: Thu, 4 Jun 2020 15:01:11 +0300
Subject: [PATCH] [ACA-3266] Improve version upload component (#5750)

* added new component to compare current and new file version of a node.

* update doc

* added more tests

* updated docs

* small fixes

* changed with typography

* Update version-comparison.component.md

* handle hiding the comparison component on demo shell if cancelled/uploaded a new file version

* small fixes

Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>
---
 demo-shell/resources/i18n/en.json             |   3 +-
 ...sion-manager-dialog-adapter.component.html |  19 ++-
 ...ersion-manager-dialog-adapter.component.ts |  10 +-
 docs/README.md                                |   1 +
 .../version-comparison.component.md           |  30 ++++
 .../components/version-manager.component.md   |   2 +
 docs/docassets/images/version-comparison.png  | Bin 0 -> 10706 bytes
 lib/content-services/src/lib/i18n/en.json     |   8 ++
 .../src/lib/styles/_index.scss                |   2 +
 .../version-comparison.component.html         |  21 +++
 .../version-comparison.component.scss         |  33 +++++
 .../version-comparison.component.spec.ts      | 133 ++++++++++++++++++
 .../version-comparison.component.ts           |  40 ++++++
 .../version-manager.component.html            |   3 +
 .../version-manager.component.ts              |  12 ++
 .../version-manager/version-manager.module.ts |   7 +-
 16 files changed, 317 insertions(+), 7 deletions(-)
 create mode 100644 docs/content-services/components/version-comparison.component.md
 create mode 100644 docs/docassets/images/version-comparison.png
 create mode 100644 lib/content-services/src/lib/version-manager/version-comparison.component.html
 create mode 100644 lib/content-services/src/lib/version-manager/version-comparison.component.scss
 create mode 100644 lib/content-services/src/lib/version-manager/version-comparison.component.spec.ts
 create mode 100644 lib/content-services/src/lib/version-manager/version-comparison.component.ts

diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json
index 0f9aa6eeb7..a02f2c2f6f 100644
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -21,7 +21,8 @@
       "SHOW_COMMENTS": "Show comments on versions",
       "ALLOW_DOWNLOAD": "Enable version download",
       "READ_ONLY": "Read-only",
-      "COMMENTS": "Show comments"
+      "COMMENTS": "Show comments",
+      "VERSION_COMPARISON": "Show version comparison"
     },
     "PERSONAL-FILES": "Personal Files",
     "WARN-MULTIPLE-UPLOADS": "Display warning for multiple uploads.",
diff --git a/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html b/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html
index 168e9f926a..1e1d692125 100644
--- a/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html
+++ b/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html
@@ -7,7 +7,7 @@
 </section>
 
 <section>
-    <mat-slide-toggle id="adf-version-manager-switch-download"color="primary" [(ngModel)]="allowDownload">
+    <mat-slide-toggle id="adf-version-manager-switch-download" color="primary" [(ngModel)]="allowDownload">
         {{'APP.ADF_VERSION_MANAGER.ALLOW_DOWNLOAD' | translate}}
     </mat-slide-toggle>
 </section>
@@ -18,11 +18,24 @@
     </mat-slide-toggle>
 </section>
 
+<section *ngIf="newFileVersion">
+    <mat-slide-toggle id="adf-version-manager-switch-comparison" color="primary" [(ngModel)]="showVersionComparison">
+        {{'APP.ADF_VERSION_MANAGER.VERSION_COMPARISON' | translate}}
+    </mat-slide-toggle>
+</section>
+
 <section mat-dialog-content *ngIf="!readOnly">
-    <adf-version-manager [node]="contentEntry" [newFileVersion]="newFileVersion" [allowDownload]="allowDownload" [showComments]="showComments" (uploadError)="uploadError($event)"></adf-version-manager>
+    <adf-version-manager [node]="contentEntry"
+                         (uploadCancel)="hideVersionComparison($event)"
+                         (uploadSuccess)="hideVersionComparison($event)"
+                         [showVersionComparison]="showVersionComparison"
+                         [newFileVersion]="newFileVersion"
+                         [allowDownload]="allowDownload"
+                         [showComments]="showComments"
+                         (uploadError)="uploadError($event)"></adf-version-manager>
 </section>
 <section mat-dialog-content *ngIf="readOnly">
-    <adf-version-list [node]="contentEntry" [showActions]="false" ></adf-version-list>
+    <adf-version-list [node]="contentEntry" [showActions]="false"></adf-version-list>
 </section>
 
 <footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
diff --git a/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts b/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts
index 09d0f994a5..7968c0b19b 100644
--- a/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts
+++ b/demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts
@@ -32,6 +32,7 @@ export class VersionManagerDialogAdapterComponent {
     showComments = true;
     allowDownload = true;
     readOnly = false;
+    showVersionComparison = false;
 
     constructor(@Inject(MAT_DIALOG_DATA) data: any,
                 private snackBar: MatSnackBar,
@@ -43,10 +44,17 @@ export class VersionManagerDialogAdapterComponent {
     }
 
     uploadError(errorMessage: string) {
-        this.snackBar.open(errorMessage, '', { duration: 4000 });
+        this.snackBar.open(errorMessage, '', {duration: 4000});
     }
 
     close() {
         this.containingDialog.close();
     }
+
+    hideVersionComparison(isCancelled: boolean | Node) {
+        if (isCancelled) {
+            this.showVersionComparison = false;
+            this.newFileVersion = null;
+        }
+    }
 }
diff --git a/docs/README.md b/docs/README.md
index 57f449e824..3e1fc03a77 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -289,6 +289,7 @@ for more information about installing and using the source code.
 | [Upload Button Component](content-services/components/upload-button.component.md) | Activates a file upload. | [Source](../lib/content-services/src/lib/upload/components/upload-button.component.ts) |
 | [Upload Drag Area Component](content-services/components/upload-drag-area.component.md) | Adds a drag and drop area to upload files to ACS. | [Source](../lib/content-services/src/lib/upload/components/upload-drag-area.component.ts) |
 | [Upload Version Button Component (Workaround)](content-services/components/upload-version-button.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Activates a file version upload. | [Source](../lib/content-services/src/lib/upload/components/upload-version-button.component.ts) |
+| [Version Comparison Component](content-services/components/version-comparison.component.md) | Displays the side by side comparison between the current target node (type, name, icon) and the new file that should update it's version. | [Source](../lib/content-services/src/lib/version-manager/version-comparison.component.ts) |
 | [Version List component](content-services/components/version-list.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Displays the version history of a node in a Version Manager component. | [Source](../lib/content-services/src/lib/version-manager/version-list.component.ts) |
 | [Version Manager Component](content-services/components/version-manager.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Displays the version history of a node with the ability to upload a new version. | [Source](../lib/content-services/src/lib/version-manager/version-manager.component.ts) |
 | [Webscript component](content-services/components/webscript.component.md) | Provides access to Webscript features. | [Source](../lib/content-services/src/lib/webscript/webscript.component.ts) |
diff --git a/docs/content-services/components/version-comparison.component.md b/docs/content-services/components/version-comparison.component.md
new file mode 100644
index 0000000000..aa0db6f48a
--- /dev/null
+++ b/docs/content-services/components/version-comparison.component.md
@@ -0,0 +1,30 @@
+---
+Title: Version Comparison Component
+Added: v3.9.0
+Status: Active
+Last reviewed: 2020-06-04
+---
+
+# [Version Comparison Component](../../../lib/content-services/src/lib/version-manager/version-comparison.component.ts "Defined in version-comparison.component.ts")
+
+Displays the side by side comparison between the current target node (type, name, icon) and the new file that should update it's version.
+
+![Version Manager](../../docassets/images/version-comparison.png)
+
+## Basic Usage
+
+```html
+<adf-version-comparison 
+    [node]="aNode"
+    [newFileVersion]="aNewFileVersion">
+</adf-version-comparison>
+```
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| newFileVersion | `File` |  | New file for updating current version. |
+| node | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) |  | Target node. |
diff --git a/docs/content-services/components/version-manager.component.md b/docs/content-services/components/version-manager.component.md
index 4da94ec080..332abcfbe7 100644
--- a/docs/content-services/components/version-manager.component.md
+++ b/docs/content-services/components/version-manager.component.md
@@ -33,11 +33,13 @@ Displays the version history of a node with the ability to upload a new version.
 | newFileVersion | `File` |  | New file for updating current version. |
 | node | [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) |  | Target node to manage version history. |
 | showComments | `boolean` | true | Toggles showing/hiding of comments. |
+| showVersionComparison | `boolean` | false | Toggles showing/hiding the [version comparison component](../../content-services/components/version-comparison.component.md). |
 
 ### Events
 
 | Name | Type | Description |
 | ---- | ---- | ----------- |
+| uploadCancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when an cancelling during upload. |
 | uploadError | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when an error occurs during upload. |
 | uploadSuccess | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md)`>` | Emitted when a file is uploaded successfully. |
 
diff --git a/docs/docassets/images/version-comparison.png b/docs/docassets/images/version-comparison.png
new file mode 100644
index 0000000000000000000000000000000000000000..291d57ea62413e856ea72c4f9fb632cda1716dca
GIT binary patch
literal 10706
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
MNL8j-$~f?U06MXv3;+NC

literal 0
HcmV?d00001

diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json
index 184c31622a..15c1d0d326 100644
--- a/lib/content-services/src/lib/i18n/en.json
+++ b/lib/content-services/src/lib/i18n/en.json
@@ -21,6 +21,14 @@
       "NO_LABEL": "No"
     }
   },
+  "ADF_VERSION_COMPARISON": {
+    "CURRENT_VERSION": "Current",
+    "NEW_VERSION": "New",
+    "ACCESSIBILITY": {
+      "ICON_TEXT": "Item type {{ type }}",
+      "ARROW_ICON": "Arrow right icon"
+    }
+  },
   "ADF_DROPDOWN": {
     "LOADING": "Loading..."
   },
diff --git a/lib/content-services/src/lib/styles/_index.scss b/lib/content-services/src/lib/styles/_index.scss
index 6573304c6b..907b4c534c 100644
--- a/lib/content-services/src/lib/styles/_index.scss
+++ b/lib/content-services/src/lib/styles/_index.scss
@@ -24,6 +24,7 @@
 @import '../permission-manager/components/add-permission/add-permission-dialog.component';
 @import '../permission-manager/components/add-permission/add-permission-panel.component';
 @import '../tree-view/components/tree-view.component';
+@import '../version-manager/version-comparison.component';
 
 @mixin adf-content-services-theme($theme) {
     @include adf-breadcrumb-theme($theme);
@@ -48,4 +49,5 @@
     @include adf-tree-view-theme($theme);
     @include adf-search-filter-theme($theme);
     @include adf-search-chip-list-theme($theme);
+    @include adf-version-comparison-theme($theme);
 }
diff --git a/lib/content-services/src/lib/version-manager/version-comparison.component.html b/lib/content-services/src/lib/version-manager/version-comparison.component.html
new file mode 100644
index 0000000000..4ba7258efa
--- /dev/null
+++ b/lib/content-services/src/lib/version-manager/version-comparison.component.html
@@ -0,0 +1,21 @@
+<div class="adf-version-comparison-content">
+    <div class="adf-version-current">
+        <p>{{'ADF_VERSION_COMPARISON.CURRENT_VERSION'|translate }}</p>
+        <img [attr.aria-label]="'ADF_VERSION_COMPARISON.ACCESSIBILITY.ICON_TEXT' | translate:
+        { type: (node.content.mimeType | fileType | uppercase) | translate  }"
+             [attr.alt]="'ADF_VERSION_COMPARISON.ACCESSIBILITY.ICON_TEXT' | translate:
+             { type: (node.content.mimeType | fileType | uppercase) | translate }"
+             src="{{thumbnailService.getMimeTypeIcon(node.content.mimeType)}}"/>
+        <p class="adf-version-comparison-node-name" title="{{node.name}}">{{node.name}}</p>
+    </div>
+    <span class="material-icons adf-version-arrow-icon">keyboard_arrow_right</span>
+    <div class="adf-version-new">
+        <p>{{'ADF_VERSION_COMPARISON.NEW_VERSION'|translate }}</p>
+        <img [attr.aria-label]="'ADF_VERSION_COMPARISON.ACCESSIBILITY.ICON_TEXT' | translate:
+        { type: (newFileVersion.type | fileType | uppercase) | translate  }"
+             [attr.alt]="'ADF_VERSION_COMPARISON.ACCESSIBILITY.ICON_TEXT' | translate:
+             { type: (newFileVersion.type | fileType | uppercase) | translate }"
+            src="{{thumbnailService.getMimeTypeIcon(newFileVersion.type)}}"/>
+        <p class="adf-version-comparison-file-name" title="{{newFileVersion.name}}">{{newFileVersion.name}}</p>
+    </div>
+</div>
diff --git a/lib/content-services/src/lib/version-manager/version-comparison.component.scss b/lib/content-services/src/lib/version-manager/version-comparison.component.scss
new file mode 100644
index 0000000000..ecd0e98830
--- /dev/null
+++ b/lib/content-services/src/lib/version-manager/version-comparison.component.scss
@@ -0,0 +1,33 @@
+@mixin adf-version-comparison-theme($theme) {
+
+    $config: mat-typography-config();
+
+    .adf-version-comparison-content {
+        display: flex;
+        align-items: center;
+        align-content: center;
+        justify-content: space-around;
+    }
+
+    .adf-version-current, .adf-version-new {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .adf-version-current img, .adf-version-new img {
+        width: 100px;
+    }
+
+    .adf-version-arrow-icon {
+        font-size: mat-font-size($config, display-4);
+    }
+
+    .adf-version-comparison-node-name, .adf-version-comparison-file-name {
+        width: 120px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        text-align: center;
+    }
+}
diff --git a/lib/content-services/src/lib/version-manager/version-comparison.component.spec.ts b/lib/content-services/src/lib/version-manager/version-comparison.component.spec.ts
new file mode 100644
index 0000000000..7b48daacf0
--- /dev/null
+++ b/lib/content-services/src/lib/version-manager/version-comparison.component.spec.ts
@@ -0,0 +1,133 @@
+/*!
+ * @license
+ * Copyright 2019 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 { ComponentFixture, TestBed } from '@angular/core/testing';
+import { VersionComparisonComponent } from './version-comparison.component';
+import { setupTestBed } from '@alfresco/adf-core';
+import { TranslateModule } from '@ngx-translate/core';
+import { ContentTestingModule } from '../testing/content.testing.module';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Node } from '@alfresco/js-api';
+
+describe('VersionComparisonComponent', () => {
+    let component: VersionComparisonComponent;
+    let fixture: ComponentFixture<VersionComparisonComponent>;
+    const node: Node = new Node({
+        id: '1234',
+        name: 'TEST-NODE',
+        isFile: true,
+        nodeType: 'FAKE',
+        isFolder: false,
+        modifiedAt: new Date(),
+        modifiedByUser: null,
+        createdAt: new Date(),
+        createdByUser: null,
+        content: {
+            mimeType: 'text/html',
+            mimeTypeName: 'HTML',
+            sizeInBytes: 13
+        }
+    });
+
+    const file: File = {
+        name: 'Fake New file',
+        type: 'image/png',
+        lastModified: 13,
+        size: 1351,
+        slice: null
+    };
+
+    setupTestBed({
+        imports: [
+            TranslateModule.forRoot(),
+            ContentTestingModule
+        ],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(VersionComparisonComponent);
+        component = fixture.componentInstance;
+        component.node = node;
+        component.newFileVersion = file;
+        fixture.detectChanges();
+    });
+
+    it('should display current node mimetype if node exists', () => {
+        const currentNode = document.querySelector('.adf-version-current');
+        expect(currentNode).toBeDefined();
+    });
+
+    it('should display new file mimetype if file exists', () => {
+        const newVersionFile = document.querySelector('.adf-adf-version-new');
+        expect(newVersionFile).toBeDefined();
+    });
+
+    it('should display PDF svg image if new file type is PDF', () => {
+        component.newFileVersion = {
+            name: 'Fake New file',
+            type: 'application/pdf',
+            lastModified: 13,
+            size: 1351,
+            slice: null
+        };
+        fixture.detectChanges();
+        const newImageNode = document.querySelector('.adf-version-new img');
+        expect(newImageNode.getAttribute('src')).toBe('./assets/images/ft_ic_pdf.svg');
+    });
+
+    it('should display png svg image if the current node is png type', () => {
+        component.node = {
+            id: '1234',
+            name: 'TEST-NODE',
+            isFile: true,
+            nodeType: 'FAKE',
+            isFolder: false,
+            modifiedAt: new Date(),
+            modifiedByUser: null,
+            createdAt: new Date(),
+            createdByUser: null,
+            content: {
+                mimeType: 'image/jpeg',
+                mimeTypeName: 'JPEG',
+                sizeInBytes: 13
+            }
+        };
+        fixture.detectChanges();
+        const currentNode = document.querySelector('.adf-version-current img');
+        expect(currentNode.getAttribute('src')).toBe('./assets/images/ft_ic_raster_image.svg');
+    });
+
+    describe('Accessibility', () => {
+        it('should have aria label defined for current node image', () => {
+            const currentNode = document.querySelector('.adf-version-current img');
+            expect(currentNode.getAttribute('aria-label')).toBeDefined();
+        });
+        it('should have alt defined for current node image', () => {
+            const currentNode = document.querySelector('.adf-version-current img');
+            expect(currentNode.getAttribute('alt')).toBeDefined();
+        });
+        it('should have aria label defined for current node image', () => {
+            const newImageNode = document.querySelector('.adf-version-new img');
+            expect(newImageNode.getAttribute('aria-label')).toBeDefined();
+        });
+        it('should have alt defined for current node image', () => {
+            const newImageNode = document.querySelector('.adf-version-new img');
+            expect(newImageNode.getAttribute('alt')).toBeDefined();
+        });
+    });
+});
diff --git a/lib/content-services/src/lib/version-manager/version-comparison.component.ts b/lib/content-services/src/lib/version-manager/version-comparison.component.ts
new file mode 100644
index 0000000000..b45898104c
--- /dev/null
+++ b/lib/content-services/src/lib/version-manager/version-comparison.component.ts
@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Copyright 2019 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 } from '@angular/core';
+import { Node } from '@alfresco/js-api';
+import { ThumbnailService } from '@alfresco/adf-core';
+
+@Component({
+    selector: 'adf-version-comparison',
+    templateUrl: './version-comparison.component.html',
+    styleUrls: ['./version-comparison.component.scss']
+})
+export class VersionComparisonComponent {
+
+    /** Target node. */
+    @Input()
+    node: Node;
+
+    /** New file for updating current version. */
+    @Input()
+    newFileVersion: File;
+
+    constructor(public thumbnailService: ThumbnailService) {
+    }
+
+}
diff --git a/lib/content-services/src/lib/version-manager/version-manager.component.html b/lib/content-services/src/lib/version-manager/version-manager.component.html
index 77fb0fe656..f4b47e3ad6 100644
--- a/lib/content-services/src/lib/version-manager/version-manager.component.html
+++ b/lib/content-services/src/lib/version-manager/version-manager.component.html
@@ -1,4 +1,7 @@
 <div class="adf-new-version-container">
+
+    <adf-version-comparison *ngIf="showVersionComparison" [node]="node" [newFileVersion]="newFileVersion"></adf-version-comparison>
+
     <div class="adf-new-version-uploader-container" id="adf-new-version-uploader-container" fxLayout="row" fxLayoutAlign="end center" [@uploadToggle]="uploadState">
         <table class="adf-version-upload" *ngIf="uploadState !== 'close'">
             <tr>
diff --git a/lib/content-services/src/lib/version-manager/version-manager.component.ts b/lib/content-services/src/lib/version-manager/version-manager.component.ts
index 62e52ce7ed..8a03178279 100644
--- a/lib/content-services/src/lib/version-manager/version-manager.component.ts
+++ b/lib/content-services/src/lib/version-manager/version-manager.component.ts
@@ -55,6 +55,10 @@ export class VersionManagerComponent implements OnInit {
     @Input()
     showComments = true;
 
+    /** Toggles showing/hiding the version comparison component. */
+    @Input()
+    showVersionComparison = false;
+
     /** Enable/disable downloading a version of the current node. */
     @Input()
     allowDownload = true;
@@ -67,6 +71,10 @@ export class VersionManagerComponent implements OnInit {
     @Output()
     uploadError: EventEmitter<Node> = new EventEmitter<Node>();
 
+    /** Emitted when an cancelling during upload. */
+    @Output()
+    uploadCancel: EventEmitter<boolean> = new EventEmitter<boolean>();
+
     @ViewChild('versionList')
     versionListComponent: VersionListComponent;
 
@@ -90,6 +98,7 @@ export class VersionManagerComponent implements OnInit {
     }
 
     onUploadSuccess(event: any) {
+        this.showVersionComparison = false;
         this.newFileVersion = null;
         this.alfrescoApiService.nodeUpdated.next(event.value.entry);
         this.versionListComponent.loadVersionHistory();
@@ -103,6 +112,9 @@ export class VersionManagerComponent implements OnInit {
 
     onUploadCancel() {
         this.uploadState = 'close';
+        this.showVersionComparison = false;
+        this.newFileVersion = null;
+        this.uploadCancel.emit(true);
     }
 
     toggleNewVersion() {
diff --git a/lib/content-services/src/lib/version-manager/version-manager.module.ts b/lib/content-services/src/lib/version-manager/version-manager.module.ts
index a90a1f8be4..c2516a3dc1 100644
--- a/lib/content-services/src/lib/version-manager/version-manager.module.ts
+++ b/lib/content-services/src/lib/version-manager/version-manager.module.ts
@@ -25,6 +25,7 @@ import { VersionManagerComponent } from './version-manager.component';
 import { VersionListComponent } from './version-list.component';
 import { UploadModule } from '../upload/upload.module';
 import { CoreModule } from '@alfresco/adf-core';
+import { VersionComparisonComponent } from './version-comparison.component';
 
 @NgModule({
     imports: [
@@ -38,12 +39,14 @@ import { CoreModule } from '@alfresco/adf-core';
         VersionUploadComponent,
         VersionManagerComponent,
         VersionListComponent,
-        FormsModule
+        FormsModule,
+        VersionComparisonComponent
     ],
     declarations: [
         VersionUploadComponent,
         VersionManagerComponent,
-        VersionListComponent
+        VersionListComponent,
+        VersionComparisonComponent
     ]
 })
 export class VersionManagerModule {}