orc-shared 1.1.0-dev.9 → 1.1.2

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

@@ -16,7 +16,7 @@ import { isScrollVisible } from "./../../../utils/domHelper";
 import { getModifiedTabs, getTabsWithErrors } from "./../../../selectors/view";
 import ConfirmationModal from "./../DataDisplay/PredefinedElements/ConfirmationModal";
 import { removeEditNode } from "./../../../actions/view";
-import { getValueFromUrlByKey, tryGetNewEntityIdKey } from "./../../../utils/urlHelper";
+import { tryGetNewEntityIdKey, resolveEntityId } from "./../../../utils/urlHelper";
 import { useDispatchWithModulesData } from "./../../../hooks/useDispatchWithModulesData";
 import sharedMessages from "./../../../sharedMessages";
 import { setClosingTabHandlerActions } from "../../../actions/navigation";
@@ -147,21 +147,15 @@ const MuiBar = ({ module, moduleName, pages }) => {
 		return newIndex;
 	};
 
-	const tabCloseHandler = (event, closeCallback, isModified, href, path, entityIdKey, index) => {
+	const tabCloseHandler = (event, closeCallback, isModified, href, path, entityIdKey, entityId, index) => {
 		event.stopPropagation();
 		event.preventDefault();
 		if (isModified) {
-			setCurrentCloseData({
-				closeCallback: closeCallback,
-				href: href,
-				path: path,
-				entityIdKey: entityIdKey,
-				index: index,
-			});
+			setCurrentCloseData({ closeCallback, entityId, index });
 			setShowConfirmationModal(true);
 		} else {
 			closeCallback();
-			removeEditState(href, entityIdKey, path);
+			dispatch(removeEditNode, [entityId]);
 			handleChange(null, getNewIndex(index));
 		}
 	};
@@ -169,17 +163,10 @@ const MuiBar = ({ module, moduleName, pages }) => {
 	const closeTab = () => {
 		setShowConfirmationModal(false);
 		currentCloseData.closeCallback();
-		removeEditState(currentCloseData.href, currentCloseData.entityIdKey, currentCloseData.path);
+		dispatch(removeEditNode, [currentCloseData.entityId]);
 		handleChange(null, getNewIndex(currentCloseData.index));
 	};
 
-	const removeEditState = (href, entityIdKey, path) => {
-		let newKey = tryGetNewEntityIdKey(href);
-		const key = entityIdKey === newKey ? entityIdKey : `:${entityIdKey}`;
-		const entityId = getValueFromUrlByKey(href, path, key);
-		dispatch(removeEditNode, [entityId]);
-	};
-
 	const moduleIcon = <Icon id={module.icon} className={classes.moduleIcon} />;
 
 	const resizeHandler = React.useCallback(() => {
@@ -191,20 +178,9 @@ const MuiBar = ({ module, moduleName, pages }) => {
 		resizeHandler();
 	}, [resizeHandler, module, pages]);
 
-	React.useEffect(() => {
-		if (module.closingTabHandler?.entitySelector) {
-			const actions = pages
-				.map(p => ({
-					entityId: module.closingTabHandler.entitySelector(p.params)?.entityId ?? null,
-					closeTab: p.close,
-				}))
-				.filter(x => x.entityId != null);
-
-			dispatchRedux(setClosingTabHandlerActions(moduleName, actions));
-		}
-	}, [dispatchRedux, moduleName, pages, module.closingTabHandler]);
+	const closingActions = [];
 
-	return (
+	const allTabs = (
 		<div className={classes.container}>
 			<ResizeDetector onResize={resizeHandler} />
 			<Tab
@@ -227,54 +203,76 @@ const MuiBar = ({ module, moduleName, pages }) => {
 				}}
 				ref={tabs}
 			>
-				{pages.map(({ href, label, outsideScope, close, path, params, mustTruncate, icon, isDetails }, index) => {
-					let entityIdKey = Object.keys(params).find(p => p.toLowerCase().endsWith("id"));
-					if (!entityIdKey) entityIdKey = tryGetNewEntityIdKey(href);
-					const isModified = modifiedTabs.includes(href);
-					const isError = tabsWithErrors.includes(href);
-					const tabLabel = <TabLabel label={label} />;
-					const sectionIconClss = classNames(classes.moduleIcon, isDetails && classes.sectionIcon);
-					const tabClassName = classNames(
-						classes.labelContainer,
-						isModified && classes.modifiedLabel,
-						isError && classes.errorLabel,
-					);
-					const sectionIcon = icon && <Icon id={icon} className={sectionIconClss} />;
+				{pages.map(
+					(
+						{ href, label, outsideScope, close, path, params, mustTruncate, icon, isDetails, entityIdResolver },
+						index,
+					) => {
+						let entityIdKey = Object.keys(params).find(p => p.toLowerCase().endsWith("id"));
+						if (!entityIdKey) entityIdKey = tryGetNewEntityIdKey(href);
+						const entityId =
+							typeof entityIdResolver === "function"
+								? entityIdResolver({ match: { params } })
+								: resolveEntityId(href, path, entityIdKey);
+						const isModified = modifiedTabs.includes(href);
+						const isError = tabsWithErrors.includes(href);
+						const tabLabel = <TabLabel label={label} />;
+						const sectionIconClss = classNames(classes.moduleIcon, isDetails && classes.sectionIcon);
+						const tabClassName = classNames(
+							classes.labelContainer,
+							isModified && classes.modifiedLabel,
+							isError && classes.errorLabel,
+						);
+						const sectionIcon = icon && <Icon id={icon} className={sectionIconClss} />;
 
-					const wrappedTabLabel = (
-						<div className={tabClassName}>
-							<TabLabel label={label} mustTruncate={mustTruncate} classes={{ root: tabClassName }} />
-							{isModified === true ? <span className={classes.asterix}>*</span> : null}
-						</div>
-					);
-					const closeIcon = (
-						<Icon
-							id="close"
-							className={classes.closeIcon}
-							onClick={event => tabCloseHandler(event, close, isModified, href, path, entityIdKey, index)}
-						/>
-					);
-					tabLabels.push({
-						value: index,
-						label: tabLabel,
-						sortOrder: index,
-					});
-					return (
-						<Tab
-							classes={{
-								root: classNames(classes.tab, !mustTruncate && classes.unsetMaxWidth),
-							}}
-							component={TabLink}
-							label={wrappedTabLabel}
-							icon={sectionIcon}
-							key={href}
-							to={href}
-							value={index}
-							close={closeIcon}
-							disabled={outsideScope}
-						/>
-					);
-				})}
+						const wrappedTabLabel = (
+							<div className={tabClassName}>
+								<TabLabel label={label} mustTruncate={mustTruncate} classes={{ root: tabClassName }} />
+								{isModified === true ? <span className={classes.asterix}>*</span> : null}
+							</div>
+						);
+						const closeIcon = (
+							<Icon
+								id="close"
+								className={classes.closeIcon}
+								onClick={event => tabCloseHandler(event, close, isModified, href, path, entityIdKey, entityId, index)}
+							/>
+						);
+						tabLabels.push({
+							value: index,
+							label: tabLabel,
+							sortOrder: index,
+						});
+
+						if (entityId != null) {
+							closingActions.push({
+								entityId: entityId,
+								closeTab: (event, executeHandlerOnly = false) => {
+									close(event, executeHandlerOnly);
+									if (executeHandlerOnly === false) {
+										handleChange(null, getNewIndex(index));
+									}
+								},
+							});
+						}
+
+						return (
+							<Tab
+								classes={{
+									root: classNames(classes.tab, !mustTruncate && classes.unsetMaxWidth),
+								}}
+								component={TabLink}
+								label={wrappedTabLabel}
+								icon={sectionIcon}
+								key={href}
+								to={href}
+								value={index}
+								close={closeIcon}
+								disabled={outsideScope}
+							/>
+						);
+					},
+				)}
 			</Tabs>
 			{showSelect ? select : null}
 			<ConfirmationModal
@@ -286,6 +284,12 @@ const MuiBar = ({ module, moduleName, pages }) => {
 			/>
 		</div>
 	);
+
+	React.useEffect(() => {
+		dispatchRedux(setClosingTabHandlerActions(moduleName, closingActions));
+	}, [dispatchRedux, moduleName, closingActions]);
+
+	return allTabs;
 };
 
 export default MuiBar;

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

@@ -79,7 +79,7 @@ describe("TabBar", () => {
 			path: "/:scope/module1/:someParamPath/:someEntityId",
 		},
 		{
-			label: messages.pageNew,
+			label: messages.page6,
 			href: "/Scope1/module1/new",
 			params: { scope: "Scope1" },
 			active: false,
@@ -312,6 +312,7 @@ describe("TabBar", () => {
 	);
 
 	beforeEach(() => {
+		pages[2].entityIdResolver = undefined;
 		module.closingTabHandler = null;
 
 		state = Immutable.fromJS({
@@ -371,6 +372,19 @@ describe("TabBar", () => {
 			getState: () => state,
 			dispatch: () => {},
 		};
+
+		pages[3] = {
+			label: messages.page4,
+			href: "/Scope1/module1/aParamPath/page4",
+			params: { scope: "Scope1", someParamPath: "aParamPath", someEntityId: "page4" },
+			active: false,
+			close: sinon.spy(),
+			path: "/:scope/module1/:someParamPath/:someEntityId",
+		};
+	});
+
+	beforeEach(() => {
+		history.push.resetHistory();
 	});
 
 	const theme = createMuiTheme();
@@ -411,12 +425,15 @@ describe("TabBar", () => {
 	it("Renders TabBar correctly with closing tab handler", () => {
 		store.dispatch = sinon.spy().named("dispatch");
 
+		pages[2].entityIdResolver = () => null;
+
 		const component = (
 			<TestWrapper
 				provider={{ store }}
 				memoryRouter
 				intlProvider={{ messages }}
 				stylesProvider
+				router={{ history }}
 				muiThemeProvider={{ theme }}
 			>
 				<TabBar module={module} moduleName={"module1"} pages={pages} />
@@ -434,6 +451,7 @@ describe("TabBar", () => {
 				memoryRouter
 				intlProvider={{ messages }}
 				stylesProvider
+				router={{ history }}
 				muiThemeProvider={{ theme }}
 			>
 				<div>
@@ -454,6 +472,80 @@ describe("TabBar", () => {
 		expect(store.dispatch.getCall(0).args[0].payload.actions.length, "to equal", 5);
 	});
 
+	it("Close the tab correctly using closing tab handler actions", () => {
+		store.dispatch = sinon.spy().named("dispatch");
+
+		pages[2].entityIdResolver = () => null;
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				stylesProvider
+				router={{ history }}
+				muiThemeProvider={{ theme }}
+			>
+				<TabBar module={module} moduleName={"module1"} pages={pages} />
+			</TestWrapper>
+		);
+
+		module.closingTabHandler = {
+			handler: () => {},
+			entitySelector: params => (params?.entityId !== "page3" ? { entityId: "entityId", entity: {} } : null),
+		};
+
+		mount(component);
+
+		expect(store.dispatch, "was called once");
+		expect(store.dispatch.getCall(0).args.length, "to equal", 1);
+		expect(store.dispatch.getCall(0).args[0].type, "to equal", SET_CLOSING_TAB_HANDLER_ACTIONS);
+		expect(store.dispatch.getCall(0).args[0].payload.module, "to equal", "module1");
+		expect(store.dispatch.getCall(0).args[0].payload.actions.length, "to equal", 5);
+
+		store.dispatch.getCall(0).args[0].payload.actions[1].closeTab({});
+
+		expect(pages[1].close, "was called");
+
+		expect(history.push, "to have a call satisfying", { args: [pages[2].href] });
+	});
+
+	it("Close the tab correctly using closing tab handler actions without affecting routing", () => {
+		store.dispatch = sinon.spy().named("dispatch");
+
+		pages[2].entityIdResolver = () => null;
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				intlProvider={{ messages }}
+				stylesProvider
+				router={{ history }}
+				muiThemeProvider={{ theme }}
+			>
+				<TabBar module={module} moduleName={"module1"} pages={pages} />
+			</TestWrapper>
+		);
+
+		module.closingTabHandler = {
+			handler: () => {},
+			entitySelector: params => (params?.entityId !== "page3" ? { entityId: "entityId", entity: {} } : null),
+		};
+
+		mount(component);
+
+		expect(store.dispatch, "was called once");
+		expect(store.dispatch.getCall(0).args.length, "to equal", 1);
+		expect(store.dispatch.getCall(0).args[0].type, "to equal", SET_CLOSING_TAB_HANDLER_ACTIONS);
+		expect(store.dispatch.getCall(0).args[0].payload.module, "to equal", "module1");
+		expect(store.dispatch.getCall(0).args[0].payload.actions.length, "to equal", 5);
+
+		store.dispatch.getCall(0).args[0].payload.actions[1].closeTab({}, true);
+
+		expect(pages[1].close, "was called");
+
+		expect(history.push, "was not called");
+	});
+
 	it("Contains proper Select and Modal elements when they are visible", () => {
 		const component = (
 			<TestWrapper
@@ -594,6 +686,40 @@ describe("TabBar", () => {
 		useDispatchWithModulesDataStub.restore();
 	});
 
+	it("Calls correct close callback when close icon for specific page tab is clicked with a custom entity resolver", () => {
+		pages[3].entityIdResolver = () => "someCustomId";
+
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				router={{ history }}
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<TabBar module={module} pages={pages} />
+			</TestWrapper>
+		);
+
+		const dispatchSpy = sinon.spy();
+		const useDispatchWithModulesDataStub = sinon
+			.stub(useDispatchWithModulesData, "useDispatchWithModulesData")
+			.returns(dispatchSpy);
+
+		const mountedComponent = mount(component);
+
+		const pageTab = mountedComponent.find(Tab).at(4);
+		const closeIcon = pageTab.find(Icon);
+
+		closeIcon.simulate("click");
+
+		expect(pages[3].close, "was called");
+
+		expect(dispatchSpy, "to have a call satisfying", { args: [removeEditNode, ["someCustomId"]] });
+
+		useDispatchWithModulesDataStub.restore();
+	});
+
 	it("Calls correct close callback when close icon for specific page tab with multiple params is clicked and tab was not modified", () => {
 		const component = (
 			<TestWrapper
@@ -650,7 +776,7 @@ describe("TabBar", () => {
 
 		closeIcon.simulate("click");
 
-		expect(setState, "to have a call satisfying", { args: [{ closeCallback: pages[2].close, href: pages[2].href }] });
+		expect(setState, "to have a call satisfying", { args: [{ closeCallback: pages[2].close }] });
 
 		expect(setState, "to have a call satisfying", { args: [true] });
 	});
@@ -679,7 +805,7 @@ describe("TabBar", () => {
 
 		closeIcon.simulate("click");
 
-		expect(setState, "to have a call satisfying", { args: [{ closeCallback: pages[4].close, href: pages[4].href }] });
+		expect(setState, "to have a call satisfying", { args: [{ closeCallback: pages[4].close }] });
 
 		expect(setState, "to have a call satisfying", { args: [true] });
 	});

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

@@ -15,6 +15,11 @@ const useStyles = makeStyles(theme => ({
 		backgroundColor: theme.palette.grey.light,
 		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",
@@ -30,7 +35,7 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const ScopeSelector = ({ show, getScope, selectedScope, closeSelector, filter, updateFilter }) => {
+const ScopeSelector = ({ show, getScope, selectedScope, closeSelector, filter, updateFilter, isScopeSelectable }) => {
 	const classes = useStyles();
 	const { formatMessage } = useIntl();
 
@@ -53,16 +58,17 @@ const ScopeSelector = ({ show, getScope, selectedScope, closeSelector, filter, u
 					selected={selectedScope.id}
 					expanded={selectedScope.scopePath}
 					onSelected={closeSelector}
+					isScopeSelectable={isScopeSelectable}
 				/>
 			</div>
 		</>
 	);
 
 	const scopeSelector = (
-		<Sidepanel className={classes.container} in={show} width="27vw" timeout={300}>
+		<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/ScopeSelector/ScopeSelector.test.js

@@ -138,4 +138,33 @@ describe("ScopeSelected", () => {
 
 		expect(closeSelector, "was called");
 	});
+
+	it("isScopeSelectable is passed to ScopeTreeView", () => {
+		const fn = sinon.spy().named("isScopeSelectable");
+		const component = (
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter
+				intlProvider={{ messages }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<ScopeSelector
+					show={true}
+					closeSelector={closeSelector}
+					getScope={getScope}
+					selectedScope={selectedScope}
+					filter={filter}
+					updateFilter={updateFilter}
+					isScopeSelectable={fn}
+				/>
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+
+		const treeView = mountedComponent.find(ScopeTreeView);
+
+		expect(treeView.props().isScopeSelectable, "to be", fn);
+	});
 });

package/src/components/MaterialUI/ScopeSelector/ScopeTreeView.js

@@ -10,6 +10,7 @@ export const BaseScopeTreeView = ({
 	selected,
 	setSelected,
 	multipleSelect,
+	isScopeSelectable,
 }) => {
 	const [expanded, setExpanded] = React.useState(initExpanded);
 
@@ -38,6 +39,7 @@ export const BaseScopeTreeView = ({
 				scope={currentScope}
 				rootId={rootId}
 				onScopeSelect={onScopeSelect}
+				isScopeSelectable={isScopeSelectable}
 			>
 				{currentScope.children.map(child => renderTree(child))}
 			</TreeItem>
@@ -51,7 +53,7 @@ export const BaseScopeTreeView = ({
 	);
 };
 
-const ScopeTreeView = ({ rootId, getScope, selected, expanded, onSelected, multipleSelect }) => {
+const ScopeTreeView = ({ rootId, getScope, selected, expanded, onSelected, multipleSelect, isScopeSelectable }) => {
 	const initialSelected = Array.isArray(selected) ? selected : selected ? [selected] : [];
 	const [currentSelected, setCurrentSelected] = React.useState(initialSelected);
 
@@ -64,6 +66,7 @@ const ScopeTreeView = ({ rootId, getScope, selected, expanded, onSelected, multi
 			selected={currentSelected}
 			setSelected={setCurrentSelected}
 			multipleSelect={multipleSelect}
+			isScopeSelectable={isScopeSelectable}
 		/>
 	);
 };

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

@@ -223,4 +223,56 @@ describe("ScopeTreeView", () => {
 
 		expect(onSelectedSpy, "to have calls satisfying", [{ args: [event, scopes[3].id] }]);
 	});
+
+	it("Selection is ignored when isScopeSelectable is defined and returns false", () => {
+		const isScopeSelectableSpy = sinon.spy(() => false).named("isScopeSelectable");
+		const component = (
+			<TestWrapper provider={{ store }} memoryRouter stylesProvider muiThemeProvider={{ theme }}>
+				<ScopeTreeView
+					rootId={scopes[0].id}
+					getScope={getScope}
+					selected={scopes[1].id}
+					expanded={scopes[1].scopePath}
+					onSelected={onSelectedSpy}
+					isScopeSelectable={isScopeSelectableSpy}
+				/>
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+		let treeView = mountedComponent.find(TreeViewMui);
+		let item = treeView.find(TreeItemMui).at(2);
+
+		const event = { preventDefault: sinon.spy() };
+
+		item.invoke("onLabelClick")(event);
+
+		expect(onSelectedSpy, "was not called");
+	});
+
+	it("Selection is accepted when isScopeSelectable is defined and returns true", () => {
+		const isScopeSelectableSpy = sinon.spy(() => true).named("isScopeSelectable");
+		const component = (
+			<TestWrapper provider={{ store }} memoryRouter stylesProvider muiThemeProvider={{ theme }}>
+				<ScopeTreeView
+					rootId={scopes[0].id}
+					getScope={getScope}
+					selected={scopes[1].id}
+					expanded={scopes[1].scopePath}
+					onSelected={onSelectedSpy}
+					isScopeSelectable={isScopeSelectableSpy}
+				/>
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+		let treeView = mountedComponent.find(TreeViewMui);
+		let item = treeView.find(TreeItemMui).at(2);
+
+		const event = { preventDefault: sinon.spy() };
+
+		item.invoke("onLabelClick")(event);
+
+		expect(onSelectedSpy, "to have calls satisfying", [{ args: [event, scopes[3].id] }]);
+	});
 });

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

@@ -25,8 +25,9 @@ const useStyles = makeStyles(theme => ({
 		//   },
 		// }
 	},
-	globalIconContainer: {
+	rootIconContainer: {
 		marginRight: 0,
+		display: "none",
 	},
 	scopeLabel: {
 		position: "relative",
@@ -124,10 +125,11 @@ export const ScopeLabel = ({ name, type, isRootScope, hasChildren, isVirtualScop
 	return label;
 };
 
-const TreeItem = ({ scope, rootId, onScopeSelect, children }) => {
+const TreeItem = ({ scope, rootId, onScopeSelect, isScopeSelectable, children }) => {
 	const isRootScope = scope.id === rootId;
 	const isVirtualScope = scope.type === scopeTypes.virtual;
 	const hasChildren = scope.children.length > 0;
+	const isSelectable = !isVirtualScope && (!isScopeSelectable || isScopeSelectable(scope.id));
 	const classes = useStyles({ isRootScope });
 
 	const expandIcon = <Icon id="dropdown-chevron-down" />;
@@ -135,7 +137,8 @@ const TreeItem = ({ scope, rootId, onScopeSelect, children }) => {
 
 	const onLabelClickHandler = event => {
 		event.preventDefault();
-		if (isVirtualScope === false) {
+
+		if (isSelectable) {
 			onScopeSelect(event, scope.id);
 		}
 	};
@@ -157,9 +160,9 @@ const TreeItem = ({ scope, rootId, onScopeSelect, children }) => {
 			onLabelClick={e => onLabelClickHandler(e)}
 			classes={{
 				group: classes.group,
-				iconContainer: classNames({ [classes.globalIconContainer]: isRootScope }),
-				content: classNames({ [classes.virtualScopeContent]: isVirtualScope }),
-				selected: classNames({ [classes.virtualScopeSelected]: isVirtualScope }),
+				iconContainer: classNames({ [classes.rootIconContainer]: isRootScope }),
+				content: classNames({ [classes.virtualScopeContent]: !isSelectable }),
+				selected: classNames({ [classes.virtualScopeSelected]: !isSelectable }),
 			}}
 		>
 			{children}