From a6e63a86860ae455423d8f95c6b2295ea0214e47 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 2 Oct 2023 13:25:05 +0000
Subject: [PATCH 1/8] chore(deps): update dependency glob to v10.3.10

---
 package-lock.json | 16 ++++++++--------
 package.json      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f6cdde231..0fdb9d259 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,7 +53,7 @@
         "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
         "codecov": "3.8.3",
         "enzyme": "3.11.0",
-        "glob": "10.3.7",
+        "glob": "10.3.10",
         "react-test-renderer": "17.0.2",
         "reactifex": "1.1.1",
         "redux-mock-store": "1.5.4"
@@ -10867,13 +10867,13 @@
       "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw=="
     },
     "node_modules/glob": {
-      "version": "10.3.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.7.tgz",
-      "integrity": "sha512-wCMbE1m9Nx5yD9LYtgsVWq5VhHlk5WzJirw594qZR6AIvQYuHrdDtIktUVjQItalD53y7dqoedu9xP0u0WaxIQ==",
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
       "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
-        "jackspeak": "^2.0.3",
+        "jackspeak": "^2.3.5",
         "minimatch": "^9.0.1",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
         "path-scurry": "^1.10.1"
@@ -12593,9 +12593,9 @@
       "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
     },
     "node_modules/jackspeak": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.2.1.tgz",
-      "integrity": "sha512-MXbxovZ/Pm42f6cDIDkl3xpwv1AGwObKwfmjs2nQePiy85tP3fatofl3FC1aBsOtP/6fq5SbtgHwWcMsLP+bDw==",
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
       "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
diff --git a/package.json b/package.json
index b96b0d2fb..fca674959 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "codecov": "3.8.3",
     "enzyme": "3.11.0",
-    "glob": "10.3.7",
+    "glob": "10.3.10",
     "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.4"

From 9623f56c48e69dcd5db294542cd6a6dcf60f88a8 Mon Sep 17 00:00:00 2001
From: Jason Wesson <jwesson@2u.com>
Date: Tue, 3 Oct 2023 03:30:01 +0000
Subject: [PATCH 2/8] build: create profile plugin page

---
 src/index.jsx                     |   8 +-
 src/profile/ProfilePluginPage.jsx | 265 ++++++++++++++++++++++++++++++
 src/profile/index.js              |   1 +
 src/routes/AppRoutes.jsx          |   3 +-
 src/routes/routes.test.jsx        |  17 ++
 5 files changed, 292 insertions(+), 2 deletions(-)
 create mode 100644 src/profile/ProfilePluginPage.jsx

diff --git a/src/index.jsx b/src/index.jsx
index 8a6bde80a..6912ebf80 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -15,6 +15,7 @@ import {
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { useLocation } from 'react-router-dom';
 
 import Header from '@edx/frontend-component-header';
 import Footer from '@edx/frontend-component-footer';
@@ -27,6 +28,11 @@ import Head from './head/Head';
 
 import AppRoutes from './routes/AppRoutes';
 
+const RealFooter = () => {
+  const location = useLocation();
+  return ['/u/edx/plugin'].includes(location.pathname) ? <></> : <Footer />;
+}
+
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={configureStore()}>
@@ -35,7 +41,7 @@ subscribe(APP_READY, () => {
       <main>
         <AppRoutes />
       </main>
-      <Footer />
+      <RealFooter />
     </AppProvider>,
     document.getElementById('root'),
   );
diff --git a/src/profile/ProfilePluginPage.jsx b/src/profile/ProfilePluginPage.jsx
new file mode 100644
index 000000000..862ba86ac
--- /dev/null
+++ b/src/profile/ProfilePluginPage.jsx
@@ -0,0 +1,265 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { ensureConfig } from '@edx/frontend-platform';
+import { AppContext } from '@edx/frontend-platform/react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+// Actions
+import {
+  fetchProfile,
+  saveProfile,
+  saveProfilePhoto,
+  deleteProfilePhoto,
+  openForm,
+  closeForm,
+  updateDraft,
+} from './data/actions';
+
+// Components
+import ProfileAvatar from './forms/ProfileAvatar';
+import Name from './forms/Name';
+import Country from './forms/Country';
+import Education from './forms/Education';
+import SocialLinks from './forms/SocialLinks';
+import Bio from './forms/Bio';
+import DateJoined from './DateJoined';
+import PageLoading from './PageLoading';
+
+// Selectors
+import { profilePageSelector } from './data/selectors';
+
+// i18n
+import messages from './ProfilePage.messages';
+
+import withParams from '../utils/hoc';
+
+ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
+
+class ProfilePluginPage extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.handleSaveProfilePhoto = this.handleSaveProfilePhoto.bind(this);
+    this.handleDeleteProfilePhoto = this.handleDeleteProfilePhoto.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.fetchProfile(this.props.params.username);
+  }
+
+  handleSaveProfilePhoto(formData) {
+    this.props.saveProfilePhoto(this.context.authenticatedUser.username, formData);
+  }
+
+  handleDeleteProfilePhoto() {
+    this.props.deleteProfilePhoto(this.context.authenticatedUser.username);
+  }
+
+  handleClose(formId) {
+    this.props.closeForm(formId);
+  }
+
+  handleOpen(formId) {
+    this.props.openForm(formId);
+  }
+
+  handleSubmit(formId) {
+    this.props.saveProfile(formId, this.context.authenticatedUser.username);
+  }
+
+  handleChange(name, value) {
+    this.props.updateDraft(name, value);
+  }
+
+  // Inserted into the DOM in two places (for responsive layout)
+  renderHeadingLockup() {
+    const { dateJoined } = this.props;
+    return (
+      <span data-hj-suppress>
+        <h1 className="h2 mb-0 font-weight-bold">{this.props.params.username}</h1>
+        <DateJoined date={dateJoined} />
+        <hr className="d-none d-md-block" />
+      </span>
+    );
+  }
+
+  renderContent() {
+    const {
+      profileImage,
+      name,
+      visibilityName,
+      country,
+      visibilityCountry,
+      levelOfEducation,
+      visibilityLevelOfEducation,
+      socialLinks,
+      visibilitySocialLinks,
+      bio,
+      visibilityBio,
+      isLoadingProfile,
+    } = this.props;
+
+    if (isLoadingProfile) {
+      return <PageLoading srMessage={this.props.intl.formatMessage(messages['profile.loading'])} />;
+    }
+
+    const commonFormProps = {
+      openHandler: this.handleOpen,
+      closeHandler: this.handleClose,
+      submitHandler: this.handleSubmit,
+      changeHandler: this.handleChange,
+    };
+
+    return (
+      <div className="container-fluid">
+        <div className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0">
+          <div className="col-auto col-md-4 col-lg-3">
+            <div className="d-flex align-items-center d-md-block">
+              <ProfileAvatar
+                className="mb-md-3"
+                src={profileImage.src}
+                isDefault={profileImage.isDefault}
+              />
+            </div>
+          </div>
+          <div className="col pl-0">
+            <div>
+              {this.renderHeadingLockup()}
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-md-4 col-lg-4">
+            <Name
+              name={name}
+              visibilityName={visibilityName}
+              formId="name"
+              {...commonFormProps}
+            />
+            <Country
+              country={country}
+              visibilityCountry={visibilityCountry}
+              formId="country"
+              {...commonFormProps}
+            />
+            <Education
+              levelOfEducation={levelOfEducation}
+              visibilityLevelOfEducation={visibilityLevelOfEducation}
+              formId="levelOfEducation"
+              {...commonFormProps}
+            />
+            <SocialLinks
+              socialLinks={socialLinks}
+              visibilitySocialLinks={visibilitySocialLinks}
+              formId="socialLinks"
+              {...commonFormProps}
+            />
+          </div>
+          <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
+            <Bio
+              bio={bio}
+              visibilityBio={visibilityBio}
+              formId="bio"
+              {...commonFormProps}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className="profile-page">
+        {this.renderContent()}
+      </div>
+    );
+  }
+}
+
+ProfilePluginPage.contextType = AppContext;
+
+ProfilePluginPage.propTypes = {
+  // Account data
+  dateJoined: PropTypes.string,
+
+  // Bio form data
+  bio: PropTypes.string,
+  yearOfBirth: PropTypes.number,
+  visibilityBio: PropTypes.string.isRequired,
+
+  // Country form data
+  country: PropTypes.string,
+  visibilityCountry: PropTypes.string.isRequired,
+
+  // Education form data
+  levelOfEducation: PropTypes.string,
+  visibilityLevelOfEducation: PropTypes.string.isRequired,
+
+  // Name form data
+  name: PropTypes.string,
+  visibilityName: PropTypes.string.isRequired,
+
+  // Social links form data
+  socialLinks: PropTypes.arrayOf(PropTypes.shape({
+    platform: PropTypes.string,
+    socialLink: PropTypes.string,
+  })),
+  visibilitySocialLinks: PropTypes.string.isRequired,
+
+  // Other data we need
+  profileImage: PropTypes.shape({
+    src: PropTypes.string,
+    isDefault: PropTypes.bool,
+  }),
+  saveState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
+  isLoadingProfile: PropTypes.bool.isRequired,
+
+  // Actions
+  fetchProfile: PropTypes.func.isRequired,
+  saveProfile: PropTypes.func.isRequired,
+  saveProfilePhoto: PropTypes.func.isRequired,
+  deleteProfilePhoto: PropTypes.func.isRequired,
+  openForm: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  updateDraft: PropTypes.func.isRequired,
+
+  // Router
+  params: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+  }).isRequired,
+
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+ProfilePluginPage.defaultProps = {
+  saveState: null,
+  profileImage: {},
+  name: null,
+  yearOfBirth: null,
+  levelOfEducation: null,
+  country: null,
+  socialLinks: [],
+  bio: null,
+  dateJoined: null,
+};
+
+export default connect(
+  profilePageSelector,
+  {
+    fetchProfile,
+    saveProfilePhoto,
+    deleteProfilePhoto,
+    saveProfile,
+    openForm,
+    closeForm,
+    updateDraft,
+  },
+)(injectIntl(withParams(ProfilePluginPage)));
diff --git a/src/profile/index.js b/src/profile/index.js
index 4cb72e831..00a271fc3 100644
--- a/src/profile/index.js
+++ b/src/profile/index.js
@@ -3,3 +3,4 @@ export { default as saga } from './data/sagas';
 export { default as ProfilePage } from './ProfilePage';
 export { default as NotFoundPage } from './NotFoundPage';
 export { default as messages } from './ProfilePage.messages';
+export { default as ProfilePluginPage } from './ProfilePluginPage';
diff --git a/src/routes/AppRoutes.jsx b/src/routes/AppRoutes.jsx
index 1d46786b5..f0db85bb0 100644
--- a/src/routes/AppRoutes.jsx
+++ b/src/routes/AppRoutes.jsx
@@ -4,11 +4,12 @@ import {
   PageWrap,
 } from '@edx/frontend-platform/react';
 import { Routes, Route } from 'react-router-dom';
-import { ProfilePage, NotFoundPage } from '../profile';
+import { ProfilePage, NotFoundPage, ProfilePluginPage } from '../profile';
 
 const AppRoutes = () => (
   <Routes>
     <Route path="/u/:username" element={<AuthenticatedPageRoute><ProfilePage /></AuthenticatedPageRoute>} />
+    <Route path="/u/:username/plugin" element={<AuthenticatedPageRoute><ProfilePluginPage /></AuthenticatedPageRoute>} />
     <Route path="/notfound" element={<PageWrap><NotFoundPage /></PageWrap>} />
     <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
   </Routes>
diff --git a/src/routes/routes.test.jsx b/src/routes/routes.test.jsx
index 9bd40dfea..2cde161f2 100644
--- a/src/routes/routes.test.jsx
+++ b/src/routes/routes.test.jsx
@@ -15,6 +15,7 @@ jest.mock('@edx/frontend-platform/auth', () => ({
 jest.mock('../profile', () => ({
   ProfilePage: () => (<div>Profile page</div>),
   NotFoundPage: () => (<div>Not found page</div>),
+  ProfilePluginPage: () => (<div>Plugin page</div>),
 }));
 
 const RoutesWithProvider = (context, path) => (
@@ -54,6 +55,22 @@ describe('routes', () => {
     expect(screen.getByText('Profile page')).toBeTruthy();
   });
 
+  test('Profile Plugin page should be accessible for authenticated users', () => {
+    render(
+      RoutesWithProvider(
+        {
+          authenticatedUser: {
+            username: 'edx',
+            email: 'edx@example.com',
+          },
+          config: getConfig(),
+        },
+        '/u/edx/plugin',
+      ),
+    );
+    expect(screen.getByText('Plugin page')).toBeTruthy();
+  });
+
   test('should show NotFound page for a bad route', () => {
     render(
       RoutesWithProvider(unauthenticatedUser, '/nonMatchingRoute'),

From f08fc755145d5899e0fe57f26c23a01c6dbd4f29 Mon Sep 17 00:00:00 2001
From: Jason Wesson <jwesson@2u.com>
Date: Wed, 4 Oct 2023 17:40:00 +0000
Subject: [PATCH 3/8] build: wrap Profile Plugin Page with Plugin

* add Plugin Framework to top of Profile directory
---
 package-lock.json                 | 150 +++++++++++++++++-------------
 package.json                      |   3 +-
 src/profile/DateJoined.jsx        |   1 -
 src/profile/ProfilePluginPage.jsx | 121 +++++++++++++-----------
 4 files changed, 151 insertions(+), 124 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2ebd8112a..97e0dd5c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
         "@edx/frontend-component-footer": "12.2.1",
         "@edx/frontend-component-header": "4.6.0",
-        "@edx/frontend-platform": "5.4.0",
+        "@edx/frontend-platform": "^5.4.0",
         "@edx/paragon": "^20.44.0",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
         "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -30,6 +30,7 @@
         "prop-types": "15.8.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
+        "react-error-boundary": "^4.0.11",
         "react-helmet": "6.1.0",
         "react-redux": "7.2.9",
         "react-router": "6.16.0",
@@ -2795,21 +2796,21 @@
       }
     },
     "node_modules/@edx/paragon/node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
-      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
       "hasInstallScript": true,
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@edx/paragon/node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
-      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
       "hasInstallScript": true,
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
+        "@fortawesome/fontawesome-common-types": "6.4.2"
       },
       "engines": {
         "node": ">=6"
@@ -4820,11 +4821,11 @@
       }
     },
     "node_modules/@restart/hooks": {
-      "version": "0.4.9",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz",
-      "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==",
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.11.tgz",
+      "integrity": "sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==",
       "dependencies": {
-        "dequal": "^2.0.2"
+        "dequal": "^2.0.3"
       },
       "peerDependencies": {
         "react": ">=16.8.0"
@@ -5458,9 +5459,9 @@
       }
     },
     "node_modules/@types/react-transition-group": {
-      "version": "4.4.6",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
-      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
+      "integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -5524,9 +5525,9 @@
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
     "node_modules/@types/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.1.tgz",
+      "integrity": "sha512-ywJmriP+nvjBKNBEMaNZgj2irZHoxcKeYcyMLbqhYKbDVn8yCIULy2Ol/tvIb37O3IBeZj3RU4tXqQTtGwoAMg=="
     },
     "node_modules/@types/ws": {
       "version": "8.5.5",
@@ -10001,6 +10002,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -14215,9 +14224,9 @@
       }
     },
     "node_modules/jquery": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
-      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
       "peer": true
     },
     "node_modules/js-base64": {
@@ -14707,39 +14716,6 @@
         "node": ">= 12"
       }
     },
-    "node_modules/mailto-link/node_modules/filter-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
-      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/mailto-link/node_modules/query-string": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
-      "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
-      "dependencies": {
-        "decode-uri-component": "^0.2.0",
-        "filter-obj": "^1.1.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/mailto-link/node_modules/split-on-first": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
-      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -15409,9 +15385,9 @@
       }
     },
     "node_modules/object-code": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/object-code/-/object-code-1.2.4.tgz",
-      "integrity": "sha512-uGq4ETUuWe+GA586NXEriiaozNuff+YNFXlpD8cVrM1GoiuTZpCABP+bZCWDrvQDoCiSTyiWAFHD/HF/iwhb2w=="
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object-code/-/object-code-1.3.0.tgz",
+      "integrity": "sha512-PLplgvzuFhSPBuTX/mtaXEnU3c6g7qKflVVQbV9VWEnV/34iKeAX1jeDNCKq1OgGlsnkA/NjldCzTbHxa7Wj4A=="
     },
     "node_modules/object-copy": {
       "version": "0.1.0",
@@ -17096,6 +17072,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/query-string": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
+      "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -17413,6 +17406,17 @@
         "react": ">= 16.8 || 18.0.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.11.tgz",
+      "integrity": "sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -17424,9 +17428,9 @@
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
     "node_modules/react-focus-lock": {
-      "version": "2.9.4",
-      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.4.tgz",
-      "integrity": "sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==",
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.5.tgz",
+      "integrity": "sha512-h6vrdgUbsH2HeD5I7I3Cx1PPrmwGuKYICS+kB9m+32X/9xHRrAbxgvaBpG7BFBN9h3tO+C3qX1QAVESmi4CiIA==",
       "dependencies": {
         "@babel/runtime": "^7.0.0",
         "focus-lock": "^0.11.6",
@@ -17446,12 +17450,12 @@
       }
     },
     "node_modules/react-focus-on": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.8.1.tgz",
-      "integrity": "sha512-fQcBx+SZMgXoRL+69r5+ic4bdVgqaCeKeoFPra8yhcSuL/3unWavfdirEFBGgH71K+RiocMTS6DETHcX0SlOZg==",
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.9.1.tgz",
+      "integrity": "sha512-IYo2j4mgNpZEJNv+/XzZs3S3xhJbR+AFop092h4OMW7sbFpIMVWxp/Z61V/gfpsgOi7VnoSFXP2bfOWWkjjtOw==",
       "dependencies": {
         "aria-hidden": "^1.2.2",
-        "react-focus-lock": "^2.9.2",
+        "react-focus-lock": "^2.9.4",
         "react-remove-scroll": "^2.5.6",
         "react-style-singleton": "^2.2.0",
         "tslib": "^2.3.1",
@@ -19676,6 +19680,14 @@
         "wbuf": "^1.7.3"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -21113,9 +21125,13 @@
       }
     },
     "node_modules/uuid": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
-      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
         "uuid": "dist/bin/uuid"
       }
diff --git a/package.json b/package.json
index 5505543af..1d028fb49 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
     "@edx/frontend-component-footer": "12.2.1",
     "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-platform": "5.4.0",
+    "@edx/frontend-platform": "^5.4.0",
     "@edx/paragon": "^20.44.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -49,6 +49,7 @@
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-error-boundary": "^4.0.11",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "6.16.0",
diff --git a/src/profile/DateJoined.jsx b/src/profile/DateJoined.jsx
index 05ce2d66f..1fbe379f0 100644
--- a/src/profile/DateJoined.jsx
+++ b/src/profile/DateJoined.jsx
@@ -6,7 +6,6 @@ const DateJoined = ({ date }) => {
   if (date == null) {
     return null;
   }
-
   return (
     <p className="mb-0">
       <FormattedMessage
diff --git a/src/profile/ProfilePluginPage.jsx b/src/profile/ProfilePluginPage.jsx
index 862ba86ac..d676a6c2b 100644
--- a/src/profile/ProfilePluginPage.jsx
+++ b/src/profile/ProfilePluginPage.jsx
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { ensureConfig } from '@edx/frontend-platform';
-import { AppContext } from '@edx/frontend-platform/react';
+import { AppContext, ErrorBoundary } from '@edx/frontend-platform/react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Plugin } from '../../plugins';
 
 // Actions
 import {
@@ -37,6 +38,12 @@ import withParams from '../utils/hoc';
 
 ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
 
+function Fallback() {
+  return (
+    <div>this is broken as all get</div>
+  );
+}
+
 class ProfilePluginPage extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -81,11 +88,13 @@ class ProfilePluginPage extends React.Component {
   renderHeadingLockup() {
     const { dateJoined } = this.props;
     return (
-      <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold">{this.props.params.username}</h1>
-        <DateJoined date={dateJoined} />
-        <hr className="d-none d-md-block" />
-      </span>
+      <ErrorBoundary fallbackComponent={<Fallback />}>
+        <span data-hj-suppress>
+          <h1 className="h2 mb-0 font-weight-bold">{this.props.params.username}</h1>
+          <DateJoined date={dateJoined} />
+          <hr className="d-none d-md-block" />
+        </span>
+      </ErrorBoundary>
     );
   }
 
@@ -117,60 +126,62 @@ class ProfilePluginPage extends React.Component {
     };
 
     return (
-      <div className="container-fluid">
-        <div className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0">
-          <div className="col-auto col-md-4 col-lg-3">
-            <div className="d-flex align-items-center d-md-block">
-              <ProfileAvatar
-                className="mb-md-3"
-                src={profileImage.src}
-                isDefault={profileImage.isDefault}
-              />
+      <Plugin>
+        <div className="container-fluid">
+          <div className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0">
+            <div className="col-auto col-md-4 col-lg-3">
+              <div className="d-flex align-items-center d-md-block">
+                <ProfileAvatar
+                  className="mb-md-3"
+                  src={profileImage.src}
+                  isDefault={profileImage.isDefault}
+                  />
+              </div>
             </div>
-          </div>
-          <div className="col pl-0">
-            <div>
-              {this.renderHeadingLockup()}
+            <div className="col pl-0">
+              <div>
+                {this.renderHeadingLockup()}
+              </div>
             </div>
           </div>
-        </div>
-        <div className="row">
-          <div className="col-md-4 col-lg-4">
-            <Name
-              name={name}
-              visibilityName={visibilityName}
-              formId="name"
-              {...commonFormProps}
-            />
-            <Country
-              country={country}
-              visibilityCountry={visibilityCountry}
-              formId="country"
-              {...commonFormProps}
-            />
-            <Education
-              levelOfEducation={levelOfEducation}
-              visibilityLevelOfEducation={visibilityLevelOfEducation}
-              formId="levelOfEducation"
-              {...commonFormProps}
-            />
-            <SocialLinks
-              socialLinks={socialLinks}
-              visibilitySocialLinks={visibilitySocialLinks}
-              formId="socialLinks"
-              {...commonFormProps}
-            />
-          </div>
-          <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
-            <Bio
-              bio={bio}
-              visibilityBio={visibilityBio}
-              formId="bio"
-              {...commonFormProps}
-            />
+          <div className="row">
+            <div className="col-md-4 col-lg-4">
+              <Name
+                name={name}
+                visibilityName={visibilityName}
+                formId="name"
+                {...commonFormProps}
+                />
+              <Country
+                country={country}
+                visibilityCountry={visibilityCountry}
+                formId="country"
+                {...commonFormProps}
+                />
+              <Education
+                levelOfEducation={levelOfEducation}
+                visibilityLevelOfEducation={visibilityLevelOfEducation}
+                formId="levelOfEducation"
+                {...commonFormProps}
+                />
+              <SocialLinks
+                socialLinks={socialLinks}
+                visibilitySocialLinks={visibilitySocialLinks}
+                formId="socialLinks"
+                {...commonFormProps}
+                />
+            </div>
+            <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
+              <Bio
+                bio={bio}
+                visibilityBio={visibilityBio}
+                formId="bio"
+                {...commonFormProps}
+                />
+            </div>
           </div>
         </div>
-      </div>
+      </Plugin>
     );
   }
 

From 5e641d77819086bbb104c3cccd9cb6488e3f3b84 Mon Sep 17 00:00:00 2001
From: Jason Wesson <jwesson@2u.com>
Date: Wed, 4 Oct 2023 19:38:02 +0000
Subject: [PATCH 4/8] build: add plugins folder to Profile

---
 plugins/Plugin.jsx                | 92 +++++++++++++++++++++++++++++
 plugins/PluginContainer.jsx       | 41 +++++++++++++
 plugins/PluginContainerIframe.jsx | 98 +++++++++++++++++++++++++++++++
 plugins/PluginErrorBoundary.jsx   | 44 ++++++++++++++
 plugins/PluginSlot.jsx            | 74 +++++++++++++++++++++++
 plugins/data/constants.js         |  8 +++
 plugins/data/hooks.js             | 96 ++++++++++++++++++++++++++++++
 plugins/data/shapes.js            | 10 ++++
 plugins/index.js                  | 15 +++++
 9 files changed, 478 insertions(+)
 create mode 100644 plugins/Plugin.jsx
 create mode 100644 plugins/PluginContainer.jsx
 create mode 100644 plugins/PluginContainerIframe.jsx
 create mode 100644 plugins/PluginErrorBoundary.jsx
 create mode 100644 plugins/PluginSlot.jsx
 create mode 100644 plugins/data/constants.js
 create mode 100644 plugins/data/hooks.js
 create mode 100644 plugins/data/shapes.js
 create mode 100644 plugins/index.js

diff --git a/plugins/Plugin.jsx b/plugins/Plugin.jsx
new file mode 100644
index 000000000..624ed46f3
--- /dev/null
+++ b/plugins/Plugin.jsx
@@ -0,0 +1,92 @@
+'use client';
+
+import React, {
+  useEffect, useMemo, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from 'react-error-boundary';
+import { logError } from '@edx/frontend-platform/logging';
+import {
+  dispatchMountedEvent, dispatchReadyEvent, dispatchUnmountedEvent, useHostEvent,
+} from './data/hooks';
+import { PLUGIN_RESIZE } from './data/constants';
+
+// see example-plugin-app/src/PluginOne.jsx for example of customizing errorFallback
+function errorFallbackDefault() {
+  return (
+    <div>
+      <h2>
+        Oops! An error occurred. Please refresh the screen to try again.
+      </h2>
+    </div>
+  );
+}
+
+export default function Plugin({
+  children, className, style, ready, errorFallbackProp,
+}) {
+  const [dimensions, setDimensions] = useState({
+    width: null,
+    height: null,
+  });
+
+  const finalStyle = useMemo(() => ({
+    ...dimensions,
+    ...style,
+  }), [dimensions, style]);
+
+  const errorFallback = errorFallbackProp || errorFallbackDefault;
+
+  // Error logging function
+  // Need to confirm: When an error is caught here, the logging will be sent to the child MFE's logging service
+  const logErrorToService = (error, info) => {
+    logError(error, { stack: info.componentStack });
+  };
+
+  useHostEvent(PLUGIN_RESIZE, ({ payload }) => {
+    setDimensions({
+      width: payload.width,
+      height: payload.height,
+    });
+  });
+
+  useEffect(() => {
+    dispatchMountedEvent();
+
+    return () => {
+      dispatchUnmountedEvent();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (ready) {
+      dispatchReadyEvent();
+    }
+  }, [ready]);
+
+  return (
+    <div className={className} style={finalStyle}>
+      <ErrorBoundary
+        FallbackComponent={errorFallback}
+        onError={logErrorToService}
+      >
+        {children}
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+Plugin.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  errorFallbackProp: PropTypes.func,
+  ready: PropTypes.bool,
+  style: PropTypes.object, // eslint-disable-line
+};
+
+Plugin.defaultProps = {
+  className: null,
+  errorFallbackProp: null,
+  style: {},
+  ready: true,
+};
diff --git a/plugins/PluginContainer.jsx b/plugins/PluginContainer.jsx
new file mode 100644
index 000000000..4d889d7ec
--- /dev/null
+++ b/plugins/PluginContainer.jsx
@@ -0,0 +1,41 @@
+'use client';
+
+import React from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import PluginContainerIframe from './PluginContainerIframe';
+
+import {
+  IFRAME_PLUGIN,
+} from './data/constants';
+import { pluginConfigShape } from './data/shapes';
+
+export default function PluginContainer({ config, ...props }) {
+  if (config === null) {
+    return null;
+  }
+
+  // this will allow for future plugin types to be inserted in the PluginErrorBoundary
+  let renderer = null;
+  switch (config.type) {
+    case IFRAME_PLUGIN:
+      renderer = (
+        <PluginContainerIframe config={config} {...props} />
+      );
+      break;
+    // istanbul ignore next: default isn't meaningful, just satisfying linter
+    default:
+  }
+
+  return (
+    renderer
+  );
+}
+
+PluginContainer.propTypes = {
+  config: pluginConfigShape,
+};
+
+PluginContainer.defaultProps = {
+  config: null,
+};
diff --git a/plugins/PluginContainerIframe.jsx b/plugins/PluginContainerIframe.jsx
new file mode 100644
index 000000000..6ebfcadec
--- /dev/null
+++ b/plugins/PluginContainerIframe.jsx
@@ -0,0 +1,98 @@
+import React, {
+  useEffect, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {
+  PLUGIN_MOUNTED,
+  PLUGIN_READY,
+  PLUGIN_RESIZE,
+} from './data/constants';
+import {
+  dispatchPluginEvent,
+  useElementSize,
+  usePluginEvent,
+} from './data/hooks';
+import { pluginConfigShape } from './data/shapes';
+
+/**
+ * Feature policy for iframe, allowing access to certain courseware-related media.
+ *
+ * We must use the wildcard (*) origin for each feature, as courseware content
+ * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
+ * block that iframes external course content.
+
+ * This policy was selected in conference with the edX Security Working Group.
+ * Changes to it should be vetted by them (security@edx.org).
+ */
+export const IFRAME_FEATURE_POLICY = (
+  'fullscreen; microphone *; camera *; midi *; geolocation *; encrypted-media *'
+);
+
+export default function PluginContainerIframe({
+  config, fallback, className, ...props
+}) {
+  const { url } = config;
+  const { title, scrolling } = props;
+  const [mounted, setMounted] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  const [iframeRef, iframeElement, width, height] = useElementSize();
+
+  useEffect(() => {
+    if (mounted) {
+      dispatchPluginEvent(iframeElement, {
+        type: PLUGIN_RESIZE,
+        payload: {
+          width,
+          height,
+        },
+      }, url);
+    }
+  }, [iframeElement, mounted, width, height, url]);
+
+  usePluginEvent(iframeElement, PLUGIN_MOUNTED, () => {
+    setMounted(true);
+  });
+
+  usePluginEvent(iframeElement, PLUGIN_READY, () => {
+    setReady(true);
+  });
+
+  return (
+    <>
+      <iframe
+        ref={iframeRef}
+        title={title}
+        src={url}
+        allow={IFRAME_FEATURE_POLICY}
+        scrolling={scrolling}
+        referrerPolicy="origin" // The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
+        className={classNames(
+          'border border-0',
+          { 'd-none': !ready },
+          className,
+        )}
+        {...props}
+      />
+      {!ready && fallback}
+    </>
+  );
+}
+
+PluginContainerIframe.propTypes = {
+  config: pluginConfigShape,
+  fallback: PropTypes.node,
+  scrolling: PropTypes.oneOf(['auto', 'yes', 'no']),
+  title: PropTypes.string,
+  className: PropTypes.string,
+};
+
+PluginContainerIframe.defaultProps = {
+  config: null,
+  fallback: null,
+  scrolling: 'auto',
+  title: null,
+  className: null,
+};
diff --git a/plugins/PluginErrorBoundary.jsx b/plugins/PluginErrorBoundary.jsx
new file mode 100644
index 000000000..71d0b2ff8
--- /dev/null
+++ b/plugins/PluginErrorBoundary.jsx
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { logError } from '../logging';
+
+export default class PluginErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    logError(error, { stack: info.componentStack });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <FormattedMessage
+          id="plugin.load.failure.text"
+          defaultMessage="This content failed to load."
+          description="error message when an unexpected error occurs"
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+PluginErrorBoundary.propTypes = {
+  children: PropTypes.node,
+};
+
+PluginErrorBoundary.defaultProps = {
+  children: null,
+};
diff --git a/plugins/PluginSlot.jsx b/plugins/PluginSlot.jsx
new file mode 100644
index 000000000..464fcd9ee
--- /dev/null
+++ b/plugins/PluginSlot.jsx
@@ -0,0 +1,74 @@
+import React, { forwardRef } from 'react';
+
+import classNames from 'classnames';
+import { Spinner } from '@edx/paragon';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+// import { usePluginSlot } from './data/hooks';
+import PluginContainer from './PluginContainer';
+
+const PluginSlot = forwardRef(({
+  as, id, intl, pluginProps, children, ...props
+}, ref) => {
+  /* the plugins below are obtained by the id passed into PluginSlot by the Host MFE. See example/src/PluginsPage.jsx
+  for an example of how PluginSlot is populated, and example/src/index.jsx for a dummy JS config that holds all plugins
+  */
+  // const { plugins, keepDefault } = usePluginSlot(id);
+
+  const { fallback } = pluginProps;
+
+  // TODO: Add internationalization to the "Loading" text on the spinner.
+  let finalFallback = (
+    <div className={classNames(pluginProps.className, 'd-flex justify-content-center align-items-center')}>
+      <Spinner animation="border" screenReaderText="Loading" />
+    </div>
+  );
+  if (fallback !== undefined) {
+    finalFallback = fallback;
+  }
+
+  let finalChildren = [];
+  // if (plugins.length > 0) {
+    // if (keepDefault) {
+    //   finalChildren.push(children);
+    // }
+    // plugins.forEach((pluginConfig) => {
+    //   finalChildren.push(
+    //     <PluginContainer
+    //       key={pluginConfig.url}
+    //       config={pluginConfig}
+    //       fallback={finalFallback}
+    //       {...pluginProps}
+    //     />,
+    //   );
+    // });
+  // } else {
+    finalChildren = children;
+  // }
+
+  return React.createElement(
+    as,
+    {
+      ...props,
+      ref,
+    },
+    finalChildren,
+  );
+});
+
+export default injectIntl(PluginSlot);
+
+PluginSlot.propTypes = {
+  as: PropTypes.elementType,
+  children: PropTypes.node,
+  id: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+  pluginProps: PropTypes.object, // eslint-disable-line
+};
+
+PluginSlot.defaultProps = {
+  as: 'div',
+  children: null,
+  pluginProps: {},
+};
diff --git a/plugins/data/constants.js b/plugins/data/constants.js
new file mode 100644
index 000000000..9c834a2bf
--- /dev/null
+++ b/plugins/data/constants.js
@@ -0,0 +1,8 @@
+// TODO: We expect other plugin types to be added here, such as LTI_PLUGIN and BUILD_TIME_PLUGIN.
+export const IFRAME_PLUGIN = 'IFRAME_PLUGIN'; // loads iframe at the URL, rather than loading a JS file.
+
+// Plugin lifecycle events
+export const PLUGIN_MOUNTED = 'PLUGIN_MOUNTED';
+export const PLUGIN_READY = 'PLUGIN_READY';
+export const PLUGIN_UNMOUNTED = 'PLUGIN_UNMOUNTED';
+export const PLUGIN_RESIZE = 'PLUGIN_RESIZE';
diff --git a/plugins/data/hooks.js b/plugins/data/hooks.js
new file mode 100644
index 000000000..04d124363
--- /dev/null
+++ b/plugins/data/hooks.js
@@ -0,0 +1,96 @@
+import {
+  useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState,
+} from 'react';
+import { PLUGIN_MOUNTED, PLUGIN_READY, PLUGIN_UNMOUNTED } from './constants';
+
+export function useMessageEvent(srcWindow, type, callback) {
+  useLayoutEffect(() => {
+    const listener = (event) => {
+      // Filter messages to those from our source window.
+      if (event.source === srcWindow) {
+        if (event.data.type === type) {
+          callback({ type, payload: event.data.payload });
+        }
+      }
+    };
+    if (srcWindow !== null) {
+      global.addEventListener('message', listener);
+    }
+    return () => {
+      global.removeEventListener('message', listener);
+    };
+  }, [srcWindow, type, callback]);
+}
+
+export function useHostEvent(type, callback) {
+  useMessageEvent(global.parent, type, callback);
+}
+
+export function usePluginEvent(iframeElement, type, callback) {
+  const contentWindow = iframeElement ? iframeElement.contentWindow : null;
+  useMessageEvent(contentWindow, type, callback);
+}
+
+export function dispatchMessageEvent(targetWindow, message, targetOrigin) {
+  // Checking targetOrigin falsiness here since '', null or undefined would all be reasons not to
+  // try to post a message to the origin.
+  if (targetOrigin) {
+    targetWindow.postMessage(message, targetOrigin);
+  }
+}
+
+export function dispatchPluginEvent(iframeElement, message, targetOrigin) {
+  dispatchMessageEvent(iframeElement.contentWindow, message, targetOrigin);
+}
+
+export function dispatchHostEvent(message) {
+  dispatchMessageEvent(global.parent, message, global.document.referrer);
+}
+
+export function dispatchReadyEvent() {
+  dispatchHostEvent({ type: PLUGIN_READY });
+}
+
+export function dispatchMountedEvent() {
+  dispatchHostEvent({ type: PLUGIN_MOUNTED });
+}
+
+export function dispatchUnmountedEvent() {
+  dispatchHostEvent({ type: PLUGIN_UNMOUNTED });
+}
+
+export function useElementSize() {
+  const observerRef = useRef();
+
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  const [element, setElement] = useState(null);
+
+  const measuredRef = useCallback(_element => {
+    setElement(_element);
+  }, []);
+
+  useEffect(() => {
+    observerRef.current = new ResizeObserver(() => {
+      if (element) {
+        setDimensions({
+          width: element.clientWidth,
+          height: element.clientHeight,
+        });
+        setOffset({
+          x: element.offsetLeft,
+          y: element.offsetTop,
+        });
+      }
+    });
+    if (element) {
+      observerRef.current.observe(element);
+    }
+  }, [element]);
+
+  return useMemo(
+    () => ([measuredRef, element, dimensions.width, dimensions.height, offset.x, offset.y]),
+    [measuredRef, element, dimensions, offset],
+  );
+}
diff --git a/plugins/data/shapes.js b/plugins/data/shapes.js
new file mode 100644
index 000000000..75a206e33
--- /dev/null
+++ b/plugins/data/shapes.js
@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+import PropTypes from 'prop-types';
+import { IFRAME_PLUGIN } from './constants';
+
+export const pluginConfigShape = PropTypes.shape({
+  url: PropTypes.string.isRequired,
+  type: PropTypes.oneOf([IFRAME_PLUGIN]).isRequired,
+  // This is a place for us to put any generic props we want to pass to the component.  We need it.
+  props: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+});
diff --git a/plugins/index.js b/plugins/index.js
new file mode 100644
index 000000000..e7c234cad
--- /dev/null
+++ b/plugins/index.js
@@ -0,0 +1,15 @@
+// export {
+//   usePluginSlot,
+// } from './data/hooks';
+export {
+  default as Plugin,
+} from './Plugin';
+export {
+  default as PluginContainer,
+} from './PluginContainer';
+export {
+  default as PluginSlot,
+} from './PluginSlot';
+export {
+  IFRAME_PLUGIN,
+} from './data/constants';

From 095b91c8cb8fb5a6571de627fa2797bbae987e84 Mon Sep 17 00:00:00 2001
From: jsnwesson <jsnwesson@users.noreply.github.com>
Date: Mon, 9 Oct 2023 00:09:13 +0000
Subject: [PATCH 5/8] chore: update browserslist DB

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0fdb9d259..bf2ef7362 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7185,9 +7185,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001538",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz",
-      "integrity": "sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==",
+      "version": "1.0.30001546",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001546.tgz",
+      "integrity": "sha512-zvtSJwuQFpewSyRrI3AsftF6rM0X80mZkChIt1spBGEvRglCrjTniXvinc8JKRoqTwXAgvqTImaN9igfSMtUBw==",
       "funding": [
         {
           "type": "opencollective",

From 896905b45738631a1e0bcefd873b02a3461219b3 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 9 Oct 2023 06:39:47 +0000
Subject: [PATCH 6/8] fix(deps): update dependency
 @edx/frontend-component-footer to v12.3.0

---
 package-lock.json | 104 +++++++++++++++++++++++++++++++++++++++++++---
 package.json      |   2 +-
 2 files changed, 100 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0fdb9d259..58b853564 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "AGPL-3.0",
       "dependencies": {
         "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-        "@edx/frontend-component-footer": "12.2.1",
+        "@edx/frontend-component-footer": "12.3.0",
         "@edx/frontend-component-header": "4.6.1",
         "@edx/frontend-platform": "5.4.0",
         "@edx/paragon": "^20.44.0",
@@ -2514,15 +2514,17 @@
       }
     },
     "node_modules/@edx/frontend-component-footer": {
-      "version": "12.2.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.2.1.tgz",
-      "integrity": "sha512-0ZeuFsnToS7h7qI4yXo6FKVz+c4vDyqP2nhPMR3xm3xgPOmHvf8KNL6ES/YGb+ptPYb64ZxT2iNBP6DY0wF3uQ==",
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.3.0.tgz",
+      "integrity": "sha512-ivCtioyP4SceYM4/ugVtif4c41Y+epA0NM7sSB/x6s9A/RTQXb2TY3fDc9lB3ah/0+pRwGVJJEVYkPAZ4JdC/g==",
       "dependencies": {
+        "@edx/paragon": "^21.3.1",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
         "@fortawesome/free-brands-svg-icons": "6.4.2",
         "@fortawesome/free-regular-svg-icons": "6.4.2",
         "@fortawesome/free-solid-svg-icons": "6.4.2",
-        "@fortawesome/react-fontawesome": "0.2.0"
+        "@fortawesome/react-fontawesome": "0.2.0",
+        "lodash": "^4.17.21"
       },
       "peerDependencies": {
         "@edx/frontend-platform": "^4.0.0 || ^5.0.0",
@@ -2531,6 +2533,61 @@
         "react-dom": "^16.9.0 || ^17.0.0"
       }
     },
+    "node_modules/@edx/frontend-component-footer/node_modules/@edx/paragon": {
+      "version": "21.3.1",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-21.3.1.tgz",
+      "integrity": "sha512-bXTUaOEmT8XLnDQzYS8QLMvWK5K2BN4jHlx25lO8N0XWRQeDiQTdbx8OrEbv8QOPTlrv0an5MZc+qjlleJFObg==",
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
+        "@popperjs/core": "^2.11.4",
+        "bootstrap": "^4.6.2",
+        "chalk": "^4.1.2",
+        "child_process": "^1.0.2",
+        "classnames": "^2.3.1",
+        "email-prop-type": "^3.0.0",
+        "file-selector": "^0.6.0",
+        "font-awesome": "^4.7.0",
+        "glob": "^8.0.3",
+        "inquirer": "^8.2.5",
+        "lodash.uniqby": "^4.7.0",
+        "mailto-link": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-bootstrap": "^1.6.5",
+        "react-colorful": "^5.6.1",
+        "react-dropzone": "^14.2.1",
+        "react-focus-on": "^3.5.4",
+        "react-loading-skeleton": "^3.1.0",
+        "react-popper": "^2.2.5",
+        "react-proptype-conditional-require": "^1.0.4",
+        "react-responsive": "^8.2.0",
+        "react-table": "^7.7.0",
+        "react-transition-group": "^4.4.2",
+        "tabbable": "^5.3.3",
+        "uncontrollable": "^7.2.1",
+        "uuid": "^9.0.0"
+      },
+      "bin": {
+        "paragon": "bin/paragon-scripts.js"
+      },
+      "peerDependencies": {
+        "react": "^16.8.6 || ^17.0.0",
+        "react-dom": "^16.8.6 || ^17.0.0",
+        "react-intl": "^5.25.1 || ^6.4.0"
+      }
+    },
+    "node_modules/@edx/frontend-component-footer/node_modules/@edx/paragon/node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
+      "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@edx/frontend-component-footer/node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
@@ -2588,6 +2645,43 @@
         "node": ">=6"
       }
     },
+    "node_modules/@edx/frontend-component-footer/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@edx/frontend-component-footer/node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@edx/frontend-component-footer/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@edx/frontend-component-header": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.6.1.tgz",
diff --git a/package.json b/package.json
index fca674959..716f0f78e 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-footer": "12.2.1",
+    "@edx/frontend-component-footer": "12.3.0",
     "@edx/frontend-component-header": "4.6.1",
     "@edx/frontend-platform": "5.4.0",
     "@edx/paragon": "^20.44.0",

From b892ba763ecc265742a24a2e39d69c6395b31362 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 9 Oct 2023 12:58:28 +0000
Subject: [PATCH 7/8] fix(deps): update dependency
 @edx/frontend-component-header to v4.7.1

---
 package-lock.json | 16 ++++++++--------
 package.json      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 58b853564..0744b2df7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
         "@edx/frontend-component-footer": "12.3.0",
-        "@edx/frontend-component-header": "4.6.1",
+        "@edx/frontend-component-header": "4.7.1",
         "@edx/frontend-platform": "5.4.0",
         "@edx/paragon": "^20.44.0",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
@@ -2683,11 +2683,11 @@
       }
     },
     "node_modules/@edx/frontend-component-header": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.6.1.tgz",
-      "integrity": "sha512-DE19gbiV+fjeLiTAVaf+qDqsRrDpGXuwho1xne7qutdrrcDaX9DKJBV/iNRhr/PS4kpzQu4jPtr6Fdr3gWzu6g==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.7.1.tgz",
+      "integrity": "sha512-Fs4KXXgLBLjI6fH+AxpCyS2ItoGAtbWQ6J1GqK9MeoUsEFHBzL4//fBTbU2HwCJSpn7W8p63CYtk2EOy3eY1Og==",
       "dependencies": {
-        "@edx/paragon": "21.1.10",
+        "@edx/paragon": "21.3.1",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
         "@fortawesome/free-brands-svg-icons": "6.4.2",
         "@fortawesome/free-regular-svg-icons": "6.4.2",
@@ -2706,9 +2706,9 @@
       }
     },
     "node_modules/@edx/frontend-component-header/node_modules/@edx/paragon": {
-      "version": "21.1.10",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-21.1.10.tgz",
-      "integrity": "sha512-5U8tUaL20gDiKfEDr/tuRXrl7fJsN+KgAIn5bWkTtS5Us7r+H+m3LkD58HY7Ntwj8bCrSEtW7YuK3PMabXcMRA==",
+      "version": "21.3.1",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-21.3.1.tgz",
+      "integrity": "sha512-bXTUaOEmT8XLnDQzYS8QLMvWK5K2BN4jHlx25lO8N0XWRQeDiQTdbx8OrEbv8QOPTlrv0an5MZc+qjlleJFObg==",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.1.18",
diff --git a/package.json b/package.json
index 716f0f78e..7632ea1c6 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
     "@edx/frontend-component-footer": "12.3.0",
-    "@edx/frontend-component-header": "4.6.1",
+    "@edx/frontend-component-header": "4.7.1",
     "@edx/frontend-platform": "5.4.0",
     "@edx/paragon": "^20.44.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",

From 06ed2d24e4e4f6e878b7e0ab0dad4d4112e0f9ef Mon Sep 17 00:00:00 2001
From: Jason Wesson <jwesson@2u.com>
Date: Thu, 12 Oct 2023 20:00:07 +0000
Subject: [PATCH 8/8] fix: add correct path to logging

---
 plugins/PluginErrorBoundary.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/PluginErrorBoundary.jsx b/plugins/PluginErrorBoundary.jsx
index 71d0b2ff8..f1aaf5074 100644
--- a/plugins/PluginErrorBoundary.jsx
+++ b/plugins/PluginErrorBoundary.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
-import { logError } from '../logging';
+import { logError } from '@edx/frontend-platform/logging';
 
 export default class PluginErrorBoundary extends Component {
   constructor(props) {