[ci:force] auto update node version when media management actions are triggered (#6992)

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

@@ -87,3 +87,5 @@
         </button>
     </ng-template>
 </mat-menu>
+
+<adf-file-uploading-dialog #fileDialog position="left"></adf-file-uploading-dialog>

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

@@ -14,6 +14,10 @@
         }
     }
 
+    adf-file-uploading-dialog {
+        z-index: 1100;
+    }
+
     .app-layout {
         display: flex;
         flex: 1;

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

@@ -721,5 +721,3 @@
         </mat-form-field>
     </div>
 </div>
-
-<adf-file-uploading-dialog #fileDialog (error)="openSnackMessageError($event)"></adf-file-uploading-dialog>

docs/core/components/viewer.component.md

@@ -93,7 +93,6 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 | mimeType | `string` |  | MIME type of the file content (when not determined by the filename extension). |
 | nodeId | `string` | null | Node Id of the file to load. |
 | overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
-| readOnly | `boolean` | true | Hide or show media management actions for [Image-viewer component](../../../lib/core/viewer/components/img-viewer.component.ts "Defined in img-viewer.component.ts") |
 | sharedLinkId | `string` | null | Shared link id (to display shared file). |
 | showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
 | showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
@@ -111,7 +110,6 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 | Name | Type | Description |
 | ---- | ---- | ----------- |
 | extensionChange | `any` | Emitted when the filename extension changes. |
-| fileSubmit | `Blob` | Emitted when media management actions occur. |
 | goBack | `any` | Emitted when user clicks the 'Back' button. |
 | invalidSharedLink | `any` | Emitted when the shared link used is not valid. |
 | navigateBefore | `any` | Emitted when user clicks 'Navigate Before' ("<") button. |

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

@@ -89,7 +89,6 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges {
             dragMode: 'move',
             background: false,
             scalable: true,
-            modal: false,
             zoomOnWheel: false,
             toggleDragModeOnDblclick: false,
             viewMode: 1,
@@ -185,8 +184,10 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges {
     save() {
         this.isEditing = false;
         this.cropper.setDragMode('move');
+
         this.cropper.getCroppedCanvas().toBlob((blob) => {
             this.submit.emit(blob);
+            this.cropper.replace(this.cropper.getCroppedCanvas().toDataURL());
             this.cropper.clear();
         });
     }

lib/core/viewer/components/viewer.component.html

@@ -222,7 +222,6 @@
                                             [blobFile]="blobFile"
                                             [readOnly]="readOnly"
                                             (error)="onUnsupportedFile()"
-                                            (submit)="onSubmitFile($event)"
                             ></adf-img-viewer>
                         </ng-container>
 

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

@@ -961,13 +961,26 @@ describe('ViewerComponent', () => {
                 component.ngOnChanges();
             });
 
-            it('should emit new blob when emitted by image-viewer ', () => {
+            it('should update version when emitted by image-viewer and user has update permissions', () => {
-                spyOn(component.fileSubmit, 'emit');
+                component.readOnly = false;
+                component.nodeEntry = new NodeEntry({ entry: { name: 'fakeImage.png', id: '12', content: { mimeType: 'txt' } } });
                 const data = atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==');
                 const fakeBlob = new Blob([data], { type: 'image/png' });
                 component.onSubmitFile(fakeBlob);
+                fixture.detectChanges();
 
-                expect(component.fileSubmit.emit).toHaveBeenCalledWith(fakeBlob);
+                expect(component.blobFile).toEqual(fakeBlob);
+            });
+
+            it('should not update version when emitted by image-viewer and user doesn`t have update permissions', () => {
+                component.readOnly = true;
+                component.nodeEntry = new NodeEntry({ entry: { name: 'fakeImage.png', id: '12', content: { mimeType: 'txt' } } });
+                const data = atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==');
+                const fakeBlob = new Blob([data], { type: 'image/png' });
+                component.onSubmitFile(fakeBlob);
+                fixture.detectChanges();
+
+                expect(component.blobFile).toEqual(undefined);
             });
         });
 

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

@@ -33,6 +33,9 @@ import { ViewUtilService } from '../services/view-util.service';
 import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
 import { filter, skipWhile, takeUntil } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';
+import { ContentService } from '../../services/content.service';
+import { UploadService } from '../../services/upload.service';
+import { FileModel } from '../../models';
 
 @Component({
     selector: 'adf-viewer',
@@ -97,10 +100,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     showToolbar = true;
 
-    /** Hide or show media management actions for image-viewer component */
-    @Input()
-    readOnly = true;
-
     /** Specifies the name of the file when it is not available from the URL. */
     @Input()
     displayName: string;
@@ -210,10 +209,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Output()
     invalidSharedLink = new EventEmitter();
 
-    /** Emitted when user updates a node via rotate, crop, etc. */
-    @Output()
-    fileSubmit = new EventEmitter<Blob>();
-
     TRY_TIMEOUT: number = 10000;
 
     viewerType = 'unknown';
@@ -230,6 +225,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     sidebarLeftTemplateContext: { node: Node } = { node: null };
     fileTitle: string;
     viewerExtensions: Array<ViewerExtensionRef> = [];
+    readOnly = true;
 
     private cacheBusterNumber;
     cacheTypeForContent = '';
@@ -258,6 +254,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
                 private viewUtilService: ViewUtilService,
                 private logService: LogService,
                 private extensionService: AppExtensionService,
+                private contentService: ContentService,
+                private uploadService: UploadService,
                 private el: ElementRef,
                 public dialog: MatDialog) {
         viewUtilService.maxRetries = this.maxRetries;
@@ -402,6 +400,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     }
 
     private async setUpNodeFile(nodeData: Node, versionData?: Version) {
+        this.readOnly = !this.contentService.hasAllowableOperations(nodeData, 'update');
+
         let setupNode;
 
         if (versionData && versionData.content) {
@@ -694,7 +694,22 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     }
 
     onSubmitFile(newImageBlob: Blob) {
-        this.fileSubmit.emit(newImageBlob);
+        const newImageFile: File = new File([newImageBlob], this?.nodeEntry?.entry?.name, { type: this?.nodeEntry?.entry?.content?.mimeType });
+        if (this?.nodeEntry?.entry?.id && !this.readOnly) {
+            const newFile = new FileModel(
+                newImageFile,
+                {
+                    majorVersion: false,
+                    newVersion: true,
+                    parentId: this?.nodeEntry?.entry?.parentId,
+                    nodeType: this?.nodeEntry?.entry?.content?.mimeType
+                },
+                this?.nodeEntry?.entry?.id
+            );
+            this.blobFile = newImageBlob;
+            this.uploadService.addToQueue(...[newFile]);
+            this.uploadService.uploadFilesInTheQueue();
+        }
     }
 
     onUnsupportedFile() {