[AAE-4426] Add upload from local tab in attach file widget (#6540)

* [AAE-4426] Add upload from local tab in attach file widget

* Align e2e with the new behaviour when uploading a file

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

@@ -4,33 +4,39 @@
     <h2>{{title}}</h2>
 </header>
 
-<mat-dialog-content>
+<mat-tab-group class="adf-content-node-selector-dialog-content" (selectedIndexChange)="onTabSelectionChange($event)" mat-align-tabs="start">
-    <adf-content-node-selector-panel
+    <mat-tab label="{{ 'NODE_SELECTOR.FILE_SERVER' | translate }}">
-        [currentFolderId]="data?.currentFolderId"
+            <adf-content-node-selector-panel
-        [restrictRootToCurrentFolderId]="data?.restrictRootToCurrentFolderId"
+                [currentFolderId]="data?.currentFolderId"
-        [dropdownHideMyFiles]="data?.dropdownHideMyFiles"
+                [restrictRootToCurrentFolderId]="data?.restrictRootToCurrentFolderId"
-        [dropdownSiteList]="data?.dropdownSiteList"
+                [dropdownHideMyFiles]="data?.dropdownHideMyFiles"
-        [rowFilter]="data?.rowFilter"
+                [dropdownSiteList]="data?.dropdownSiteList"
-        [imageResolver]="data?.imageResolver"
+                [rowFilter]="data?.rowFilter"
-        [isSelectionValid]="data?.isSelectionValid"
+                [imageResolver]="data?.imageResolver"
-        [breadcrumbTransform]="data?.breadcrumbTransform"
+                [isSelectionValid]="data?.isSelectionValid"
-        [excludeSiteContent]="data?.excludeSiteContent"
+                [breadcrumbTransform]="data?.breadcrumbTransform"
-        [selectionMode]="data?.selectionMode"
+                [excludeSiteContent]="data?.excludeSiteContent"
-        [where]="data?.where"
+                [selectionMode]="data?.selectionMode"
-        [showSearch]="data?.showSearch"
+                [where]="data?.where"
-        [showDropdownSiteList]="data?.showDropdownSiteList"
+                [showSearch]="data?.showSearch"
-        [showFilesInResult]="data?.showFilesInResult"
+                [showDropdownSiteList]="data?.showDropdownSiteList"
-        (currentFolder)="onCurrentFolder($event)"
+                [showFilesInResult]="data?.showFilesInResult"
-        (folderLoaded)="onFolderLoaded()"
+                (currentFolder)="onCurrentFolder($event)"
-        (select)="onSelect($event)"
+                (folderLoaded)="onFolderLoaded()"
-        (showingSearch)="onShowingSearch($event)"
+                (select)="onSelect($event)"
-        (siteChange)="onSiteChange($event)"
+                (showingSearch)="onShowingSearch($event)"
-        (navigationChange)="onNavigationChange($event)">
+                (siteChange)="onSiteChange($event)"
-    </adf-content-node-selector-panel>
+                (navigationChange)="onNavigationChange($event)">
-</mat-dialog-content>
+            </adf-content-node-selector-panel>
+    </mat-tab>
+    <mat-tab *ngIf="data?.showLocalUploadButton"
+             label="{{ 'NODE_SELECTOR.UPLOAD_FROM_DEVICE' | translate }}"
+             [disabled]="isNotAllowedToUpload()">
+    </mat-tab>
+</mat-tab-group>
 
 <mat-dialog-actions>
-    <div>
+    <div *ngIf="isLocalUploadTabSelected()">
         <ng-container *ngIf="data?.showLocalUploadButton">
             <adf-upload-button
                 [staticTitle]="'FORM.FIELD.UPLOAD' | translate "

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

@@ -4,6 +4,10 @@
     $background: map-get($theme, background);
 
     .adf-content-node-selector-dialog {
+        &-content {
+            padding-left: 24px;
+            padding-right: 24px;
+        }
 
         .mat-dialog-title {
             margin-left: 24px;

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

@@ -105,6 +105,20 @@ describe('ContentNodeSelectorComponent', () => {
         fixture.destroy();
     });
 
+    function enableLocalUpload() {
+        component.data.showLocalUploadButton = true;
+        component.hasAllowableOperations = true;
+        component.showingSearch = false;
+        component.isLoading = false;
+    }
+
+    function selectTabByIndex(tabIndex: number) {
+        const uploadFromLocalTab = fixture.debugElement.queryAll(By.css('.mat-tab-label'))[tabIndex];
+        const attributes = uploadFromLocalTab.nativeNode.attributes as NamedNodeMap;
+        const tabPositionInSet = Number(attributes.getNamedItem('aria-posinset').value) - 1;
+        component.onTabSelectionChange(tabPositionInSet);
+    }
+
     describe('Data injecting with the "Material dialog way"', () => {
 
         it('should show the INJECTED title', () => {
@@ -228,7 +242,11 @@ describe('ContentNodeSelectorComponent', () => {
 
     describe('Upload button', () => {
 
-        it('should be able to show upload button if showLocalUploadButton set to true', () => {
+        it('should be able to show upload button if showLocalUploadButton set to true', async () => {
+            enableLocalUpload();
+            selectTabByIndex(1);
+
+            fixture.detectChanges();
             const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button'));
 
             expect(adfUploadButton).not.toBeNull();
@@ -236,6 +254,7 @@ describe('ContentNodeSelectorComponent', () => {
         });
 
         it('should be able to disable UploadButton if showingSearch set to true', () => {
+            selectTabByIndex(1);
             component.showingSearch = true;
             component.hasAllowableOperations = true;
 
@@ -247,6 +266,7 @@ describe('ContentNodeSelectorComponent', () => {
         });
 
         it('should be able to enable UploadButton if showingSearch set to false', () => {
+            selectTabByIndex(1);
             component.showingSearch = false;
             component.hasAllowableOperations = true;
 
@@ -261,12 +281,13 @@ describe('ContentNodeSelectorComponent', () => {
             component.data.showLocalUploadButton = true;
             component.showingSearch = true;
             component.hasAllowableOperations = false;
+            selectTabByIndex(1);
 
             fixture.detectChanges();
-            const warnningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
+            const warningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
 
-            expect(warnningMessage).not.toBeNull();
+            expect(warningMessage).not.toBeNull();
-            expect(warnningMessage.nativeElement.innerText).toEqual('NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE');
+            expect(warningMessage.nativeElement.innerText).toEqual('NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE');
         });
 
         it('should not be able to show warning message if it is not in search mode', () => {
@@ -274,13 +295,14 @@ describe('ContentNodeSelectorComponent', () => {
             component.showingSearch = false;
 
             fixture.detectChanges();
-            const warnningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
+            const warningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
 
-            expect(warnningMessage).toBeNull();
+            expect(warningMessage).toBeNull();
         });
 
         it('should be able to disable UploadButton if user does not have allowable operations', () => {
             component.hasAllowableOperations = false;
+            selectTabByIndex(1);
 
             fixture.detectChanges();
             const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button'));
@@ -290,6 +312,7 @@ describe('ContentNodeSelectorComponent', () => {
         });
 
         it('should be able to enable UploadButton if user has allowable operations', () => {
+            selectTabByIndex(1);
             component.hasAllowableOperations = true;
 
             fixture.detectChanges();
@@ -300,14 +323,12 @@ describe('ContentNodeSelectorComponent', () => {
         });
 
         it('should not be able to show warning message if user has allowable operations', () => {
-            component.data.showLocalUploadButton = true;
+            enableLocalUpload();
-            component.hasAllowableOperations = true;
+            selectTabByIndex(1);
-            component.showingSearch = false;
-
             fixture.detectChanges();
-            const warnningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
+            const warningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
 
-            expect(warnningMessage).toBeNull();
+            expect(warningMessage).toBeNull();
         });
 
         it('should be able to show warning message if user does not have allowable operations', () => {
@@ -315,12 +336,13 @@ describe('ContentNodeSelectorComponent', () => {
             component.hasAllowableOperations = false;
             component.showingSearch = false;
             component.isLoading = false;
+            selectTabByIndex(1);
 
             fixture.detectChanges();
-            const warnningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
+            const warningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
 
-            expect(warnningMessage).not.toBeNull();
+            expect(warningMessage).not.toBeNull();
-            expect(warnningMessage.nativeElement.innerText).toEqual('NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE');
+            expect(warningMessage.nativeElement.innerText).toEqual('NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE');
         });
 
         it('should not be able to show warning message while loading documents', () => {
@@ -330,9 +352,24 @@ describe('ContentNodeSelectorComponent', () => {
             component.isLoading = true;
 
             fixture.detectChanges();
-            const warnningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
+            const warningMessage = fixture.debugElement.query(By.css('.adf-content-node-upload-button-warning-message span'));
 
-            expect(warnningMessage).toBeNull();
+            expect(warningMessage).toBeNull();
+        });
+    });
+
+    describe('Tabs', () => {
+        it('should isFileServerTabSelected return true when tabIndex 0 is selected', () => {
+            selectTabByIndex(0);
+
+            expect(component.isFileServerTabSelected()).toEqual(true);
+        });
+
+        it('should isLocalUploadTabSelected return true when tabIndex 1 is selected', () => {
+            enableLocalUpload();
+            selectTabByIndex(1);
+
+            expect(component.isLocalUploadTabSelected()).toEqual(true);
         });
     });
 });

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

@@ -38,6 +38,7 @@ export class ContentNodeSelectorComponent implements OnInit {
     showingSearch = false;
     hasAllowableOperations = false;
     isLoading = true;
+    selectedTabIndex: number = 0;
 
     constructor(private translation: TranslationService,
                 private contentService: ContentService,
@@ -124,4 +125,16 @@ export class ContentNodeSelectorComponent implements OnInit {
     onFolderLoaded() {
         this.isLoading = false;
     }
+
+    onTabSelectionChange(tabIndex: number) {
+        this.selectedTabIndex = tabIndex;
+    }
+
+    isFileServerTabSelected (): boolean {
+        return this.selectedTabIndex === 0;
+    }
+
+    isLocalUploadTabSelected (): boolean {
+        return this.selectedTabIndex === 1;
+    }
 }

lib/content-services/src/lib/i18n/en.json

@@ -88,7 +88,9 @@
     "SEARCH_RESULTS": "Search results",
     "SELECT_LOCATION": "Select Location",
     "UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE": "You can't upload a file whilst a search is still running",
-    "UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE": "User doesn't have permission to upload content to the folder"
+    "UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE": "User doesn't have permission to upload content to the folder",
+    "FILE_SERVER": "File server",
+    "UPLOAD_FROM_DEVICE": "Upload from your device"
   },
   "OPERATION": {
     "SUCCESS": {

lib/testing/src/lib/content-services/dialog/content-node-selector-dialog.page.ts

@@ -22,6 +22,7 @@ import { BrowserActions } from '../../core/utils/browser-actions';
 import { DropdownPage } from '../../core/pages/material/dropdown.page';
 import { BreadcrumbDropdownPage } from '../pages/breadcrumb/breadcrumb-dropdown.page';
 import { Logger } from '../../core/utils/logger';
+import { TabPage } from '../../core/pages/form/widgets/tab.page';
 
 export class ContentNodeSelectorDialogPage {
     dialog = element(by.css(`adf-content-node-selector`));
@@ -36,6 +37,10 @@ export class ContentNodeSelectorDialogPage {
     dataTable = this.contentList.dataTablePage();
     siteListDropdown = new DropdownPage(this.dialog.element(by.css(`mat-select[data-automation-id='site-my-files-option']`)));
     breadcrumbDropdownPage = new BreadcrumbDropdownPage();
+    tabPage: TabPage = new TabPage();
+
+    uploadFromLocalTabName = 'Upload from your device';
+    fileServerTabName = 'File server';
 
     async checkDialogIsDisplayed(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.dialog);
@@ -140,10 +145,14 @@ export class ContentNodeSelectorDialogPage {
         await this.dataTable.waitForTableBody();
         await this.breadcrumbDropdownPage.checkCurrentFolderIsDisplayed();
 
+        await this.tabPage.clickTabByLabel(this.uploadFromLocalTabName);
+
         const uploadButton = element(by.css('adf-upload-button input'));
         await BrowserVisibility.waitUntilElementIsPresent(uploadButton);
         await uploadButton.sendKeys(fileLocation);
 
+        await this.tabPage.clickTabByLabel(this.fileServerTabName);
+
         await this.dataTable.waitForTableBody();
         await this.dataTable.waitTillContentLoaded();
         await this.dataTable.checkRowContentIsDisplayed(fileName);