orc-shared 5.7.0-dev.13 → 5.7.0-dev.15

package/src/actions/scopes.js

@@ -1,6 +1,11 @@
 import { makeActionTypes } from "./makeApiAction";
 import makeOrcApiAction from "./makeOrcApiAction";
-import { getApplicationModules, getUserScopeRequest, getUserScopeTreeRequest } from "./requestsApi";
+import {
+	getApplicationModules,
+	getUserScopeRequest,
+	getUserScopeTreeRequest,
+	getScopeExtendedConfigurationRequest,
+} from "./requestsApi";
 import { overtureModule } from "../constants";
 
 export const validateOvertureApplication = () => {
@@ -60,3 +65,22 @@ export const applicationScopeHasChanged = (previousScope, newScope, moduleName)
 		},
 	};
 };
+
+export const GET_SCOPE_EXTENDED_CONFIGURATION = "GET_SCOPE_EXTENDED_CONFIGURATION";
+
+export const [
+	GET_SCOPE_EXTENDED_CONFIGURATION_REQUEST,
+	GET_SCOPE_EXTENDED_CONFIGURATION_SUCCESS,
+	GET_SCOPE_EXTENDED_CONFIGURATION_FAILURE,
+] = makeActionTypes(GET_SCOPE_EXTENDED_CONFIGURATION);
+
+export const getScopeExtendedConfiguration = scope =>
+	makeOrcApiAction(
+		GET_SCOPE_EXTENDED_CONFIGURATION,
+		getScopeExtendedConfigurationRequest.buildUrl(scope),
+		getScopeExtendedConfigurationRequest.verb,
+		{
+			bailout: false,
+			meta: { scope },
+		},
+	);

package/src/actions/scopes.test.js

@@ -12,6 +12,7 @@ import {
 	GET_APPLICATION_MODULES_REQUEST,
 	GET_APPLICATION_MODULES_SUCCESS,
 	GET_APPLICATION_MODULES_FAILURE,
+	getScopeExtendedConfiguration,
 } from "./scopes";
 
 jest.mock("../utils/buildUrl", () => {
@@ -150,3 +151,36 @@ describe("applicationScopeHasChanged", () => {
 		});
 	});
 });
+
+describe("getScopeExtendedConfiguration", () => {
+	it("creates a RSAA to fetch a scope extended configuration", () => {
+		expect(getScopeExtendedConfiguration, "when called with", ["zeScope"], "to exhaustively satisfy", {
+			[RSAA]: {
+				types: [
+					{
+						type: "GET_SCOPE_EXTENDED_CONFIGURATION_REQUEST",
+						meta: { scope: "zeScope" },
+					},
+					{
+						type: "GET_SCOPE_EXTENDED_CONFIGURATION_SUCCESS",
+						meta: { scope: "zeScope" },
+					},
+					{
+						type: "GET_SCOPE_EXTENDED_CONFIGURATION_FAILURE",
+						meta: { scope: "zeScope" },
+					},
+				],
+				endpoint: 'URL: scopes/zeScope/extendedConfiguration ""',
+				method: "GET",
+				body: undefined,
+				credentials: "include",
+				bailout: false,
+				headers: {
+					Accept: "application/json; charset=utf-8",
+					"Content-Type": "application/json",
+				},
+				options: { redirect: "follow" },
+			},
+		});
+	});
+});

package/src/buildStore.js

@@ -11,6 +11,7 @@ import localeFactory, { cultureByDefault } from "./reducers/localeFactory";
 import navigationReducer from "./reducers/navigation";
 import requestReducer from "./reducers/request";
 import scopesReducer from "./reducers/scopes";
+import scopesExtendedConfigurationReducer from "./reducers/scopesExtendedConfiguration";
 import settingsReducer from "./reducers/settings";
 import toastReducer from "./reducers/toasts";
 import viewReducer from "./reducers/view";
@@ -59,6 +60,7 @@ const buildStore = (reducers, devOptions = {}) => {
 			router: connectRouter(history),
 			requests: requestReducer,
 			scopes: scopesReducer,
+			scopesExtendedConfiguration: scopesExtendedConfigurationReducer,
 			settings: settingsReducer,
 			toasts: toastReducer,
 			versionInfo: versionInfoReducer,

package/src/components/MaterialUI/DataDisplay/PredefinedElements/InformationItem.js

@@ -77,7 +77,7 @@ const InformationItemChildren = ({
 	return <MultipleLinesText textProps={multipleLinesTextProps} children={value} tooltipClasses={tooltipClasses} />;
 };
 
-const InformationItemHeader = ({ classes, label, headerIcon }) => {
+const InformationItemHeader = ({ classes, label, headerIcon, headerIconClassName }) => {
 	const formattedLabel = typeof label === "object" ? <FormattedMessage {...label} /> : label;
 	const headerText = (formattedLabel && <Typography className={classes.title} children={formattedLabel} />) ?? null;
 
@@ -85,7 +85,7 @@ const InformationItemHeader = ({ classes, label, headerIcon }) => {
 		return (
 			<div className={classes.headerRoot}>
 				<div className={classes.headerTextContainer}>{headerText}</div>
-				<div className={classes.headerIconContainer}>{headerIcon}</div>
+				<div className={classNames(classes.headerIconContainer, headerIconClassName)}>{headerIcon}</div>
 			</div>
 		);
 	}
@@ -99,6 +99,7 @@ const InformationItem = ({
 	required,
 	error,
 	headerIcon = undefined,
+	headerIconClassName = undefined,
 	showNotAvailable = false,
 	marginTop = 0,
 	isMaxLineCountEnabled,
@@ -109,7 +110,12 @@ const InformationItem = ({
 
 	return (
 		<div className={classes.container}>
-			<InformationItemHeader classes={classes} label={label} headerIcon={headerIcon} />
+			<InformationItemHeader
+				classes={classes}
+				label={label}
+				headerIcon={headerIcon}
+				headerIconClassName={headerIconClassName}
+			/>
 			<InformationItemChildren
 				classes={classes}
 				children={children}

package/src/components/MaterialUI/DataDisplay/PredefinedElements/InformationItem.test.js

@@ -315,4 +315,33 @@ describe("Information Item", () => {
 
 		expect(component, "when mounted", "to satisfy", expected);
 	});
+
+	it("Renders Information Item properly with a header icon and custom header icon class", () => {
+		const label = "label";
+		const value = "value";
+
+		const component = (
+			<IntlProvider locale="en-US">
+				<InformationItem label={label} headerIcon={<span>the header icon</span>} headerIconClassName="CustomClass">
+					{value}
+				</InformationItem>
+			</IntlProvider>
+		);
+
+		const expected = (
+			<div>
+				<div>
+					<div>
+						<Typography children={label} />
+					</div>
+					<div className={"CustomClass"}>
+						<span>the header icon</span>
+					</div>
+				</div>
+				<MultipleLinesText>{value}</MultipleLinesText>
+			</div>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
 });

package/src/components/MaterialUI/Inputs/InputBase.js

@@ -146,12 +146,15 @@ const InputBase = ({ inputProps }) => {
 			inputAttributes.min = -2147483648;
 		}
 
+		const decimalScale = numericInputProps?.decimalScale ?? 0;
+
+		const lengthForMin = Math.trunc(inputAttributes.min).toString().length;
+		const lengthForMax = Math.trunc(inputAttributes.max).toString().length;
+
+		inputAttributes.maxLength = Math.max(lengthForMin, lengthForMax) + (decimalScale > 0 ? decimalScale + 1 : 0);
+
 		inputAttributes.isAllowed = val => {
-			return (
-				val.value === "" ||
-				val.value === "-" ||
-				(val.floatValue >= inputAttributes.min && val.floatValue <= inputAttributes.max)
-			);
+			return val.value === "" || val.value === "-" || val.value !== null;
 		};
 	}
 

package/src/components/MaterialUI/Inputs/InputBase.test.js

@@ -436,6 +436,166 @@ describe("AdvancedNumericInput", () => {
 		expect(advInput.props().decimalScale, "to be", 2);
 	});
 
+	it("Renders InputBase component as advanced numeric input without min max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 2);
+		expect(advInput.props().min, "to be", -2147483648);
+		expect(advInput.props().max, "to be", 2147483647);
+		expect(advInput.props().maxLength, "to be", 14);
+	});
+
+	it("Renders InputBase component as advanced numeric input without min", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { max: 122 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 0);
+		expect(advInput.props().min, "to be", -2147483648);
+		expect(advInput.props().max, "to be", 122);
+		expect(advInput.props().maxLength, "to be", 11);
+	});
+
+	it("Renders InputBase component as advanced numeric input without max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -9.9 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 2);
+		expect(advInput.props().min, "to be", -9.9);
+		expect(advInput.props().max, "to be", 2147483647);
+		expect(advInput.props().maxLength, "to be", 13);
+	});
+
+	it("Renders InputBase component as advanced numeric input with negative min positive max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 1 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -999.9, max: 9.8 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 1);
+		expect(advInput.props().min, "to be", -999.9);
+		expect(advInput.props().max, "to be", 9.8);
+		expect(advInput.props().maxLength, "to be", 6);
+	});
+
+	it("Renders InputBase component as advanced numeric input with negative min large positive max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 1 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -9.9, max: 99999.8 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 1);
+		expect(advInput.props().min, "to be", -9.9);
+		expect(advInput.props().max, "to be", 99999.8);
+		expect(advInput.props().maxLength, "to be", 7);
+	});
+
+	it("Renders InputBase component as advanced numeric input with negative min negative max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 3 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -99.9, max: -9.8 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 3);
+		expect(advInput.props().min, "to be", -99.9);
+		expect(advInput.props().max, "to be", -9.8);
+		expect(advInput.props().maxLength, "to be", 7);
+	});
+
+	it("Renders InputBase component as advanced numeric input with positive min positive max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 5 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: 9.9, max: 99.8 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 5);
+		expect(advInput.props().min, "to be", 9.9);
+		expect(advInput.props().max, "to be", 99.8);
+		expect(advInput.props().maxLength, "to be", 8);
+	});
+
 	it("Change advanced numeric input value", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";
@@ -686,116 +846,6 @@ describe("AdvancedNumericInput", () => {
 		// no idea what to assert here, this test is mostly for code coverage
 	});
 
-	it("Change advanced numeric input value with min value out of default bounds", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("change", { target: { value: "-3147483648", focus: noop } });
-
-		expect(update, "not to have calls satisfying", [{ args: ["-3147483648", metadata] }]);
-
-		input.simulate("change", { target: { value: "-111", focus: noop } });
-		expect(update, "to have calls satisfying", [{ args: ["-111", metadata] }]);
-	});
-
-	it("Change advanced numeric input value with min value out of specified bounds", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-		inputProps.set(InputBaseProps.propNames.inputAttributes, {
-			min: -100,
-		});
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("change", { target: { value: "-2000", focus: noop } });
-
-		expect(update, "not to have calls satisfying", [{ args: ["-2000", metadata] }]);
-
-		input.simulate("change", { target: { value: "-11", focus: noop } });
-		expect(update, "to have calls satisfying", [{ args: ["-11", metadata] }]);
-	});
-
-	it("Change advanced numeric input value with max value out of default bounds", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("change", { target: { value: "3147483648", focus: noop } });
-
-		expect(update, "not to have calls satisfying", [{ args: ["3147483648", metadata] }]);
-
-		input.simulate("change", { target: { value: "111", focus: noop } });
-		expect(update, "to have calls satisfying", [{ args: ["111", metadata] }]);
-	});
-
-	it("Change advanced numeric input value with max value out of specified bounds", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-		inputProps.set(InputBaseProps.propNames.inputAttributes, {
-			max: 100,
-		});
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("change", { target: { value: "2000", focus: noop } });
-
-		expect(update, "not to have calls satisfying", [{ args: ["2000", metadata] }]);
-
-		input.simulate("change", { target: { value: "11", focus: noop } });
-		expect(update, "to have calls satisfying", [{ args: ["11", metadata] }]);
-	});
-
 	it("Change advanced numeric input value: dash is allowed", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";

package/src/components/Provision.js

@@ -11,6 +11,7 @@ import Head from "./Head";
 import I18n from "./I18n";
 import InternetExplorerWarningMessage from "./InternetExplorerWarningMessage";
 import Culture from "./Culture";
+import ScopeExtendedConfigurationLoader from "./ScopeExtendedConfigurationLoader";
 
 const GlobalStyle = createGlobalStyle`
 	html {
@@ -53,6 +54,7 @@ const Provision = ({ store, theme = {}, muiTheme, children }) => {
 											<InternetExplorerWarningMessage />
 										</I18n>
 									</DevPages>
+									<ScopeExtendedConfigurationLoader />
 								</React.Fragment>
 							</Authenticate>
 						</React.Fragment>

package/src/components/Provision.test.js

@@ -54,6 +54,13 @@ const fakeStore = {
 				loadedModulesScope: ["moduleA", "moduleB"],
 				modules: ["moduleA", "moduleB"],
 			},
+			navigation: {
+				route: {
+					match: { path: "/:scope/TheModuleName/:entityId", params: { scope: "TheOldScope", entityId: "loaderId" } },
+				},
+				moduleTabs: {},
+				config: { prependPath: "/:scope/", prependHref: "/Scope1/" },
+			},
 		}),
 	replaceReducer: () => {},
 };

package/src/components/ScopeExtendedConfigurationLoader.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import useScopeData from "./Scope/useScopeData";
+import { useDispatch } from "react-redux";
+import { getScopeExtendedConfiguration } from "../actions/scopes";
+
+const ScopeExtendedConfigurationLoader = () => {
+	const [currentScope] = useScopeData();
+	const dispatch = useDispatch();
+
+	const [localScopeValue, setLocalScopeValue] = useState();
+
+	useEffect(() => {
+		if (currentScope.id !== localScopeValue) {
+			setLocalScopeValue(currentScope.id);
+			dispatch(getScopeExtendedConfiguration(currentScope.id));
+		}
+	}, [currentScope.id, dispatch, localScopeValue]);
+
+	return null;
+};
+
+export default ScopeExtendedConfigurationLoader;

package/src/components/ScopeExtendedConfigurationLoader.test.js

@@ -0,0 +1,71 @@
+import React from "react";
+import Immutable from "immutable";
+import { Provider } from "react-redux";
+import { ThemeProvider } from "styled-components";
+import ScopeExtendedConfigurationLoader from "./ScopeExtendedConfigurationLoader";
+import { mount } from "enzyme";
+import { getScopeExtendedConfiguration } from "../actions/scopes";
+import sinon from "sinon";
+
+jest.mock("../utils/buildUrl", () => {
+	const modExport = {};
+	modExport.loadConfig = () => Promise.resolve({});
+	modExport.buildUrl = (path = [], params = "") => "URL: " + path.join("/") + " " + JSON.stringify(params);
+	return modExport;
+});
+
+describe("ScopeExtendedConfigurationLoader", () => {
+	let state, store;
+
+	beforeEach(() => {
+		state = Immutable.fromJS({
+			locale: {
+				locale: "en-US",
+			},
+			authentication: {
+				name: "foo@bar.com",
+			},
+			requests: {},
+			scopes: {
+				TheOldScope: {
+					id: "TheOldScope",
+					name: { "en-CA": "Test 1", "en-US": "TheOldScope" },
+					children: ["test2"],
+				},
+			},
+			settings: {
+				defaultScope: "aDefaultScope",
+				loadedModulesScope: ["moduleA", "moduleB"],
+				modules: ["moduleA", "moduleB"],
+			},
+			navigation: {
+				route: {
+					match: { path: "/:scope/TheModuleName/:entityId", params: { scope: "TheOldScope", entityId: "loaderId" } },
+				},
+				moduleTabs: {},
+				config: { prependPath: "/:scope/", prependHref: "/Scope1/" },
+			},
+		});
+		store = state => ({
+			subscribe: () => {},
+			getState: () => state,
+			dispatch: sinon.spy().named("dispatch"),
+		});
+	});
+
+	it("dispatch request to get extended configuration", () => {
+		const theStore = store(state);
+
+		const component = (
+			<Provider store={theStore}>
+				<ThemeProvider theme={{}}>
+					<ScopeExtendedConfigurationLoader />
+				</ThemeProvider>
+			</Provider>
+		);
+
+		mount(component);
+
+		expect(theStore.dispatch, "to have calls satisfying", [{ args: [getScopeExtendedConfiguration("TheOldScope")] }]);
+	});
+});

package/src/content/icons/orckestra-icon.svg

@@ -1,5 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260" viewBox="0 0 260 260">
-	<path d="M1.11,125.62C1.11,74.94,40.22,39,93.72,39S186,74.94,186,125.62s-38.79,86.66-92.29,86.66S1.11,176.3,1.11,125.62Zm135.47,0c0-29.1-18.46-46.62-42.86-46.62S50.54,96.52,50.54,125.62s18.77,46.62,43.18,46.62S136.58,154.72,136.58,125.62Z" fill="#000000"/>
-	<circle id="ac06531b-599d-4b05-a30e-b1c94e55ddff" data-name="fullLogo" cx="227.6" cy="181.13" r="31.29" fill="#000000" opacity="0.33"/>
-	<circle id="af2ef0cf-5c47-4a93-b3be-f4e8ec48b016" data-name="fullLogo" cx="227.6" cy="181.13" r="31.29" fill="#e00600"/>
-</svg>
+<svg width="354" height="354" viewBox="0 0 354 354" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_2_1387)">
+		<path d="M0 241.41C0 175.92 50.53 129.43 119.66 129.43C188.79 129.43 238.91 175.92 238.91 241.41C238.91 306.9 188.78 353.38 119.66 353.38C50.54 353.38 0 306.9 0 241.41ZM175.04 241.41C175.04 203.81 151.19 181.18 119.66 181.18C88.13 181.18 63.87 203.82 63.87 241.41C63.87 279 88.13 301.64 119.66 301.64C151.19 301.64 175.04 279 175.04 241.41Z" fill="black"/>
+		<path d="M353.14 165.06H275.66C275.66 116.77 236.37 77.48 188.08 77.48V0C279.1 0 353.15 74.05 353.15 165.06H353.14Z" fill="#E00600"/>
+	</g>
+	<defs>
+		<clipPath id="clip0_2_1387">
+			<rect width="353.14" height="353.38" fill="white"/>
+		</clipPath>
+	</defs>
+</svg>

package/src/reducers/scopesExtendedConfiguration.js

@@ -0,0 +1,16 @@
+import Immutable from "immutable";
+import { GET_SCOPE_EXTENDED_CONFIGURATION_SUCCESS } from "../actions/scopes";
+
+const initialState = Immutable.fromJS({});
+
+const scopesExtendedConfigurationReducer = (state = initialState, action) => {
+	switch (action.type) {
+		case GET_SCOPE_EXTENDED_CONFIGURATION_SUCCESS: {
+			return state.set(action.meta.scope, Immutable.fromJS(action.payload));
+		}
+		default:
+			return state;
+	}
+};
+
+export default scopesExtendedConfigurationReducer;

package/src/reducers/scopesExtendedConfiguration.test.js

@@ -0,0 +1,31 @@
+import Immutable from "immutable";
+import { GET_SCOPE_EXTENDED_CONFIGURATION_SUCCESS } from "../actions/scopes";
+import reducer from "./scopesExtendedConfiguration";
+
+describe("scopesExtendedConfiguration", () => {
+	it("behaves as a reducer should", () => expect(reducer, "to be a reducer with initial state", {}));
+
+	it("save scope info to store", () => {
+		const oldState = Immutable.Map({
+			TheScope: { extConfig: 789 },
+			anotherScope: { extConfig: 456 },
+		});
+		const action = {
+			type: GET_SCOPE_EXTENDED_CONFIGURATION_SUCCESS,
+			meta: {
+				scope: "TheScope",
+			},
+			payload: {
+				extConfig: 123,
+			},
+		};
+		const newState = reducer(oldState, action);
+		return expect(newState, "not to be", oldState).and(
+			"to satisfy",
+			Immutable.fromJS({
+				TheScope: { extConfig: 123 },
+				anotherScope: { extConfig: 456 },
+			}),
+		);
+	});
+});