i18n: Make XBlock buttons & components have localizable display names

1. Current code uses type name as the display names for XBlock buttons, so the name of these five buttons can't be localized. This fix contains code that adds a 'display_name' field for the buttons, and makes their names localizable.
2. The display names of components in advanced, html and problem types can be localized now.

cms/djangoapps/contentstore/views/component.py

@@ -29,6 +29,7 @@ from models.settings.course_grading import CourseGradingModel
 from xmodule.modulestore.keys import UsageKey
 
 from .access import has_course_access
+from django.utils.translation import ugettext as _
 
 __all__ = ['OPEN_ENDED_COMPONENT_TYPES',
            'ADVANCED_COMPONENT_POLICY_KEY',
@@ -284,19 +285,27 @@ def _get_component_templates(course):
             "is_common": is_common
         }
 
+    component_display_names = {
+        'discussion': _("Discussion"),
+        'html': _("HTML"),
+        'problem': _("Problem"),
+        'video': _("Video")
+    }
+    advanced_component_display_names = {}
+
     component_templates = []
     # The component_templates array is in the order of "advanced" (if present), followed
     # by the components in the order listed in COMPONENT_TYPES.
     for category in COMPONENT_TYPES:
         templates_for_category = []
         component_class = _load_mixed_class(category)
-        # add the default template
+        # add the default template with localized display name
         # TODO: Once mixins are defined per-application, rather than per-runtime,
         # this should use a cms mixed-in class. (cpennington)
         if hasattr(component_class, 'display_name'):
-            display_name = component_class.display_name.default or 'Blank'
+            display_name = _(component_class.display_name.default) if component_class.display_name.default else _('Blank')
         else:
-            display_name = 'Blank'
+            display_name = _('Blank')
         templates_for_category.append(create_template_dict(display_name, category))
 
         # add boilerplates
@@ -306,20 +315,24 @@ def _get_component_templates(course):
                 if not filter_templates or filter_templates(template, course):
                     templates_for_category.append(
                         create_template_dict(
-                            template['metadata'].get('display_name'),
+                            _(template['metadata'].get('display_name')),
                             category,
                             template.get('template_id'),
                             template['metadata'].get('markdown') is not None
                         )
                     )
-        component_templates.append({"type": category, "templates": templates_for_category})
+        component_templates.append({
+            "type": category,
+            "templates": templates_for_category,
+            "display_name": component_display_names[category]
+            })
 
     # Check if there are any advanced modules specified in the course policy.
     # These modules should be specified as a list of strings, where the strings
     # are the names of the modules in ADVANCED_COMPONENT_TYPES that should be
     # enabled for the course.
     course_advanced_keys = course.advanced_modules
-    advanced_component_templates = {"type": "advanced", "templates": []}
+    advanced_component_templates = {"type": "advanced", "templates": [], "display_name": _("Advanced")}
     # Set component types according to course policy file
     if isinstance(course_advanced_keys, list):
         for category in course_advanced_keys:
@@ -328,9 +341,13 @@ def _get_component_templates(course):
                 try:
                     component_class = _load_mixed_class(category)
 
+                    if component_class.display_name.default:
+                        template_display_name = _(component_class.display_name.default)
+                    else:
+                        template_display_name = advanced_component_display_names.get(category, category)
                     advanced_component_templates['templates'].append(
                         create_template_dict(
-                            component_class.display_name.default or category,
+                            template_display_name,
                             category
                         )
                     )

cms/static/js/models/component_template.js

@@ -15,6 +15,7 @@ define(["backbone"], function (Backbone) {
         parse: function (response) {
             this.type = response.type;
             this.templates = response.templates;
+            this.display_name = response.display_name;
 
             // Sort the templates.
             this.templates.sort(function (a, b) {

cms/static/js/views/components/add_xblock_button.js

@@ -6,7 +6,13 @@ define(["js/views/baseview"],
             initialize: function () {
                 BaseView.prototype.initialize.call(this);
                 this.template = this.loadTemplate("add-xblock-component-button");
-                this.$el.html(this.template({type: this.model.type, templates: this.model.templates}));
+                this.$el.html(
+                    this.template({
+                        type: this.model.type,
+                        templates: this.model.templates,
+                        display_name: this.model.display_name
+                    })
+                );
             }
         });
 

cms/templates/js/add-xblock-component-button.underscore

@@ -4,5 +4,5 @@
 <a href="#" class="single-template" data-type="<%= type %>" data-category="<%= templates[0].category %>">
 <% } %>
   <span class="large-template-icon large-<%= type %>-icon"></span>
-  <span class="name"><%= type %></span>
+  <span class="name"><%= display_name %></span>
 </a>