Program Summary

[ChristopherChudzicki]

What are the relevant tickets?

• https://github.com/mitodl/hq/issues/8763

Description (What does it do?)

Adds the program summary box to MIT Learn program pages.

Screenshots (if appropriate):

How can this be tested?

Prerequisite: A working mitxonline local installation; does not require OpenEdx integration.

Setup: Connect MITxOnline <--> MIT Learn:

# MIT Learn, backend.env
MITX_ONLINE_BASE_URL=http://mitxonline.odl.local:8013/
MITX_ONLINE_COURSES_API_URL=http://host.docker.internal:8013/api/v2/courses/
MITX_ONLINE_PROGRAMS_API_URL=http://host.docker.internal:8013/api/v2/programs/

# MIT Learn, frontend.env
## This is the default; it should not be overridden
NEXT_PUBLIC_MITX_ONLINE_BASE_URL=${MITX_ONLINE_BASE_URL}

# Be sure that COMPOSE_PROFILES is unset; we want the mit-learn apigateway and keycloak containers

# MITxOnline, .env
CSRF_COOKIE_DOMAIN=.odl.local
CORS_ALLOWED_ORIGINS=http://mitxonline.odl.local:8065, http://learn.odl.local:8062
CSRF_TRUSTED_ORIGINS=http://mitxonline.odl.local:8065, http://learn.odl.local:8062

# For mitol-django-apigateway
MITOL_APIGATEWAY_DISABLE_MIDDLEWARE=False
MITOL_APIGATEWAY_USERINFO_CREATE=True
MITOL_APIGATEWAY_USERINFO_UPDATE=True

# Keycloak settings, these should match mit-learn
KEYCLOAK_BASE_URL=http://kc.ol.local:8066
KEYCLOAK_CLIENT_ID=apisix
KEYCLOAK_CLIENT_SECRET=HckCZXToXfaetbBx0Fo3xbjnC468oMi4 # pragma: allowlist-secret
KEYCLOAK_DISCOVERY_URL=http://kc.ol.local:8066/realms/ol-local/.well-known/openid-configuration
KEYCLOAK_REALM_NAME=ol-local

Now:

1. Create a program with some required and elective courses. Useful things to know:
   • Create courses and programs with ./manage.py create_courseware, ./manage.py create_courseware_page; see --help for details. Note: program readable ids should start with program-v1:.
   • Add instructors/relevant data for your program in Wagtail at http://mitxonline.odl.local:8013/cms
2. Run MITxOnline ETL against your local MITxOnline; ./manage.py backpopulate_mitxonline_data --delete, and ./manage.py backpopulate_mitxonline_data
   • ⚠️ If you skip this step, everything should work fine, except the "Format" row of summary. The ETL data will be used for other parts of the product page in future, though.
3. Ensure product-page-course feature flag is on in your personal posthog
4. View your program at http://learn.odl.local:8062/programs/:program_id
5. Check that the product summary looks as it does in Figma
6. Other things to check:
   • no elective courses => elective data doesn't show at all
   • no "What's this?" opens a dialog

[ChristopherChudzicki]

Assuming that improve openapi for req_tree is merged, these @ts-expect-errors will start triggering errors on the corresponding new version of @mitodl/mitxonline-api-axios.

I did try a local copy of the client generated from improve openapi for req_tree and no errors are caused except the @ts-expect-error lines, whose fix is trivial (remove them).

[ChristopherChudzicki]

This and the related changes should mean we don't need to use local ips (which change when we come into the office...) for MIT Learn <> MITxOnline integration.

[gumaerc]

The program summary box works for me and looks good vs the Figma design.

I'll leave it up to you as to whether or not to do this, but normally I would separate the local dev Docker hostname changes into a separate PR. Nonetheless, I did notice something that looks to be a typo:

[gumaerc]

What is this about?

[ChristopherChudzicki]

cookies are the worst so great.

Typo, thanks.

Fixed the typo, but moved all that stuff to #2594

[gumaerc]

👍 Looks good!