[Alert, Alert Group, Alert Service]: New components and service

ngx-fudis/projects/dev/src/app/app.component.html

@@ -1,6 +1,6 @@
 <ng-container *transloco="let t">
  <div class="root-style">
- <!-- <fudis-alert-group /> -->
+ <fudis-alert-group />
 
  <fudis-grid [columns]="4" [marginTop]="'lg'">
  <fudis-grid-item [columns]="'3 / 4'" [alignSelfX]="'end'" [alignSelfY]="'end'">
@@ -24,7 +24,7 @@
  <fudis-heading [level]="3" fudisGridItem [columns]="'auto'">
  <fudis-link [href]="'#'" [title]="'Link inside a heading'"></fudis-link>
  </fudis-heading>
- <!-- <fudis-button [label]="'Trigger alert'" (handleClick)="triggerAlert()" /> -->
+ <fudis-button [label]="'Trigger alert'" (handleClick)="triggerAlert()" />
  <fudis-button [label]="'Open dialog with form'" (handleClick)="openDialog()" />
  <fudis-body-text *ngIf="_message"
  >This value comes from the closed dialog input:

ngx-fudis/projects/dev/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { TranslocoService } from '@ngneat/transloco';
 import {
- // FudisAlertService,
+ FudisAlertService,
  FudisDialogService,
  FudisGridService,
  FudisTranslationService,
@@ -10,7 +10,7 @@ import {
 } from 'ngx-fudis';
 import { DOCUMENT } from '@angular/common';
 import { FudisSelectOption, FudisCheckboxOption } from 'dist/ngx-fudis/lib/types/forms';
-// import { FudisAlert } from 'dist/ngx-fudis/lib/types/miscellaneous';
+import { FudisAlert } from 'dist/ngx-fudis/lib/types/miscellaneous';
 import { DialogTestContentComponent } from './dialog-test/dialog-test-content/dialog-test-content.component';
 import { FudisGridAlign } from 'projects/ngx-fudis/src/lib/types/grid';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@@ -28,7 +28,7 @@ export class AppComponent implements OnInit {
  private _translocoService: TranslocoService,
  private _gridService: FudisGridService,
  private _fudisLanguage: FudisTranslationService,
- // private _alertService: FudisAlertService,
+ private _alertService: FudisAlertService,
  private _errorSummaryService: FudisErrorSummaryService,
  private _breakpointService: FudisBreakpointService,
  ) {
@@ -93,16 +93,14 @@ export class AppComponent implements OnInit {
  this.getApplicationFontSize();
  }
 
- // triggerAlert(): void {
- // const newAlert: FudisAlert = {
- // message: 'Something dangerous MIGHT happen.',
- // type: 'warning',
- // id: 'my-own-id-3',
- // routerLinkUrl: '/',
- // linkTitle: 'More info about this warning.',
- // };
- // this._alertService.addAlert(newAlert);
- // }
+ triggerAlert(): void {
+ const newAlert: FudisAlert = {
+ message: this._translocoService.selectTranslate('alertText'),
+ type: 'warning',
+ id: 'my-own-id-3',
+ };
+ this._alertService.addAlert(newAlert);
+ }
 
  getApplicationFontSize(): void {
  this.fontSize = getComputedStyle(

ngx-fudis/projects/dev/src/assets/i18n/en.json

@@ -1,4 +1,5 @@
 {
+ "alertText": "Something dangerous MIGHT happen",
  "label": "This is text input",
  "change_language": "Change language",
  "helpText": "This is English.",

ngx-fudis/projects/dev/src/assets/i18n/fi.json

@@ -1,4 +1,5 @@
 {
+ "alertText": "Jotain kamalaa voipi tapahtua",
  "label": "Tämä on tekstikenttä",
  "change_language": "Vaihda kieli",
  "helpText": "Kivaa jos näet minut suomeksi!",

ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert-group/alert-group.component.html

@@ -1,18 +1,15 @@
 <section
- *ngIf="_visible"
+ *ngIf="(_visible | async) && (_alertService.alerts | async) as alerts"
  class="fudis-alert-group fudis-alert-group__{{ position }}"
- [attr.aria-label]="_alertList().length > 0 ? _alertGroupLabel + ': ' + _alertList().length : null"
+ [attr.aria-label]="alerts.length > 0 ? (_alertGroupLabel | async) + ': ' + alerts.length : null"
 >
- <ng-container *ngFor="let alert of _alertList()">
+ <ng-container *ngFor="let alert of alerts">
  <fudis-alert
- [initialFocus]="alert.initialFocus"
  [variant]="alert.type"
  [message]="alert.message"
  [id]="alert.id"
  [htmlId]="alert.htmlId"
  [buttonId]="alert.buttonId"
- [linkTitle]="alert.linkTitle"
- [link]="alert.routerLinkUrl"
  />
  </ng-container>
 </section>

ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert-group/alert-group.component.spec.ts

@@ -1,31 +1,30 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MockComponent } from 'ng-mocks';
 import { AlertGroupComponent } from './alert-group.component';
 import { FudisDialogService } from '../../../services/dialog/dialog.service';
 import { BodyTextComponent } from '../../typography/body-text/body-text.component';
 import { FudisAlertService } from '../../../services/alert/alert.service';
-import { FudisAlert } from '../../../types/miscellaneous';
+import { FudisAlert, fudisAlertPositionArray } from '../../../types/miscellaneous';
 import { AlertComponent } from '../alert/alert.component';
 import { IconComponent } from '../../icon/icon.component';
 import { getElement, sortClasses } from '../../../utilities/tests/utilities';
+import { BehaviorSubject } from 'rxjs';
+import { SimpleChange } from '@angular/core';
 
-// TODO: fix & refactor when these are again published
-
-describe.skip('AlertGroupComponent', () => {
+describe('AlertGroupComponent', () => {
  let component: AlertGroupComponent;
  let fixture: ComponentFixture<AlertGroupComponent>;
  let alertService: FudisAlertService;
  let dialogService: FudisDialogService;
 
- beforeEach(() => {
- TestBed.configureTestingModule({
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
  imports: [MatDialogModule],
  declarations: [
  AlertGroupComponent,
- BodyTextComponent,
  AlertComponent,
+ BodyTextComponent,
  MockComponent(IconComponent),
  ],
  providers: [
@@ -39,7 +38,10 @@ describe.skip('AlertGroupComponent', () => {
  useValue: [],
  },
  ],
- });
+ }).compileComponents();
+
+ alertService = TestBed.inject(FudisAlertService);
+ dialogService = TestBed.inject(FudisDialogService);
  fixture = TestBed.createComponent(AlertGroupComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
@@ -50,55 +52,33 @@ describe.skip('AlertGroupComponent', () => {
  });
 
  describe('Basic inputs', () => {
- it('should have default CSS classes', () => {
- const element = getElement(fixture, 'section');
-
- expect(sortClasses(element.className)).toEqual(
- sortClasses('fudis-alert-group fudis-alert-group__fixed'),
- );
- });
-
- it('should have absolute position', () => {
- component.position = 'absolute';
- fixture.detectChanges();
-
- const element = getElement(fixture, 'section');
-
- expect(sortClasses(element.className)).toEqual(
- sortClasses('fudis-alert-group fudis-alert-group__absolute'),
- );
- });
-
- it('should have static position', () => {
- component.position = 'static';
- fixture.detectChanges();
-
- const element = getElement(fixture, 'section');
-
- expect(sortClasses(element.className)).toEqual(
- sortClasses('fudis-alert-group fudis-alert-group__static'),
- );
+ it('should update CSS class according to position input', () => {
+ fudisAlertPositionArray.forEach((position) => {
+ const element = getElement(fixture, '.fudis-alert-group');
+ fixture.componentRef.setInput('position', `${position}`);
+ fixture.detectChanges();
+
+ expect(sortClasses(element.className)).toEqual(
+ sortClasses(`fudis-alert-group fudis-alert-group__${position}`),
+ );
+ });
  });
  });
 
  describe('Functionality with services', () => {
  beforeEach(() => {
- alertService = TestBed.inject(FudisAlertService);
- dialogService = TestBed.inject(FudisDialogService);
-
- jest.spyOn(alertService, 'getAlertsSignal').mockImplementation();
-
  const firstAlert: FudisAlert = {
- message: 'Test message',
+ message: new BehaviorSubject<string>('Test message'),
  id: 'my-test-id-1',
  type: 'info',
  };
 
  const secondAlert: FudisAlert = {
- message: 'Second test message',
+ message: new BehaviorSubject<string>('Second test message'),
  id: 'my-test-id-2',
  type: 'warning',
  };
+
  alertService.addAlert(firstAlert);
  alertService.addAlert(secondAlert);
  });
@@ -111,7 +91,7 @@ describe.skip('AlertGroupComponent', () => {
  expect(childAlerts.length).toEqual(2);
  });
 
- it('should have one alert as children after one is dismissed', () => {
+ it('should have one alert as child after one is dismissed', () => {
  alertService.dismissAlert('my-test-id-1');
  fixture.detectChanges();
 
@@ -123,7 +103,7 @@ describe.skip('AlertGroupComponent', () => {
  });
 
  it('should not be visible, if Dialog is open', () => {
- dialogService.setDialogOpenSignal(true);
+ dialogService.setDialogOpenStatus(true);
 
  fixture.detectChanges();
 
@@ -132,7 +112,7 @@ describe.skip('AlertGroupComponent', () => {
  });
 
  it('should be visible, if Dialog is closed', () => {
- dialogService.setDialogOpenSignal(false);
+ dialogService.setDialogOpenStatus(false);
 
  fixture.detectChanges();
 
@@ -141,11 +121,14 @@ describe.skip('AlertGroupComponent', () => {
  });
 
  it('should not be visible, if Dialog is not open and Alert Group is inside dialog', () => {
- component.insideDialog = true;
+ dialogService.setDialogOpenStatus(false);
 
- component.ngAfterViewInit();
+ component.insideDialog = true;
+ component.ngOnChanges({
+ insideDialog: new SimpleChange('false', component.insideDialog, true),
+ });
 
- fixture.detectChanges();
+ fixture.autoDetectChanges();
 
  expect(fixture.nativeElement.querySelector('section')).toBeNull();
  expect(component.getVisibleStatus()).toEqual(false);

ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert-group/alert-group.component.ts

@@ -1,82 +1,85 @@
-import { ChangeDetectorRef, Component, Input, AfterViewInit, Signal, effect } from '@angular/core';
-
-import { FudisAlertElement } from '../../../types/miscellaneous';
+import { Component, Input, effect, OnChanges, ChangeDetectionStrategy } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import {
+ FudisAlertElement,
+ FudisAlertPosition,
+ FudisComponentChanges,
+} from '../../../types/miscellaneous';
 import { FudisTranslationService } from '../../../services/translation/translation.service';
 import { FudisAlertService } from '../../../services/alert/alert.service';
 import { FudisDialogService } from '../../../services/dialog/dialog.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
  selector: 'fudis-alert-group',
  templateUrl: './alert-group.component.html',
  styleUrls: ['./alert-group.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AlertGroupComponent implements AfterViewInit {
+export class AlertGroupComponent implements OnChanges {
  constructor(
- private _alertService: FudisAlertService,
+ protected _alertService: FudisAlertService,
  private _translationService: FudisTranslationService,
- private readonly _changeDetectorRef: ChangeDetectorRef,
  private _dialogService: FudisDialogService,
  ) {
- effect(() => {
- this._alertList = this._alertService.getAlertsSignal();
- // TODO: To Observable
- this._alertGroupLabel = this._translationService.getTranslations()().ALERT.HEADING_LABEL;
+ this._dialogService
+ .getDialogOpenStatus()
+ .pipe(takeUntilDestroyed())
+ .subscribe((value) => {
+ this._setVisibility(value);
+ });
 
- this._dialogStatus = this._dialogService.getDialogOpenSignal()();
-
- this._setVisibility();
+ effect(() => {
+ this._alertGroupLabel.next(this._translationService.getTranslations()().ALERT.HEADING_LABEL);
  });
  }
 
  /**
- * CSS position of alerts. Defaults to fixed.
+ * CSS position of alerts
  */
- @Input() position: 'fixed' | 'absolute' | 'static' = 'fixed';
+ @Input() position: FudisAlertPosition = 'fixed';
 
  /**
- * Boolean to determine if Alert Group is used as child in Fudis Dialog.
+ * Boolean to determine if Alert Group is used inside Fudis Dialog Component
  */
- @Input() insideDialog: boolean = false;
+ @Input() insideDialog: boolean;
 
  /**
- * List of Alerts fetched from service
+ * List of Alerts fetched from Alert Service
  */
- protected _alertList: Signal<FudisAlertElement[]>;
+ protected _alertList = new BehaviorSubject<FudisAlertElement[]>([]);
 
  /**
  * Label for section element containing alerts
  */
- protected _alertGroupLabel: string;
+ protected _alertGroupLabel = new BehaviorSubject<string>('');
 
  /**
- * Boolean to determine if Alert group is visible. Used with _dialogStatus boolean.
+ * Boolean to determine if Alert group is visible
  */
- protected _visible: boolean = false;
+ protected _visible = new BehaviorSubject<boolean>(false);
 
- /**
- * Boolean from service to determine if Fudis Dialog is open.
- */
- private _dialogStatus: boolean;
-
- ngAfterViewInit(): void {
- this._setVisibility();
+ ngOnChanges(changes: FudisComponentChanges<AlertGroupComponent>): void {
+ if (changes.insideDialog?.currentValue !== changes.insideDialog?.previousValue) {
+ this._setVisibility(this._dialogService.getDialogOpenStatus().value);
+ }
  }
 
  /**
- * Getter for visible status
+ * Get Alert Group's visible status
  */
  public getVisibleStatus(): boolean {
- return this._visible;
+ return this._visible.value;
  }
 
  /**
- * Set visibility when Fudis Dialog is opened and closed.
+ * Set visibility when Fudis Dialog is opened and closed
  */
- private _setVisibility(): void {
- if ((this._dialogStatus && this.insideDialog) || (!this._dialogStatus && !this.insideDialog)) {
- this._visible = true;
+ private _setVisibility(dialogStatus: boolean): void {
+ if ((dialogStatus && this.insideDialog) || (!dialogStatus && !this.insideDialog)) {
+ this._visible.next(true);
  } else {
- this._visible = false;
+ this._visible.next(false);
  }
  }
 }