Move components out of the redux store

employee-rostering-frontend/src/store/alert/alert.test.tsx → employee-rostering-frontend/src/store/alert/alert.test.ts

@@ -13,17 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { Component } from 'react'; 
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
 import { mockStore } from '../mockStore';
 import { AppState } from '../types';
 import * as actions from './actions';
-import { ServerSideExceptionDialog } from './operations';
 import reducer, { alert } from './index';
 import { withElement, withoutElementWithId} from 'util/ImmutableCollectionOperations';
-import { ServerSideExceptionInfo } from 'types';
-import { AlertInfo } from './types';
+import { ServerSideExceptionInfo, BasicObject } from 'types';
+import { AlertInfo, AlertComponent } from './types';
 
 describe('Alert operations', () => {
   it('should dispatch actions on showSuccessMessage', async () => {
@@ -54,7 +50,7 @@ describe('Alert operations', () => {
 
   it('should dispatch actions on showServerError', async () => {
     const { store } = mockStore(state);
-    const serverSideException: ServerSideExceptionInfo = {
+    const serverSideException: ServerSideExceptionInfo & BasicObject = {
       i18nKey: "error1",
       exceptionMessage: "message1",
       exceptionClass: "Error1",
@@ -71,7 +67,7 @@ describe('Alert operations', () => {
     };
 
     await store.dispatch(alert.showServerError(serverSideException));
-    expect(store.getActions()).toEqual([alert.showMessage("danger", "exception", { message: "message1" }, [<ServerSideExceptionDialog {...serverSideException} key={0} />])]);
+    expect(store.getActions()).toEqual([alert.showMessage("danger", "exception", { message: "message1" }, [AlertComponent.SERVER_SIDE_EXCEPTION_DIALOG], [serverSideException])]);
   });
 
   it('should dispatch actions on showServerErrorMessage', async () => {
@@ -83,49 +79,6 @@ describe('Alert operations', () => {
     expect(store.getActions()).toEqual([alert.showMessage("danger", i18nKey, params)]);
   });
 
-  it('should render an ServerSideException Alert correctly', () => {
-    const serverSideException: ServerSideExceptionInfo = {
-      i18nKey: "error1",
-      exceptionMessage: "message1",
-      exceptionClass: "Error1",
-      messageParameters: ["hi"],
-      stackTrace: ["1.1", "1.2", "1.3"],
-      exceptionCause: {
-        i18nKey: "error2",
-        exceptionMessage: "message2",
-        exceptionClass: "Error2",
-        messageParameters: [],
-        stackTrace: ["2.1", "2.2", "2.3"],
-        exceptionCause: null
-      }
-    };
-
-    const serverSideExceptionDialog = shallow(<ServerSideExceptionDialog {...serverSideException}>Show Stack Trace</ServerSideExceptionDialog>);
-    expect(toJson(serverSideExceptionDialog)).toMatchSnapshot();
-  });
-
-  it('should render an ServerSideException Modal correctly', () => {
-    const serverSideException: ServerSideExceptionInfo = {
-      i18nKey: "error1",
-      exceptionMessage: "message1",
-      exceptionClass: "Error1",
-      messageParameters: ["hi"],
-      stackTrace: ["1.1", "1.2", "1.3"],
-      exceptionCause: {
-        i18nKey: "error2",
-        exceptionMessage: "message2",
-        exceptionClass: "Error2",
-        messageParameters: [],
-        stackTrace: ["2.1", "2.2", "2.3"],
-        exceptionCause: null
-      }
-    };
-
-    const serverSideExceptionDialog = shallow(<ServerSideExceptionDialog {...serverSideException}>Show Stack Trace</ServerSideExceptionDialog>);
-    serverSideExceptionDialog.find('Button[aria-label="Show Stack Trace"]').simulate("click");
-    expect(toJson(serverSideExceptionDialog)).toMatchSnapshot();
-  });
-
   it('should dispatch actions on showMessage', async () => {
     const { store } = mockStore(state);
     const variant = "success";
@@ -134,7 +87,7 @@ describe('Alert operations', () => {
     await store.dispatch(alert.showMessage(variant, i18nKey));
     expect(store.getActions()).toEqual([
       alert.addAlert({
-        variant, i18nKey, params: {}
+        variant, i18nKey, params: {}, components: [], componentProps: []
       })
     ]);
   });
@@ -144,7 +97,9 @@ describe('Alert operations', () => {
     const alertInfo: AlertInfo = {
       i18nKey: "key",
       variant: "info",
-      params: { name: "ha" }
+      params: { name: "ha" },
+      components: [],
+      componentProps: []
     };
 
     await store.dispatch(alert.addAlert(alertInfo));
@@ -159,7 +114,9 @@ describe('Alert operations', () => {
       id: 1,
       i18nKey: "key",
       variant: "info",
-      params: { name: "ha" }
+      params: { name: "ha" },
+      components: [],
+      componentProps: []
     };
 
     await store.dispatch(alert.removeAlert(alertInfo));
@@ -174,7 +131,9 @@ describe('Alert reducers', () => {
     createdAt: new Date(),
     i18nKey: "alert2",
     variant: "success",
-    params: {}
+    params: {},
+    components: [],
+    componentProps: []
   }
   const removedAlertId = 0;
 
@@ -229,7 +188,9 @@ const state: AppState = {
       createdAt: new Date(),
       i18nKey: "alert1",
       variant: "info",
-      params: {}
+      params: {},
+      components: [],
+      componentProps: []
     }],
     idGeneratorIndex: 1
   }

employee-rostering-frontend/src/store/alert/operations.ts

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2019 Red Hat, Inc. and/or its affiliates.
+ *
+ * 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 { ServerSideExceptionInfo, BasicObject } from 'types';
+import * as actions from './actions';
+import { AlertInfo, AddAlertAction, RemoveAlertAction, AlertComponent } from './types';
+
+export function showInfoMessage(i18nKey: string, params?: BasicObject, components?: AlertComponent[], componentProps?: BasicObject[]): AddAlertAction {
+  return showMessage("info", i18nKey, params, components, componentProps);
+}
+
+export function showSuccessMessage(i18nKey: string, params?: BasicObject, components?: AlertComponent[], componentProps?: BasicObject[]): AddAlertAction {
+  return showMessage("success", i18nKey, params, components, componentProps);
+}
+
+export function showServerError(exceptionInfo: ServerSideExceptionInfo & BasicObject): AddAlertAction {
+  return addAlert({
+    i18nKey: "exception",
+    variant: "danger",
+    params: {
+      message: exceptionInfo.exceptionMessage,
+    },
+    components: [AlertComponent.SERVER_SIDE_EXCEPTION_DIALOG],
+    componentProps: [exceptionInfo]
+  });
+}
+
+export function showServerErrorMessage(message: string): AddAlertAction {
+  return showErrorMessage("generic", { message: message });
+}
+
+export function showErrorMessage(i18nKey: string, params?: BasicObject, components?: AlertComponent[], componentProps?: BasicObject[]): AddAlertAction {
+  return showMessage("danger", i18nKey, params, components, componentProps);
+}
+
+export function showMessage(variant: "success" | "danger" | "warning" | "info", i18nKey: string, params?: BasicObject, components?: AlertComponent[], componentProps?: BasicObject[]): AddAlertAction {
+  return addAlert({
+    i18nKey: i18nKey,
+    variant: variant,
+    params: params? params: {},
+    components: components? components : [],
+    componentProps: componentProps? componentProps : []
+  });
+}
+
+export function addAlert(alert: AlertInfo): AddAlertAction {
+  return actions.addAlert({
+    ...alert,
+    createdAt: new Date()
+  });
+}
+
+export function removeAlert(alert: AlertInfo): RemoveAlertAction {
+  return actions.removeAlert(alert.id as number);
+}

employee-rostering-frontend/src/store/alert/types.ts

@@ -16,6 +16,7 @@
 
 import { Action } from 'redux';
 import { AlertInfo } from 'store/alert/types';
+import { BasicObject } from 'types';
 
 export enum ActionType {
   ADD_ALERT = 'ADD_ALERT',
@@ -32,13 +33,18 @@ export interface RemoveAlertAction extends Action<ActionType.REMOVE_ALERT> {
 
 export type AlertAction = AddAlertAction | RemoveAlertAction;
 
+export enum AlertComponent {
+  SERVER_SIDE_EXCEPTION_DIALOG = 'SERVER_SIDE_EXCEPTION_DIALOG'
+}
+
 export interface AlertInfo {
   id?: number;
   createdAt?: Date;
   i18nKey: string;
   variant: "success" | "danger" | "warning" | "info";
-  params: any;
-  components?: React.ReactNode[];
+  params: BasicObject;
+  components: AlertComponent[];
+  componentProps: BasicObject[];
 }
 
 export interface AlertList {

employee-rostering-frontend/src/store/rest/RestServiceClient.ts

@@ -17,7 +17,7 @@
 import { AxiosInstance, AxiosResponse, AxiosStatic } from 'axios';
 
 import { alert } from 'store/alert';
-import { ServerSideExceptionInfo } from 'types';
+import { ServerSideExceptionInfo, BasicObject } from 'types';
 import { ThunkDispatch } from 'redux-thunk';
 import { AppState } from 'store/types';
 
@@ -62,7 +62,7 @@ export default class RestServiceClient {
     }
     else if (this.dispatch !== null) {
       if (res.headers["content-type"] === "application/json") {
-        this.dispatch(alert.showServerError(res.data as unknown as ServerSideExceptionInfo))
+        this.dispatch(alert.showServerError(res.data as unknown as ServerSideExceptionInfo & BasicObject))
       }
       else {
         this.dispatch(alert.showServerErrorMessage(res.statusText));

employee-rostering-frontend/src/types.ts

@@ -20,10 +20,17 @@ export interface PaginationData {
   itemsPerPage: number;
   pageNumber: number;
 }
+
 export interface ObjectNumberMap<T> {
   [index: number]: T;
 }
 
+type Basic = number|string|boolean|null|undefined;
+
+export interface BasicObject {
+  [property: string]: Basic|Basic[]|BasicObject|BasicObject[];
+}
+
 export interface ServerSideExceptionInfo {
   i18nKey: string;
   exceptionMessage: string;

employee-rostering-frontend/src/ui/Alerts.test.tsx

@@ -17,9 +17,11 @@
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
-import { Alerts, Props } from './Alerts';
+import { Alerts, Props, mapToComponent } from './Alerts';
 import { mockTranslate } from 'setupTests';
+import { AlertComponent } from 'store/alert/types';
 import moment from 'moment';
+import { ServerSideExceptionInfo, BasicObject } from 'types';
 
 describe('Alerts', () => {
   beforeEach(() => {
@@ -40,6 +42,35 @@ describe('Alerts', () => {
 
     expect(toJson(alertsElement)).toMatchSnapshot();
   });
+
+  it('should render correctly with alerts with components', () => {
+    const alertsElement = shallow(<Alerts {...someAlertsWithComponents} />);
+    expect(mockTranslate).toBeCalledTimes(1);
+    expect(mockTranslate).toHaveBeenNthCalledWith(1, "alerts.exception.title");
+
+    expect(toJson(alertsElement)).toMatchSnapshot();
+  });
+
+  it('should render the correct component for AlertComponent.SERVER_SIDE_EXCEPTION_DIALOG', () => {
+    const serverSideException: ServerSideExceptionInfo & BasicObject = {
+      i18nKey: "error1",
+      exceptionMessage: "message1",
+      exceptionClass: "Error1",
+      messageParameters: ["hi"],
+      stackTrace: ["1.1", "1.2", "1.3"],
+      exceptionCause: {
+        i18nKey: "error2",
+        exceptionMessage: "message2",
+        exceptionClass: "Error2",
+        messageParameters: [],
+        stackTrace: ["2.1", "2.2", "2.3"],
+        exceptionCause: null
+      }
+    };
+
+    const component = mapToComponent(AlertComponent.SERVER_SIDE_EXCEPTION_DIALOG, serverSideException); 
+    expect(component).toMatchSnapshot();
+  });
 });
 
 const noAlerts: Props = {
@@ -55,21 +86,56 @@ const someAlerts: Props = {
       createdAt: date,
       i18nKey: "infoMessage",
       variant: "info",
-      params: {}
+      params: {},
+      components: [],
+      componentProps: []
     },
     {
       id: 1,
       createdAt: moment(date).add(4, "seconds").toDate(),
       i18nKey: "successMessage",
       variant: "success",
-      params: {}
+      params: {},
+      components: [],
+      componentProps: []
     },
     {
       id: 2,
       createdAt: moment(date).add(11, "seconds").toDate(),
       i18nKey: "dangerMessage",
       variant: "danger",
-      params: {}
+      params: {},
+      components: [],
+      componentProps: []
+    }
+  ],
+  removeAlert: jest.fn()
+}
+
+const someAlertsWithComponents: Props = {
+  alerts: [
+    {
+      id: 0,
+      createdAt: date,
+      i18nKey: "exception",
+      variant: "danger",
+      params: {},
+      components: [AlertComponent.SERVER_SIDE_EXCEPTION_DIALOG],
+      componentProps: [{
+        i18nKey: "error1",
+        exceptionMessage: "message1",
+        exceptionClass: "Error1",
+        messageParameters: ["hi"],
+        stackTrace: ["1.1", "1.2", "1.3"],
+        exceptionCause: {
+          i18nKey: "error2",
+          exceptionMessage: "message2",
+          exceptionClass: "Error2",
+          messageParameters: [],
+          stackTrace: ["2.1", "2.2", "2.3"],
+          exceptionCause: null
+        }
+      }]
     }
   ],
   removeAlert: jest.fn()