feat: display profile name in navbar if available

.github/workflows/npm-publish.yml

@@ -0,0 +1,53 @@
+# 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@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Nodejs Env
+        run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        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@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Nodejs Env
+        run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VER }}
+      - 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

@@ -38,7 +38,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.
 
@@ -78,12 +78,12 @@ Build a production distribution::
 .. |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';
 

example/index.scss

@@ -3,4 +3,4 @@
 @import "@edx/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:@edx/[email protected]",
     "@edx/browserslist-config": "^1.1.1",

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -9,7 +9,7 @@ import { Dropdown } from '@edx/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 && (

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'),
     },
   },
 });