Add custom HTML to Course About page sidebar

This allows course staff to add arbitrary HTML to the sidebar on the About page. A waffle switch has been added in the course_experience app to allow enabling and disabling of this feature.
2018-01-26 12:04:12 -08:00
parent 8da0153433
commit 56ac149962
13 changed files with 125 additions and 4 deletions
--- a/cms/djangoapps/contentstore/tests/test_course_settings.py
+++ b/cms/djangoapps/contentstore/tests/test_course_settings.py
@@ -130,6 +130,7 @@ class CourseDetailsViewTest(CourseTestCase, MilestonesTestCaseMixin):

        self.alter_field(url, details, 'enrollment_end', datetime.datetime(2012, 11, 15, 1, 30, tzinfo=UTC))
        self.alter_field(url, details, 'short_description', "Short Description")
+        self.alter_field(url, details, 'about_sidebar_html', "About Sidebar HTML")
        self.alter_field(url, details, 'overview', "Overview")
        self.alter_field(url, details, 'intro_video', "intro_video")
        self.alter_field(url, details, 'effort', "effort")
@@ -148,6 +149,9 @@ class CourseDetailsViewTest(CourseTestCase, MilestonesTestCaseMixin):
        self.assertEqual(
            details['short_description'], encoded['short_description'], context + " short_description not =="
        )
+        self.assertEqual(
+            details['about_sidebar_html'], encoded['about_sidebar_html'], context + " about_sidebar_html not =="
+        )
        self.assertEqual(details['overview'], encoded['overview'], context + " overviews not ==")
        self.assertEqual(details['intro_video'], encoded.get('intro_video', None), context + " intro_video not ==")
        self.assertEqual(details['effort'], encoded['effort'], context + " efforts not ==")
@@ -270,6 +274,7 @@ class CourseDetailsViewTest(CourseTestCase, MilestonesTestCaseMixin):
            self.assertContains(response, "Introducing Your Course")
            self.assertContains(response, "Course Card Image")
            self.assertContains(response, "Course Short Description")
+            self.assertNotContains(response, "Course About Sidebar HTML")
            self.assertNotContains(response, "Course Title")
            self.assertNotContains(response, "Course Subtitle")
            self.assertNotContains(response, "Course Duration")
@@ -425,6 +430,7 @@ class CourseDetailsViewTest(CourseTestCase, MilestonesTestCaseMixin):
            self.assertContains(response, "Course Duration")
            self.assertContains(response, "Course Description")
            self.assertContains(response, "Course Short Description")
+            self.assertNotContains(response, "Course About Sidebar HTML")
            self.assertContains(response, "Course Overview")
            self.assertContains(response, "Course Introduction Video")
            self.assertContains(response, "Requirements")
--- a/cms/djangoapps/contentstore/views/course.py
+++ b/cms/djangoapps/contentstore/views/course.py
@@ -25,6 +25,8 @@ from opaque_keys.edx.keys import CourseKey
 from opaque_keys.edx.locator import BlockUsageLocator
 from openedx.core.djangoapps.content.course_overviews.models import CourseOverview
 from openedx.core.djangoapps.waffle_utils import WaffleSwitchNamespace
+from openedx.features.course_experience.waffle import waffle as course_experience_waffle
+from openedx.features.course_experience.waffle import ENABLE_COURSE_ABOUT_SIDEBAR_HTML
 from six import text_type

 from contentstore.course_group_config import (
@@ -1050,6 +1052,7 @@ def settings_handler(request, course_key_string):
                'EDITABLE_SHORT_DESCRIPTION',
                settings.FEATURES.get('EDITABLE_SHORT_DESCRIPTION', True)
            )
+            sidebar_html_enabled = course_experience_waffle().is_enabled(ENABLE_COURSE_ABOUT_SIDEBAR_HTML)
            # self_paced_enabled = SelfPacedConfiguration.current().enabled

            settings_context = {
@@ -1062,6 +1065,7 @@ def settings_handler(request, course_key_string):
                'details_url': reverse_course_url('settings_handler', course_key),
                'about_page_editable': about_page_editable,
                'short_description_editable': short_description_editable,
+                'sidebar_html_enabled': sidebar_html_enabled,
                'upload_asset_url': upload_asset_url,
                'course_handler_url': reverse_course_url('course_handler', course_key),
                'language_options': settings.ALL_LANGUAGES,
--- a/cms/static/js/views/settings/main.js
+++ b/cms/static/js/views/settings/main.js
@@ -16,6 +16,7 @@ define(['js/views/validation', 'codemirror', 'underscore', 'jquery', 'jquery.ui'
                   'change select': 'updateModel',
                   'click .remove-course-introduction-video': 'removeVideo',
                   'focus #course-overview': 'codeMirrorize',
+                   'focus #course-about-sidebar-html': 'codeMirrorize',
                   'mouseover .timezone': 'updateTime',
        // would love to move to a general superclass, but event hashes don't inherit in backbone :-(
                   'focus :input': 'inputFocus',
@@ -97,6 +98,10 @@ define(['js/views/validation', 'codemirror', 'underscore', 'jquery', 'jquery.ui'
                   this.$el.find('#' + this.fieldToSelectorMap.description).val(this.model.get('description'));

                   this.$el.find('#' + this.fieldToSelectorMap.short_description).val(this.model.get('short_description'));
+                   this.$el.find('#' + this.fieldToSelectorMap.about_sidebar_html).val(
+                       this.model.get('about_sidebar_html')
+                   );
+                   this.codeMirrorize(null, $('#course-about-sidebar-html')[0]);

                   this.$el.find('.current-course-introduction-video iframe').attr('src', this.model.videosourceSample());
                   this.$el.find('#' + this.fieldToSelectorMap.intro_video).val(this.model.get('intro_video') || '');
@@ -163,6 +168,7 @@ define(['js/views/validation', 'codemirror', 'underscore', 'jquery', 'jquery.ui'
                   subtitle: 'course-subtitle',
                   duration: 'course-duration',
                   description: 'course-description',
+                   about_sidebar_html: 'course-about-sidebar-html',
                   short_description: 'course-short-description',
                   intro_video: 'course-introduction-video',
                   effort: 'course-effort',
@@ -363,7 +369,7 @@ define(['js/views/validation', 'codemirror', 'underscore', 'jquery', 'jquery.ui'
                           }
                       });
                       cmTextArea = this.codeMirrors[thisTarget.id].getInputField();
-                       cmTextArea.setAttribute('id', 'course-overview-cm-textarea');
+                       cmTextArea.setAttribute('id', thisTarget.id + '-cm-textarea');
                   }
               },

--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -507,8 +507,10 @@
    }

    // specific fields - overview
-    #field-course-overview {
-      #course-overview {
+    #field-course-overview,
+    #field-course-about-sidebar-html {
+      #course-overview,
+      #course-about-sidebar-html {
        height: ($baseline*20);
      }

--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -366,6 +366,18 @@ CMS.URL.UPLOAD_ASSET = '${upload_asset_url | n, js_escaped_string}'
                      a_link_end=HTML("</a>")
                    )}</span>
                </li>
+                  % if sidebar_html_enabled:
+                  <li class="field text" id="field-course-about-sidebar-html">
+                      <label for="course-about-sidebar-html">${_("Course About Sidebar HTML")}
+                          <textarea class="tinymce text-editor" id="course-about-sidebar-html" aria-describedby="tip-course-about-sidebar-html"></textarea>
+                      </label>
+                      <span class="tip tip-stacked" id="tip-course-about-sidebar-html">${
+                      Text(_("Custom sidebar content for {a_link_start}your course summary page{a_link_end} (formatted in HTML)")).format(
+                        a_link_start=HTML("<a class='link-courseURL' rel='external' href='{lms_link_for_about_page}'>").format(lms_link_for_about_page=lms_link_for_about_page),
+                        a_link_end=HTML("</a>")
+                      )}</span>
+                  </li>
+                  % endif
                % endif

                <li class="field image" id="field-course-image">