Skip to content

Set edx.org theme as default for edx-platform and MFEs #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
huniafatima-99 merged 4 commits into from
Jan 29, 2025
Merged

Set edx.org theme as default for edx-platform and MFEs #67

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b1cc743
feat: set edx.org theme as default for edx-platform and MFEs in devst…
mfarhan943 Nov 6, 2024
b2d1484
feat: Enable per-MFE PARAGON_BRAND_PACKAGE for theme versioning
mfarhan943 Nov 14, 2024
d0948d4
chore: update edx/brand versions for MFEs
mfarhan943 Nov 19, 2024
e2e7a62
chore: update edx/brand versions for multiple MFEs
mfarhan943 Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion docker-compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -707,6 +707,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-account'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-account"
environment:
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org@@1.x'
Copy link
Contributor

@adamstankiewicz adamstankiewicz Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org@@1.x'
PARAGON_BRAND_PACKAGE: '@edx/[email protected]'

networks:
default:
aliases:
Expand All @@ -722,6 +724,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-profile'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-profile"
environment:
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org'
Copy link
Contributor

@adamstankiewicz adamstankiewicz Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As is, this will pull from latest, which could introducing breaking changes unintentionally if a new major version is released.

Suggested change
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org'
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org@~2.0.0'

https://github.com/edx/edx-internal/blob/b3bd6adf8407b986349272f33b37922c620d8857/frontends/frontend-app-profile/prod_config.yml#L26

networks:
default:
aliases:
Expand All @@ -737,6 +741,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-authn'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-authn"
environment:
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org@~2.0.0'
Copy link
Contributor

@adamstankiewicz adamstankiewicz Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

edx-internal shows this version as 2.x currently.

Suggested change
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org@~2.0.0'
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org@2.x'

https://github.com/edx/edx-internal/blob/b3bd6adf8407b986349272f33b37922c620d8857/frontends/frontend-app-authn/prod_config.yml#L58

networks:
default:
aliases:
Expand All @@ -752,6 +758,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-course-authoring'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-course-authoring"
environment:
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org'
Copy link
Contributor

@adamstankiewicz adamstankiewicz Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It appears this MFE does not install @edx/brand-edx.org in the standard way, instead manually installing it in the gocd pipeline itself (source).

That said, it currently installs 2.x, not latest.

networks:
default:
aliases:
Expand All @@ -767,6 +775,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-gradebook'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-gradebook"
environment:
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org'
Copy link
Contributor

@adamstankiewicz adamstankiewicz Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: it doesn't appear frontend-app-gradebook uses @edx/brand-edx.org today. See production app in screenshot below; the button styles are from the default Paragon styles, not @edx/brand-edx.org.

Would we want to update the devstack MFE to use @edx/brand-edx.org when stage/prod does not? For this PR, I might recommend not adding @edx/brand-edx.org for MFEs that seemingly don't use it. You might consider coordinating with the owning teams to start using the @edx/brand-edx.org theme in stage/prod/devstack.

image

networks:
default:
aliases:
Expand All @@ -780,8 +790,10 @@ services:
extends:
file: microfrontend.yml
service: microfrontend
working_dir: '/edx/app/frontend-app-ora-grading'
working_dir: '/edx/app/frontend-app-ora-grading@2.x'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-ora-grading"
environment:
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org'
Copy link
Contributor

@adamstankiewicz adamstankiewicz Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The version 2.x was incorrectly added to the working_dir; it should be on the PARAGON_BRAND_PACKAGE.

Related, edx-internal doesn't define an NPM_ALIAS for this MFE (source). However, it is running the @edx/brand-edx.org theme, as it's installed by default in the upstream MFE package.json (source), which is incorrect as @edx/brand-edx.org is 2U/edX.org specific and should not be in openedx repo.

Might be worth coordinating with the owning team to get @edx/brand-edx.org used within NPM_ALIAS in edx-internal instead, and keeping @edx/brand-openedx installed by default in the MFE, which is convention.

networks:
default:
aliases:
Expand All @@ -797,6 +809,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-learner-dashboard'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-learner-dashboard"
environment:
PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
networks:
default:
aliases:
Expand All @@ -812,6 +826,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-learner-record'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-learner-record"
environment:
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org@~2.0.0'
networks:
default:
aliases:
Expand All @@ -827,6 +843,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-learning'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-learning"
environment:
PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
networks:
default:
aliases:
Expand All @@ -842,6 +860,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-library-authoring'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-library-authoring"
environment:
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org'
Copy link
Contributor

@adamstankiewicz adamstankiewicz Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's another instance where @edx/brand-edx.org is actually installed via the GoCD pipeline file vs. the typical NPM_ALIASES config (source). That said, the version appears to be 2.x.

networks:
default:
aliases:
Expand All @@ -858,6 +878,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-payment'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-payment"
environment:
PARAGON_BRAND_PACKAGE: '@edx/brand-edx.org@^2.0.6'
networks:
default:
aliases:
Expand All @@ -873,6 +895,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-program-console'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-program-console"
environment:
PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
networks:
default:
aliases:
Expand All @@ -889,6 +913,8 @@ services:
service: microfrontend
working_dir: '/edx/app/frontend-app-publisher'
container_name: "edx.${COMPOSE_PROJECT_NAME:-devstack}.frontend-app-publisher"
environment:
PARAGON_BRAND_PACKAGE: '@edx/[email protected]'
networks:
default:
aliases:
Expand Down
13 changes: 12 additions & 1 deletion microfrontend.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,18 @@ services:
#
# Fail fast if package install fails to avoid mysterious
# errors later.
command: bash -c 'npm ci || exit 1; while true; do npm start; sleep 2; done'
command:
- bash
- -c
- |
npm ci || exit 1
if [ -n "$(printenv PARAGON_BRAND_PACKAGE)" ]; then
npx paragon install-theme "$(printenv PARAGON_BRAND_PACKAGE)" || exit 1
Comment on lines +24 to +25
Copy link
Contributor

@adamstankiewicz adamstankiewicz Dec 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great; seems to work well locally.

fi
while true; do
npm start
sleep 2
done
stdin_open: true
tty: true
image: node:18
Expand Down
3 changes: 3 additions & 0 deletions provision-lms.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@ done
# Fix missing vendor file by clearing the cache
# docker compose exec -T lms bash -e -c 'rm /edx/app/edxapp/edx-platform/.prereqs_cache/Node_prereqs.sha1'

# Set edX theme in LMS and CMS.
./provision-set-edx-theme.sh

# Create static assets for both LMS and CMS
for app in "${apps[@]}"; do
make "dev.static.$app"
Expand Down
47 changes: 47 additions & 0 deletions provision-set-edx-theme.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
#!/usr/bin/env bash

# This script sets up the edX theme in LMS and CMS.

REPO_URL="https://github.com/edx/edx-themes"
THEME_DIR="/edx/src/edx-themes/edx-platform"
DEVSTACK_FILE="../edx-platform/lms/envs/devstack.py"

# Clone the edx-themes repository into the src directory
cd ../src
if [ ! -d "edx-themes" ]; then
git clone "$REPO_URL"
else
echo "Directory 'edx-themes' already exists. Skipping clone."
fi
cd ../devstack

# Uncomment relevant lines in the devstack.py file
sed -i '' "s|^# from .common import _make_mako_template_dirs|from .common import _make_mako_template_dirs|" "$DEVSTACK_FILE"
sed -i '' "s|^# ENABLE_COMPREHENSIVE_THEMING = True|ENABLE_COMPREHENSIVE_THEMING = True|" "$DEVSTACK_FILE"
sed -i '' "s|^# COMPREHENSIVE_THEME_DIRS = \[|COMPREHENSIVE_THEME_DIRS = \[|" "$DEVSTACK_FILE"
sed -i '' "s|^# \"/edx/app/edxapp/edx-platform/themes/\"| \"/edx/app/edxapp/edx-platform/themes/\",|" "$DEVSTACK_FILE"
sed -i '' "/COMPREHENSIVE_THEME_DIRS = \[/a\\
\"$THEME_DIR\",
" "$DEVSTACK_FILE"
sed -i '' "s|^# \]|]|" "$DEVSTACK_FILE"
sed -i '' "s|^# TEMPLATES\[1\]\[\"DIRS\"\] = _make_mako_template_dirs|TEMPLATES[1][\"DIRS\"] = _make_mako_template_dirs|" "$DEVSTACK_FILE"
sed -i '' "s|^# derive_settings(__name__)|derive_settings(__name__)|" "$DEVSTACK_FILE"


# Add the theme directory to COMPREHENSIVE_THEME_DIRS if not already present
if ! grep -qF "$THEME_DIR" "$DEVSTACK_FILE"; then
sed -i '' "/COMPREHENSIVE_THEME_DIRS = \[/a\\
\"$THEME_DIR\",
" "$DEVSTACK_FILE"
fi

# Set the theme site-wide
SERVICE_NAME="mysql80"
DATABASE="edxapp"
THEME_NAME="edx.org-next"
SITE_ID=1

docker compose exec -T "$SERVICE_NAME" mysql -e "
USE $DATABASE;
INSERT INTO theming_sitetheme (theme_dir_name, site_id) VALUES ('$THEME_NAME', $SITE_ID);
"