orc-shared 1.2.0-dev.1 → 1.2.0-dev.10

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>

package/src/components/MaterialUI/Navigation/ExternalLink.js

@@ -0,0 +1,25 @@
+import React from "react";
+import Link from "@material-ui/core/Link";
+import Icon from "../DataDisplay/Icon";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+	icon: {
+		paddingLeft: theme.spacing(1),
+		width: theme.spacing(1.2),
+		color: theme.palette.primary.main,
+	},
+}));
+
+const ExternalLink = ({ id, url, children }) => {
+	const classes = useStyles();
+
+	return (
+		<Link id={id} href={url} rel="noreferrer" target="_blank" underline="always">
+			{children}
+			<Icon id="open-in-new-tab" className={classes.icon} />
+		</Link>
+	);
+};
+
+export default ExternalLink;

package/src/components/MaterialUI/Navigation/ExternalLink.test.js

@@ -0,0 +1,26 @@
+import React from "react";
+import Link from "@material-ui/core/Link";
+import Icon from "../DataDisplay/Icon";
+import ExternalLink from "./ExternalLink";
+
+describe("ExternalLink", () => {
+	it("render ExternalLink without errors", () => {
+		const children = <div>a div element</div>;
+
+		expect(
+			<ExternalLink id="an_Id" url="https://www.npmjs.com/package/orc-shared" children={children} />,
+			"when mounted",
+			"to satisfy",
+			<Link
+				id="an_Id"
+				href="https://www.npmjs.com/package/orc-shared"
+				rel="noreferrer"
+				target="_blank"
+				underline="always"
+			>
+				{children}
+				<Icon id="open-in-new-tab" />
+			</Link>,
+		);
+	});
+});

package/src/components/MaterialUI/muiThemes.js

@@ -158,6 +158,11 @@ const setThemeOverrides = theme => ({
 			},
 		},
 	},
+	MuiLink: {
+		root: {
+			fontSize: theme.spacing(1.3),
+		},
+	},
 	MuiButton: {
 		...theme.MuiButton,
 		root: {

package/src/components/Modules.js

@@ -3,49 +3,122 @@ import { useHistory, useLocation } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { Route, Switch, Redirect } from "react-router-dom";
 import withErrorBoundary from "../hocs/withErrorBoundary";
-import { getCurrentScope, selectRouteHref } from "../selectors/navigation";
+import { getCurrentScope, getCurrentScopeFromRoute, selectRouteHref } from "../selectors/navigation";
 import { isCurrentScopeAuthorizedSelector } from "../selectors/scope";
 import Navigation from "./Navigation";
 import FullPage from "./Routing/FullPage";
 import { setHrefConfig } from "../actions/navigation";
-import { setModulesStructure } from "../actions/modules";
-import { defaultScopeSelector } from "../selectors/settings";
+import {
+	setRoutingPerformed,
+	setModuleAsVisible,
+	setModulesStructure,
+	initializeFirstModuleScope,
+} from "../actions/modules";
+import { defaultScopeSelector, getApplicationModulesSelector } from "../selectors/settings";
+import { getScopeModuleInformationSelector } from "../selectors/modules";
+import UrlPattern from "url-pattern";
+import { overtureModule } from "../constants";
 
-export const Module = withErrorBoundary("Module")(({ config, path, error, location, match, modulePrependPath }) => {
-	const currentRoute = useSelector(selectRouteHref);
+const rerouteOnScopeAndModule = (history, currentRoute, scope, module) => {
+	const params = {
+		scope: scope,
+	};
+
+	const pattern = new UrlPattern(`/:scope/${module}`);
+	const href = pattern.stringify(params);
+
+	if (currentRoute !== href) {
+		history.push(href);
+	}
+};
+
+export const Module = withErrorBoundary("Module")(({ id, config, path, error, location, match, modulePrependPath }) => {
 	const history = useHistory();
-	let hideSelector = state => (typeof config.hide === "function" ? config.hide(state) : config.hide ?? false);
-	const isHidden = useSelector(hideSelector);
+	const scope = useSelector(getCurrentScopeFromRoute);
+	const currentRoute = useSelector(selectRouteHref);
+	const moduleInfo = useSelector(getScopeModuleInformationSelector);
+
+	const isVisible =
+		moduleInfo.scope != null && moduleInfo.visibleModules.length > 0 && moduleInfo.visibleModules.includes(id);
 
 	React.useEffect(() => {
-		if (isHidden === true && currentRoute.includes(match.url)) {
-			history.push("/");
+		if (moduleInfo.scope != null && scope === moduleInfo.scope && moduleInfo.visibleModules.length > 0 && !isVisible) {
+			rerouteOnScopeAndModule(history, currentRoute, moduleInfo.scope, moduleInfo.visibleModules[0]);
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isHidden, currentRoute, match.url]);
+	}, [history, scope, isVisible, currentRoute, moduleInfo.scope, moduleInfo.visibleModules]);
 
 	return (
-		<FullPage path={path} config={config} location={location} match={match} modulePrependPath={modulePrependPath} />
+		<FullPage
+			path={path}
+			config={config}
+			location={location}
+			match={match}
+			modulePrependPath={modulePrependPath}
+			isVisible={isVisible}
+		/>
 	);
 });
 
 const getHrefFromPath = (path, scope) => path.replace(":scope", scope);
 
+const CheckModuleVisibility = ({ id, config, moduleInfo }) => {
+	const dispatch = useDispatch();
+	const applicationModules = useSelector(getApplicationModulesSelector);
+	const scopeFromRoute = useSelector(getCurrentScopeFromRoute);
+
+	const hideSelector = state => (typeof config.hide === "function" ? config.hide(state) : () => config.hide ?? false);
+
+	const isHidden = useSelector(hideSelector(moduleInfo.scope ?? scopeFromRoute));
+
+	const moduleScope = moduleInfo.scope;
+	const moduleIsVisible = isHidden === false && !moduleInfo.visibleModules.includes(id);
+
+	React.useEffect(() => {
+		// We need to wait for the ROUTE to be set the first time in the Redux/Store before to set module's visibility
+		if (scopeFromRoute !== null || applicationModules.includes(overtureModule.System)) {
+			if (moduleScope == null) {
+				dispatch(initializeFirstModuleScope(scopeFromRoute));
+			}
+
+			if (moduleIsVisible) {
+				dispatch(setModuleAsVisible(id));
+			}
+		}
+	}, [moduleScope, moduleIsVisible, dispatch, id, scopeFromRoute, applicationModules]);
+
+	return <React.Fragment />;
+};
+
 export const Modules = ({ modules, pathConfig: { customPath, ...otherConfigs } = {} }) => {
 	const dispatch = useDispatch();
-	const scope = useSelector(getCurrentScope);
+	const currentScope = useSelector(getCurrentScope);
 	const isAuthorizedScope = useSelector(isCurrentScopeAuthorizedSelector);
 	const defaultScope = useSelector(defaultScopeSelector);
 	const history = useHistory();
 	const location = useLocation();
+	const currentRoute = useSelector(selectRouteHref);
+
+	const moduleInfo = useSelector(getScopeModuleInformationSelector);
+
+	const firstModuleName = Object.keys(modules)[0];
+
+	const destinationModule =
+		moduleInfo.routingPerformed === false &&
+		moduleInfo.scope != null &&
+		moduleInfo.visibleModules.length > 0 &&
+		moduleInfo.moduleName != null
+			? moduleInfo.visibleModules.includes(moduleInfo.moduleName)
+				? moduleInfo.moduleName
+				: moduleInfo.visibleModules[0]
+			: null;
 
 	const scopePath = "/:scope/";
 	const prependPath = customPath || scopePath;
-	const prependHref = getHrefFromPath(prependPath, scope);
+	const prependHref = getHrefFromPath(prependPath, currentScope);
 
 	Object.keys(otherConfigs).forEach(key => {
 		const moduleConfig = otherConfigs[key];
-		moduleConfig.prependHref = getHrefFromPath(moduleConfig.prependPath, scope);
+		moduleConfig.prependHref = getHrefFromPath(moduleConfig.prependPath, currentScope);
 	});
 
 	useEffect(() => {
@@ -53,23 +126,33 @@ export const Modules = ({ modules, pathConfig: { customPath, ...otherConfigs } =
 	}, [dispatch, prependPath, prependHref, otherConfigs]);
 
 	const getModuleConfig = name => (otherConfigs && otherConfigs[name]) || { prependPath, prependHref };
-	const firstModuleName = Object.keys(modules)[0];
 
 	useEffect(() => {
 		const { pathname, search } = location;
-		if (!isAuthorizedScope && pathname.includes(scope) && defaultScope) {
-			history.push(pathname.replace(scope, defaultScope) + search);
+		if (!isAuthorizedScope && pathname.includes(currentScope) && defaultScope) {
+			history.push(pathname.replace(currentScope, defaultScope) + search);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isAuthorizedScope, defaultScope, history, scope]);
+	}, [isAuthorizedScope, defaultScope, history, currentScope]);
 
 	React.useEffect(() => {
 		dispatch(setModulesStructure(modules));
 	}, [dispatch, modules]);
 
+	useEffect(() => {
+		if (destinationModule != null) {
+			rerouteOnScopeAndModule(history, currentRoute, moduleInfo.scope, destinationModule);
+
+			dispatch(setRoutingPerformed());
+		}
+	}, [dispatch, history, moduleInfo.scope, destinationModule, currentRoute]);
+
 	return (
 		<React.Fragment>
 			<Navigation modules={modules} />
+			{Object.entries(modules).map(([name, module]) => (
+				<CheckModuleVisibility key={name} id={name} config={module} moduleInfo={moduleInfo} />
+			))}
 			<Switch>
 				{Object.entries(modules).map(([name, module]) => {
 					const moduleConfig = getModuleConfig(name);
@@ -79,7 +162,7 @@ export const Modules = ({ modules, pathConfig: { customPath, ...otherConfigs } =
 							key={name}
 							path={path}
 							render={route => (
-								<Module modulePrependPath={moduleConfig.prependPath} config={module} path={path} {...route} />
+								<Module id={name} modulePrependPath={moduleConfig.prependPath} config={module} path={path} {...route} />
 							)}
 						/>
 					);