[TC_LEARNER_41] > date and course outline pages are blank

[fayyazahmed66]

Steps to reproduce:

1. Go to the progress page on any course in LMS
2. check the date and course outline pages

Expected result:
Pages should have some data in them.
Actual result:
Pages are blank

PRs

• fix: fix tabs urls on progress tab frontend-app-learning#1009
• fix: fix tabs urls on progress tab frontend-app-learning#1011 (Olive backport)

[fayyazahmed66]

label: olive testing

[mariajgrimaldi]

I believe this issue is related to the learning MFE, since the path should be:
/learning/course/course-v1:edX+DemoX+Demo_Course/home -this path works-
Instead of just:
/course/course-v1:edX+DemoX+Demo_Course/home -this path doesn't-

I don't know why this is behaving like that or if that is even the problem. Since I'm unfamiliar with MFEs, I'll tag some folks who are.
cc @arbrandes @kdmccormick

[kdmccormick]

@mariajgrimaldi hmmm, interesting. The path /course/course-v1:edX+DemoX+Demo_Course/home actually looks correct; it's just that the path is meant to be relative to the root of the learning mfe, which in our case is https://apps.olive.overhang.io/learning. The learning mfe makes this same assumption in many other places.

So, I would expect some other step in Tutor's build pipeline to account for this by to prepending /learning/ to the URL. I don't know exactly why that's not working here. If I had to guess, I'd bet it's a bug in the <Hyperlink> component from Paragon (or a bug in how we handle it), since this is the only place in the learning mfe where we use <Hyperlink> for an absolute path to the learning mfe.

[mariajgrimaldi]

Thanks, @kdmccormick, for the detailed explanation!

[ghassanmas]

@arbrandes @mariajgrimaldi following our yesterday meeting, this issue caught my attention, so while looking into I came out with a suggested fix here openedx/frontend-app-learning/pull/1009. The way my fix work is by getting urls of the tabs from the state, simlair to how TabNavigation gets them, which orginally gets them from coursemetadata API.

[mariajgrimaldi]

Thank you @ghassanmas! I left you a comment in the PR :)

[ghassanmas]

[Edit] Sorry I meant to reply on the PR, but got overwhelmed by github notifcation 🙈

I tested this on production with tutor on my demo instance at olive.zaat.dev and it worked as expected, but in anycase, to debug this could you when loading the learning MFE check the network logs in for the result of this call:

https://LMS_BASE_URL/api/course_home/course_metadata/course-id

For example in my demo instance I for

https://olive.zaat.dev/api/course_home/course_metadata/course-v1:zaatdev+101+1

I get this

{
    "can_show_upgrade_sock": false,
    "verified_mode": null,
    "celebrations": {
        "first_section": false,
        "streak_length_to_celebrate": null,
        "streak_discount_enabled": false,
        "weekly_goal": false
    },
    "course_access": {
        "has_access": true,
        "error_code": null,
        "developer_message": null,
        "user_message": null,
        "additional_context_user_message": null,
        "user_fragment": null
    },
    "course_id": "course-v1:zaatdev+101+1",
    "is_enrolled": true,
    "is_self_paced": true,
    "is_staff": true,
    "number": "101",
    "org": "zaatdev",
    "original_user_is_staff": true,
    "start": "2022-12-05T00:00:00Z",
    "tabs": [
        {
            "tab_id": "courseware",
            "title": "Course",
            "url": "https://apps.olive.zaat.dev/learning/course/course-v1:zaatdev+101+1/home"
        },
        {
            "tab_id": "progress",
            "title": "Progress",
            "url": "https://apps.olive.zaat.dev/learning/course/course-v1:zaatdev+101+1/progress"
        },
        {
            "tab_id": "dates",
            "title": "Dates",
            "url": "https://apps.olive.zaat.dev/learning/course/course-v1:zaatdev+101+1/dates"
        },
        {
            "tab_id": "wiki",
            "title": "Wiki",
            "url": "https://olive.zaat.dev/courses/course-v1:zaatdev+101+1/course_wiki"
        },
        {
            "tab_id": "instructor",
            "title": "Instructor",
            "url": "https://olive.zaat.dev/courses/course-v1:zaatdev+101+1/instructor"
        }
    ],
    "title": "Olive Demo",
    "username": "admin",
    "user_timezone": null,
    "can_view_certificate": true
}

[mariajgrimaldi]

I'm not sure what's wrong with my setup then. Either way, can you add an image similar to this one? So we have a record that it's working. Thanks again!

[ghassanmas]

I am not very good with photo editing, but here is an attempt screenshot when I hoverovered the dates in progress

You can try it with https://olive.zaat.dev email: [email protected] password: admin

[mariajgrimaldi]

@ghassanmas thank you! ❤️

[arbrandes]

Fixed! Thanks, @ghassanmas!