Add new DiscussionInlineView which uses DiscussionThreadListView

common/lib/xmodule/xmodule/js/src/discussion/display.coffee

 class @InlineDiscussion extends XModule.Descriptor
   constructor: (element) ->
     @el = $(element).find('.discussion-module')
-    @view = new DiscussionModuleView(el: @el)
+    @view = new DiscussionInlineView(el: @el)

common/static/common/js/discussion/views/discussion_inline_view.js

+/* globals
+    _, Backbone, Content, Discussion, DiscussionUtil, DiscussionUser, DiscussionCourseSettings,
+    DiscussionThreadListView, NewPostView
+*/
+
+(function() {
+    'use strict';
+
+    this.DiscussionInlineView = Backbone.View.extend({
+        events: {
+            'click .discussion-show': 'toggleDiscussion',
+            'keydown .discussion-show': function(event) {
+                return DiscussionUtil.activateOnSpace(event, this.toggleDiscussion);
+            },
+            'click .new-post-btn': 'toggleNewPost',
+            'keydown .new-post-btn': function(event) {
+                return DiscussionUtil.activateOnSpace(event, this.toggleNewPost);
+            }
+        },
+
+        initialize: function(options) {
+            this.$el = options.el;
+            this.toggleDiscussionBtn = this.$('.discussion-show');
+            this.newPostForm = this.$el.find('.new-post-article');
+            this.listenTo(this.newPostView, 'newPost:cancel', this.hideNewPost);
+        },
+
+        loadDiscussions: function($elem, error) {
+            var discussionId = this.$el.data('discussion-id'),
+                url = DiscussionUtil.urlFor('retrieve_discussion', discussionId) + ('?page=' + this.page),
+                self = this;
+
+            DiscussionUtil.safeAjax({
+                $elem: this.$el,
+                $loading: this.$el,
+                takeFocus: true,
+                url: url,
+                type: 'GET',
+                dataType: 'json',
+                success: function(response, textStatus) {
+                    self.renderDiscussion(self.$el, response, textStatus, discussionId);
+                },
+                error: error
+            });
+        },
+
+        renderDiscussion: function($elem, response, textStatus, discussionId) {
+            var $discussion,
+                user = new DiscussionUser(response.user_info),
+                self = this;
+
+            $elem.focus();
+
+            window.user = user;
+            DiscussionUtil.setUser(user);
+            Content.loadContentInfos(response.annotated_content_info);
+            DiscussionUtil.loadRoles(response.roles);
+
+            this.course_settings = new DiscussionCourseSettings(response.course_settings);
+
+            this.discussion = new Discussion();
+            this.discussion.reset(response.discussion_data, {
+                silent: false
+            });
+
+            $discussion = _.template($('#inline-discussion-template').html())({
+                threads: response.discussion_data,
+                read_only: this.readOnly,
+                discussionId: discussionId
+            });
+
+            if (this.$('section.discussion').length) {
+                this.$('section.discussion').replaceWith($discussion);
+            } else {
+                this.$el.append($discussion);
+            }
+
+            this.threadListView = new DiscussionThreadListView({
+                el: this.$('section.threads'),
+                collection: self.discussion,
+                courseSettings: self.course_settings
+            });
+
+            this.threadListView.render();
+
+            DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info);
+
+            this.newPostForm = this.$el.find('.new-post-article');
+
+            this.newPostView = new NewPostView({
+                el: this.newPostForm,
+                collection: this.discussion,
+                course_settings: this.course_settings,
+                topicId: discussionId,
+                is_commentable_cohorted: response.is_commentable_cohorted
+            });
+
+            this.newPostView.render();
+
+            this.listenTo(this.newPostView, 'newPost:cancel', this.hideNewPost);
+            this.discussion.on('add', this.addThread);
+
+            this.retrieved = true;
+            this.showed = true;
+
+            if (this.isWaitingOnNewPost) {
+                this.newPostForm.show().focus();
+            }
+        },
+
+        toggleDiscussion: function() {
+            var self = this;
+
+            if (this.showed) {
+                this.hideDiscussion();
+            } else {
+                this.toggleDiscussionBtn.addClass('shown');
+                this.toggleDiscussionBtn.find('.button-text').html(gettext('Hide Discussion'));
+                if (this.retrieved) {
+                    this.$('section.discussion').slideDown();
+                    this.showed = true;
+                } else {
+                    this.loadDiscussions(this.$el, function() {
+                        self.hideDiscussion();
+                        DiscussionUtil.discussionAlert(
+                            gettext('Sorry'),
+                            gettext('We had some trouble loading the discussion. Please try again.')
+                        );
+                    });
+                }
+            }
+        },
+
+        hideDiscussion: function() {
+            this.$('section.discussion').slideUp();
+            this.toggleDiscussionBtn.removeClass('shown');
+            this.toggleDiscussionBtn.find('.button-text').html(gettext('Show Discussion'));
+            this.showed = false;
+        },
+
+        toggleNewPost: function(event) {
+            event.preventDefault();
+            if (!this.newPostForm) {
+                this.toggleDiscussion();
+                this.isWaitingOnNewPost = true;
+                return;
+            }
+            if (this.showed) {
+                this.newPostForm.slideDown(300);
+            } else {
+                this.newPostForm.show().focus();
+            }
+            this.toggleDiscussionBtn.addClass('shown');
+            this.toggleDiscussionBtn.find('.button-text').html(gettext('Hide Discussion'));
+            this.$('section.discussion').slideDown();
+            this.showed = true;
+        },
+
+        hideNewPost: function() {
+            return this.newPostForm.slideUp(300);
+        }
+    });
+}).call(window);

common/static/common/templates/discussion/inline-discussion.underscore

@@ -6,12 +6,5 @@
     <article class="new-post-article"></article>
 
     <section class="threads">
-        <% _.each(threads, function(thread) { %>
-            <article class="discussion-thread" id="thread_<%= thread.id %>">
-            </article>
-        <% }); %>
-    </section>
-
-    <section class="discussion-pagination">
     </section>
 </section>

lms/djangoapps/teams/static/teams/js/views/team_discussion.js

@@ -3,21 +3,18 @@
  */
 (function(define) {
     'use strict';
-    define(['backbone', 'underscore', 'gettext', 'common/js/discussion/discussion_module_view'],
-        function(Backbone, _, gettext, DiscussionModuleView) {
+    define(['backbone', 'underscore', 'gettext', 'common/js/discussion/views/discussion_inline_view'],
+        function(Backbone, _, gettext, DiscussionInlineView) {
             var TeamDiscussionView = Backbone.View.extend({
                 initialize: function() {
                     window.$$course_id = this.$el.data('course-id');
                 },
 
                 render: function() {
-                    var discussionModuleView = new DiscussionModuleView({
-                        el: this.$el,
-                        readOnly: this.$el.data('read-only') === true,
-                        context: 'standalone'
+                    var discussionInlineView = new DiscussionInlineView({
+                        el: this.$el
                     });
-                    discussionModuleView.render();
-                    discussionModuleView.loadPage(this.$el);
+                    discussionInlineView.render();
                     return this;
                 }
             });

lms/static/lms/js/build.js

@@ -79,7 +79,7 @@
             'logger': 'empty:',
             'utility': 'empty:',
             'URI': 'empty:',
-            'common/js/discussion/discussion_module_view': 'empty:',
+            'common/js/discussion/views/discussion_inline_view': 'empty:',
             'modernizr': 'empty',
 
             // Don't bundle UI Toolkit helpers as they are loaded into the "edx" namespace

lms/static/lms/js/spec/main.js

@@ -642,7 +642,7 @@
                 ],
                 exports: 'ThreadResponseView'
             },
-            'common/js/discussion/discussion_module_view': {
+            'common/js/discussion/views/discussion_inline_view': {
                 deps: [
                     'jquery',
                     'underscore',
@@ -666,7 +666,7 @@
                     'common/js/discussion/views/thread_response_show_view',
                     'common/js/discussion/views/thread_response_view'
                 ],
-                exports: 'DiscussionModuleView'
+                exports: 'DiscussionInlineView'
             },
             'common/js/spec_helpers/discussion_spec_helper': {
                 deps: [

lms/static/sass/discussion/_discussion.scss

@@ -324,12 +324,17 @@ body.discussion {
   .add_post_btn_container {
     @include text-align(right);
     position: relative;
-    top: -45px;
+    top: -25px;
   }
 
   .discussion {
     &.inline-discussion {
-      padding-top: $baseline * 3;
+      padding-top: $baseline * 1.5;
+
+      section.threads {
+        border: 1px solid $forum-color-border;
+        border-radius: $forum-border-radius;
+      }
     }
   }
 

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

@@ -193,6 +193,12 @@
     }
 }
 
+// Overrides underspecific style from courseware css:
+// https://github.com/edx/edx-platform/blob/master/lms/static/sass/course/courseware/_courseware.scss#L402
+.course-wrapper .course-content .forum-nav-thread-list li {
+    margin: 0;
+}
+
 .forum-nav-thread {
     border-bottom: 1px solid $forum-color-border;
     background-color: $forum-color-background;

lms/templates/discussion/_discussion_inline.html

 <%page expression_filter="h"/>
 
 <%include file="_underscore_templates.html" />
+<%include file="_thread_list_template.html" />
 
 <%!
 from django.utils.translation import ugettext as _
@@ -21,13 +22,10 @@ from openedx.core.djangolib.js_utils import js_escaped_string
     </button>
 </div>
 <script type="text/javascript">
-/* global DiscussionModuleView */
-/* exported DiscussionInlineBlock, $$course_id */
 var $$course_id = "${course_id | n, js_escaped_string}";
 
 function DiscussionInlineBlock(runtime, element) {
     'use strict';
-    var el = $(element).find('.discussion-module');
-    new DiscussionModuleView({ el: el });
+    new DiscussionInlineView({ el: $(element).find('.discussion-module') });
 }
 </script>

lms/templates/discussion/_js_body_dependencies.html

@@ -17,7 +17,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
 discussion_classes = [
     ['Discussion', 'common/js/discussion/discussion'],
     ['Content', 'common/js/discussion/content'],
-    ['DiscussionModuleView', 'common/js/discussion/discussion_module_view'],
+    ['DiscussionInlineView', 'common/js/discussion/views/discussion_inline_view'],
     ['DiscussionThreadView', 'common/js/discussion/views/discussion_thread_view'],
     ['DiscussionThreadListView', 'common/js/discussion/views/discussion_thread_list_view'],
     ['DiscussionThreadProfileView', 'common/js/discussion/views/discussion_thread_profile_view'],

lms/templates/discussion/_thread_list_template.html

 <%page expression_filter="h"/>
 <%! from django.utils.translation import ugettext as _ %>
 <script type="text/template" id="thread-list-template">
-    <div class="forum-nav-thread-list-wrapper" id="sort-filter-wrapper" tabindex="-1" style="display:none">
+    <div class="forum-nav-thread-list-wrapper" id="sort-filter-wrapper" tabindex="-1">
         <div class="forum-nav-refine-bar">
             <label class="forum-nav-filter-main">
                 ## Translators: This labels a filter menu in forum navigation
@@ -26,7 +26,8 @@
                 <span class="sr">${_("Cohort:")}</span>
                 <select class="forum-nav-filter-cohort-control">
                     <option value="">${_("in all cohorts")}</option>
-                        %for c in cohorts:
+                        ## cohorts is not iterable sometimes because inline discussions xmodule doesn't pass it
+                        %for c in (cohorts or []):
                             <option value="${c['id']}">${c['name']}</option>
                         %endfor
                 </select>