[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

@@ -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.",

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">

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;
+        }
+    }
 }

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) |

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. |

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. |
 

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..."
   },

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);
 }

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>

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;
+    }
+}

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();
+        });
+    });
+});

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) {
+    }
+
+}

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>

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() {

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 {}