[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
This commit is contained in:
arditdomi 2021-01-19 15:08:51 +01:00 committed by GitHub
parent 98705109e1
commit 58f78bca52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 114 additions and 43 deletions

View File

@ -4,33 +4,39 @@
<h2>{{title}}</h2>
</header>
<mat-dialog-content>
<adf-content-node-selector-panel
[currentFolderId]="data?.currentFolderId"
[restrictRootToCurrentFolderId]="data?.restrictRootToCurrentFolderId"
[dropdownHideMyFiles]="data?.dropdownHideMyFiles"
[dropdownSiteList]="data?.dropdownSiteList"
[rowFilter]="data?.rowFilter"
[imageResolver]="data?.imageResolver"
[isSelectionValid]="data?.isSelectionValid"
[breadcrumbTransform]="data?.breadcrumbTransform"
[excludeSiteContent]="data?.excludeSiteContent"
[selectionMode]="data?.selectionMode"
[where]="data?.where"
[showSearch]="data?.showSearch"
[showDropdownSiteList]="data?.showDropdownSiteList"
[showFilesInResult]="data?.showFilesInResult"
(currentFolder)="onCurrentFolder($event)"
(folderLoaded)="onFolderLoaded()"
(select)="onSelect($event)"
(showingSearch)="onShowingSearch($event)"
(siteChange)="onSiteChange($event)"
(navigationChange)="onNavigationChange($event)">
</adf-content-node-selector-panel>
</mat-dialog-content>
<mat-tab-group class="adf-content-node-selector-dialog-content" (selectedIndexChange)="onTabSelectionChange($event)" mat-align-tabs="start">
<mat-tab label="{{ 'NODE_SELECTOR.FILE_SERVER' | translate }}">
<adf-content-node-selector-panel
[currentFolderId]="data?.currentFolderId"
[restrictRootToCurrentFolderId]="data?.restrictRootToCurrentFolderId"
[dropdownHideMyFiles]="data?.dropdownHideMyFiles"
[dropdownSiteList]="data?.dropdownSiteList"
[rowFilter]="data?.rowFilter"
[imageResolver]="data?.imageResolver"
[isSelectionValid]="data?.isSelectionValid"
[breadcrumbTransform]="data?.breadcrumbTransform"
[excludeSiteContent]="data?.excludeSiteContent"
[selectionMode]="data?.selectionMode"
[where]="data?.where"
[showSearch]="data?.showSearch"
[showDropdownSiteList]="data?.showDropdownSiteList"
[showFilesInResult]="data?.showFilesInResult"
(currentFolder)="onCurrentFolder($event)"
(folderLoaded)="onFolderLoaded()"
(select)="onSelect($event)"
(showingSearch)="onShowingSearch($event)"
(siteChange)="onSiteChange($event)"
(navigationChange)="onNavigationChange($event)">
</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 "

View File

@ -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;

View File

@ -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(warnningMessage.nativeElement.innerText).toEqual('NODE_SELECTOR.UPLOAD_BUTTON_SEARCH_WARNING_MESSAGE');
expect(warningMessage).not.toBeNull();
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;
component.hasAllowableOperations = true;
component.showingSearch = false;
enableLocalUpload();
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).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(warnningMessage.nativeElement.innerText).toEqual('NODE_SELECTOR.UPLOAD_BUTTON_PERMISSION_WARNING_MESSAGE');
expect(warningMessage).not.toBeNull();
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);
});
});
});

View File

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

View File

@ -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": {

View File

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