Merge pull request #14009 from edx/alisan/TNL-5807-discussion-post-preview

add discussion thread post preview in Discussion tab thread list sidebar

common/static/common/js/discussion/views/discussion_thread_list_view.js

@@ -107,6 +107,7 @@
                 this.boardName = null;
                 this.current_search = '';
                 this.mode = 'all';
+                this.showThreadPreview = options.showThreadPreview;
                 this.searchAlertCollection = new Backbone.Collection([], {
                     model: Backbone.Model
                 });
@@ -316,14 +317,26 @@
                 }, error);
             };
 
+            DiscussionThreadListView.prototype.containsMarkup = function(threadBody) {
+                var imagePostSearchString = '![',
+                    mathJaxSearchString = /\$/g,
+                    containsImages = threadBody.indexOf(imagePostSearchString) !== -1,
+                    // mathJax has to have at least 2 dollar signs
+                    containsMathJax = (threadBody.match(mathJaxSearchString) || []).length > 1;
+                return containsImages || containsMathJax;
+            };
+
             DiscussionThreadListView.prototype.renderThread = function(thread) {
                 var threadCommentCount = thread.get('comments_count'),
                     threadUnreadCommentCount = thread.get('unread_comments_count'),
                     neverRead = !thread.get('read') && threadUnreadCommentCount === threadCommentCount,
+                    threadPreview = this.containsMarkup(thread.get('body')) ? '' : thread.get('body'),
                     context = _.extend(
                         {
                             neverRead: neverRead,
-                            threadUrl: thread.urlFor('retrieve')
+                            threadUrl: thread.urlFor('retrieve'),
+                            threadPreview: threadPreview,
+                            showThreadPreview: this.showThreadPreview
                         },
                         thread.toJSON()
                     );

common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js

@@ -83,10 +83,12 @@
         renderSingleThreadWithProps = function(props) {
             return makeView(new Discussion([new Thread(DiscussionViewSpecHelper.makeThreadWithProps(props))])).render();
         };
-        makeView = function(discussion) {
+        makeView = function(discussion, options) {
+            var opts = options || {};
             return new DiscussionThreadListView({
                 el: $('#fixture-element'),
                 collection: discussion,
+                showThreadPreview: opts.showThreadPreview || true,
                 courseSettings: new DiscussionCourseSettings({
                     is_cohorted: true
                 })
@@ -542,5 +544,40 @@
             });
         });
 
+        describe('thread preview body', function() {
+            it('should be shown when showThreadPreview is true', function() {
+                renderSingleThreadWithProps({
+                    thread_type: 'discussion'
+                });
+                expect($('.thread-preview-body').length).toEqual(1);
+            });
+
+            it('should not show image when showThreadPreview is true', function() {
+                renderSingleThreadWithProps({
+                    thread_type: 'discussion',
+                    body: '![customizedImageAltTitle].png'
+                });
+                expect($('.thread-preview-body').text()).toEqual('');
+            });
+
+            it('should not show MathJax when showThreadPreview is true', function() {
+                renderSingleThreadWithProps({
+                    thread_type: 'discussion',
+                    body: '$$x^2 + sqrt(y)$$'
+                });
+                expect($('.thread-preview-body').text()).toEqual('');
+            });
+
+            it('should not be shown when showThreadPreview is false', function() {
+                var view,
+                    discussion = new Discussion([]),
+                    options = {
+                        showThreadPreview: false
+                    };
+                view = makeView(discussion, options);
+                view.render();
+                expect(view.$el.find('.thread-preview-body').length).toEqual(0);
+            });
+        });
     });
 }).call(this);

common/static/common/templates/discussion/thread-list-item.underscore

@@ -21,6 +21,9 @@
       <span class="icon fa <%= icon_class %>" aria-hidden="true"></span>
     </div><div class="forum-nav-thread-wrapper-1">
       <span class="forum-nav-thread-title"><%- title %></span>
+      <% if (showThreadPreview){ %>
+        <div class="thread-preview-body"><%- threadPreview %></div>
+      <% } %>
       <% if(typeof(subscribed) === "undefined") { var subscribed = null; } %>
       <% if(pinned || subscribed || staff_authored || community_ta_authored) { %>
         <ul class="forum-nav-thread-labels">

lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js

@@ -32,6 +32,7 @@
 
             initialize: function(options) {
                 this.courseSettings = options.courseSettings;
+                this.showThreadPreview = true;
                 this.sidebar_padding = 10;
                 this.current_search = '';
                 this.mode = 'all';
@@ -45,7 +46,8 @@
                 this.discussionThreadListView = new DiscussionThreadListView({
                     collection: this.discussion,
                     el: this.$('.discussion-thread-list-container'),
-                    courseSettings: this.courseSettings
+                    courseSettings: this.courseSettings,
+                    showThreadPreview: this.showThreadPreview
                 }).render();
                 this.searchView = new DiscussionSearchView({
                     el: this.$('.forum-search')

lms/static/sass/discussion/elements/_navigation.scss

@@ -176,6 +176,15 @@
     .forum-nav-thread-labels {
         margin: 5px 0 0;
     }
+
+    .thread-preview-body {
+        margin-top: $baseline / 4;
+        color: $forum-color-response-count;
+        font-size: $forum-small-font-size;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 }
 
 .forum-nav-thread {
@@ -191,7 +200,7 @@
     .forum-nav-thread-link {
         @include border-left(3px solid transparent);
         display: flex;
-        padding: ($baseline/4) ($baseline/2);
+        padding: $baseline / 2;
         transition: none;
         align-items: center;
         justify-content: space-between;
@@ -231,6 +240,10 @@
             span.icon {
                 color: $forum-color-background;
             }
+
+            .thread-preview-body {
+                color: $forum-color-background;
+            }
         }
 
         .forum-nav-thread-unread-comments-count {
@@ -273,7 +286,8 @@
 
 .forum-nav-thread-wrapper-1 {
     @extend %forum-nav-thread-wrapper;
-    margin: 0 ($baseline/2);
+    margin: 0 ($baseline / 4);
+    width: 80%;
     flex-grow: 1;  // This column should consume all the available space
 }