How to edit the available plugin slots if the openedx is installed using tutor?

Site Operators Tutor Help
,
1

I have been trying to understand how to edit the frontend plugin slots if I installed the system using tutor. IN tutor, all mfe are pre-installed so I can’t edit their env.config.jsx. The other way seems like by creating plugin. IS the plugin code shown below correct? Can you please guide step by step?

from tutormfe.hooks import PLUGIN_SLOTS

PLUGIN_SLOTS.add_items([
    # Hide the default footer
    (
        "all",
        "footer_slot",
        """
        {
          op: PLUGIN_OPERATIONS.Hide,
          widgetId: 'default_contents',
        }"""
    ),
    # Insert a custom footer
    (
        "all",
        "footer_slot",
        """
        {
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: 'custom_footer',
            type: DIRECT_PLUGIN,
            RenderWidget: () => (
              <h1>This is the footer.</h1>
            ),
          },
        }"""
    )
    ])
2

Hi @czn and welcome!

Have you read the release notes and the other links at the bottom of the page, to start?

3

Hi @sarina - I’m also wondering about the same - I did follow all different instructions but honestly if one thing is bad about tutor edx, it is the lack of clear and simple steps on how to implement something…I’m not a python expert but I do have solid knowledge and unfortunately there is an important lack of clear steps and documentation on how to achieve something which is probably fairly simple.

For example this link Use A Frontend Plugin Framework Slot — Latest documentation is very unclear…and for someone like me, not being an expert it can take hours to try to understand what to do…
Instructions are saying that frontend-app-learner-dashboard should be installed. But installed where? in which folder? compiled and then what?

4

I hear you and I’m going to tag @arbrandes as the author of some of these documents to help clarify.

5

Hi @sarina, thank you for your reply. I managed to get to work. I enabled the plugin then rebuilt all the images then performed a local launch, which updated the plugin slots. However, I’m still unclear about something: when should I edit env.config.jsx directly, and when should I create a plugin to modify it? If creating a plugin is always required, is it possible to import other React components in the same way we can when editing env.config.jsx directly?

When installed using tutor, I believe we won’t be able to change the env.confix.jsx file of already included mfe, correct?

6

I agree with you @mslyon. It is really pain for beginner like me. But I am hoping it will get easier overtime.

Also, some of the things like dashboard are already installed with tutor but it is difficult to understand how we can modify it.

7

Can you send the steps you used? Thabks

8

First, you will need to create a plugin.

Screenshot 2025-01-09 at 7.52.32 AM
Screenshot 2025-01-09 at 7.52.32 AM1498×1376 180 KB

You can then go to the folder where plugin lies then and edit the python plugin file by adding the code I use in this discussion. Then enable the plugin. The code I posted in the beginning of this discussion will edit the logo and the footer.

Finally, to see the changes in the local launch, run the following command.

tutor images build all
tutor local launch

This is will take some time. However, to see the instant changes, I think we will need to do by tutor dev launch but I haven’t figured that part yet. Dev launch will help when we are testing and developing as you know building images and local launch takes a lot of time which is not ideal when we are playing with the ideas.

I am working on the steps shown here to try editing in development mode: Working on edx-platform as a developer — Tutor documentation

9

As of tutor version 19 (the one that installs Sumac), you should not edit env.config.jsx directly if you intend to use it in production (via tutor local). You should instead create a plugin, as you seem to have figured out.

In development mode (tutor dev), however, the easiest way to test changes to env.config.jsx is simply to include a copy of the full file in the root of an MFE whose directory is bind-mounted as described here.