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

package/dist/components/AppFrame/AppFrame.js

@@ -165,7 +165,17 @@ var AppFrame = function AppFrame(_ref) {
   }, [needLogin]);
   (0, _react.useEffect)(function () {
     document.title = (currentApplication == null ? void 0 : currentApplication.displayName) || applicationId;
-  }, [currentApplication, applicationId]);
+  }, [currentApplication, applicationId]); // Extract only what's needed for the SideBar and its menuItems
+
+  var menuItemFromModules = (0, _react.useMemo)(function () {
+    return (modules != null ? modules : []).map(function (item) {
+      return {
+        id: item.id,
+        label: item.label,
+        icon: item.icon
+      };
+    });
+  }, [modules]);
 
   var _useViewState = (0, _useViewState3.default)(_Preferences.PREFS_NAME),
       _useViewState2 = _slicedToArray(_useViewState, 1),
@@ -191,7 +201,7 @@ var AppFrame = function AppFrame(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_Sidebar.default, {
     open: open,
     toggle: toggle,
-    modules: modules,
+    modules: menuItemFromModules,
     activeModules: activeModules
   }), /*#__PURE__*/_react.default.createElement(ViewPort, {
     open: open,
@@ -201,11 +211,11 @@ var AppFrame = function AppFrame(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_loadingScreen.default, null), /*#__PURE__*/_react.default.createElement(_Preferences.default, null));
 };
 
-__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseViewState{[prefViewState]}", function () {
+__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}\nuseViewState{[prefViewState]}", function () {
   return [_reactIntl.useIntl, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useToggle3.default, _useLoader.default, _useViewState3.default];
 });
 
-__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseViewState{[prefViewState]}", function () {
+__signature__(AppFrame, "useIntl{{ formatMessage }}\nuseSelector{locale}\nuseSelector{needLogin}\nuseSelector{}\nuseSelector{moduleName}\nuseApplicationHelpUrl{[helpUrl]}\nuseLoader{}\nuseToggle{[open, toggle, reset]}\nuseLoader{}\nuseState{[doesApplicationNeedRefresh, setDoesApplicationNeedRefresh](false)}\nuseEffect{}\nuseEffect{}\nuseMemo{menuItemFromModules}\nuseViewState{[prefViewState]}", function () {
   return [_reactIntl.useIntl, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _reactRedux.useSelector, _useApplicationHelpUrl.default, _useLoader.default, _useToggle3.default, _useLoader.default, _useViewState3.default];
 });
 

package/dist/components/AppFrame/MenuItem.js

@@ -20,7 +20,7 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _templateObject;
 
 var _excluded = ["menuToggle", "staticContext", "dispatch", "active", "component"],
-    _excluded2 = ["open", "label", "icon", "alert", "pageScopeSelector", "closingTabHandler", "hide", "isHidden", "href"];
+    _excluded2 = ["open", "label", "icon", "alert", "isHidden", "href"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -134,9 +134,6 @@ var MenuItem = function MenuItem(_ref5) {
       label = _ref5$label === void 0 ? "" : _ref5$label,
       icon = _ref5.icon,
       alert = _ref5.alert,
-      pageScopeSelector = _ref5.pageScopeSelector,
-      closingTabHandler = _ref5.closingTabHandler,
-      hide = _ref5.hide,
       _ref5$isHidden = _ref5.isHidden,
       isHidden = _ref5$isHidden === void 0 ? false : _ref5$isHidden,
       href = _ref5.href,

package/dist/components/Routing/FullPage.js

@@ -35,8 +35,11 @@ var FullPage = function FullPage(_ref) {
       location = _ref.location,
       match = _ref.match,
       modulePrependPath = _ref.modulePrependPath,
-      isVisible = _ref.isVisible;
+      _ref$isVisible = _ref.isVisible,
+      isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
   var component = config.component,
+      _config$routerCompone = config.routerComponent,
+      routerComponent = _config$routerCompone === void 0 ? null : _config$routerCompone,
       componentProps = config.componentProps,
       _config$pages = config.pages,
       pages = _config$pages === void 0 ? {} : _config$pages,
@@ -59,12 +62,12 @@ var FullPage = function FullPage(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_Page.default, {
     path: path,
-    component: component,
+    component: component != null ? component : routerComponent,
     pages: pages,
     subpages: subpages,
     location: location,
     match: match,
-    isVisible: isVisible,
+    isVisible: isVisible === true || routerComponent != null,
     modulePrependPath: modulePrependPath
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "1.2.0-dev.13",
+	"version": "1.2.0-dev.14",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/AppFrame/AppFrame.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useIntl } from "react-intl";
 import pt from "prop-types";
 import styled, { css } from "styled-components";
@@ -89,6 +89,17 @@ const AppFrame = ({ initOpen, applicationId, modules, activeModules, children, n
 		document.title = currentApplication?.displayName || applicationId;
 	}, [currentApplication, applicationId]);
 
+	// Extract only what's needed for the SideBar and its menuItems
+	const menuItemFromModules = useMemo(
+		() =>
+			(modules ?? []).map(item => ({
+				id: item.id,
+				label: item.label,
+				icon: item.icon,
+			})),
+		[modules],
+	);
+
 	const [prefViewState] = useViewState(PREFS_NAME);
 
 	return (
@@ -109,7 +120,7 @@ const AppFrame = ({ initOpen, applicationId, modules, activeModules, children, n
 				}}
 				onClick={reset}
 			/>
-			<Sidebar {...{ open, toggle, modules, activeModules }} />
+			<Sidebar {...{ open, toggle, modules: menuItemFromModules, activeModules }} />
 			<ViewPort open={open} onClick={reset}>
 				{noScope && !forceShowScope.includes(moduleName) ? (
 					<React.Fragment>

package/src/components/AppFrame/AppFrame.test.js

@@ -294,6 +294,59 @@ describe("AppFrame", () => {
 		expect(document.title, "to equal", "Marketing Legacy");
 	});
 
+	it("renders a viewport with scope selector, top bar and sidebar with undefined modules", () => {
+		props.modules = undefined;
+		props.children = [<TestComp1 key="1" />, <TestComp2 key="2" />, <TestComp3 key="3" />];
+		expect(
+			<Provider store={store}>
+				<MemoryRouter initialEntries={["/Foo/bar"]}>
+					<ThemeProvider theme={{}}>
+						<I18n>
+							<AppFrame {...props} />
+						</I18n>
+					</ThemeProvider>
+				</MemoryRouter>
+			</Provider>,
+			"when mounted",
+			"to satisfy",
+			<Provider store={store}>
+				<ThemeProvider theme={{}}>
+					<MemoryRouter initialEntries={["/Foo/bar"]}>
+						<Base>
+							<Wrapper>
+								<AppBox>
+									<ApplicationSelector {...props} />
+									<AppLabel>
+										<AppLogo />
+										Marketing Legacy
+									</AppLabel>
+								</AppBox>
+								<MenuWrapper>
+									<Ignore />
+								</MenuWrapper>
+								<HelpLink>Help</HelpLink>
+							</Wrapper>
+							<SideBar>
+								<MenuToggle />
+								<Logo />
+							</SideBar>
+							<ViewPort>
+								<ScopeBar name="Test 1" />
+								<TestComp1 key="1" />
+								<TestComp2 key="2" />
+								<TestComp3 key="3" />
+							</ViewPort>
+							<About messages={props.aboutMessages} />
+							<LoadingScreen />
+						</Base>
+					</MemoryRouter>
+				</ThemeProvider>
+			</Provider>,
+		);
+
+		expect(document.title, "to equal", "Marketing Legacy");
+	});
+
 	it("renders a viewport with scope selector, top bar and sidebar when no current application", () => {
 		props.modules = [
 			{ id: "test1", component: TestComp1, route: "/test1" },

package/src/components/AppFrame/MenuItem.js

@@ -116,18 +116,7 @@ export const Label = styled.span`
 	opacity: ${ifFlag("show", 1, 0)};
 `;
 
-const MenuItem = ({
-	open = false,
-	label = "",
-	icon,
-	alert,
-	pageScopeSelector,
-	closingTabHandler,
-	hide, // This props is not used in the component, but we need to destructure it so props can be used in ItemWrapper
-	isHidden = false,
-	href,
-	...props
-}) => {
+const MenuItem = ({ open = false, label = "", icon, alert, isHidden = false, href, ...props }) => {
 	let ItemWrapper = Block;
 	if (props.menuToggle) {
 		ItemWrapper = BlockWithA;

package/src/components/Routing/FullPage.js

@@ -2,8 +2,16 @@ import React from "react";
 import Page from "./Page";
 import SegmentPage from "./SegmentPage";
 
-const FullPage = ({ path, config, location, match, modulePrependPath, isVisible }) => {
-	const { component, componentProps, pages = {}, segments, subpages, entityIdResolver } = config;
+const FullPage = ({ path, config, location, match, modulePrependPath, isVisible = true }) => {
+	const {
+		component,
+		routerComponent = null,
+		componentProps,
+		pages = {},
+		segments,
+		subpages,
+		entityIdResolver,
+	} = config;
 	if (segments) {
 		return (
 			<SegmentPage
@@ -21,12 +29,12 @@ const FullPage = ({ path, config, location, match, modulePrependPath, isVisible
 	return (
 		<Page
 			path={path}
-			component={component}
+			component={component ?? routerComponent}
 			pages={pages}
 			subpages={subpages}
 			location={location}
 			match={match}
-			isVisible={isVisible}
+			isVisible={isVisible === true || routerComponent != null}
 			modulePrependPath={modulePrependPath}
 		/>
 	);

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

@@ -86,6 +86,30 @@ describe("Fullpage", () => {
 			<View2 />,
 		));
 
+	it("shows a page when there is a router component no matter how visible is set", () =>
+		expect(
+			<TestWrapper
+				provider={{ store }}
+				memoryRouter={{ initialEntries: ["/meep/snap/stuff"] }}
+				stylesProvider
+				muiThemeProvider={{ theme }}
+			>
+				<FullPage
+					path="/meep/snap"
+					config={{
+						routerComponent: View1,
+						pages: { "/stuff": { component: View2 } },
+					}}
+					location={{ location: true }}
+					match={{ match: true }}
+					isVisible={false}
+				/>
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<View2 />,
+		));
+
 	it("does not show a page when not visible", () =>
 		expect(
 			<TestWrapper