feat: display profile name in navbar if available

.github/workflows/npm-publish.yml

@@ -0,0 +1,54 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    name: Verify
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup Nodejs Env
+        run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VER }}
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm run test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup Nodejs Env
+        run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VER }}
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: git config --global user.name "${{ github.actor }}"
+      - run: git config --global user.email "github-action-${{ github.actor }}@users.noreply.github.com"
+      - run: npm version --no-git-tag-version ${{ github.event.release.tag_name }}
+      - run: npm run build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.SEMANTIC_RELEASE_NPM_TOKEN}}

README.rst

@@ -57,7 +57,7 @@ Installation
 
 To install this header into your Open edX micro-frontend, run the following command in your MFE:
 
-``npm i --save @edx/frontend-component-header``
+``npm i --save @opencraft/frontend-component-header``
 
 This will make the component available to be imported into your application.
 
@@ -176,12 +176,12 @@ Please do not report security issues in public. Please email security@openedx.or
 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
    :target: https://travis-ci.com/edx/frontend-component-header
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-header
-   :target: @edx/frontend-component-header
-.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-header.svg
-   :target: @edx/frontend-component-header
-.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-header.svg
-   :target: @edx/frontend-component-header
-.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg
-   :target: @edx/frontend-component-header
+   :target: @opencraft/frontend-component-header
+.. |npm_version| image:: https://img.shields.io/npm/v/@opencraft/frontend-component-header.svg
+   :target: @opencraft/frontend-component-header
+.. |npm_downloads| image:: https://img.shields.io/npm/dt/@opencraft/frontend-component-header.svg
+   :target: @opencraft/frontend-component-header
+.. |license| image:: https://img.shields.io/npm/l/@opencraft/frontend-component-header.svg
+   :target: @opencraft/frontend-component-header
 .. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
    :target: https://github.com/semantic-release/semantic-release

example/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
 import { AppContext, AppProvider } from '@edx/frontend-platform/react';
-import Header from '@edx/frontend-component-header';
+import Header from '@opencraft/frontend-component-header';
 
 import './index.scss';
 import StudioHeader from '../src/studio-header/StudioHeader';

example/index.scss

@@ -3,4 +3,4 @@
 @import "@openedx/paragon/scss/core/core";
 @import "@edx/brand/paragon/overrides";
 
-@import "@edx/frontend-component-header/index";
+@import "@opencraft/frontend-component-header/index";

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@edx/frontend-component-header",
+  "name": "@opencraft/frontend-component-header",
   "version": "1.0.0-semantically-released",
   "description": "The standard header for Open edX",
   "main": "dist/index.js",
@@ -24,14 +24,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/openedx/frontend-component-header.git"
+    "url": "git+https://github.com/open-craft/frontend-component-header.git"
   },
   "author": "edX",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/openedx/frontend-component-header/issues"
+    "url": "https://github.com/open-craft/frontend-component-header/issues"
   },
-  "homepage": "https://github.com/openedx/frontend-component-header#readme",
+  "homepage": "https://github.com/open-craft/frontend-component-header#readme",
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -9,7 +9,7 @@ import { Dropdown } from '@openedx/paragon';
 
 import messages from './messages';
 
-const AuthenticatedUserDropdown = ({ intl, username }) => {
+const AuthenticatedUserDropdown = ({ intl, username, name }) => {
   const dashboardMenuItem = (
     <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
       {intl.formatMessage(messages.dashboard)}
@@ -23,7 +23,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
         <Dropdown.Toggle variant="outline-primary">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
           <span data-hj-suppress className="d-none d-md-inline">
-            {username}
+            {name || username}
           </span>
         </Dropdown.Toggle>
         <Dropdown.Menu className="dropdown-menu-right">
@@ -51,6 +51,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 AuthenticatedUserDropdown.propTypes = {
   intl: intlShape.isRequired,
   username: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
 };
 
 export default injectIntl(AuthenticatedUserDropdown);

src/learning-header/LearningHeader.jsx

@@ -51,6 +51,7 @@ const LearningHeader = ({
         {showUserDropdown && authenticatedUser && (
         <AuthenticatedUserDropdown
           username={authenticatedUser.username}
+          name={authenticatedUser.name}
         />
         )}
         {showUserDropdown && !authenticatedUser && (

src/studio-header/HeaderBody.jsx

@@ -25,6 +25,7 @@ const HeaderBody = ({
   org,
   title,
   username,
+  name,
   isAdmin,
   studioBaseUrl,
   logoutUrl,
@@ -117,6 +118,7 @@ const HeaderBody = ({
           <UserMenu
             {...{
               username,
+              name,
               studioBaseUrl,
               logoutUrl,
               authenticatedUserAvatar,
@@ -142,6 +144,7 @@ HeaderBody.propTypes = {
   logoAltText: PropTypes.string,
   authenticatedUserAvatar: PropTypes.string,
   username: PropTypes.string,
+  name: PropTypes.string,
   isAdmin: PropTypes.bool,
   isMobile: PropTypes.bool,
   isHiddenMainMenu: PropTypes.bool,
@@ -168,6 +171,7 @@ HeaderBody.defaultProps = {
   title: '',
   authenticatedUserAvatar: null,
   username: null,
+  name: null,
   isAdmin: false,
   isMobile: false,
   isHiddenMainMenu: false,

src/studio-header/MobileHeader.jsx

@@ -45,6 +45,7 @@ MobileHeader.propTypes = {
   logoAltText: PropTypes.string,
   authenticatedUserAvatar: PropTypes.string,
   username: PropTypes.string,
+  name: PropTypes.string,
   isAdmin: PropTypes.bool,
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
@@ -65,6 +66,7 @@ MobileHeader.defaultProps = {
   title: null,
   authenticatedUserAvatar: null,
   username: null,
+  name: null,
   isAdmin: false,
   mainMenuDropdowns: [],
   outlineLink: null,

src/studio-header/StudioHeader.jsx

@@ -26,6 +26,7 @@ const StudioHeader = ({
     org,
     title,
     username: authenticatedUser?.username,
+    name: authenticatedUser?.name,
     isAdmin: authenticatedUser?.administrator,
     authenticatedUserAvatar: authenticatedUser?.avatar,
     studioBaseUrl: config.STUDIO_BASE_URL,

src/studio-header/UserMenu.jsx

@@ -9,6 +9,7 @@ import getUserMenuItems from './utils';
 
 const UserMenu = ({
   username,
+  name,
   studioBaseUrl,
   logoutUrl,
   authenticatedUserAvatar,
@@ -32,7 +33,7 @@ const UserMenu = ({
       data-testid="avatar-icon"
     />
   );
-  const title = isMobile ? avatar : <>{avatar}{username}</>;
+  const title = isMobile ? avatar : <>{avatar}{name || username}</>;
 
   return (
     <NavDropdownMenu
@@ -50,6 +51,7 @@ const UserMenu = ({
 
 UserMenu.propTypes = {
   username: PropTypes.string,
+  name: PropTypes.string,
   studioBaseUrl: PropTypes.string.isRequired,
   logoutUrl: PropTypes.string.isRequired,
   authenticatedUserAvatar: PropTypes.string,
@@ -64,6 +66,7 @@ UserMenu.defaultProps = {
   isAdmin: false,
   authenticatedUserAvatar: null,
   username: null,
+  name: null,
 };
 
 export default injectIntl(UserMenu);

webpack.dev.config.js

@@ -9,7 +9,7 @@ module.exports = createConfig('webpack-dev', {
   },
   resolve: {
     alias: {
-      '@edx/frontend-component-header': path.resolve(__dirname, 'src'),
+      '@opencraft/frontend-component-header': path.resolve(__dirname, 'src'),
     },
   },
 });