orc-shared 1.2.0-dev.2 → 1.2.0-dev.6

package/src/components/Provision.test.js

@@ -6,6 +6,13 @@ import { spyOnConsole } from "../utils/testUtils";
 import Provision from "./Provision";
 import { createTheme } from "@material-ui/core/styles";
 
+jest.mock("../utils/buildUrl", () => {
+	const modExport = {};
+	modExport.loadConfig = () => Promise.resolve({});
+	modExport.buildUrl = () => "URL";
+	return modExport;
+});
+
 const fakeStore = {
 	subscribe: listener => () => {},
 	dispatch: action => action,
@@ -17,8 +24,35 @@ const fakeStore = {
 			authentication: {
 				name: "foo@bar.com",
 			},
+			scopes: {
+				Global: {
+					name: { en: "Global", fr: "Global" },
+					id: "Global",
+					children: ["MyScope"],
+					currency: {
+						displayName: {
+							en: "Euro",
+							fr: "Euro",
+						},
+					},
+					defaultCulture: "en-US",
+				},
+				MyScope: {
+					name: { en: "First child", fr: "Premier fils" },
+					id: "FirstChild",
+					children: ["ChildScope"],
+					parentScopeId: "Global",
+				},
+				ChildScope: {
+					name: { en: "First grandchild", fr: "Premier petit-fils" },
+					id: "FirstGrandchild",
+					parentScopeId: "MyScope",
+				},
+			},
 			settings: {
 				defaultScope: "myScope",
+				loadedModulesScope: ["moduleA", "moduleB"],
+				modules: ["moduleA", "moduleB"],
 			},
 		}),
 	replaceReducer: () => {},

package/src/components/Routing/FullPage.js

@@ -2,7 +2,7 @@ import React from "react";
 import Page from "./Page";
 import SegmentPage from "./SegmentPage";
 
-const FullPage = ({ path, config, location, match, modulePrependPath }) => {
+const FullPage = ({ path, config, location, match, modulePrependPath, isVisible }) => {
 	const { component, componentProps, pages = {}, segments, subpages, entityIdResolver } = config;
 	if (segments) {
 		return (
@@ -26,6 +26,7 @@ const FullPage = ({ path, config, location, match, modulePrependPath }) => {
 			subpages={subpages}
 			location={location}
 			match={match}
+			isVisible={isVisible}
 			modulePrependPath={modulePrependPath}
 		/>
 	);

package/src/components/Routing/FullPage.test.js

@@ -86,6 +86,29 @@ describe("Fullpage", () => {
 			<View2 />,
 		));
 
+	it("does not show a page when not visible", () =>
+		expect(
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter={{ initialEntries: ["/meep/snap/stuff"] }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<FullPage
+					path="/meep/snap"
+					config={{
+						component: View1,
+					}}
+					isVisible={false}
+					location={{ location: true }}
+					match={{ match: true }}
+				/>
+			</TestWrapper>,
+			"when mounted",
+			"to be",
+			null,
+		));
+
 	it("shows a segment page if segments", () => {
 		const location = {
 			pathname: "/meep/snap/stuff",

package/src/components/Routing/Page.js

@@ -5,8 +5,8 @@ import FullPage from "./FullPage";
 import SubPage from "./SubPage";
 import withWaypointing from "./withWaypointing";
 
-const Page = ({ component: View, path, pages = {}, subpages = {}, modulePrependPath }) => {
-	const WrappedView = useMemo(() => withErrorBoundary(path)(withWaypointing(View)), [path, View]);
+const Page = ({ component: View, path, pages = {}, subpages = {}, modulePrependPath, isVisible = true }) => {
+	const WrappedView = useMemo(() => withErrorBoundary(path)(withWaypointing(View, isVisible)), [path, View, isVisible]);
 	return (
 		<React.Fragment>
 			<Switch>

package/src/components/Routing/Page.test.js

@@ -70,6 +70,26 @@ describe("Page", () => {
 			</TestWrapper>,
 		));
 
+	it("Does not show the page view when its path is matched but not visible", () =>
+		expect(
+			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>
+				<MemoryRouter initialEntries={["/nabble"]}>
+					<Page
+						component={View}
+						path="/nabble"
+						isVisible={false}
+						pages={{
+							"/foo": { component: Sub1 },
+							"/bar": { component: Sub2 },
+						}}
+					/>
+				</MemoryRouter>
+			</TestWrapper>,
+			"when mounted",
+			"to equal",
+			null,
+		));
+
 	it("shows nested page when its path is matched", () =>
 		expect(
 			<TestWrapper provider={{ store }} intlProvider={intlProvider} stylesProvider muiThemeProvider={{ theme }}>

package/src/components/Routing/Segment.js

@@ -6,7 +6,7 @@ const Segment = ({ location, match, config, root, modulePrependPath }) => {
 	const { component, componentProps } = config;
 	const path = location.pathname;
 	const View = useMemo(
-		() => withErrorBoundary(path)(withWaypointing(component, componentProps)),
+		() => withErrorBoundary(path)(withWaypointing(component, true, componentProps)),
 		[path, component, componentProps],
 	);
 	return <View location={location} match={match} mapFrom={root} modulePrependPath={modulePrependPath} />;

package/src/components/Routing/withWaypointing.js

@@ -6,7 +6,7 @@ import { setRoute, mapHref, setCurrentPrependPath } from "../../actions/navigati
 import useLoader from "../../hooks/useLoader";
 
 const withWaypointing =
-	(Comp, componentProps = {}) =>
+	(Comp, isVisible = true, componentProps = {}) =>
 	props => {
 		const { match, mapFrom, modulePrependPath } = props;
 		const location = useLocation();
@@ -24,7 +24,7 @@ const withWaypointing =
 		}
 		const cutout = state => selectRouteHref(state) === location.pathname;
 		useLoader(loadActions, cutout);
-		return <Comp {...props} {...componentProps} />;
+		return isVisible ? <Comp {...props} {...componentProps} /> : null;
 	};
 
 export default withWaypointing;

package/src/components/Routing/withWaypointing.test.js

@@ -6,7 +6,7 @@ import { Router, Route } from "react-router-dom";
 import { mount, act } from "unexpected-reaction";
 import sinon from "sinon";
 import { PropStruct } from "../../utils/testUtils";
-import { setRoute, mapHref } from "../../actions/navigation";
+import { setRoute, mapHref, setCurrentPrependPath } from "../../actions/navigation";
 import withWaypointing from "./withWaypointing";
 
 describe("withWaypointing", () => {
@@ -22,6 +22,7 @@ describe("withWaypointing", () => {
 						params: { some: "meep" },
 						isExact: true,
 					},
+					modulePrependPath: "foo",
 				},
 			},
 			requests: {
@@ -94,6 +95,21 @@ describe("withWaypointing", () => {
 			})
 			.then(() => expect(store.dispatch, "to have calls satisfying", [])));
 
+	it("does not render the component if the component is not visible", () =>
+		expect(withWaypointing, "called with", [PropStruct, false])
+			.then(EnhancedView => {
+				return expect(
+					<Provider store={store}>
+						<Router history={history}>
+							<Route path="/feep/:some" component={EnhancedView} />
+						</Router>
+					</Provider>,
+					"when mounted",
+					"to be null",
+				);
+			})
+			.then(() => expect(store.dispatch, "to have calls satisfying", [])));
+
 	it("does fire action if path parameters different", () =>
 		expect(withWaypointing, "called with", [PropStruct])
 			.then(EnhancedView => {
@@ -128,7 +144,7 @@ describe("withWaypointing", () => {
 			));
 
 	it("does fire action if path parameters different and with custom props", () =>
-		expect(withWaypointing, "called with", [PropStruct, { foo: 123 }])
+		expect(withWaypointing, "called with", [PropStruct, true, { foo: 123 }])
 			.then(EnhancedView => {
 				history.replace("/feep/moof");
 				return expect(
@@ -161,7 +177,7 @@ describe("withWaypointing", () => {
 			));
 
 	it("does not fire action if route match is not exact with custom props", () =>
-		expect(withWaypointing, "called with", [PropStruct, { foo: 123 }])
+		expect(withWaypointing, "called with", [PropStruct, true, { foo: 123 }])
 			.then(EnhancedView => {
 				history.replace("/feep/meep/mef");
 				return expect(
@@ -201,16 +217,28 @@ describe("withWaypointing", () => {
 				return expect(
 					<Provider store={store}>
 						<Router history={history}>
-							<Route path="/foo/bar" render={props => <EnhancedView {...props} mapFrom="/foo" />} />
+							<Route
+								path="/foo/bar"
+								render={props => <EnhancedView {...props} mapFrom="/foo" modulePrependPath="foo" />}
+							/>
 						</Router>
 					</Provider>,
 					"when mounted",
 					"to satisfy",
-					<PropStruct history="__ignore" location="__ignore" match="__ignore" mapFrom="/foo" />,
+					<PropStruct
+						history="__ignore"
+						location="__ignore"
+						match="__ignore"
+						mapFrom="/foo"
+						modulePrependPath="__ignore"
+					/>,
 				);
 			})
 			.then(() =>
 				expect(store.dispatch, "to have calls satisfying", [
+					{
+						args: [setCurrentPrependPath("foo")],
+					},
 					{
 						args: [mapHref("/foo", "/foo/bar")],
 					},

package/src/components/Scope/useScopeConfirmationModalState.js

@@ -6,8 +6,7 @@ import { applicationScopeHasChanged } from "../../actions/scopes";
 import useScopeData from "./useScopeData";
 import { hasUnsavedDataSelector } from "../../selectors/view";
 import { scopeConfirmationDialogTypes } from "../../constants";
-import { useHistory } from "react-router-dom";
-import UrlPattern from "url-pattern";
+import { setNewScopeAndModuleName } from "../../actions/modules";
 
 const ExecuteClosingTabHandlerActions = async closingTabHandlerActions => {
 	if (closingTabHandlerActions.length <= 0) return Promise.resolve();
@@ -19,23 +18,13 @@ const ExecuteClosingTabHandlerActions = async closingTabHandlerActions => {
 
 const useApplicationScopeChanger = closingTabHandlerActions => {
 	const dispatch = useDispatch();
-	const history = useHistory();
 	const moduleName = useSelectorAndUnwrap(selectCurrentModuleName);
 
 	return (previousScope, newScope) => {
-		const params = {
-			scope: newScope,
-		};
-
-		// did not find a more reliable way to get the URL for the first tab of the module
-		const pattern = new UrlPattern(`/:scope/${moduleName}`);
-		const href = pattern.stringify(params);
-
-		history.push(href);
-
-		ExecuteClosingTabHandlerActions(closingTabHandlerActions).then(() =>
-			dispatch(applicationScopeHasChanged(previousScope, newScope)),
-		);
+		ExecuteClosingTabHandlerActions(closingTabHandlerActions).then(() => {
+			dispatch(setNewScopeAndModuleName(newScope, moduleName));
+			dispatch(applicationScopeHasChanged(previousScope, newScope));
+		});
 	};
 };
 

package/src/components/Scope/useScopeConfirmationModalState.test.js

@@ -4,8 +4,8 @@ import sinon from "sinon";
 import { TestWrapper } from "../../utils/testUtils";
 import useScopeConfirmationModalState from "./useScopeConfirmationModalState";
 import { mount } from "enzyme";
-import { createMemoryHistory } from "history";
 import { APPLICATION_SCOPE_HAS_CHANGED } from "../../actions/scopes";
+import { SET_NEW_SCOPE_AND_MODULE_NAME } from "../../actions/modules";
 
 jest.mock("../../utils/buildUrl", () => {
 	const modExport = {};
@@ -35,13 +35,9 @@ const TestComp = () => {
 };
 
 describe("useScopeConfirmationModalState", () => {
-	let state, store, history;
+	let state, store;
 
 	beforeEach(() => {
-		history = createMemoryHistory({ initialEntries: ["/TestScope/demos?arg=data"] });
-		sinon.spy(history, "push");
-		history.push.named("history.push");
-
 		state = Immutable.fromJS({
 			input: {},
 			locale: {
@@ -170,7 +166,7 @@ describe("useScopeConfirmationModalState", () => {
 
 	it("selecting a new scope without active tabs changes the scope", async () => {
 		const component = (
-			<TestWrapper provider={{ store }} router={{ history }}>
+			<TestWrapper provider={{ store }}>
 				<TestComp />
 			</TestWrapper>
 		);
@@ -183,8 +179,18 @@ describe("useScopeConfirmationModalState", () => {
 
 		await new Promise(resolve => setTimeout(resolve, 10));
 
-		expect(history.push, "to have calls satisfying", [{ args: ["/newScope/TheModuleName"] }]);
 		expect(store.dispatch, "to have calls satisfying", [
+			{
+				args: [
+					{
+						type: SET_NEW_SCOPE_AND_MODULE_NAME,
+						payload: {
+							scope: "newScope",
+							moduleName: "TheModuleName",
+						},
+					},
+				],
+			},
 			{
 				args: [
 					{
@@ -227,7 +233,7 @@ describe("useScopeConfirmationModalState", () => {
 		openTabs();
 
 		const component = (
-			<TestWrapper provider={{ store }} router={{ history }}>
+			<TestWrapper provider={{ store }}>
 				<TestComp />
 			</TestWrapper>
 		);
@@ -248,8 +254,18 @@ describe("useScopeConfirmationModalState", () => {
 		isModalOpened = mountedComponent.find("#isModalOpened").text();
 		expect(isModalOpened, "to equal", "false");
 
-		expect(history.push, "to have calls satisfying", [{ args: ["/newScope/TheModuleName"] }]);
 		expect(store.dispatch, "to have calls satisfying", [
+			{
+				args: [
+					{
+						type: SET_NEW_SCOPE_AND_MODULE_NAME,
+						payload: {
+							scope: "newScope",
+							moduleName: "TheModuleName",
+						},
+					},
+				],
+			},
 			{
 				args: [
 					{
@@ -281,7 +297,7 @@ describe("useScopeConfirmationModalState", () => {
 		openTabs();
 
 		const component = (
-			<TestWrapper provider={{ store }} router={{ history }}>
+			<TestWrapper provider={{ store }}>
 				<TestComp />
 			</TestWrapper>
 		);
@@ -309,9 +325,19 @@ describe("useScopeConfirmationModalState", () => {
 			{ args: [null, true] },
 		]);
 
-		expect(history.push, "to have calls satisfying", [{ args: ["/newScope/TheModuleName"] }]);
-		expect(store.dispatch.callCount, "to be", 1);
+		expect(store.dispatch.callCount, "to be", 2);
 		expect(store.dispatch, "to have calls satisfying", [
+			{
+				args: [
+					{
+						type: SET_NEW_SCOPE_AND_MODULE_NAME,
+						payload: {
+							scope: "newScope",
+							moduleName: "TheModuleName",
+						},
+					},
+				],
+			},
 			{
 				args: [
 					{

package/src/components/Scope/useScopeData.js

@@ -1,8 +1,6 @@
 import { useSelector } from "react-redux";
-import useLoader from "../../hooks/useLoader";
 import { unwrapImmutable } from "../../utils";
 import { currentScopeSelector, scopeGetter } from "../../selectors/scope";
-import { getScopes } from "../../actions/scopes";
 
 const buildDefaultNodeState = (current, getScope) => {
 	let node = current;
@@ -16,7 +14,6 @@ const buildDefaultNodeState = (current, getScope) => {
 const useScopeData = () => {
 	const currentScope = unwrapImmutable(useSelector(currentScopeSelector));
 	const getScope = useSelector(scopeGetter);
-	useLoader(getScopes(), () => currentScope.name);
 	const defaultNodeState = buildDefaultNodeState(currentScope, getScope);
 	return [currentScope, defaultNodeState, getScope];
 };

package/src/components/Scope/useScopeData.test.js

@@ -2,7 +2,6 @@ import React from "react";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
 import Immutable from "immutable";
-import { RSAA } from "redux-api-middleware";
 import sinon from "sinon";
 import { PropStruct } from "../../utils/testUtils";
 import useScopeData from "./useScopeData";
@@ -122,30 +121,4 @@ describe("useScopeData", () => {
 			)
 
 			.then(() => expect(store.dispatch, "was not called")));
-
-	it("loads scopes if it has none", () => {
-		state = state.setIn(["scopes"], Immutable.Map());
-		return expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<TestComp />
-				</MemoryRouter>
-			</Provider>,
-			"when mounted",
-			"to be a",
-			"DOMElement",
-		).then(() =>
-			expect(store.dispatch, "to have calls satisfying", [
-				{
-					args: [
-						{
-							[RSAA]: {
-								types: ["GET_SCOPES_REQUEST", "GET_SCOPES_SUCCESS", "GET_SCOPES_FAILURE"],
-							},
-						},
-					],
-				},
-			]),
-		);
-	});
 });

package/src/constants.js

@@ -23,6 +23,7 @@ export const roleGroups = {
 	Shopping: "Shopping",
 	Search: "Search",
 	Profiles: "Profiles",
+	Locations: "Locations",
 	Orchestrator: "Orchestrator",
 	PriceManagement: "PriceManagement",
 	UserManagement: "UserManagement",
@@ -73,6 +74,20 @@ export const attributeDataType = {
 	customType: "CustomType",
 };
 
+// It is intended that some of them have a different value of its keys
+export const overtureModule = {
+	System: "System",
+	Products: "Product",
+	Customers: "Customer",
+	Orders: "Order",
+	Marketing: "Marketing",
+	Report: "Reports",
+	Administration: "Administration",
+	UserManagement: "UserManagement",
+	PriceManagement: "PriceManagement",
+	Locations: "Location",
+};
+
 export const definitionType = {
 	shared: "Shared",
 	embedded: "Embedded",

package/src/content/iconsSheet.svg

@@ -122,6 +122,9 @@
 <symbol id="icon-dropdown-chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
  <polyline fill="none" stroke-linecap="round" stroke-linejoin="round" points="9 3 5 7 1 3"/>
 </symbol>
+<symbol id="icon-open-in-new-tab" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+ <path stroke="none" fill-rule="evenodd" d="M8.4375,6.25 L7.8125,6.25 C7.63991102,6.25 7.5,6.38991102 7.5,6.5625 L7.5,8.75 L1.25,8.75 L1.25,2.5 L4.0625,2.5 C4.23508898,2.5 4.375,2.36008898 4.375,2.1875 L4.375,1.5625 C4.375,1.38991102 4.23508898,1.25 4.0625,1.25 L0.9375,1.25 C0.419733047,1.25 0,1.66973305 0,2.1875 L0,9.0625 C0,9.58026695 0.419733047,10 0.9375,10 L7.8125,10 C8.33026695,10 8.75,9.58026695 8.75,9.0625 L8.75,6.5625 C8.75,6.38991102 8.61008898,6.25 8.4375,6.25 Z M9.53125,0 L7.03125,0 C6.61386719,0 6.40527344,0.506054688 6.69921875,0.80078125 L7.39707031,1.49863281 L2.63671875,6.25722656 C2.54845882,6.34518057 2.49884911,6.46465556 2.49884911,6.58925781 C2.49884911,6.71386007 2.54845882,6.83333506 2.63671875,6.92128906 L3.07949219,7.36328125 C3.16744619,7.45154118 3.28692118,7.50115089 3.41152344,7.50115089 C3.53612569,7.50115089 3.65560068,7.45154118 3.74355469,7.36328125 L8.5015625,2.60390625 L9.19921875,3.30078125 C9.4921875,3.59375 10,3.38867188 10,2.96875 L10,0.46875 C10,0.209866524 9.79013348,0 9.53125,0 Z"/>
+</symbol>
 <symbol id="icon-dropdown-chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
  <polyline fill="none" stroke-linecap="round" stroke-linejoin="round" points="9 3 5 7 1 3" transform="rotate(-90 5 5)"/>
 </symbol>

package/src/hocs/withScopeData.test.js

@@ -2,7 +2,6 @@ import React from "react";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
 import Immutable from "immutable";
-import { RSAA } from "redux-api-middleware";
 import sinon from "sinon";
 import { PropStruct, spyOnConsole } from "../utils/testUtils";
 import withScopeData from "./withScopeData";
@@ -142,34 +141,4 @@ describe("withScopeData", () => {
 				),
 			)
 			.then(() => expect(store.dispatch, "was not called")));
-
-	it("loads scopes if it has none", () => {
-		state = state.setIn(["scopes"], Immutable.Map());
-		return expect(withScopeData, "when called with", [TestComp])
-			.then(Comp =>
-				expect(
-					<Provider store={store}>
-						<MemoryRouter>
-							<Comp />
-						</MemoryRouter>
-					</Provider>,
-					"when mounted",
-					"to be a",
-					"DOMElement",
-				),
-			)
-			.then(() =>
-				expect(store.dispatch, "to have calls satisfying", [
-					{
-						args: [
-							{
-								[RSAA]: {
-									types: ["GET_SCOPES_REQUEST", "GET_SCOPES_SUCCESS", "GET_SCOPES_FAILURE"],
-								},
-							},
-						],
-					},
-				]),
-			);
-	});
 });

package/src/reducers/modules.js

@@ -1,8 +1,22 @@
 import Immutable from "immutable";
-import { SET_MODULES_STRUCTURE } from "../actions/modules";
+import {
+	INITIALIZE_FIRST_MODULE_SCOPE,
+	SET_MODULE_AS_VISIBLE,
+	SET_MODULES_STRUCTURE,
+	SET_NEW_SCOPE_AND_MODULE_NAME,
+	SET_ROUTING_PERFORMED,
+} from "../actions/modules";
 import { infoBar } from "./../constants";
 
-const initialState = Immutable.Map({});
+const initialState = Immutable.fromJS({
+	tree: {},
+	visibleModules: [],
+	lastScopeAndModuleSelection: {
+		scope: null,
+		moduleName: null,
+		routingPerformed: true,
+	},
+});
 
 const viewStateReducer = (state = initialState, action) => {
 	switch (action.type) {
@@ -32,6 +46,38 @@ const viewStateReducer = (state = initialState, action) => {
 
 			return state.set("tree", Immutable.fromJS(modulesTree));
 		}
+
+		case INITIALIZE_FIRST_MODULE_SCOPE: {
+			return state.setIn(["lastScopeAndModuleSelection", "scope"], action.payload);
+		}
+
+		case SET_MODULE_AS_VISIBLE: {
+			const visibleModules = state.get("visibleModules").toJS();
+			visibleModules.push(action.payload);
+
+			return state.set("visibleModules", Immutable.fromJS(visibleModules));
+		}
+
+		case SET_NEW_SCOPE_AND_MODULE_NAME: {
+			const lastScopeAndModuleSelection = state.get("lastScopeAndModuleSelection").toJS();
+
+			if (action.payload.scope !== lastScopeAndModuleSelection.scope) {
+				state = state.set("visibleModules", Immutable.fromJS([]));
+			}
+
+			return state.set(
+				"lastScopeAndModuleSelection",
+				Immutable.fromJS({
+					moduleName: action.payload.moduleName,
+					scope: action.payload.scope,
+					routingPerformed: false,
+				}),
+			);
+		}
+
+		case SET_ROUTING_PERFORMED:
+			return state.setIn(["lastScopeAndModuleSelection", "routingPerformed"], true);
+
 		default:
 			return state;
 	}