Adding comments template on course page.

ECOM-6042

course_discovery/apps/publisher/tests/test_views.py

@@ -1545,6 +1545,41 @@ class CourseDetailViewTests(TestCase):
         response = self.client.get(self.detail_page_url)
         self.assertContains(response, 'course/{}'.format(lms_course_id))
 
+    def test_page_enable_waffle_switch_pilot(self):
+        """ Verify that user will not see approval widget when 'publisher_hide_features_for_pilot' is activated. """
+        self.user.groups.add(Group.objects.get(name=INTERNAL_USER_GROUP_NAME))
+        toggle_switch('publisher_hide_features_for_pilot', True)
+        response = self.client.get(self.detail_page_url)
+
+        self.assertContains(response, '<div id="approval-widget" class="hidden">')
+
+    def test_page_disable_waffle_switch_pilot(self):
+        """ Verify that user will see approval widget when 'publisher_hide_features_for_pilot' is deactivated. """
+        self.user.groups.add(Group.objects.get(name=INTERNAL_USER_GROUP_NAME))
+        toggle_switch('publisher_hide_features_for_pilot', False)
+        response = self.client.get(self.detail_page_url)
+
+        self.assertContains(response, '<div id="approval-widget" class="">')
+
+    def test_comments_with_enable_switch(self):
+        """ Verify that user will see the comments widget when
+        'publisher_comment_widget_feature' is enabled.
+        """
+        self.user.groups.add(Group.objects.get(name=INTERNAL_USER_GROUP_NAME))
+        toggle_switch('publisher_comment_widget_feature', True)
+        response = self.client.get(self.detail_page_url)
+
+        self.assertContains(response, '<div id="comments-widget" class="comment-container ">')
+
+    def test_comments_with_disable_switch(self):
+        """ Verify that user will not see the comments widget when
+        'publisher_comment_widget_feature' is disabled.
+        """
+        self.user.groups.add(Group.objects.get(name=INTERNAL_USER_GROUP_NAME))
+        toggle_switch('publisher_comment_widget_feature', False)
+        response = self.client.get(self.detail_page_url)
+        self.assertContains(response, '<div id="comments-widget" class="comment-container hidden">')
+
 
 class CourseEditViewTests(TestCase):
     """ Tests for the course edit view. """

course_discovery/apps/publisher/views.py

@@ -138,6 +138,8 @@ class CourseRunDetailView(mixins.LoginRequiredMixin, mixins.PublisherPermissionM
         course_run = CourseRunWrapper(self.get_object())
         context['object'] = course_run
         context['comment_object'] = course_run.course
+        context['post_back_url'] = reverse('publisher:publisher_course_run_detail', kwargs={'pk': course_run.id})
+
         context['can_edit'] = mixins.check_course_organization_permission(
             self.request.user, course_run.course, OrganizationExtension.EDIT_COURSE_RUN
         )
@@ -359,6 +361,10 @@ class CourseDetailView(mixins.LoginRequiredMixin, mixins.PublisherPermissionMixi
                 (None, self.object.title),
             ]
         )
+        context['comment_object'] = self.object
+        context['post_back_url'] = reverse('publisher:publisher_course_detail', kwargs={'pk': self.object.id})
+        context['publisher_hide_features_for_pilot'] = waffle.switch_is_active('publisher_hide_features_for_pilot')
+        context['publisher_comment_widget_feature'] = waffle.switch_is_active('publisher_comment_widget_feature')
 
         return context
 

course_discovery/apps/publisher_comments/forms.py

@@ -18,6 +18,10 @@ class CommentsForm(CommentForm):
         data['modified'] = self.cleaned_data['modified']
         return data
 
+    def __init__(self, *args, **kwargs):
+        super(CommentsForm, self).__init__(*args, **kwargs)
+        self.fields['comment'].widget.attrs['rows'] = 4
+
 
 class CommentEditForm(forms.ModelForm):
     """ Comment edit form. """

course_discovery/static/js/publisher/comments.js

@@ -21,8 +21,9 @@ $(document).on('click', '.comment-edit', function (e) {
     $(parentDt).prev('dd').attr('contenteditable', 'True').addClass('editable-comment');
     $(parentDt).prev('dd').after(editableControlsHtml);
     $('.editable-comment').data('oldComment', $('.edit-controls').prev().text());
-
+    $('.editable-comment').focus();
     $(parentDt).hide();
+
 });
 
 $(document).on('click', '.comment-cancel', function (e) {

course_discovery/static/sass/publisher/course_form.scss

@@ -19,17 +19,17 @@
 }
 
 .comments{
-  @include margin(0px, 0px, 0px, 0px);
-  margin: 5% auto;
+  margin: 3% auto;
+  font-size: 14px;
 
   .align-right {
     @include text-align(right);
-    margin: 10px auto;
+    margin: 3px auto;
   }
   .submitted-by {
     overflow: auto;
     @include text-align(right);
-    margin-bottom: 40px;
+    margin-bottom: 25px;
 
     span {
       @include float(left);
@@ -38,6 +38,9 @@
   }
 }
 
+.comment-container{
+  margin-top: 20px;
+}
 .add-comment {
   @include text-align(right);
   margin-top: 5px;
@@ -50,6 +53,7 @@
 }
 
 .editable-comment {
+  @include padding-left(3px);
   border: 2px solid #d3d3d3;
   padding-top: 2px;
   padding-bottom: 2px;

course_discovery/templates/comments/add_auth_comments.html

@@ -3,7 +3,7 @@
 
 {% if user.is_authenticated and comment_object %}
     <div>
-        <p><div class="heading">{% trans 'Comment:' %}</div></p>
+        <h5 class="hd-5 emphasized">{% trans 'Comment:' %}</h5>
         <div>
             {% get_comment_form for comment_object as form %}
             <form id="frm_comment" action="{% comment_form_target %}" method="POST">
@@ -13,7 +13,7 @@
                 {{ form.object_pk }}
                 {{ form.timestamp }}
                 {{ form.security_hash }}
-                <input type="hidden" name="next" value="{% url 'publisher:publisher_course_run_detail' object.id %}"/>
+                <input type="hidden" name="next" value="{{ post_back_url }}"/>
                 <div class="add-comment">
                     <input type="button" value="Add comment" id="id_submit" class="btn btn-brand btn-small btn-course-add" />
                 </div>

course_discovery/templates/comments/comments_list.html

@@ -17,6 +17,7 @@
                 <button class="align-right btn-neutral btn-small btn-comment comment-edit" data-url="{% url 'publisher_comments:api:comments' comment.id %}">Edit</button>
             {% endifequal %}
         </dt>
+        <hr>
       {% endfor %}
     </dl>
 </div>

course_discovery/templates/publisher/course_detail.html

@@ -112,8 +112,14 @@
         </div>
     </main>
 
-    <aside class="layout-col layout-col-a layout-col-a-custom">
-        {% include 'publisher/course_detail/_widgets.html' %}
+    <aside id="right-panel" class="layout-col layout-col-a layout-col-a-custom">
+        <div id="approval-widget" class="{% if publisher_hide_features_for_pilot %}hidden{% endif %}">
+            {% include 'publisher/course_detail/_widgets.html' %}
+        </div>
+        <div id="comments-widget" class="comment-container {% if not publisher_comment_widget_feature %}hidden{% endif %}">
+            {% include 'comments/add_auth_comments.html' %}
+            {% include 'comments/comments_list.html' %}
+        </div>
     </aside>
 </div>
 {% endblock %}
@@ -121,4 +127,6 @@
     <script src="{% static 'bower_components/google-diff-match-patch/diff_match_patch.js' %}"></script>
     <script src="{% static 'js/publisher/publisher.js' %}"></script>
     <script src="{% static 'js/publisher/comparing-objects.js' %}"></script>
+    <script src="{% static 'js/publisher/jquery-dateFormat.min.js' %}"></script>
+    <script src="{% static 'js/publisher/comments.js' %}"></script>
 {% endblock %}

course_discovery/templates/publisher/course_run_detail.html

@@ -9,8 +9,8 @@
 {% endblock title %}
 
 {% block page_content %}
-<div class="grid-manual">
-    <main class="col col-7">
+<div class="layout-1t2t layout-flush publisher-container course-detail">
+    <main class="layout-col layout-col-b layout-col-b-custom">
         <nav class="administration-nav">
             <div class="tab-container">
                 {% if can_view_all_tabs %}
@@ -66,7 +66,7 @@
         </div>
     </main>
 
-    <aside id="right-panel" class="col col-5">
+    <aside id="right-panel" class="layout-col layout-col-a layout-col-a-custom">
         <div id="approval-widget" class="{% if publisher_hide_features_for_pilot %}hidden{% endif %}">
           {% include 'publisher/course_run_detail/_approval_widget.html' %}
         </div>