inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-3640] Reverting reverted changes for a 11 y aca 881740 snackbar messages disappear without option to adjust timing (#7988)

Browse Source 
* ACS-3640 Increasing time of autoclosing snackbar and adding possibility to add icon to snackbar content

* ACS-3640 Fix lint issues

* ACS-3640 Addressing PR comments and adding possibility to display icon together with label

* ACS-3640 Fix lint issues

* ACS-3640 Added possibility to change showAction for different types of notifications

* ACS-3640 Addressed PR comments

* ACS-3640 Corrected title for snackbar content md file and remove redundant test for snackbar content

* ACS-3640 Fixed lint issues

* ACS-3640 Fixed unit tests

* ACS-3640 Fixed e2e tests

* ACS-3640 Correction after rebasing

* ACS-3640 Use data automation id

* ACS-3640 Corrected one more selector

* ACS-3640 Added spaces

* ACS-3640 Added spaces

* ACS-3640 Added spaces

* ACS-3640 Added spaces
This commit is contained in:
AleksanderSklorz
2022-11-21 09:37:18 +01:00
committed by GitHub
parent a241fc804c
commit eff4680081
26 changed files with 436 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lib/core/src/lib/core.module.ts
View File

@@ -66,6 +66,7 @@ import { LegacyApiClientModule } from './api-factories/legacy-api-client.module'
import { RichTextEditorModule } from './rich-text-editor/rich-text-editor.module';
import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthenticationService } from './services/authentication.service';
import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
@NgModule({
imports: [
@@ -177,7 +178,13 @@ export class CoreModule {
multi: true
},
{ provide: HTTP_INTERCEPTORS, useClass: AuthenticationInterceptor, multi: true },
{ provide: Authentication, useClass: AuthenticationService }
{ provide: Authentication, useClass: AuthenticationService },
{
provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
useValue: {
duration: 10000
}
}
]
};
}

1
lib/core/src/lib/i18n/en.json
View File

@@ -21,6 +21,7 @@
"UNCLAIM": "RELEASE",
"START PROCESS": "START PROCESS",
"DATA_LOADING": "Data is loading",
"CLOSE": "CLOSE",
"NOTIFICATIONS": {
"NO_MESSAGE": "You have no notifications at this time.",
"TITLE": "Notifications",

4
lib/core/src/lib/notifications/components/notification-history.component.spec.ts
View File

@@ -129,7 +129,7 @@ describe('Notification History Component', () => {
expect(callBackSpy).toHaveBeenCalled();
done();
});
});
}, 10000);
it('should show load more button when there are more notifications', (done) => {
fixture.detectChanges();
@@ -164,7 +164,7 @@ describe('Notification History Component', () => {
expect(notification).toBeDefined();
done();
});
});
}, 10000);
it('should be able to change the maximum number of notifications displayed', (done) => {
component.maxNotifications = 10;

2
lib/core/src/lib/notifications/services/notification.service.spec.ts
View File

@@ -20,7 +20,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatSnackBar, MatSnackBarModule, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MatSnackBar, MatSnackBarConfig, MatSnackBarModule } from '@angular/material/snack-bar';
import { NotificationService } from './notification.service';
import { TranslationService } from '../../services/translation.service';
import { setupTestBed } from '../../testing/setup-test-bed';

64
lib/core/src/lib/notifications/services/notification.service.ts
View File

@@ -18,10 +18,11 @@
import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarRef, MatSnackBarConfig } from '@angular/material/snack-bar';
import { TranslationService } from '../../services/translation.service';
import { AppConfigService, AppConfigValues } from '../../app-config/app-config.service';
import { Subject } from 'rxjs';
import { NotificationModel } from '../models/notification.model';
import { info, warning, error } from '../helpers/notification.factory';
import { SnackbarContentComponent } from '../../snackbar-content';
import { SnackBarData } from '../../snackbar-content/snack-bar-data';
const INFO_SNACK_CLASS = 'adf-info-snackbar';
const WARN_SNACK_CLASS = 'adf-warning-snackbar';
@@ -31,15 +32,10 @@ const ERROR_SNACK_CLASS = 'adf-error-snackbar';
providedIn: 'root'
})
export class NotificationService {
DEFAULT_DURATION_MESSAGE: number = 5000;
notifications$: Subject<NotificationModel> = new Subject();
constructor(private snackBar: MatSnackBar,
private translationService: TranslationService,
private appConfigService: AppConfigService) {
this.DEFAULT_DURATION_MESSAGE = this.appConfigService.get<number>(AppConfigValues.NOTIFY_DURATION) || this.DEFAULT_DURATION_MESSAGE;
private translationService: TranslationService) {
}
/**
@@ -50,7 +46,7 @@ export class NotificationService {
* @param interpolateArgs The interpolation parameters to add for the translation
* @returns Information/control object for the SnackBar
*/
openSnackMessage(message: string, config?: number | MatSnackBarConfig, interpolateArgs?: any): MatSnackBarRef<any> {
openSnackMessage(message: string, config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any): MatSnackBarRef<any> {
return this.dispatchNotification(message, null, config, interpolateArgs);
}
@@ -63,7 +59,7 @@ export class NotificationService {
* @param interpolateArgs The interpolation parameters to add for the translation
* @returns Information/control object for the SnackBar
*/
openSnackMessageAction(message: string, action: string, config?: number | MatSnackBarConfig, interpolateArgs?: any): MatSnackBarRef<any> {
openSnackMessageAction(message: string, action: string, config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, config, interpolateArgs);
}
@@ -73,9 +69,15 @@ export class NotificationService {
* @param message Text message or translation key for the message.
* @param action Action name
* @param interpolateArgs The interpolation parameters to add for the translation
* @param showAction True if action should be visible, false if not. Default: true.
*/
showError(message: string, action?: string, interpolateArgs?: any): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, { panelClass: ERROR_SNACK_CLASS }, interpolateArgs);
showError(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, {
panelClass: ERROR_SNACK_CLASS,
data: {
showAction
}
}, interpolateArgs);
}
/**
@@ -84,9 +86,15 @@ export class NotificationService {
* @param message Text message or translation key for the message.
* @param action Action name
* @param interpolateArgs The interpolation parameters to add for the translation
* @param showAction True if action should be visible, false if not. Default: true.
*/
showInfo(message: string, action?: string, interpolateArgs?: any): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, { panelClass: INFO_SNACK_CLASS }, interpolateArgs);
showInfo(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, {
panelClass: INFO_SNACK_CLASS,
data: {
showAction
}
}, interpolateArgs);
}
/**
@@ -95,9 +103,15 @@ export class NotificationService {
* @param message Text message or translation key for the message.
* @param action Action name
* @param interpolateArgs The interpolation parameters to add for the translation
* @param showAction True if action should be visible, false if not. Default: true.
*/
showWarning(message: string, action?: string, interpolateArgs?: any): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, { panelClass: WARN_SNACK_CLASS }, interpolateArgs);
showWarning(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, {
panelClass: WARN_SNACK_CLASS,
data: {
showAction
}
}, interpolateArgs);
}
/**
@@ -116,20 +130,28 @@ export class NotificationService {
this.notifications$.next(notification);
}
private dispatchNotification(message: string, action?: string, config?: number | MatSnackBarConfig, interpolateArgs?: any): MatSnackBarRef<any> {
private dispatchNotification(message: string, action?: string, config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any): MatSnackBarRef<any> {
const translatedMessage: string = this.translationService.instant(message, interpolateArgs);
const translatedAction: string = this.translationService.instant(action, interpolateArgs);
const createNotification = this.getNotificationCreator(config);
this.notifications$.next(createNotification(translatedMessage));
return this.snackBar.open(translatedMessage, translatedAction, {
duration: (typeof config === 'number') ? config : this.DEFAULT_DURATION_MESSAGE,
return this.snackBar.openFromComponent<SnackbarContentComponent, SnackBarData>(SnackbarContentComponent, {
...(typeof config === 'number' && {duration: config}),
panelClass: INFO_SNACK_CLASS,
...( (typeof config === 'object') ? config : {} )
...( (typeof config === 'object') ? config : {} ),
data: {
actionLabel: translatedAction,
actionIcon: 'close',
actionIconAriaLabel: 'CLOSE',
message: translatedMessage,
showAction: true,
callActionOnIconClick: false,
...( (typeof config === 'object') ? config.data : {} )
}
});
}
private getNotificationCreator(config?: number | MatSnackBarConfig) {
private getNotificationCreator(config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>) {
let panelClass: string = null;
if (typeof config === 'object') {
panelClass = Array.isArray(config.panelClass) ? config.panelClass[0] : config.panelClass;

18
lib/core/src/lib/snackbar-content/index.ts Normal file
View File

@@ -0,0 +1,18 @@
/*!
* @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.
*/
export * from './public-api';

20
lib/core/src/lib/snackbar-content/public-api.ts Normal file
View File

@@ -0,0 +1,20 @@
/*!
* @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.
*/
export * from './snackbar-content.component';
export * from './snackbar-content.module';
export * from './snack-bar-data';

25
lib/core/src/lib/snackbar-content/snack-bar-data.ts Normal file
View File

@@ -0,0 +1,25 @@
/*!
* @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.
*/
export interface SnackBarData {
actionLabel?: string;
actionIcon?: string;
actionIconAriaLabel?: string;
message: string;
showAction?: boolean;
callActionOnIconClick?: boolean;
}

11
lib/core/src/lib/snackbar-content/snackbar-content.component.html Normal file
View File

@@ -0,0 +1,11 @@
<p class="adf-snackbar-message-content" data-automation-id="adf-snackbar-message-content">{{ data.message }}</p>
<div *ngIf="data.showAction" class="adf-snackbar-message-content-action">
<button mat-button (click)="snackBarRef.dismissWithAction()" *ngIf="data.actionLabel" class="adf-snackbar-message-content-action-button"
data-automation-id="adf-snackbar-message-content-action-button">
{{data.actionLabel}}
</button>
<button mat-button *ngIf="data.actionIcon" (click)="onIconClicked()" class="adf-snackbar-message-content-action-icon"
[attr.aria-label]="data.actionIconAriaLabel | translate">
<mat-icon>{{ data.actionIcon }}</mat-icon>
</button>
</div>

26
lib/core/src/lib/snackbar-content/snackbar-content.component.scss Normal file
View File

@@ -0,0 +1,26 @@
:host {
display: flex;
align-items: center;
justify-content: space-between;
.adf-snackbar-message-content {
margin: 0;
}
.adf-snackbar-message-content-action {
margin-left: 24px;
.mat-button {
min-width: 0;
margin: -8px;
&.adf-snackbar-message-content-action-button {
margin-right: 8px;
}
&.adf-snackbar-message-content-action-icon {
padding: 0;
}
}
}
}

118
lib/core/src/lib/snackbar-content/snackbar-content.component.spec.ts Normal file
View File

@@ -0,0 +1,118 @@
/*!
* @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 { SnackbarContentComponent } from '@alfresco/adf-core';
import { MatIcon, MatIconModule } from '@angular/material/icon';
import { MAT_SNACK_BAR_DATA, MatSnackBarModule, MatSnackBarRef } from '@angular/material/snack-bar';
import { MatButtonModule } from '@angular/material/button';
import { By } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';
describe('SnackbarContentComponent', () => {
let component: SnackbarContentComponent;
let fixture: ComponentFixture<SnackbarContentComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [SnackbarContentComponent],
imports: [
MatIconModule,
MatSnackBarModule,
MatButtonModule,
TranslateModule.forRoot()
],
providers: [{
provide: MatSnackBarRef,
useValue: {
dismissWithAction() {
}
}
}, {
provide: MAT_SNACK_BAR_DATA,
useValue: {}
}]
})
.compileComponents();
fixture = TestBed.createComponent(SnackbarContentComponent);
component = fixture.componentInstance;
});
it('should display message if message in data is set', () => {
component.data = {
message: 'Some message'
};
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('.adf-snackbar-message-content').innerText).toBe(component.data.message);
});
it('should not display message if message in data is not set', () => {
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('.adf-snackbar-message-content').innerText).toBe('');
});
it('should call snackBarRef.dismissWithAction() when button is clicked', () => {
component.data = {
message: '',
showAction: true,
actionLabel: 'Some action'
};
spyOn(component.snackBarRef, 'dismissWithAction');
fixture.detectChanges();
fixture.nativeElement.querySelector('.adf-snackbar-message-content-action-button').click();
expect(component.snackBarRef.dismissWithAction).toHaveBeenCalled();
});
it('should display actionLabel if actionLabel in data is set', () => {
component.data = {
message: '',
showAction: true,
actionLabel: 'Some action action'
};
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('.adf-snackbar-message-content-action-button').innerText).toBe(component.data.actionLabel);
});
it('should not display actionLabel if actionLabel in data is not set', () => {
component.data = {
message: '',
showAction: true
};
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('.adf-snackbar-message-content-action-button')).toBeNull();
});
it('should render icon if actionIcon in data is set', () => {
component.data = {
message: '',
showAction: true,
actionIcon: 'close'
};
fixture.detectChanges();
expect(fixture.debugElement.query(By.directive(MatIcon))).toBeDefined();
});
it('should not render icon if actionIcon in data is not set', () => {
component.data = {
message: '',
showAction: true
};
fixture.detectChanges();
expect(fixture.debugElement.query(By.directive(MatIcon))).toBeNull();
});
});

43
lib/core/src/lib/snackbar-content/snackbar-content.component.ts Normal file
View File

@@ -0,0 +1,43 @@
/*!
* @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, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
import { SnackBarData } from './snack-bar-data';
@Component({
selector: 'adf-snackbar-content',
templateUrl: './snackbar-content.component.html',
styleUrls: ['./snackbar-content.component.scss'],
host: {
class: 'mat-simple-snackbar'
}
})
export class SnackbarContentComponent {
constructor(
public snackBarRef: MatSnackBarRef<SnackbarContentComponent>,
@Inject(MAT_SNACK_BAR_DATA) public data: SnackBarData
) {
if (!data) {
this.data = {message: ''};
}
}
onIconClicked(): void {
this.data.callActionOnIconClick ? this.snackBarRef.dismissWithAction() : this.snackBarRef.dismiss();
}
}

41
lib/core/src/lib/snackbar-content/snackbar-content.module.ts Normal file
View File

@@ -0,0 +1,41 @@
/*!
* @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 { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { CommonModule } from '@angular/common';
import { SnackbarContentComponent } from './snackbar-content.component';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatButtonModule } from '@angular/material/button';
import { TranslateModule } from '@ngx-translate/core';
@NgModule({
imports: [
CommonModule,
MatIconModule,
MatSnackBarModule,
MatButtonModule,
TranslateModule
],
declarations: [
SnackbarContentComponent
],
exports: [
SnackbarContentComponent
]
})
export class SnackbarContentModule {}

1
lib/core/src/public-api.ts
View File

@@ -45,6 +45,7 @@ export * from './lib/notifications/index';
export * from './lib/search-text/index';
export * from './lib/blank-page/index';
export * from './lib/rich-text-editor/index';
export * from './lib/snackbar-content/index';
export * from './lib/utils/index';
export * from './lib/interface/index';