diff --git a/.eslintrc b/.eslintrc
index a632094ee..10e128828 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -14,6 +14,7 @@
"advisor",
"ansible",
"camelcase",
+ "cdn",
"checkbox",
"csrf",
"dropdown",
@@ -22,6 +23,7 @@
"href",
"ips",
"ipv4",
+ "dropdown",
"jed",
"katello",
"knowledgebase",
@@ -30,15 +32,15 @@
"nowrap",
"pid",
"redhat",
+ "redux",
"remediate",
"remediations",
"repo",
"rhc",
+ "scalprum",
"theforeman",
"tooltip",
- "unmount",
- "redux",
- "dropdown"
+ "unmount"
],
"minLength": 3
}
diff --git a/package.json b/package.json
index 82e7477fa..a1b55e766 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,10 @@
"peerDependencies": {
"@theforeman/vendor": ">= 15.0.1"
},
+ "dependencies": {
+ "@scalprum/react-core": "^0.9.3",
+ "@scalprum/core": "^0.8.1"
+ },
"devDependencies": {
"@babel/core": "^7.7.0",
"@theforeman/builder": ">= 15.0.1",
diff --git a/webpack/common/ScalprumModule/ScalprumContext.js b/webpack/common/ScalprumModule/ScalprumContext.js
new file mode 100644
index 000000000..80fcec3a1
--- /dev/null
+++ b/webpack/common/ScalprumModule/ScalprumContext.js
@@ -0,0 +1,115 @@
+import React, { useState, createContext, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { ScalprumProvider } from '@scalprum/react-core';
+
+export const ScalprumContext = createContext(null);
+
+/*
+Wrap your component with ScalprumContextWrapper:
+
+
+
+inside the WrappedComponent (not the component that loads the wrapper), use useEffect and setConfig:
+ const { config, setConfig } = React.useContext(ScalprumContext);
+ const path = 'apps/landing'
+ const scope = 'landing'
+ const module = './AnsibleWidget'
+ const newConfig = {
+ [scope]: {
+ name: scope,
+ manifestLocation: `${window.location.origin}/scalprum/${cdnPath}/fed-mods.json`,
+ cdnPath: `${window.location.origin}/scalprum/${cdnPath}/`,
+ },
+ };
+ useEffect(() => {
+ setConfig(newConfig)
+ },[])
+
+ Load ScalprumComponent conditionally to the config being set
+ {config[scope] && (
+
+ )}
+*/
+
+export const ScalprumContextWrapper = ({ children }) => {
+ const [config, setConfig] = useState({});
+ const contextData = {
+ config,
+ setConfig: useCallback(
+ newConfig => setConfig(prev => ({ ...prev, ...newConfig })),
+ []
+ ),
+ };
+
+ const mockUser = {
+ entitlements: {},
+ identity: {
+ account_number: 'string',
+ org_id: 'string',
+ internal: {
+ org_id: 'string',
+ account_id: 'string',
+ },
+ type: 'string',
+ user: {
+ username: 'string',
+ email: 'string',
+ first_name: 'string',
+ last_name: 'string',
+ is_active: 'boolean',
+ is_internal: 'boolean',
+ is_org_admin: 'boolean',
+ locale: 'string',
+ },
+ },
+ };
+ if (Object.keys(config).length)
+ return (
+
+ {
+ if (
+ manifest.baseURL === 'auto' &&
+ config[manifest.name]?.cdnPath
+ ) {
+ const _cdnPath = config[manifest.name]?.cdnPath;
+ return {
+ ...manifest,
+ baseURL: _cdnPath,
+ loadScripts: manifest.loadScripts.map(
+ script => `${_cdnPath}${script}`
+ ),
+ };
+ }
+ return manifest;
+ },
+ },
+ }}
+ api={{
+ chrome: {
+ isBeta: () => false,
+ on: () => {},
+ auth: {
+ getUser: () => Promise.resolve(mockUser),
+ },
+ },
+ }}
+ config={config}
+ >
+ {children}
+
+
+ );
+
+ return (
+
+ {children}
+
+ );
+};
+
+ScalprumContextWrapper.propTypes = {
+ children: PropTypes.node.isRequired,
+};