Skip to content
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

feat: add plugin slot for course card action #464

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

jsnwesson
Copy link
Contributor

@jsnwesson jsnwesson commented Sep 25, 2024

This PR makes the first step toward removing the Upgrade Button from Learner Dashboard's core functionality, by creating a CourseCardActionSlot whose default component is the Upgrade Button. A follow up PR will remove the default component entirely, as well as remove the source code itself.

To test this locally:

  1. Pull down this branch into your local environment
  2. In the env.config.js file in your root directory, add the following configuration. To toggle the default component, you can adjust the keepDefault.
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';

const config = {
  pluginSlots: {
    course_card_action_slot: {
      keepDefault: false,
      plugins: [
        {
          // Insert custom content after course card buttons
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: 'custom_course_card_action',
            priority: 60,
            type: DIRECT_PLUGIN,
            RenderWidget: ({cardId}) => (
              <div>
                <p>📚: {cardId}</p>
              </div>
            ),
          },
        },
      ]
    }
  },
}

export default config;

Current Default Content in CourseCardActionSlot:

Screenshot 2024-09-26 at 3 44 30 PM

Replacing Default Content in CourseCardActionSlot:

Screenshot 2024-09-26 at 3 54 22 PM

Using props passed into PluginSlot

Screenshot 2024-09-27 at 10 33 31 AM

Contributes to: #438 #297

@jsnwesson jsnwesson requested a review from a team as a code owner September 25, 2024 18:54
Copy link
Member

@MaxFrank13 MaxFrank13 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a couple nit picks. Thanks for setting this one up!

src/plugin-slots/CourseCardActionSlot/index.jsx Outdated Show resolved Hide resolved
Copy link
Contributor

@arbrandes arbrandes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per the conversation in today's FWG meeting, this is fine for now.

@jsnwesson
Copy link
Contributor Author

@sarina here's some screenshots, which I actually liked the custom button example so much that that's what is now going into the repo documentation for this plugin slot!

Copy link

codecov bot commented Sep 26, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.25%. Comparing base (a174abb) to head (c9aadd5).

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #464   +/-   ##
=======================================
  Coverage   97.24%   97.25%           
=======================================
  Files         154      155    +1     
  Lines        1378     1383    +5     
  Branches      228      229    +1     
=======================================
+ Hits         1340     1345    +5     
  Misses         36       36           
  Partials        2        2           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Comment on lines 17 to 64
```js
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
import ActionButton from 'containers/CourseCard/components/CourseCardActions/ActionButton';

const config = {
pluginSlots: {
course_card_action_slot: {
keepDefault: false,
plugins: [
{
// Insert Custom Button in Course Card
op: PLUGIN_OPERATIONS.Insert,
widget: {
id: 'custom_course_card_action',
priority: 60,
type: DIRECT_PLUGIN,
RenderWidget: ({cardId}) => (
<ActionButton
variant="outline-primary"
>
Custom Button
</ ActionButton>
),
},
},
{
// Insert Another Button in Course Card
op: PLUGIN_OPERATIONS.Insert,
widget: {
id: 'another_custom_course_card_action',
priority: 70,
type: DIRECT_PLUGIN,
RenderWidget: ({cardId}) => (
<ActionButton
variant="outline-primary"
>
Another Button
</ ActionButton>
),
},
},
]
}
},
}

export default config;
```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This example looks wonderful now! Super pretty.

Would you mind updating one of the buttons to include something about the cardId? One thing I really liked about the example you had before was that it demonstrated the pluginProps being used.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea, I sure can!

@sarina
Copy link

sarina commented Sep 27, 2024

Thank you this is perfect!

@jsnwesson jsnwesson force-pushed the jwesson/add-plugin-slot-course-card-action branch from a3c37fe to c9aadd5 Compare September 27, 2024 17:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

5 participants