Add support for ProgramCollection

[gumaerc]

What are the relevant tickets?

https://github.com/mitodl/hq/issues/7699

Description (What does it do?)

This PR adds support for the MITx Online ProgramCollection model on the org dashboard. First, programs that are not part of a collection are displayed, along with all their courses. After that, program collections are displayed. The cards shown in a program collection are the first course returned from each program in the collection.

Screenshots (if appropriate):

How can this be tested?

In order to test this, you need a basic installation of mitxonline up and running with example data in it. You may be able to skip one or more steps if you have already done them:

• Ensure you have local hosts redirects for the following domains, replacing the example IP with your local IP address (Google how to get this if unsure, mine is 192.168.1.50)

192.168.1.50 open.odl.local
192.168.1.50 api.open.odl.local
192.168.1.50 kc.ol.local
192.168.1.50 mitxonline.odl.local

• Clone mitxonline: https://github.com/mitodl/mitxonline
• Create a .env file with the following values:

CELERY_TASK_ALWAYS_EAGER=True
DJANGO_LOG_LEVEL=INFO
LOG_LEVEL=INFO
SENTRY_LOG_LEVEL=ERROR
MAILGUN_KEY=fake
MAILGUN_URL=
MAILGUN_RECIPIENT_OVERRIDE=
MAILGUN_SENDER_DOMAIN=.odl.local
SECRET_KEY=
STATUS_TOKEN=
UWSGI_THREADS=5
SENTRY_DSN=
MITX_ONLINE_BASE_URL=http://open.odl.local:8065/mitxonline
MITX_ONLINE_ADMIN_CLIENT_ID=refine-local-client-id
MITX_ONLINE_ADMIN_BASE_URL=http://mitxonline.odl.local:8016
POSTHOG_PROJECT_API_KEY=
POSTHOG_API_HOST=https://app.posthog.com/
HUBSPOT_HOME_PAGE_FORM_GUID=
HUBSPOT_PORTAL_ID=
APISIX_PORT=9080

# APISIX/Keycloak settings
APISIX_LOGOUT_URL=http://api.open.odl.local:8065/logout/
APISIX_SESSION_SECRET_KEY=supertopsecret1234
KC_SPI_THEME_WELCOME_THEME=scim
KC_SPI_REALM_RESTAPI_EXTENSION_SCIM_LICENSE_KEY=
KEYCLOAK_BASE_URL=http://kc.ol.local:8066
KEYCLOAK_CLIENT_ID=apisix
# This is not a secret. This is for the Keycloak container, only for local use.
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
KEYCLOAK_SCOPES="openid profile ol-profile"
KEYCLOAK_SVC_KEYSTORE_PASSWORD=supertopsecret1234
KEYCLOAK_SVC_HOSTNAME=kc.ol.local
KEYCLOAK_SVC_ADMIN=admin
KEYCLOAK_SVC_ADMIN_PASSWORD=admin
AUTHORIZATION_URL=http://kc.ol.local:8066/realms/ol-local/protocol/openid-connect/auth
ACCESS_TOKEN_URL=http://kc.ol.local:8066/realms/ol-local/protocol/openid-connect/token
OIDC_ENDPOINT=http://kc.ol.local:8066/realms/ol-local
SOCIAL_AUTH_OL_OIDC_OIDC_ENDPOINT=http://kc.ol.local:8066/realms/ol-local
SOCIAL_AUTH_OL_OIDC_KEY=apisix
# This is not a secret. This is for the Keycloak container, only for local use.
SOCIAL_AUTH_OL_OIDC_SECRET=HckCZXToXfaetbBx0Fo3xbjnC468oMi4 # pragma: allowlist-secret
USERINFO_URL=http://kc.ol.local:8066/realms/ol-local/protocol/openid-connect/userinfo
MITOL_APIGATEWAY_DISABLE_MIDDLEWARE=False

FEATURE_IGNORE_EDX_FAILURES=True
OPENEDX_API_CLIENT_ID=fake
OPENEDX_API_CLIENT_SECRET=fake
OPENEDX_SERVICE_WORKER_API_TOKEN=fake

CSRF_COOKIE_DOMAIN=.odl.local
CORS_ALLOWED_ORIGINS=http://mitxonline.odl.local:8065, http://open.odl.local:8062, http://api.open.odl.local:8065
CSRF_TRUSTED_ORIGINS=http://mitxonline.odl.local:8065, http://open.odl.local:8062, http://api.open.odl.local:8065

• Spin up mitxonline with docker compose up --build -d
• Promote the admin user with docker compose exec web ./manage.py promote_user --promote --superuser [email protected]
• Populate test course data with docker compose exec web ./manage.py populate_course_data
• Generate docs with pants docs ::
• In dist/sphinx/index.html, read the section on generating a B2B organization / contract and create one, adding some of the test courses to it
• In Django admin, create a Program and add some courses to the program that are included in your B2B org, making sure to mark the program as "live"
• Create a few more programs with different courses in them that are also part of the B2B org
• Navigate to Wagtail at http://mitxonline.odl.local:8065/cms
• Browse to Home Page -> Program Collections
• Create a new program collection, but only add some of the programs
• Make sure you have a personal Posthog project configured and have the API key at the ready
• Before we spin up mit-learn, we need to set some env variables (note that we are intentionally misconfiguring the cookie domain):

.env
...
MITX_ONLINE_UPSTREAM=mitxonline.odl.local:8013
MITX_ONLINE_DOMAIN=mitxonline.odl.local
MITX_ONLINE_BASE_URL=http://mitxonline.odl.local:8065
POSTHOG_ENABLED=True
CSRF_COOKIE_DOMAIN=.odl.local

shared.local.env
POSTHOG_PROJECT_API_KEY=YOUR_API_KEY_HERE
POSTHOG_PROJECT_ID=YOUR_PROJECT_ID_HERE
POSTHOG_TIMEOUT_MS=1500

• In your Posthog project, enable the enrollment-dashboard and mitlearn-organization-dashboard feature flags for all users
• Spin up MIT Learn
• Log in with the [email protected] test user
• Navigate to the Dashboard
• You should see a tab labeled with the name of the org you created earlier, click on that
• When the org dashboard loads, you should first see the program that is not part of a collection. After that, you should see the program collection. Verify that the courses shown by the program collection are the first courses returned for each program in the collection.