[AAE-3110] Move upload button inside the node selector dialog (#5901)

* Open select dialog on all types, fetch destination folder from a relative path

* Dialog UI refactor, multiple upload from local

* Fix document list should automatically reload after upload

* Remove not used ViewChild

* Fix imports, read destination folder from form field

* support different alias

* Remove not needed property, reuse selection mode

* Remove unused methods

* Fix unit tests

* * Added unit tests
* Fixed failing unit tests

* * Added unit for upload button
* Skipped failing e2e

* * Removed process-storage related code

* * Removed unncessory model and code
*

* * Removed contentHost from formCloud model

* * Skiped content-services e2e

* Skip failing process e2e related to attachment

Co-authored-by: sivakumar414ram <siva.kumar@muraai.com>
Co-authored-by: maurizio vitale <maurizio.vitale@alfresco.com>

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

@@ -25,8 +25,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { MinimalNodeEntity, NodePaging, Pagination, MinimalNodeEntryEntity, SiteEntry, SearchEntry } from '@alfresco/js-api';
 import {
-    AlfrescoApiService, AuthenticationService, AppConfigService, AppConfigValues, ContentService, TranslationService,
-    FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
+    AlfrescoApiService, AuthenticationService, AppConfigService, AppConfigValues, ContentService, TranslationService, FolderCreatedEvent, LogService, NotificationService,
     UploadService, DataRow, UserPreferencesService,
     PaginationComponent, FormValues, DisplayMode, ShowHeaderMode, InfinitePaginationComponent, HighlightDirective,
     SharedLinksApiService
@@ -47,7 +46,7 @@ import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-a
 import { MetadataDialogAdapterComponent } from './metadata-dialog-adapter.component';
 import { Subject } from 'rxjs';
 import { PreviewService } from '../../services/preview.service';
-import { debounceTime, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 
 const DEFAULT_FOLDER_TO_SHOW = '-my-';
 
@@ -272,17 +271,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
             });
         }
 
-        this.uploadService.fileUploadComplete
-            .pipe(
-                debounceTime(300),
-                takeUntil(this.onDestroy$)
-            )
-            .subscribe(value => this.onFileUploadEvent(value));
-
-        this.uploadService.fileUploadDeleted
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(value => this.onFileUploadEvent(value));
-
         this.contentService.folderCreated
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(value => this.onFolderCreated(value));
@@ -350,12 +338,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.errorMessage = null;
     }
 
-    onFileUploadEvent(event: FileUploadEvent) {
-        if (event && event.file.options.parentId === this.documentList.currentFolderId) {
-            this.documentList.reload();
-        }
-    }
-
     onFolderCreated(event: FolderCreatedEvent) {
         this.logService.log('FOLDER CREATED');
         this.logService.log(event);

docs/content-services/components/content-node-selector-panel.component.md

@@ -52,6 +52,7 @@ Opens a [Content Node Selector](content-node-selector.component.md)  in its own
 | ---- | ---- | ----------- |
 | select | [`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 the user has chosen an item. |
 | siteChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when the select site changes. |
+| navigationChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<NodeEntryEvent>` | Emitted when the navigation changes. |
 
 ## Details
 

docs/process-services-cloud/services/form-cloud.service.md

@@ -36,11 +36,10 @@ class MyComponent {
     -   _outcome:_ `string`  - [Form](../../../lib/process-services/src/lib/task-list/models/form.model.ts) outcome
     -   _version:_ `number`  - of the form
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`TaskDetailsCloudModel`](../../../lib/process-services-cloud/src/lib/task/start-task/models/task-details-cloud.model.ts)`>` - Updated task details
--   **createTemporaryRawRelatedContent**(file: `any`, nodeId: `string`, contentHost: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+-   **createTemporaryRawRelatedContent**(file: `any`, nodeId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
 
     -   _file:_ `any`  - 
     -   _nodeId:_ `string`  - 
-    -   _contentHost:_ `string`  - 
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - 
 
 -   **getBasePath**(appName: `string`): `string`<br/>
@@ -58,13 +57,6 @@ class MyComponent {
     -   _formKey:_ `string`  - key of the target task
     -   _version:_ `number`  - (Optional) Version of the form
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`FormContent`](../../../lib/process-services-cloud/src/lib/services/form-fields.interfaces.ts)`>` - Form definition
--   **getProcessStorageFolderTask**(appName: `string`, taskId: `string`, processInstanceId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`ProcessStorageCloudModel`](../../../lib/process-services-cloud/src/lib/form/models/task-variable-cloud.model.ts)`>`<br/>
-
-    -   _appName:_ `string`  - 
-    -   _taskId:_ `string`  - 
-    -   _processInstanceId:_ `string`  - 
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`ProcessStorageCloudModel`](../../../lib/process-services-cloud/src/lib/form/models/task-variable-cloud.model.ts)`>` - 
-
 -   **getTask**(appName: `string`, taskId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`TaskDetailsCloudModel`](../../../lib/process-services-cloud/src/lib/task/start-task/models/task-details-cloud.model.ts)`>`<br/>
     Gets details of a task
     -   _appName:_ `string`  - Name of the app

e2e/protractor.excludes.json

@@ -4,6 +4,19 @@
   "C362240": "Include once ADF starts using ACS 7 , https://issues.alfresco.com/jira/browse/ADF-5182",
   "C362241": "Include once ADF starts using ACS 7, https://issues.alfresco.com/jira/browse/ADF-5182",
   "C362242": "Include once ADF starts using ACS 7, https://issues.alfresco.com/jira/browse/ADF-5182",
-  "C362265": "Include once ADF starts using ACS 7, https://issues.alfresco.com/jira/browse/ADF-5182"
+  "C362265": "Include once ADF starts using ACS 7, https://issues.alfresco.com/jira/browse/ADF-5182",
+  "C311290": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C310358": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C311285": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C311287": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C311288": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C311289": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C311292": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C311293": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C311295": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C315292": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C260140": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C261160": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177",
+  "C246534": "Include once process storage services removed, https://issues.alfresco.com/jira/browse/AAE-3177"
 }
 

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html

@@ -71,7 +71,7 @@
             [allowDropFiles]="false"
             [sorting]="'server'"
             [where]="where"
-            (folderChange)="onFolderChange()"
+            (folderChange)="onFolderChange($event)"
             (ready)="onFolderLoaded()"
             (nodeSelected)="onCurrentSelection($event)"
             data-automation-id="content-node-selector-document-list">

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.spec.ts

@@ -29,7 +29,7 @@ import { DocumentListService } from '../document-list/services/document-list.ser
 import { DocumentListComponent } from '../document-list/components/document-list.component';
 import { DropdownSitesComponent } from '../site-dropdown/sites-dropdown.component';
 import { CustomResourcesService } from '../document-list/services/custom-resources.service';
-import { ShareDataRow } from '../document-list';
+import { NodeEntryEvent, ShareDataRow } from '../document-list';
 import { TranslateModule } from '@ngx-translate/core';
 
 const ONE_FOLDER_RESULT = {
@@ -59,6 +59,8 @@ describe('ContentNodeSelectorComponent', () => {
     let sitesService: SitesService;
     let searchSpy: jasmine.Spy;
     let cnSearchSpy: jasmine.Spy;
+    const fakeNodeEntry = new Node({ id: 'fakeId' });
+    const nodeEntryEvent = new NodeEntryEvent(fakeNodeEntry);
 
     let _observer: Observer<NodePaging>;
 
@@ -271,7 +273,7 @@ describe('ContentNodeSelectorComponent', () => {
 
                 tick(debounceSearch);
 
-                component.onFolderChange();
+                component.onFolderChange(nodeEntryEvent);
                 fixture.detectChanges();
                 const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent));
                 expect(breadcrumb).not.toBeNull();
@@ -309,7 +311,7 @@ describe('ContentNodeSelectorComponent', () => {
                 respondWithSearchResults(ONE_FOLDER_RESULT);
                 fixture.detectChanges();
 
-                component.onFolderChange();
+                component.onFolderChange(nodeEntryEvent);
                 fixture.detectChanges();
 
                 const chosenNode = <Node> { path: { elements: [] } };
@@ -700,7 +702,7 @@ describe('ContentNodeSelectorComponent', () => {
                 tick();
                 fixture.detectChanges();
 
-                component.onFolderChange();
+                component.onFolderChange(nodeEntryEvent);
                 fixture.detectChanges();
 
                 expect(component.clearSearch).toHaveBeenCalled();

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts

@@ -33,7 +33,7 @@ import { ImageResolver } from '../document-list/data/image-resolver.model';
 import { ContentNodeSelectorService } from './content-node-selector.service';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { CustomResourcesService } from '../document-list/services/custom-resources.service';
-import { ShareDataRow } from '../document-list';
+import { NodeEntryEvent, ShareDataRow } from '../document-list';
 import { Subject } from 'rxjs';
 
 export type ValidationFunction = (entry: Node) => boolean;
@@ -186,6 +186,10 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {
     @Output()
     select: EventEmitter<Node[]> = new EventEmitter<Node[]>();
 
+    /** Emitted when the navigation changes. */
+    @Output()
+    navigationChange: EventEmitter<NodeEntryEvent> = new EventEmitter<NodeEntryEvent>();
+
     /** Emitted when the select site changes. */
     @Output()
     siteChange: EventEmitter<string> = new EventEmitter<string>();
@@ -426,11 +430,12 @@ export class ContentNodeSelectorPanelComponent implements OnInit, OnDestroy {
     /**
      * Sets showingSearchResults state to be able to differentiate between search results or folder results
      */
-    onFolderChange(): void {
+    onFolderChange($event: NodeEntryEvent): void {
         this.showingSearchResults = false;
         this.infiniteScroll = false;
         this.breadcrumbFolderTitle = null;
         this.clearSearch();
+        this.navigationChange.emit($event);
     }
 
     /**

lib/content-services/src/lib/content-node-selector/content-node-selector.component-data.interface.ts

@@ -36,4 +36,6 @@ export interface ContentNodeSelectorComponentData {
     showSearch?: boolean;
     showFilesInResult?: boolean;
     showDropdownSiteList?: boolean;
+    showLocalUploadButton?: boolean;
+    multipleUpload?: boolean;
 }

lib/content-services/src/lib/content-node-selector/content-node-selector.component.html

@@ -21,21 +21,33 @@ <h2>{{title}}</h2>
         [showDropdownSiteList]="data?.showDropdownSiteList"
         [showFilesInResult]="data?.showFilesInResult"
         (select)="onSelect($event)"
-        (siteChange)="onSiteChange($event)">
+        (siteChange)="onSiteChange($event)"
+        (navigationChange)="onNavigationChange($event)">
     </adf-content-node-selector-panel>
 </mat-dialog-content>
 
-<mat-dialog-actions align="end">
-    <button
-        mat-button
-        (click)="close()"
-        data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
-    </button>
+<mat-dialog-actions>
+    <div>
+        <adf-upload-button
+            *ngIf="data?.showLocalUploadButton"
+            [staticTitle]="'FORM.FIELD.UPLOAD' | translate "
+            [multipleFiles]="isMultipleSelection()"
+            [rootFolderId]="currentDirectoryId"
+            (error)="onError($event)">
+        </adf-upload-button>
+    </div>
+    <div>
+        <button
+            mat-button
+            (click)="close()"
+            data-automation-id="content-node-selector-actions-cancel">{{ 'NODE_SELECTOR.CANCEL' | translate }}
+        </button>
 
-    <button mat-button
-        [disabled]="!hasNodeSelected()"
-        class="adf-choose-action"
-        (click)="onClick()"
-        data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
-    </button>
+        <button mat-button
+                [disabled]="!chosenNode"
+                class="adf-choose-action"
+                (click)="onClick()"
+                data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
+        </button>
+    </div>
 </mat-dialog-actions>

lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss

@@ -36,7 +36,8 @@
             padding: 8px;
             background-color: mat-color($background, background);
             display: flex;
-            justify-content: flex-end;
+            flex-direction: row;
+            justify-content: space-between;
             color: mat-color($foreground, text, 0.72);
 
             button {

lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts

@@ -40,7 +40,8 @@ describe('ContentNodeSelectorDialogComponent', () => {
         select: new EventEmitter<Node>(),
         rowFilter: (shareDataRow: ShareDataRow) => shareDataRow.node.entry.name === 'impossible-name',
         imageResolver: () => 'piccolo',
-        currentFolderId: 'cat-girl-nuku-nuku'
+        currentFolderId: 'cat-girl-nuku-nuku',
+        showLocalUploadButton: true
     };
 
     setupTestBed({
@@ -175,4 +176,22 @@ describe('ContentNodeSelectorDialogComponent', () => {
             expect(titleElement.nativeElement.innerText).toBe('NODE_SELECTOR.CHOOSE_ITEM');
        });
    });
+
+    describe('Upload button', () => {
+
+        it('should be able to show upload button if showLocalUploadButton set to true', () => {
+            const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button'));
+
+            expect(adfUploadButton).not.toBeNull();
+            expect(adfUploadButton.nativeElement.innerText).toEqual('file_uploadFORM.FIELD.UPLOAD');
+        });
+
+        it('should not be able to show upload button if showLocalUploadButton set to false', () => {
+            component.data.showLocalUploadButton = false;
+            fixture.detectChanges();
+            const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button span'));
+
+            expect(adfUploadButton).toBeNull();
+        });
+    });
 });

lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts

@@ -17,9 +17,10 @@
 
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { TranslationService } from '@alfresco/adf-core';
+import { TranslationService, NotificationService } from '@alfresco/adf-core';
 import { Node } from '@alfresco/js-api';
 import { ContentNodeSelectorComponentData } from './content-node-selector.component-data.interface';
+import { NodeEntryEvent } from '../document-list/components/node.event';
 
 @Component({
     selector: 'adf-content-node-selector',
@@ -28,17 +29,19 @@ import { ContentNodeSelectorComponentData } from './content-node-selector.compon
     encapsulation: ViewEncapsulation.None
 })
 export class ContentNodeSelectorComponent {
-
     title: string;
     action: string;
     buttonActionName: string;
     chosenNode: Node[];
+    currentDirectoryId: string;
 
     constructor(private translation: TranslationService,
+                private notificationService: NotificationService,
                 @Inject(MAT_DIALOG_DATA) public data: ContentNodeSelectorComponentData) {
         this.action = data.actionName ? data.actionName.toUpperCase() : 'CHOOSE';
         this.buttonActionName = `NODE_SELECTOR.${this.action}`;
         this.title = data.title;
+        this.currentDirectoryId = data.currentFolderId;
     }
 
     close() {
@@ -49,14 +52,14 @@ export class ContentNodeSelectorComponent {
         this.chosenNode = nodeList;
     }
 
-    hasNodeSelected(): boolean {
-        return this.chosenNode?.length > 0;
-    }
-
     onSiteChange(siteTitle: string) {
         this.updateTitle(siteTitle);
     }
 
+    onNavigationChange(pathElement: NodeEntryEvent) {
+        this.currentDirectoryId = pathElement.value.id;
+    }
+
     onClick(): void {
         this.data.select.next(this.chosenNode);
         this.data.select.complete();
@@ -71,4 +74,12 @@ export class ContentNodeSelectorComponent {
     getTitleTranslation(action: string, name: string): string {
         return this.translation.instant(`NODE_SELECTOR.${action}_ITEM`, { name: this.translation.instant(name) });
     }
+
+    isMultipleSelection(): boolean {
+        return this.data.selectionMode === 'multiple';
+    }
+
+    onError(error) {
+        this.notificationService.showError(error);
+    }
 }

lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts

@@ -27,6 +27,7 @@ import { BreadcrumbModule } from '../breadcrumb/breadcrumb.module';
 import { CoreModule } from '@alfresco/adf-core';
 import { DocumentListModule } from '../document-list/document-list.module';
 import { NameLocationCellComponent } from './name-location-cell/name-location-cell.component';
+import { UploadModule } from '../upload/upload.module';
 
 @NgModule({
     imports: [
@@ -37,7 +38,8 @@ import { NameLocationCellComponent } from './name-location-cell/name-location-ce
         MaterialModule,
         SitesDropdownModule,
         BreadcrumbModule,
-        DocumentListModule
+        DocumentListModule,
+        UploadModule
     ],
     exports: [
         ContentNodeSelectorPanelComponent,