feat(stark-ui): update message-pane actions style

BREAKING CHANGE:
Due to an improvement on how actions are defined, the enum `StarkMessagePaneActionsTypes`
became obsolete so it has been removed.

As a result, the following actions have been changed:
- `StarkAddMessages(public messages: StarkMessage[])`
  -> `StarkMessagePaneActions.addMessages({ messages: StarkMessage[] })`
- `StarkRemoveMessages(public messages: StarkMessage[])`
  -> `StarkMessagePaneActions.removeMessages({ messages: StarkMessage[] })`
- `StarkClearMessages()` -> `StarkMessagePaneActions.clearMessages()`
- `StarkGetAllMessages()` -> `StarkMessagePaneActions.getAllMessages()`

And also the previous union type has been replaced:
`StarkMessagePaneActions` -> `StarkMessagePaneActions.Types`.

Change in effect:

```typescript
// Before
@effect({ dispatch: false })
public starkAddMessages$(): Observable<void> {
    return this.actions$.pipe(
        ofType<StarkAddMessages>(StarkMessagePaneActionsTypes.ADD_MESSAGES),
        map((action: StarkAddMessages) => {
            // some logic
        })
    );
}

// After
public starkAddMessages$ = createEffect(
    () => this.actions$.pipe(
        ofType(StarkMessagePaneActions.addMessages),
        map((action) => {
            // some logic
        })
    ),
    { dispatch: false }
);
```

Change in `action` usage:

```typescript
// Before
this.store.dispatch(new StarkAddMessages(messages));

// After
this.store.dispatch(StarkMessagePaneActions.addMessages({ messages: messages }));
```

packages/karma.conf.js

@@ -17,6 +17,7 @@ const karmaTypescriptBundlerAlias = {
 	"@ng-idle/core": "../stark-core/node_modules/@ng-idle/core/bundles/ng-idle-core.umd.js",
 	"@ng-idle/keepalive": "../stark-core/node_modules/@ng-idle/keepalive/bundles/ng-idle-keepalive.umd.js",
 	"@ngrx/store": "../stark-core/node_modules/@ngrx/store/bundles/store.umd.js",
+	"@ngrx/store/src/models": "../stark-core/node_modules/@ngrx/store/bundles/store.umd.js",
 	"@ngrx/effects": "../stark-core/node_modules/@ngrx/effects/bundles/effects.umd.js",
 	"@ngrx/effects/testing": "../stark-core/node_modules/@ngrx/effects/bundles/effects-testing.umd.js",
 	"@ngx-translate/core": "../stark-core/node_modules/@ngx-translate/core/bundles/ngx-translate-core.umd.js",

packages/stark-ui/src/modules/message-pane.ts

@@ -1,5 +1,6 @@
 export * from "./message-pane/message-pane.module";
 export * from "./message-pane/actions";
+export * from "./message-pane/constants";
 export * from "./message-pane/effects";
 export * from "./message-pane/entities";
 export * from "./message-pane/reducers";

packages/stark-ui/src/modules/message-pane/actions.ts

@@ -1 +1,2 @@
-export * from "./actions/message-pane.actions";
+import * as StarkMessagePaneActions from "./actions/message-pane.actions";
+export { StarkMessagePaneActions };

packages/stark-ui/src/modules/message-pane/actions/message-pane.actions.ts

@@ -1,66 +1,39 @@
-import { Action } from "@ngrx/store";
+import { createAction, props, union } from "@ngrx/store";
 import { StarkMessage } from "../../../common/message";
 
 /**
- * Actions related to stark message pane service
+ * @ignore
  */
-export enum StarkMessagePaneActionTypes {
-	ADD_MESSAGES = "[StarkMessagePane] Add Messages",
-	REMOVE_MESSAGES = "[StarkMessagePane] Remove Messages",
-	CLEAR_MESSAGES = "[StarkMessagePane] Clear Messages",
-	GET_ALL_MESSAGES = "[StarkMessagePane] Get All Messages"
-}
+const actionKey = "StarkMessagePane";
 
 /**
  * Triggered when the addMessages() method is called.
+ *
+ * Parameter:
+ *   - messages - The messages to add.
  */
-export class StarkAddMessages implements Action {
-	/**
-	 * The type of action
-	 */
-	public readonly type: StarkMessagePaneActionTypes.ADD_MESSAGES = StarkMessagePaneActionTypes.ADD_MESSAGES;
-
-	/**
-	 * Class constructor
-	 * @param messages - The messages to add.
-	 */
-	public constructor(public messages: StarkMessage[]) {}
-}
+export const addMessages = createAction(`[${actionKey}] Add Messages`, props<{ messages: StarkMessage[] }>());
 
 /**
  * Triggered when the removeMessages() method is called.
+ *
+ * Parameter:
+ *   - messages - The messages to remove.
  */
-export class StarkRemoveMessages implements Action {
-	/**
-	 * The type of action
-	 */
-	public readonly type: StarkMessagePaneActionTypes.REMOVE_MESSAGES = StarkMessagePaneActionTypes.REMOVE_MESSAGES;
-
-	/**
-	 * Class constructor
-	 * @param messages - The messages to remove.
-	 */
-	public constructor(public messages: StarkMessage[]) {}
-}
+export const removeMessages = createAction(`[${actionKey}] Remove Messages`, props<{ messages: StarkMessage[] }>());
 
 /**
  * Triggered when the clearMessages() method is called.
  */
-export class StarkClearMessages implements Action {
-	/**
-	 * The type of action
-	 */
-	public readonly type: StarkMessagePaneActionTypes.CLEAR_MESSAGES = StarkMessagePaneActionTypes.CLEAR_MESSAGES;
-}
+export const clearMessages = createAction(`[${actionKey}] Clear Messages`);
 
 /**
  * Triggered when the getAllMessages() method is called.
  */
-export class StarkGetAllMessages implements Action {
-	/**
-	 * The type of action
-	 */
-	public readonly type: StarkMessagePaneActionTypes.GET_ALL_MESSAGES = StarkMessagePaneActionTypes.GET_ALL_MESSAGES;
-}
+export const getAllMessages = createAction(`[${actionKey}] Get All Messages`);
 
-export type StarkMessagePaneActions = StarkAddMessages | StarkRemoveMessages | StarkClearMessages | StarkGetAllMessages;
+/**
+ * @ignore
+ */
+const all = union({ addMessages, removeMessages, clearMessages, getAllMessages });
+export type Types = typeof all;

packages/stark-ui/src/modules/message-pane/constants.ts

@@ -0,0 +1 @@
+export { starkMessagePaneStoreKey } from "./constants/message-pane-store-key";

packages/stark-ui/src/modules/message-pane/constants/message-pane-store-key.ts

@@ -0,0 +1,4 @@
+/**
+ * Key defined to find the service in a store
+ */
+export const starkMessagePaneStoreKey = "StarkMessagePane";

packages/stark-ui/src/modules/message-pane/effects/message-pane.effects.spec.ts

@@ -43,9 +43,9 @@ describe("Effect: StarkMessagePaneEffects", () => {
 			const subject: ReplaySubject<any> = new ReplaySubject(1);
 			actions = subject.asObservable();
 
-			messagePaneEffects.clearOnNavigationSuccess$().subscribe(mockObserver);
+			messagePaneEffects.clearOnNavigationSuccess$.subscribe(mockObserver);
 
-			subject.next(StarkRoutingActions.navigateSuccess({ previousState: "previousState", currentState: "currentState"}));
+			subject.next(StarkRoutingActions.navigateSuccess({ previousState: "previousState", currentState: "currentState" }));
 
 			expect(mockMessagePaneService.clearAll).toHaveBeenCalledTimes(1);
 			expect(mockObserver.next).toHaveBeenCalledTimes(1);
@@ -60,9 +60,9 @@ describe("Effect: StarkMessagePaneEffects", () => {
 			const subject: ReplaySubject<any> = new ReplaySubject(1);
 			actions = subject.asObservable();
 
-			messagePaneEffects.clearOnNavigationSuccess$().subscribe(mockObserver);
+			messagePaneEffects.clearOnNavigationSuccess$.subscribe(mockObserver);
 
-			subject.next(StarkRoutingActions.navigateSuccess({ previousState: "previousState", currentState: "currentState"}));
+			subject.next(StarkRoutingActions.navigateSuccess({ previousState: "previousState", currentState: "currentState" }));
 
 			expect(mockMessagePaneService.clearAll).not.toHaveBeenCalled();
 			expect(mockObserver.next).toHaveBeenCalledTimes(1);

packages/stark-ui/src/modules/message-pane/effects/message-pane.effects.ts

@@ -1,6 +1,5 @@
 import { Inject, Injectable } from "@angular/core";
-import { Actions, Effect, ofType } from "@ngrx/effects";
-import { Observable } from "rxjs";
+import { Actions, createEffect, ofType } from "@ngrx/effects";
 import { map } from "rxjs/operators";
 import { StarkRoutingActions } from "@nationalbankbelgium/stark-core";
 import { STARK_MESSAGE_PANE_SERVICE, StarkMessagePaneService } from "../services";
@@ -26,15 +25,16 @@ export class StarkMessagePaneEffects {
 	 *
 	 * `dispatch: false` => because this effect does not dispatch an action
 	 */
-	@Effect({ dispatch: false })
-	public clearOnNavigationSuccess$(): Observable<any> {
-		return this.actions$.pipe(
-			ofType(StarkRoutingActions.navigateSuccess),
-			map(() => {
-				if (this.messagePaneService.clearOnNavigation) {
-					this.messagePaneService.clearAll();
-				}
-			})
-		);
-	}
+	public clearOnNavigationSuccess$ = createEffect(
+		() =>
+			this.actions$.pipe(
+				ofType(StarkRoutingActions.navigateSuccess),
+				map(() => {
+					if (this.messagePaneService.clearOnNavigation) {
+						this.messagePaneService.clearAll();
+					}
+				})
+			),
+		{ dispatch: false }
+	);
 }

packages/stark-ui/src/modules/message-pane/message-pane.module.ts

@@ -18,6 +18,7 @@ import { STARK_MESSAGE_PANE_SERVICE, StarkMessagePaneServiceImpl } from "./servi
 import { starkMessagesReducers } from "./reducers";
 import { StarkMessagePaneEffects } from "./effects";
 import { mergeUiTranslations } from "../../common/translations";
+import { starkMessagePaneStoreKey } from './constants';
 
 @NgModule({
 	declarations: [StarkMessagePaneComponent],
@@ -26,7 +27,7 @@ import { mergeUiTranslations } from "../../common/translations";
 		TranslateModule,
 		MatTooltipModule,
 		MatIconModule,
-		StoreModule.forFeature("StarkMessages", starkMessagesReducers),
+		StoreModule.forFeature(starkMessagePaneStoreKey, starkMessagesReducers),
 		EffectsModule.forFeature([StarkMessagePaneEffects])
 	],
 	exports: [StarkMessagePaneComponent]

packages/stark-ui/src/modules/message-pane/reducers.ts

@@ -1,2 +1,2 @@
-export * from "./reducers/index";
-export * from "./reducers/messages-pane.reducer";
+export { selectStarkMessages, starkMessagesReducers, StarkMessageState } from "./reducers/index";
+export { messagesReducer } from "./reducers/messages-pane.reducer";

packages/stark-ui/src/modules/message-pane/reducers/index.ts

@@ -1,7 +1,8 @@
-import { ActionReducerMap, createFeatureSelector, createSelector, MemoizedSelector } from "@ngrx/store";
+import { ActionReducerMap, createFeatureSelector, createSelector } from "@ngrx/store";
 import { StarkMessageCollection } from "../entities";
 import { StarkMessagePaneActions } from "../actions";
 import { messagesReducer } from "./messages-pane.reducer";
+import { starkMessagePaneStoreKey } from "../constants";
 
 /**
  * Defines the part of the state assigned to the {@link StarkMessagePaneModule}
@@ -16,7 +17,7 @@ export interface StarkMessageState {
 /**
  * Reducers assigned to the each property of the {@link StarkMessagePaneModule}'s state
  */
-export const starkMessagesReducers: ActionReducerMap<StarkMessageState, StarkMessagePaneActions> = {
+export const starkMessagesReducers: ActionReducerMap<StarkMessageState, StarkMessagePaneActions.Types> = {
 	/**
 	 * Reducer assigned to the state's `messages` property
 	 */
@@ -26,7 +27,7 @@ export const starkMessagesReducers: ActionReducerMap<StarkMessageState, StarkMes
 /**
  * NGRX Selector for the {@link StarkMessagePaneModule}'s state
  */
-export const selectStarkMessages: MemoizedSelector<object, StarkMessageCollection> = createSelector(
-	createFeatureSelector<StarkMessageState>("StarkMessages"),
+export const selectStarkMessages = createSelector(
+	createFeatureSelector<StarkMessageState>(starkMessagePaneStoreKey),
 	(state: StarkMessageState) => state.messages
 );