add one click enroll functionality to dashboard cards

[gumaerc]

What are the relevant tickets?

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

Description (What does it do?)

This PR adds the ability to utilize the "one click enroll" B2B API in MITx Online. Cards for courses in OrganizationContent that are part of your org but you are not yet enrolled in will have a button that says "Enroll" instead of "Continue Course." Clicking this button enrolls you in the course, after which you can click "Continue Course" as normal.

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"
• 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
• In the org dashboard, you should see the courses you added to your B2B contract, and each card should have an Enroll button
• Click any of the Enroll buttons, which should enroll you in the course
• Visit the MITx Online dashboard and verify that the enrollment worked

[jonkafton]

Looks good and thanks @gumaerc for helping me get set up to fuel this locally.

Some observations:

• In the mitxonlineEnrollment() transform we get the status from the grades https://github.com/mitodl/mit-learn/pull/2319/files#diff-e27375eac7f9200d6414e93f9318b1314ba646ed3045910b06f7cc6896ae9dd8R45-R47

status: raw.grades[0]?.passed
      ? EnrollmentStatus.Completed
      : EnrollmentStatus.Enrolled,

The status is therefore never EnrollmentStatus.NotEnrolled as the new logic sometimes expects.

• If I set the course run enrollment to anything other than enrolled in the mitxonline admin e.g. http://mitxonline.odl.local:8013/admin/courses/courserunenrollment/1/change/, I do not see any change from the enrollments endpoint (http://mitxonline.odl.local:8065/api/v1/enrollments/) to determine the status.

[jonkafton]

Small request for

const hasEnrolled = enrollmentStatus &&
      enrollmentStatus !== EnrollmentStatus.NotEnrolled