diff --git a/cms/static/js/spec/views/group_configuration_spec.js b/cms/static/js/spec/views/group_configuration_spec.js index 29488b551b..9309e04656 100644 --- a/cms/static/js/spec/views/group_configuration_spec.js +++ b/cms/static/js/spec/views/group_configuration_spec.js @@ -857,7 +857,7 @@ define([ beforeEach(function() { TemplateHelpers.installTemplate('content-group-details', true); - this.model = new GroupModel({name: 'Content Group', id: 0}); + this.model = new GroupModel({name: 'Content Group', id: 0, courseOutlineUrl: "CourseOutlineUrl"}); var saveableModel = new GroupConfigurationModel({ name: 'Content Group Configuration', @@ -888,7 +888,7 @@ define([ it('should hide empty usage appropriately', function() { this.view.$('.hide-groups').click(); - assertHideEmptyUsages(this.view) + assertHideEmptyUsages(this.view); }); it('should show non-empty usage appropriately', function() { @@ -1001,7 +1001,7 @@ define([ 'content-group-editor', 'content-group-details' ], true); - this.model = new GroupModel({name: 'Content Group', id: 0}); + this.model = new GroupModel({name: 'Content Group', id: 0, courseOutlineUrl: 'CourseOutlineUrl'}); this.saveableModel = new GroupConfigurationModel({ name: 'Content Group Configuration', diff --git a/cms/static/js/spec/views/pages/group_configurations_spec.js b/cms/static/js/spec/views/pages/group_configurations_spec.js index 5b8d4257ec..52c531600c 100644 --- a/cms/static/js/spec/views/pages/group_configurations_spec.js +++ b/cms/static/js/spec/views/pages/group_configurations_spec.js @@ -16,7 +16,8 @@ define([ experimentsEnabled: true, experimentGroupConfigurations: new GroupConfigurationCollection({ id: 0, - name: 'Configuration 1' + name: 'Configuration 1', + courseOutlineUrl: "CourseOutlineUrl" }), contentGroupConfiguration: new GroupConfigurationModel({groups: []}) }); diff --git a/cms/static/js/views/content_group_details.js b/cms/static/js/views/content_group_details.js index 4b6ed76820..1a2891ac88 100644 --- a/cms/static/js/views/content_group_details.js +++ b/cms/static/js/views/content_group_details.js @@ -3,8 +3,9 @@ * It is expected to be backed by a Group model. */ define([ - 'js/views/baseview', 'underscore', 'gettext', 'underscore.string' -], function(BaseView, _, gettext, str) { + 'js/views/baseview', 'underscore', 'gettext', 'underscore.string', + 'edx-ui-toolkit/js/utils/string-utils', 'edx-ui-toolkit/js/utils/html-utils' +], function(BaseView, _, gettext, str, StringUtils, HtmlUtils) { 'use strict'; var ContentGroupDetailsView = BaseView.extend({ @@ -37,9 +38,10 @@ define([ render: function(showContentGroupUsages) { var attrs = $.extend({}, this.model.attributes, { usageCountMessage: this.getUsageCountTitle(), - outlineAnchorMessage: this.getOutlineAnchorMessage(), + courseOutlineUrl: this.model.collection.parents[0].outlineUrl, index: this.model.collection.indexOf(this.model), - showContentGroupUsages: showContentGroupUsages || false + showContentGroupUsages: showContentGroupUsages || false, + HtmlUtils: HtmlUtils }); this.$el.html(this.template(attrs)); return this; @@ -56,41 +58,23 @@ define([ }, getUsageCountTitle: function () { - var count = this.model.get('usage').length, message; + var count = this.model.get('usage').length; if (count === 0) { - message = gettext('Not in Use'); + return gettext('Not in Use'); } else { - message = ngettext( + /* globals ngettext */ + return StringUtils.interpolate(ngettext( /* Translators: 'count' is number of units that the group configuration is used in. */ - 'Used in %(count)s unit', 'Used in %(count)s units', + 'Used in {count} unit', 'Used in {count} units', count + ), + {count: count} ); } - - return interpolate(message, { count: count }, true); - }, - - getOutlineAnchorMessage: function () { - var message = _.escape(gettext( - /* - Translators: 'outlineAnchor' is an anchor pointing to - the course outline page. - */ - 'This content group is not in use. Add a content group to any unit from the %(outlineAnchor)s.' - )), - anchor = str.sprintf( - '%(text)s', - { - url: this.model.collection.parents[0].outlineUrl, - text: _.escape(gettext('Course Outline')) - } - ); - - return str.sprintf(message, {outlineAnchor: anchor}); } }); diff --git a/cms/static/js/views/content_group_editor.js b/cms/static/js/views/content_group_editor.js index f249287cbe..8be838ddcb 100644 --- a/cms/static/js/views/content_group_editor.js +++ b/cms/static/js/views/content_group_editor.js @@ -23,8 +23,8 @@ function(ListItemEditorView, _) { getTemplateOptions: function() { return { - id: this.model.escape('id'), - name: this.model.escape('name'), + id: this.model.get('id'), + name: this.model.get('name'), index: this.model.collection.indexOf(this.model), isNew: this.model.isNew(), usage: this.model.get('usage'), diff --git a/cms/static/js/views/experiment_group_edit.js b/cms/static/js/views/experiment_group_edit.js index 8e3dccea0f..649b080ce1 100644 --- a/cms/static/js/views/experiment_group_edit.js +++ b/cms/static/js/views/experiment_group_edit.js @@ -32,7 +32,7 @@ function(BaseView, _, str, gettext) { index = collection.indexOf(this.model); this.$el.html(this.template({ - name: this.model.escape('name'), + name: this.model.get('name'), allocation: this.getAllocation(), index: index, error: this.model.validationError diff --git a/cms/static/js/views/group_configuration_details.js b/cms/static/js/views/group_configuration_details.js index 24fc35dee2..258dba6010 100644 --- a/cms/static/js/views/group_configuration_details.js +++ b/cms/static/js/views/group_configuration_details.js @@ -3,9 +3,10 @@ * It is expected to be instantiated with a GroupConfiguration model. */ define([ - 'js/views/baseview', 'underscore', 'gettext', 'underscore.string' + 'js/views/baseview', 'underscore', 'gettext', 'underscore.string', + 'edx-ui-toolkit/js/utils/string-utils', 'edx-ui-toolkit/js/utils/html-utils' ], -function(BaseView, _, gettext, str) { +function(BaseView, _, gettext, str, StringUtils, HtmlUtils) { 'use strict'; var GroupConfigurationDetailsView = BaseView.extend({ tagName: 'div', @@ -26,7 +27,7 @@ function(BaseView, _, gettext, str) { }, initialize: function() { - this.template = _.template( + this.template = HtmlUtils.template( $('#group-configuration-details-tpl').text() ); this.listenTo(this.model, 'change', this.render); @@ -36,11 +37,10 @@ function(BaseView, _, gettext, str) { var attrs = $.extend({}, this.model.attributes, { groupsCountMessage: this.getGroupsCountTitle(), usageCountMessage: this.getUsageCountTitle(), - outlineAnchorMessage: this.getOutlineAnchorMessage(), + courseOutlineUrl: this.model.collection.outlineUrl, index: this.model.collection.indexOf(this.model) }); - - this.$el.html(this.template(attrs)); + HtmlUtils.setHtml(this.$el, this.template(attrs)); return this; }, @@ -61,54 +61,37 @@ function(BaseView, _, gettext, str) { getGroupsCountTitle: function () { var count = this.model.get('groups').length, + /* globals ngettext */ message = ngettext( /* Translators: 'count' is number of groups that the group configuration contains. */ - 'Contains %(count)s group', 'Contains %(count)s groups', + 'Contains {count} group', 'Contains {count} groups', count ); - return interpolate(message, { count: count }, true); + return StringUtils.interpolate(message, { count: count }); }, getUsageCountTitle: function () { - var count = this.model.get('usage').length, message; + var count = this.model.get('usage').length; if (count === 0) { - message = gettext('Not in Use'); + return gettext('Not in Use'); } else { - message = ngettext( + return StringUtils.interpolate(ngettext( + /* Translators: 'count' is number of units that the group configuration is used in. */ - 'Used in %(count)s unit', 'Used in %(count)s units', + 'Used in {count} unit', 'Used in {count} units', count + ), + {count: count} ); } - - return interpolate(message, { count: count }, true); - }, - - getOutlineAnchorMessage: function () { - var message = gettext( - /* - Translators: 'outlineAnchor' is an anchor pointing to - the course outline page. - */ - 'This Group Configuration is not in use. Start by adding a content experiment to any Unit via the %(outlineAnchor)s.' - ), - anchor = str.sprintf( - '%(text)s', - { - url: this.model.collection.outlineUrl, - text: gettext('Course Outline') - } - ); - - return str.sprintf(message, {outlineAnchor: anchor}); } }); diff --git a/cms/static/js/views/group_configuration_editor.js b/cms/static/js/views/group_configuration_editor.js index 77df7112bd..33a1ddfba7 100644 --- a/cms/static/js/views/group_configuration_editor.js +++ b/cms/static/js/views/group_configuration_editor.js @@ -51,8 +51,8 @@ function(ListItemEditorView, _, $, gettext, ExperimentGroupEditView) { return { id: this.model.get('id'), uniqueId: _.uniqueId(), - name: this.model.escape('name'), - description: this.model.escape('description'), + name: this.model.get('name'), + description: this.model.get('description'), usage: this.model.get('usage'), isNew: this.model.isNew() }; diff --git a/cms/templates/group_configurations.html b/cms/templates/group_configurations.html index 9bc00afbc9..4d505fd8e9 100644 --- a/cms/templates/group_configurations.html +++ b/cms/templates/group_configurations.html @@ -1,3 +1,4 @@ +<%page expression_filter="h"/> <%inherit file="base.html" /> <%def name="content_groups_help_token()"><% return "content_groups" %>%def> <%def name="experiment_group_configurations_help_token()"><% return "group_configurations" %>%def> @@ -8,6 +9,7 @@ from django.utils.translation import ugettext as _ from openedx.core.djangolib.js_utils import ( dump_js_escaped_json, js_escaped_string ) +from openedx.core.djangolib.markup import Text, HTML %> <%block name="title">${_("Group Configurations")}%block> @@ -76,7 +78,7 @@ from openedx.core.djangolib.js_utils import (
${_("If you have cohorts enabled in your course, you can use content groups to create cohort-specific courseware. In other words, you can customize the content that particular cohorts see in your course.")}
${_("Each content group that you create can be associated with one or more cohorts. In addition to course content that is intended for all students, you can designate some content as visible only to specified content groups. Only learners in the cohorts that are associated with the specified content groups see the additional content.")}
-${_("Click {em_start}New content group{em_end} to add a new content group. To edit the name of a content group, hover over its box and click {em_start}Edit{em_end}. You can delete a content group only if it is not in use by a unit. To delete a content group, hover over its box and click the delete icon.").format(em_start="", em_end="")}
+${Text(_("Click {em_start}New content group{em_end} to add a new content group. To edit the name of a content group, hover over its box and click {em_start}Edit{em_end}. You can delete a content group only if it is not in use by a unit. To delete a content group, hover over its box and click the delete icon.")).format(em_start=HTML(""), em_end=HTML(""))}
@@ -85,7 +87,7 @@ from openedx.core.djangolib.js_utils import (${_("Use experiment group configurations if you are conducting content experiments, also known as A/B testing, in your course. Experiment group configurations define how many groups of students are in a content experiment. When you create a content experiment for a course, you select the group configuration to use.")}
-${_("Click {em_start}New Group Configuration{em_end} to add a new configuration. To edit a configuration, hover over its box and click {em_start}Edit{em_end}. You can delete a group configuration only if it is not in use in an experiment. To delete a configuration, hover over its box and click the delete icon.").format(em_start="", em_end="")}
+${Text(_("Click {em_start}New Group Configuration{em_end} to add a new configuration. To edit a configuration, hover over its box and click {em_start}Edit{em_end}. You can delete a group configuration only if it is not in use in an experiment. To delete a configuration, hover over its box and click the delete icon.")).format(em_start=HTML(""), em_end=HTML(""))}
- - <%= outlineAnchorMessage %> + <%= HtmlUtils.interpolateHtml( + gettext('This content group is not in use. Add a content group to any unit from the {linkStart}Course Outline{linkEnd}.'), + { + linkStart: HtmlUtils.interpolateHtml( + HtmlUtils.HTML(''), + {courseOutlineUrl: courseOutlineUrl, courseOutlineTitle: gettext('Course Outline')}), + linkEnd: HtmlUtils.HTML('') + }) + %>
<% } %> -<% } %> +<% } %> \ No newline at end of file diff --git a/cms/templates/js/content-group-editor.underscore b/cms/templates/js/content-group-editor.underscore index 0861e7b6ee..67924f98f3 100644 --- a/cms/templates/js/content-group-editor.underscore +++ b/cms/templates/js/content-group-editor.underscore @@ -1,44 +1,44 @@