Open edX plugin slots browser

Hi, I got something to show :slight_smile:

What?

If you have ever wanted to customize your Open edX instance and worked with MFEs, frontend plugins and that sort of thing, I have something that might interest you.

The Open edX Frontend Plugin Slots Browser.

This collects the information about all the plugin slots available in all of the MFEs under the openedx Github org and puts it in a single place. It automatically updates everyday with the latest info.

Why?

It was created mostly to satisfy my curiosity. Initially, I was just trying to get some metrics, like the ones that you see on the landing page. But as the flight I was waiting for got delayed for the second time, I just made it into a full site, which can host all the data in a neat browse-able way.

I am not sure how useful it would be for the community, but I am planning to include the backend parts - openedx-filters & openedx-events as well, and finally have a couple of guides on customizing Open edX, and links to existing documentation & best-practices.

Thank you for checking it out.

Update:

I ended up adding the openedx-filters and openedx-events details as well. Updated the screenshot to reflect that.

13 Likes

This is really cool, thank you!! Would it be possible to have a version switcher to show what’s available for a given release, not just master?

cc @arbrandes @brian.smith

3 Likes

That’s a great idea. It should be possible to query specific branches that correspond to the releases. Let me give it a go.

@sarina Now it’s possible to look release specific data for:

  • main
  • ulmo
  • teak
  • sumac

3 Likes

This some really cool stuff :smiling_face_with_sunglasses: nice job

1 Like

This is amazing… and would have saved me so much time when learning how to customize OpenEdX :smiley:

1 Like

This is awesome, @arunmozhi . Do you mind if I link this in the docs?

@sarina Absolutely not. :slight_smile: It would be amazing.

Is it expect that the browser does not seem to list the header slots ?

I see 18 of them in the “Main” branch version here → Header | Open edX Plugins System Catalog

The header and footer component’s are listed an independent MFEs, as they live it independent repos and I didn’t want to separate them out into a new category. So, they might now show up in the actual MFEs.

Really cool idea and solid implementation :+1: Thanks @arunmozhi!

1 Like

Hum, this is strange. They don’t show up in the Ulmo branch. Same with the Authn and Footer:

Is that some issue with the tagging then ? Because they are obviously also in Ulmo, not just in main.

There are 2 possibilities.

  1. I know the convention of using the plugin-slots folder wasn’t used initially. So, the slots could be there without the documentation.
  2. The data collection script in the repo is broken.

Since the convention was established almost an year back, I suspect it’s the issue #2. Let me investigate further.

Ah! apparently there is a 3rd scenario - the frontend-component-* repos don’t have release branches/tags. The right way to do it would be to include the header & components for each MFE with the specific pinned version for a particular release. Eg., authoring-mfe (release/ulmo) would have the slots defined in frontend-component-header version 8.1.0.

Added it to my todo: Include header and footer slots for specific versions in MFE releases · Issue #1 · tecoholic/openedx-plugin-slots-browser · GitHub

Is it the same issue with the whole Authn MFE missing from the Ulmo branch ? (but present in the main branch)

I see the Authn MFE in Ulmo → Authn | Open edX Plugins System Catalog

I also added the slots from the header and footer components to the MFEs. Now there are sections titled “Component: Header” and “Component: Footer” with their versions. They list the slots from these components.

Example: Authoring | Open edX Plugins System Catalog

But, I have run into an issue. The header and footer components seem to have MFE specific slots like StudioFooter, StudioFooterLogo..etc., which are probably not going to be used by something like the Learning MFE. But they are still part of the NPM package.

I need to come up with a way to keep only the relevant ones.

ok, now I see it, but it wasn’t there before. It’s not there in Teak either, but I don’t know if that’s because it did not exist back then.

You are right. There seems to be some issue with the data. frontend-app-authn has a release/teak branch, which means, it should be listed for teak.. hmm. debugging time.

A feature suggestion. It would be very useful if we could easily see what is the default content of the slot (i.e. the raw code). It would help customize it.

That would be a good addition. However, I don’t see a way to do it from the catalog app. Some slots come with the screenshots of the “Default view”, for e.g., CourseOutlineSubsectionCardExtraActionsSlot.

Maybe we can do this (including the screenshot of default contents) as a convention in the Slot READMEs upstream?