orc-shared 1.1.0-dev.9 → 1.2.0-dev.10

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/MenuItem.js

@@ -1,5 +1,4 @@
 import React, { useRef } from "react";
-import { useSelector } from "react-redux";
 import styled, { css } from "styled-components";
 import transition from "styled-transition-group";
 import { Link } from "react-router-dom";
@@ -124,13 +123,11 @@ const MenuItem = ({
 	alert,
 	pageScopeSelector,
 	closingTabHandler,
-	hide,
+	hide, // This props is not used in the component, but we need to destructure it so props can be used in ItemWrapper
+	isHidden = false,
 	href,
 	...props
 }) => {
-	let hideSelector = state => (typeof hide === "function" ? hide(state) : hide ?? false);
-	const isHidden = useSelector(hideSelector);
-
 	let ItemWrapper = Block;
 	if (props.menuToggle) {
 		ItemWrapper = BlockWithA;
@@ -139,6 +136,7 @@ const MenuItem = ({
 	if (alert && alert.message) {
 		alertMessage.current = alert.message;
 	}
+
 	return (
 		!isHidden && (
 			<ItemWrapper to={href} {...props}>

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

@@ -168,7 +168,7 @@ describe("MenuItem", () => {
 			</MemoryRouter>,
 		));
 
-	it("shows nothing if hide is true", () => {
+	it("shows nothing if isHidden is true", () => {
 		expect(
 			<Provider store={store}>
 				<MemoryRouter>
@@ -178,29 +178,7 @@ describe("MenuItem", () => {
 						icon="cake"
 						label="Test"
 						alert={{ message: "Test message", type: "warn" }}
-						hide={true}
-					/>
-				</MemoryRouter>
-			</Provider>,
-			"when mounted",
-			"to equal",
-			null,
-		);
-	});
-
-	it("shows nothing if hide selector returns true", () => {
-		const hide = state => true;
-
-		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<MenuItem
-						id="test"
-						href="/foo/test"
-						icon="cake"
-						label="Test"
-						alert={{ message: "Test message", type: "warn" }}
-						hide={hide}
+						isHidden={true}
 					/>
 				</MemoryRouter>
 			</Provider>,

package/src/components/AppFrame/Sidebar.js

@@ -5,6 +5,7 @@ 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;
@@ -40,7 +41,13 @@ const useEnhancement = id => {
 	};
 };
 
-export const EnhancedMenuItem = ({ id, ...props }) => <MenuItem {...props} {...useEnhancement(id)} />;
+export const EnhancedMenuItem = ({ id, ...props }) => {
+	const defaultModule = useSelector(getScopeModuleInformationSelector);
+
+	const isHidden = !defaultModule.visibleModules.includes(id);
+
+	return <MenuItem {...props} {...useEnhancement(id)} isHidden={isHidden} />;
+};
 
 const LogoSvg = styled.svg`
 	flex: 0 0 auto;
@@ -53,17 +60,9 @@ const LogoSvg = styled.svg`
 `;
 
 export const Logo = () => (
-	<LogoSvg>
-		<path
-			id="orckestra-logo"
-			d="M10.3,3.8c-1.7,0-3.5,0.7-4.7,1.9L2.8,3c1.9-1.9,4.6-3,7.5-3c0.6,0,1.3,0.1,1.9,0.2
-		l-0.9,3.7C11,3.8,10.6,3.8,10.3,3.8L10.3,3.8z M16.1,7.5c-1.4-1.4-3.2-2.1-5.1-2.1c-2,0-3.9,0.8-5.3,2.3c-1.2,1.2-1.9,2.8-2,4.5H0
-		c0.1-2.7,1-4.9,3-7c0.2-0.2,0.5-0.5,0.7-0.7l1.8,1.8l0.1-0.1c1.2-1.2,2.9-1.9,4.6-1.9c0.4,0,0.8,0,1.2,0.1l0.2,0l0.6-2.5
-		c2.3,0.3,4.3,1.2,6,2.8l0.3,0.3c2,1.9,3.1,4.5,3.3,7.3h-3.6C18.1,10.4,17.3,8.7,16.1,7.5L16.1,7.5z M19.8,3.3
-		c2.9,2.8,4.4,6.8,4,10.8c-0.3,2.8-1.5,5.4-3.4,7.6L17,19.1c0.4-0.4,0.7-0.8,1-1.2c0.9-1.2,1.4-2.7,1.6-4.2c0-0.4,0.1-0.7,0-1.1h2.7
-		l0-0.2c-0.1-3-1.4-5.7-3.5-7.8l-0.2-0.2L19.8,3.3L19.8,3.3z M16.5,18.9l-0.2,0.2l2.6,2c-2.3,2.6-5.6,4-9.1,3.8l0-4
-		c0.2,0,0.4,0,0.6,0h0c2.6,0,5-1.4,6.4-3.6l0.7,0.5C17.2,18.2,16.9,18.6,16.5,18.9L16.5,18.9z"
-		/>
+	<LogoSvg viewBox="0 0 260 260">
+		<path d="M1.11,125.62C1.11,74.94,40.22,39,93.72,39S186,74.94,186,125.62s-38.79,86.66-92.29,86.66S1.11,176.3,1.11,125.62Zm135.47,0c0-29.1-18.46-46.62-42.86-46.62S50.54,96.52,50.54,125.62s18.77,46.62,43.18,46.62S136.58,154.72,136.58,125.62Z" />
+		<circle cx="227.6" cy="181.13" r="31.29" />
 	</LogoSvg>
 );
 

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

@@ -24,6 +24,15 @@ describe("Sidebar", () => {
 		state = Immutable.fromJS({
 			navigation: { route: { match: { params: { scope: "Global" } } }, config: { prependHref: "/Global/" } },
 			settings: { defaultScope: "myScope" },
+			modules: {
+				tree: "modulesTree",
+				visibleModules: ["a", "module123"],
+				lastScopeAndModuleSelection: {
+					scope: "Norway",
+					moduleName: "Profiles",
+					routingPerformed: false,
+				},
+			},
 		});
 		store = {
 			subscribe: () => {},
@@ -153,6 +162,15 @@ describe("EnhancedMenuItem", () => {
 						},
 						config: { prependHref: "/Global/" },
 					},
+					modules: {
+						tree: "modulesTree",
+						visibleModules: ["route"],
+						lastScopeAndModuleSelection: {
+							scope: "Norway",
+							moduleName: "Profiles",
+							routingPerformed: false,
+						},
+					},
 					settings: { defaultScope: "myScope" },
 				}),
 		};

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/ApplicationModuleLoader.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getDefaultScope, getScopes } from "../actions/scopes";
+import {
+	defaultScopeSelector,
+	getApplicationModulesSelector,
+	getLoadedModulesScopeSelector,
+} from "../selectors/settings";
+import { Loader } from "./Authenticate";
+import { overtureModule, scopeTypes } from "../constants";
+import { initializeFirstModuleScope } from "../actions/modules";
+
+const ApplicationModuleLoader = ({ children }) => {
+	const dispatch = useDispatch();
+
+	const [scopesLoaded, setScopesLoaded] = useState(false);
+
+	const loadedModules = useSelector(getLoadedModulesScopeSelector);
+	const applicationModules = useSelector(getApplicationModulesSelector);
+	const defaultScope = useSelector(defaultScopeSelector);
+
+	useEffect(() => {
+		if (applicationModules.length > 0 && scopesLoaded === false) {
+			if (applicationModules.includes(overtureModule.System)) {
+				dispatch(initializeFirstModuleScope(scopeTypes.global));
+			}
+
+			applicationModules.forEach(x => {
+				// For the default scope, the latest that will be returned will be the chosen one
+				dispatch(getDefaultScope(x));
+				// For scopes, they need to be merged
+				dispatch(getScopes(x));
+			});
+
+			setScopesLoaded(true);
+		}
+	}, [dispatch, applicationModules, scopesLoaded]);
+
+	const scopeLoadedFromAllModules =
+		applicationModules.length > 0 &&
+		applicationModules.reduce((prev, current) => prev && loadedModules.includes(current), true);
+
+	const applicationModuleReady = scopeLoadedFromAllModules && defaultScope != null;
+
+	if (!applicationModuleReady) {
+		return <Loader />;
+	}
+
+	return React.Children.only(children);
+};
+
+export default ApplicationModuleLoader;

package/src/components/ApplicationModuleLoader.test.js

@@ -0,0 +1,149 @@
+import React from "react";
+import Immutable from "immutable";
+import { Provider } from "react-redux";
+import { ThemeProvider } from "styled-components";
+import { Loader } from "./Authenticate";
+import ApplicationModuleLoader from "./ApplicationModuleLoader";
+import { mount } from "enzyme";
+import { getDefaultScope, getScopes } from "../actions/scopes";
+import sinon from "sinon";
+import { initializeFirstModuleScope } from "../actions/modules";
+import { scopeTypes } from "../constants";
+
+const TestComp = () => {
+	return <div className="test" />;
+};
+
+jest.mock("../utils/buildUrl", () => {
+	const modExport = {};
+	modExport.loadConfig = () => Promise.resolve({});
+	modExport.buildUrl = (path = [], params = "") => "URL: " + path.join("/") + " " + JSON.stringify(params);
+	return modExport;
+});
+
+describe("ApplicationModuleLoader", () => {
+	let state, store;
+
+	beforeEach(() => {
+		state = Immutable.fromJS({
+			requests: {},
+			scopes: {
+				test1: {
+					id: "test1",
+					name: { "en-CA": "Test 1", "en-US": "Test 1" },
+					children: ["test2"],
+				},
+			},
+			authentication: {
+				name: "foo@bar.com",
+			},
+			settings: {
+				defaultScope: "aDefaultScope",
+				loadedModulesScope: ["moduleA", "moduleB"],
+				modules: ["moduleA", "moduleB"],
+			},
+		});
+		store = state => ({
+			subscribe: () => {},
+			getState: () => state,
+			dispatch: sinon.spy().named("dispatch"),
+		});
+	});
+
+	it("shows the component when scopes configuration are all loaded", () =>
+		expect(
+			<Provider store={store(state)}>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
+			</Provider>,
+			"when mounted",
+			"to exhaustively satisfy",
+			<TestComp />,
+		));
+
+	it("shows a load indicator component when default scope is still unknown", () => {
+		state = state.setIn(["settings", "defaultScope"], null);
+		return expect(
+			<Provider store={store(state)}>
+				<ThemeProvider theme={{}}>
+					<ApplicationModuleLoader>
+						<TestComp />
+					</ApplicationModuleLoader>
+				</ThemeProvider>
+			</Provider>,
+			"when mounted",
+			"to exhaustively satisfy",
+			<ThemeProvider theme={{}}>
+				<Loader />
+			</ThemeProvider>,
+		);
+	});
+
+	it("shows a load indicator component when scopes trees are not loaded for all modules", () => {
+		state = state.setIn(["settings", "loadedModulesScope"], Immutable.fromJS(["moduleA"]));
+		return expect(
+			<Provider store={store(state)}>
+				<ThemeProvider theme={{}}>
+					<ApplicationModuleLoader>
+						<TestComp />
+					</ApplicationModuleLoader>
+				</ThemeProvider>
+			</Provider>,
+			"when mounted",
+			"to exhaustively satisfy",
+			<ThemeProvider theme={{}}>
+				<Loader />
+			</ThemeProvider>,
+		);
+	});
+
+	it("scopes tree and default scope should be loaded when rendering the component", () => {
+		const theStore = store(state);
+
+		const component = (
+			<Provider store={theStore}>
+				<ThemeProvider theme={{}}>
+					<ApplicationModuleLoader>
+						<TestComp />
+					</ApplicationModuleLoader>
+				</ThemeProvider>
+			</Provider>
+		);
+
+		mount(component);
+
+		expect(theStore.dispatch, "to have calls satisfying", [
+			{ args: [getDefaultScope("moduleA")] },
+			{ args: [getScopes("moduleA")] },
+			{ args: [getDefaultScope("moduleB")] },
+			{ args: [getScopes("moduleB")] },
+		]);
+	});
+
+	it("First module scope should be initialized when System is part application modules", () => {
+		state = state.setIn(["settings", "modules"], Immutable.fromJS(["moduleA", "System"]));
+
+		const theStore = store(state);
+
+		const component = (
+			<Provider store={theStore}>
+				<ThemeProvider theme={{}}>
+					<ApplicationModuleLoader>
+						<TestComp />
+					</ApplicationModuleLoader>
+				</ThemeProvider>
+			</Provider>
+		);
+
+		mount(component);
+
+		expect(theStore.dispatch, "to have calls satisfying", [
+			{ args: [initializeFirstModuleScope(scopeTypes.global)] },
+			{ args: [getDefaultScope("moduleA")] },
+			{ args: [getScopes("moduleA")] },
+			{ args: [getDefaultScope("System")] },
+			{ args: [getScopes("System")] },
+		]);
+	});
+});

package/src/components/Authenticate.js

@@ -6,10 +6,10 @@ import { useSelector } from "react-redux";
 import { unwrapImmutable } from "../utils";
 import { GET_AUTHENTICATION_PROFILE } from "../actions/authentication";
 import { ERROR, LOGOUT } from "../reducers/request";
+import ApplicationModuleLoader from "./ApplicationModuleLoader";
 
 export const useAuthenticationData = () => ({
 	loading: useSelector(state => state.getIn(["requests", "actives", GET_AUTHENTICATION_PROFILE])),
-	defaultScope: useSelector(state => state.getIn(["settings", "defaultScope"])) || null,
 	authedUser: useSelector(state => state.getIn(["authentication", "name"])),
 	requestError: unwrapImmutable(useSelector(state => state.getIn(["requests", ERROR]) || null)),
 	needLogin: useSelector(state => state.getIn(["requests", LOGOUT])),
@@ -47,14 +47,15 @@ export const Error = ({ requestError, needLogin }) => {
 };
 
 const Authenticate = ({ children }) => {
-	const { loading, defaultScope, authedUser, requestError, needLogin } = useAuthenticationData();
-	if (loading || defaultScope === null) {
+	const { loading, authedUser, requestError, needLogin } = useAuthenticationData();
+
+	if (loading) {
 		return <Loader />;
 	}
 	if (!authedUser) {
 		return <Error {...{ requestError, needLogin }} />;
 	} else {
-		return React.Children.only(children);
+		return <ApplicationModuleLoader children={children} />;
 	}
 };
 

package/src/components/Authenticate.test.js

@@ -7,19 +7,36 @@ import { ERROR, LOGOUT } from "../reducers/request";
 import { GET_AUTHENTICATION_PROFILE } from "../actions/authentication";
 
 const TestComp = () => {
-	return <div className="test"></div>;
+	return <div className="test" />;
 };
 
+jest.mock("../utils/buildUrl", () => {
+	const modExport = {};
+	modExport.loadConfig = () => Promise.resolve({});
+	modExport.buildUrl = () => "URL";
+	return modExport;
+});
+
 describe("Authenticate", () => {
 	let state, store;
+
 	beforeEach(() => {
 		state = Immutable.fromJS({
 			requests: {},
+			scopes: {
+				test1: {
+					id: "test1",
+					name: { "en-CA": "Test 1", "en-US": "Test 1" },
+					children: ["test2"],
+				},
+			},
 			authentication: {
 				name: "foo@bar.com",
 			},
 			settings: {
 				defaultScope: "aDefaultScope",
+				loadedModulesScope: ["moduleA", "moduleB"],
+				modules: ["moduleA", "moduleB"],
 			},
 		});
 		store = state => ({
@@ -38,7 +55,9 @@ describe("Authenticate", () => {
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<TestComp />,
+			<Provider store={store(state)}>
+				<TestComp />
+			</Provider>,
 		));
 
 	it("shows a load indicator component if authentication is ongoing", () => {
@@ -59,12 +78,12 @@ describe("Authenticate", () => {
 		);
 	});
 
-	it("shows a load indicator component if default scope is unknown", () => {
+	it("shows a load indicator component when application modules not ready", () => {
 		state = state.setIn(["settings", "defaultScope"], null);
 		return expect(
 			<Provider store={store(state)}>
 				<ThemeProvider theme={{}}>
-					<Authenticate>
+					<Authenticate applicationModuleReady={false}>
 						<TestComp />
 					</Authenticate>
 				</ThemeProvider>