From f4e76a72fccd1d4e4673656886bf8241f72a4bbb Mon Sep 17 00:00:00 2001
From: Tyler Hallada <tyler@hallada.net>
Date: Tue, 18 Jul 2017 13:49:04 -0400
Subject: [PATCH] Fix broken theming (#709)

* Dynamic require theme scss from env var

* Update README about THEME_SCSS. Try to fix tests.

* Fix broken karma webpack config

* Fix THEME_SCSS defaulting in webpack config
---
 README.md                                         | 4 +++-
 analytics_dashboard/settings/base.py              | 6 ------
 analytics_dashboard/static/js/application-main.js | 2 +-
 karma.conf.js                                     | 7 +++++++
 webpack.common.config.js                          | 6 ++++++
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index d460eb30b..243576e0b 100644
--- a/README.md
+++ b/README.md
@@ -185,7 +185,9 @@ Theming and Branding
 We presently have support for basic branding of the logo displayed in the header and on error pages. This is facilitated
 by including an additional SCSS file specifying the path and dimensions of the logo. The default Open edX theme located
 at `static/sass/themes/open-edx.scss` is a good starting point for those interested in changing the logo. Once your
-customizations are complete, update the value of the setting `THEME_SCSS` with the path to your new SCSS file.
+customizations are complete, update the value of the yaml configuration setting `INSIGHTS_THEME_SCSS` with the path to
+your new SCSS file. If running Webpack manually, you will have to set the environmental variable `THEME_SCSS` to your
+file before running Webpack.
 
 Developers may also choose to further customize the site by changing the variables loaded by SCSS. This is most easily
 accomplished via the steps below. This will allow for easily changing basic colors and spacing.
diff --git a/analytics_dashboard/settings/base.py b/analytics_dashboard/settings/base.py
index f7a53d103..de82e133d 100644
--- a/analytics_dashboard/settings/base.py
+++ b/analytics_dashboard/settings/base.py
@@ -379,12 +379,6 @@
     DOCS_CONFIG.readfp(config_file)
 ########## END DOCS/HELP CONFIGURATION
 
-
-########## THEME CONFIGURATION
-# Path of the SCSS file to use for the site's theme
-THEME_SCSS = 'sass/themes/open-edx.scss'
-########## END THEME CONFIGURATION
-
 ########## COURSE API
 COURSE_API_URL = None
 GRADING_POLICY_API_URL = None
diff --git a/analytics_dashboard/static/js/application-main.js b/analytics_dashboard/static/js/application-main.js
index e0243aed1..142ddc5e1 100644
--- a/analytics_dashboard/static/js/application-main.js
+++ b/analytics_dashboard/static/js/application-main.js
@@ -2,7 +2,7 @@
  * Load scripts needed across the application.
  */
 require('sass/style-application.scss');
-require('sass/themes/open-edx.scss');
+require(process.env.THEME_SCSS);
 
 require(['views/data-table-view',
     'views/announcement-view',
diff --git a/karma.conf.js b/karma.conf.js
index 0dc597ae8..5951fb139 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -6,6 +6,7 @@ var path = require('path'),
 
 module.exports = function(config) {
     'use strict';
+
     config.set({
         // base path that will be used to resolve all patterns (eg. files, exclude)
         basePath: '',
@@ -141,6 +142,12 @@ module.exports = function(config) {
                     // the text so tests can be run if modules reference gettext
                     gettext: 'test/browser-shims/gettext',
                     ngettext: 'test/browser-shims/ngettext'
+                }),
+                // This defines the theme that the SCSS should be building with. For test, this is always open-edx
+                new webpack.DefinePlugin({
+                    'process.env': {
+                        THEME_SCSS: 'sass/themes/open-edx.scss'
+                    }
                 })
             ]
         },
diff --git a/webpack.common.config.js b/webpack.common.config.js
index 8008e4be3..4a73fd9d0 100644
--- a/webpack.common.config.js
+++ b/webpack.common.config.js
@@ -104,6 +104,12 @@ module.exports = {
             $: 'jquery',
             jQuery: 'jquery'
         }),
+        // This defines the theme that the SCSS should be building with
+        new webpack.DefinePlugin({
+            'process.env': {
+                'THEME_SCSS': JSON.stringify(process.env.THEME_SCSS || 'sass/themes/open-edx.scss')
+            }
+        }),
         // AggressiveMergingPlugin in conjunction with these CommonChunkPlugins turns many GBs worth of individual
         // chunks into one or two large chunks that entry chunks reference. It reduces output bundle size a lot.
         new webpack.optimize.AggressiveMergingPlugin({minSizeReduce: 1.1}),