Merge pull request #26249 from edx/private_to_public_0aa1b8f

Mergeback PR from private to public.

cms/templates/widgets/video/codemirror-edit.html

@@ -1,13 +1,13 @@
 <%! from django.utils.translation import ugettext as _ %>
-<%page args="tabName"/>
+<%page args="tabName" expression_filter="h"/>
 <div>
-  <textarea id="xml-${html_id}" class="edit-box">${data | h}</textarea>
+  <textarea id="xml-${html_id}" class="edit-box">${data}</textarea>
 </div>
 
 <script type='text/javascript'>
 require(["domReady!", "jquery", "codemirror"], function(doc, $, CodeMirror) {
   ## Init CodeMirror editor
-  var el = $("#xml-${html_id}"),
+  var el = $("#xml-${html_id|n, decode.utf8}"),
         xml_editor = CodeMirror.fromTextArea(el.get(0), {
           mode: "application/xml",
           lineNumbers: true,
@@ -15,13 +15,13 @@ require(["domReady!", "jquery", "codemirror"], function(doc, $, CodeMirror) {
         });
 
   TabsEditingDescriptor.Model.addModelUpdate(
-    '${html_id}',
-    '${tabName}',
+    '${html_id|n, decode.utf8}',
+    '${tabName|n, decode.utf8}',
     function()  { return xml_editor.getValue(); })
 
   TabsEditingDescriptor.Model.addOnSwitch(
-    '${html_id}',
-    '${tabName}',
+    '${html_id|n, decode.utf8}',
+    '${tabName|n, decode.utf8}',
     function(){
         ## CodeMirror should get focus when tab is active
         xml_editor.refresh();

cms/templates/widgets/video/transcripts.html

@@ -1,6 +1,6 @@
 <%! from django.utils.translation import ugettext as _ %>
 <%namespace name='static' file='../../static_content.html'/>
-<%page args="tabName"/>
+<%page args="tabName" expression_filter="h"/>
 
 <%
 import json
@@ -25,7 +25,7 @@ import json
     </script>
 % endfor
 
-<div class="wrapper-comp-settings basic_metadata_edit" data-metadata='${json.dumps(transcripts_basic_tab_metadata) | h}'></div>
+<div class="wrapper-comp-settings basic_metadata_edit" data-metadata='${json.dumps(transcripts_basic_tab_metadata)}'></div>
 
 <script type="text/javascript">
     require(
@@ -37,13 +37,13 @@ import json
 
         function(doc, $, Editor) {
             var transcripts = new Editor({
-                    el: $('#editor-tab-${html_id}').find('.basic_metadata_edit')
+                    el: $('#editor-tab-${html_id|n, decode.utf8}').find('.basic_metadata_edit')
                 }),
                 storage = TabsEditingDescriptor.getStorage();
 
             TabsEditingDescriptor.Model.addModelUpdate(
-                '${html_id}',
-                '${tabName}',
+                '${html_id|n, decode.utf8}',
+                '${tabName|n, decode.utf8}',
                 function () {
                     // Advanced, Save
                     metadataEditor = storage.MetadataEditor;
@@ -55,8 +55,8 @@ import json
             );
 
             TabsEditingDescriptor.Model.addOnSwitch(
-                '${html_id}',
-                '${tabName}',
+                '${html_id|n, decode.utf8}',
+                '${tabName|n, decode.utf8}',
                 function () {
                     // Basic
                     metadataEditor = storage.MetadataEditor;

common/lib/capa/capa/templates/matlabinput.html

@@ -1,10 +1,11 @@
+<%page expression_filter="h"/>
 <section id="textbox_${id}" class="capa_inputtype cminput">
 <div class="script_placeholder" data-src="${matlab_editor_js}"></div>
-<textarea 
-  rows="${rows}" 
-  cols="${cols}" 
-  name="input_${id}" 
-  aria-describedby="answer_${id}" 
+<textarea
+  rows="${rows}"
+  cols="${cols}"
+  name="input_${id}"
+  aria-describedby="answer_${id}"
   id="input_${id}"
   data-tabsize="${tabsize}"
   data-mode="octave"
@@ -14,7 +15,7 @@
  % if hidden:
   style="display:none;"
  % endif
-  >${value|h}</textarea>
+  >${value}</textarea>
 
   <div class="grader-status" tabindex="-1">
 
@@ -34,10 +35,10 @@
   <span id="answer_${id}"></span>
 
   <div class="external-grader-message" aria-live="polite">
-    ${msg|n}
+    ${msg|n, decode.utf8}
   </div>
   <div class="ungraded-matlab-result" aria-live="polite">
-    ${queue_msg|n}
+    ${queue_msg|n, decode.utf8}
   </div>
 
   % if button_enabled:
@@ -52,8 +53,13 @@
           if($(parent_elt).find('.capa_alert').length) {
               $(parent_elt).find('.capa_alert').remove();
           }
-          var alert_elem = $("<div>" + msg + "</div>");
+          var alert_elem = $(edx.HtmlUtils.joinHtml(
+            edx.HtmlUtils.HTML("<div>"),
+            msg,
+            edx.HtmlUtils.HTML("</div>")
+          ).toString());
           alert_elem.addClass('capa_alert').addClass('is-fading-in');
+          // xss-lint: disable=javascript-jquery-insertion
           $(parent_elt).find('.action').after(alert_elem);
       };
 
@@ -61,7 +67,7 @@
       var plot = function(event) {
           var problem_elt = $(event.target).closest('.problems-wrapper');
           url = $(event.target).closest('.problems-wrapper').data('url');
-          input_id = "${id}";
+          input_id = "${id|n, decode.utf8}";
 
           // save the codemirror text to the textarea
           // since there could be multiple codemirror instances on the page,
@@ -69,7 +75,7 @@
           $('.CodeMirror').each(function(i, el){
               el.CodeMirror.save();
           });
-          var input = $("#input_${id}");
+          var input = $("#input_${id|n, decode.utf8}");
 
           // pull out the coded text
           submission = input.val();
@@ -83,10 +89,10 @@
                    var external_grader_msg = $(response.html).find(".external-grader-message").html();
                    var result_elem = $(problem_elt).find(".ungraded-matlab-result");
                    result_elem.addClass("is-fading-in");
-                   result_elem.html(new_result_elem);
+                   edx.HtmlUtils.setHtml(result_elem, new_result_elem);
                    var external_grader_msg_elem = $(problem_elt).find(".external-grader-message");
                    external_grader_msg_elem.addClass("is-fading-in");
-                   external_grader_msg_elem.html(external_grader_msg);
+                   edx.HtmlUtils.setHtml(external_grader_msg_elem, external_grader_msg);
                    // If we have a message about waiting for the external grader.
                    if (external_grader_msg.trim()) {
                         result_elem.html('');
@@ -128,7 +134,7 @@
           // save the answer
           $.postWithPrefix(url + '/problem_save', answer, save_callback);
       };
-      $('#plot_${id}').click(plot);
+      $('#plot_${id|n, decode.utf8}').click(plot);
 
     });
   </script>

common/static/common/js/components/utils/view_utils.js

@@ -6,8 +6,8 @@
 
     /* RequireJS */
     define(['jquery', 'underscore', 'gettext', 'common/js/components/views/feedback_notification',
-        'common/js/components/views/feedback_prompt'],
-        function($, _, gettext, NotificationView, PromptView) {
+        'common/js/components/views/feedback_prompt', 'edx-ui-toolkit/js/utils/html-utils'],
+        function($, _, gettext, NotificationView, PromptView, HtmlUtils) {
     /* End RequireJS */
     /* Webpack
     define(['jquery', 'underscore', 'gettext', 'common/js/components/views/feedback_notification',
@@ -247,10 +247,17 @@
             };
 
             checkTotalKeyLengthViolations = function(selectors, classes, keyFieldSelectors, messageTpl) {
+                var tempHtml;
                 if (!validateTotalKeyLength(keyFieldSelectors)) {
                     $(selectors.errorWrapper).addClass(classes.shown).removeClass(classes.hiding);
-                    $(selectors.errorMessage).html(
-                        '<p>' + _.template(messageTpl)({limit: MAX_SUM_KEY_LENGTH}) + '</p>'
+                    tempHtml = HtmlUtils.joinHtml(
+                            HtmlUtils.HTML('<p>'),
+                            HtmlUtils.template(messageTpl)({limit: MAX_SUM_KEY_LENGTH}),
+                            HtmlUtils.HTML('</p>')
+                    );
+                    HtmlUtils.setHtml(
+                        $(selectors.errorMessage),
+                        tempHtml
                     );
                     $(selectors.save).addClass(classes.disabled);
                 } else {

common/static/common/templates/components/paginated-view.underscore

@@ -1,4 +1,4 @@
-<div class="sr-is-focusable sr-<%= type %>-view" tabindex="-1"></div>
-<div class="<%= type %>-paging-header"></div>
-<ul class="<%= type %>-list cards-list"></ul>
-<div class="<%= type %>-paging-footer"></div>
+<div class="sr-is-focusable sr-<%- type %>-view" tabindex="-1"></div>
+<div class="<%- type %>-paging-header"></div>
+<ul class="<%- type %>-list cards-list"></ul>
+<div class="<%- type %>-paging-footer"></div>

common/static/common/templates/components/tabpanel.underscore

@@ -1 +1 @@
-<div role="tabpanel" class="tabpanel is-hidden" id="<%= tabId %>" aria-labelledby="tab-<%= index %>" aria-hidden="true" tabindex="0"></div>
+<div role="tabpanel" class="tabpanel is-hidden" id="<%- tabId %>" aria-labelledby="tab-<%- index %>" aria-hidden="true" tabindex="0"></div>

lms/djangoapps/discussion/templates/discussion/edx_ace/responsenotification/email/body.html

@@ -1,18 +1,17 @@
 {% extends 'ace_common/edx_ace/common/base_body.html' %}
 
 {% load i18n %}
+{% load django_markup %}
 {% load static %}
 {% block content %}
 <table width="100%" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
     <tr>
         <td>
             <p>
-                {% filter force_escape %}
                 {% blocktrans trimmed asvar replied_to_text %}
-                    {{ comment_username }} replied to
+                    {{ comment_username }} replied to {start_tag}{{ thread_title }}{end_tag}:
                 {% endblocktrans %}
-                {% endfilter %}
-                {{ replied_to_text }} <b>{{ thread_title }}</b>:
+                {% interpolate_html replied_to_text start_tag='<b>'|safe end_tag='</b>'|safe %}
             </p>
             <div style="border-left: 1px solid rgba(0,0,0,0.25);
                     padding: 1px 1px 1px 15px;
@@ -21,9 +20,7 @@
                 {{ comment_body }}
             </div>
 
-            {% filter force_escape %}
-                {% blocktrans asvar course_cta_text %}View discussion{% endblocktrans %}
-            {% endfilter %}
+            {% trans "View discussion" as course_cta_text %}{{course_cta_text|force_escape}}
             {% include "ace_common/edx_ace/common/return_to_course_cta.html" with course_cta_text=course_cta_text course_cta_url=post_link%}
 
             {% block google_analytics_pixel %}

lms/djangoapps/teams/static/teams/templates/team-membership-details.underscore

@@ -1,4 +1,4 @@
-<span class="member-count"><%= membership_message %></span>
+<span class="member-count"><%- membership_message %></span>
 <ul class="list-member-thumbs">
     <% _.each(memberships, function (membership) { %>
         <li class="item-member-thumb"><img alt="<%- membership.user.username %>" src="<%- membership.user.profile_image.image_url_small %>"></img></li>

lms/static/js/discovery/views/courses_listing.js

@@ -4,8 +4,9 @@
         'underscore',
         'backbone',
         'gettext',
-        'js/discovery/views/course_card'
-    ], function($, _, Backbone, gettext, CourseCardView) {
+        'js/discovery/views/course_card',
+        'edx-ui-toolkit/js/utils/html-utils'
+    ], function($, _, Backbone, gettext, CourseCardView, HtmlUtils) {
         'use strict';
 
         return Backbone.View.extend({
@@ -38,7 +39,10 @@
                     var item = new CourseCardView({model: result});
                     return item.render().el;
                 }, this);
-                this.$list.append(items);
+                HtmlUtils.append(
+                    this.$list,
+                    HtmlUtils.HTML(items)
+                );
                 /* eslint no-param-reassign: [2, { "props": false }] */
             },
 

lms/static/js/student_account/views/HintedLoginView.js

@@ -1,7 +1,7 @@
 (function(define) {
     'use strict';
-    define(['jquery', 'underscore', 'backbone'],
-        function($, _, Backbone) {
+    define(['jquery', 'underscore', 'backbone', 'edx-ui-toolkit/js/utils/html-utils'],
+        function($, _, Backbone, HtmlUtils) {
             return Backbone.View.extend({
                 el: '#hinted-login-form',
 
@@ -22,10 +22,12 @@
                 },
 
                 render: function() {
-                    $(this.el).html(_.template(this.tpl)({
-                        hintedProvider: this.hintedProvider
-                    }));
-
+                    HtmlUtils.setHtml(
+                        $(this.el),
+                        HtmlUtils.template(this.tpl)({
+                            hintedProvider: this.hintedProvider
+                        })
+                    );
                     return this;
                 },
 

lms/static/js/student_account/views/InstitutionLoginView.js

@@ -1,7 +1,7 @@
 (function(define) {
     'use strict';
-    define(['jquery', 'underscore', 'backbone'],
-        function($, _, Backbone) {
+    define(['jquery', 'underscore', 'backbone', 'edx-ui-toolkit/js/utils/html-utils'],
+        function($, _, Backbone, HtmlUtils) {
             return Backbone.View.extend({
                 el: '#institution_login-form',
 
@@ -13,13 +13,15 @@
                 },
 
                 render: function() {
-                    $(this.el).html(_.template(this.tpl)({
-                    // We pass the context object to the template so that
-                    // we can perform variable interpolation using sprintf
-                        providers: this.providers,
-                        platformName: this.platformName
-                    }));
-
+                    HtmlUtils.setHtml(
+                        $(this.el),
+                        HtmlUtils.template(this.tpl)({
+                            // We pass the context object to the template so that
+                            // we can perform variable interpolation using sprintf
+                            providers: this.providers,
+                            platformName: this.platformName
+                        })
+                    );
                     return this;
                 }
             });