From fcf8d4a456f9f5efc73d018faf4e5e7aa7aad02d Mon Sep 17 00:00:00 2001 From: MariaAga Date: Tue, 1 Jul 2025 05:35:43 -0400 Subject: [PATCH] add Scalprum context wrapper --- .eslintrc | 8 +- package.json | 4 + .../common/ScalprumModule/ScalprumContext.js | 115 ++++++++++++++++++ 3 files changed, 124 insertions(+), 3 deletions(-) create mode 100644 webpack/common/ScalprumModule/ScalprumContext.js 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, +};