org dashboard design updates

[gumaerc]

What are the relevant tickets?

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

Description (What does it do?)

This PR makes several styling adjustments to the org dashboard, listed in the above issue. In addition to style adjustments, the HTML description for programs and program collections coming from Wagtail is now being rendered using dompurify in conjunction with dangerouslySetInnerHtml.

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
• Navigate to the MITx Online catalog and enroll in a few courses
• 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
• Set a description on the program collection, making sure to format some of the text bold / italic
• Browse to Home Page -> Programs
• Make sure there is a Program Page for your program that is not part of the collection, and make sure you also set a formatted description on it
• 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 org dashboard
• Make sure the appearance matches the Figma design
• Enroll / Unenroll from courses and ensure that the CTA language is as expected and that unenrolled courses have their CTA's properly offset

[gumaerc]

This is kind of a side effect of some work I had in progress on this branch for adding the program enrollments API, just renames the enrollmentsApi to courseRunEnrollmentsApi, because that's what it is.

[jonkafton]

The changes look good. I noticed the enrollment indicator and buttons are left aligned on mobile but right aligned in the designs (though not listed in the items for this ticket).