-
Notifications
You must be signed in to change notification settings - Fork 80
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: plugin slots implementation
- Loading branch information
1 parent
a174abb
commit 9c97d4c
Showing
24 changed files
with
196 additions
and
111 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains 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 |
---|---|---|
|
@@ -93,4 +93,4 @@ | |
"redux-mock-store": "^1.5.4", | ||
"semantic-release": "^20.1.3" | ||
} | ||
} | ||
} |
This file contains 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 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 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 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 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
15 changes: 0 additions & 15 deletions
15
src/containers/WidgetContainers/WidgetSidebar/__snapshots__/index.test.jsx.snap
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
18 changes: 0 additions & 18 deletions
18
src/containers/WidgetContainers/WidgetSidebar/index.test.jsx
This file was deleted.
Oops, something went wrong.
This file contains 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,39 @@ | ||
# Course List Slot | ||
|
||
### Slot ID: `course_list_slot` | ||
|
||
## Description | ||
|
||
This slot is used for replacing or adding content around the `CourseList` component. The `CourseList` component is only rendered if the learner has enrolled in at least one course. | ||
|
||
## Example | ||
|
||
The space will show the `CourseList` component by default. This can be disabled in the configuration with the `keepDefault` boolean. Setting the MFE's `env.config.jsx` to the following will replace the default experience with a `CustomCourseList` component. | ||
|
||
![Screenshot of the CourseListSlot](./images/course_list_slot.png) | ||
|
||
```js | ||
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; | ||
import { CustomCourseList } from '<package-that-exports-your-component>' | ||
|
||
const config = { | ||
pluginSlots: { | ||
course_list_slot: { | ||
keepDefault: false, | ||
plugins: [ | ||
{ | ||
op: ops.Insert, | ||
widget: { | ||
id: 'custom_course_list', | ||
type: DIRECT_PLUGIN, | ||
priority: 60, | ||
RenderWidget: CustomCourseList, | ||
}, | ||
}, | ||
], | ||
}, | ||
}, | ||
} | ||
|
||
export default config; | ||
``` |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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,11 @@ | ||
import React from 'react'; | ||
|
||
import { PluginSlot } from '@openedx/frontend-plugin-framework'; | ||
import CourseList from 'containers/CoursesPanel/CourseList'; | ||
|
||
export const CourseListSlot = () => ( | ||
<PluginSlot id="course_list_slot"> | ||
<CourseList /> | ||
</PluginSlot> | ||
); | ||
export default CourseListSlot; |
This file contains 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,39 @@ | ||
# No Courses View Slot | ||
|
||
### Slot ID: `no_courses_view_slot` | ||
|
||
## Description | ||
|
||
This slot is used for replacing or adding content around the `NoCoursesView` component, which renders when the learner has not yet enrolled in any courses. | ||
|
||
## Example | ||
|
||
The space will show the `NoCoursesView` by default. This can be disabled in the configuration with the `keepDefault` boolean. The following `env.config.jsx` will replace the default experience with a `CustomNoCoursesCTA` component. | ||
|
||
![Screenshot of the no courses view](./images/no_courses_view_slot.png) | ||
|
||
```js | ||
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; | ||
import { CustomSidebarPanel } from 'package-that-exports-your-component'; | ||
|
||
const config = { | ||
pluginSlots: { | ||
no_courses_view_slot: { | ||
keepDefault: false, | ||
plugins: [ | ||
{ | ||
op: ops.Insert, | ||
widget: { | ||
id: 'custom_no_courses_CTA', | ||
type: DIRECT_PLUGIN, | ||
priority: 60, | ||
RenderWidget: CustomSidebarPanel, | ||
}, | ||
}, | ||
], | ||
}, | ||
}, | ||
} | ||
|
||
export default config; | ||
``` |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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,12 @@ | ||
import React from 'react'; | ||
|
||
import { PluginSlot } from '@openedx/frontend-plugin-framework'; | ||
import NoCoursesView from 'containers/CoursesPanel/NoCoursesView'; | ||
|
||
export const NoCoursesViewSlot = () => ( | ||
<PluginSlot id="no_courses_view_slot"> | ||
<NoCoursesView /> | ||
</PluginSlot> | ||
); | ||
|
||
export default NoCoursesViewSlot; |
This file contains 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,3 +1,6 @@ | ||
# `frontend-app-learner-dashboard` Plugin Slots | ||
|
||
* [`footer_slot`](./FooterSlot/) | ||
* [`widget_sidebar_slot`](./WidgetSidebarSlot/) | ||
* [`course_list_slot`](./CourseListSlot/) | ||
* [`no_courses_view_slot`](./NoCoursesViewSlot/) |
This file contains 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,40 @@ | ||
# Widget Sidebar Slot | ||
|
||
### Slot ID: `widget_sidebar_slot` | ||
|
||
## Description | ||
|
||
This slot is used for adding content to the right-hand sidebar. | ||
|
||
## Example | ||
|
||
The space will show the `LookingForChallengeWidget` by default. This can be disabled in the configuration with the `keepDefault` boolean. | ||
Setting the MFE's `env.config.jsx` to the following will replace the default experience with a `CustomSidebarPanel` component. | ||
|
||
![Screenshot of the widget sidebar](./images/looking_for_challenge_widget.png) | ||
|
||
```js | ||
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; | ||
import { CustomSidebarPanel } from 'package-that-exports-your-component'; | ||
|
||
const config = { | ||
pluginSlots: { | ||
widget_sidebar_slot: { | ||
keepDefault: false, | ||
plugins: [ | ||
{ | ||
op: ops.Insert, | ||
widget: { | ||
id: 'custom_sidebar_panel', | ||
type: DIRECT_PLUGIN, | ||
priority: 60, | ||
RenderWidget: CustomSidebarPanel, | ||
}, | ||
}, | ||
], | ||
}, | ||
}, | ||
} | ||
|
||
export default config; | ||
``` |
Binary file added
BIN
+182 KB
src/plugin-slots/WidgetSidebarSlot/images/looking_for_challenge_widget.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.