openedx / frontend-app-learner-dashboard Goto Github PK
View Code? Open in Web Editor NEWLearner Dashboard MFE
License: GNU Affero General Public License v3.0
Learner Dashboard MFE
License: GNU Affero General Public License v3.0
I reviewed this repo's README against these specifications and outlined what's currently included and what needs to be added below.
When making any changes or updates, note that ideally we should stick to the exact section order shown below with additional sections added where it makes sense based on the maintainers' judgement.
npm install
or nvm use
During discovery with @httpsmenahassan, found hard coded references to a private plugin. Should have the plugin be public and usable by the community or removed/deprecated.
This string should use the configured platform name instead of edX:
When referencing requirements for an MFE here , 13 is to only have hard dependencies on libraries that are either in the open edX organization or a commonly used third-party (generic NPM package) . During discovery found that:
If the environment variable EXPERIMENT_08_23_VAN_PAINTED_DOOR
is unset, the MFE fails with a console error.
On a devstack, simply check-out master
and try to npm start
as-is. You will run into an uncaught TypeError.
As far as simple solutions go, the preferred one would be for this variable to be treated as false
if unset.
It's possible to work around the issue by setting EXPERIMENT_08_23_VAN_PAINTED_DOOR=false
(or true
) in .env.development
.
However, a more important conversation to have is if these experiments should be in the codebase at all.
When I try to unenroll from a course, the API gives error. As the API is requesting the default .env.development
variable which is http://localhost:18000
. But it should request to LMS_BASE_URL
provided in the MFE_CONFIG settings. When printing the getConfig().LMS_BASE_URL
, it is printing the correct URL.
Hi,
I am using tutor 17.0.0
I’m changing the underlying code for some of the MFEs in tutor. I changed the authn MFE successfully by forking it and then mounting my authn repo and running it in dev environment. When I try to do the same for learner-dashboard (I forked quince.1: https://github.com/openedx/frontend-app-learner-dashboard/releases/tag/open-release%2Fquince.1):
clone my repo
run npm install inside repo directory
add a mount by running tutor mounts add "$(tutor config printroot)"/frontend-app-learner-dashboard
run tutor dev launch
I get:
docker compose -f /home/silidrone/.local/share/tutor/env/local/docker-compose.yml -f /home/silidrone/.local/share/tutor/env/dev/docker-compose.yml --project-name tutor_dev up --remove-orphans -d
[+] Running 0/1
⠿ learner-dashboard Error 1.8s
Error response from daemon: pull access denied for overhangio/openedx-learner-dashboard-dev, repository does not exist or may require ‘docker login’: denied: requested access to the resource is denied
Error: Command failed with status 18: docker compose -f /home/silidrone/.local/share/tutor/env/local/docker-compose.yml -f /home/silidrone/.local/share/tutor/env/dev/docker-compose.yml --project-name tutor_dev up --remove-orphans -d
How am I supposed to change the code of the learner-dashboard MFE? Is this a bug or am I missing something? The exact same procedure worked for frontend-app-authn.
While working on an MFE branding/customization and testing the dashboard MFE locally, I noticed that the brand logo wasn't being overridden.
I tried overriding the logo with both possible options:
.env.development
Further digging into this, I noticed that the logo URL in the dashboard MFE's BrandLogo component is hardcoded. I assume this means it would never care for any logo URLs added through environment vars.
LOGO_URL
in the .env.developmentInstead of using the frontend-component-header the MFE uses its own LearnerDashboardHeader component. Main pain points here:
It would be great to replace it with the easily-brandable frontend-component-header.
The latest master depends on edx.org brand package which is not open source.
Similar issues in other MFEs:
During discovery with @httpsmenahassan - found that ZendeskFab is an external subscription base that we need to access a proprietary API for, which does not have a wide adoption inside the community. Wanted to stray away from recommending a third party service or company like this as part of an open source project. Can we remove and replace this?
Has multiple hardcoded edX strings (example here).
When referencing requirements for an MFE here , 13 is to only have hard dependencies on libraries that are either in the open edX organization or a commonly used third-party (generic NPM package)
This is visible in console while running the master
, quince.2
, quince.1
branches.
Warning: Cannot update a component (`DashboardLayout`) while rendering a different component (`WidgetSidebar`).
To locate the bad setState() call inside `WidgetSidebar`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
This repo uses a bit of an SCSS anti-pattern... it has many separate SCSS files which each start with @import "@openedx/paragon/scss/core/core";
The net result is that Paragon's SCSS rules are included 10 times. If you go to https://home.edx.org/ and use the browser's Inspect tool, you can easily confirm this:
The fix is any of the following:
@import
with the newer @use
which avoids this problem. (Edit: or so I thought... but in testing, I can't get it to work. It still duplicates all the rules. I think it only works if you also take approach 2 below).course-authoring
does so you have one file that includes paragon and then includes all the other SCSS files from your app; orDescription:
When a learner tries to un-enroll from a course, the URL shows it's successful, but there is no change.
The record remain active in admin model and the enrollment is unchanged.
** Steps to reproduce **
Go to Dashboard
Expected Behavior
Actual behavior
This issue is raised as result of discussion from this forum post
Specs
Tutor :- 17.0.1 & 17.0.2
Open edX :- quince.1 & quince.2
Frontend-app-learner-dashboard :- quince.1 & quince.2
This repo is currently using React JS v16. We need to upgrade it to React 17 before moving to latest React version(v18).
React 17 doesn’t add any new developer-facing features, so its upgrade might not cause any breaking changes. Our end goal is to upgrade React to v18 but v18 no longer support enzyme, so we are upgrading to React 17 and then we’ll migrate from enzyme.
Hi all. Translations for Persian language (fa
and / or fa-ir
) is not currently available neither in Quince nor in master. As leaner dashboard is set as default dashboard by tutor, it would be great to have translations for Persian as well.
This issue was originally discussed in this topic in the forum
As per https://discuss.openedx.org/t/translations-issues-with-the-frontend-app-learner-dashboard/12287, @sambapete writes:
(...) not all string ids in the various messages.js files found in the repository are properly harvested, collected and sent to Transifex for translations.
If you look at the course card on the dashboard, you will see for example that the string “Begin Course” and other strings remain in English for all languages. You can easily check that by switching languages in edx.org or in your own Open edX instances running Quince for example.
That’s because the strings in src/containers/CourseCard/components/CourseCardActions/messages.js never made it to src/i18n/messages/fr_CA.json or any other files that would be used for translating various languages in the MFE. Check for the id learner-dash.courseCard.actions.beginCourse and you will not find it in the strings that the Translations Working Group needs to translate in Transifex.
Make sure this MFE follows all the community requirements. Sub-tasks are listed below.
The messages from src/containers/CourseCard/components/CourseCardBanners/messages.js
are not included in the Transifex resource file.
Check for learner-dash.courseCard.banners.passingGrade for example.
I tested frontend-app-learner-dashboard using the openedx brand theme and the style changes looked great. Nothing stuck out to me as a concern.
Here's the MFE with the openedx brand:
And here is it with edx.org brand. (default at the moment: #183)
The recommendations panel implementation was removed as part of #311. We should re-add the basic component as default content for the corresponding slot:
As an authenticated student/instructor, when you do User dropdown > Switch dashboard > Personal
redirects to /edx-dashboard
.
First, a few context questions:
What's the purpose of the personal
dashboard?
How does it work for edX? What does it do?
How would that look like for the community?
As for the Quince release, we could hide the Switch dashboard
behind a feature flag here:
I'll be opening a PR with this proposed change.
Discovery done with @cintnguyen:
The EmailLink component is covering for the use case of if there isn’t an email address provided. It’s being tightly coupled with Paragon’s MailToLink, returning null when the address is not provided. Seen here. It's being used throughout the code base and seems redundant.
We addressed this in Paragon’s WG meeting for further clarification on if we should build out MailToLink in Paragon to handle this use case. You can find those meeting notes here.
The takeaways from the WG are that If you’re using MailtoLink
, we expect that an email address will exist to send. Currently, none of the following props are required: to
, cc
, and bcc
. We could possibly make one of these required.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | redux-devtools-extension |
These updates are awaiting their schedule. Click on a checkbox to get an update now.
@testing-library/jest-dom
, @testing-library/react
, @testing-library/user-event
)@fortawesome/fontawesome-svg-core
, @fortawesome/free-brands-svg-icons
, @fortawesome/free-solid-svg-icons
)react
, react-dom
, react-test-renderer
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
.github/workflows/add-depr-ticket-to-depr-board.yml
.github/workflows/add-remove-label-on-comment.yml
.github/workflows/ci.yml
actions/checkout v3
actions/setup-node v3
codecov/codecov-action v4
dawidd6/action-send-mail v3
ubuntu 20.04
.github/workflows/commitlint.yml
.github/workflows/lockfileversion-check.yml
.github/workflows/npm-publish.yml
actions/checkout v3
actions/setup-node v3
ubuntu 20.04
.github/workflows/self-assign-issue.yml
package.json
@edx/brand ^1.2.2
@edx/browserslist-config ^1.1.0
@edx/frontend-enterprise-hotjar 3.0.0
@edx/frontend-platform 8.1.0
@edx/openedx-atlas ^0.6.0
@edx/react-unit-test-utils 3.0.0
@fortawesome/fontawesome-svg-core ^1.2.36
@fortawesome/free-brands-svg-icons ^5.15.4
@fortawesome/free-solid-svg-icons ^5.15.4
@fortawesome/react-fontawesome ^0.2.0
@openedx/frontend-plugin-framework ^1.2.0
@openedx/frontend-slot-footer ^1.0.2
@openedx/paragon ^22.2.2
@optimizely/react-sdk ^2.9.2
@redux-beacon/segment ^1.1.0
@reduxjs/toolkit ^1.6.1
@testing-library/user-event ^13.5.0
axios ^0.28.0
classnames ^2.3.1
core-js 3.37.1
dompurify ^2.3.1
email-prop-type ^3.0.1
file-saver ^2.0.5
filesize ^8.0.6
font-awesome 4.7.0
history 5.3.0
html-react-parser ^1.3.0
jest ^29.7.0
jest-environment-jsdom 29.7.0
jest-when ^3.6.0
lodash ^4.17.21
moment ^2.29.4
prop-types 15.8.1
query-string 7.1.3
react ^17.0.2
react-dom ^17.0.2
react-helmet ^6.1.0
react-intl 6.4.7
react-pdf ^7.0.0
react-redux ^7.2.4
react-router-dom 6.15.0
react-share ^4.4.0
react-zendesk ^0.1.13
redux 4.1.1
redux-beacon ^2.1.0
redux-devtools-extension 2.13.9
redux-logger 3.0.6
redux-thunk 2.3.0
regenerator-runtime ^0.13.9
reselect ^4.0.0
universal-cookie ^4.0.4
util ^0.12.4
whatwg-fetch ^3.6.2
@edx/reactifex ^2.1.1
@openedx/frontend-build 14.0.10
@testing-library/jest-dom ^5.14.1
@testing-library/react ^12.1.0
axios-mock-adapter ^1.20.0
copy-webpack-plugin ^11.0.0
fetch-mock ^9.11.0
husky ^7.0.0
identity-obj-proxy ^3.0.0
jest-expect-message ^1.1.3
react-dev-utils ^11.0.4
react-test-renderer ^17.0.2
redux-mock-store ^1.5.4
semantic-release ^20.1.3
.nvmrc
node 18.20
During discovery work with @cintnguyen, we noticed a large gap between the footer and the end of the page.
This becomes an issue around 1080px in height. We need to make sure the container for all of the content we're showing accounts for the header and footer and supports the viewport.
The configuration/toggles for this MFE are referred as mfe_home however the repo name is leaner-dashboard.
This might create confusion. as typically (as observed) the pattern that is uesed that toggles/settings for each MFE are named as to what the MFE is called in it's repo.
So I suggest either:
frontend-app-leaener-home
learner_dashboard
See the parent ticket for the general description and motivation, openedx/public-engineering#267. Make sure to follow its recommendations for each step of the process.
There are a lot of things in Learner Dash that need to be made optional (Related Programs, Recommendations for You, Upgrade, Grade Required to Pass the Course, and Social Media Buttons), but the Upgrade button is rather critical.
Enzyme is deprecated, we've moved other repos to React Testing Library, we should migrate our tests as well. This would likely allow us to remove the following dependencies:
During discovery work of ensuring this MFE passed accessibility (a11y) standards and using Paragon components whenever possible, found that frontend-app-learner-dashboard is using Alert to do what is essentially the function of CardStatus. Using Alert has accessibility concerns since it includes aria-live="assertive"
, which would only allow the last message to be read aloud. This presents a problem since the user potentially will have multiple course card banner messages with the need to read all aloud.
Is there something about this usage of Alert that is being used because CardStatus isn’t satisfying another need here? How can we/how should we expand the functionality of CardStatus to cover use cases like this?
export const Banner = ({
children, variant, icon, className,
}) => (
<Alert variant={variant} className={className} icon={icon}>
{children}
</Alert>
);
(Enroll in a course and you’ll be shown an example of CourseCardBanner that uses Alert below the course listed with the course info displayed under ‘My Courses’. Image attached below to show that CourseCardBanner component is "Grade required to pass the course: 60%")
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.