Skip to content

E
edx-platform
Commit 480a3ca6 by Brian Jacobel
Options

Move course import JS to Webpack

parent 49b11cb6
Showing with 241 additions and 153 deletions
cms/envs/aws.py
......@@ -116,6 +116,7 @@ GITHUB_REPO_ROOT = ENV_TOKENS.get('GITHUB_REPO_ROOT', GITHUB_REPO_ROOT)
STATIC_ROOT_BASE = ENV_TOKENS.get('STATIC_ROOT_BASE', None)
if STATIC_ROOT_BASE:
STATIC_ROOT = path(STATIC_ROOT_BASE) / EDX_PLATFORM_REVISION
WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = STATIC_ROOT / "webpack-stats.json"
EMAIL_BACKEND = ENV_TOKENS.get('EMAIL_BACKEND', EMAIL_BACKEND)
EMAIL_FILE_PATH = ENV_TOKENS.get('EMAIL_FILE_PATH', None)
......
cms/envs/bok_choy.env.json
......@@ -100,7 +100,6 @@
"SERVER_EMAIL": "devops@example.com",
"SESSION_COOKIE_DOMAIN": null,
"SITE_NAME": "localhost",
"STATIC_ROOT_BASE": "** OVERRIDDEN **",
"STATIC_URL_BASE": "/static/",
"SYSLOG_SERVER": "",
"TECH_SUPPORT_EMAIL": "technical@example.com",
......
cms/envs/bok_choy.py
......@@ -64,6 +64,8 @@ STATICFILES_DIRS = [
(TEST_ROOT / "staticfiles" / "cms").abspath(),
]
WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = TEST_ROOT / "staticfiles" / "cms" / "webpack-stats.json"
# Silence noisy logs
import logging
LOG_OVERRIDES = [
......
cms/envs/common.py
......@@ -747,6 +747,15 @@ REQUIRE_EXCLUDE = ("build.txt",)
# returns a list with the command arguments to execute.
REQUIRE_ENVIRONMENT = "node"
########################## DJANGO WEBPACK LOADER ##############################
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles/',
'STATS_FILE': os.path.join(STATIC_ROOT, 'webpack-stats.json')
}
}
################################# CELERY ######################################
# Message configuration
......@@ -881,6 +890,7 @@ INSTALLED_APPS = (
'pipeline',
'static_replace',
'require',
'webpack_loader',
# Theming
'openedx.core.djangoapps.theming',
......
cms/envs/test.py
......@@ -66,6 +66,7 @@ TEST_ROOT = path('test_root')
# Want static files in the same dir for running on jenkins.
STATIC_ROOT = TEST_ROOT / "staticfiles"
WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = STATIC_ROOT / "webpack-stats.json"
GITHUB_REPO_ROOT = TEST_ROOT / "data"
DATA_DIR = TEST_ROOT / "data"
......
cms/envs/test_static_optimized.py
......@@ -40,6 +40,7 @@ LOG_DIR = (TEST_ROOT / "log").abspath()
# Store the static files under test root so that they don't overwrite existing static assets
STATIC_ROOT = (TEST_ROOT / "staticfiles" / "cms").abspath()
WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = STATIC_ROOT / "webpack-stats.json"
# Disable uglify when tests are running (used by build.js).
# 1. Uglify is by far the slowest part of the build process
......
cms/static/cms/js/build.js
......@@ -41,7 +41,6 @@
'js/factories/export',
'js/factories/group_configurations',
'js/certificates/factories/certificates_page_factory',
'js/factories/import',
'js/factories/index',
'js/factories/library',
'js/factories/login',
......
cms/static/cms/js/main.js
......@@ -2,10 +2,15 @@
(function(AjaxPrefix) {
'use strict';
define(['domReady', 'jquery', 'underscore.string', 'backbone', 'gettext',
'common/js/components/views/feedback_notification', 'coffee/src/ajax_prefix',
'jquery.cookie'],
function(domReady, $, str, Backbone, gettext, NotificationView) {
define([
'domReady',
'jquery',
'underscore.string',
'backbone',
'gettext',
'../../../../common/static/common/js/components/views/feedback_notification',
'jquery.cookie'
], function(domReady, $, str, Backbone, gettext, NotificationView) {
var main, sendJSON;
main = function() {
AjaxPrefix.addAjaxPrefix(jQuery, function() {
......
cms/static/js/factories/import.js → cms/static/js/features/import/factories/import.js
define([
'domReady', 'js/views/import', 'jquery', 'gettext', 'jquery.fileupload', 'jquery.cookie'
'domReady',
'../views/import',
'jquery',
'gettext',
'jQuery-File-Upload/js/jquery.fileupload',
'jquery.cookie',
'../../../../cms/js/main'
], function(domReady, Import, $, gettext) {
'use strict';
return function(feedbackUrl, library) {
var dbError;
if (library) {
dbError = gettext('There was an error while importing the new library to our database.');
} else {
dbError = gettext('There was an error while importing the new course to our database.');
}
var bar = $('.progress-bar'),
fill = $('.progress-fill'),
submitBtn = $('.submit-button'),
chooseBtn = $('.view-import .choose-file-button'),
return {
Import: function(feedbackUrl, library) {
var dbError,
$bar = $('.progress-bar'),
$fill = $('.progress-fill'),
$submitBtn = $('.submit-button'),
$chooseBtn = $('.view-import .choose-file-button'),
defaults = [
gettext('There was an error during the upload process.') + '\n',
gettext('There was an error while unpacking the file.') + '\n',
......@@ -24,16 +24,39 @@ define([
],
unloading = false,
previousImport = Import.storedImport(),
file;
var onComplete = function() {
bar.hide();
chooseBtn
file,
onComplete = function() {
$bar.hide();
$chooseBtn
.find('.copy').text(gettext('Choose new file')).end()
.show();
},
showImportSubmit = function() {
var filepath = $(this).val(),
msg;
if (filepath.substr(filepath.length - 6, 6) === 'tar.gz') {
$('.error-block').hide();
$('.file-name').text($(this).val().replace('C:\\fakepath\\', ''));
$('.file-name-block').show();
$chooseBtn.hide();
$submitBtn.show();
$('.progress').show();
} else {
msg = gettext('File format not supported. Please upload a file with a {ext} extension.')
.replace('{ext}', '<code>tar.gz</code>');
$('.error-block').text(msg).show();
}
};
$(window).on('beforeunload', function(event) { unloading = true; });
if (library) {
dbError = gettext('There was an error while importing the new library to our database.');
} else {
dbError = gettext('There was an error while importing the new course to our database.');
}
$(window).on('beforeunload', function() { unloading = true; });
// Display the status of last file upload on page load
if (previousImport) {
......@@ -44,7 +67,7 @@ define([
.show();
if (previousImport.completed !== true) {
chooseBtn.hide();
$chooseBtn.hide();
}
Import.resume().then(onComplete);
......@@ -57,12 +80,12 @@ define([
autoUpload: false,
add: function(e, data) {
Import.reset();
submitBtn.unbind('click');
$submitBtn.unbind('click');
file = data.files[0];
if (file.name.match(/tar\.gz$/)) {
submitBtn.click(function(event) {
$submitBtn.click(function(event) {
event.preventDefault();
Import.start(
......@@ -70,14 +93,13 @@ define([
feedbackUrl.replace('fillerName', file.name)
).then(onComplete);
submitBtn.hide();
$submitBtn.hide();
data.submit().complete(function(result, textStatus, xhr) {
if (xhr.status !== 200) {
var serverMsg, errMsg, stage;
if (xhr.status !== 200) {
try {
serverMsg = $.parseJSON(result.responseText) || {};
} catch (e) {
} catch (err) {
return;
}
......@@ -86,10 +108,9 @@ define([
if (serverMsg.hasOwnProperty('Stage')) {
stage = Math.abs(serverMsg.Stage);
Import.cancel(defaults[stage] + errMsg, stage);
}
} else if (!unloading) {
// It could be that the user is simply refreshing the page
// so we need to be sure this is an actual error from the server
else if (!unloading) {
$(window).off('beforeunload.import');
Import.reset();
......@@ -101,7 +122,9 @@ define([
});
});
} else {
data.files = [];
// Can't fix this lint error without major structural changes, which I'm not comfortable
// doing given this file's test coverage
data.files = []; // eslint-disable-line no-param-reassign
}
},
......@@ -118,46 +141,29 @@ define([
doneAt = 99;
}
if (percentInt >= doneAt) {
bar.hide();
$bar.hide();
// Start feedback with delay so that current stage of
// import properly updates in session
setTimeout(function() { Import.pollStatus(); }, 3000);
} else {
bar.show();
fill.width(percentVal).text(percentVal);
$bar.show();
$fill.width(percentVal).text(percentVal);
}
},
sequentialUploads: true,
notifyOnError: false
});
var showImportSubmit = function(e) {
var filepath = $(this).val();
if (filepath.substr(filepath.length - 6, 6) === 'tar.gz') {
$('.error-block').hide();
$('.file-name').text($(this).val().replace('C:\\fakepath\\', ''));
$('.file-name-block').show();
chooseBtn.hide();
submitBtn.show();
$('.progress').show();
} else {
var msg = gettext('File format not supported. Please upload a file with a {file_extension} extension.')
.replace('{file_extension}', '<code>tar.gz</code>');
$('.error-block').text(msg).show();
}
};
domReady(function() {
// import form setup
$('.view-import .file-input').bind('change', showImportSubmit);
$('.view-import .choose-file-button, .view-import .choose-file-button-inline').bind('click', function(e) {
$('.view-import .choose-file-button, .view-import .choose-file-button-inline')
.bind('click', function(e) {
e.preventDefault();
$('.view-import .file-input').click();
});
});
}
};
});
cms/static/js/views/import.js → cms/static/js/features/import/views/import.js
......@@ -11,18 +11,18 @@ define(
var COOKIE_NAME = 'lastimportupload';
var STAGE = {
'UPLOADING': 0,
'UNPACKING': 1,
'VERIFYING': 2,
'UPDATING': 3,
'SUCCESS': 4
UPLOADING: 0,
UNPACKING: 1,
VERIFYING: 2,
UPDATING: 3,
SUCCESS: 4
};
var STATE = {
'READY': 1,
'IN_PROGRESS': 2,
'SUCCESS': 3,
'ERROR': 4
READY: 1,
IN_PROGRESS: 2,
SUCCESS: 3,
ERROR: 4
};
var current = {stage: 0, state: STATE.READY};
......@@ -35,6 +35,8 @@ define(
wrapper: $('div.wrapper-status')
};
var CourseImport;
/** ******** Private functions *****************************************/
/**
......@@ -55,32 +57,11 @@ define(
};
/**
* Sets the Import in the "error" status.
*
* Immediately stops any further polling from the server.
* Displays the error message at the list element that corresponds
* to the stage where the error occurred.
*
* @param {string} msg Error message to display.
* @param {int} [stage=current.stage] Stage of import process at which error occurred.
*/
var error = function(msg, stage) {
current.stage = Math.abs(stage || current.stage); // Could be negative
current.state = STATE.ERROR;
destroyEventListeners();
clearTimeout(timeout.id);
updateFeedbackList(msg);
deferred.resolve();
};
/**
* Initializes the event listeners
*
*/
var initEventListeners = function() {
$(window).on('beforeunload.import', function() {
$(window).on('beforeunload.import', function() { // eslint-disable-line consistent-return
if (current.stage < STAGE.UNPACKING) {
return gettext('Your import is in progress; navigating away will abort it.');
}
......@@ -101,25 +82,6 @@ define(
};
/**
* Sets the Import on the "success" status
*
* If it wasn't already, marks the stored import as "completed",
* and updates its date timestamp
*/
var success = function() {
current.state = STATE.SUCCESS;
if (CourseImport.storedImport().completed !== true) {
storeImport(true);
}
destroyEventListeners();
updateFeedbackList();
deferred.resolve();
};
/**
* Updates the Import feedback status list
*
* @param {string} [currStageMsg=''] The message to show on the
......@@ -158,8 +120,11 @@ define(
$(stage)
.removeClass('is-complete is-started has-error')
.addClass('is-not-started')
.find('p.error').remove().end()
.find('p.copy').show();
.find('p.error')
.remove()
.end()
.find('p.copy')
.show();
}
switch (current.state) {
......@@ -201,6 +166,9 @@ define(
errorStage($curr);
break;
default:
break;
}
if (current.state === STATE.SUCCESS) {
......@@ -210,9 +178,49 @@ define(
}
};
/**
* Sets the Import in the "error" status.
*
* Immediately stops any further polling from the server.
* Displays the error message at the list element that corresponds
* to the stage where the error occurred.
*
* @param {string} msg Error message to display.
* @param {int} [stage=current.stage] Stage of import process at which error occurred.
*/
var error = function(msg, stage) {
current.stage = Math.abs(stage || current.stage); // Could be negative
current.state = STATE.ERROR;
destroyEventListeners();
clearTimeout(timeout.id);
updateFeedbackList(msg);
deferred.resolve();
};
/**
* Sets the Import on the "success" status
*
* If it wasn't already, marks the stored import as "completed",
* and updates its date timestamp
*/
var success = function() {
current.state = STATE.SUCCESS;
if (CourseImport.storedImport().completed !== true) {
storeImport(true);
}
destroyEventListeners();
updateFeedbackList();
deferred.resolve();
};
/** ******** Public functions ******************************************/
var CourseImport = {
CourseImport = {
/**
* Cancels the import and sets the Object to the error state
......
cms/templates/import.html
......@@ -239,13 +239,8 @@ else:
%endif
</section>
</div>
<%static:webpack entry="Import">
Import('${import_status_url | n, js_escaped_string}', ${library | n, dump_js_escaped_json});
</%static:webpack>
</%block>
<%block name="requirejs">
require(["js/factories/import"], function(ImportFactory) {
ImportFactory(
"${import_status_url | n, js_escaped_string}",
${library | n, dump_js_escaped_json}
);
});
</%block>
common/static/common/js/components/views/feedback.js
(function(define) {
'use strict';
define(['jquery',
define(['jquery',
'underscore',
'underscore.string',
'backbone',
'text!common/templates/components/system-feedback.underscore'],
'text!../../../../common/templates/components/system-feedback.underscore'],
function($, _, str, Backbone, systemFeedbackTemplate) {
var tabbable_elements = [
"a[href]:not([tabindex='-1'])",
......@@ -197,4 +195,3 @@
});
return SystemFeedback;
});
}).call(this, define || RequireJS.define);
common/static/common/js/components/views/feedback_notification.js
(function(define) {
'use strict';
define(['jquery', 'underscore', 'underscore.string', 'common/js/components/views/feedback'],
define(['jquery', 'underscore', 'underscore.string', '../../../../common/js/components/views/feedback'],
function($, _, str, SystemFeedbackView) {
var Notification = SystemFeedbackView.extend({
options: $.extend({}, SystemFeedbackView.prototype.options, {
......@@ -30,4 +28,3 @@
return Notification;
});
}).call(this, define || RequireJS.define);
openedx/features/course_experience/.eslintrc.js
module.exports = {
extends: 'eslint-config-edx',
root: true,
settings: {
'import/resolver': 'webpack',
},
};
openedx/features/course_experience/static/course_experience/js/CourseOutline.js
/* globals Logger */
import { keys } from 'edx-ui-toolkit/src/js/utils/constants';
import { keys } from 'edx-ui-toolkit/js/utils/constants';
// @TODO: Figure out how to make webpack handle default exports when libraryTarget: 'window'
export class CourseOutline { // eslint-disable-line import/prefer-default-export
......
openedx/features/course_experience/static/course_experience/js/spec/CourseOutline_spec.js
/* globals Logger, loadFixtures */
import { keys } from 'edx-ui-toolkit/src/js/utils/constants';
import { keys } from 'edx-ui-toolkit/js/utils/constants';
import { CourseOutline } from '../CourseOutline';
......
package.json
......@@ -7,16 +7,20 @@
"babel-preset-env": "^1.2.1",
"backbone": "~1.3.2",
"backbone.paginator": "~2.0.3",
"coffee-loader": "^0.7.3",
"coffee-script": "1.6.1",
"edx-pattern-library": "0.18.1",
"edx-ui-toolkit": "1.5.2",
"exports-loader": "^0.6.4",
"hls.js": "0.7.2",
"imports-loader": "^0.7.1",
"jquery": "~2.2.0",
"jquery-migrate": "^1.4.1",
"jquery.scrollto": "~2.1.2",
"moment": "^2.15.1",
"moment-timezone": "~0.5.5",
"picturefill": "~3.0.2",
"raw-loader": "^0.5.1",
"requirejs": "~2.3.2",
"uglify-js": "2.7.0",
"underscore": "~1.8.3",
......
pavelib/assets.py
......@@ -705,16 +705,26 @@ def execute_compile_sass(args):
def execute_webpack(prod, settings=None):
sh(cmd("NODE_ENV={node_env} STATIC_ROOT={static_root} $(npm bin)/webpack".format(
sh(
cmd(
"NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack"
.format(
node_env="production" if prod else "development",
static_root=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings)
)))
static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings),
static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings)
)
)
)
def execute_webpack_watch(settings=None):
run_background_process("STATIC_ROOT={static_root} $(npm bin)/webpack --watch --watch-poll=200".format(
static_root=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings)
))
run_background_process(
"STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack --watch --watch-poll=200"
.format(
static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings),
static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings)
)
)
def get_parsed_option(command_opts, opt_key, default=None):
......
pavelib/paver_tests/test_servers.py
......@@ -41,11 +41,12 @@ EXPECTED_RUN_SERVER_COMMAND = (
EXPECTED_INDEX_COURSE_COMMAND = (
u"python manage.py {system} --settings={settings} reindex_course --setup"
)
EXPECTED_PRINT_SETTINGS_COMMAND = (
u"python manage.py {system} --settings={settings} print_settings STATIC_ROOT --format=value 2>/dev/null"
)
EXPECTED_PRINT_SETTINGS_COMMAND = [
u"python manage.py lms --settings={settings} print_settings STATIC_ROOT --format=value 2>/dev/null",
u"python manage.py cms --settings={settings} print_settings STATIC_ROOT --format=value 2>/dev/null"
]
EXPECTED_WEBPACK_COMMAND = (
u"NODE_ENV={node_env} STATIC_ROOT={static_root} $(npm bin)/webpack"
u"NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack"
)
......@@ -240,13 +241,11 @@ class TestPaverServerTasks(PaverTestCase):
expected_messages.append(u"xmodule_assets common/static/xmodule")
expected_messages.append(u"install npm_assets")
expected_messages.append(EXPECTED_COFFEE_COMMAND.format(platform_root=self.platform_root))
expected_messages.append(EXPECTED_PRINT_SETTINGS_COMMAND.format(
system="lms",
settings=expected_asset_settings
))
expected_messages.extend([c.format(settings=expected_asset_settings) for c in EXPECTED_PRINT_SETTINGS_COMMAND])
expected_messages.append(EXPECTED_WEBPACK_COMMAND.format(
node_env="production" if expected_asset_settings != "devstack" else "development",
static_root=None
static_root_lms=None,
static_root_cms=None
))
expected_messages.extend(self.expected_sass_commands(system=system, asset_settings=expected_asset_settings))
if expected_collect_static:
......@@ -285,10 +284,11 @@ class TestPaverServerTasks(PaverTestCase):
expected_messages.append(u"xmodule_assets common/static/xmodule")
expected_messages.append(u"install npm_assets")
expected_messages.append(EXPECTED_COFFEE_COMMAND.format(platform_root=self.platform_root))
expected_messages.append(EXPECTED_PRINT_SETTINGS_COMMAND.format(system="lms", settings=expected_asset_settings))
expected_messages.extend([c.format(settings=expected_asset_settings) for c in EXPECTED_PRINT_SETTINGS_COMMAND])
expected_messages.append(EXPECTED_WEBPACK_COMMAND.format(
node_env="production" if expected_asset_settings != "devstack" else "development",
static_root=None
static_root_lms=None,
static_root_cms=None
))
expected_messages.extend(self.expected_sass_commands(asset_settings=expected_asset_settings))
if expected_collect_static:
......
webpack.config.js
......@@ -12,7 +12,8 @@ var wpconfig = {
context: __dirname,
entry: {
CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js'
CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js',
Import: './cms/static/js/features/import/factories/import.js'
},
output: {
......@@ -21,7 +22,7 @@ var wpconfig = {
libraryTarget: 'window'
},
devtool: isProd ? false : 'eval-source-map',
devtool: isProd ? false : 'source-map',
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
......@@ -33,8 +34,18 @@ var wpconfig = {
debug: !isProd
}),
new BundleTracker({
path: process.env.STATIC_ROOT,
path: process.env.STATIC_ROOT_CMS,
filename: 'webpack-stats.json'
}),
new BundleTracker({
path: process.env.STATIC_ROOT_LMS,
filename: 'webpack-stats.json'
}),
new webpack.ProvidePlugin({
_: 'underscore',
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
],
......@@ -44,12 +55,51 @@ var wpconfig = {
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.coffee$/,
exclude: /node_modules/,
use: 'coffee-loader'
},
{
test: /\.underscore$/,
use: 'raw-loader'
},
{
// This file is used by both RequireJS and Webpack and depends on window globals
// This is a dirty hack and shouldn't be replicated for other files.
test: path.resolve(__dirname, 'cms/static/cms/js/main.js'),
use: {
loader: 'imports-loader',
options: {
AjaxPrefix: 'exports-loader?this.AjaxPrefix!../../../../common/static/coffee/src/ajax_prefix.coffee'
}
}
}
]
},
resolve: {
extensions: ['.js', '.json']
extensions: ['.js', '.json', '.coffee'],
alias: {
'edx-ui-toolkit': 'edx-ui-toolkit/src/', // @TODO: some paths in toolkit are not valid relative paths
'jquery.ui': 'jQuery-File-Upload/js/vendor/jquery.ui.widget.js',
jquery: 'jquery/src/jquery' // Use the non-dist form of jQuery for better debugging + optimization
},
modules: [
'node_modules',
'common/static/js/vendor/'
]
},
resolveLoader: {
alias: {
text: 'raw-loader' // Compatibility with RequireJSText's text! loader, uses raw-loader under the hood
}
},
externals: {
gettext: 'gettext'
},
watchOptions: {
......@@ -59,7 +109,7 @@ var wpconfig = {
if (isProd) {
wpconfig.plugins = wpconfig.plugins.concat([
new webpack.LoaderOptionsPlugin({
new webpack.LoaderOptionsPlugin({ // This may not be needed; legacy option for loaders written for webpack 1
minimize: true
}),
new webpack.optimize.UglifyJsPlugin()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment