fix: fix social media and sharing icons (#2446)

The Credentials IDA gives our users the ability to share or print their program certificates if they wish. This functionality is enabled by rendering icons (provided via a third party package called `fontawesome`). Recently, something caused this functionality to break and the icons are rendering as squares. This PR attempts to fix this issue. Initially, we attempted to troubleshoot the original issue with the old `fontawesome` package (which was released 7 years ago). We were unable to do that. Then, we tried to update to the latest version of fontawesome via NPM. This caused additional issues that weren't well understood. Finally, I have decided to remove the npm package in favor of a pip package that is designed to work specifically with Django. Thus, this PR adds a new default installed app to the IDA's `installed_apps` setting -- `fontawesomefree`. This approach worked and has fixed the display of the icons used in the sharing options for a program certificate rendered by the Credentials IDA. Additionally, an update was made to the `base.html` template to import the fontawesome icons, as well as an update to the `_actions.html` template to update the class names appropriate to the latest version of `fontawesome`. Unrelated, this PR includes a fix for the Makefile that I ran into when trying to ensure our existing JS tests still pass after this change.
openedx · Apr 16, 2024 · 7aa1d1f · 7aa1d1f
1 parent b3cbdbc
commit 7aa1d1f
Show file tree

Hide file tree

Showing 15 changed files with 62 additions and 45 deletions.
diff --git a/Makefile b/Makefile
@@ -107,8 +107,8 @@ tests: ## Run tests and generate coverage report
 	$(TOX)coverage report
 
 test-karma: ## Run JS tests through Karma & install firefox. This command needs to be ran manually in the devstack container before submitting a pull request. It can not be run in CI as of APER-2136.
-	sudo apt-get update
-	sudo apt-get install --no-install-recommends -y firefox xvfb
+	apt-get update
+	apt-get install --no-install-recommends -y firefox xvfb
 	xvfb-run $(NODE_BIN)/karma start
 
 ### Frontend commands ###

diff --git a/credentials/settings/base.py b/credentials/settings/base.py
@@ -63,6 +63,7 @@
     "drf_yasg",
     "xss_utils",
     "openedx_events",
+    "fontawesomefree",
 ]
 
 PROJECT_APPS = [

diff --git a/credentials/templates/_actions.html b/credentials/templates/_actions.html
@@ -12,7 +12,7 @@ <h3 class="sr-only">{% trans 'Print or share your certificate' as tmsg %}{{ tmsg
               data-track-event-property-category="certificates"
               data-track-event-property-credential-uuid="{{ user_credential.uuid }}"
               data-track-event-property-program-uuid="{{ user_credential.credential.program_uuid }}">
-        <span class="fa fa-facebook" aria-hidden="true"></span>
+        <span class="fa-brands fa-facebook" aria-hidden="true"></span>
         <span class="action-label">{% trans 'Share this certificate via Facebook' as tmsg %}{{ tmsg | force_escape }}</span>
       </button>
     {% endif %}
@@ -25,7 +25,7 @@ <h3 class="sr-only">{% trans 'Print or share your certificate' as tmsg %}{{ tmsg
               data-track-event-property-program-uuid="{{ user_credential.credential.program_uuid }}">
         <a class="share-link" target="_blank"
            href="https://twitter.com/intent/tweet?text={{ tweet_text|urlencode }}&url={{ share_url|urlencode }}{% if twitter_username %}&via={{ twitter_username }}{% endif %}">
-          <span class="fa fa-twitter" aria-hidden="true"></span>
+          <span class="fa-brands fa-twitter" aria-hidden="true"></span>
           <span class="action-label">{% trans 'Tweet this certificate' as tmsg %}{{ tmsg | force_escape }}</span>
         </a>
       </button>
@@ -39,7 +39,7 @@ <h3 class="sr-only">{% trans 'Print or share your certificate' as tmsg %}{{ tmsg
               data-track-event-property-program-uuid="{{ user_credential.credential.program_uuid }}">
         <a class="share-link" target="_blank"
            href="https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME">
-          <span class="fa fa-linkedin" aria-hidden="true"></span>
+          <span class="fa-brands fa-linkedin" aria-hidden="true"></span>
           <span class="action-label">{% trans 'Add this certificate to your LinkedIn profile' as tmsg %}{{ tmsg | force_escape }}</span>
         </a>
       </button>

diff --git a/credentials/templates/base.html b/credentials/templates/base.html
@@ -1,6 +1,7 @@
 {# Base template for edX-specific pages. #}
 
 {% load i18n %}
+{% load static %}
 {% load statici18n %}
 {% load render_bundle from webpack_loader %}
 
@@ -15,6 +16,10 @@
     <title>{% block title %}{% endblock title %}</title>
 
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <!-- import fontawesome svgs and icons -->
+    <script src="{% static 'fontawesomefree/js/fontawesome.js' %}"></script>
+    <script src="{% static 'fontawesomefree/js/solid.js' %}"></script>
+    <script src="{% static 'fontawesomefree/js/brands.js' %}"></script>
 
     {% if base_style_template %}
       {% include base_style_template %}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,6 @@
     "css-loader": "6.11.0",
     "css-minimizer-webpack-plugin": "6.0.0",
     "file-loader": "6.2.0",
-    "font-awesome": "4.7.0",
     "mini-css-extract-plugin": "2.8.1",
     "sass": "1.75.0",
     "sass-loader": "14.2.0",

diff --git a/requirements/all.txt b/requirements/all.txt
@@ -38,17 +38,17 @@ bcrypt==4.1.2
     # via
     #   -r requirements/dev.txt
     #   paramiko
-black==24.3.0
+black==24.4.0
     # via -r requirements/dev.txt
 bleach==6.1.0
     # via
     #   -r requirements/dev.txt
     #   -r requirements/production.txt
-boto3==1.34.81
+boto3==1.34.84
     # via
     #   -r requirements/production.txt
     #   django-ses
-botocore==1.34.81
+botocore==1.34.84
     # via
     #   -r requirements/production.txt
     #   boto3
@@ -208,7 +208,7 @@ django-rest-swagger==2.2.0
     # via
     #   -r requirements/dev.txt
     #   -r requirements/production.txt
-django-ses==3.5.2
+django-ses==3.6.0
     # via -r requirements/production.txt
 django-simple-history==3.5.0
     # via
@@ -305,7 +305,7 @@ edx-event-bus-kafka==5.7.0
     # via
     #   -r requirements/dev.txt
     #   -r requirements/production.txt
-edx-i18n-tools==1.3.0
+edx-i18n-tools==1.5.0
     # via
     #   -r requirements/dev.txt
     #   -r requirements/production.txt
@@ -333,7 +333,7 @@ exceptiongroup==1.2.0
     #   pytest
 factory-boy==3.3.0
     # via -r requirements/dev.txt
-faker==24.8.0
+faker==24.9.0
     # via
     #   -r requirements/dev.txt
     #   factory-boy
@@ -347,6 +347,10 @@ filelock==3.13.4
     #   -r requirements/dev.txt
     #   tox
     #   virtualenv
+fontawesomefree==6.5.1
+    # via
+    #   -r requirements/dev.txt
+    #   -r requirements/production.txt
 gevent==24.2.1
     # via -r requirements/production.txt
 greenlet==3.0.3
@@ -357,7 +361,7 @@ gunicorn==21.2.0
     # via -r requirements/production.txt
 httpretty==1.1.4
     # via -r requirements/dev.txt
-idna==3.6
+idna==3.7
     # via
     #   -r requirements/dev.txt
     #   -r requirements/production.txt
@@ -451,7 +455,7 @@ openedx-atlas==0.6.0
     # via
     #   -r requirements/dev.txt
     #   -r requirements/production.txt
-openedx-events==9.7.0
+openedx-events==9.9.1
     # via
     #   -r requirements/dev.txt
     #   -r requirements/production.txt
@@ -708,7 +712,7 @@ social-auth-core==4.5.3
     #   -r requirements/production.txt
     #   edx-auth-backends
     #   social-auth-app-django
-sqlparse==0.4.4
+sqlparse==0.5.0
     # via
     #   -r requirements/dev.txt
     #   -r requirements/production.txt
@@ -799,7 +803,7 @@ zope-event==5.0
     # via
     #   -r requirements/production.txt
     #   gevent
-zope-interface==6.2
+zope-interface==6.3
     # via
     #   -r requirements/production.txt
     #   gevent

diff --git a/requirements/base.in b/requirements/base.in
@@ -36,6 +36,7 @@ edx-event-bus-kafka
 edx-opaque-keys
 edx-rest-api-client
 edx-toggles
+fontawesomefree
 markdown
 mysqlclient
 newrelic

diff --git a/requirements/base.txt b/requirements/base.txt
@@ -145,7 +145,7 @@ edx-drf-extensions==10.3.0
     # via -r requirements/base.in
 edx-event-bus-kafka==5.7.0
     # via -r requirements/base.in
-edx-i18n-tools==1.3.0
+edx-i18n-tools==1.5.0
     # via edx-credentials-themes
 edx-opaque-keys[django]==2.5.1
     # via
@@ -160,7 +160,9 @@ edx-toggles==5.2.0
     #   edx-event-bus-kafka
 fastavro==1.9.4
     # via openedx-events
-idna==3.6
+fontawesomefree==6.5.1
+    # via -r requirements/base.in
+idna==3.7
     # via requests
 importlib-metadata==6.11.0
     # via
@@ -197,7 +199,7 @@ openapi-codec==1.3.2
     # via django-rest-swagger
 openedx-atlas==0.6.0
     # via -r requirements/base.in
-openedx-events==9.7.0
+openedx-events==9.9.1
     # via edx-event-bus-kafka
 packaging==24.0
     # via drf-yasg
@@ -294,7 +296,7 @@ social-auth-core==4.5.3
     # via
     #   edx-auth-backends
     #   social-auth-app-django
-sqlparse==0.4.4
+sqlparse==0.5.0
     # via django
 stevedore==5.2.0
     # via

diff --git a/requirements/dev.txt b/requirements/dev.txt
@@ -32,7 +32,7 @@ backports-zoneinfo==0.2.1
     #   djangorestframework
 bcrypt==4.1.2
     # via paramiko
-black==24.3.0
+black==24.4.0
     # via -r requirements/test.txt
 bleach==6.1.0
     # via -r requirements/test.txt
@@ -223,7 +223,7 @@ edx-drf-extensions==10.3.0
     # via -r requirements/test.txt
 edx-event-bus-kafka==5.7.0
     # via -r requirements/test.txt
-edx-i18n-tools==1.3.0
+edx-i18n-tools==1.5.0
     # via
     #   -r requirements/dev.in
     #   -r requirements/test.txt
@@ -247,7 +247,7 @@ exceptiongroup==1.2.0
     #   pytest
 factory-boy==3.3.0
     # via -r requirements/test.txt
-faker==24.8.0
+faker==24.9.0
     # via
     #   -r requirements/test.txt
     #   factory-boy
@@ -260,9 +260,11 @@ filelock==3.13.4
     #   -r requirements/test.txt
     #   tox
     #   virtualenv
+fontawesomefree==6.5.1
+    # via -r requirements/test.txt
 httpretty==1.1.4
     # via -r requirements/test.txt
-idna==3.6
+idna==3.7
     # via
     #   -r requirements/test.txt
     #   requests
@@ -331,7 +333,7 @@ openapi-codec==1.3.2
     #   django-rest-swagger
 openedx-atlas==0.6.0
     # via -r requirements/test.txt
-openedx-events==9.7.0
+openedx-events==9.9.1
     # via
     #   -r requirements/test.txt
     #   edx-event-bus-kafka
@@ -538,7 +540,7 @@ social-auth-core==4.5.3
     #   -r requirements/test.txt
     #   edx-auth-backends
     #   social-auth-app-django
-sqlparse==0.4.4
+sqlparse==0.5.0
     # via
     #   -r requirements/test.txt
     #   django

diff --git a/requirements/docs.txt b/requirements/docs.txt
@@ -22,7 +22,7 @@ docutils==0.19
     # via
     #   pydata-sphinx-theme
     #   sphinx
-idna==3.6
+idna==3.7
     # via requests
 imagesize==1.4.1
     # via sphinx

diff --git a/requirements/pip.txt b/requirements/pip.txt
@@ -10,5 +10,5 @@ wheel==0.43.0
 # The following packages are considered to be unsafe in a requirements file:
 pip==24.0
     # via -r requirements/pip.in
-setuptools==69.2.0
+setuptools==69.5.1
     # via -r requirements/pip.in
diff --git a/requirements/production.txt b/requirements/production.txt
@@ -26,9 +26,9 @@ backports-zoneinfo==0.2.1
     #   djangorestframework
 bleach==6.1.0
     # via -r requirements/base.txt
-boto3==1.34.81
+boto3==1.34.84
     # via django-ses
-botocore==1.34.81
+botocore==1.34.84
     # via
     #   boto3
     #   s3transfer
@@ -123,7 +123,7 @@ django-ratelimit==4.1.0
     # via -r requirements/base.txt
 django-rest-swagger==2.2.0
     # via -r requirements/base.txt
-django-ses==3.5.2
+django-ses==3.6.0
     # via -r requirements/production.in
 django-simple-history==3.5.0
     # via -r requirements/base.txt
@@ -176,7 +176,7 @@ edx-drf-extensions==10.3.0
     # via -r requirements/base.txt
 edx-event-bus-kafka==5.7.0
     # via -r requirements/base.txt
-edx-i18n-tools==1.3.0
+edx-i18n-tools==1.5.0
     # via
     #   -r requirements/base.txt
     #   edx-credentials-themes
@@ -195,13 +195,15 @@ fastavro==1.9.4
     # via
     #   -r requirements/base.txt
     #   openedx-events
+fontawesomefree==6.5.1
+    # via -r requirements/base.txt
 gevent==24.2.1
     # via -r requirements/production.in
 greenlet==3.0.3
     # via gevent
 gunicorn==21.2.0
     # via -r requirements/production.in
-idna==3.6
+idna==3.7
     # via
     #   -r requirements/base.txt
     #   requests
@@ -259,7 +261,7 @@ openapi-codec==1.3.2
     #   django-rest-swagger
 openedx-atlas==0.6.0
     # via -r requirements/base.txt
-openedx-events==9.7.0
+openedx-events==9.9.1
     # via
     #   -r requirements/base.txt
     #   edx-event-bus-kafka
@@ -400,7 +402,7 @@ social-auth-core==4.5.3
     #   -r requirements/base.txt
     #   edx-auth-backends
     #   social-auth-app-django
-sqlparse==0.4.4
+sqlparse==0.5.0
     # via
     #   -r requirements/base.txt
     #   django
@@ -444,7 +446,7 @@ zipp==3.18.1
     #   importlib-metadata
 zope-event==5.0
     # via gevent
-zope-interface==6.2
+zope-interface==6.3
     # via gevent
 
 # The following packages are considered to be unsafe in a requirements file: