-
Notifications
You must be signed in to change notification settings - Fork 193
feat: Add V2 of header actions slot #682
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
arbrandes
merged 7 commits into
openedx:master
from
open-craft:chris/header-actions-slot-v2
Sep 19, 2026
Merged
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
d113c03
feat: Add V2 of header actions slot
tecoholic 26b1919
fix: mount LearningHeaderActionsSlot v2 for anonymous users
ChrisChV 5650a8e
docs: clarify authenticatedUser gate and slot hierarchy for LearningH…
ChrisChV 3ae9441
test: New tests to cover v2 paths
ChrisChV daa487e
fix: Nits on the code
ChrisChV 8b470a5
docs: mark learning_header_actions.v1 slot as deprecated
ChrisChV 5fcfa39
fix: only warn once when v1 slot has custom pluginSlots config
ChrisChV File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,115 +1,6 @@ | ||
| # Learning Header Actions Slot | ||
|
|
||
| ### 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`) | ||
|
|
||
| --- | ||
|
|
||
| ### 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`). | ||
|
|
||
|  | ||
|
|
||
| ```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: () => ( | ||
| <h1 style={{ textAlign: 'center' }}>🌜</h1> | ||
| ), | ||
| }, | ||
| }, | ||
| { | ||
| op: PLUGIN_OPERATIONS.Insert, | ||
| widget: { | ||
| id: 'custom_after_learning_actions', | ||
| type: DIRECT_PLUGIN, | ||
| priority: 90, | ||
| RenderWidget: () => ( | ||
| <h1 style={{ textAlign: 'center' }}>🌛</h1> | ||
| ), | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| 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. | ||
|
|
||
|  | ||
|
|
||
| ```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. | ||
|
|
||
|  | ||
|
|
||
| ```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: () => ( | ||
| <span>My Custom Learning Actions</span> | ||
| ), | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default config; | ||
| ``` | ||
|
|
||
| | 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/) | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,4 @@ | ||
| import React from 'react'; | ||
| import { PluginSlot } from '@openedx/frontend-plugin-framework'; | ||
| import HeaderNotificationsSlot from '../HeaderNotificationsSlot'; | ||
| import LearningHelpSlot from '../LearningHelpSlot'; | ||
|
|
||
| const LearningHeaderActionsSlot = () => ( | ||
| <PluginSlot | ||
| id="org.openedx.frontend.layout.learning_header_actions.v1" | ||
| > | ||
| <HeaderNotificationsSlot /> | ||
| <LearningHelpSlot /> | ||
| </PluginSlot> | ||
| ); | ||
| import LearningHeaderActionsSlot from './v2'; | ||
|
|
||
| export { default as LearningHeaderActionsSlotV1 } from './v1'; | ||
| export default LearningHeaderActionsSlot; |
123 changes: 123 additions & 0 deletions
123
src/plugin-slots/LearningHeaderActionsSlot/v1/README.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| # 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`). | ||
|
|
||
|  | ||
|
|
||
| ```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: () => ( | ||
| <h1 style={{ textAlign: 'center' }}>🌜</h1> | ||
| ), | ||
| }, | ||
| }, | ||
| { | ||
| op: PLUGIN_OPERATIONS.Insert, | ||
| widget: { | ||
| id: 'custom_after_learning_actions', | ||
| type: DIRECT_PLUGIN, | ||
| priority: 90, | ||
| RenderWidget: () => ( | ||
| <h1 style={{ textAlign: 'center' }}>🌛</h1> | ||
| ), | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| 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. | ||
|
|
||
|  | ||
|
|
||
| ```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. | ||
|
|
||
|  | ||
|
|
||
| ```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: () => ( | ||
| <span>My Custom Learning Actions</span> | ||
| ), | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default config; | ||
| ``` |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This test passes unchanged on
master.I ran it against the base files and all three cases pass, so it guards pre-existing hiding behavior and covers no new path. Add a case with a widget configured on
.v2andshowUserDropdown={false}, asserting the widget appears, plus one for the anonymous case. That needs amergeConfig({ pluginSlots: { ... } })setup, which this repo has no precedent for.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated: 3ae9441