build: update lock file

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

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
     - name: Setup Nodejs Env
       run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ env.NODE_VER }}
     - name: Install dependencies

.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
     - name: Setup Nodejs Env
       run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ env.NODE_VER }}
     - name: Install dependencies

Makefile

@@ -6,7 +6,7 @@ i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 build:
 	rm -rf ./dist
@@ -17,7 +17,7 @@ build:
 	@rm -rf dist/__mocks__
 
 requirements:
-	npm install
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...

example/index.js

@@ -7,6 +7,7 @@ import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import Header from '@edx/frontend-component-header';
 
 import './index.scss';
+import StudioHeader from '../src/studio-header/StudioHeader';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
@@ -32,7 +33,35 @@ subscribe(APP_READY, () => {
       }}>
         <Header />
       </AppContext.Provider>
-      <h5 className="mt-2">Logged in state</h5>
+      <h5 className="mt-2  mb-5">Logged in state</h5>
+      <AppContext.Provider value={{
+        authenticatedUser: {
+          userId: '123abc',
+          username: 'testuser',
+          roles: [],
+          administrator: false,
+        },
+        config: getConfig(),
+      }}>
+        <StudioHeader
+          number="run123"
+          org="testX"
+          title="Course Name"
+          isHiddenMainMenu={false}
+          mainMenuDropdowns={[
+            {
+              id: 'content-dropdown',
+              buttonTitle: 'Content',
+              items: [{
+                href: '#',
+                title: 'Outline',
+              }],
+            },
+          ]}
+          outlineLink="#"
+        />
+      </AppContext.Provider>
+      <h5 className="mt-2">Logged in state for Studio header</h5>
     </AppProvider>,
     document.getElementById('root'),
   );

package.json

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "build": "make build",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
@@ -33,10 +33,10 @@
   },
   "homepage": "https://github.com/openedx/frontend-component-header#readme",
   "devDependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.17",
-    "@edx/frontend-platform": "6.0.0",
+    "@edx/frontend-build": "13.0.8",
+    "@edx/frontend-platform": "6.1.0",
     "@edx/reactifex": "^2.1.1",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "5.17.0",
@@ -50,19 +50,19 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-redux": "7.2.9",
-    "react-router-dom": "6.16.0",
+    "react-router-dom": "6.20.0",
     "react-test-renderer": "17.0.2",
     "redux": "4.2.1",
     "redux-saga": "1.2.3"
   },
   "dependencies": {
-    "@edx/paragon": "21.5.3",
+    "@edx/paragon": "21.5.6",
     "@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",
-    "axios-mock-adapter": "1.21.5",
+    "axios-mock-adapter": "1.22.0",
     "babel-polyfill": "6.26.0",
     "react-responsive": "8.2.0",
     "react-transition-group": "4.4.5"

src/Header.jsx

@@ -22,6 +22,7 @@ ensureConfig([
   'SITE_NAME',
   'LOGO_URL',
   'ORDER_HISTORY_URL',
+  'ACCOUNT_PROFILE_URL',
 ], 'Header component');
 
 subscribe(APP_CONFIG_INITIALIZED, () => {

src/Menu/Menu.jsx

@@ -14,7 +14,8 @@ MenuTrigger.defaultProps = {
   tag: 'div',
   className: null,
 };
-const MenuTriggerType = <MenuTrigger />.type;
+const MenuTriggerComp = <MenuTrigger />;
+const MenuTriggerType = MenuTriggerComp.type;
 
 const MenuContent = ({ tag, className, ...attributes }) => React.createElement(tag, {
   className: ['menu-content', className].join(' '),

src/i18n/messages/ar.json

@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "التسجيل",
-  "general.signIn.sentenceCase": "تسجيل الدخول",
   "header.links.courses": "المساقات",
   "header.links.programs": "البرامج",
   "header.links.content.search": "اكتشف الجديد",
@@ -23,6 +21,8 @@
   "header.label.secondary.nav": "القائمة الثانوية",
   "header.label.skip.nav": "التخطي إلى المحتوى الرئيسي",
   "header.label.app.nav": "تطبيق",
+  "general.register.sentenceCase": "التسجيل",
+  "general.signIn.sentenceCase": "تسجيل الدخول",
   "header.menu.dashboard.label": "لوحة المعلومات",
   "header.help.label": "المساعدة",
   "header.menu.profile.label": "الملف الشخصي",
@@ -30,26 +30,6 @@
   "header.menu.orderHistory.label": "سجل الطلبيات",
   "header.navigation.skipNavLink": "التخطي إلى المحتوى الرئيسي",
   "header.menu.signOut.label": "تسجيل الخروج",
-  "header.links.content": "Content",
-  "header.links.settings": "Settings",
-  "header.links.content.tools": "Tools",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Updates",
-  "header.links.pages": "Pages & Resources",
-  "header.links.filesAndUploads": "Files & Uploads",
-  "header.links.textbooks": "Textbooks",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Schedule & Details",
-  "header.links.grading": "Grading",
-  "header.links.courseTeam": "Course Team",
-  "header.links.groupConfigurations": "Group Configurations",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Advanced Settings",
-  "header.links.certificates": "Certificates",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Import",
-  "header.links.export": "Export",
-  "header.links.checklists": "Checklists",
   "header.user.menu.studio": "Studio Home",
   "header.user.menu.maintenance": "Maintenance",
   "header.label.courseOutline": "Back to course outline in Studio"

src/i18n/messages/de.json

@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
   "header.links.courses": "Courses",
   "header.links.programs": "Programs",
   "header.links.content.search": "Discover New",
@@ -23,6 +21,8 @@
   "header.label.secondary.nav": "Secondary",
   "header.label.skip.nav": "Skip to main content",
   "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
   "header.menu.dashboard.label": "Dashboard",
   "header.help.label": "Help",
   "header.menu.profile.label": "Profile",
@@ -30,26 +30,6 @@
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
   "header.menu.signOut.label": "Sign Out",
-  "header.links.content": "Content",
-  "header.links.settings": "Settings",
-  "header.links.content.tools": "Tools",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Updates",
-  "header.links.pages": "Pages & Resources",
-  "header.links.filesAndUploads": "Files & Uploads",
-  "header.links.textbooks": "Textbooks",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Schedule & Details",
-  "header.links.grading": "Grading",
-  "header.links.courseTeam": "Course Team",
-  "header.links.groupConfigurations": "Group Configurations",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Advanced Settings",
-  "header.links.certificates": "Certificates",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Import",
-  "header.links.export": "Export",
-  "header.links.checklists": "Checklists",
   "header.user.menu.studio": "Studio Home",
   "header.user.menu.maintenance": "Maintenance",
   "header.label.courseOutline": "Back to course outline in Studio"

src/i18n/messages/es_419.json

@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Registrarse",
-  "general.signIn.sentenceCase": "Iniciar sesión",
   "header.links.courses": "Cursos",
   "header.links.programs": "Programas",
   "header.links.content.search": "Encontrar nuevo",
@@ -23,6 +21,8 @@
   "header.label.secondary.nav": "Secondary",
   "header.label.skip.nav": "Ir al contenido principal",
   "header.label.app.nav": "Aplicación",
+  "general.register.sentenceCase": "Registrarse",
+  "general.signIn.sentenceCase": "Iniciar sesión",
   "header.menu.dashboard.label": "Panel de Control",
   "header.help.label": "Ayuda",
   "header.menu.profile.label": "Perfil",
@@ -30,26 +30,6 @@
   "header.menu.orderHistory.label": "Historial de órdenes",
   "header.navigation.skipNavLink": "Dirígete al contenido principal.",
   "header.menu.signOut.label": "Cerrar sesión",
-  "header.links.content": "Contenido",
-  "header.links.settings": "Configuración",
-  "header.links.content.tools": "Herramientas",
-  "header.links.outline": "Estructura",
-  "header.links.updates": "Actualizaciones",
-  "header.links.pages": "Páginas & Recursos",
-  "header.links.filesAndUploads": "Administración de archivos",
-  "header.links.textbooks": "Libros de texto",
-  "header.links.videoUploads": "Carga de videos",
-  "header.links.scheduleAndDetails": "Calendario y detalles",
-  "header.links.grading": "Calificaciones",
-  "header.links.courseTeam": "Equipo del curso",
-  "header.links.groupConfigurations": "Configuraciones de Grupo",
-  "header.links.proctoredExamSettings": "Configuración de Exámenes Supervisados",
-  "header.links.advancedSettings": "Configuración avanzada",
-  "header.links.certificates": "Certificados",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Importar",
-  "header.links.export": "Exportar",
-  "header.links.checklists": "Listas de chequeo",
   "header.user.menu.studio": "Inicio Studio",
   "header.user.menu.maintenance": "Mantenimiento",
   "header.label.courseOutline": "Volver al esquema del curso en Studio"

src/i18n/messages/fr.json

@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "S'inscrire",
-  "general.signIn.sentenceCase": "Connectez-vous",
   "header.links.courses": "Cours",
   "header.links.programs": "Programmes",
   "header.links.content.search": "Explorer les cours",
@@ -23,6 +21,8 @@
   "header.label.secondary.nav": "Secondaire",
   "header.label.skip.nav": "Passer au contenu principal",
   "header.label.app.nav": "Application",
+  "general.register.sentenceCase": "S'inscrire",
+  "general.signIn.sentenceCase": "Connectez-vous",
   "header.menu.dashboard.label": "Tableau de bord",
   "header.help.label": "Aide",
   "header.menu.profile.label": "Profil",
@@ -30,26 +30,6 @@
   "header.menu.orderHistory.label": "Historique des commandes",
   "header.navigation.skipNavLink": "Passer au contenu principal",
   "header.menu.signOut.label": "Se déconnecter",
-  "header.links.content": "Content",
-  "header.links.settings": "Settings",
-  "header.links.content.tools": "Tools",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Updates",
-  "header.links.pages": "Pages & Resources",
-  "header.links.filesAndUploads": "Files & Uploads",
-  "header.links.textbooks": "Textbooks",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Schedule & Details",
-  "header.links.grading": "Grading",
-  "header.links.courseTeam": "Course Team",
-  "header.links.groupConfigurations": "Group Configurations",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Advanced Settings",
-  "header.links.certificates": "Certificates",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Import",
-  "header.links.export": "Export",
-  "header.links.checklists": "Checklists",
   "header.user.menu.studio": "Studio Home",
   "header.user.menu.maintenance": "Maintenance",
   "header.label.courseOutline": "Back to course outline in Studio"

src/i18n/messages/fr_CA.json

@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Inscription",
-  "general.signIn.sentenceCase": "Connexion",
   "header.links.courses": "Cours",
   "header.links.programs": "Programmes",
   "header.links.content.search": "Découvrir les nouveautés",
@@ -23,6 +21,8 @@
   "header.label.secondary.nav": "Secondaire",
   "header.label.skip.nav": "Passer au contenu de cette vue",
   "header.label.app.nav": "Application",
+  "general.register.sentenceCase": "Inscription",
+  "general.signIn.sentenceCase": "Connexion",
   "header.menu.dashboard.label": "Tableau de bord",
   "header.help.label": "Aide",
   "header.menu.profile.label": "Profil",
@@ -30,26 +30,6 @@
   "header.menu.orderHistory.label": "Historique des commandes",
   "header.navigation.skipNavLink": "Passer au contenu principal.",
   "header.menu.signOut.label": "Se déconnecter",
-  "header.links.content": "Contenu",
-  "header.links.settings": "Paramètres",
-  "header.links.content.tools": "Outils",
-  "header.links.outline": "Plan de cours",
-  "header.links.updates": "Annonces",
-  "header.links.pages": "Pages et ressources",
-  "header.links.filesAndUploads": "Fichiers et téléversements",
-  "header.links.textbooks": "Manuels",
-  "header.links.videoUploads": "Téléversements des vidéos",
-  "header.links.scheduleAndDetails": "Dates et détails",
-  "header.links.grading": "Évaluation",
-  "header.links.courseTeam": "Équipe de cours",
-  "header.links.groupConfigurations": "Configuration des groupes",
-  "header.links.proctoredExamSettings": "Paramètres d'examen surveillé",
-  "header.links.advancedSettings": "Paramètres avancés",
-  "header.links.certificates": "Attestations",
-  "header.links.publisher": "Éditeur",
-  "header.links.import": "Importer",
-  "header.links.export": "Exporter",
-  "header.links.checklists": "Listes de contrôle",
   "header.user.menu.studio": "Accueil Studio",
   "header.user.menu.maintenance": "Entretien",
   "header.label.courseOutline": "Retour au plan de cours dans Studio"

src/i18n/messages/hi.json

@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
   "header.links.courses": "Courses",
   "header.links.programs": "Programs",
   "header.links.content.search": "Discover New",
@@ -23,6 +21,8 @@
   "header.label.secondary.nav": "Secondary",
   "header.label.skip.nav": "Skip to main content",
   "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
   "header.menu.dashboard.label": "Dashboard",
   "header.help.label": "Help",
   "header.menu.profile.label": "Profile",
@@ -30,26 +30,6 @@
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
   "header.menu.signOut.label": "Sign Out",
-  "header.links.content": "Content",
-  "header.links.settings": "Settings",
-  "header.links.content.tools": "Tools",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Updates",
-  "header.links.pages": "Pages & Resources",
-  "header.links.filesAndUploads": "Files & Uploads",
-  "header.links.textbooks": "Textbooks",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Schedule & Details",
-  "header.links.grading": "Grading",
-  "header.links.courseTeam": "Course Team",
-  "header.links.groupConfigurations": "Group Configurations",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Advanced Settings",
-  "header.links.certificates": "Certificates",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Import",
-  "header.links.export": "Export",
-  "header.links.checklists": "Checklists",
   "header.user.menu.studio": "Studio Home",
   "header.user.menu.maintenance": "Maintenance",
   "header.label.courseOutline": "Back to course outline in Studio"

src/i18n/messages/it.json

@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
   "header.links.courses": "Courses",
   "header.links.programs": "Programs",
   "header.links.content.search": "Discover New",
@@ -23,6 +21,8 @@
   "header.label.secondary.nav": "Secondary",
   "header.label.skip.nav": "Skip to main content",
   "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
   "header.menu.dashboard.label": "Dashboard",
   "header.help.label": "Help",
   "header.menu.profile.label": "Profile",
@@ -30,26 +30,6 @@
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
   "header.menu.signOut.label": "Sign Out",
-  "header.links.content": "Content",
-  "header.links.settings": "Settings",
-  "header.links.content.tools": "Tools",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Updates",
-  "header.links.pages": "Pages & Resources",
-  "header.links.filesAndUploads": "Files & Uploads",
-  "header.links.textbooks": "Textbooks",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Schedule & Details",
-  "header.links.grading": "Grading",
-  "header.links.courseTeam": "Course Team",
-  "header.links.groupConfigurations": "Group Configurations",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Advanced Settings",
-  "header.links.certificates": "Certificates",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Import",
-  "header.links.export": "Export",
-  "header.links.checklists": "Checklists",
   "header.user.menu.studio": "Studio Home",
   "header.user.menu.maintenance": "Maintenance",
   "header.label.courseOutline": "Back to course outline in Studio"

src/i18n/messages/pt.json

@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
   "header.links.courses": "Courses",
   "header.links.programs": "Programs",
   "header.links.content.search": "Discover New",
@@ -23,6 +21,8 @@
   "header.label.secondary.nav": "Secondary",
   "header.label.skip.nav": "Skip to main content",
   "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
   "header.menu.dashboard.label": "Dashboard",
   "header.help.label": "Help",
   "header.menu.profile.label": "Profile",
@@ -30,26 +30,6 @@
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
   "header.menu.signOut.label": "Sign Out",
-  "header.links.content": "Content",
-  "header.links.settings": "Settings",
-  "header.links.content.tools": "Tools",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Updates",
-  "header.links.pages": "Pages & Resources",
-  "header.links.filesAndUploads": "Files & Uploads",
-  "header.links.textbooks": "Textbooks",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Schedule & Details",
-  "header.links.grading": "Grading",
-  "header.links.courseTeam": "Course Team",
-  "header.links.groupConfigurations": "Group Configurations",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Advanced Settings",
-  "header.links.certificates": "Certificates",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Import",
-  "header.links.export": "Export",
-  "header.links.checklists": "Checklists",
   "header.user.menu.studio": "Studio Home",
   "header.user.menu.maintenance": "Maintenance",
   "header.label.courseOutline": "Back to course outline in Studio"

src/i18n/messages/ru.json

@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
   "header.links.courses": "Courses",
   "header.links.programs": "Programs",
   "header.links.content.search": "Discover New",
@@ -23,6 +21,8 @@
   "header.label.secondary.nav": "Secondary",
   "header.label.skip.nav": "Skip to main content",
   "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
   "header.menu.dashboard.label": "Dashboard",
   "header.help.label": "Help",
   "header.menu.profile.label": "Profile",
@@ -30,26 +30,6 @@
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
   "header.menu.signOut.label": "Sign Out",
-  "header.links.content": "Content",
-  "header.links.settings": "Settings",
-  "header.links.content.tools": "Tools",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Updates",
-  "header.links.pages": "Pages & Resources",
-  "header.links.filesAndUploads": "Files & Uploads",
-  "header.links.textbooks": "Textbooks",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Schedule & Details",
-  "header.links.grading": "Grading",
-  "header.links.courseTeam": "Course Team",
-  "header.links.groupConfigurations": "Group Configurations",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Advanced Settings",
-  "header.links.certificates": "Certificates",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Import",
-  "header.links.export": "Export",
-  "header.links.checklists": "Checklists",
   "header.user.menu.studio": "Studio Home",
   "header.user.menu.maintenance": "Maintenance",
   "header.label.courseOutline": "Back to course outline in Studio"

src/i18n/messages/uk.json

@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Увійти",
   "header.links.courses": "Курси",
   "header.links.programs": "Програми",
   "header.links.content.search": "Discover New",
@@ -23,6 +21,8 @@
   "header.label.secondary.nav": "Secondary",
   "header.label.skip.nav": "Перейти до головного змісту",
   "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Увійти",
   "header.menu.dashboard.label": "Dashboard",
   "header.help.label": "Help",
   "header.menu.profile.label": "Profile",
@@ -30,26 +30,6 @@
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Перейти до головного змісту.",
   "header.menu.signOut.label": "Sign Out",
-  "header.links.content": "Content",
-  "header.links.settings": "Settings",
-  "header.links.content.tools": "Tools",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Updates",
-  "header.links.pages": "Pages & Resources",
-  "header.links.filesAndUploads": "Files & Uploads",
-  "header.links.textbooks": "Textbooks",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Schedule & Details",
-  "header.links.grading": "Grading",
-  "header.links.courseTeam": "Course Team",
-  "header.links.groupConfigurations": "Group Configurations",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Advanced Settings",
-  "header.links.certificates": "Certificates",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Import",
-  "header.links.export": "Export",
-  "header.links.checklists": "Checklists",
   "header.user.menu.studio": "Studio Home",
   "header.user.menu.maintenance": "Maintenance",
   "header.label.courseOutline": "Back to course outline in Studio"

src/i18n/messages/zh_CN.json

@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
   "header.links.courses": "Courses",
   "header.links.programs": "Programs",
   "header.links.content.search": "Discover New",
@@ -23,6 +21,8 @@
   "header.label.secondary.nav": "Secondary",
   "header.label.skip.nav": "Skip to main content",
   "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
   "header.menu.dashboard.label": "Dashboard",
   "header.help.label": "Help",
   "header.menu.profile.label": "Profile",
@@ -30,26 +30,6 @@
   "header.menu.orderHistory.label": "Order History",
   "header.navigation.skipNavLink": "Skip to main content.",
   "header.menu.signOut.label": "Sign Out",
-  "header.links.content": "Content",
-  "header.links.settings": "Settings",
-  "header.links.content.tools": "Tools",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Updates",
-  "header.links.pages": "Pages & Resources",
-  "header.links.filesAndUploads": "Files & Uploads",
-  "header.links.textbooks": "Textbooks",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Schedule & Details",
-  "header.links.grading": "Grading",
-  "header.links.courseTeam": "Course Team",
-  "header.links.groupConfigurations": "Group Configurations",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Advanced Settings",
-  "header.links.certificates": "Certificates",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Import",
-  "header.links.export": "Export",
-  "header.links.checklists": "Checklists",
   "header.user.menu.studio": "Studio Home",
   "header.user.menu.maintenance": "Maintenance",
   "header.label.courseOutline": "Back to course outline in Studio"

src/index.scss

@@ -3,7 +3,7 @@ $blue: #007db8;
 $white: #fff;
 
 @import './Menu/menu.scss';
-@import './studio-header/header.scss';
+@import './studio-header/StudioHeader.scss';
 
 .dropdown-item a {
   text-decoration: none;
@@ -43,9 +43,9 @@ $white: #fff;
   .user-dropdown {
     .btn {
       height: 3rem;
-      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-        padding: 0 0.5rem;
-      }
+      // @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+      //   padding: 0 0.5rem;
+      // }
     }
   }
 }

src/studio-header/CourseLockUp.jsx

@@ -24,7 +24,7 @@ const CourseLockUp = ({
     )}
   >
     <a
-      className="course-title-lockup w-25 mr-2"
+      className="course-title-lockup mr-2"
       href={outlineLink}
       aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
       data-testid="course-lock-up-block"

src/studio-header/HeaderBody.jsx

@@ -44,7 +44,7 @@ const HeaderBody = ({
   );
 
   return (
-    <Container size="xl" className="px-4">
+    <Container size="xl" className="px-2.5">
       <ActionRow as="header">
         {isHiddenMainMenu ? (
           <Row className="flex-nowrap ml-4">
@@ -64,17 +64,19 @@ const HeaderBody = ({
                 Menu
               </Button>
             ) : (
-              <Row className="flex-nowrap m-0">
-                {renderBrandNav}
-                <CourseLockUp
-                  {...{
-                    outlineLink,
-                    number,
-                    org,
-                    title,
-                  }}
-                />
-              </Row>
+              <div className="w-25">
+                <Row className="m-0 flex-nowrap">
+                  {renderBrandNav}
+                  <CourseLockUp
+                    {...{
+                      outlineLink,
+                      number,
+                      org,
+                      title,
+                    }}
+                  />
+                </Row>
+              </div>
             )}
             {isMobile ? (
               <>
@@ -82,11 +84,11 @@ const HeaderBody = ({
                 {renderBrandNav}
               </>
             ) : (
-              <Nav data-testid="desktop-menu" className="ml-4">
+              <Nav data-testid="desktop-menu" className="ml-2">
                 {mainMenuDropdowns.map(dropdown => {
                   const { id, buttonTitle, items } = dropdown;
                   return (
-                    <NavDropdownMenu {...{ id, buttonTitle, items }} />
+                    <NavDropdownMenu key={id} {...{ id, buttonTitle, items }} />
                   );
                 })}
               </Nav>
@@ -113,9 +115,9 @@ const HeaderBody = ({
 HeaderBody.propTypes = {
   studioBaseUrl: PropTypes.string.isRequired,
   logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func.isRequired,
-  toggleModalPopup: PropTypes.func.isRequired,
-  isModalPopupOpen: PropTypes.bool.isRequired,
+  setModalPopupTarget: PropTypes.func,
+  toggleModalPopup: PropTypes.func,
+  isModalPopupOpen: PropTypes.bool,
   number: PropTypes.string,
   org: PropTypes.string,
   title: PropTypes.string,
@@ -138,6 +140,9 @@ HeaderBody.propTypes = {
 };
 
 HeaderBody.defaultProps = {
+  setModalPopupTarget: null,
+  toggleModalPopup: null,
+  isModalPopupOpen: false,
   logo: null,
   logoAltText: null,
   number: '',

src/studio-header/MobileHeader.jsx

@@ -38,9 +38,6 @@ const MobileHeader = ({
 MobileHeader.propTypes = {
   studioBaseUrl: PropTypes.string.isRequired,
   logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func.isRequired,
-  toggleModalPopup: PropTypes.func.isRequired,
-  isModalPopupOpen: PropTypes.bool.isRequired,
   number: PropTypes.string,
   org: PropTypes.string,
   title: PropTypes.string,

src/studio-header/NavDropdownMenu.jsx

@@ -13,10 +13,12 @@ const NavDropdownMenu = ({
   <DropdownButton
     id={id}
     title={buttonTitle}
-    variant="tertiary"
+    variant="outline-primary"
+    className="mr-2"
   >
     {items.map(item => (
       <Dropdown.Item
+        key={`${item.title}-dropdown-item`}
         href={item.href}
         className="small"
       >

src/studio-header/StudioHeader.jsx

@@ -36,14 +36,15 @@ const StudioHeader = ({
   };
 
   return (
-    <>
-      <Responsive maxWidth={768}>
+    <div className="studio-header">
+      <a className="nav-skip sr-only sr-only-focusable" href="#main">Skip to content</a>
+      <Responsive maxWidth={841}>
         <MobileHeader {...props} />
       </Responsive>
-      <Responsive minWidth={769}>
+      <Responsive minWidth={842}>
         <HeaderBody {...props} />
       </Responsive>
-    </>
+    </div>
   );
 };
 

src/studio-header/StudioHeader.scss

@@ -0,0 +1,49 @@
+$spacer: 1rem;
+$white: #FFFFFF;
+
+.studio-header {
+  position: relative;
+  z-index: 1000;
+
+  height: 3.75rem;
+  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
+  background: $white;
+
+  .btn-outline-primary {
+    border-color: $white;
+  }
+
+  .logo {
+    display: block;
+    box-sizing: content-box;
+    position: relative;
+    top: -.05em;
+    height: 1.75rem;
+    padding: $spacer 0;
+    margin-right: $spacer;
+
+    img {
+      display: block;
+      height: 100%;
+    }
+  }
+
+  .course-title-lockup {
+    @media only screen and (min-width: 769px) {
+      padding: .5rem;
+      padding-right: $spacer;
+      border-right: 1px solid #E5E5E5;
+      width: 70%;
+    }
+  
+    overflow: hidden;
+  
+    span {
+      color: #333333;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.375rem;
+    }
+  }
+}

src/studio-header/header.scss

@@ -1,64 +0,0 @@
-// This SCSS was partly copied from edx/frontend-app-support-tools/src/support-header/index.scss.
-$spacer: 1rem;
-$white: #FFFFFF;
-
-.btn-tertiary:hover {
-  color: white;
-  background-color: #00262B;
-}
-
-.course-title-lockup {
-  @media only screen and (max-width: 768px) {
-    padding-left: .5rem;
-    max-width: 70%;
-  }
-
-  @media only screen and (min-width: 769px) {
-    padding: .5rem;
-    padding-right: $spacer;
-    border-right: 1px solid #E5E5E5;
-    min-width: 70%;
-  }
-
-  overflow: hidden;
-
-  span {
-    color: #333333;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.375rem;
-  }
-}
-
-.site-header-mobile,
-.site-header-desktop {
-  position: relative;
-  z-index: 1000;
-}
-
-.site-header-mobile {img {
-    height: 1.5rem;
-  }
-}
-
-.site-header-desktop {
-  height: 3.75rem;
-  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
-  background: $white;
-
-  .logo {
-    display: block;
-    box-sizing: content-box;
-    position: relative;
-    top: -.05em;
-    height: 1.75rem;
-    padding: $spacer 0;
-    margin-right: $spacer;
-
-    img {
-      display: block;
-      height: 100%;
-    }
-  }
-}

src/studio-header/messages.js

@@ -1,106 +1,6 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  'header.links.content': {
-    id: 'header.links.content',
-    defaultMessage: 'Content',
-    description: 'Label for Content menu trigger',
-  },
-  'header.links.settings': {
-    id: 'header.links.settings',
-    defaultMessage: 'Settings',
-    description: 'Label for Settings menu trigger',
-  },
-  'header.links.tools': {
-    id: 'header.links.content.tools',
-    defaultMessage: 'Tools',
-    description: 'Label for Tools menu trigger',
-  },
-  'header.links.outline': {
-    id: 'header.links.outline',
-    defaultMessage: 'Outline',
-    description: 'Link to Studio Outline page',
-  },
-  'header.links.updates': {
-    id: 'header.links.updates',
-    defaultMessage: 'Updates',
-    description: 'Link to Studio Updates page',
-  },
-  'header.links.pages': {
-    id: 'header.links.pages',
-    defaultMessage: 'Pages & Resources',
-    description: 'Link to Studio Pages page',
-  },
-  'header.links.filesAndUploads': {
-    id: 'header.links.filesAndUploads',
-    defaultMessage: 'Files & Uploads',
-    description: 'Link to Studio Files & Uploads page',
-  },
-  'header.links.textbooks': {
-    id: 'header.links.textbooks',
-    defaultMessage: 'Textbooks',
-    description: 'Link to Studio Textbooks page',
-  },
-  'header.links.videoUploads': {
-    id: 'header.links.videoUploads',
-    defaultMessage: 'Video Uploads',
-    description: 'Link to Studio Video Uploads page',
-  },
-  'header.links.scheduleAndDetails': {
-    id: 'header.links.scheduleAndDetails',
-    defaultMessage: 'Schedule & Details',
-    description: 'Link to Studio Schedule & Details page',
-  },
-  'header.links.grading': {
-    id: 'header.links.grading',
-    defaultMessage: 'Grading',
-    description: 'Link to Studio Grading page',
-  },
-  'header.links.courseTeam': {
-    id: 'header.links.courseTeam',
-    defaultMessage: 'Course Team',
-    description: 'Link to Studio Course Team page',
-  },
-  'header.links.groupConfigurations': {
-    id: 'header.links.groupConfigurations',
-    defaultMessage: 'Group Configurations',
-    description: 'Link to Studio Group Configurations page',
-  },
-  'header.links.proctoredExamSettings': {
-    id: 'header.links.proctoredExamSettings',
-    defaultMessage: 'Proctored Exam Settings',
-    description: 'Link to Studio Proctored Exam Settings page',
-  },
-  'header.links.advancedSettings': {
-    id: 'header.links.advancedSettings',
-    defaultMessage: 'Advanced Settings',
-    description: 'Link to Studio Advanced Settings page',
-  },
-  'header.links.certificates': {
-    id: 'header.links.certificates',
-    defaultMessage: 'Certificates',
-    description: 'Link to Studio Certificates page',
-  },
-  'header.links.publisher': {
-    id: 'header.links.publisher',
-    defaultMessage: 'Publisher',
-    description: 'Link to Publisher',
-  },
-  'header.links.import': {
-    id: 'header.links.import',
-    defaultMessage: 'Import',
-    description: 'Link to Studio Import page',
-  },
-  'header.links.export': {
-    id: 'header.links.export',
-    defaultMessage: 'Export',
-    description: 'Link to Studio Export page',
-  },
-  'header.links.checklists': {
-    id: 'header.links.checklists',
-    defaultMessage: 'Checklists',
-    description: 'Link to Studio Checklists page',
-  },
   'header.user.menu.studio': {
     id: 'header.user.menu.studio',
     defaultMessage: 'Studio Home',

src/studio-header/utils.js

@@ -8,7 +8,7 @@ const getUserMenuItems = ({
 }) => {
   let items = [
     {
-      href: `${studioBaseUrl}}`,
+      href: `${studioBaseUrl}`,
       title: intl.formatMessage(messages['header.user.menu.studio']),
     }, {
       href: `${logoutUrl}`,
@@ -18,7 +18,7 @@ const getUserMenuItems = ({
   if (isAdmin) {
     items = [
       {
-        href: `${studioBaseUrl}}`,
+        href: `${studioBaseUrl}`,
         title: intl.formatMessage(messages['header.user.menu.studio']),
       }, {
         href: `${studioBaseUrl}/maintenance`,