Allowing writing of reviews on reviews page.

LEARNER-1628

This allows enrolled users to write reviews on the reviews page that
can be accessed through the course tools sidebar. A button in the top
corner of the page toggles the widget that is configured with a
setting in the common.py file. The reviews tool is Course Talk.

lms/envs/common.py

@@ -398,6 +398,10 @@ FEATURES = {
 COURSE_REVIEWS_TOOL_PROVIDER_FRAGMENT_NAME = 'coursetalk-reviews-fragment.html'
 COURSE_REVIEWS_TOOL_PROVIDER_PLATFORM_KEY = 'edx'
 
+# CDN links to CourseTalk scripts to load read and write widgets
+COURSE_TALK_READ_ONLY_SOURCE = '//d3q6qq2zt8nhwv.cloudfront.net/s/js/widgets/coursetalk-read-reviews.js'
+COURSE_TALK_WRITE_ONLY_SOURCE = '//d3q6qq2zt8nhwv.cloudfront.net/s/js/widgets/coursetalk-write-reviews.js'
+
 # Ignore static asset files on import which match this pattern
 ASSET_IGNORE_REGEX = r"(^\._.*$)|(^\.DS_Store$)|(^.*~$)"
 

lms/static/sass/features/_course-experience.scss

@@ -200,6 +200,21 @@
 }
 
 // Course Reviews Page
-.course-reviews-tool {
-  margin: ($baseline * 2) ($baseline * 3);
+.course-reviews {
+  .page-header.has-secondary > .page-header-main  {
+    display: block;
+    position: relative;
+
+    .toggle-read-write-reviews {
+      position: absolute;
+      top: $baseline * (-1/2);
+      right: $baseline / 2;
+      cursor: pointer;
+    }
+  }
+
+  .course-reviews-tool {
+    margin: ($baseline * 2) ($baseline * 3);
+    position: relative;
+  }
 }

openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js

+/**
+  Enable users to switch between viewing and writing CourseTalk reviews.
+ */
+
+export class CourseTalkReviews {  // eslint-disable-line import/prefer-default-export
+  constructor(options) {
+    const $courseTalkToggleReadWriteReviews = $(options.toggleButton);
+
+    const toReadBtnText = 'View Reviews';
+    const toWriteBtnText = 'Write a Review';
+
+    // Initialize page to the read reviews view
+    self.currentSrc = options.readSrc;
+    $.getScript(options.readSrc);
+    $courseTalkToggleReadWriteReviews.text(toWriteBtnText);
+
+    $courseTalkToggleReadWriteReviews.on('click', () => {
+      // Cache js file for future button clicks
+      $.ajaxSetup({ cache: true });
+
+      // Toggle the new coursetalk script object
+      const switchToReadView = self.currentSrc === options.writeSrc;
+      self.currentSrc = switchToReadView ? options.readSrc : options.writeSrc;
+      $.getScript(self.currentSrc);
+
+      // Toggle button text on switch to the other view
+      const newText = switchToReadView ? toWriteBtnText : toReadBtnText;
+      $courseTalkToggleReadWriteReviews.text(newText);
+    });
+  }
+}

openedx/features/course_experience/static/course_experience/js/WelcomeMessage.js

@@ -3,11 +3,11 @@ import 'jquery.cookie';
 
 export class WelcomeMessage {  // eslint-disable-line import/prefer-default-export
 
-  constructor(dismissUrl) {
+  constructor(options) {
     $('.dismiss-message button').click(() => {
       $.ajax({
         type: 'POST',
-        url: dismissUrl,
+        url: options.dismissUrl,
         headers: {
           'X-CSRFToken': $.cookie('csrftoken'),
         },

openedx/features/course_experience/static/course_experience/js/spec/WelcomeMessage_spec.js

@@ -13,7 +13,7 @@ describe('Welcome Message factory', () => {
 
     beforeEach(() => {
       loadFixtures('course_experience/fixtures/welcome-message-fragment.html');
-      new WelcomeMessage(endpointUrl);  // eslint-disable-line no-new
+      new WelcomeMessage({ dismissUrl: endpointUrl });  // eslint-disable-line no-new
     });
 
     it('When button click is made, ajax call is made and message is hidden.', () => {

openedx/features/course_experience/templates/course_experience/course-reviews-fragment.html

@@ -27,11 +27,14 @@ from openedx.features.course_experience import course_home_page_title
                     </div>
                 </div>
             </nav>
+            % if is_enrolled:
+                <div class="btn toggle-read-write-reviews"></div>
+            % endif
         </div>
     </header>
     <div class="course-reviews-tool">
-        % if course_reviews_provider_fragment:
-            ${HTML(course_reviews_provider_fragment.body_html())}
+        % if course_reviews_fragment:
+            ${HTML(course_reviews_fragment.body_html())}
         % endif
     </div>
 </div>

openedx/features/course_experience/templates/course_experience/course_reviews_modules/coursetalk-reviews-fragment.html

@@ -2,9 +2,11 @@
 
 <%page expression_filter="h"/>
 
-<%namespace name='static' file='../static_content.html'/>
+<%namespace name='static' file='../../static_content.html'/>
 
 <%!
+from django.conf import settings
+from openedx.core.djangolib.js_utils import js_escaped_string
 from openedx.features.course_experience import SHOW_REVIEWS_TOOL_FLAG
 %>
 
@@ -13,6 +15,12 @@ from openedx.features.course_experience import SHOW_REVIEWS_TOOL_FLAG
         ## Coursetalk Widget
         <div id="ct-custom-read-review-widget" data-provider="${platform_key}" data-course="${course.id}"></div>
     </div>
-
-    <script src="//d3q6qq2zt8nhwv.cloudfront.net/s/js/widgets/coursetalk-read-reviews.js"></script>
 % endif
+
+<%static:webpack entry="CourseTalkReviews">
+    new CourseTalkReviews({
+        toggleButton: '.toggle-read-write-reviews',
+        readSrc: "${settings.COURSE_TALK_READ_ONLY_SOURCE | n, js_escaped_string}",
+        writeSrc: "${settings.COURSE_TALK_WRITE_ONLY_SOURCE | n, js_escaped_string}"
+    });
+</%static:webpack>

openedx/features/course_experience/templates/course_experience/welcome-message-fragment.html

@@ -4,8 +4,8 @@
 <%namespace name='static' file='../static_content.html'/>
 
 <%!
-from openedx.core.djangolib.js_utils import js_escaped_string
 from django.utils.translation import ugettext as _
+from openedx.core.djangolib.js_utils import js_escaped_string
 from openedx.core.djangolib.markup import HTML
 %>
 
@@ -20,5 +20,7 @@ from openedx.core.djangolib.markup import HTML
 </%block>
 
 <%static:webpack entry="WelcomeMessage">
-    new WelcomeMessage("${dismiss_url | n, js_escaped_string}");
+    new WelcomeMessage({
+        dismissUrl: "${dismiss_url | n, js_escaped_string}",
+    });
 </%static:webpack>

openedx/features/course_experience/views/course_reviews.py

@@ -11,6 +11,7 @@ from opaque_keys.edx.keys import CourseKey
 from web_fragments.fragment import Fragment
 
 from courseware.courses import get_course_with_access
+from student.models import CourseEnrollment
 from lms.djangoapps.courseware.views.views import CourseTabView
 from openedx.core.djangoapps.plugin_api.views import EdxFragmentView
 from openedx.features.course_experience import default_course_url_name
@@ -45,12 +46,14 @@ class CourseReviewsFragmentView(EdxFragmentView):
 
         """
         course_key = CourseKey.from_string(course_id)
-        course = get_course_with_access(request.user, 'load', course_key, check_if_enrolled=True)
+        course = get_course_with_access(request.user, 'load', course_key, check_if_enrolled=False)
         course_url_name = default_course_url_name(course.id)
         course_url = reverse(course_url_name, kwargs={'course_id': unicode(course.id)})
 
+        is_enrolled = CourseEnrollment.is_enrolled(request.user, course.id)
+
         # Create the fragment
-        course_reviews_provider_fragment = CourseReviewsModuleFragmentView().render_to_fragment(
+        course_reviews_fragment = CourseReviewsModuleFragmentView().render_to_fragment(
             request,
             course=course,
             **kwargs
@@ -59,7 +62,8 @@ class CourseReviewsFragmentView(EdxFragmentView):
         context = {
             'course': course,
             'course_url': course_url,
-            'course_reviews_provider_fragment': course_reviews_provider_fragment
+            'course_reviews_fragment': course_reviews_fragment,
+            'is_enrolled': is_enrolled,
         }
 
         html = render_to_string('course_experience/course-reviews-fragment.html', context)

webpack.config.js

@@ -20,6 +20,7 @@ var wpconfig = {
     entry: {
         CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js',
         CourseSock: './openedx/features/course_experience/static/course_experience/js/CourseSock.js',
+        CourseTalkReviews: './openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js',
         WelcomeMessage: './openedx/features/course_experience/static/course_experience/js/WelcomeMessage.js',
         Import: './cms/static/js/features/import/factories/import.js'
     },