config: display full name in user menu (#3736)

* config: display full name in user menu

* docs: update readme

* fix: issue

* fix: Remove unused React import from common-mfe-config

Author: Anas12091101

src/bridge/settings/openedx/mfe/slot_config/Readme.md

@@ -33,6 +33,7 @@ This documentation captures:
 | [`org.openedx.frontend.layout.header_learning_course_info.v1`](https://github.com/openedx/frontend-component-header/tree/master/src/plugin-slots/CourseInfoSlot)                   | MITx Online / MIT Learn MFEs                         | Hides course organization and number from UAI courses in the Learning Header.                         | Before: ![](./images/course_num_org_hide_before.png) After: ![](./images/course_num_org_hide_after.png) |
 | [`externalLinkUrlOverrides`](https://github.com/openedx/frontend-platform/tree/master?tab=readme-ov-file#overriding-default-external-links)                                                      | MITx Online / MIT Learn Proctoring Info Panel       | Overrides “Review instructions and system requirements” link → MITx Online / MIT Learn Zendesk Helpdesk.            | Search `externalLinkUrlOverrides` in [`mitxonline/common-mfe-config.env.jsx`](./mitxonline/common-mfe-config.env.jsx)                         |
 | `mitx-styles.scss`                                                              | MITx Residential Learner Dashboard     | Hides information banner in dashboard cards via CSS overrides.                                        | Before: ![](./images/card_banner_before.png) After: ![](./images/card_banner_after.png) [`./mitx-styles.scss`](./mitx-styles.scss)                                                                                |
+| [`org.openedx.frontend.layout.header_learning_user_menu_toggle.v1`](https://github.com/openedx/frontend-component-header/tree/master/src/plugin-slots/LearningUserMenuToggleSlot) <br> [`org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1`](https://github.com/openedx/frontend-component-header/tree/master/src/plugin-slots/DesktopUserMenuToggleSlot) | MITx Online / MIT Learn Header | Display the fullname instead of username in the user menu trigger | Learning Header ![](./images/learning_usermenu_trigger.png) <br> Desktop Header ![](./images/desktop_usermenu_trigger.png) |
 
 
 

src/bridge/settings/openedx/mfe/slot_config/images/desktop_usermenu_trigger.png

@@ -1,3 +1,5 @@
+import { useContext } from "react";
+import { AppContext } from '@edx/frontend-platform/react';
 import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
 import { getConfig } from '@edx/frontend-platform';
 import Footer, { Logo, MenuLinks, CopyrightNotice } from './Footer.jsx';
@@ -11,6 +13,8 @@ const SLOT_IDS = {
     learning_user_menu: 'org.openedx.frontend.layout.header_learning_user_menu.v1',
     desktop_user_menu: 'org.openedx.frontend.layout.header_desktop_user_menu.v1',
     learning_course_info: 'org.openedx.frontend.layout.header_learning_course_info.v1',
+    learning_user_menu_toggle: 'org.openedx.frontend.layout.header_learning_user_menu_toggle.v1',
+    desktop_user_menu_toggle: 'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1',
   },
   footer: {
     slot: 'footer_slot',
@@ -214,10 +218,42 @@ const LearningHeaderUserMenu = (widget) => {
   return widget;
 };
 
+const displayFullNameInMenu = (widget) => {
+  const { authenticatedUser } = useContext(AppContext);
+  if (authenticatedUser) {
+    widget.content.label = authenticatedUser.name || authenticatedUser.username;
+  }
+  return widget;
+};
+
 const addUserMenuSlotOverride = (config) => {
   const learningApps = ['learning', 'discussions', 'ora-grading', 'communications'];
   const dashboardApps = ['gradebook', 'learner-dashboard'];
 
+  config.pluginSlots = {
+    ...config.pluginSlots,
+      [SLOT_IDS.header.learning_user_menu_toggle]: {
+        keepDefault: true,
+        plugins: [
+          {
+            op: PLUGIN_OPERATIONS.Modify,
+            widgetId: 'default_contents',
+              fn: displayFullNameInMenu,
+          },
+        ]
+      },
+      [SLOT_IDS.header.desktop_user_menu_toggle]: {
+        keepDefault: true,
+        plugins: [
+          {
+            op: PLUGIN_OPERATIONS.Modify,
+            widgetId: 'default_contents',
+              fn: displayFullNameInMenu,
+          },
+        ]
+      }
+  };
+
   if (learningApps.includes(CURRENT_MFE_APP_ID)) {
 
     return {