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

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/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>

package/src/components/MaterialUI/DataDisplay/PredefinedElements/Translations.test.js

@@ -18,6 +18,8 @@ describe("Translations ", () => {
 	const theme = createMuiTheme();
 
 	beforeEach(() => {
+		window.bypassDebounce = true;
+
 		collapsibleListProps = new CollapsibleListProps();
 		collapsibleListProps.set(CollapsibleListProps.propNames.hasMessage, true);
 		collapsibleListProps.set(
@@ -32,6 +34,10 @@ describe("Translations ", () => {
 		collapsibleListProps.set(CollapsibleListProps.propNames.containerWidth, "unset");
 	});
 
+	afterEach(() => {
+		delete window.bypassDebounce;
+	});
+
 	it("Renders Translations  correctly", () => {
 		const component = (
 			<TestWrapper stylesProvider muiThemeProvider={{ theme }} intlProvider={{ messages }}>
@@ -135,7 +141,7 @@ describe("Translations ", () => {
 		expect(component, "when mounted", "to satisfy", expected);
 	});
 
-	it("Translations  component handles change", () => {
+	it("Translations component handles change", () => {
 		const aValue = "aValue";
 		const update = sinon.spy().named("update");
 

package/src/components/MaterialUI/Inputs/InputBase.js

@@ -111,12 +111,29 @@ const InputBase = ({ inputProps }) => {
 
 	const onChangeHandler = event => {
 		event.persist();
-		update(event.target.value, metadata);
+
+		if (!event.target.value || window.bypassDebounce === true) {
+			update(event.target.value, metadata);
+		}
+
+		setInputText(event.target.value);
 	};
 
 	const inputBaseInputStyle = inputProps?.getStyle(InputBaseProps.ruleNames.input);
 	const errorTextStyle = inputProps?.getStyle(InputBaseProps.ruleNames.errorText);
 
+	const [inputText, setInputText] = React.useState(null);
+
+	const textToDisplay = inputText ?? value;
+
+	React.useEffect(() => {
+		if (inputText !== value && inputText != null && window.bypassDebounce !== true) {
+			const timeOutId = setTimeout(() => update(inputText, metadata), 100);
+			return () => clearTimeout(timeOutId);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [inputText, value]);
+
 	return (
 		<div className={classes.container}>
 			<div className={classes.inputContainer}>
@@ -133,7 +150,7 @@ const InputBase = ({ inputProps }) => {
 					onClick={onClick}
 					type={type}
 					placeholder={placeholder}
-					value={value}
+					value={textToDisplay}
 					fullWidth={true}
 					onChange={event => onChangeHandler(event)}
 					error={!!error}

package/src/components/MaterialUI/Inputs/InputBase.test.js

@@ -5,15 +5,19 @@ import InputBaseMUI from "@material-ui/core/InputBase";
 import sinon from "sinon";
 import { ignoreConsoleError } from "../../../utils/testUtils";
 import InputBaseProps from "./InputBaseProps";
+import { act } from "unexpected-reaction";
 
 describe("InputBase Component", () => {
 	let update, container;
 	beforeEach(() => {
+		window.bypassDebounce = true;
+
 		container = document.createElement("div");
 		document.body.appendChild(container);
 		update = sinon.spy().named("update");
 	});
 	afterEach(() => {
+		delete window.bypassDebounce;
 		document.body.removeChild(container);
 		container = null;
 	});
@@ -243,3 +247,67 @@ describe("InputBase Component", () => {
 		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
 	});
 });
+
+describe("InputBase component debouce", () => {
+	const clock = sinon.useFakeTimers();
+	let update, container;
+
+	beforeEach(() => {
+		container = document.createElement("div");
+		document.body.appendChild(container);
+		update = sinon.spy().named("update");
+	});
+
+	afterEach(() => {
+		clock.restore();
+	});
+
+	it("InputBase component updates when debounced update", async () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.value, "");
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+
+		const input = mountedComponent.find("input");
+		input.simulate("change", { target: { value: aValue } });
+
+		act(() => {
+			clock.tick(200);
+		});
+
+		input.simulate("change", { target: { value: "differentValue" } });
+		expect(update, "to have calls satisfying", [{ args: [aValue, metadata] }]);
+	});
+
+	it("InputBase component update to empty when text to display is null", async () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.value, null);
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+
+		const input = mountedComponent.find("input");
+		input.simulate("change", { target: { value: null } });
+		expect(input.get(0).props.value, "to equal", "");
+	});
+});

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

@@ -16,6 +16,10 @@ const useStyles = makeStyles(theme => ({
 		border: `1px solid ${theme.palette.grey.borders}`,
 		boxShadow: "0 2px 4px rgba(0,0,0,0.5)",
 		width: theme.spacing(50),
+		display: "flex",
+	},
+	scopeContainer: {
+		width: "100%",
 	},
 	scopeSelector: {
 		display: "flex",
@@ -64,7 +68,7 @@ const ScopeSelector = ({ show, getScope, selectedScope, closeSelector, filter, u
 		<Sidepanel className={classes.container} in={show} timeout={300}>
 			<ClickAwayListener onClickAway={e => closeSelector(e)}>
 				{/* this div is required since ClickAwayListener child element should be able to hold ref */}
-				<div>{show ? scopeSelectorContent : null}</div>
+				<div className={classes.scopeContainer}>{show ? scopeSelectorContent : null}</div>
 			</ClickAwayListener>
 		</Sidepanel>
 	);

package/src/components/MaterialUI/muiThemes.js

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