make only section name in headers editable

STUD-1679

cms/djangoapps/contentstore/features/section.feature

@@ -28,6 +28,13 @@ Feature: CMS.Create Section
     Then the section release date is updated
     And I see a "saving" notification
 
+  Scenario: Section name not clickable on editing release date
+    Given I have opened a new course in Studio
+    And I have added a new section
+    When I click the Edit link for the release date
+    And I click on section name in Section Release Date modal
+    Then I see no form for editing section name in modal
+
   Scenario: Delete section
     Given I have opened a new course in Studio
     And I have added a new section

cms/djangoapps/contentstore/features/section.py

@@ -66,6 +66,16 @@ def i_click_to_edit_section_name(_step):
     world.css_click('span.section-name-span')
 
 
+@step('I click on section name in Section Release Date modal$')
+def i_click_on_section_name_in_modal(_step):
+    world.css_click('.modal-window .section-name')
+
+
+@step('I see no form for editing section name in modal$')
+def edit_section_name_form_not_exist(_step):
+    assert not world.is_css_present('.modal-window .section-name input')
+
+
 @step('I see the complete section name with a quote in the editor$')
 def i_see_complete_section_name_with_quote_in_editor(_step):
     css = '.section-name-edit input[type=text]'

cms/templates/overview.html

@@ -36,7 +36,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
       });
   });
 
-  $(".section-name").each(function() {
+  $(".section-name.is_editable").each(function() {
       var model = new SectionModel({
           id: $(this).parent(".item-details").data("locator"),
           name: $(this).data("name")
@@ -53,7 +53,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
       <header class="section">
       <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
         <div class="item-details">
-          <h3 class="section-name">
+          <h3 class="section-name is_editable">
             <form class="section-name-form">
               <input type="text" value="${_('New Section Name')}" class="new-section-name" />
               <input type="submit" class="new-section-name-save" data-parent="${context_course.location}"
@@ -72,7 +72,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
     <header>
       <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
       <div class="item-details">
-        <h3 class="section-name">
+        <h3 class="section-name is_editable">
         <span class="section-name-span">${_('Add a new section name')}</span>
         <form class="section-name-form">
           <input type="text" value="${_('New Section Name')}" class="new-section-name" />
@@ -163,7 +163,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
                   <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
 
                   <div class="item-details" data-locator="${section_locator}">
-                    <h3 class="section-name" data-name="${section.display_name_with_default | h}"></h3>
+                    <h3 class="section-name is_editable" data-name="${section.display_name_with_default | h}"></h3>
                   </div>
                   <div class="item-actions">
 

common/test/acceptance/pages/studio/overview.py

@@ -162,3 +162,39 @@ class CourseOutlinePage(CoursePage, CourseOutlineContainer):
         Return the :class:`.CourseOutlineSection` with the title `title`.
         """
         return self.child(title)
+
+    def click_section_name(self, parent_css=''):
+        """
+        Find and click on first section name in course outline
+        """
+        self.q(css='{} .section-name'.format(parent_css)).first.click()
+
+    def get_section_name(self, parent_css='', page_refresh=False):
+        """
+        Get the list of names of all sections present
+        """
+        if page_refresh:
+            self.browser.refresh()
+        return self.q(css='{} .section-name'.format(parent_css)).text
+
+    def section_name_edit_form_present(self, parent_css=''):
+        """
+        Check that section name edit form present
+        """
+        return self.q(css='{} .section-name input'.format(parent_css)).present
+
+    def change_section_name(self, new_name, parent_css=''):
+        """
+        Change section name of first section present in course outline
+        """
+        self.click_section_name(parent_css)
+        self.q(css='{} .section-name input'.format(parent_css)).first.fill(new_name)
+        self.q(css='{} .section-name .save-button'.format(parent_css)).first.click()
+        self.wait_for_ajax()
+
+    def click_release_date(self):
+        """
+        Open release date edit modal of first section in course outline
+        """
+        self.q(css='div.section-published-date a.edit-release-date').first.click()
+

common/test/acceptance/tests/test_studio_general.py

@@ -109,6 +109,56 @@ class CoursePagesTest(UniqueCourseTest):
             page.visit()
 
 
+class CourseSectionTest(UniqueCourseTest):
+    """
+    Tests that verify the sections name editable only inside headers in Studio Course Outline that you can get to
+    when logged in and have a course.
+    """
+
+    COURSE_ID_SEPARATOR = "."
+
+    def setUp(self):
+        """
+        Install a course with no content using a fixture.
+        """
+        super(CourseSectionTest, self).setUp()
+        self.auth_page = AutoAuthPage(self.browser, staff=True).visit()
+        self.course_outline_page = CourseOutlinePage(
+            self.browser, self.course_info['org'], self.course_info['number'], self.course_info['run']
+        )
+        # Install a course with sections/problems, tabs, updates, and handouts
+        course_fix = CourseFixture(
+            self.course_info['org'], self.course_info['number'],
+            self.course_info['run'], self.course_info['display_name']
+        )
+        course_fix.add_children(
+            XBlockFixtureDesc('chapter', 'Test Section')
+        ).install()
+
+        self.course_outline_page.visit()
+
+    def test_section_name_editable_in_course_outline(self):
+        """
+        Check that section name is editable on course outline page.
+        """
+        section_name = self.course_outline_page.get_section_name()[0]
+        self.assertEqual(section_name, "Test Section")
+        self.course_outline_page.change_section_name("Test Section New")
+        section_name = self.course_outline_page.get_section_name(page_refresh=True)[0]
+        self.assertEqual(section_name, "Test Section New")
+
+    def test_section_name_not_editable_inside_modal(self):
+        """
+        Check that section name is not editable inside "Section Release Date" modal on course outline page.
+        """
+        parent_css='div.modal-window'
+        self.course_outline_page.click_release_date()
+        section_name = self.course_outline_page.get_section_name(parent_css)[0]
+        self.assertEqual(section_name, '"Test Section"')
+        self.course_outline_page.click_section_name(parent_css)
+        section_name_edit_form = self.course_outline_page.section_name_edit_form_present(parent_css)
+        self.assertFalse(section_name_edit_form)
+
 class DiscussionPreviewTest(UniqueCourseTest):
     """
     Tests that Inline Discussions are rendered with a custom preview in Studio