Support for the Gradebook MFE

[arbrandes]

Coordinate, and if necessary execute, the tasks necessary to get the Gradebook MFE up to speed for Lilac:

1. It passes a minimum standard of documentation: at the very least, the READMEs should have descriptive text that includes use cases, screenshots, and particularly, documentation on that MFE's environment variables.
2. Its basic feature-set (as documented above) works reliably with the rest of the Lilac codebase.
3. It's deployed by default using the Native Installation, and deployable as a plugin using Tutor.
4. It is internationalized (i18n), localizable (l10n), and passes minimum accessibility (a11y) standards.
5. It has a header and footer that are customizable via npm aliases: https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#overriding-brand-specific-elements
6. It is compatible with the @edx/brand system: https://open-edx-proposals.readthedocs.io/en/latest/oep-0048-brand-customization.html
7. It uses CSS utility classes in a branding-friendly way. (i.e., don't use things like 'bg-white')

[arbrandes]

@regisb, can we count on you for Tutor support for this, as well as for #28 and #27?

(It doesn't mean you're the only assignee, here, just that you'll help - or at least kickstart - the Tutor bits. :)

[regisb]

Yes, the required MFEs will be delivered for Tutor in v12.

[sarina]

@arbrandes -- given the MFE is currently not internationalized, are we going to put this MFE aside for the more critical ecommerce MFEs?

cc @kdmccormick

[arbrandes]

@sarina, apologies for the protracted delay, but as we've already discussed in the meeting, yup, we're dropping this one.

[jnlapierre]

Good Morning :) I am going to be reviewing this. I plan to review it today.

[nedbat]

@jnlapierre is the edX contact for this work. Thanks Justin!

[jfavellar90]

Thanks @nedbat, @jnlapierre Please let me know if you require any help in the review you're going to perform.

[jfavellar90]

Hi @jnlapierre did you have the chance to review the Gradebook MFE?

[jfavellar90]

@davidjoy @jnlapierre hi, do you have any updates related to the Gradebook MFE?

[jfavellar90]

@BbrSofiane I'm in the process of testing the MFE in Tutor. I've found an issue related to the MFE running in a subdirectory instead of a subdomain. The line here extracts the course_id string from the window location and assumes all the implementations of the MFE use a subdomain. If the MFE lives in a subdirectory (for instance https://mydomain.com/gradebook/), the course_id is wrongly extracted, which causes errors in building URLs the app will use to fetch data from LMS APIs. This issue should be easy to solve, I'll create the corresponding PR.

@davidjoy @jnlapierre a couple of questions here:

• The MFE is still not internationalized (the path here contains empty files), should I use the repo Makefile commands to pull the translations?
• Is it OK to use the guide here to test the branding changes and header/footer override?

Thank you in advance

[davidjoy]

That link describes how to do the header/footer overrides, yes. It appears that gradebook is only using the frontend-component-footer repo, but not the header. That means it won't work for the header.

To test out branding (changing styles), see directions here: https://github.com/edx/brand-openedx

I can't speak to the internationalization state. I'm still trying to get some time from someone on @jnlapierre's team to help us.

[jfavellar90]

@davidjoy @jnlapierre I added a PR to fix the problem of the courseId calculation here. Could you please help me with a review? Thanks!

[jfavellar90]

@BbrSofiane I think this is not ready to be marked as DONE. I'll be working on checking the branding, header and footer overrides and i18n

[BbrSofiane]

@jfavellar90 yes, I meant to close the other issue.

[jfavellar90]

Comments related to this task:

• I can confirm it is compatible with the @edx/brand system. I used the patch mfe-dockerfile-post-npm-install offered by Tutor to install a fork of the edx/brand-openedx repo (https://github.com/eduNEXT/brand-openedx/) with a couple of style changes. It worked as expected. The line to install the custom branding repo was the following]:

RUN npm install --no-audit --no-fund @edx/brand@git+https://github.com/eduNEXT/brand-openedx.git --save

• I had issues running the footer override. I just forked the base repo and applied a couple of changes on the last tagged version (v10.1.6). Then tried to install the footer with npm aliases through the same mfe-dockerfile-post-npm-install patch. When building the grade book app with the override I get the error HERE Doing a little research I found this post from where I took a couple of ideas to fix the issue. Specifically, I tried this and this, obtaining the same failure. @davidjoy could you please take a look? I suspect this is something easy to fix. This MFE does not support header override. We need to decide if this is a must-have for the final release.

• The PR related to the course extraction fix is still waiting for a review. I already tagged again the team in charge of the repo.

• Related to i18n, @regisb has been working on creating the project in Transifex for this MFE and created a PR with the first version of the translations pulled from Transifex.

[davidjoy]

I'm pretty sure the import shouldn't be prefixed with an underscore _:

@import "~@edx/frontend-component-footer/dist/_footer";

It's a fragment, so SASS should find it without that.

I think it should be:

@import "~@edx/frontend-component-footer/dist/footer";

[pdpinch]

FYI, regarding the header, @asadiqbal08 has the follow PRs in-flight for the Learning MFE:

https://github.com/edx/frontend-app-learning/pull/715 https://github.com/edx/frontend-component-header/pull/133 https://github.com/edx/frontend-component-header-edx/pull/196

[jfavellar90]

@davidjoy According to my testing, the problem with the footer override is that dist folder is not included in the GitHub repos. I had to manually stop ignoring the dist folder in my footer component fork (https://github.com/eduNEXT/frontend-component-footer/commit/89015dc1fec7da89313b0989181bc7463216c7ba) and install the component from the repo. Once this is done, the footer override works as expected. I'm not pretty sure this is a good practice but it was the only way I got it working. any thoughts related to this approach?

[BbrSofiane]

Once this is done, the footer override works as expected. I'm not pretty sure this is a good practice but it was the only way I got it working. any thoughts related to this approach?

@davidjoy any thoughts on this?

[BbrSofiane]

@jfavellar90 is this the last hurdle to for the gradebook MFE to be ready?

[jfavellar90]

@BbrSofiane we need to get merged this PR: https://github.com/edx/frontend-app-gradebook/pull/213 in order to make the MFE work properly in tutor, @davidjoy is there any way to accelerate this process? Once merged it must be backported to Gradebook maple release

I have another PR in https://github.com/edx/frontend-app-gradebook/pull/220 related to the frontend-component-header implementation, but this is not a must-have for the Maple release (this PR can take a bit longer to get merged).

On the other hand, we need to backport the language work that Regis already got merged in master. I was wondering if we can reset maple release branch (open-release/maple.beta1) to the current master.

Summarizing, the minimum required for the release is:

• Merge and backport of the PR https://github.com/edx/frontend-app-gradebook/pull/213
• Backport of the Regis language work

I remain super attentive to any feedback.

[BbrSofiane]

edx/frontend-app-gradebook#218 - backport to maple

[jfavellar90]

@BbrSofiane backport course id issue https://github.com/edx/frontend-app-gradebook/pull/221

[BbrSofiane]

merge edx/frontend-app-gradebook#222