diff --git a/.eslintrc.js b/.eslintrc.js
index 67904ec5..08946579 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,7 +5,7 @@ const config = require('./tools/eslint/.eslintrc.js');
module.exports = merge(config, {
ignorePatterns: [
- 'test-app',
+ 'test-project',
'docs',
'.eslintrc.js',
'frontend-base.d.ts',
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index d6dc3a46..dc17a3b3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -26,7 +26,7 @@ jobs:
npm run build
npm pack
mv openedx-frontend-base* openedx-frontend-base.tgz
- cd test-app
+ cd test-project
npm i ../openedx-frontend-base.tgz
npm ci
- name: Lint
diff --git a/README.md b/README.md
index cef1e9dd..189a84ca 100644
--- a/README.md
+++ b/README.md
@@ -343,7 +343,7 @@ Description fields are now required on all i18n messages in the repository. Thi
### 12. SVGR "ReactComponent" imports have been removed.
-We have removed the `@svgr/webpack` loader because it was incompatible with more modern tooling (it requires Babel). As a result, the ability to import SVG files into JS as the `ReactComponent` export no longer works. We know of a total of 5 places where this is happening today in Open edX MFEs - frontend-app-learning and frontend-app-profile use it. Please replace that export with the default URL export and set the URL as the source of an `` tag, rather than using `ReactComponent`. You can see an example of normal SVG imports in `test-app/src/App.jsx`.
+We have removed the `@svgr/webpack` loader because it was incompatible with more modern tooling (it requires Babel). As a result, the ability to import SVG files into JS as the `ReactComponent` export no longer works. We know of a total of 5 places where this is happening today in Open edX MFEs - frontend-app-learning and frontend-app-profile use it. Please replace that export with the default URL export and set the URL as the source of an `` tag, rather than using `ReactComponent`. You can see an example of normal SVG imports in `test-project/src/ExamplePage.tsx`.
### 13. Import `createConfig` and `getBaseConfig` from `@openedx/frontend-base/config`
@@ -422,7 +422,7 @@ You must then import this new stylesheet into your `site.config` file:
```diff
+ import './project.scss';
-const config: SiteConfig = {
+const config: ProjectSiteConfig = {
// config document
}
@@ -443,6 +443,15 @@ Then work through the conflicts and use a merge commit to add the history into t
Then move the files out of the way (move src to some other sub-dir, mostly) to make room for the next repo.
+### Latest repository merges
+
+- frontend-component-header - Up to date as of 9/12/2024
+- frontend-component-footer - Up to date as of 9/12/2024
+- frontend-build - Up to date as of 9/12/2024
+
+- frontend-platform - Up to date as of 9/13/2024
+- frontend-plugin-framework - Up to date as of 9/13/2024
+
# Other notable changes
- Cease using `AUTHN_MINIMAL_HEADER`, replace it with an actual minimal header.
diff --git a/example-plugin-app/package-lock.json b/example-plugin-app/package-lock.json
index ae3d9517..309e59d7 100644
--- a/example-plugin-app/package-lock.json
+++ b/example-plugin-app/package-lock.json
@@ -3026,9 +3026,10 @@
"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
},
"node_modules/@remix-run/router": {
- "version": "1.16.0",
- "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
- "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
+ "version": "1.19.0",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
+ "integrity": "sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA==",
+ "license": "MIT",
"engines": {
"node": ">=14.0.0"
}
@@ -12540,11 +12541,12 @@
}
},
"node_modules/react-router": {
- "version": "6.23.0",
- "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
- "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+ "version": "6.26.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz",
+ "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==",
+ "license": "MIT",
"dependencies": {
- "@remix-run/router": "1.16.0"
+ "@remix-run/router": "1.19.0"
},
"engines": {
"node": ">=14.0.0"
@@ -12554,12 +12556,13 @@
}
},
"node_modules/react-router-dom": {
- "version": "6.23.0",
- "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
- "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+ "version": "6.26.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.0.tgz",
+ "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==",
+ "license": "MIT",
"dependencies": {
- "@remix-run/router": "1.16.0",
- "react-router": "6.23.0"
+ "@remix-run/router": "1.19.0",
+ "react-router": "6.26.0"
},
"engines": {
"node": ">=14.0.0"
diff --git a/example-plugin-app/src/DefaultIframe.jsx b/example-plugin-app/src/DefaultIframe.jsx
index 2f338acd..60b3d306 100644
--- a/example-plugin-app/src/DefaultIframe.jsx
+++ b/example-plugin-app/src/DefaultIframe.jsx
@@ -6,7 +6,7 @@ import { Plugin } from '@openedx/frontend-plugin-framework';
function DefaultComponent() {
return (
-
Default iFrame Widget
+
Default iFrame Widget
This is a component that lives in the example-plugins-app and is provided in this host MFE via iFrame.
@@ -17,7 +17,7 @@ function DefaultComponent() {
function ErrorFallback(error) {
return (
-
+
Oops! An error occurred. Please refresh the screen to try again.
- This page is here to help test the plugins module. A plugin configuration can be added in
- index.jsx and this page will display that plugin.
-
-
- To do this, a plugin MFE must be running on some other port.
- To make it a more realistic test, you may also want to edit your
- /etc/hosts file (or your system's equivalent) to provide an alternate domain for
- 127.0.0.1 at which you can load the plugin.
-
+
)
}
diff --git a/test-app/src/Image.tsx b/test-project/src/Image.tsx
similarity index 100%
rename from test-app/src/Image.tsx
rename to test-project/src/Image.tsx
diff --git a/test-project/src/ParagonPreview.jsx b/test-project/src/ParagonPreview.jsx
new file mode 100644
index 00000000..9d01fdec
--- /dev/null
+++ b/test-project/src/ParagonPreview.jsx
@@ -0,0 +1,66 @@
+import { Button, Stack } from '@openedx/paragon';
+
+const ParagonPreview = () => {
+ if (!PARAGON_THEME) {
+ return
Missing PARAGON_THEME global variable. Depending on configuration, this may be OK.
;
+ }
+ return (
+ <>
+
Paragon
+
+
+
+
Component preview
+
+
+
+
+
+
Exposed theme CSS files
+
+
+ Note: Depending on the versions of @openedx/paragon and/or @edx/brand installed,
+ it is expected that no exposed theme CSS assets be listed here.
+
+
+ This page is here to help test the plugins module. A plugin configuration can be added in
+ index.jsx and this page will display that plugin.
+
+
+ To do this, a plugin MFE must be running on some other port.
+ To make it a more realistic test, you may also want to edit your
+ /etc/hosts file (or your system's equivalent) to provide an alternate domain for
+ 127.0.0.1 at which you can load the plugin.
+
+
+ {pluginExamples.map(({ Component, id, label }) => )}
+
+
+
+
+
+
+ );
+}
diff --git a/test-app/src/apple.jpg b/test-project/src/apple.jpg
similarity index 100%
rename from test-app/src/apple.jpg
rename to test-project/src/apple.jpg
diff --git a/test-app/src/apple.svg b/test-project/src/apple.svg
similarity index 100%
rename from test-app/src/apple.svg
rename to test-project/src/apple.svg
diff --git a/example/src/components/DefaultDirectWidget.jsx b/test-project/src/components/DefaultDirectWidget.jsx
similarity index 87%
rename from example/src/components/DefaultDirectWidget.jsx
rename to test-project/src/components/DefaultDirectWidget.jsx
index 80b760d4..2ef6bcaa 100644
--- a/example/src/components/DefaultDirectWidget.jsx
+++ b/test-project/src/components/DefaultDirectWidget.jsx
@@ -1,9 +1,7 @@
-import React from 'react';
-
export default function DefaultDirectWidget() {
return (
-
Default Direct Widget
+
Default Direct Widget
This widget is a default component that lives in the example app and is directly inserted via JS configuration.
Note that this default widget appears after the Inserted Direct Plugin. This is because this component's
diff --git a/example/src/components/ModularComponent.jsx b/test-project/src/components/ModularComponent.jsx
similarity index 87%
rename from example/src/components/ModularComponent.jsx
rename to test-project/src/components/ModularComponent.jsx
index a40543e3..4be94175 100644
--- a/example/src/components/ModularComponent.jsx
+++ b/test-project/src/components/ModularComponent.jsx
@@ -1,14 +1,13 @@
-import React from 'react';
import PropTypes from 'prop-types';
export default function ModularComponent({ content }) {
return (
-
{ content.title }
+
{content.title}
This is a modular component that lives in the example app.
-
+
{content.uniqueText}
diff --git a/example/src/components/PluginDirect.jsx b/test-project/src/components/PluginDirect.jsx
similarity index 71%
rename from example/src/components/PluginDirect.jsx
rename to test-project/src/components/PluginDirect.jsx
index 0f484530..bee624f7 100644
--- a/example/src/components/PluginDirect.jsx
+++ b/test-project/src/components/PluginDirect.jsx
@@ -1,13 +1,11 @@
-import React from 'react';
-
export default function PluginDirect() {
return (
-
Inserted Direct Plugin
+
Inserted Direct Plugin
This plugin is a component that lives in the example app and is directly inserted via JS configuration.
What makes this unique is that it isn't part of the default content defined for this slot, but is instead
- inserted as a plugin slot change "PLUGIN_OPERATIONS.Insert".
+ inserted as a plugin slot change "PluginOperations.INSERT".
);
diff --git a/test-app/src/i18n/README.md b/test-project/src/i18n/README.md
similarity index 100%
rename from test-app/src/i18n/README.md
rename to test-project/src/i18n/README.md
diff --git a/test-app/src/i18n/messages/frontend-app-sample/ar.json b/test-project/src/i18n/messages/frontend-app-sample/ar.json
similarity index 100%
rename from test-app/src/i18n/messages/frontend-app-sample/ar.json
rename to test-project/src/i18n/messages/frontend-app-sample/ar.json
diff --git a/test-app/src/i18n/messages/frontend-app-sample/eo.json b/test-project/src/i18n/messages/frontend-app-sample/eo.json
similarity index 100%
rename from test-app/src/i18n/messages/frontend-app-sample/eo.json
rename to test-project/src/i18n/messages/frontend-app-sample/eo.json
diff --git a/test-app/src/i18n/messages/frontend-app-sample/es_419.json b/test-project/src/i18n/messages/frontend-app-sample/es_419.json
similarity index 100%
rename from test-app/src/i18n/messages/frontend-app-sample/es_419.json
rename to test-project/src/i18n/messages/frontend-app-sample/es_419.json
diff --git a/test-app/src/i18n/messages/frontend-component-emptylangs/ar.json b/test-project/src/i18n/messages/frontend-component-emptylangs/ar.json
similarity index 100%
rename from test-app/src/i18n/messages/frontend-component-emptylangs/ar.json
rename to test-project/src/i18n/messages/frontend-component-emptylangs/ar.json
diff --git a/test-app/src/i18n/messages/frontend-component-nolangs/.gitignore b/test-project/src/i18n/messages/frontend-component-nolangs/.gitignore
similarity index 100%
rename from test-app/src/i18n/messages/frontend-component-nolangs/.gitignore
rename to test-project/src/i18n/messages/frontend-component-nolangs/.gitignore
diff --git a/test-app/src/i18n/messages/frontend-component-singlelang/ar.json b/test-project/src/i18n/messages/frontend-component-singlelang/ar.json
similarity index 100%
rename from test-app/src/i18n/messages/frontend-component-singlelang/ar.json
rename to test-project/src/i18n/messages/frontend-component-singlelang/ar.json
diff --git a/test-project/src/index.tsx b/test-project/src/index.tsx
new file mode 100644
index 00000000..90ff1e71
--- /dev/null
+++ b/test-project/src/index.tsx
@@ -0,0 +1,3 @@
+export { default as AuthenticatedPage } from './AuthenticatedPage';
+export { default as ExamplePage } from './ExamplePage';
+export { default as PluginPage } from './PluginPage';
diff --git a/test-app/src/messages.js b/test-project/src/messages.js
similarity index 81%
rename from test-app/src/messages.js
rename to test-project/src/messages.js
index ed16302c..eb46b428 100644
--- a/test-app/src/messages.js
+++ b/test-project/src/messages.js
@@ -1,8 +1,8 @@
import { defineMessages } from '@openedx/frontend-base';
const messages = defineMessages({
- 'test-app.message': {
- id: 'test-app.message',
+ 'test-project.message': {
+ id: 'test-project.message',
defaultMessage: 'This message proves that i18n is working.',
description: 'A message that proves that internationalization is working.',
},
diff --git a/example/src/pluginSlots/PluginSlotWithInsert.jsx b/test-project/src/pluginSlots/PluginSlotWithInsert.jsx
similarity index 70%
rename from example/src/pluginSlots/PluginSlotWithInsert.jsx
rename to test-project/src/pluginSlots/PluginSlotWithInsert.jsx
index d09c9ea2..803e6129 100644
--- a/example/src/pluginSlots/PluginSlotWithInsert.jsx
+++ b/test-project/src/pluginSlots/PluginSlotWithInsert.jsx
@@ -1,16 +1,14 @@
-import React from 'react';
+import { PluginSlot } from '@openedx/frontend-base';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-
-function PluginSlotWithInsert() {
+function PluginSlotWithInsert({ id, label }) {
return (
-
+ The following PluginSlot examples demonstrate the PluginOperations.MODIFY operation, when
+ the widgetId is default_contents. Any configured, custom plugin content may be
+ merged with any existing props passed to the component(s) represented by default_contents.
+
+
+
+
+
Basic
+
+
+
+
+
+
Advanced
+
When adding custom props to default_contents, there may be special cases regarding how custom props are merged with existing props, including:
+
+
Custom className overrides are concatenated with the className prop passed to the default_contents component(s), if any.
+
Custom style overrides are shallow merged with the style prop passed to the default_contents component(s), if any.
+
Custom event handlers (e.g., onClick) are executed in sequence, after any event handlers passed to the default_contents component(s), if any.
+ );
+}
+
+export default PluginSlotWithModifyDefaultContents;
diff --git a/example/src/pluginSlots/PluginSlotWithModifyWrapHide.jsx b/test-project/src/pluginSlots/PluginSlotWithModifyWrapHide.jsx
similarity index 57%
rename from example/src/pluginSlots/PluginSlotWithModifyWrapHide.jsx
rename to test-project/src/pluginSlots/PluginSlotWithModifyWrapHide.jsx
index c4772fd3..a2f7d6ca 100644
--- a/example/src/pluginSlots/PluginSlotWithModifyWrapHide.jsx
+++ b/test-project/src/pluginSlots/PluginSlotWithModifyWrapHide.jsx
@@ -1,22 +1,19 @@
-import React from 'react';
-
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { PluginSlot } from '@openedx/frontend-base';
import ModularComponent from '../components/ModularComponent';
-
-function PluginSlotWithModifyWrapHide() {
+function PluginSlotWithModifyWrapHide({ id, label }) {
const content = {
title: 'Default Content',
uniqueText: "Because this modular component is default content, this text is passed in as a prop within PluginSlot."
}
return (
-
-
Plugin Operation: Modify, Wrap, and Hide
+
+
{label}
-
+
);
diff --git a/example/src/pluginSlots/PluginSlotWithModularPlugins.jsx b/test-project/src/pluginSlots/PluginSlotWithModularPlugins.jsx
similarity index 63%
rename from example/src/pluginSlots/PluginSlotWithModularPlugins.jsx
rename to test-project/src/pluginSlots/PluginSlotWithModularPlugins.jsx
index 5a069294..63ab299a 100644
--- a/example/src/pluginSlots/PluginSlotWithModularPlugins.jsx
+++ b/test-project/src/pluginSlots/PluginSlotWithModularPlugins.jsx
@@ -1,17 +1,15 @@
-import React from 'react';
-
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { PluginSlot } from '@openedx/frontend-base';
import ModularComponent from '../components/ModularComponent';
-function PluginSlotWithModularPlugins() {
+function PluginSlotWithModularPlugins({ id, label }) {
const content = {
title: 'Default Content',
uniqueText: 'Default content are set with a priority of 50, which is why it appears second in this slot.',
}
return (
-