orc-shared 5.10.0-dev.2 → 5.10.0-dev.21

package/src/components/AppFrame/Preferences.test.js

@@ -1,11 +1,8 @@
 import React from "react";
 import Immutable from "immutable";
-import { Provider } from "react-redux";
-import { IntlProvider } from "react-intl";
 import { RSAA } from "redux-api-middleware";
 import sinon from "sinon";
 import { Ignore } from "unexpected-reaction";
-import { getStyledClassSelector } from "../../utils/testUtils";
 import { CHANGE_LOCALE } from "../../actions/locale";
 import {
 	SET_DEFAULT_LANGUAGE_REQUEST,
@@ -18,22 +15,13 @@ import {
 	SET_MY_APPLICATION_FAILURE,
 } from "../../actions/applications";
 import { setValue } from "../../actions/view";
-import { FieldBox, Label } from "../Form/Field";
-import { Wrapper as SelectorWrapper } from "../Selector";
-import Preferences, {
-	Header,
-	PrefForm,
-	Footer,
-	PrefButton,
-	createGetUpdater,
-	Wrapper,
-	PREFS_NAME,
-	clickOutsideHandler,
-} from "./Preferences";
+import Preferences, { PREFS_NAME, clickOutsideHandler, stateEventUpdater } from "./Preferences";
 import { RESET_VERSION_INFO } from "../../actions/versionInfo";
-import { extractMessages } from "./../../utils/testUtils";
+import { extractMessages, TestWrapper } from "./../../utils/testUtils";
 import sharedMessages from "./../../sharedMessages";
 import { stringifyWithoutQuotes } from "./../../utils/parseHelper";
+import InformationItem from "../MaterialUI/DataDisplay/PredefinedElements/InformationItem";
+import Button from "@material-ui/core/Button";
 
 const messages = extractMessages(sharedMessages);
 
@@ -151,11 +139,9 @@ describe("Preferences", () => {
 
 	it("renders a form dialog", () => {
 		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<Preferences />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<Preferences />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
 			null,
@@ -166,48 +152,34 @@ describe("Preferences", () => {
 					"with event",
 					{
 						type: "click",
-						target: getStyledClassSelector(PrefButton) + ":last-child",
+						target: "#savePrefs",
 					},
 					"to satisfy",
-					<div>
+					<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
 						<div>
-							<Wrapper>
-								<Header>{stringifyWithoutQuotes(messages["orc-shared.preferences"])}</Header>
-								<PrefForm>
-									<FieldBox>
-										<Label id="language_label">{stringifyWithoutQuotes(messages["orc-shared.displayLanguage"])}</Label>
-										<SelectorWrapper>
-											<select id="language" value="en-US" onChange={() => {}}>
-												<option>English</option>
-												<option>EnglishCa</option>
-												<option>Francais</option>
-												<option>Francais-Qc</option>
-											</select>
-											<Ignore />
+							<div>
+								<div>
+									<div>{stringifyWithoutQuotes(messages["orc-shared.preferences"])}</div>
+									<div>
+										<InformationItem label={sharedMessages.displayLanguage}>
 											<Ignore />
-										</SelectorWrapper>
-									</FieldBox>
-									<FieldBox>
-										<Label id="application_label">{stringifyWithoutQuotes(messages["orc-shared.defaultApp"])}</Label>
-										<SelectorWrapper>
-											<select id="application" value={4} onChange={() => {}}>
-												<option>Marketing Legacy</option>
-												<option>Product Information</option>
-											</select>
+										</InformationItem>
+										<InformationItem label={sharedMessages.defaultApp}>
 											<Ignore />
-											<Ignore />
-										</SelectorWrapper>
-									</FieldBox>
-								</PrefForm>
-								<Footer>
-									<PrefButton id="cancelPrefs">{stringifyWithoutQuotes(messages["orc-shared.cancel"])}</PrefButton>
-									<PrefButton id="savePrefs" primary>
-										{stringifyWithoutQuotes(messages["orc-shared.save"])}
-									</PrefButton>
-								</Footer>
-							</Wrapper>
+										</InformationItem>
+									</div>
+									<div>
+										<Button id="cancelPrefs" variant="outlined">
+											{stringifyWithoutQuotes(messages["orc-shared.cancel"])}
+										</Button>
+										<Button id="savePrefs" variant="outlined" color="primary">
+											{stringifyWithoutQuotes(messages["orc-shared.save"])}
+										</Button>
+									</div>
+								</div>
+							</div>
 						</div>
-					</div>,
+					</TestWrapper>,
 				),
 			)
 			.then(() =>
@@ -222,11 +194,9 @@ describe("Preferences", () => {
 	it("shows view state fields, saves language change", () => {
 		state = state.setIn(["view", PREFS_NAME], Immutable.fromJS({ show: true, language: "fr-CA" }));
 		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<Preferences />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<Preferences />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
 			null,
@@ -237,43 +207,27 @@ describe("Preferences", () => {
 					"with event",
 					{
 						type: "click",
-						target: getStyledClassSelector(PrefButton) + ":last-child",
+						target: "#savePrefs",
 					},
 					"to satisfy",
-					<div>
+					<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
 						<div>
-							<Wrapper>
-								<Ignore />
-								<PrefForm>
-									<FieldBox>
-										<Label id="language_label">{stringifyWithoutQuotes(messages["orc-shared.displayLanguage"])}</Label>
-										<SelectorWrapper>
-											<select id="language" value="fr-CA" onChange={() => {}}>
-												<option>English</option>
-												<option>EnglishCa</option>
-												<option>Francais</option>
-												<option>Francais-Qc</option>
-											</select>
-											<Ignore />
+							<div>
+								<div>
+									<Ignore />
+									<div>
+										<InformationItem label={sharedMessages.displayLanguage}>
 											<Ignore />
-										</SelectorWrapper>
-									</FieldBox>
-									<FieldBox>
-										<Label id="application_label">{stringifyWithoutQuotes(messages["orc-shared.defaultApp"])}</Label>
-										<SelectorWrapper>
-											<select id="application" value={4} onChange={() => {}}>
-												<option>Marketing Legacy</option>
-												<option>Product Information</option>
-											</select>
+										</InformationItem>
+										<InformationItem label={sharedMessages.defaultApp}>
 											<Ignore />
-											<Ignore />
-										</SelectorWrapper>
-									</FieldBox>
-								</PrefForm>
-								<Ignore />
-							</Wrapper>
+										</InformationItem>
+									</div>
+									<Ignore />
+								</div>
+							</div>
 						</div>
-					</div>,
+					</TestWrapper>,
 				),
 			)
 			.then(() =>
@@ -351,11 +305,9 @@ describe("Preferences", () => {
 	it("shows view state fields, saves application change", () => {
 		state = state.setIn(["view", PREFS_NAME], Immutable.fromJS({ show: true, application: 3 }));
 		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<Preferences />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<Preferences />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
 			null,
@@ -366,43 +318,27 @@ describe("Preferences", () => {
 					"with event",
 					{
 						type: "click",
-						target: getStyledClassSelector(PrefButton) + ":last-child",
+						target: "#savePrefs",
 					},
 					"to satisfy",
-					<div>
+					<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
 						<div>
-							<Wrapper>
-								<Ignore />
-								<PrefForm>
-									<FieldBox>
-										<Label id="language_label">{stringifyWithoutQuotes(messages["orc-shared.displayLanguage"])}</Label>
-										<SelectorWrapper>
-											<select id="language" value="en-US" onChange={() => {}}>
-												<option>English</option>
-												<option>EnglishCa</option>
-												<option>Francais</option>
-												<option>Francais-Qc</option>
-											</select>
-											<Ignore />
-											<Ignore />
-										</SelectorWrapper>
-									</FieldBox>
-									<FieldBox>
-										<Label id="application_label">{stringifyWithoutQuotes(messages["orc-shared.defaultApp"])}</Label>
-										<SelectorWrapper>
-											<select id="application" value={3} onChange={() => {}}>
-												<option>Marketing Legacy</option>
-												<option>Product Information</option>
-											</select>
+							<div>
+								<div>
+									<Ignore />
+									<div>
+										<InformationItem label={sharedMessages.displayLanguage}>
 											<Ignore />
+										</InformationItem>
+										<InformationItem label={sharedMessages.defaultApp}>
 											<Ignore />
-										</SelectorWrapper>
-									</FieldBox>
-								</PrefForm>
-								<Ignore />
-							</Wrapper>
+										</InformationItem>
+									</div>
+									<Ignore />
+								</div>
+							</div>
 						</div>
-					</div>,
+					</TestWrapper>,
 				),
 			)
 			.then(() =>
@@ -444,11 +380,9 @@ describe("Preferences", () => {
 	it("clears and closes", () => {
 		state = state.setIn(["view", PREFS_NAME], Immutable.fromJS({ show: true, language: "fr-CA", application: 3 }));
 		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<Preferences />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<Preferences />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
 			null,
@@ -459,43 +393,27 @@ describe("Preferences", () => {
 					"with event",
 					{
 						type: "click",
-						target: getStyledClassSelector(PrefButton) + ":first-child",
+						target: "#cancelPrefs",
 					},
 					"to satisfy",
-					<div>
+					<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
 						<div>
-							<Wrapper>
-								<Ignore />
-								<PrefForm>
-									<FieldBox>
-										<Label id="language_label">{stringifyWithoutQuotes(messages["orc-shared.displayLanguage"])}</Label>
-										<SelectorWrapper>
-											<select id="language" value="fr-CA" onChange={() => {}}>
-												<option>English</option>
-												<option>EnglishCa</option>
-												<option>Francais</option>
-												<option>Francais-Qc</option>
-											</select>
+							<div>
+								<div>
+									<Ignore />
+									<div>
+										<InformationItem label={sharedMessages.displayLanguage}>
 											<Ignore />
+										</InformationItem>
+										<InformationItem label={sharedMessages.defaultApp}>
 											<Ignore />
-										</SelectorWrapper>
-									</FieldBox>
-									<FieldBox>
-										<Label id="application_label">{stringifyWithoutQuotes(messages["orc-shared.defaultApp"])}</Label>
-										<SelectorWrapper>
-											<select id="application" value={3} onChange={() => {}}>
-												<option>Marketing Legacy</option>
-												<option>Product Information</option>
-											</select>
-											<Ignore />
-											<Ignore />
-										</SelectorWrapper>
-									</FieldBox>
-								</PrefForm>
-								<Ignore />
-							</Wrapper>
+										</InformationItem>
+									</div>
+									<Ignore />
+								</div>
+							</div>
 						</div>
-					</div>,
+					</TestWrapper>,
 				),
 			)
 			.then(() =>
@@ -518,11 +436,9 @@ describe("Preferences", () => {
 			.deleteIn(["locale", "defaultCulture"])
 			.deleteIn(["settings", "defaultApp"]);
 		expect(
-			<Provider store={store}>
-				<IntlProvider locale="en-US" messages={messages}>
-					<Preferences />
-				</IntlProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
+				<Preferences />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
 			null,
@@ -530,66 +446,46 @@ describe("Preferences", () => {
 			expect(
 				modalRoot,
 				"to satisfy",
-				<div>
+				<TestWrapper provider={{ store }} intlProvider={{ messages }} stylesProvider>
 					<div>
-						<Wrapper>
-							<Ignore />
-							<PrefForm>
-								<FieldBox>
-									<Label id="language_label">{stringifyWithoutQuotes(messages["orc-shared.displayLanguage"])}</Label>
-									<SelectorWrapper>
-										<select id="language" value="" onChange={() => {}}>
-											<option>English</option>
-											<option>EnglishCa</option>
-											<option>Francais</option>
-											<option>Francais-Qc</option>
-										</select>
-										<Ignore />
-										<Ignore />
-									</SelectorWrapper>
-								</FieldBox>
-								<FieldBox>
-									<Label id="application_label">{stringifyWithoutQuotes(messages["orc-shared.defaultApp"])}</Label>
-									<SelectorWrapper>
-										<select id="application" value="" onChange={() => {}}>
-											<option>Marketing Legacy</option>
-											<option>Product Information</option>
-										</select>
+						<div>
+							<div>
+								<Ignore />
+								<div>
+									<InformationItem label={sharedMessages.displayLanguage}>
 										<Ignore />
+									</InformationItem>
+									<InformationItem label={sharedMessages.defaultApp}>
 										<Ignore />
-									</SelectorWrapper>
-								</FieldBox>
-							</PrefForm>
-							<Ignore />
-						</Wrapper>
+									</InformationItem>
+								</div>
+								<Ignore />
+							</div>
+						</div>
 					</div>
-				</div>,
+				</TestWrapper>,
 			),
 		);
 	});
 
-	describe("createGetUpdater", () => {
-		let update, update2;
+	describe("stateEventUpdater", () => {
+		let update;
 		beforeEach(() => {
 			update = sinon.spy().named("update");
-			update2 = () => {};
 		});
-		it("returns an update function", () =>
-			expect(createGetUpdater, "when called with", [update], "called with", ["testField"], "called with", [
-				"testValue",
-			]).then(() => expect(update, "to have calls satisfying", [{ args: ["testField", "testValue"] }])));
 
-		it("memoizes on update function and field name", () => {
-			const update1_1 = createGetUpdater(update)("111");
-			const update1_2 = createGetUpdater(update)("222");
-			const update2_1 = createGetUpdater(update2)("111");
-			const update2_2 = createGetUpdater(update2)("222");
-			expect(createGetUpdater, "called with", [update]).then(f =>
-				expect(f, "called with", ["111"], "to be", update1_1).and("called with", ["222"], "to be", update1_2),
-			);
-			expect(createGetUpdater, "called with", [update2]).then(f =>
-				expect(f, "called with", ["111"], "to be", update2_1).and("called with", ["222"], "to be", update2_2),
-			);
-		});
+		it("creates a handler for an event and calls update with the value of the target", () =>
+			expect(stateEventUpdater, "called with", [update, "application"], "called with", ["foo"]).then(() =>
+				expect(update, "to have calls satisfying", [{ args: ["application", "foo"] }]),
+			));
+
+		it("is memoized", () =>
+			expect(
+				stateEventUpdater,
+				"called with",
+				[update, "application"],
+				"to be",
+				stateEventUpdater(update, "application"),
+			));
 	});
 });

package/src/components/AppFrame/Sidebar.js

@@ -1,34 +1,36 @@
 import React from "react";
 import { useSelector } from "react-redux";
-import styled, { withTheme } from "styled-components";
+import { makeStyles } from "@material-ui/core/styles";
 import { useLocation } from "react-router-dom";
-import { getThemeProp } from "../../utils";
 import { selectPrependHrefConfig } from "../../selectors/navigation";
 import MenuItem from "./MenuItem";
 import { getScopeModuleInformationSelector } from "../../selectors/modules";
 
-export const Bar = styled.div`
-	box-sizing: border-box;
-	padding-top: 60px;
-	height: calc(100% - 40px);
-	width: 200px;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	color: ${getThemeProp(["colors", "textMedium"], "#999999")};
-`;
+const useStyles = makeStyles(theme => ({
+	bar: {
+		boxSizing: "border-box",
+		paddingTop: "60px",
+		height: "calc(100% - 40px)",
+		width: "200px",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "flex-start",
+		color: theme.palette.text.hint,
+	},
+	logoSvg: {
+		flex: "0 0 auto",
+		margin: "auto 12.5px 7px",
+		height: "25px",
+		width: "25px",
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		fill: "#666666",
+	},
+}));
 
-export const MenuToggle = withTheme(({ open, toggle, theme }) => (
-	<MenuItem
-		id="sidebarMenuToggle"
-		menuToggle
-		open={open}
-		icon={(open ? getThemeProp(["icons", "sidebarOpen"], "layers") : getThemeProp(["icons", "sidebarClosed"], "menu"))({
-			theme,
-		})}
-		onClick={toggle}
-	/>
-));
+export const MenuToggle = ({ open, toggle }) => (
+	<MenuItem id="sidebarMenuToggle" menuToggle open={open} icon={open ? "collapse" : "expand"} onClick={toggle} />
+);
 
 const useEnhancement = id => {
 	const location = useLocation();
@@ -49,27 +51,23 @@ export const EnhancedMenuItem = ({ id, ...props }) => {
 	return <MenuItem {...props} {...useEnhancement(id)} isHidden={isHidden} />;
 };
 
-const LogoSvg = styled.svg`
-	flex: 0 0 auto;
-	margin: auto 12.5px 7px;
-	height: 25px;
-	width: 25px;
-	fill-rule: evenodd;
-	clip-rule: evenodd;
-	fill: #666666;
-`;
+export const Logo = () => {
+	const classes = useStyles();
 
-export const Logo = () => (
-	<LogoSvg viewBox="0 0 354 354">
-		<g>
-			<path d="M0 241.41c0-65.49 50.53-111.98 119.66-111.98s119.25 46.49 119.25 111.98c0 65.49-50.13 111.97-119.25 111.97S0 306.9 0 241.41Zm175.04 0c0-37.6-23.85-60.23-55.38-60.23s-55.79 22.64-55.79 60.23c0 37.59 24.26 60.23 55.79 60.23 31.53 0 55.38-22.64 55.38-60.23Zm178.1-76.35h-77.48c0-48.29-39.29-87.58-87.58-87.58V0c91.02 0 165.07 74.05 165.07 165.06h-.01Z" />
-		</g>
-	</LogoSvg>
-);
+	return (
+		<svg viewBox="0 0 354 354" className={classes.logoSvg}>
+			<g>
+				<path d="M0 241.41c0-65.49 50.53-111.98 119.66-111.98s119.25 46.49 119.25 111.98c0 65.49-50.13 111.97-119.25 111.97S0 306.9 0 241.41Zm175.04 0c0-37.6-23.85-60.23-55.38-60.23s-55.79 22.64-55.79 60.23c0 37.59 24.26 60.23 55.79 60.23 31.53 0 55.38-22.64 55.38-60.23Zm178.1-76.35h-77.48c0-48.29-39.29-87.58-87.58-87.58V0c91.02 0 165.07 74.05 165.07 165.06h-.01Z" />
+			</g>
+		</svg>
+	);
+};
 
 const Sidebar = ({ open, toggle, modules = [], activeModules = [] }) => {
+	const classes = useStyles();
+
 	return (
-		<Bar open={open}>
+		<div open={open} className={classes.bar}>
 			<MenuToggle open={open} toggle={toggle} />
 			{modules.map(item => (
 				<EnhancedMenuItem
@@ -81,7 +79,7 @@ const Sidebar = ({ open, toggle, modules = [], activeModules = [] }) => {
 				/>
 			))}
 			<Logo />
-		</Bar>
+		</div>
 	);
 };