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

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

@@ -1,9 +1,7 @@
 import React from "react";
-import { MemoryRouter } from "react-router-dom";
 import Immutable from "immutable";
-import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
-import Sidebar, { Bar, EnhancedMenuItem, MenuToggle, Logo } from "./Sidebar";
+import { TestWrapper } from "../../utils/testUtils";
+import Sidebar, { EnhancedMenuItem, MenuToggle, Logo } from "./Sidebar";
 import MenuItem from "./MenuItem";
 
 describe("Sidebar", () => {
@@ -43,106 +41,88 @@ describe("Sidebar", () => {
 
 	it("renders a sidebar with app selector and page menu", () =>
 		expect(
-			<Provider store={store}>
-				<ThemeProvider theme={{}}>
-					<MemoryRouter initialEntries={["/Global/second"]}>
-						<Sidebar modules={modules} />
-					</MemoryRouter>
-				</ThemeProvider>
-			</Provider>,
+			<TestWrapper
+				provider={{ store }}
+				stylesProvider
+				muiThemeProvider
+				memoryRouter={{ initialEntries: ["/Global/second"] }}
+			>
+				<Sidebar modules={modules} />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<Provider store={store}>
-				<ThemeProvider theme={{}}>
-					<MemoryRouter initialEntries={["/Global/second"]}>
-						<Bar>
-							<MenuToggle />
-							<EnhancedMenuItem icon="cars" title="First page" id="first" label="First page" />
-							<EnhancedMenuItem icon="person" title="Second page" id="second" label="Second page" />
-							<Logo />
-						</Bar>
-					</MemoryRouter>
-				</ThemeProvider>
-			</Provider>,
+			<TestWrapper
+				provider={{ store }}
+				stylesProvider
+				muiThemeProvider
+				memoryRouter={{ initialEntries: ["/Global/second"] }}
+			>
+				<div>
+					<MenuToggle />
+					<EnhancedMenuItem icon="cars" title="First page" id="first" label="First page" />
+					<EnhancedMenuItem icon="person" title="Second page" id="second" label="Second page" />
+					<Logo />
+				</div>
+			</TestWrapper>,
 		));
 
 	it("renders a sidebar showing alerts", () =>
 		expect(
-			<Provider store={store}>
-				<ThemeProvider theme={{}}>
-					<MemoryRouter initialEntries={["/Global/second"]}>
-						<Sidebar modules={modules} activeModules={{ first: { type: "confirm" } }} />
-					</MemoryRouter>
-				</ThemeProvider>
-			</Provider>,
+			<TestWrapper
+				provider={{ store }}
+				stylesProvider
+				muiThemeProvider
+				memoryRouter={{ initialEntries: ["/Global/second"] }}
+			>
+				<Sidebar modules={modules} activeModules={{ first: { type: "confirm" } }} />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<Provider store={store}>
-				<ThemeProvider theme={{}}>
-					<MemoryRouter initialEntries={["/Global/second"]}>
-						<Bar>
-							<MenuToggle />
-							<EnhancedMenuItem
-								icon="cars"
-								title="First page"
-								id="first"
-								label="First page"
-								alert={{ type: "confirm" }}
-							/>
-							<EnhancedMenuItem icon="person" title="Second page" id="second" label="Second page" />
-							<Logo />
-						</Bar>
-					</MemoryRouter>
-				</ThemeProvider>
-			</Provider>,
+			<TestWrapper
+				provider={{ store }}
+				stylesProvider
+				muiThemeProvider
+				memoryRouter={{ initialEntries: ["/Global/second"] }}
+			>
+				<div>
+					<MenuToggle />
+					<EnhancedMenuItem icon="cars" title="First page" id="first" label="First page" alert={{ type: "confirm" }} />
+					<EnhancedMenuItem icon="person" title="Second page" id="second" label="Second page" />
+					<Logo />
+				</div>
+			</TestWrapper>,
 		));
 
 	it("renders an open sidebar", () =>
 		expect(
-			<Provider store={store}>
-				<ThemeProvider theme={{}}>
-					<MemoryRouter initialEntries={["/Global/second"]}>
-						<Sidebar open modules={modules} />
-					</MemoryRouter>
-				</ThemeProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+				<Sidebar open modules={modules} />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<Provider store={store}>
-				<ThemeProvider theme={{}}>
-					<MemoryRouter initialEntries={["/Global/second"]}>
-						<Bar>
-							<MenuToggle open />
-							<EnhancedMenuItem open icon="cars" title="First page" id="first" label="First page" />
-							<EnhancedMenuItem open icon="person" title="Second page" id="second" label="Second page" />
-							<Logo />
-						</Bar>
-					</MemoryRouter>
-				</ThemeProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+				<div>
+					<MenuToggle open />
+					<EnhancedMenuItem open icon="cars" title="First page" id="first" label="First page" />
+					<EnhancedMenuItem open icon="person" title="Second page" id="second" label="Second page" />
+					<Logo />
+				</div>
+			</TestWrapper>,
 		));
 
 	it("renders a minimal sidebar", () =>
 		expect(
-			<Provider store={store}>
-				<ThemeProvider theme={{}}>
-					<MemoryRouter>
-						<Sidebar />
-					</MemoryRouter>
-				</ThemeProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+				<Sidebar />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<Provider store={store}>
-				<ThemeProvider theme={{}}>
-					<MemoryRouter>
-						<Bar>
-							<MenuToggle />
-							<Logo />
-						</Bar>
-					</MemoryRouter>
-				</ThemeProvider>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+				<div>
+					<MenuToggle />
+					<Logo />
+				</div>
+			</TestWrapper>,
 		));
 });
 
@@ -178,34 +158,26 @@ describe("EnhancedMenuItem", () => {
 
 	it("renders a MenuItem with href", () =>
 		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<EnhancedMenuItem id="route" path="/Global/somewhere" />
-				</MemoryRouter>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+				<EnhancedMenuItem id="route" path="/Global/somewhere" />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<Provider store={store}>
-				<MemoryRouter>
-					<MenuItem href="/Global/route" />
-				</MemoryRouter>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+				<MenuItem href="/Global/route" />
+			</TestWrapper>,
 		));
 
 	it("sets the active flag if path matches href", () =>
 		expect(
-			<Provider store={store}>
-				<MemoryRouter initialEntries={["/Global/route/subpath"]}>
-					<EnhancedMenuItem id="route" />
-				</MemoryRouter>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+				<EnhancedMenuItem id="route" />
+			</TestWrapper>,
 			"when mounted",
 			"to satisfy",
-			<Provider store={store}>
-				<MemoryRouter>
-					<MenuItem active href="/Global/route" />
-				</MemoryRouter>
-			</Provider>,
+			<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+				<MenuItem active href="/Global/route" />
+			</TestWrapper>,
 		));
 });
 
@@ -223,78 +195,26 @@ describe("MenuToggle", () => {
 	describe("with no theme", () => {
 		it("renders a MenuItem with specific settings", () =>
 			expect(
-				<Provider store={store}>
-					<ThemeProvider theme={{ foo: "bar" }}>
-						<MemoryRouter>
-							<MenuToggle toggle={toggle} />
-						</MemoryRouter>
-					</ThemeProvider>
-				</Provider>,
+				<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+					<MenuToggle toggle={toggle} />
+				</TestWrapper>,
 				"when mounted",
 				"to satisfy",
-				<Provider store={store}>
-					<MenuItem id="sidebarMenuToggle" menuToggle icon="menu" onClick={expect.it("to be a function")} />
-				</Provider>,
+				<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+					<MenuItem id="sidebarMenuToggle" menuToggle icon="expand" onClick={expect.it("to be a function")} />
+				</TestWrapper>,
 			));
 
 		it("renders as open", () =>
 			expect(
-				<Provider store={store}>
-					<ThemeProvider theme={{ foo: "bar" }}>
-						<MemoryRouter>
-							<MenuToggle toggle={toggle} open />
-						</MemoryRouter>
-					</ThemeProvider>
-				</Provider>,
+				<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+					<MenuToggle toggle={toggle} open />
+				</TestWrapper>,
 				"when mounted",
 				"to satisfy",
-				<Provider store={store}>
-					<MenuItem id="sidebarMenuToggle" menuToggle open icon="layers" onClick={expect.it("to be a function")} />
-				</Provider>,
-			));
-	});
-
-	describe("with theme values", () => {
-		let theme;
-		beforeEach(() => {
-			theme = {
-				icons: {
-					sidebarOpen: "open",
-					sidebarClosed: "closed",
-				},
-			};
-		});
-
-		it("renders a MenuItem with specific settings", () =>
-			expect(
-				<Provider store={store}>
-					<ThemeProvider theme={theme}>
-						<MemoryRouter>
-							<MenuToggle toggle={toggle} />
-						</MemoryRouter>
-					</ThemeProvider>
-				</Provider>,
-				"when mounted",
-				"to satisfy",
-				<Provider store={store}>
-					<MenuItem menuToggle icon="closed" onClick={expect.it("to be a function")} />
-				</Provider>,
-			));
-
-		it("renders as open", () =>
-			expect(
-				<Provider store={store}>
-					<ThemeProvider theme={theme}>
-						<MemoryRouter>
-							<MenuToggle toggle={toggle} open />
-						</MemoryRouter>
-					</ThemeProvider>
-				</Provider>,
-				"when mounted",
-				"to satisfy",
-				<Provider store={store}>
-					<MenuItem menuToggle open icon="open" onClick={expect.it("to be a function")} />
-				</Provider>,
+				<TestWrapper provider={{ store }} stylesProvider muiThemeProvider memoryRouter>
+					<MenuItem id="sidebarMenuToggle" menuToggle open icon="collapse" onClick={expect.it("to be a function")} />
+				</TestWrapper>,
 			));
 	});
 });

package/src/components/AppFrame/Topbar.js

@@ -1,8 +1,7 @@
 import React from "react";
-import styled from "styled-components";
 import { useDispatch, useSelector } from "react-redux";
 import { useIntl } from "react-intl";
-import { getThemeProp } from "../../utils";
+import { makeStyles } from "@material-ui/core/styles";
 import { selectCurrentUsername } from "../../selectors/authentication";
 import { setStateField } from "../../actions/view";
 import { signOut } from "../../actions/authentication";
@@ -14,12 +13,36 @@ import Anchor from "./Anchor";
 import Help from "./Help";
 import sharedMessages from "./../../sharedMessages";
 
-export const Wrapper = styled.div`
-	height: 40px;
-	color: ${getThemeProp(["colors", "textMedium"], "#999999")};
-	display: flex;
-	justify-content: space-between;
-`;
+const useStyles = makeStyles(theme => ({
+	wrapper: {
+		height: "40px",
+		color: theme.palette.text.hint,
+		display: "flex",
+		justifyContent: "space-between",
+	},
+	appBox: {
+		height: "100%",
+		display: "flex",
+		flex: 1,
+		alignItems: "stretch",
+	},
+	appLabel: {
+		backgroundColor: "#000000",
+		color: theme.palette.primary.light,
+		fontFamily: theme.typography.button.fontFamily,
+		fontSize: "14px",
+		textTransform: "uppercase",
+		paddingRight: "20px",
+		paddingLeft: "6px",
+		display: "flex",
+		alignItems: "center",
+	},
+	appLogo: {
+		height: "30px",
+		marginRight: "10px",
+	},
+}));
+
 export const useMenuProps = () => {
 	const intl = useIntl();
 	const dispatch = useDispatch();
@@ -58,52 +81,36 @@ export const Menu = () => {
 	);
 };
 
-export const AppBox = styled.div`
-	height: 100%;
-	display: flex;
-	flex: 1;
-	align-items: stretch;
-`;
-
-export const AppLabel = styled.div`
-	background-color: #000000;
-	color: ${getThemeProp(["colors", "application", "primary"], "#ffffff")};
-	font-family: ${getThemeProp(["fonts", "header"], "sans-serif")};
-	font-size: 14px;
-	text-transform: uppercase;
-	padding-right: 20px;
-	padding-left: 6px;
-	display: flex;
-	align-items: center;
-`;
-
-export const AppLogo = styled.img.attrs(() => ({ alt: "" }))`
-	height: 30px;
-	margin-right: 10px;
-`;
+export const CurrentApp = ({ displayName, iconUri }) => {
+	const classes = useStyles();
 
-export const CurrentApp = ({ displayName, iconUri }) => (
-	<AppLabel>
-		<AppLogo src={iconUri} />
-		{displayName}
-	</AppLabel>
-);
+	return (
+		<div className={classes.appLabel}>
+			<img src={iconUri} className={classes.appLogo} />
+			{displayName}
+		</div>
+	);
+};
 CurrentApp.displayName = "CurrentApp";
 
-const Topbar = ({ applications, applicationId, currentApplication, onClick, helpUrl, ...config }) => (
-	<Wrapper onClick={onClick}>
-		<AppBox>
-			<ApplicationSelector
-				{...{
-					applications,
-					applicationId,
-				}}
-			/>
-			<CurrentApp {...(currentApplication || {})} />
-		</AppBox>
-		<Menu {...config} />
-		<Help {...{ helpUrl }} />
-	</Wrapper>
-);
+const Topbar = ({ applications, applicationId, currentApplication, onClick, helpUrl, ...config }) => {
+	const classes = useStyles();
+
+	return (
+		<div onClick={onClick} className={classes.wrapper} data-test-id="wrapper">
+			<div className={classes.appBox}>
+				<ApplicationSelector
+					{...{
+						applications,
+						applicationId,
+					}}
+				/>
+				<CurrentApp {...(currentApplication || {})} />
+			</div>
+			<Menu {...config} />
+			<Help {...{ helpUrl }} />
+		</div>
+	);
+};
 
 export default Topbar;

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

@@ -10,9 +10,7 @@ import { SIGN_OUT_REQUEST, SIGN_OUT_SUCCESS, SIGN_OUT_FAILURE } from "../../acti
 import { PREFS_NAME } from "./Preferences";
 import { ABOUT_NAME } from "./About";
 import ApplicationSelector from "./ApplicationSelector";
-import { Wrapper as MenuWrapper } from "../DropMenu";
-import Topbar, { Wrapper, AppBox, CurrentApp, AppLabel, AppLogo, useMenuProps } from "./Topbar";
-import { HelpLink } from "./Help";
+import Topbar, { CurrentApp, useMenuProps } from "./Topbar";
 
 jest.mock("../../utils/buildUrl", () => {
 	const modExport = {};
@@ -77,19 +75,17 @@ describe("Topbar", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<Wrapper onClick={clicker}>
-				<AppBox>
+			<div onClick={clicker}>
+				<div>
 					<ApplicationSelector {...props} />
-					<AppLabel>
-						<AppLogo src="/test/url" />
+					<div>
+						<img src="/test/url" />
 						Test label
-					</AppLabel>
-				</AppBox>
-				<MenuWrapper>
-					<Ignore />
-				</MenuWrapper>
-				<HelpLink>Help</HelpLink>
-			</Wrapper>,
+					</div>
+				</div>
+				<Ignore />
+				<a>Help</a>
+			</div>,
 		));
 
 	it("doesn't break if no current app", () =>
@@ -101,18 +97,16 @@ describe("Topbar", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<Wrapper onClick={clicker}>
-				<AppBox>
-					<Ignore />
-					<AppLabel>
-						<AppLogo />
-					</AppLabel>
-				</AppBox>
-				<MenuWrapper>
+			<div onClick={clicker}>
+				<div>
 					<Ignore />
-				</MenuWrapper>
-				<HelpLink>Help</HelpLink>
-			</Wrapper>,
+					<div>
+						<img />
+					</div>
+				</div>
+				<Ignore />
+				<a>Help</a>
+			</div>,
 		));
 
 	it("doesn't break if no apps at all", () =>
@@ -124,18 +118,16 @@ describe("Topbar", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<Wrapper onClick={clicker}>
-				<AppBox>
-					<Ignore />
-					<AppLabel>
-						<AppLogo />
-					</AppLabel>
-				</AppBox>
-				<MenuWrapper>
+			<div onClick={clicker}>
+				<div>
 					<Ignore />
-				</MenuWrapper>
-				<HelpLink>Help</HelpLink>
-			</Wrapper>,
+					<div>
+						<img />
+					</div>
+				</div>
+				<Ignore />
+				<a>Help</a>
+			</div>,
 		));
 });
 
@@ -246,9 +238,9 @@ describe("CurrentApp", () => {
 			<CurrentApp displayName="Test label" iconUri="/test/url" />,
 			"when mounted",
 			"to satisfy",
-			<AppLabel>
-				<AppLogo src="/test/url" />
+			<div>
+				<img src="/test/url" />
 				Test label
-			</AppLabel>,
+			</div>,
 		));
 });

package/src/components/ColumnWrapper.js

@@ -1,11 +1,20 @@
-import styled from "styled-components";
-
-const ColumnWrapper = styled.div`
-	flex: 0 1 100%;
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	min-width: 0;
-`;
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(() => ({
+	columnWrapper: {
+		flex: "0 1 100%",
+		display: "flex",
+		flexDirection: "column",
+		minHeight: 0,
+		minWidth: 0,
+	},
+}));
+
+const ColumnWrapper = ({ children }) => {
+	const classes = useStyles();
+
+	return <div className={classes.columnWrapper}>{children}</div>;
+};
 
 export default ColumnWrapper;