From 6136b880cb994f7383db5bb07ac081bdc07d599d Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Fri, 13 Dec 2024 12:22:26 -0500 Subject: [PATCH] feat: add desktop username slot --- src/desktop-header/DesktopHeader.jsx | 8 +- .../DesktopUsernameSlot/README.md | 116 ++++++++++++++++++ .../desktop_username_custom_component.png | Bin 0 -> 2540 bytes ...sername_custom_components_before_after.png | Bin 0 -> 11496 bytes .../images/desktop_username_modified.png | Bin 0 -> 7252 bytes .../DesktopUsernameSlot/index.jsx | 38 ++++++ src/plugin-slots/README.md | 1 + 7 files changed, 157 insertions(+), 6 deletions(-) create mode 100644 src/plugin-slots/DesktopUsernameSlot/README.md create mode 100644 src/plugin-slots/DesktopUsernameSlot/images/desktop_username_custom_component.png create mode 100644 src/plugin-slots/DesktopUsernameSlot/images/desktop_username_custom_components_before_after.png create mode 100644 src/plugin-slots/DesktopUsernameSlot/images/desktop_username_modified.png create mode 100644 src/plugin-slots/DesktopUsernameSlot/index.jsx diff --git a/src/desktop-header/DesktopHeader.jsx b/src/desktop-header/DesktopHeader.jsx index 4b5e4939f..d28a399d4 100644 --- a/src/desktop-header/DesktopHeader.jsx +++ b/src/desktop-header/DesktopHeader.jsx @@ -5,7 +5,6 @@ import { getConfig } from '@edx/frontend-platform'; // Local Components import { Menu, MenuTrigger, MenuContent } from '../Menu'; -import Avatar from '../Avatar'; import LogoSlot from '../plugin-slots/LogoSlot'; import DesktopLoggedOutItemsSlot from '../plugin-slots/DesktopLoggedOutItemsSlot'; import { desktopLoggedOutItemsDataShape } from './DesktopLoggedOutItems'; @@ -14,13 +13,11 @@ import { desktopHeaderMainOrSecondaryMenuDataShape } from './DesktopHeaderMainOr import DesktopSecondaryMenuSlot from '../plugin-slots/DesktopSecondaryMenuSlot'; import DesktopUserMenuSlot from '../plugin-slots/DesktopUserMenuSlot'; import { desktopUserMenuDataShape } from './DesktopHeaderUserMenu'; +import DesktopUsernameSlot from '../plugin-slots/DesktopUsernameSlot'; // i18n import messages from '../Header.messages'; -// Assets -import { CaretIcon } from '../Icons'; - class DesktopHeader extends React.Component { constructor(props) { // eslint-disable-line no-useless-constructor super(props); @@ -51,8 +48,7 @@ class DesktopHeader extends React.Component { aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })} className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3" > - - {username} + diff --git a/src/plugin-slots/DesktopUsernameSlot/README.md b/src/plugin-slots/DesktopUsernameSlot/README.md new file mode 100644 index 000000000..9c4b99fdb --- /dev/null +++ b/src/plugin-slots/DesktopUsernameSlot/README.md @@ -0,0 +1,116 @@ +# Desktop Username Slot + +### Slot ID: `desktop_username_slot` + +## Description + +This slot is used to replace/modify/hide the desktop username. + +## Examples + +### Modify Username + +The following `env.config.jsx` will modify the username (in this case replacing it with 🤠) + +![Screenshot of modified username](./images/desktop_username_modified.png) + +```jsx +import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const modifyUsername = ( widget ) => { + widget.content.username = "🤠"; + return widget; +}; + +const config = { + pluginSlots: { + desktop_username_slot: { + keepDefault: true, + plugins: [ + { + op: PLUGIN_OPERATIONS.Modify, + widgetId: 'default_contents', + fn: modifyUsername, + }, + ] + }, + }, +} + +export default config; +``` + + +### Replace Username with Custom Component + +The following `env.config.jsx` will replace the items in the desktop username entirely (in this case with an svg circle) + +![Screenshot of replaced with custom component](./images/desktop_username_custom_component.png) + +```jsx +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + desktop_username_slot: { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_username_component', + type: DIRECT_PLUGIN, + RenderWidget: () => ( + + + + ), + }, + }, + ] + }, + }, +} + +export default config; +``` + +### Add Custom Components before and after Username + +The following `env.config.jsx` will place custom components before and after the desktop username (in this case 🖋️ and 🪄). + +![Screenshot of custom components before and after](./images/desktop_username_custom_components_before_after.png) + +```jsx +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + desktop_username_slot: { + keepDefault: true, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_before_username_component', + type: DIRECT_PLUGIN, + priority: 10, + RenderWidget: () => "🖋️", + }, + }, + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_after_username_component', + type: DIRECT_PLUGIN, + priority: 90, + RenderWidget: () => "🪄", + }, + }, + ] + }, + }, +} + +export default config; +``` diff --git a/src/plugin-slots/DesktopUsernameSlot/images/desktop_username_custom_component.png b/src/plugin-slots/DesktopUsernameSlot/images/desktop_username_custom_component.png new file mode 100644 index 0000000000000000000000000000000000000000..27d94659e1f1303e07a3f691ffe2c3e440f4de55 GIT binary patch literal 2540 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 ( + <> + + {username} + +); + +const DesktopUsernameSlot = ({ username, avatar }) => ( + + + +); + +DesktopUsername.propTypes = { + avatar: PropTypes.string, + username: PropTypes.string.isRequired, +}; + +DesktopUsername.defaultProps = { + avatar: null, +}; + +DesktopUsernameSlot.propTypes = DesktopUsername.propTypes; +DesktopUsernameSlot.defaultProps = DesktopUsername.defaultProps; + +export default DesktopUsernameSlot; diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md index 9eb452ad4..6a4927e28 100644 --- a/src/plugin-slots/README.md +++ b/src/plugin-slots/README.md @@ -9,6 +9,7 @@ * [`desktop_logged_out_items_slot`](./DesktopLoggedOutItemsSlot/) * [`mobile_logged_out_items_slot`](./MobileLoggedOutItemsSlot/) * [`mobile_user_menu_slot`](./MobileUserMenuSlot/) +* [`desktop_username_slot`](./DesktopUsernameSlot/) * [`desktop_user_menu_slot`](./DesktopUserMenuSlot/) * [`learning_username_slot`](./LearningUsernameSlot/) * [`learning_user_menu_slot`](./LearningUserMenuSlot/)