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

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",
@@ -157,6 +158,11 @@ const setThemeOverrides = theme => ({
 			},
 		},
 	},
+	MuiLink: {
+		root: {
+			fontSize: theme.spacing(1.3),
+		},
+	},
 	MuiButton: {
 		...theme.MuiButton,
 		root: {
@@ -979,9 +985,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 +1030,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,37 +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 } 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";
+
+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();
+	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 (moduleInfo.scope != null && scope === moduleInfo.scope && moduleInfo.visibleModules.length > 0 && !isVisible) {
+			rerouteOnScopeAndModule(history, currentRoute, moduleInfo.scope, moduleInfo.visibleModules[0]);
+		}
+	}, [history, scope, isVisible, currentRoute, moduleInfo.scope, moduleInfo.visibleModules]);
 
-export const Module = withErrorBoundary("Module")(({ config, path, error, location, match, modulePrependPath }) => {
 	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(() => {
@@ -41,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);
@@ -67,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} />
 							)}
 						/>
 					);