Revert "ACS-3640 a 11 y aca 881740 snackbar messages disappear without option to adjust timing (#7916)" (#7977)

This reverts commit 4d76ebe1ab.
This commit is contained in:
Denys Vuika
2022-11-15 16:30:31 +00:00
committed by GitHub
parent 54c1dbeca5
commit 2683383881
26 changed files with 51 additions and 443 deletions

View File

@@ -66,7 +66,6 @@ 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: [
@@ -178,13 +177,7 @@ export class CoreModule {
multi: true
},
{ provide: HTTP_INTERCEPTORS, useClass: AuthenticationInterceptor, multi: true },
{ provide: Authentication, useClass: AuthenticationService },
{
provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
useValue: {
duration: 10000
}
}
{ provide: Authentication, useClass: AuthenticationService }
]
};
}

View File

@@ -21,7 +21,6 @@
"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",

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;

View File

@@ -15,17 +15,17 @@
* limitations under the License.
*/
import {LiveAnnouncer} from '@angular/cdk/a11y';
import {OverlayModule} from '@angular/cdk/overlay';
import {Component} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { OverlayModule } from '@angular/cdk/overlay';
import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
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';
import {CoreTestingModule} from '../../testing/core.testing.module';
import {TranslateModule} from '@ngx-translate/core';
import { MatSnackBar, MatSnackBarModule, MatSnackBarConfig } from '@angular/material/snack-bar';
import { NotificationService } from './notification.service';
import { TranslationService } from '../../services/translation.service';
import { setupTestBed } from '../../testing/setup-test-bed';
import { CoreTestingModule } from '../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
@Component({
template: '',

View File

@@ -18,11 +18,10 @@
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';
@@ -32,10 +31,15 @@ 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 translationService: TranslationService,
private appConfigService: AppConfigService) {
this.DEFAULT_DURATION_MESSAGE = this.appConfigService.get<number>(AppConfigValues.NOTIFY_DURATION) || this.DEFAULT_DURATION_MESSAGE;
}
/**
@@ -46,7 +50,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<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any): MatSnackBarRef<any> {
openSnackMessage(message: string, config?: number | MatSnackBarConfig, interpolateArgs?: any): MatSnackBarRef<any> {
return this.dispatchNotification(message, null, config, interpolateArgs);
}
@@ -59,7 +63,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<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any): MatSnackBarRef<any> {
openSnackMessageAction(message: string, action: string, config?: number | MatSnackBarConfig, interpolateArgs?: any): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, config, interpolateArgs);
}
@@ -69,15 +73,9 @@ 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, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, {
panelClass: ERROR_SNACK_CLASS,
data: {
showAction
}
}, interpolateArgs);
showError(message: string, action?: string, interpolateArgs?: any): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, { panelClass: ERROR_SNACK_CLASS }, interpolateArgs);
}
/**
@@ -86,15 +84,9 @@ 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, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, {
panelClass: INFO_SNACK_CLASS,
data: {
showAction
}
}, interpolateArgs);
showInfo(message: string, action?: string, interpolateArgs?: any): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, { panelClass: INFO_SNACK_CLASS }, interpolateArgs);
}
/**
@@ -103,15 +95,9 @@ 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, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, {
panelClass: WARN_SNACK_CLASS,
data: {
showAction
}
}, interpolateArgs);
showWarning(message: string, action?: string, interpolateArgs?: any): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, { panelClass: WARN_SNACK_CLASS }, interpolateArgs);
}
/**
@@ -130,28 +116,20 @@ export class NotificationService {
this.notifications$.next(notification);
}
private dispatchNotification(message: string, action?: string, config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any): MatSnackBarRef<any> {
private dispatchNotification(message: string, action?: string, config?: number | MatSnackBarConfig, 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.openFromComponent<SnackbarContentComponent, SnackBarData>(SnackbarContentComponent, {
...(typeof config === 'number' && {duration: config}),
return this.snackBar.open(translatedMessage, translatedAction, {
duration: (typeof config === 'number') ? config : this.DEFAULT_DURATION_MESSAGE,
panelClass: INFO_SNACK_CLASS,
...( (typeof config === 'object') ? config : {} ),
data: {
actionLabel: translatedAction,
actionIcon: 'close',
actionIconAriaLabel: 'CLOSE',
message: translatedMessage,
showAction: true,
callActionOnIconClick: false,
...( (typeof config === 'object') ? config.data : {} )
}
...( (typeof config === 'object') ? config : {} )
});
}
private getNotificationCreator(config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>) {
private getNotificationCreator(config?: number | MatSnackBarConfig) {
let panelClass: string = null;
if (typeof config === 'object') {
panelClass = Array.isArray(config.panelClass) ? config.panelClass[0] : config.panelClass;

View File

@@ -1,18 +0,0 @@
/*!
* @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';

View File

@@ -1,20 +0,0 @@
/*!
* @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';

View File

@@ -1,25 +0,0 @@
/*!
* @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;
}

View File

@@ -1,10 +0,0 @@
<p class="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-label">
{{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>

View File

@@ -1,26 +0,0 @@
: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-label {
margin-right: 8px;
}
&.adf-snackbar-message-content-action-icon {
padding: 0;
}
}
}
}

View File

@@ -1,118 +0,0 @@
/*!
* @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-label').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-label').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-label')).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();
});
});

View File

@@ -1,43 +0,0 @@
/*!
* @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();
}
}

View File

@@ -1,41 +0,0 @@
/*!
* @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 {}

View File

@@ -45,7 +45,6 @@ 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';