orc-shared 1.1.0-dev.9 → 1.1.2

package/src/components/AppFrame/ApplicationSelector/ApplicationDialog.js

@@ -1,88 +1,111 @@
 import React from "react";
-import styled from "styled-components";
+import { FormattedMessage } from "react-intl";
+import sharedMessages from "../../../sharedMessages";
+import Link from "@material-ui/core/Link";
+import Typography from "@material-ui/core/Typography";
+import Grid from "@material-ui/core/Grid";
+import { makeStyles } from "@material-ui/core/styles";
+import classNames from "classnames";
 
-export const List = styled.div`
-	display: flex;
-	min-height: 10vh;
-	max-height: 90vh;
-	overflow-x: hidden;
-	overflow-y: auto;
-	width: 60vw;
-	padding: 45px 60px 10px;
-	justify-content: center;
-	flex-wrap: wrap;
-`;
+const useStyles = makeStyles(theme => ({
+	popperContainer: {
+		cursor: "pointer",
+		position: "relative",
+	},
+	header: {
+		borderBottom: `1px solid ${theme.palette.grey.light}`,
+		margin: theme.spacing(0),
+		padding: `${theme.spacing(1, 2)} !important`,
+		width: `calc(100% + ${theme.spacing(2)})`,
+		maxWidth: "none",
+		flexGrow: 1,
+		backgroundColor: theme.palette.grey.lighter,
+		textAlign: "center",
+		borderRadius: theme.spacing(1, 1, 0, 0),
+	},
+	content: {
+		borderRadius: theme.shape.borderRadius,
+	},
+	wrapper: {
+		backgroundColor: theme.palette.background.paper,
+		width: theme.spacing(82),
+		borderRadius: theme.spacing(1),
+		border: `1px solid ${theme.palette.grey.borders}`,
+		boxShadow: `${theme.spacing(0, 0, 2)} rgba(0,0,0,0.5)`,
+		position: "relative",
+	},
+	container: {
+		borderRadius: theme.shape.borderRadius,
+		textAlign: "center",
+		"&:hover": {
+			backgroundColor: theme.palette.grey.lighter,
+		},
+		overflow: "hidden",
+	},
+	containerSelected: {
+		boxShadow: `${theme.spacing(0, 0, 0.8)} ${theme.palette.grey.borders}`,
+	},
+	appLink: {
+		padding: theme.spacing(2),
+		display: "block",
+	},
+	headerTitle: {
+		fontSize: theme.typography.h3Size,
+		textTransform: theme.typography.button.textTransform,
+		fontFamily: theme.typography.button.fontFamily,
+		fontWeight: theme.typography.button.fontWeight,
+	},
+	label: {
+		fontSize: theme.typography.h4Size,
+		color: theme.palette.text.primary,
+	},
+}));
 
-export const Block = styled.div`
-	flex: 0 0 140px;
-	text-align: center;
-	height: 120px;
-	display: flex;
-	flex-flow: column nowrap;
-	align-items: center;
-`;
-export const Link = styled.a``;
+export const ApplicationDialog = ({ toggle, applications, applicationId, applicationOrder }) => {
+	const classes = useStyles();
 
-export const Logo = styled.img`
-	height: 60px;
-	width: 60px;
-	border-radius: 50%;
-
-	${Link}:hover > & {
-		background-color: rgba(255, 255, 255, 0.65);
-		box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.65);
-	}
-`;
-
-export const Label = styled.span`
-	${Link}:hover ~ & {
-		visibility: visible;
-	}
-	visibility: hidden;
-	display: block;
-	margin: 22px -60px 0;
-	font-family: Roboto, sans-serif;
-	font-size: 14px;
-	text-transform: uppercase;
-	color: rgba(255, 255, 255, 0.65);
-`;
-
-export const Indicator = styled.div`
-	background-color: white;
-	border-radius: 50%;
-	height: 8px;
-	width: 8px;
-	margin-top: -17px;
-	${Link}:hover ~ & {
-		visibility: hidden;
-	}
-`;
-
-const ApplicationDialog = ({ toggle, applications, applicationId, applicationOrder }) => (
-	<List>
-		{applications.map(app => (
-			<Block key={app.name}>
-				<Link
-					id={app.name}
-					href={app.url}
-					target="_blank"
-					onClick={
-						app.name === applicationId
-							? event => {
-									event.preventDefault();
-									toggle();
-							  }
-							: /* istanbul ignore next */
-							  () => {}
-					}
-				>
-					<Logo src={app.iconUri} alt={app.displayName} />
-				</Link>
-				<Label>{app.displayName}</Label>
-				{app.name === applicationId ? <Indicator /> : null}
-			</Block>
-		))}
-	</List>
-);
+	return (
+		<Grid container spacing={2} className={classes.wrapper}>
+			<Grid item xs={12} className={classes.header}>
+				<Typography
+					children={<FormattedMessage {...sharedMessages.appSelectorTitle} />}
+					className={classes.headerTitle}
+				/>
+			</Grid>
+			<Grid item container xs={12} className={classes.content}>
+				{applications.map(app => (
+					<Grid
+						className={classNames(classes.container, app.name === applicationId ? classes.containerSelected : "")}
+						item
+						key={app.name}
+						xs={6}
+						md={3}
+					>
+						<Link
+							className={classes.appLink}
+							id={app.name}
+							href={app.url}
+							target="_blank"
+							underline="none"
+							onClick={
+								app.name === applicationId
+									? event => {
+											event.preventDefault();
+											toggle();
+									  }
+									: /* istanbul ignore next */
+									  () => {}
+							}
+						>
+							<img height="60" src={app.iconUri} alt={app.displayName} />
+							<br />
+							<Typography children={app.displayName} className={classes.label} />
+						</Link>
+					</Grid>
+				))}
+			</Grid>
+		</Grid>
+	);
+};
 
 export default ApplicationDialog;

package/src/components/AppFrame/ApplicationSelector/ApplicationDialog.test.js

@@ -1,9 +1,16 @@
 import React from "react";
 import sinon from "sinon";
-import { getStyledClassSelector } from "../../../utils/testUtils";
-import ApplicationDialog, { List, Block, Link, Logo, Label, Indicator } from "./ApplicationDialog";
+import { extractMessages, TestWrapper, createMuiTheme } from "../../../utils/testUtils";
+import ApplicationDialog from "./ApplicationDialog";
+import Link from "@material-ui/core/Link";
+import Grid from "@material-ui/core/Grid";
+import sharedMessages from "~/sharedMessages";
+import { mount } from "enzyme";
 
+const messages = extractMessages(sharedMessages);
 describe("ApplicationDialog", () => {
+	const theme = createMuiTheme();
+
 	let toggle, applications;
 	beforeEach(() => {
 		toggle = sinon.spy().named("toggle");
@@ -23,30 +30,60 @@ describe("ApplicationDialog", () => {
 		];
 	});
 
-	it("renders a dialog structure listing applications", () =>
+	it("renders a dialog structure listing applications", () => {
+		const component = (
+			<TestWrapper intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<ApplicationDialog toggle={toggle} applications={applications} applicationId="ChosenId" />
+			</TestWrapper>
+		);
+
+		const expected = (
+			<TestWrapper intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<Grid>
+					<Grid>
+						<p>Orckestra Commerce Cloud Applications List</p>
+					</Grid>
+					<Grid>
+						<Grid key="ChosenId">
+							<Link href="/test/url" underline="none">
+								<img src="/url/to/img1.png" alt="Current App" />
+								<br />
+								<p>Current App</p>
+							</Link>
+						</Grid>
+						<Grid key="OtherId">
+							<Link href="/test/some/other/url" underline="none">
+								<img src="/url/to/img2.png" alt="Other App" />
+								<br />
+								<p>Other App</p>
+							</Link>
+						</Grid>
+					</Grid>
+				</Grid>
+			</TestWrapper>
+		);
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("triggers toggle when the current app link is clicked", () => {
+		const component = (
+			<TestWrapper intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<ApplicationDialog toggle={toggle} applications={applications} applicationId="ChosenId" />
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+
+		const currAppLink = mountedComponent.find(Link).at(0);
+		currAppLink.simulate("click");
+		expect(toggle, "was called once");
+	});
+	/*
 		expect(
 			<ApplicationDialog toggle={toggle} applications={applications} applicationId="ChosenId" />,
 			"when mounted",
-			"with event",
-			{
-				type: "click",
-				target: getStyledClassSelector(Link) + '[href="/test/url"]',
-			},
 			"to satisfy",
-			<List>
-				<Block key="ChosenId">
-					<Link id="ChosenId" href="/test/url">
-						<Logo src="/url/to/img1.png" />
-					</Link>
-					<Label>Current App</Label>
-					<Indicator />
-				</Block>
-				<Block key="OtherId">
-					<Link id="OtherId" href="/test/some/other/url">
-						<Logo src="/url/to/img2.png" />
-					</Link>
-					<Label>Other App</Label>
-				</Block>
-			</List>,
+			,
 		).then(() => expect(toggle, "was called once")));
+		*/
 });

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

@@ -1,10 +1,16 @@
 import React from "react";
-import ApplicationSelector, { getAnchor, getDialog } from "./index";
-import Header, { MenuIcon, Wrapper } from "./Header";
-import ApplicationDialog, { List, Block, Link, Logo, Label, Indicator } from "./ApplicationDialog";
+import { extractMessages, TestWrapper, createMuiTheme } from "../../../utils/testUtils";
+import ApplicationSelector from "./index";
+import PopperedIcon from "../../MaterialUI/DataDisplay/PopperedElements/PopperedIcon";
+import ApplicationDialog from "./ApplicationDialog";
+import sharedMessages from "~/sharedMessages";
+
+const messages = extractMessages(sharedMessages);
 
 describe("ApplicationSelector", () => {
-	let props, applications, thisApp, modalRoot;
+	const theme = createMuiTheme();
+
+	let props, applications, thisApp;
 	beforeEach(() => {
 		thisApp = {
 			name: "current",
@@ -26,92 +32,19 @@ describe("ApplicationSelector", () => {
 			applications,
 			applicationId: "current",
 		};
-		modalRoot = document.createElement("div");
-		modalRoot.id = "modal";
-		document.body.appendChild(modalRoot);
-	});
-	afterEach(() => {
-		document.body.removeChild(modalRoot);
 	});
 
-	it("renders a modal application selector dialog", () =>
-		expect(
-			<ApplicationSelector {...props} />,
-			"when mounted",
-			"with event",
-			"click",
-			"to satisfy",
-			<Wrapper>
-				<MenuIcon />
-			</Wrapper>,
-		).then(() =>
-			expect(
-				modalRoot,
-				"to contain",
-				<List>
-					<Block key="current">
-						<Link href="/test/url">
-							<Logo src="/url/to/img1.png" />
-						</Link>
-						<Label>Test label</Label>
-						<Indicator />
-					</Block>
-					<Block key="other">
-						<Link href="/test/elsewhere">
-							<Logo src="/url/to/img2.png" />
-						</Link>
-						<Label>Test again</Label>
-					</Block>
-				</List>,
-			),
-		));
-
-	describe("getAnchor", () => {
-		let toggle;
-		beforeEach(() => {
-			toggle = () => {};
-		});
-
-		it("takes props and returns a header render function", () =>
-			expect(
-				getAnchor,
-				"when called with",
-				["foo", props],
-				"when called with",
-				[toggle],
-				"to equal",
-				<Header className="foo" open application={thisApp} toggle={toggle} />,
-			));
-
-		it("handles a missing app list", () => {
-			delete props.applications;
-			return expect(
-				getAnchor,
-				"when called with",
-				["foo", props],
-				"when called with",
-				[toggle],
-				"to equal",
-				<Header className="foo" open toggle={toggle} />,
-			);
-		});
-	});
-
-	describe("getDialog", () => {
-		let toggle;
-		beforeEach(() => {
-			toggle = () => {};
-		});
-
-		it("takes props and returns a header render function", () =>
-			expect(
-				getDialog,
-				"when called with",
-				[props],
-				"when called with",
-				[toggle],
-				"to equal",
-				<ApplicationDialog open applications={applications} applicationId={props.applicationId} toggle={toggle} />,
-			));
+	it("renders a poppered application selector dialog", () => {
+		const component = (
+			<TestWrapper intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<ApplicationSelector {...props} />
+			</TestWrapper>
+		);
+		const expected = (
+			<TestWrapper intlProvider={{ messages }} stylesProvider muiThemeProvider={{ theme }}>
+				<PopperedIcon popperValue={<ApplicationDialog {...props} />} id="app-list" placement="bottom-start" />
+			</TestWrapper>
+		);
+		expect(component, "when mounted", "to satisfy", expected);
 	});
 });

package/src/components/AppFrame/ApplicationSelector/index.js

@@ -1,24 +1,43 @@
 import React from "react";
-import Header from "./Header";
 import ApplicationDialog from "./ApplicationDialog";
-import Modal from "../../Modal";
+import PopperedIcon from "../../MaterialUI/DataDisplay/PopperedElements/PopperedIcon";
+import { makeStyles } from "@material-ui/core/styles";
 
-const getApp = (apps = [], id) => apps.filter(app => app.name === id)[0];
+const useStyles = makeStyles(theme => ({
+	popperContainer: {
+		cursor: "pointer",
+		position: "relative",
+		fontSize: theme.spacing(2.4),
+		padding: theme.spacing(0.5, 1.3),
+		"& svg": {
+			color: theme.palette.grey.icon,
+		},
+	},
+	arrow: {
+		top: 0,
+		left: theme.spacing(1),
+		width: theme.spacing(1),
+		height: theme.spacing(1),
+		transform: "translateX(-50%) rotate(45deg)",
+		marginTop: theme.spacing(-1.5),
+		backgroundColor: theme.palette.grey.lighter,
+		border: "1px solid",
+		borderColor: `${theme.palette.grey.borders} transparent transparent ${theme.palette.grey.borders}`,
+		zIndex: 2000,
+		position: "absolute",
+	},
+}));
 
-export const getAnchor = (className, props) => toggle =>
-	(
-		<Header
-			className={className}
-			open={props.open}
-			application={getApp(props.applications, props.applicationId)}
-			toggle={toggle}
+const ApplicationSelector = ({ className, ...props }) => {
+	const classes = useStyles();
+	return (
+		<PopperedIcon
+			popperValue={<ApplicationDialog {...props} />}
+			id="app-list"
+			classprop={classes}
+			placement="bottom-start"
 		/>
 	);
-
-export const getDialog = props => toggle => <ApplicationDialog {...props} toggle={toggle} />;
-
-const ApplicationSelector = ({ className, ...props }) => {
-	return <Modal anchor={getAnchor(className, props)} content={getDialog(props)} look="dark" />;
 };
 
 export default ApplicationSelector;

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

@@ -9,7 +9,7 @@ import { VIEW_STATE_SET_FIELD } from "../../actions/view";
 import { SIGN_OUT_REQUEST, SIGN_OUT_SUCCESS, SIGN_OUT_FAILURE } from "../../actions/authentication";
 import { PREFS_NAME } from "./Preferences";
 import { ABOUT_NAME } from "./About";
-import { Wrapper as AppSelWrapper, MenuIcon } from "./ApplicationSelector/Header";
+import ApplicationSelector from "./ApplicationSelector";
 import { Wrapper as MenuWrapper } from "../DropMenu";
 import Topbar, { Wrapper, AppBox, CurrentApp, AppLabel, AppLogo, useMenuProps } from "./Topbar";
 import { HelpLink } from "./Help";
@@ -79,9 +79,7 @@ describe("Topbar", () => {
 			"to satisfy",
 			<Wrapper onClick={clicker}>
 				<AppBox>
-					<AppSelWrapper>
-						<MenuIcon />
-					</AppSelWrapper>
+					<ApplicationSelector {...props} />
 					<AppLabel>
 						<AppLogo src="/test/url" />
 						Test label

package/src/components/MaterialUI/DataDisplay/SelectionList.js

@@ -11,10 +11,13 @@ const useStyles = makeStyles(theme => ({
 		fontSize: theme.spacing(1.2),
 		marginBottom: theme.spacing(0.6),
 	},
-
+	listHeight: {
+		height: props => props.height && theme.spacing(props.height),
+	},
 	paper: {
+		flexGrow: 1,
+		height: "1px", // forces the container to takes 100%
 		overflow: "auto",
-		height: props => theme.spacing(props.height),
 		border: `1px solid ${theme.palette.primary.light}`,
 		borderRadius: theme.shape.borderRadius,
 		boxShadow: "none",
@@ -38,6 +41,11 @@ const useStyles = makeStyles(theme => ({
 	actionPanel: {
 		paddingTop: theme.spacing(2),
 	},
+	listContainer: {
+		display: "flex",
+		flexDirection: "column",
+		height: "100%",
+	},
 }));
 
 const defaultInfoPanelXs = 6;
@@ -74,7 +82,7 @@ const SelectionList = ({
 	useEffect(() => {
 		const listDataIds = listData.data.map(d => d.id);
 		const checkedFromList = listDataIds.filter(l => checked.includes(l));
-		if (defaultSelection && checkedFromList.length === 0) {
+		if (defaultSelection && checkedFromList.length === 0 && checked[0] !== defaultSelection) {
 			setChecked([defaultSelection]);
 		}
 	}, [defaultSelection, checked, listData.data]);
@@ -101,7 +109,7 @@ const SelectionList = ({
 	const dividerDiff = showDivider ? 1 : 0;
 
 	const listComponent = (
-		<>
+		<div className={classes.listContainer}>
 			<div className={classes.title}>{listData.title}</div>
 			<ScrollableCustomList
 				ref={refScrollableList}
@@ -118,7 +126,7 @@ const SelectionList = ({
 				onChange={onChangeEvent}
 			/>
 			{actionPanel ? <div className={classes.actionPanel}>{actionPanel}</div> : null}
-		</>
+		</div>
 	);
 
 	const dividerComponent = showDivider && (
@@ -129,7 +137,7 @@ const SelectionList = ({
 
 	return (
 		<Grid container spacing={2}>
-			<Grid item xs={12 - infoPanelXs - dividerDiff}>
+			<Grid item xs={12 - infoPanelXs - dividerDiff} className={classes.listHeight}>
 				{listComponent}
 			</Grid>
 			{dividerComponent}

package/src/components/MaterialUI/DataDisplay/SelectionList.test.js

@@ -33,8 +33,10 @@ describe("SelectionList", () => {
 			<TestWrapper intlProvider={{ messages }}>
 				<Grid>
 					<Grid>
-						<div>{listTitle}</div>
-						<ScrollableCustomList checked={[]} items={list} classes={{}} />
+						<div>
+							<div>{listTitle}</div>
+							<ScrollableCustomList checked={[]} items={list} classes={{}} />
+						</div>
 					</Grid>
 					<Grid>
 						<div></div>
@@ -60,8 +62,10 @@ describe("SelectionList", () => {
 			<TestWrapper intlProvider={{ messages }}>
 				<Grid>
 					<Grid>
-						<div>{listTitle}</div>
-						<ScrollableCustomList checked={[]} items={list} classes={{}} />
+						<div>
+							<div>{listTitle}</div>
+							<ScrollableCustomList checked={[]} items={list} classes={{}} />
+						</div>
 					</Grid>
 					<Grid>
 						<div></div>
@@ -86,8 +90,10 @@ describe("SelectionList", () => {
 		const expected = (
 			<Grid>
 				<Grid>
-					<div>{listTitle}</div>
-					<ScrollableCustomList checked={[]} items={list} classes={{}} />
+					<div>
+						<div>{listTitle}</div>
+						<ScrollableCustomList checked={[]} items={list} classes={{}} />
+					</div>
 				</Grid>
 				<Grid>
 					<hr />
@@ -117,9 +123,11 @@ describe("SelectionList", () => {
 		const expected = (
 			<Grid>
 				<Grid>
-					<div>{listTitle}</div>
-					<ScrollableCustomList checked={[]} items={list} classes={{}} />
-					<div>{actionPanel}</div>
+					<div>
+						<div>{listTitle}</div>
+						<ScrollableCustomList checked={[]} items={list} classes={{}} />
+						<div>{actionPanel}</div>
+					</div>
 				</Grid>
 				<Grid>
 					<hr />
@@ -145,8 +153,10 @@ describe("SelectionList", () => {
 		const expected = (
 			<Grid>
 				<Grid>
-					<div>{listTitle}</div>
-					<ScrollableCustomList checked={[]} items={list} classes={{}} />
+					<div>
+						<div>{listTitle}</div>
+						<ScrollableCustomList checked={[]} items={list} classes={{}} />
+					</div>
 				</Grid>
 				<Grid>
 					<div>Test</div>