From a78dad77ff4bc3c72214fc9994fa1b912b568c41 Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Fri, 31 Jan 2014 15:35:35 -0500
Subject: [PATCH 1/4] Pass component display name to Mako template

STUD-1241
---
 .../contentstore/features/component.feature         |  7 +++++++
 cms/djangoapps/contentstore/features/component.py   | 13 +++++++++++++
 cms/djangoapps/contentstore/views/item.py           |  3 ++-
 cms/templates/component.html                        |  1 +
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/cms/djangoapps/contentstore/features/component.feature b/cms/djangoapps/contentstore/features/component.feature
index 5df49e59fd..1712aaa245 100644
--- a/cms/djangoapps/contentstore/features/component.feature
+++ b/cms/djangoapps/contentstore/features/component.feature
@@ -112,3 +112,10 @@ 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!"
diff --git a/cms/djangoapps/contentstore/features/component.py b/cms/djangoapps/contentstore/features/component.py
index cfe4053b2f..9d45cc11ff 100644
--- a/cms/djangoapps/contentstore/features/component.py
+++ b/cms/djangoapps/contentstore/features/component.py
@@ -154,3 +154,16 @@ def see_component_in_position(step, display_name, index):
         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()
+    world.css_fill("ul.settings-list li:first-child input", display_name)
+    world.save_component(step)
diff --git a/cms/djangoapps/contentstore/views/item.py b/cms/djangoapps/contentstore/views/item.py
index 116fa33894..7388d927a5 100644
--- a/cms/djangoapps/contentstore/views/item.py
+++ b/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,
+                    'display_name': component.display_name,
                 })
         elif request.method == 'DELETE':
             delete_children = str_to_bool(request.REQUEST.get('recurse', 'False'))
diff --git a/cms/templates/component.html b/cms/templates/component.html
index 554cc9ec93..5764fd3108 100644
--- a/cms/templates/component.html
+++ b/cms/templates/component.html
@@ -28,6 +28,7 @@
 </div>
 <div class="wrapper wrapper-component-action-header">
     <div class="component-header">
+    ${display_name}
     </div>
     <ul class="component-actions">
       <li class="action-item action-edit">

From c43d36b704a1f6f69bed8aa02809cfbf3f7ae5ff Mon Sep 17 00:00:00 2001
From: marcotuts <marcotuts@gmail.com>
Date: Mon, 3 Feb 2014 11:26:00 -0500
Subject: [PATCH 2/4] visual styling adjustments to component header

---
 cms/static/sass/views/_unit.scss | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index 5795c59d2e..1cd74e12a1 100644
--- a/cms/static/sass/views/_unit.scss
+++ b/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;
         }
 

From 7cab3869c4f353c480bd076b0d9c92ca7c180e29 Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Mon, 3 Feb 2014 12:10:55 -0500
Subject: [PATCH 3/4] Fall back on category is display_name is empty or unset

---
 cms/djangoapps/contentstore/views/item.py | 2 +-
 cms/templates/component.html              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cms/djangoapps/contentstore/views/item.py b/cms/djangoapps/contentstore/views/item.py
index 7388d927a5..3d8f81a6ef 100644
--- a/cms/djangoapps/contentstore/views/item.py
+++ b/cms/djangoapps/contentstore/views/item.py
@@ -114,7 +114,7 @@ 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,
-                    'display_name': component.display_name,
+                    'label': component.display_name or component.category,
                 })
         elif request.method == 'DELETE':
             delete_children = str_to_bool(request.REQUEST.get('recurse', 'False'))
diff --git a/cms/templates/component.html b/cms/templates/component.html
index 5764fd3108..954aaf5c33 100644
--- a/cms/templates/component.html
+++ b/cms/templates/component.html
@@ -28,7 +28,7 @@
 </div>
 <div class="wrapper wrapper-component-action-header">
     <div class="component-header">
-    ${display_name}
+    ${label}
     </div>
     <ul class="component-actions">
       <li class="action-item action-edit">

From 46248c7006fc004aca5c4c998dbf00ad92781979 Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Mon, 3 Feb 2014 13:45:07 -0500
Subject: [PATCH 4/4] add lettuce test for displaying category if display_name
 is empty

---
 .../contentstore/features/component.feature   |  9 ++++++++
 .../contentstore/features/component.py        | 12 +++++++++-
 .../component_settings_editor_helpers.py      | 16 +++++++++++++
 .../contentstore/features/problem-editor.py   | 23 ++++---------------
 4 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/cms/djangoapps/contentstore/features/component.feature b/cms/djangoapps/contentstore/features/component.feature
index 1712aaa245..90b8a8b843 100644
--- a/cms/djangoapps/contentstore/features/component.feature
+++ b/cms/djangoapps/contentstore/features/component.feature
@@ -119,3 +119,12 @@ Feature: CMS.Component Adding
         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"
diff --git a/cms/djangoapps/contentstore/features/component.py b/cms/djangoapps/contentstore/features/component.py
index 9d45cc11ff..59a1a301b5 100644
--- a/cms/djangoapps/contentstore/features/component.py
+++ b/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):
@@ -165,5 +167,13 @@ def check_component_display_name(step, display_name):
 @step(u'I change the display name to "([^"]*)"')
 def change_display_name(step, display_name):
     world.edit_component_and_select_settings()
-    world.css_fill("ul.settings-list li:first-child input", display_name)
+    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)
diff --git a/cms/djangoapps/contentstore/features/component_settings_editor_helpers.py b/cms/djangoapps/contentstore/features/component_settings_editor_helpers.py
index d3c0beb284..46c7da2411 100644
--- a/cms/djangoapps/contentstore/features/component_settings_editor_helpers.py
+++ b/cms/djangoapps/contentstore/features/component_settings_editor_helpers.py
@@ -5,6 +5,7 @@ from lettuce import world
 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_setting_entry_index(label):
                 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)
diff --git a/cms/djangoapps/contentstore/features/problem-editor.py b/cms/djangoapps/contentstore/features/problem-editor.py
index 2265b5010e..b52fdc6ed6 100644
--- a/cms/djangoapps/contentstore/features/problem-editor.py
+++ b/cms/djangoapps/contentstore/features/problem-editor.py
@@ -7,7 +7,6 @@ from nose.tools import assert_equal, assert_true  # pylint: disable=E0611
 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():