Add editor view to show content element comments

REDMINE-21261

Author: tf

entry_types/scrolled/package/spec/editor/views/ContentElementCommentsView-spec.js

@@ -0,0 +1,87 @@
+import '@testing-library/jest-dom/extend-expect';
+import BackboneEvents from 'backbone-events-standalone';
+
+import {ContentElementCommentsView} from 'editor/views/ContentElementCommentsView';
+
+import {useFakeTranslations, renderBackboneView} from 'pageflow/testHelpers';
+import {useEditorGlobals} from 'support';
+import {act, waitFor} from '@testing-library/react';
+
+describe('ContentElementCommentsView', () => {
+  const {createEntry} = useEditorGlobals();
+
+  useFakeTranslations({
+    'pageflow_scrolled.review.add_comment_placeholder': 'Add a comment...',
+    'pageflow_scrolled.review.new_topic': 'New topic',
+    'pageflow_scrolled.review.send': 'Send'
+  });
+
+  it('displays threads from session state', () => {
+    const entry = createEntry({
+      contentElements: [{id: 1, permaId: 10, typeName: 'textBlock'}]
+    });
+    entry.reviewSession = fakeReviewSession({
+      currentUser: {id: 1},
+      commentThreads: [{
+        id: 1,
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        comments: [{id: 100, body: 'Looks good', creatorName: 'Alice'}]
+      }]
+    });
+
+    const view = new ContentElementCommentsView({
+      entry,
+      model: entry.contentElements.get(1),
+      editor: {}
+    });
+
+    const {getByText} = renderBackboneView(view);
+    view.onShow();
+
+    expect(getByText('Looks good')).toBeInTheDocument();
+  });
+
+  it('updates when session emits change:thread', async () => {
+    const entry = createEntry({
+      contentElements: [{id: 1, permaId: 10, typeName: 'textBlock'}]
+    });
+    entry.reviewSession = fakeReviewSession({
+      currentUser: {id: 1},
+      commentThreads: []
+    });
+
+    const view = new ContentElementCommentsView({
+      entry,
+      model: entry.contentElements.get(1),
+      editor: {}
+    });
+
+    const {getByText} = renderBackboneView(view);
+    act(() => view.onShow());
+
+    act(() => {
+      entry.reviewSession.trigger('change:thread', {
+        id: 1,
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        comments: [{id: 100, body: 'New comment', creatorName: 'Bob'}]
+      });
+    });
+
+    await waitFor(() => {
+      expect(getByText('New comment')).toBeInTheDocument();
+    });
+  });
+});
+
+function fakeReviewSession(state = null) {
+  const session = {
+    state,
+    createThread: jest.fn().mockResolvedValue(),
+    createComment: jest.fn().mockResolvedValue()
+  };
+
+  Object.assign(session, BackboneEvents);
+  return session;
+}

entry_types/scrolled/package/src/editor/controllers/SideBarController.js

@@ -1,12 +1,14 @@
 import Marionette from 'backbone.marionette';
 
 import {editor} from 'pageflow-scrolled/editor';
+import {BackButtonDecoratorView} from 'pageflow/editor';
 
 import {EditChapterView} from '../views/EditChapterView';
 import {EditSectionView} from '../views/EditSectionView';
 import {EditSectionTransitionView} from '../views/EditSectionTransitionView';
 import {EditSectionPaddingsView} from '../views/EditSectionPaddingsView';
 import {EditContentElementView} from '../views/EditContentElementView';
+import {ContentElementCommentsView} from '../views/ContentElementCommentsView';
 
 export const SideBarController = Marionette.Controller.extend({
   initialize: function(options) {
@@ -47,6 +49,16 @@ export const SideBarController = Marionette.Controller.extend({
     }));
   },
 
+  contentElementComments: function(id) {
+    this.region.show(new BackButtonDecoratorView({
+      view: new ContentElementCommentsView({
+        entry: this.entry,
+        model: this.entry.contentElements.get(id),
+        editor
+      })
+    }));
+  },
+
   contentElement: function(id, tab) {
     this.region.show(new EditContentElementView({
       entry: this.entry,

entry_types/scrolled/package/src/editor/routers/SideBarRouter.js

@@ -7,6 +7,7 @@ export const SideBarRouter = Marionette.AppRouter.extend({
     'scrolled/sections/:id/paddings?position=:position': 'sectionPaddings',
     'scrolled/sections/:id/paddings': 'sectionPaddings',
     'scrolled/sections/:id': 'section',
+    'scrolled/content_elements/:id/comments': 'contentElementComments',
     'scrolled/content_elements/:id': 'contentElement'
   }
 });

entry_types/scrolled/package/src/editor/views/ContentElementCommentsView.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Marionette from 'backbone.marionette';
+
+import {ReviewStateProvider, ReviewMessageHandler, ThreadList} from 'pageflow-scrolled/review';
+
+import styles from './ContentElementCommentsView.module.css';
+
+export const ContentElementCommentsView = Marionette.ItemView.extend({
+  template: () => `<div class="${styles.container}"></div>`,
+
+  onShow() {
+    const session = this.options.entry.reviewSession;
+
+    this.reviewMessageHandler = ReviewMessageHandler.create({
+      session,
+      targetWindow: window
+    });
+
+    ReactDOM.render(
+      <ReviewStateProvider initialState={session.state}>
+        <ThreadList subjectType="ContentElement"
+                    subjectId={this.model.get('permaId')} />
+      </ReviewStateProvider>,
+      this.$el.find(`.${styles.container}`)[0]
+    );
+  },
+
+  onClose() {
+    this.reviewMessageHandler.dispose();
+    ReactDOM.unmountComponentAtNode(this.$el.find(`.${styles.container}`)[0]);
+  }
+});

entry_types/scrolled/package/src/editor/views/ContentElementCommentsView.module.css

@@ -0,0 +1,2 @@
+.container {
+}