orc-shared 1.1.0-dev.8 → 1.1.1

package/src/components/MaterialUI/ScopeSelector/TreeItem.test.js

@@ -12,6 +12,7 @@ import { mount } from "enzyme";
 
 describe("TreeItem", () => {
 	let store, state;
+	const closeSelectorSpy = sinon.spy();
 
 	beforeEach(() => {
 		state = Immutable.fromJS({
@@ -32,6 +33,10 @@ describe("TreeItem", () => {
 		};
 	});
 
+	afterEach(() => {
+		closeSelectorSpy.resetHistory();
+	});
+
 	const globalScope = {
 		id: "Global",
 		name: "Global",
@@ -59,8 +64,6 @@ describe("TreeItem", () => {
 
 	const theme = createMuiTheme();
 
-	const closeSelectorSpy = sinon.spy();
-
 	it("Renders Tree Item correctly for global scope", () => {
 		const expectedGlobalLabel = (
 			<ScopeLabel name={globalScope.name} type={globalScope.type} isRootScope={true} isVirtualScope={false} />
@@ -151,6 +154,64 @@ describe("TreeItem", () => {
 		expect(preventDefaultSpy, "was called once");
 		expect(closeSelectorSpy, "to have no calls satisfying", { args: [event] });
 	});
+
+	it("Does not calls scope select handler on label click if isScopeSelectable is defined and returns false", () => {
+		const isScopeSelectableSpy = sinon.spy(() => false).named("isScopeSelectable");
+		const component = (
+			<TestWrapper provider={{ store }} memoryRouter stylesProvider muiThemeProvider={{ theme }}>
+				<TreeItem
+					scope={saleScope}
+					rootId={rootId}
+					onScopeSelect={closeSelectorSpy}
+					isScopeSelectable={isScopeSelectableSpy}
+				/>
+			</TestWrapper>
+		);
+
+		const preventDefaultSpy = sinon.spy();
+
+		const mountedComponent = mount(component);
+
+		const saleScopeLabel = mountedComponent.find(TreeItemMui);
+
+		const event = {
+			preventDefault: preventDefaultSpy,
+		};
+
+		saleScopeLabel.invoke("onLabelClick")(event);
+
+		expect(preventDefaultSpy, "was called");
+		expect(closeSelectorSpy, "was not called");
+	});
+
+	it("Calls scope select handler on label click if isScopeSelectable is defined and returns true", () => {
+		const isScopeSelectableSpy = sinon.spy(() => true).named("isScopeSelectable");
+		const component = (
+			<TestWrapper provider={{ store }} memoryRouter stylesProvider muiThemeProvider={{ theme }}>
+				<TreeItem
+					scope={saleScope}
+					rootId={rootId}
+					onScopeSelect={closeSelectorSpy}
+					isScopeSelectable={isScopeSelectableSpy}
+				/>
+			</TestWrapper>
+		);
+
+		const preventDefaultSpy = sinon.spy();
+
+		const mountedComponent = mount(component);
+
+		const saleScopeLabel = mountedComponent.find(TreeItemMui);
+
+		const event = {
+			preventDefault: preventDefaultSpy,
+		};
+
+		saleScopeLabel.invoke("onLabelClick")(event);
+
+		expect(preventDefaultSpy, "was called");
+		expect(closeSelectorSpy, "to have no calls satisfying", { args: [event] });
+	});
 });
 
 describe("ScopeLabel", () => {

package/src/components/MaterialUI/Surfaces/ExpansionPanel.js

@@ -29,6 +29,13 @@ const useStyles = makeStyles(theme => ({
 		width: theme.spacing(1),
 	},
 	headerPanelExpanded: {},
+	constrainedSummaryRoot: {
+		overflowX: "auto",
+		overflowY: "hidden",
+	},
+	constrainedSummaryContent: {
+		minWidth: theme.spacing(83),
+	},
 }));
 
 const ExpansionPanel = ({ header, content, actions, expansionPanelProps, expansionPanelActionsProps }) => {
@@ -45,6 +52,7 @@ const ExpansionPanel = ({ header, content, actions, expansionPanelProps, expansi
 	// Expansion panel props
 	const disabled = expansionPanelProps?.get(ExpansionPanelProps.propNames.disabled);
 	const defaultExpanded = expansionPanelProps?.get(ExpansionPanelProps.propNames.defaultExpanded) ?? true;
+	const constrained = expansionPanelProps?.get(ExpansionPanelProps.propNames.constrained) || false;
 
 	const [expanded, setExpanded] = React.useState(defaultExpanded);
 
@@ -76,7 +84,12 @@ const ExpansionPanel = ({ header, content, actions, expansionPanelProps, expansi
 			<AccordionSummary
 				expandIcon={<Icon id="chevron-down" className={classes.expandIcon} />}
 				classes={{
-					root: classNames(classes.expansionPanelHeader, panelSummaryRootStyle),
+					root: classNames(
+						classes.expansionPanelHeader,
+						panelSummaryRootStyle,
+						constrained ? classes.constrainedSummaryRoot : "",
+					),
+					content: classNames(constrained ? classes.constrainedSummaryContent : ""),
 					expanded: classNames(classes.headerPanelExpanded, panelSummaryExpandedStyle),
 				}}
 			>

package/src/components/MaterialUI/Surfaces/ExpansionPanel.test.js

@@ -178,6 +178,22 @@ describe("Expansion Panel", () => {
 		expect(mountedComponent.exists(".MuiAccordionActions-spacing"), "to be truthy");
 	});
 
+	it("Classes are added properly when constrained property of expansionPanelProps is true", () => {
+		const expansionPanelProps = new ExpansionPanelProps();
+		expansionPanelProps.set(ExpansionPanelProps.propNames.constrained, true);
+
+		const component = (
+			<MuiThemeProvider theme={createMuiTheme()}>
+				<ExpansionPanel expansionPanelProps={expansionPanelProps} />
+			</MuiThemeProvider>
+		);
+
+		const mountedComponent = mount(component);
+
+		expect(mountedComponent.exists(".makeStyles-constrainedSummaryRoot-49"), "to be truthy");
+		expect(mountedComponent.exists(".makeStyles-constrainedSummaryContent-50"), "to be truthy");
+	});
+
 	it("DisableSpacing value for disabled property is correct if expansionPanelActionsProps was passed without setting that", () => {
 		const actions = <p>Actions</p>;
 		const expansionPanelActionsProps = new ExpansionPanelActionsProps();

package/src/components/MaterialUI/Surfaces/SectionExpansionPanel.js

@@ -52,6 +52,13 @@ const useStyles = makeStyles(theme => ({
 		color: theme.palette.grey.darker,
 		minWidth: "auto",
 	},
+	constrainedSummaryRoot: {
+		overflowX: "auto",
+		overflowY: "hidden",
+	},
+	constrainedSummaryContent: {
+		minWidth: theme.spacing(83),
+	},
 }));
 
 const SectionExpansionPanel = ({
@@ -97,6 +104,8 @@ const SectionExpansionPanel = ({
 	// Expansion panel actions props
 	const disableSpacing = expansionPanelActionsProps?.get(ExpansionPanelActionsProps.propNames.disableSpacing);
 
+	const constrained = expansionPanelProps?.get(ExpansionPanelProps.propNames.constrained) || false;
+
 	return (
 		<Accordion
 			defaultExpanded={defaultExpanded}
@@ -112,9 +121,9 @@ const SectionExpansionPanel = ({
 				expandIcon={<Icon id="dropdown-chevron-down" />}
 				IconButtonProps={defaultSummaryStyles}
 				classes={{
-					root: classNames(classes.summaryRoot),
+					root: classNames(classes.summaryRoot, constrained ? classes.constrainedSummaryRoot : ""),
 					expanded: classNames(classes.panelExpanded),
-					content: classNames(classes.summaryContent),
+					content: classNames(classes.summaryContent, constrained ? classes.constrainedSummaryContent : ""),
 					expandIcon: classNames(classes.summaryExpandIconRoot),
 				}}
 			>

package/src/components/MaterialUI/Surfaces/SectionExpansionPanel.test.js

@@ -231,6 +231,42 @@ describe("Section Expansion Panel", () => {
 		expect(mountedComponent.exists(".MuiAccordionActions-spacing"), "to be truthy");
 	});
 
+	it("Uses expansionPanelProps.constrained correctly", () => {
+		const expansionPanelProps = new ExpansionPanelProps();
+
+		expansionPanelProps.set(ExpansionPanelProps.propNames.constrained, true);
+
+		const component = (
+			<Provider store={store(state)}>
+				<MuiThemeProvider theme={createMuiTheme()}>
+					<SectionExpansionPanel expansionPanelProps={expansionPanelProps} />
+				</MuiThemeProvider>
+			</Provider>
+		);
+
+		const mountedComponent = mount(component);
+
+		expect(mountedComponent.exists(".makeStyles-constrainedSummaryRoot-87"), "to be truthy");
+		expect(mountedComponent.exists(".makeStyles-constrainedSummaryContent-88"), "to be truthy");
+	});
+
+	it("Default value for constrained property is correct if expansionPanelProps was passed without setting that", () => {
+		const expansionPanelProps = new ExpansionPanelProps();
+
+		const component = (
+			<Provider store={store(state)}>
+				<MuiThemeProvider theme={createMuiTheme()}>
+					<SectionExpansionPanel expansionPanelProps={expansionPanelProps} />
+				</MuiThemeProvider>
+			</Provider>
+		);
+
+		const mountedComponent = mount(component);
+
+		expect(mountedComponent.exists(".makeStyles-constrainedSummaryRoot-96"), "to be falsy");
+		expect(mountedComponent.exists(".makeStyles-constrainedSummaryContent-97"), "to be falsy");
+	});
+
 	it("handles internal on change function", () => {
 		const header = <p>Header</p>;
 		const content = <p>Content</p>;

package/src/components/MaterialUI/Surfaces/expansionPanelProps.js

@@ -6,6 +6,7 @@ class ExpansionPanelProps extends ComponentProps {
 		disabled: "disabled",
 		expanded: "expanded",
 		onChange: "onChange",
+		constrained: "constrained",
 	};
 
 	static ruleNames = {
@@ -22,6 +23,7 @@ class ExpansionPanelProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.disabled, null);
 		this.componentProps.set(this.constructor.propNames.expanded, null);
 		this.componentProps.set(this.constructor.propNames.onChange, null);
+		this.componentProps.set(this.constructor.propNames.constrained, false);
 
 		this.componentClasses.set(this.constructor.ruleNames.root, null);
 		this.componentClasses.set(this.constructor.ruleNames.summaryRoot, null);

package/src/components/MaterialUI/Surfaces/expansionPanelProps.test.js

@@ -7,7 +7,7 @@ import {
 
 describe("Expansion Panel Props", () => {
 	it("Contains necessary prop and rule keys", () => {
-		const propNames = ["defaultExpanded", "disabled", "expanded", "onChange"];
+		const propNames = ["defaultExpanded", "disabled", "expanded", "onChange", "constrained"];
 		const rulesNames = ["root", "summaryRoot", "summaryExpanded", "details", "actions"];
 
 		expect(ExpansionPanelProps.propNames, "to have keys", propNames);
@@ -15,7 +15,7 @@ describe("Expansion Panel Props", () => {
 	});
 
 	it("Puts keys in component prop and rule maps", () => {
-		const propNames = ["defaultExpanded", "disabled", "expanded", "onChange"];
+		const propNames = ["defaultExpanded", "disabled", "expanded", "onChange", "constrained"];
 		const rulesNames = ["root", "summaryRoot", "summaryExpanded", "details", "actions"];
 
 		const expansionPanelProps = new ExpansionPanelProps();

package/src/components/MaterialUI/muiThemes.js

@@ -94,6 +94,7 @@ const commonPalette = {
 		default: "#FFF",
 		tabs: "#EFEFEF",
 		app: "#333",
+		selectedDate: "#216BA5",
 	},
 	action: {
 		disabledBackground: "#EFEFEF",
@@ -979,9 +980,6 @@ const setThemeOverrides = theme => ({
 				left: theme.spacing(-2.1),
 				width: theme.spacing(2),
 			},
-			"&.Mui-expanded:before": {
-				width: theme.spacing(1.5),
-			},
 		},
 		label: {
 			...theme.label,
@@ -1027,6 +1025,23 @@ const setThemeOverrides = theme => ({
 			"& svg": {
 				fontSize: "10px",
 			},
+			"&:before": {
+				content: `" "`,
+				position: "absolute",
+				height: theme.spacing(0.1),
+				width: theme.spacing(0.5),
+				left: theme.spacing(-0.5),
+				backgroundColor: theme.palette.grey.light,
+				top: theme.spacing(1.1),
+			},
+			"&:empty": {
+				width: theme.spacing(1),
+				"&:before": {
+					backgroundColor: "transparent",
+					borderTop: `1px solid ${theme.palette.grey.icon}`,
+					width: theme.spacing(1.5),
+				},
+			},
 		},
 	},
 	MuiTimeline: {

package/src/components/Modules.js

@@ -3,7 +3,7 @@ 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 } from "../selectors/navigation";
+import { getCurrentScope, selectRouteHref } from "../selectors/navigation";
 import { isCurrentScopeAuthorizedSelector } from "../selectors/scope";
 import Navigation from "./Navigation";
 import FullPage from "./Routing/FullPage";
@@ -12,6 +12,18 @@ import { setModulesStructure } from "../actions/modules";
 import { defaultScopeSelector } from "../selectors/settings";
 
 export const Module = withErrorBoundary("Module")(({ config, path, error, location, match, modulePrependPath }) => {
+	const currentRoute = useSelector(selectRouteHref);
+	const history = useHistory();
+	let hideSelector = state => (typeof config.hide === "function" ? config.hide(state) : config.hide ?? false);
+	const isHidden = useSelector(hideSelector);
+
+	React.useEffect(() => {
+		if (isHidden === true && currentRoute.includes(match.url)) {
+			history.push("/");
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isHidden, currentRoute, match.url]);
+
 	return (
 		<FullPage path={path} config={config} location={location} match={match} modulePrependPath={modulePrependPath} />
 	);

package/src/components/Modules.test.js

@@ -2,7 +2,7 @@ import React from "react";
 import Immutable from "immutable";
 import { mount } from "unexpected-reaction";
 import SegmentPage from "./Routing/SegmentPage";
-import { Modules } from "./Modules";
+import { Modules, Module } from "./Modules";
 import TabBar from "./MaterialUI/Navigation/TabBar";
 import { TestWrapper, createMuiTheme } from "./../utils/testUtils";
 import sinon from "sinon";
@@ -438,3 +438,135 @@ describe("Modules", () => {
 		});
 	});
 });
+
+describe("Module", () => {
+	let config, Page1, store, state;
+
+	const match = {
+		url: "/TestScope/users/page1",
+		path: "/:scope/users/page1",
+		params: { scope: "TestScope" },
+	};
+
+	let history, pushSpy;
+	beforeAll(() => {
+		history = createMemoryHistory({ initialEntries: ["/TestScope/demos"] });
+		pushSpy = sinon.spy(history, "push");
+		history.push.named("history.push");
+	});
+
+	beforeEach(() => {
+		config = {
+			label: "Module 1",
+			icon: "user",
+			hide: true,
+			segments: {
+				"/page1": {
+					component: Page1,
+					label: "Page 1",
+				},
+			},
+		};
+		state = Immutable.fromJS({
+			navigation: {
+				tabIndex: {},
+				moduleTabs: {},
+				mappedHrefs: {},
+				route: {
+					match: match,
+				},
+				config: { prependPath: "/:scope/", prependHref: "/TestScope/" },
+			},
+			router: {
+				location: {},
+			},
+			modules: {
+				tree: {},
+			},
+			view: {
+				edit: {
+					users: {},
+					photos: {},
+					demos: {},
+				},
+			},
+			requests: {
+				logout: false,
+			},
+			settings: {
+				defaultScope: "myScope",
+			},
+			scopes: {
+				TestScope: {
+					id: "TestScope",
+					name: { "en-CA": "Test 1" },
+					foo: false,
+					bar: false,
+					children: ["test2"],
+					isAuthorizedScope: true,
+				},
+			},
+			locale: {
+				locale: null,
+				supportedLocales: [
+					{ language: "English", cultureIso: "en-US" },
+					{ language: "Francais", cultureIso: "fr" },
+				],
+			},
+		});
+		store = {
+			subscribe: () => {},
+			dispatch: () => {},
+			getState: () => state,
+		};
+	});
+
+	const theme = createMuiTheme();
+
+	it("Calls pushes to root when unauthorized user trying to access hidden module", () => {
+		//config.hide = false;
+		const component = (
+			<TestWrapper provider={{ store }} router={{ history }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<Module config={config} match={match} path={match.path} location={{}} />
+			</TestWrapper>
+		);
+
+		mount(component);
+
+		expect(history.push, "to have calls satisfying", [{ args: ["/"] }]);
+
+		pushSpy.resetHistory();
+	});
+
+	it("Calls pushes to root when unauthorized user trying to access hidden module and hide property is a function which retrieves false", () => {
+		config.hide = () => false;
+
+		const component = (
+			<TestWrapper provider={{ store }} router={{ history }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<Module config={config} match={match} path={match.path} location={{}} />
+			</TestWrapper>
+		);
+
+		mount(component);
+
+		expect(history.push, "not to have calls satisfying", [{ args: ["/"] }]);
+
+		pushSpy.resetHistory();
+	});
+
+	it("Calls pushes to root when unauthorized user trying to access hidden module and hide property is a function which retrieves true", () => {
+		config.hide = () => true;
+
+		const component = (
+			<TestWrapper provider={{ store }} router={{ history }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<Module config={config} match={match} path={match.path} location={{}} />
+			</TestWrapper>
+		);
+
+		mount(component);
+
+		expect(history.push, "to have calls satisfying", [{ args: ["/"] }]);
+
+		pushSpy.resetHistory();
+	});
+});

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

@@ -113,12 +113,14 @@ describe("Navigation", () => {
 				href: "/TestScope/test/page1",
 				active: true,
 				params: { scope: "TestScope", entityId: "page1" },
+				path: "/:scope/test/:entityId",
 			},
 			{
 				label: "Page 2",
 				href: "/TestScope/test/page2",
 				active: false,
 				params: { scope: "TestScope", entityId: "page2" },
+				path: "/:scope/test/:entityId",
 			},
 		];
 

package/src/components/Navigation/useNavigationState.js

@@ -25,7 +25,7 @@ const doesRestPathMatchParams = (params, paramPathSplit, restPath) => {
 };
 
 const getPageWithSplitPath = ([pathStep, ...restPath], params, pages) => {
-	let page = pages[pathStep];
+	let page = getPageFromPathSteps(pages, pathStep);
 	if (!page) {
 		const paramPath =
 			// Only one should exist
@@ -62,6 +62,25 @@ const getPageWithSplitPath = ([pathStep, ...restPath], params, pages) => {
 	}
 };
 
+const getPageFromPathSteps = (pages, pathStep) => {
+	let page = pages[pathStep];
+	if (page) {
+		return page;
+	}
+
+	const rx = /^\/:[^(]+\(([^/]+?)\)/;
+
+	for (const key of Object.keys(pages)) {
+		const matches = key.match(rx);
+		if (matches !== null) {
+			if (new RegExp(matches[1]).test(pathStep)) {
+				return pages[key];
+			}
+		}
+	}
+	return undefined;
+};
+
 const redirectScopeWhenRequired = (isPageTab, pageScopeSelector, rawPage, currentScope, scopeDefinitionGetter) => {
 	const params = rawPage.params || {};
 	const scopeChanged = params.scope && params.scope !== currentScope;
@@ -195,6 +214,7 @@ export const useNavigationState = modules => {
 			outsideScope: isPageTab ? outsideScope : null,
 			scopeNotSupported: isPageTab ? pageScopeSelector != null && outsideScope : null,
 			label,
+			entityIdResolver: pageData.entityIdResolver,
 			mustTruncate: pageData.mustTruncate,
 			href,
 			mappedFrom: page.href,

package/src/components/Navigation/useNavigationState.test.js

@@ -1339,6 +1339,10 @@ describe("getPageData", () => {
 					label: "Page 5",
 					component: TestComp9,
 				},
+				"/:var3(def\\d{1,3})": {
+					label: "Page 6",
+					component: TestComp7,
+				},
 			},
 		};
 	});
@@ -1374,6 +1378,12 @@ describe("getPageData", () => {
 			component: TestComp9,
 		}));
 
+	it("handles variable path steps which uses 'path to regex' with multiple pages", () =>
+		expect(getPageData, "when called with", ["/def666", { var3: "def666" }, module3], "to satisfy", {
+			label: "Page 6",
+			component: TestComp7,
+		}));
+
 	it("handles multiple variable path steps", () =>
 		expect(
 			getPageData,

package/src/components/Routing/FullPage.js

@@ -3,12 +3,13 @@ import Page from "./Page";
 import SegmentPage from "./SegmentPage";
 
 const FullPage = ({ path, config, location, match, modulePrependPath }) => {
-	const { component, pages = {}, segments, subpages, entityIdResolver } = config;
+	const { component, componentProps, pages = {}, segments, subpages, entityIdResolver } = config;
 	if (segments) {
 		return (
 			<SegmentPage
 				path={path}
 				component={component}
+				componentProps={componentProps ?? {}}
 				segments={segments}
 				location={location}
 				match={match}