fix(deps): update dependency @fortawesome/react-fontawesome to v0.2.3 (#624)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -24,6 +24,8 @@ jobs:
       run: make validate-no-uncommitted-package-lock-changes
     - name: Lint
       run: npm run lint
+    - name: Type check
+      run: npm run types
     - name: Test
       run: npm run test
     - name: Build

.github/workflows/release.yml

@@ -25,6 +25,8 @@ jobs:
       run: make validate-no-uncommitted-package-lock-changes
     - name: Lint
       run: npm run lint
+    - name: Type check
+      run: npm run types
     - name: Test
       run: npm run test
     - name: i18n_extract

example/index.js

@@ -1,5 +1,3 @@
-import 'babel-polyfill';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';

package.json

@@ -10,18 +10,15 @@
     "build": "make build",
     "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage"
+    "test": "fedx-scripts jest --coverage",
+    "types": "tsc --noEmit"
   },
   "files": [
     "/dist"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openedx/frontend-component-header.git"
@@ -37,34 +34,30 @@
     "@edx/browserslist-config": "^1.1.1",
     "@edx/frontend-platform": "^8.3.1",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.2.2",
+    "@openedx/frontend-build": "^14.3.2",
     "@openedx/paragon": "^23.0.0",
-    "@testing-library/dom": "10.4.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "10.4.9",
-    "husky": "8.0.3",
-    "jest": "29.7.0",
-    "jest-chain": "1.1.6",
+    "@testing-library/react": "^16.2.0",
+    "jest": "30.0.5",
+    "jest-environment-jsdom": "^30.0.0",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.9",
-    "react-router-dom": "6.28.1",
-    "react-test-renderer": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^8.1.1",
+    "react-router-dom": "6.30.1",
+    "react-test-renderer": "^18.3.1",
     "redux": "4.2.1",
     "redux-saga": "1.3.0"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.6.0",
-    "@fortawesome/free-brands-svg-icons": "6.6.0",
-    "@fortawesome/free-regular-svg-icons": "6.6.0",
-    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.6.0",
-    "axios-mock-adapter": "1.22.0",
-    "babel-polyfill": "6.26.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
     "classnames": "^2.5.1",
-    "jest-environment-jsdom": "^29.7.0",
     "react-responsive": "8.2.0",
     "react-transition-group": "4.4.5"
   },
@@ -72,8 +65,8 @@
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
     "@openedx/paragon": ">= 22.0.0 < 24.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0",
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.14.2"
   }
 }

src/Header.test.jsx

@@ -33,6 +33,7 @@ describe('<Header />', () => {
     };
     const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
 
+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
@@ -56,6 +57,7 @@ describe('<Header />', () => {
     };
     const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
 
+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
@@ -74,6 +76,7 @@ describe('<Header />', () => {
     };
     const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;
 
+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();

src/desktop-header/DesktopHeader.jsx

@@ -22,7 +22,7 @@ import messages from '../Header.messages';
 import { CaretIcon } from '../Icons';
 
 class DesktopHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
+  constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
     super(props);
   }
 

src/frontend-platform.d.ts

@@ -0,0 +1,41 @@
+// frontend-platform currently doesn't provide types... do it ourselves for i18n module at least.
+// We can remove this in the future when we migrate to frontend-shell, or when frontend-platform gets types
+// (whichever comes first).
+
+declare module '@edx/frontend-platform/i18n' {
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  import { injectIntl as _injectIntl } from 'react-intl';
+  /** @deprecated Use useIntl() hook instead. */
+  export const injectIntl: typeof _injectIntl;
+  /** @deprecated Use useIntl() hook instead. */
+  export const intlShape: any;
+
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  export {
+    createIntl,
+    FormattedDate,
+    FormattedTime,
+    FormattedRelativeTime,
+    FormattedNumber,
+    FormattedPlural,
+    FormattedMessage,
+    defineMessages,
+    IntlProvider,
+    useIntl,
+  } from 'react-intl';
+
+  // Other exports from the i18n module:
+  export const configure: any;
+  export const getPrimaryLanguageSubtag: (code: string) => string;
+  export const getLocale: (locale?: string) => string;
+  export const getMessages: any;
+  export const isRtl: (locale?: string) => boolean;
+  export const handleRtl: any;
+  export const mergeMessages: any;
+  export const LOCALE_CHANGED: any;
+  export const LOCALE_TOPIC: any;
+  export const getCountryList: any;
+  export const getCountryMessages: any;
+  export const getLanguageList: any;
+  export const getLanguageMessages: any;
+}

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -37,7 +37,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 
   return (
     <Dropdown className="user-dropdown ml-3">
-      <Dropdown.Toggle variant="outline-primary">
+      <Dropdown.Toggle variant="outline-primary" aria-label={intl.formatMessage(messages.userOptionsDropdownLabel)}>
         <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
         <span data-hj-suppress className="d-none d-md-inline">
           {username}

src/learning-header/messages.js

@@ -36,6 +36,11 @@ const messages = defineMessages({
     defaultMessage: 'Sign Out',
     description: 'The label for the user menu Sign Out action.',
   },
+  userOptionsDropdownLabel: {
+    id: 'header.menu.aria-label',
+    defaultMessage: 'User Options',
+    description: 'The aria-label for the user options dropdown.',
+  },
 });
 
 export default messages;

src/mobile-header/MobileHeader.jsx

@@ -21,7 +21,7 @@ import messages from '../Header.messages';
 import { MenuIcon } from '../Icons';
 
 class MobileHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
+  constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
     super(props);
   }
 

src/plugin-slots/CourseInfoSlot/README.md

@@ -1,6 +1,9 @@
 # Course Info Slot
 
-### Slot ID: `course_info_slot`
+### Slot ID: `org.openedx.frontend.layout.header_learning_course_info.v1`
+
+### Slot ID Aliases
+* `course_info_slot`
 
 ## Description
 
@@ -24,7 +27,7 @@ const replaceCourseTitle = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    course_info_slot: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -51,7 +54,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    course_info_slot: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -83,7 +86,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    course_info_slot: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/CourseInfoSlot/index.jsx

@@ -9,7 +9,8 @@ const CourseInfoSlot = ({
   ...attributes
 }) => (
   <PluginSlot
-    id="course_info_slot"
+    id="org.openedx.frontend.layout.header_learning_course_info.v1"
+    idAliases={['course_info_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/DesktopHeaderSlot/README.md

@@ -1,6 +1,9 @@
 # Desktop Header Slot
 
-### Slot ID: `desktop_header_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop.v1`
+
+### Slot ID Aliases
+* `desktop_header_slot`
 
 ## Description
 
@@ -19,7 +22,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_header_slot: {
+    'org.openedx.frontend.layout.header_desktop.v1': {
       keepDefault: false,
       plugins: [
         {

src/plugin-slots/DesktopHeaderSlot/index.jsx

@@ -6,7 +6,8 @@ const DesktopHeaderSlot = ({
   props,
 }) => (
   <PluginSlot
-    id="desktop_header_slot"
+    id="org.openedx.frontend.layout.header_desktop.v1"
+    idAliases={['desktop_header_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/DesktopLoggedOutItemsSlot/README.md

@@ -1,6 +1,9 @@
 # Desktop Logged Out Items Slot
 
-### Slot ID: `desktop_logged_out_items_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop_logged_out_items.v1`
+
+### Slot ID Aliases
+* `desktop_logged_out_items_slot`
 
 ## Description
 
@@ -40,7 +43,7 @@ const modifyLoggedOutItems = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    desktop_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_desktop_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -67,7 +70,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_desktop_logged_out_items.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -99,7 +102,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_desktop_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/DesktopLoggedOutItemsSlot/index.jsx

@@ -6,7 +6,8 @@ const DesktopLoggedOutItemsSlot = ({
   items,
 }) => (
   <PluginSlot
-    id="desktop_logged_out_items_slot"
+    id="org.openedx.frontend.layout.header_desktop_logged_out_items.v1"
+    idAliases={['desktop_logged_out_items_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/DesktopMainMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Desktop Main Menu Slot
 
-### Slot ID: `desktop_main_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop_main_menu.v1`
+
+### Slot ID Aliases
+* `desktop_main_menu_slot`
 
 ## Description
 
@@ -40,7 +43,7 @@ const modifyMainMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    desktop_main_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_main_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -67,7 +70,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_main_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_main_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -99,7 +102,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_main_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_main_menu.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/DesktopMainMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const DesktopMainMenuSlot = ({
   menu,
 }) => (
   <PluginSlot
-    id="desktop_main_menu_slot"
+    id="org.openedx.frontend.layout.header_desktop_main_menu.v1"
+    idAliases={['desktop_main_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/DesktopSecondaryMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Desktop Secondary Menu Slot
 
-### Slot ID: `desktop_secondary_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop_secondary_menu.v1`
+
+### Slot ID Aliases
+* `desktop_secondary_menu_slot`
 
 ## Description
 
@@ -35,7 +38,7 @@ const modifySecondaryMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    desktop_secondary_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -62,7 +65,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_secondary_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -94,7 +97,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_secondary_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const DesktopSecondaryMenuSlot = ({
   menu,
 }) => (
   <PluginSlot
-    id="desktop_secondary_menu_slot"
+    id="org.openedx.frontend.layout.header_desktop_secondary_menu.v1"
+    idAliases={['desktop_secondary_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/DesktopUserMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Desktop User Menu Slot
 
-### Slot ID: `desktop_user_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop_user_menu.v1`
+
+### Slot ID Aliases
+* `desktop_user_menu_slot`
 
 ## Description
 
@@ -48,7 +51,7 @@ const modifyUserMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    desktop_user_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -75,7 +78,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_user_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -107,7 +110,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    desktop_user_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/DesktopUserMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const DesktopUserMenuSlot = ({
   menu,
 }) => (
   <PluginSlot
-    id="desktop_user_menu_slot"
+    id="org.openedx.frontend.layout.header_desktop_user_menu.v1"
+    idAliases={['desktop_user_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/LearningHelpSlot/README.md

@@ -1,6 +1,9 @@
 # Learning Help Slot
 
-### Slot ID: `learning_help_slot`
+### Slot ID: `org.openedx.frontend.layout.header_learning_help.v1`
+
+### Slot ID Aliases
+* `learning_help_slot`
 
 ## Description
 
@@ -19,7 +22,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    learning_help_slot: {
+    'org.openedx.frontend.layout.header_learning_help.v1': {
       keepDefault: false,
       plugins: [
         {

src/plugin-slots/LearningHelpSlot/index.jsx

@@ -3,7 +3,7 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import LearningHeaderHelpLink from '../../learning-header/LearningHeaderHelpLink';
 
 const LearningHelpSlot = () => (
-  <PluginSlot id="learning_help_slot">
+  <PluginSlot id="org.openedx.frontend.layout.header_learning_help.v1" idAliases={['learning_help_slot']}>
     <LearningHeaderHelpLink />
   </PluginSlot>
 );

src/plugin-slots/LearningLoggedOutItemsSlot/README.md

@@ -1,6 +1,9 @@
 # Learning Logged Out Items Slot
 
-### Slot ID: `learning_logged_out_items_slot`
+### Slot ID: `org.openedx.frontend.layout.header_learning_logged_out_items.v1`
+
+### Slot ID Aliases
+* `learning_logged_out_items_slot`
 
 ## Description
 
@@ -38,7 +41,7 @@ const modifyLoggedOutItems = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    learning_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -65,7 +68,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    learning_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -97,7 +100,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    learning_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx

@@ -6,7 +6,8 @@ const LearningLoggedOutItemsSlot = ({
   buttonsInfo,
 }) => (
   <PluginSlot
-    id="learning_logged_out_items_slot"
+    id="org.openedx.frontend.layout.header_learning_logged_out_items.v1"
+    idAliases={['learning_logged_out_items_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/LearningUserMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Learning User Menu Slot
 
-### Slot ID: `learning_user_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_learning_user_menu.v1`
+
+### Slot ID Aliases
+* `learning_user_menu_slot`
 
 ## Description
 
@@ -37,7 +40,7 @@ const modifyUserMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    learning_user_menu_slot: {
+    'org.openedx.frontend.layout.header_learning_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -64,7 +67,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    learning_user_menu_slot: {
+    'org.openedx.frontend.layout.header_learning_user_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -96,7 +99,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    learning_user_menu_slot: {
+    'org.openedx.frontend.layout.header_learning_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/LearningUserMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const LearningUserMenuSlot = ({
   items,
 }) => (
   <PluginSlot
-    id="learning_user_menu_slot"
+    id="org.openedx.frontend.layout.header_learning_user_menu.v1"
+    idAliases={['learning_user_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/LogoSlot/README.md

@@ -1,6 +1,9 @@
 # Logo Slot
 
-### Slot ID: `logo_slot`
+### Slot ID: `org.openedx.frontend.layout.header_logo.v1`
+
+### Slot ID Aliases
+* `logo_slot`
 
 ## Description
 
@@ -22,7 +25,7 @@ const modifyLogoHref = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    logo_slot: {
+    'org.openedx.frontend.layout.header_logo.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -47,7 +50,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    logo_slot: {
+    'org.openedx.frontend.layout.header_logo.v1': {
       keepDefault: false,
       plugins: [
         {

src/plugin-slots/LogoSlot/index.jsx

@@ -6,7 +6,8 @@ const LogoSlot = ({
   href, src, alt, ...attributes
 }) => (
   <PluginSlot
-    id="logo_slot"
+    id="org.openedx.frontend.layout.header_logo.v1"
+    idAliases={['logo_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/MobileHeaderSlot/README.md

@@ -1,6 +1,9 @@
 # Mobile Header Slot
 
-### Slot ID: `mobile_header_slot`
+### Slot ID: `org.openedx.frontend.layout.header_mobile.v1`
+
+### Slot ID Aliases
+* `mobile_header_slot`
 
 ## Description
 
@@ -19,7 +22,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_header_slot: {
+    'org.openedx.frontend.layout.header_mobile.v1': {
       keepDefault: false,
       plugins: [
         {

src/plugin-slots/MobileHeaderSlot/index.jsx

@@ -6,7 +6,8 @@ const MobileHeaderSlot = ({
   props,
 }) => (
   <PluginSlot
-    id="mobile_header_slot"
+    id="org.openedx.frontend.layout.header_mobile.v1"
+    idAliases={['mobile_header_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/MobileLoggedOutItemsSlot/README.md

@@ -1,6 +1,9 @@
 # Mobile Logged Out Items Slot
 
-### Slot ID: `mobile_logged_out_items_slot`
+### Slot ID: `org.openedx.frontend.layout.header_mobile_logged_out_items.v1`
+
+### Slot ID Aliases
+* `mobile_logged_out_items_slot`
 
 ## Description
 
@@ -40,7 +43,7 @@ const modifyLoggedOutItems = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    mobile_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_mobile_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -67,7 +70,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_mobile_logged_out_items.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -99,7 +102,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_mobile_logged_out_items.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -131,4 +134,3 @@ const config = {
 
 export default config;
 ```
-

src/plugin-slots/MobileLoggedOutItemsSlot/index.jsx

@@ -6,7 +6,8 @@ const MobileLoggedOutItemsSlot = ({
   items,
 }) => (
   <PluginSlot
-    id="mobile_logged_out_items_slot"
+    id="org.openedx.frontend.layout.header_mobile_logged_out_items.v1"
+    idAliases={['mobile_logged_out_items_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/MobileMainMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Mobile Main Menu Slot
 
-### Slot ID: `mobile_main_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_mobile_main_menu.v1`
+
+### Slot ID Aliases
+* `mobile_main_menu_slot`
 
 ## Description
 
@@ -40,7 +43,7 @@ const modifyMainMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    mobile_main_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -67,7 +70,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_main_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -99,7 +102,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_main_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -131,4 +134,3 @@ const config = {
 
 export default config;
 ```
-

src/plugin-slots/MobileMainMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const MobileMainMenuSlot = ({
   menu,
 }) => (
   <PluginSlot
-    id="mobile_main_menu_slot"
+    id="org.openedx.frontend.layout.header_mobile_main_menu.v1"
+    idAliases={['mobile_main_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/MobileUserMenuSlot/README.md

@@ -1,6 +1,9 @@
 # Mobile User Menu Slot
 
-### Slot ID: `mobile_user_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_mobile_user_menu.v1`
+
+### Slot ID Aliases
+* `mobile_user_menu_slot`
 
 ## Description
 
@@ -48,7 +51,7 @@ const modifyUserMenu = ( widget ) => {
 
 const config = {
   pluginSlots: {
-    mobile_user_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -75,7 +78,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_user_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
       keepDefault: false,
       plugins: [
         {
@@ -107,7 +110,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    mobile_user_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
       keepDefault: true,
       plugins: [
         {
@@ -139,4 +142,3 @@ const config = {
 
 export default config;
 ```
-

src/plugin-slots/MobileUserMenuSlot/index.jsx

@@ -6,7 +6,8 @@ const MobileUserMenuSlot = ({
   menu,
 }) => (
   <PluginSlot
-    id="mobile_user_menu_slot"
+    id="org.openedx.frontend.layout.header_mobile_user_menu.v1"
+    idAliases={['mobile_user_menu_slot']}
     slotOptions={{
       mergeProps: true,
     }}

src/plugin-slots/README.md

@@ -1,15 +1,23 @@
 # `frontend-component-header` Plugin Slots
 
-* [`logo_slot`](./LogoSlot/)
-* [`desktop_main_menu_slot`](./DesktopMainMenuSlot/)
-* [`desktop_secondary_menu_slot`](./DesktopSecondaryMenuSlot/)
-* [`mobile_main_menu_slot`](./MobileMainMenuSlot/)
-* [`course_info_slot`](./CourseInfoSlot/)
-* [`learning_help_slot`](./LearningHelpSlot/)
-* [`desktop_logged_out_items_slot`](./DesktopLoggedOutItemsSlot/)
-* [`mobile_logged_out_items_slot`](./MobileLoggedOutItemsSlot/)
-* [`mobile_user_menu_slot`](./MobileUserMenuSlot/)
-* [`desktop_user_menu_slot`](./DesktopUserMenuSlot/)
-* [`learning_user_menu_slot`](./LearningUserMenuSlot/)
-* [`learning_logged_out_items_slot`](./LearningLoggedOutItemsSlot/)
-* [`desktop_header_slot`](./DesktopHeaderSlot/)
+### Shared
+* [`org.openedx.frontend.layout.header_logo.v1`](./LogoSlot/)
+
+### Desktop Header
+* [`org.openedx.frontend.layout.header_desktop.v1`](./DesktopHeaderSlot/)
+* [`org.openedx.frontend.layout.header_desktop_logged_out_items.v1`](./DesktopLoggedOutItemsSlot/)
+* [`org.openedx.frontend.layout.header_desktop_main_menu.v1`](./DesktopMainMenuSlot/)
+* [`org.openedx.frontend.layout.header_desktop_secondary_menu.v1`](./DesktopSecondaryMenuSlot/)
+* [`org.openedx.frontend.layout.header_desktop_user_menu.v1`](./DesktopUserMenuSlot/)
+
+### Learning Header
+* [`org.openedx.frontend.layout.header_learning_course_info.v1`](./CourseInfoSlot/)
+* [`org.openedx.frontend.layout.header_learning_help.v1`](./LearningHelpSlot/)
+* [`org.openedx.frontend.layout.header_learning_logged_out_items.v1`](./LearningLoggedOutItemsSlot/)
+* [`org.openedx.frontend.layout.header_learning_user_menu.v1`](./LearningUserMenuSlot/)
+
+### Mobile Header
+* [`org.openedx.frontend.layout.header_mobile.v1`](./MobileHeaderSlot/)
+* [`org.openedx.frontend.layout.header_mobile_logged_out_items.v1`](./MobileLoggedOutItemsSlot/)
+* [`org.openedx.frontend.layout.header_mobile_main_menu.v1`](./MobileMainMenuSlot/)
+* [`org.openedx.frontend.layout.header_mobile_user_menu.v1`](./MobileUserMenuSlot/)

src/setupTest.js

@@ -4,8 +4,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
-import 'babel-polyfill';
-import 'jest-chain';
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { configure as configureLogging } from '@edx/frontend-platform/logging';
 import { configure as configureI18n } from '@edx/frontend-platform/i18n';

src/studio-header/BrandNav.test.tsx

@@ -34,7 +34,7 @@ describe('BrandNav Component', () => {
   it('displays a link that navigates to studioBaseUrl', () => {
     render(<RootWrapper />);
 
-    const link = screen.getByRole('link');
+    const link = screen.getByRole('link') as HTMLAnchorElement;
     expect(link.href).toBe(studioBaseUrl);
   });
 });

src/studio-header/CourseLockUp.test.tsx

@@ -16,7 +16,7 @@ const mockProps = {
 
 const RootWrapper = (props) => (
   <MemoryRouter>
-    <IntlProvider locale="en" messages={messages}>
+    <IntlProvider locale="en" messages={{}}>
       <CourseLockUp {...props} />
     </IntlProvider>
   </MemoryRouter>
@@ -52,7 +52,8 @@ describe('CourseLockUp Component', () => {
   it('navigates to an absolute URL when clicked', () => {
     render(<RootWrapper {...mockProps} />);
 
-    const link = screen.getByTestId('course-lock-up-block');
+    // FIXME: don't use testId - https://testing-library.com/docs/queries/about#priority
+    const link = screen.getByTestId('course-lock-up-block') as HTMLAnchorElement;
     expect(link.href).toBe(mockProps.outlineLink);
   });
 });

src/studio-header/HeaderBody.test.tsx

@@ -35,7 +35,7 @@ const defaultProps = {
 
 const RootWrapper = (props) => (
   <MemoryRouter>
-    <IntlProvider locale="en" messages={messages}>
+    <IntlProvider locale="en" messages={{}}>
       <HeaderBody {...props} />
     </IntlProvider>
   </MemoryRouter>

src/studio-header/HeaderBody.tsx

@@ -135,6 +135,7 @@ const HeaderBody = ({
               logoutUrl,
               authenticatedUserAvatar,
               isAdmin,
+              isMobile,
             }}
           />
         </Nav>

src/studio-header/MobileHeader.tsx

@@ -13,6 +13,7 @@ const MobileHeader = ({
 
   return (
     <>
+      {/* @ts-expect-error The type of 'props' is any until we convert from propTypes to TypeScript interface/types */}
       <HeaderBody
         {...props}
         isMobile
@@ -36,16 +37,16 @@ const MobileHeader = ({
 };
 
 MobileHeader.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired,
-  logoutUrl: PropTypes.string.isRequired,
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  authenticatedUserAvatar: PropTypes.string,
-  username: PropTypes.string,
-  isAdmin: PropTypes.bool,
+  studioBaseUrl: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
+  logoutUrl: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
+  number: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  org: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  title: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  logo: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  logoAltText: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  authenticatedUserAvatar: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  username: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  isAdmin: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     buttonTitle: PropTypes.node,
@@ -54,7 +55,7 @@ MobileHeader.propTypes = {
       title: PropTypes.node,
     })),
   })),
-  outlineLink: PropTypes.string,
+  outlineLink: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
 };
 
 MobileHeader.defaultProps = {

src/studio-header/StudioHeader.test.tsx

@@ -26,7 +26,7 @@ let screenWidth = 1280;
 
 const RootWrapper = ({
   ...props
-}) => {
+}: React.ComponentProps<typeof StudioHeader>) => {
   const appContextValue = useMemo(() => ({
     authenticatedUser: currentUser,
     config: {
@@ -55,7 +55,7 @@ const RootWrapper = ({
   );
 };
 
-const props = {
+const props: React.ComponentProps<typeof StudioHeader> = {
   number: '123',
   org: 'Ed',
   title: 'test',
@@ -74,6 +74,10 @@ const props = {
   outlineLink: 'tEsTLInK',
   searchButtonAction: null,
   isNewHomePage: true,
+  // These default values shouldn't be needed but typescript is confused by propTypes; can remove after converting
+  // from propTypes to TypeScript:
+  containerProps: {},
+  isHiddenMainMenu: false,
 };
 
 describe('Header', () => {

src/studio-header/StudioHeader.tsx

@@ -19,6 +19,7 @@ const StudioHeader = ({
   number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns,
   outlineLink, searchButtonAction, isNewHomePage,
 }) => {
+  // @ts-expect-error - frontend-platform doesn't yet have type information :/
   const { authenticatedUser, config } = useContext(AppContext);
   const props = {
     logo: config.LOGO_URL,

tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "extends": "@edx/typescript-config",
+    "compilerOptions": {
+      "noEmit": true,
+      "baseUrl": "./src",
+      "paths": {
+        "*": ["*"]
+      }
+    },
+    "include": ["*.js", ".eslintrc.js", "src/**/*", "plugins/**/*"],
+    "exclude": ["dist", "node_modules"]
+}