Pass component display name to Mako template

cms/djangoapps/contentstore/features/component.feature

@@ -112,3 +112,19 @@ Feature: CMS.Component Adding
         Then I see a Problem component with display name "Blank Common Problem" in position "0"
         And I see a Problem component with display name "Duplicate of 'Blank Common Problem'" in position "1"
         And I see a Problem component with display name "Multiple Choice" in position "2"
+
+    Scenario: I can set the display name of a component
+        Given I am in Studio editing a new unit
+        When I add a "Text" "HTML" component
+        Then I see the display name is "Text"
+        When I change the display name to "I'm the Cuddliest!"
+        Then I see the display name is "I'm the Cuddliest!"
+
+    Scenario: If a component has no display name, the category is displayed
+        Given I am in Studio editing a new unit
+        When I add a "Blank Advanced Problem" "Advanced Problem" component
+        Then I see the display name is "Blank Advanced Problem"
+        When I change the display name to ""
+        Then I see the display name is "problem"
+        When I unset the display name
+        Then I see the display name is "Blank Advanced Problem"

cms/djangoapps/contentstore/features/component.py

@@ -8,6 +8,8 @@
 from lettuce import world, step
 from nose.tools import assert_true, assert_in  # pylint: disable=E0611
 
+DISPLAY_NAME = "Display Name"
+
 
 @step(u'I add this type of single step component:$')
 def add_a_single_step_component(step):
@@ -154,3 +156,24 @@ def find_problem(_driver):
         return world.css_text(component_css, int(index)).startswith(display_name.upper())
 
     world.wait_for(find_problem, timeout_msg='Did not find the duplicated problem')
+
+
+@step(u'I see the display name is "([^"]*)"')
+def check_component_display_name(step, display_name):
+    label = world.css_text(".component-header")
+    assert display_name == label
+
+
+@step(u'I change the display name to "([^"]*)"')
+def change_display_name(step, display_name):
+    world.edit_component_and_select_settings()
+    index = world.get_setting_entry_index(DISPLAY_NAME)
+    world.set_field_value(index, display_name)
+    world.save_component(step)
+
+
+@step(u'I unset the display name')
+def unset_display_name(step):
+    world.edit_component_and_select_settings()
+    world.revert_setting_entry(DISPLAY_NAME)
+    world.save_component(step)

cms/djangoapps/contentstore/features/component_settings_editor_helpers.py

@@ -5,6 +5,7 @@
 from nose.tools import assert_equal, assert_in  # pylint: disable=E0611
 from terrain.steps import reload_the_page
 from common import type_in_codemirror
+from selenium.webdriver.common.keys import Keys
 
 
 @world.absorb
@@ -219,3 +220,18 @@ def get_index():
                 return index
         return None
     return world.retry_on_exception(get_index)
+
+
+@world.absorb
+def set_field_value(index, value):
+    """
+    Set the field to the specified value.
+
+    Note: we cannot use css_fill here because the value is not set
+    until after you move away from that field.
+    Instead we will find the element, set its value, then hit the Tab key
+    to get to the next field.
+    """
+    elem = world.css_find('div.wrapper-comp-setting input.setting-input')[index]
+    elem.value = value
+    elem.type(Keys.TAB)

cms/djangoapps/contentstore/features/problem-editor.py

@@ -7,7 +7,6 @@
 from common import type_in_codemirror, open_new_course
 from advanced_settings import change_value
 from course_import import import_file, go_to_import
-from selenium.webdriver.common.keys import Keys
 
 DISPLAY_NAME = "Display Name"
 MAXIMUM_ATTEMPTS = "Maximum Attempts"
@@ -53,7 +52,7 @@ def i_can_modify_the_display_name(_step):
     # Verifying that the display name can be a string containing a floating point value
     # (to confirm that we don't throw an error because it is of the wrong type).
     index = world.get_setting_entry_index(DISPLAY_NAME)
-    set_field_value(index, '3.4')
+    world.set_field_value(index, '3.4')
     verify_modified_display_name()
 
 
@@ -66,7 +65,7 @@ def my_display_name_change_is_persisted_on_save(step):
 @step('I can specify special characters in the display name')
 def i_can_modify_the_display_name_with_special_chars(_step):
     index = world.get_setting_entry_index(DISPLAY_NAME)
-    set_field_value(index, "updated ' \" &")
+    world.set_field_value(index, "updated ' \" &")
     verify_modified_display_name_with_special_chars()
 
 
@@ -141,7 +140,7 @@ def set_the_max_attempts(step, max_attempts_set):
     # on firefox with selenium, the behaviour is different.
     # eg 2.34 displays as 2.34 and is persisted as 2
     index = world.get_setting_entry_index(MAXIMUM_ATTEMPTS)
-    set_field_value(index, max_attempts_set)
+    world.set_field_value(index, max_attempts_set)
     world.save_component_and_reopen(step)
     value = world.css_value('input.setting-input', index=index)
     assert value != "", "max attempts is blank"
@@ -282,23 +281,9 @@ def verify_unset_display_name():
     world.verify_setting_entry(world.get_setting_entry(DISPLAY_NAME), DISPLAY_NAME, 'Blank Advanced Problem', False)
 
 
-def set_field_value(index, value):
-    """
-    Set the field to the specified value.
-
-    Note: we cannot use css_fill here because the value is not set
-    until after you move away from that field.
-    Instead we will find the element, set its value, then hit the Tab key
-    to get to the next field.
-    """
-    elem = world.css_find('div.wrapper-comp-setting input.setting-input')[index]
-    elem.value = value
-    elem.type(Keys.TAB)
-
-
 def set_weight(weight):
     index = world.get_setting_entry_index(PROBLEM_WEIGHT)
-    set_field_value(index, weight)
+    world.set_field_value(index, weight)
 
 
 def open_high_level_source():

cms/djangoapps/contentstore/views/item.py

@@ -113,7 +113,8 @@ def xblock_handler(request, tag=None, package_id=None, branch=None, version_guid
 
                 return render_to_response('component.html', {
                     'preview': get_preview_html(request, component),
-                    'editor': content
+                    'editor': content,
+                    'label': component.display_name or component.category,
                 })
         elif request.method == 'DELETE':
             delete_children = str_to_bool(request.REQUEST.get('recurse', 'False'))

cms/static/sass/views/_unit.scss

@@ -881,19 +881,23 @@ body.unit {
       padding: $baseline/4 $baseline/2;
       top: 0;
       left: 0;
-      border-bottom: 1px solid $gray-l4;
-      background: $gray-l5;
     }
 
     .component-header {
       display: inline-block;
-      width: 50%;
-      vertical-align: middle;
+      overflow: hidden;
+      padding: $baseline/2 0px 0px $baseline/4;
+      max-width: 60%;
+      color: $gray-l1;
+      text-overflow: ellipsis;
+      white-space: nowrap; 
+      font-weight: 300;
     }
 
     .component-actions {
       display: inline-block;
       float: right;
+      max-width: 40%;
       vertical-align: middle;
       text-align: center;
     }
@@ -934,6 +938,7 @@ body.unit {
         .action-button-text {
           padding-left: 1px;
           vertical-align: bottom;
+          text-transform: uppercase;
           line-height: 17px;
         }
 

cms/templates/component.html

@@ -28,6 +28,7 @@
 </div>
 <div class="wrapper wrapper-component-action-header">
     <div class="component-header">
+    ${label}
     </div>
     <ul class="component-actions">
       <li class="action-item action-edit">