diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx index a1801bb28..2f9732196 100644 --- a/src/learning-header/LearningHeader.jsx +++ b/src/learning-header/LearningHeader.jsx @@ -37,7 +37,7 @@ const LearningHeader = ({
- + {authenticatedUser && showUserDropdown && ( { expect(screen.getByText(courseData.courseTitle)).toBeInTheDocument(); }); - it('hides the user dropdown and the header actions when showUserDropdown is false', () => { + it('displays the header actions for an authenticated user', () => { + render(
); + expect(screen.getByText('Help')).toBeInTheDocument(); + }); + + it('hides only the user dropdown, not the header actions, when showUserDropdown is false', () => { render(
); expect(screen.queryByText(authenticatedUser.username)).not.toBeInTheDocument(); - expect(screen.queryByText('Help')).not.toBeInTheDocument(); + expect(screen.getByText('Help')).toBeInTheDocument(); }); it('renders v2 slot content for an authenticated user even when showUserDropdown is false', () => { @@ -67,7 +72,7 @@ describe('Header', () => { expect(screen.getByText(V2_WIDGET_TEXT)).toBeInTheDocument(); expect(screen.queryByText(authenticatedUser.username)).not.toBeInTheDocument(); - expect(screen.queryByText('Help')).not.toBeInTheDocument(); + expect(screen.getByText('Help')).toBeInTheDocument(); }); it('renders v2 slot content for an anonymous user', () => { diff --git a/src/plugin-slots/HeaderNotificationsSlot/README.md b/src/plugin-slots/HeaderNotificationsSlot/README.md index ed95d9f72..55a226adc 100644 --- a/src/plugin-slots/HeaderNotificationsSlot/README.md +++ b/src/plugin-slots/HeaderNotificationsSlot/README.md @@ -12,7 +12,7 @@ This slot renders the notifications tray (bell icon + notification popover) from 1. **Desktop Header** — via `org.openedx.frontend.layout.header_desktop_secondary_menu.v2` Notifications appear before secondary menu items (e.g., "New", "Help") -2. **Learning Header** — via `org.openedx.frontend.layout.learning_header_actions.v1` (nested within [`.v2`](../LearningHeaderActionsSlot/v2/)) +2. **Learning Header** — via [`org.openedx.frontend.layout.learning_header_actions.v2`](../LearningHeaderActionsSlot/v2/) Notifications appear before the help link 3. **Studio Header** — via `org.openedx.frontend.layout.studio_header_actions.v1` @@ -28,9 +28,8 @@ Desktop Header Learning Header └── org.openedx.frontend.layout.learning_header_actions.v2 - └── org.openedx.frontend.layout.learning_header_actions.v1 (only when showUserDropdown is true and a user is authenticated) - ├── org.openedx.frontend.layout.header_notifications_tray.v1 ← This slot - └── org.openedx.frontend.layout.header_learning_help.v1 + ├── org.openedx.frontend.layout.header_notifications_tray.v1 ← This slot (only when a user is authenticated) + └── org.openedx.frontend.layout.header_learning_help.v1 Studio Header └── org.openedx.frontend.layout.studio_header_actions.v1 diff --git a/src/plugin-slots/LearningHeaderActionsSlot/README.md b/src/plugin-slots/LearningHeaderActionsSlot/README.md index c49a6d40e..4437471b3 100644 --- a/src/plugin-slots/LearningHeaderActionsSlot/README.md +++ b/src/plugin-slots/LearningHeaderActionsSlot/README.md @@ -3,4 +3,3 @@ | Slot ID | Description | Docs | |---------|-------------|------| | `org.openedx.frontend.layout.learning_header_actions.v2` | Always rendered, regardless of `showUserDropdown` (Default slot) | [v2 docs](./v2/) | -| `org.openedx.frontend.layout.learning_header_actions.v1` **(Deprecated)** | Notification tray + help link, only rendered when `showUserDropdown` is `true` and a user is authenticated | [v1 docs](./v1/) | diff --git a/src/plugin-slots/LearningHeaderActionsSlot/index.jsx b/src/plugin-slots/LearningHeaderActionsSlot/index.jsx index 169204719..d1207b0cb 100644 --- a/src/plugin-slots/LearningHeaderActionsSlot/index.jsx +++ b/src/plugin-slots/LearningHeaderActionsSlot/index.jsx @@ -1,4 +1,3 @@ import LearningHeaderActionsSlot from './v2'; -export { default as LearningHeaderActionsSlotV1 } from './v1'; export default LearningHeaderActionsSlot; diff --git a/src/plugin-slots/LearningHeaderActionsSlot/v1/README.md b/src/plugin-slots/LearningHeaderActionsSlot/v1/README.md deleted file mode 100644 index 5967a0044..000000000 --- a/src/plugin-slots/LearningHeaderActionsSlot/v1/README.md +++ /dev/null @@ -1,123 +0,0 @@ -# Learning Header Actions Slot — v1 (Notification Tray + Help Link) - -> **⚠️ Deprecated:** This slot is deprecated and will be removed. Use the -> [`v2` slot](../v2/) instead, which renders unconditionally regardless of -> `showUserDropdown`. See [DEPR ticket #681](https://github.com/openedx/frontend-component-header/issues/681) -> for the removal plan and timeline. - -### Slot ID: `org.openedx.frontend.layout.learning_header_actions.v1` - -**Default Content:** -- **Notification Tray** (via `HeaderNotificationsSlot`) — Rendered before the help link -- **Help Link** (via `LearningHelpSlot`) - -> **Note:** This slot is only rendered when `showUserDropdown` is `true` and a user is authenticated. To render content regardless of `showUserDropdown` or authentication, use the parent [`v2` slot](../v2/). - ---- - -## Examples - -### Add Custom Components before and after Learning Header Actions - -The following `env.config.jsx` inserts a custom component before the notification tray (`priority: 10`) and another after the help link (`priority: 90`). - -![Screenshot of custom components before and after learning header actions](../images/custom_components_before_and_after_learning_actions.png) - -```jsx -import React from 'react'; -import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; - -const config = { - pluginSlots: { - 'org.openedx.frontend.layout.learning_header_actions.v1': { - keepDefault: true, - plugins: [ - { - op: PLUGIN_OPERATIONS.Insert, - widget: { - id: 'custom_before_learning_actions', - type: DIRECT_PLUGIN, - priority: 10, - RenderWidget: () => ( -

🌜

- ), - }, - }, - { - op: PLUGIN_OPERATIONS.Insert, - widget: { - id: 'custom_after_learning_actions', - type: DIRECT_PLUGIN, - priority: 90, - RenderWidget: () => ( -

🌛

- ), - }, - }, - ], - }, - }, -}; - -export default config; -``` - -### Hide the Entire Learning Header Actions Area - -The following `env.config.jsx` removes both the notification tray and the help link from the learning header. - -![Screenshot of hiding learning header actions area](../images/hide_learning_actions.png) - -```jsx -import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; - -const config = { - pluginSlots: { - 'org.openedx.frontend.layout.learning_header_actions.v1': { - keepDefault: true, - plugins: [ - { - op: PLUGIN_OPERATIONS.Hide, - widgetId: 'default_contents', - }, - ], - }, - }, -}; - -export default config; -``` - -### Replace the Entire Learning Header Actions Area with a Custom Component - -The following `env.config.jsx` replaces the notification tray and help link with a single custom component. - -![Screenshot of replacing learning header actions area with custom component](../images/replace_learning_actions_with_custom_component.png) - -```jsx -import React from 'react'; -import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; - -const config = { - pluginSlots: { - 'org.openedx.frontend.layout.learning_header_actions.v1': { - keepDefault: false, - plugins: [ - { - op: PLUGIN_OPERATIONS.Insert, - widget: { - id: 'custom_learning_actions', - type: DIRECT_PLUGIN, - priority: 50, - RenderWidget: () => ( - My Custom Learning Actions - ), - }, - }, - ], - }, - }, -}; - -export default config; -``` diff --git a/src/plugin-slots/LearningHeaderActionsSlot/v1/index.jsx b/src/plugin-slots/LearningHeaderActionsSlot/v1/index.jsx deleted file mode 100644 index b01e6a074..000000000 --- a/src/plugin-slots/LearningHeaderActionsSlot/v1/index.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { getConfig } from '@edx/frontend-platform'; -import { PluginSlot } from '@openedx/frontend-plugin-framework'; -import HeaderNotificationsSlot from '../../HeaderNotificationsSlot'; -import LearningHelpSlot from '../../LearningHelpSlot'; - -const SLOT_ID = 'org.openedx.frontend.layout.learning_header_actions.v1'; - -let hasWarned = false; - -/** @deprecated Use `LearningHeaderActionsSlotV2` instead. See DEPR ticket openedx/frontend-component-header#681. */ -const LearningHeaderActionsSlotV1 = () => { - if (!hasWarned && getConfig()?.pluginSlots?.[SLOT_ID]) { - hasWarned = true; - // eslint-disable-next-line no-console - console.warn( - `[Deprecated] The "${SLOT_ID}" plugin slot ` - + 'is deprecated and will be removed. Migrate your pluginSlots config to ' - + '"org.openedx.frontend.layout.learning_header_actions.v2". ' - + 'See https://github.com/openedx/frontend-component-header/issues/681 for details.', - ); - } - - return ( - - - - - ); -}; - -export default LearningHeaderActionsSlotV1; diff --git a/src/plugin-slots/LearningHeaderActionsSlot/v2/README.md b/src/plugin-slots/LearningHeaderActionsSlot/v2/README.md index 9d923e4a0..d66a4a9a4 100644 --- a/src/plugin-slots/LearningHeaderActionsSlot/v2/README.md +++ b/src/plugin-slots/LearningHeaderActionsSlot/v2/README.md @@ -3,7 +3,8 @@ ### Slot ID: `org.openedx.frontend.layout.learning_header_actions.v2` **Default Content:** -- **Learning Header Actions v1** (via [`LearningHeaderActionsSlotV1`](../v1/)) — Notification tray + help link, only rendered when `showUserDropdown` is `true` +- **Notification Tray** (via [`HeaderNotificationsSlot`](../../HeaderNotificationsSlot/)) — Rendered before the help link +- **Help Link** (via [`LearningHelpSlot`](../../LearningHelpSlot/)) This slot always renders, regardless of the `showUserDropdown` prop passed to `LearningHeader`. Use it to add, hide, or replace the whole actions area independently of `showUserDropdown`. diff --git a/src/plugin-slots/LearningHeaderActionsSlot/v2/index.jsx b/src/plugin-slots/LearningHeaderActionsSlot/v2/index.jsx index 2e8483737..fb8e2f63e 100644 --- a/src/plugin-slots/LearningHeaderActionsSlot/v2/index.jsx +++ b/src/plugin-slots/LearningHeaderActionsSlot/v2/index.jsx @@ -1,14 +1,20 @@ import React from 'react'; import PropTypes from 'prop-types'; import { PluginSlot } from '@openedx/frontend-plugin-framework'; -import LearningHeaderActionsSlotV1 from '../v1'; +import HeaderNotificationsSlot from '../../HeaderNotificationsSlot'; +import LearningHelpSlot from '../../LearningHelpSlot'; const LearningHeaderActionsSlot = ({ showDefaultActions = true }) => ( - {showDefaultActions && } + {showDefaultActions && ( + <> + + + + )} ); diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md index fadd225e5..eef377529 100644 --- a/src/plugin-slots/README.md +++ b/src/plugin-slots/README.md @@ -15,7 +15,6 @@ ### Learning Header * [`org.openedx.frontend.layout.header_learning_course_info.v1`](./CourseInfoSlot/) -* [`org.openedx.frontend.layout.learning_header_actions.v1`](./LearningHeaderActionsSlot/v1/) **(Deprecated, use `.v2`)** * [`org.openedx.frontend.layout.learning_header_actions.v2`](./LearningHeaderActionsSlot/v2/) * [`org.openedx.frontend.layout.header_learning_help.v1`](./LearningHelpSlot/) * [`org.openedx.frontend.layout.header_learning_logged_out_items.v1`](./LearningLoggedOutItemsSlot/)