add program enrollments api and view program certificate button

[gumaerc]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/8171

Description (What does it do?)

This PR adds the code to query the MITx Online program enrollments API, and sets up the org dashboard to display a button to view your program ceritficate if you have one when displaying a given program.

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 [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
• If you don't have a Signatory, browse to Home Page -> Signatories and create one
• Browse to Home Page -> Programs
• If there is not a Program Page for one of the programs you created, create one
• Create a child Certificate Page for the Program Page
• Browse to Django admin and then to Program certificates
• Create a program certificate for your user, pointing at the certificate page we just created and the program that matches
• 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:

.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
• Go to your org's tab
• Verify that on the program listing in the org, you see the "View Series Certificate" button and that it matches the design

Note that the link will not go anywhere until #2429 is merged. There are also no mobile designs for this particular button, so I just did my best to make sure it renders okay.

[jonkafton]

Update: Can disregard - I had a program collection page in Wagtail, not a program page.

In OrganizationContent.tsx L378 (not changed in this PR), is it correct the we include only programs without collections?

  const transformedPrograms = programs.data?.results
    .filter((program) => program.collections.length === 0)
    .map((program) => transform.mitxonlineProgram(program))

I don't get any progam certificate displayed unless I invert this.

With .filter((program) => program.collections.length === 0) (as-is):

With .filter((program) => program.collections.length !== 0):

[jonkafton]

Looks good. Will merge for @gumaerc as he's out until after tomorrow.