orc-shared 1.6.0-dev.1 → 1.6.0-dev.11

package/src/actions/globalErrorMessages.test.js

@@ -0,0 +1,21 @@
+import {
+	POP_GLOBAL_ERROR_MESSAGE,
+	popGlobalErrorMessage,
+	PUSH_GLOBAL_ERROR_MESSAGE,
+	pushGlobalErrorMessage,
+} from "./globalErrorMessages";
+
+describe("pushGlobalErrorMessage", () => {
+	it("create action with message", () =>
+		expect(pushGlobalErrorMessage, "when called with", [{ custom: "message" }], "to equal", {
+			type: PUSH_GLOBAL_ERROR_MESSAGE,
+			payload: { custom: "message" },
+		}));
+});
+
+describe("popGlobalErrorMessage", () => {
+	it("create action", () =>
+		expect(popGlobalErrorMessage, "when called with", [], "to equal", {
+			type: POP_GLOBAL_ERROR_MESSAGE,
+		}));
+});

package/src/buildStore.js

@@ -21,6 +21,7 @@ import modulesReducer from "./reducers/modules";
 import metadataReducer from "./reducers/metadata";
 import requestStatesReducer from "./reducers/requestStates";
 import tasksReducer from "./reducers/tasks";
+import globalErrorMessagesReducer from "./reducers/globalErrorMessages";
 
 window.BUILD_ID = BUILD_ID;
 window.BUILD_NUMBER = BUILD_NUMBER;
@@ -67,6 +68,7 @@ const buildStore = (reducers, devOptions = {}) => {
 			metadata: metadataReducer,
 			requestStates: requestStatesReducer,
 			tasks: tasksReducer,
+			globalErrorMessages: globalErrorMessagesReducer,
 		});
 	const rootReducer = buildReducer(reducers);
 

package/src/components/MaterialUI/DataDisplay/PredefinedElements/GlobalErrorMessages.js

@@ -0,0 +1,108 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { makeStyles } from "@material-ui/core/styles";
+import sharedMessages from "../../../../sharedMessages";
+import Grid from "@material-ui/core/Grid";
+import ListItemText from "@material-ui/core/ListItemText";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import LookupDisplayValue from "./LookupDisplayValue";
+import ActionModal from "./ActionModal";
+import { useDispatch, useSelector } from "react-redux";
+import { firstDialogErrorMessageSelector } from "../../../../selectors/globalErrorMessages";
+import { popGlobalErrorMessage } from "../../../../actions/globalErrorMessages";
+
+const useStyles = makeStyles(theme => ({
+	grid: {
+		maxHeight: "40vh",
+		overflowY: "auto",
+	},
+}));
+
+const useMessageStyles = makeStyles(theme => ({
+	label: {
+		fontSize: theme.typography.fontSize,
+		color: theme.palette.grey.dark,
+		fontFamily: theme.typography.fontFamily,
+	},
+}));
+
+export const GlobalErrorMessageLabel = ({ children }) => {
+	const classes = useMessageStyles();
+
+	return <span className={classes.label}>{children}</span>;
+};
+
+const GlobalErrorMessagesModal = ({ children }) => {
+	const classes = useStyles();
+	const { formatMessage } = useIntl();
+	const dispatch = useDispatch();
+
+	const msg = useSelector(firstDialogErrorMessageSelector);
+
+	if (msg === null) {
+		return <>{children}</>;
+	}
+
+	const closeCallback = () => {
+		dispatch(popGlobalErrorMessage());
+	};
+	const actions = [{ label: sharedMessages.close, isPrimary: true, handler: closeCallback }];
+
+	let content = (
+		<Grid container spacing={2} className={classes.grid}>
+			<Grid container item spacing={0}>
+				{msg.description && (
+					<Grid item xs={12}>
+						{msg.description}
+					</Grid>
+				)}
+
+				{msg.messages?.length > 0 && (
+					<Grid item xs={12}>
+						<List className={classes.root}>
+							{msg.messages.map((msg, index) => {
+								const hasLookup = msg.lookupModule && msg.lookupName && msg.lookupKey;
+
+								return (
+									<ListItem key={index}>
+										<ListItemIcon>●</ListItemIcon>
+										<ListItemText>
+											{hasLookup && (
+												<LookupDisplayValue
+													moduleName={msg.lookupModule}
+													lookupName={msg.lookupName}
+													lookupKey={msg.lookupKey}
+													lookupReplacementValues={msg.lookupReplacementValues}
+													labelComponent={GlobalErrorMessageLabel}
+												/>
+											)}
+											{!hasLookup && <GlobalErrorMessageLabel>{msg.message}</GlobalErrorMessageLabel>}
+										</ListItemText>
+									</ListItem>
+								);
+							})}
+						</List>
+					</Grid>
+				)}
+			</Grid>
+		</Grid>
+	);
+
+	return (
+		<>
+			{children}
+			{
+				<ActionModal
+					title={msg.title || formatMessage(sharedMessages.error)}
+					message={content}
+					open={true}
+					actions={actions}
+				/>
+			}
+		</>
+	);
+};
+
+export default GlobalErrorMessagesModal;

package/src/components/MaterialUI/DataDisplay/PredefinedElements/GlobalErrorMessages.test.js

@@ -0,0 +1,468 @@
+import React from "react";
+import GlobalErrorMessagesModal, { GlobalErrorMessageLabel } from "./GlobalErrorMessages";
+import { createMuiTheme, extractMessages, TestWrapper } from "../../../../utils/testUtils";
+import Immutable from "immutable";
+import ActionModal from "./ActionModal";
+import sharedMessages from "../../../../sharedMessages";
+import Grid from "@material-ui/core/Grid";
+import ListItemText from "@material-ui/core/ListItemText";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import { popGlobalErrorMessage } from "../../../../actions/globalErrorMessages";
+import sinon from "sinon";
+import { render } from "@testing-library/react";
+import { getByText, fireEvent } from "@testing-library/react";
+
+const theme = createMuiTheme();
+const messages = extractMessages(sharedMessages);
+
+const metadataPayload = {
+	metadata: {
+		lookups: {
+			order: {
+				index: {
+					OrderStatus: {
+						lookupName: "OrderStatus",
+						values: {
+							Completed: {
+								id: "03caa0ebecd04792a96c2f8df5b9b35a",
+								value: "Completed",
+								lookupId: "OrderStatus",
+								displayName: {
+									"en-US": "Completed",
+								},
+								sortOrder: 0,
+								isActive: true,
+								isSystem: true,
+							},
+							InProgress: {
+								id: "13caa0ebecd04792a96c2f8df5b9b35a",
+								value: "InProgress",
+								lookupId: "InProgress",
+								displayName: {
+									"en-US": "In Progress",
+								},
+								sortOrder: 1,
+								isActive: false,
+								isSystem: true,
+							},
+							MessageWithArguments: {
+								id: "23caa0ebecd04792a96c2f8df5b9b35a",
+								value: "MessageWithArguments",
+								lookupId: "MessageWithArguments",
+								displayName: {
+									"en-US": "This is the message with arguments {customKey1} {customKey2}",
+								},
+								sortOrder: 1,
+								isActive: false,
+								isSystem: true,
+							},
+						},
+						displayName: {
+							"en-US": "Order Status",
+						},
+						isActive: true,
+						isSystem: true,
+					},
+				},
+				list: [],
+			},
+		},
+	},
+};
+
+describe("GlobalErrorMessagesModal", () => {
+	let store, state, dispatch;
+	beforeEach(() => {
+		state = Immutable.fromJS({
+			locale: {
+				locale: "en",
+				supportedLocales: ["en", "fr"],
+			},
+			globalErrorMessages: {
+				dialog: {
+					errorMessages: [],
+				},
+			},
+			...metadataPayload,
+		});
+
+		dispatch = sinon.spy().named("dispatch");
+
+		store = {
+			subscribe: () => {},
+			getState: () => state,
+			dispatch: dispatch,
+		};
+	});
+
+	const errorMessages = [
+		{
+			title: "ze title",
+			description: "desc",
+			messages: [
+				{ message: "error msg" },
+				{ lookupModule: "order", lookupName: "OrderStatus", lookupKey: "InProgress" },
+				{
+					lookupModule: "order",
+					lookupName: "OrderStatus",
+					lookupKey: "MessageWithArguments",
+					lookupReplacementValues: { customKey1: "val1", customKey2: "val2" },
+				},
+			],
+		},
+	];
+	const expectedMessagesContent = (
+		<Grid item xs={12}>
+			<List>
+				<ListItem key={0}>
+					<ListItemIcon>●</ListItemIcon>
+					<ListItemText>
+						<GlobalErrorMessageLabel>error msg</GlobalErrorMessageLabel>
+					</ListItemText>
+				</ListItem>
+				<ListItem key={1}>
+					<ListItemIcon>●</ListItemIcon>
+					<ListItemText>
+						<GlobalErrorMessageLabel>In Progress</GlobalErrorMessageLabel>
+					</ListItemText>
+				</ListItem>
+				<ListItem key={2}>
+					<ListItemIcon>●</ListItemIcon>
+					<ListItemText>
+						<GlobalErrorMessageLabel>This is the message with arguments val1 val2</GlobalErrorMessageLabel>
+					</ListItemText>
+				</ListItem>
+			</List>
+		</Grid>
+	);
+
+	it("Renders no dialog because state contains no messages", () => {
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<GlobalErrorMessagesModal>
+					<div>children</div>
+				</GlobalErrorMessagesModal>
+			</TestWrapper>
+		);
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>children</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders dialog with messages", () => {
+		state = state.setIn(["globalErrorMessages", "dialog", "errorMessages"], Immutable.fromJS(errorMessages));
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<GlobalErrorMessagesModal>
+						<div>children</div>
+					</GlobalErrorMessagesModal>
+				</div>
+			</TestWrapper>
+		);
+
+		const content = (
+			<Grid container spacing={2}>
+				<Grid container item spacing={0}>
+					<Grid item xs={12}>
+						desc
+					</Grid>
+					{expectedMessagesContent}
+				</Grid>
+			</Grid>
+		);
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<div>children</div>
+					<ActionModal
+						title={"ze title"}
+						message={content}
+						open={true}
+						actions={[{ label: sharedMessages.close, isPrimary: true }]}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders dialog with messages with default title", () => {
+		state = state.setIn(
+			["globalErrorMessages", "dialog", "errorMessages"],
+			Immutable.fromJS([{ ...errorMessages[0], title: null }]),
+		);
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<GlobalErrorMessagesModal>
+						<div>children</div>
+					</GlobalErrorMessagesModal>
+				</div>
+			</TestWrapper>
+		);
+
+		const content = (
+			<Grid container spacing={2}>
+				<Grid container item spacing={0}>
+					<Grid item xs={12}>
+						desc
+					</Grid>
+					{expectedMessagesContent}
+				</Grid>
+			</Grid>
+		);
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<div>children</div>
+					<ActionModal
+						title={"Error"}
+						message={content}
+						open={true}
+						actions={[{ label: sharedMessages.close, isPrimary: true }]}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders dialog with messages without description", () => {
+		state = state.setIn(
+			["globalErrorMessages", "dialog", "errorMessages"],
+			Immutable.fromJS([{ ...errorMessages[0], description: null }]),
+		);
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<GlobalErrorMessagesModal>
+						<div>children</div>
+					</GlobalErrorMessagesModal>
+				</div>
+			</TestWrapper>
+		);
+
+		const content = (
+			<Grid container spacing={2}>
+				<Grid container item spacing={0}>
+					{expectedMessagesContent}
+				</Grid>
+			</Grid>
+		);
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<div>children</div>
+					<ActionModal
+						title={"ze title"}
+						message={content}
+						open={true}
+						actions={[{ label: sharedMessages.close, isPrimary: true }]}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders dialog without messages (empty)", () => {
+		state = state.setIn(
+			["globalErrorMessages", "dialog", "errorMessages"],
+			Immutable.fromJS([{ ...errorMessages[0], messages: [] }]),
+		);
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<GlobalErrorMessagesModal>
+						<div>children</div>
+					</GlobalErrorMessagesModal>
+				</div>
+			</TestWrapper>
+		);
+
+		const content = (
+			<Grid container spacing={2}>
+				<Grid container item spacing={0}>
+					<Grid item xs={12}>
+						desc
+					</Grid>
+				</Grid>
+			</Grid>
+		);
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<div>children</div>
+					<ActionModal
+						title={"ze title"}
+						message={content}
+						open={true}
+						actions={[{ label: sharedMessages.close, isPrimary: true }]}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders dialog without messages (null)", () => {
+		state = state.setIn(
+			["globalErrorMessages", "dialog", "errorMessages"],
+			Immutable.fromJS([{ ...errorMessages[0], messages: null }]),
+		);
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<GlobalErrorMessagesModal>
+						<div>children</div>
+					</GlobalErrorMessagesModal>
+				</div>
+			</TestWrapper>
+		);
+
+		const content = (
+			<Grid container spacing={2}>
+				<Grid container item spacing={0}>
+					<Grid item xs={12}>
+						desc
+					</Grid>
+				</Grid>
+			</Grid>
+		);
+
+		const expected = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<div>children</div>
+					<ActionModal
+						title={"ze title"}
+						message={content}
+						open={true}
+						actions={[{ label: sharedMessages.close, isPrimary: true }]}
+					/>
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("The close button pop the message", () => {
+		state = state.setIn(["globalErrorMessages", "dialog", "errorMessages"], Immutable.fromJS(errorMessages));
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				memoryRouter
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<div>
+					<GlobalErrorMessagesModal>
+						<div>children</div>
+					</GlobalErrorMessagesModal>
+				</div>
+			</TestWrapper>
+		);
+
+		const { container } = render(component);
+		const button = getByText(container, "Close");
+		fireEvent.click(button);
+
+		expect(dispatch, "to have calls satisfying", [{ args: [popGlobalErrorMessage()] }]);
+	});
+});

package/src/components/MaterialUI/DataDisplay/PredefinedElements/LookupDisplayValue.js

@@ -0,0 +1,29 @@
+import React from "react";
+import TooltippedTypography from "../TooltippedElements/TooltippedTypography";
+import { namedLookupLocalizedSelector } from "../../../../selectors/metadata";
+import { useSelector } from "react-redux";
+
+const LookupDisplayValue = ({
+	moduleName,
+	lookupName,
+	lookupKey,
+	lookupReplacementValues,
+	labelComponent,
+	...otherProps
+}) => {
+	let value = useSelector(namedLookupLocalizedSelector(moduleName, lookupName, lookupKey));
+
+	if (value && lookupReplacementValues) {
+		Object.keys(lookupReplacementValues).forEach(key => {
+			value = value.replace("{" + key + "}", lookupReplacementValues[key]);
+		});
+	}
+
+	const DisplayComponent =
+		labelComponent ??
+		(({ children }) => <TooltippedTypography noWrap {...otherProps} children={children} titleValue={value} />);
+
+	return <DisplayComponent>{value}</DisplayComponent>;
+};
+
+export default LookupDisplayValue;