feat: standardize slot ids (#589)

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

.gitignore

@@ -9,4 +9,4 @@ module.config.js
 .idea/
 
 .vscode
-src/i18n/messages
+src/i18n/messages

catalog-info.yaml

@@ -0,0 +1,14 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-component-header"
+  description: "A generic header for the Open edX micro-frontend applications."
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:committers-frontend
+  type: "library"
+  lifecycle: "production"

example/index.scss

@@ -1,6 +1,4 @@
-@import "@edx/brand/paragon/fonts";
-@import "@edx/brand/paragon/variables";
-@import "@openedx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
+@use "@openedx/paragon/dist/core.min.css" as paragonCore;
+@use "@openedx/paragon/dist/light.min.css" as paragonLight;
 
 @import "@edx/frontend-component-header/index";

openedx.yaml

@@ -1,8 +0,0 @@
-# openedx.yaml
-
----
-owner: edx/fedx-team
-tags:
-  - library
-  - component
-  - react

package.json

@@ -10,6 +10,7 @@
     "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"
@@ -17,11 +18,6 @@
   "files": [
     "/dist"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openedx/frontend-component-header.git"
@@ -35,22 +31,21 @@
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "8.1.2",
+    "@edx/frontend-platform": "^8.3.1",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.2.2",
-    "@openedx/paragon": "22.10.0",
-    "@testing-library/dom": "10.4.0",
+    "@openedx/frontend-build": "^14.3.2",
+    "@openedx/paragon": "^23.0.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "10.4.9",
-    "husky": "8.0.3",
+    "@testing-library/react": "^16.2.0",
     "jest": "29.7.0",
     "jest-chain": "1.1.6",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.9",
-    "react-router-dom": "6.28.0",
-    "react-test-renderer": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^8.1.1",
+    "react-router-dom": "6.28.1",
+    "react-test-renderer": "^18.3.1",
     "redux": "4.2.1",
     "redux-saga": "1.3.0"
   },
@@ -60,7 +55,7 @@
     "@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",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
     "axios-mock-adapter": "1.22.0",
     "babel-polyfill": "6.26.0",
     "classnames": "^2.5.1",
@@ -70,10 +65,10 @@
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
-    "@openedx/paragon": ">= 21.5.7 < 23.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.messages.jsx

@@ -61,6 +61,11 @@ const messages = defineMessages({
     defaultMessage: 'Studio Home',
     description: 'Link to the Studio Home',
   },
+  'header.user.menu.studio.maintenance': {
+    id: 'header.user.menu.studio.maintenance',
+    defaultMessage: 'Maintenance',
+    description: 'Link to the Studio Maintenance',
+  },
   'header.label.account.nav': {
     id: 'header.label.account.nav',
     defaultMessage: 'Account',

src/Menu/menu.scss

@@ -1,45 +1,45 @@
 .menu {
   position: relative;
 }
+
 .menu-content {
   position: absolute;
   top: 100%;
   z-index: 10;
-  background: #fff;
+  background: var(--pgn-color-white, #fff);
   min-width: 10rem;
+
   &.pin-left {
     left: 0;
   }
+
   &.pin-right {
     right: 0;
   }
 }
 
-
 .menu-dropdown-enter {
   opacity: 0;
   transform-origin: 75% 0;
   transform: scale3d(0.8, 0.8, 1);
 }
+
 .menu-dropdown-enter-active {
   transform-origin: 75% 0;
   transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
   transform: scale3d(1, 1, 1);
   opacity: 1;
 }
-.menu-dropdown-enter-done {
-}
 
 .menu-dropdown-exit {
   transform-origin: 75% 0;
   transform: scale3d(1, 1, 1);
   opacity: 1;
 }
+
 .menu-dropdown-exit-active {
   transform-origin: 75% 0;
   transform: scale3d(0.8, 0.8, 1);
   transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
   opacity: 0;
 }
-.menu-dropdown-exit-done {
-}

src/index.scss

@@ -1,6 +1,9 @@
 $spacer: 1rem;
 $blue: #007db8;
 $white: #fff;
+$component-active-bg: #0A3055FF !default;
+$component-active-color: $white !default;
+$rounded-pill: 50rem  !default;
 
 @import './Menu/menu.scss';
 @import './studio-header/StudioHeader.scss';
@@ -21,8 +24,9 @@ $white: #fff;
   padding: .75rem;
   justify-content: center;
   align-items:center;
+
   &:hover, &:focus {
-    background: rgba(0,0,0,.1);
+    background: rgba(0, 0, 0, .1);
   }
 }
 
@@ -36,17 +40,12 @@ $white: #fff;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      padding-bottom: 0.1rem;
+      padding-bottom: calc(var(--pgn-spacing-spacer-base, $spacer)* 0.1);
     }
   }
 
-  .user-dropdown {
-    .btn {
-      height: 3rem;
-      // @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-      //   padding: 0 0.5rem;
-      // }
-    }
+  .user-dropdown .btn {
+    height: 3rem;
   }
 }
 
@@ -63,6 +62,7 @@ $white: #fff;
     text-decoration: none;
     cursor: pointer;
   }
+
   img {
     height: 1.5rem;
   }
@@ -70,19 +70,22 @@ $white: #fff;
 
 
 .site-header-desktop {
-  box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
-  background: $white;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
+  background: var(--pgn-color-white, $white);
+
   .nav-link {
     text-decoration: none;
   }
+
   .logo {
     display: block;
     box-sizing: content-box;
     position: relative;
     top: -.05em;
     height: 1.75rem;
-    padding: 1rem 0;
-    margin-right: 1rem;
+    padding: var(--pgn-spacing-spacer-base, $spacer) 0;
+    margin-right: var(--pgn-spacing-spacer-base, $spacer);
+
     img {
       display: block;
       height: 100%;
@@ -93,38 +96,42 @@ $white: #fff;
     .nav-link:focus,
     .nav-link.active,
     .expanded .nav-link {
-      background: $component-active-bg;
-      color: $component-active-color;
+      background: var(--pgn-color-bg-active, $component-active-bg);
+      color: var(--pgn-color-active, $component-active-color);
     }
   }
   .main-nav {
     .nav-link {
-      padding: 1.125rem 1rem;
+      padding: 1.125rem var(--pgn-spacing-spacer-base, $spacer);
       text-decoration: none;
       font-weight: 500;
       letter-spacing: .01em;
     }
+
     .nav-link:hover,
     .nav-link:focus,
     .nav-link.active,
     .expanded .nav-link {
-      background: $component-active-bg;
-      color: $component-active-color;
+      background: var(--pgn-color-bg-active, $component-active-bg);
+      color: var(--pgn-color-active, $component-active-color);
     }
+
     .menu {
       position: static;
+
       .menu-content {
-        border-top: solid 2px $component-active-bg;
+        border-top: solid 2px var(--pgn-color-bg-active);
         left: 0;
         right: 0;
-        box-shadow: 0 1px 2px rgba(0,0,0,.25);
+        box-shadow: var(--pgn-elevation-box-shadow-down-1, 0 1px 2px rgba(0,0,0,.25));
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
-        padding: 1rem;
+        padding: var(--pgn-spacing-spacer-base, $spacer);
       }
     }
   }
+
   .search-input {
-    border-radius: $rounded-pill;
+    border-radius: var(--pgn-size-rounded-pill, $rounded-pill);
   }
 }

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/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/studio-header/MobileHeader.jsx

@@ -36,16 +36,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 +54,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.scss

@@ -7,10 +7,10 @@ $white: #FFFFFF;
 
   height: 3.75rem;
   box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
-  background: $white;
+  background: var(--pgn-color-white, $white);
 
   .btn-outline-primary {
-    border-color: $white;
+    border-color: var(--pgn-color-white, $white);
   }
 
   .logo {
@@ -19,8 +19,8 @@ $white: #FFFFFF;
     position: relative;
     top: -.05em;
     height: 1.75rem;
-    padding: $spacer 0;
-    margin-right: $spacer;
+    padding: var(--pgn-spacing-spacer-base, $spacer) 0;
+    margin-right: var(--pgn-spacing-spacer-base, $spacer);
 
     img {
       display: block;
@@ -33,13 +33,13 @@ $white: #FFFFFF;
 
     @media only screen and (min-width: 769px) {
       padding: .5rem;
-      padding-right: $spacer;
+      padding-right: var(--pgn-spacing-spacer-base, $spacer);
       border-right: 1px solid #E5E5E5;
       width: 70%;
     }
   
     span {
-      color: #333333;
+      color: var(--pgn-color-gray-800, #333333);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;

src/studio-header/StudioHeader.test.jsx

@@ -12,6 +12,7 @@ import { Context as ResponsiveContext } from 'react-responsive';
 import { MemoryRouter } from 'react-router-dom';
 
 import StudioHeader from './StudioHeader';
+import messages from './messages';
 
 const authenticatedUser = {
   userId: 3,
@@ -114,6 +115,16 @@ describe('Header', () => {
       expect(dropdownOption).toBeVisible();
     });
 
+    it('maintenance should not be in user menu', async () => {
+      currentUser = { ...authenticatedUser, administrator: false };
+      const { getAllByRole, queryByText } = render(<RootWrapper {...props} />);
+      const userMenu = getAllByRole('button')[1];
+      await waitFor(() => fireEvent.click(userMenu));
+      const maintenanceButton = queryByText(messages['header.user.menu.maintenance'].defaultMessage);
+
+      expect(maintenanceButton).toBeNull();
+    });
+
     it('user menu should use avatar icon', async () => {
       currentUser = { ...authenticatedUser, avatar: null };
       const { getByTestId } = render(<RootWrapper {...props} />);
@@ -175,6 +186,15 @@ describe('Header', () => {
       expect(desktopMenu).toBeNull();
     });
 
+    it('maintenance should be in user menu', async () => {
+      const { getAllByRole, getByText } = render(<RootWrapper {...props} />);
+      const userMenu = getAllByRole('button')[1];
+      await waitFor(() => fireEvent.click(userMenu));
+      const maintenanceButton = getByText(messages['header.user.menu.maintenance'].defaultMessage);
+
+      expect(maintenanceButton).toBeVisible();
+    });
+
     it('user menu should use avatar image', async () => {
       const { getByTestId } = render(<RootWrapper {...props} />);
       const avatarImage = getByTestId('avatar-image');

src/studio-header/messages.js

@@ -6,6 +6,11 @@ const messages = defineMessages({
     defaultMessage: 'Studio Home',
     description: 'Link to Studio Home',
   },
+  'header.user.menu.maintenance': {
+    id: 'header.user.menu.maintenance',
+    defaultMessage: 'Maintenance',
+    description: 'Link to the Studio maintenance page',
+  },
   'header.user.menu.logout': {
     id: 'header.user.menu.logout',
     defaultMessage: 'Logout',

src/studio-header/utils.js

@@ -1,3 +1,4 @@
+import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 
 const getUserMenuItems = ({
@@ -20,6 +21,9 @@ const getUserMenuItems = ({
       {
         href: `${studioBaseUrl}`,
         title: intl.formatMessage(messages['header.user.menu.studio']),
+      }, {
+        href: `${getConfig().STUDIO_BASE_URL}/maintenance`,
+        title: intl.formatMessage(messages['header.user.menu.maintenance']),
       }, {
         href: `${logoutUrl}`,
         title: intl.formatMessage(messages['header.user.menu.logout']),

webpack.dev.config.js

@@ -2,7 +2,9 @@ const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
+  entry: {
+    app: path.resolve(__dirname, 'example'),
+  },
   output: {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',