feat: expose containerProps in StudioHeader [FC-0062] (#529)

.github/workflows/ci.yml

@@ -9,17 +9,18 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [18, 20]
     steps:
     - name: Checkout
       uses: actions/checkout@v4
       with:
         fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version: ${{ matrix.node }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.nvmrc

@@ -1 +1 @@
-18
+20

README.rst

@@ -95,6 +95,12 @@ This library has the following exports:
 * ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
 * ``dist/index.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
 
+Plugins
+-------
+This can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Examples
 ========
 

package.json

@@ -37,8 +37,8 @@
     "@edx/browserslist-config": "^1.1.1",
     "@edx/frontend-platform": "8.1.1",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.1.2",
-    "@openedx/paragon": "22.7.0",
+    "@openedx/frontend-build": "14.1.5",
+    "@openedx/paragon": "22.8.1",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "10.4.9",
@@ -49,7 +49,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-redux": "7.2.9",
-    "react-router-dom": "6.26.1",
+    "react-router-dom": "6.26.2",
     "react-test-renderer": "17.0.2",
     "redux": "4.2.1",
     "redux-saga": "1.3.0"
@@ -60,8 +60,10 @@
     "@fortawesome/free-regular-svg-icons": "6.6.0",
     "@fortawesome/free-solid-svg-icons": "6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@openedx/frontend-plugin-framework": "^1.3.0",
     "axios-mock-adapter": "1.22.0",
     "babel-polyfill": "6.26.0",
+    "classnames": "^2.5.1",
     "jest-environment-jsdom": "^29.7.0",
     "react-responsive": "8.2.0",
     "react-transition-group": "4.4.5"

src/DesktopHeader.jsx

@@ -6,7 +6,7 @@ import { getConfig } from '@edx/frontend-platform';
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import Avatar from './Avatar';
-import { LinkedLogo, Logo } from './Logo';
+import LogoSlot from './plugin-slots/LogoSlot';
 
 // i18n
 import messages from './Header.messages';
@@ -145,7 +145,7 @@ class DesktopHeader extends React.Component {
         <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
         <div className={`container-fluid ${logoClasses}`}>
           <div className="nav-container position-relative d-flex align-items-center">
-            {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
+            <LogoSlot {...logoProps} />
             <nav
               aria-label={intl.formatMessage(messages['header.label.main.nav'])}
               className="nav main-nav"

src/Logo.jsx

@@ -1,31 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Logo = ({ src, alt, ...attributes }) => (
-  <img src={src} alt={alt} {...attributes} />
-);
-
-Logo.propTypes = {
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-};
-
-const LinkedLogo = ({
+const Logo = ({
   href,
   src,
   alt,
   ...attributes
 }) => (
-  <a href={href} {...attributes}>
+  <a href={href} className="logo" {...attributes}>
     <img className="d-block" src={src} alt={alt} />
   </a>
 );
 
-LinkedLogo.propTypes = {
+Logo.propTypes = {
   href: PropTypes.string.isRequired,
   src: PropTypes.string.isRequired,
   alt: PropTypes.string.isRequired,
 };
 
-export { LinkedLogo, Logo };
 export default Logo;

src/MobileHeader.jsx

@@ -6,7 +6,7 @@ import { getConfig } from '@edx/frontend-platform';
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import Avatar from './Avatar';
-import { LinkedLogo, Logo } from './Logo';
+import LogoSlot from './plugin-slots/LogoSlot';
 
 // i18n
 import messages from './Header.messages';
@@ -155,7 +155,7 @@ class MobileHeader extends React.Component {
           </div>
         ) : null}
         <div className={`w-100 d-flex ${logoClasses}`}>
-          { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
+          <LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
         </div>
         {userMenu.length > 0 || loggedOutItems.length > 0 ? (
           <div className="w-100 d-flex justify-content-end align-items-center">

src/learning-header/LearningHeader.jsx

@@ -6,33 +6,16 @@ import { AppContext } from '@edx/frontend-platform/react';
 
 import AnonymousUserMenu from './AnonymousUserMenu';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
+import LogoSlot from '../plugin-slots/LogoSlot';
 import messages from './messages';
 
-const LinkedLogo = ({
-  href,
-  src,
-  alt,
-  ...attributes
-}) => (
-  <a href={href} {...attributes}>
-    <img className="d-block" src={src} alt={alt} />
-  </a>
-);
-
-LinkedLogo.propTypes = {
-  href: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-};
-
 const LearningHeader = ({
   courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
 }) => {
   const { authenticatedUser } = useContext(AppContext);
 
   const headerLogo = (
-    <LinkedLogo
-      className="logo"
+    <LogoSlot
       href={`${getConfig().LMS_BASE_URL}/dashboard`}
       src={getConfig().LOGO_URL}
       alt={getConfig().SITE_NAME}

src/plugin-slots/LogoSlot/README.md

@@ -0,0 +1,69 @@
+# Logo Slot
+
+### Slot ID: `logo_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the logo.
+
+## Examples
+
+### Modify URL
+
+The following `env.config.jsx` will modify the link href for the logo.
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyLogoHref = ( widget ) => {
+  widget.content.href = "https://openedx.org/";
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    logo_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyLogoHref,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Custom Component
+
+The following `env.config.jsx` will replace the logo entirely (in this case with a centered 🗺️ `h1`)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    logo_slot: {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_logo_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/LogoSlot/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import Logo from '../../Logo';
+
+const LogoSlot = ({
+  href, src, alt, ...attributes
+}) => (
+  <PluginSlot
+    id="logo_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <Logo href={href} src={src} alt={alt} {...attributes} />
+  </PluginSlot>
+);
+
+LogoSlot.propTypes = {
+  href: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+};
+
+export default LogoSlot;

src/plugin-slots/README.md

@@ -0,0 +1,3 @@
+# `frontend-component-header` Plugin Slots
+
+* [`logo_slot`](./LogoSlot/)

src/studio-header/HeaderBody.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
 import {
   ActionRow,
   Button,
@@ -37,6 +38,7 @@ const HeaderBody = ({
   mainMenuDropdowns,
   outlineLink,
   searchButtonAction,
+  containerProps,
 }) => {
   const intl = useIntl();
 
@@ -50,8 +52,14 @@ const HeaderBody = ({
     />
   );
 
+  const { className: containerClassName, ...restContainerProps } = containerProps || {};
+
   return (
-    <Container size="xl" className="px-2.5">
+    <Container
+      size="xl"
+      className={classNames('px-2.5', containerClassName)}
+      {...restContainerProps}
+    >
       <ActionRow as="header">
         {isHiddenMainMenu ? (
           <Row className="flex-nowrap ml-4">
@@ -110,6 +118,7 @@ const HeaderBody = ({
               iconAs={Icon}
               onClick={searchButtonAction}
               aria-label={intl.formatMessage(messages['header.label.search.nav'])}
+              alt={intl.formatMessage(messages['header.label.search.nav'])}
             />
           </Nav>
         )}
@@ -147,14 +156,15 @@ HeaderBody.propTypes = {
   isHiddenMainMenu: PropTypes.bool,
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
-    buttonTitle: PropTypes.string,
+    buttonTitle: PropTypes.node,
     items: PropTypes.arrayOf(PropTypes.shape({
       href: PropTypes.string,
-      title: PropTypes.string,
+      title: PropTypes.node,
     })),
   })),
   outlineLink: PropTypes.string,
   searchButtonAction: PropTypes.func,
+  containerProps: PropTypes.shape(Container.propTypes),
 };
 
 HeaderBody.defaultProps = {
@@ -174,6 +184,7 @@ HeaderBody.defaultProps = {
   mainMenuDropdowns: [],
   outlineLink: null,
   searchButtonAction: null,
+  containerProps: {},
 };
 
 export default HeaderBody;

src/studio-header/MobileHeader.jsx

@@ -48,10 +48,10 @@ MobileHeader.propTypes = {
   isAdmin: PropTypes.bool,
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
-    buttonTitle: PropTypes.string,
+    buttonTitle: PropTypes.node,
     items: PropTypes.arrayOf(PropTypes.shape({
       href: PropTypes.string,
-      title: PropTypes.string,
+      title: PropTypes.node,
     })),
   })),
   outlineLink: PropTypes.string,

src/studio-header/MobileMenu.jsx

@@ -37,10 +37,10 @@ const MobileMenu = ({
 MobileMenu.propTypes = {
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
-    buttonTitle: PropTypes.string,
+    buttonTitle: PropTypes.node,
     items: PropTypes.arrayOf(PropTypes.shape({
       href: PropTypes.string,
-      title: PropTypes.string,
+      title: PropTypes.node,
     })),
   })),
 };

src/studio-header/NavDropdownMenu.jsx

@@ -30,10 +30,10 @@ const NavDropdownMenu = ({
 
 NavDropdownMenu.propTypes = {
   id: PropTypes.string.isRequired,
-  buttonTitle: PropTypes.string.isRequired,
+  buttonTitle: PropTypes.node.isRequired,
   items: PropTypes.arrayOf(PropTypes.shape({
     href: PropTypes.string,
-    title: PropTypes.string,
+    title: PropTypes.node,
   })).isRequired,
 };
 

src/studio-header/StudioHeader.jsx

@@ -16,7 +16,7 @@ ensureConfig([
 ], 'Studio Header component');
 
 const StudioHeader = ({
-  number, org, title, isHiddenMainMenu, mainMenuDropdowns, outlineLink, searchButtonAction,
+  number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns, outlineLink, searchButtonAction,
 }) => {
   const { authenticatedUser, config } = useContext(AppContext);
   const props = {
@@ -25,6 +25,7 @@ const StudioHeader = ({
     number,
     org,
     title,
+    containerProps,
     username: authenticatedUser?.username,
     isAdmin: authenticatedUser?.administrator,
     authenticatedUserAvatar: authenticatedUser?.avatar,
@@ -53,13 +54,14 @@ StudioHeader.propTypes = {
   number: PropTypes.string,
   org: PropTypes.string,
   title: PropTypes.string.isRequired,
+  containerProps: HeaderBody.propTypes.containerProps,
   isHiddenMainMenu: PropTypes.bool,
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
-    buttonTitle: PropTypes.string,
+    buttonTitle: PropTypes.node,
     items: PropTypes.arrayOf(PropTypes.shape({
       href: PropTypes.string,
-      title: PropTypes.string,
+      title: PropTypes.node,
     })),
   })),
   outlineLink: PropTypes.string,
@@ -69,6 +71,7 @@ StudioHeader.propTypes = {
 StudioHeader.defaultProps = {
   number: '',
   org: '',
+  containerProps: {},
   isHiddenMainMenu: false,
   mainMenuDropdowns: [],
   outlineLink: null,