Integrate commenting into the editor

entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb

@@ -50,7 +50,8 @@ def scrolled_editor_packs(entry)
     end
 
     def scrolled_editor_stylesheet_packs(entry)
-      Pageflow.config_for(entry).additional_editor_packs.stylesheet_paths(entry) +
+      ['pageflow-scrolled-editor'] +
+        Pageflow.config_for(entry).additional_editor_packs.stylesheet_paths(entry) +
         Pageflow.config_for(entry).additional_frontend_packs.paths(entry)
     end
 

entry_types/scrolled/package/.gitignore

@@ -1,6 +1,7 @@
 /node_modules
 /contentElements
 /editor.js
+/editor.css
 /frontend
 /frontend-server.js
 /contentElements-editor.js

entry_types/scrolled/package/config/webpack.js

@@ -80,7 +80,10 @@ module.exports = {
       ]
     },
     'pageflow-scrolled-frontend-inlineEditing': {
-      import: ['pageflow-scrolled/frontend/inlineEditing.css']
+      import: [
+        'pageflow-scrolled/frontend/inlineEditing.css',
+        'pageflow-scrolled/review.css'
+      ]
     },
     'pageflow-scrolled-frontend-commenting': {
       import: [

entry_types/scrolled/package/jest.config.js

@@ -22,6 +22,8 @@ module.exports = {
 
   moduleNameMapper: {
     '^pageflow-scrolled/contentElements-frontend$': '<rootDir>/src/contentElements/frontend',
+    "^pageflow-scrolled/editor\\.css$": "<rootDir>/spec/support/jest/editor-css-stub",
+    "^pageflow-scrolled/review\\.css$": "<rootDir>/spec/support/jest/review-css-stub",
     "^pageflow-scrolled/([^/]*)$": "<rootDir>/src/$1",
 
     // Make specs run even if ignored json file is not present

entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js

@@ -1,5 +1,6 @@
 import 'editor/config';
 import {editor} from 'pageflow-scrolled/editor';
+import {features} from 'pageflow/frontend';
 import {ScrolledEntry} from 'editor/models/ScrolledEntry';
 import {PreviewMessageController} from 'editor/controllers/PreviewMessageController';
 import {InsertContentElementDialogView} from 'editor/views/InsertContentElementDialogView';
@@ -47,6 +48,31 @@ describe('PreviewMessageController', () => {
     })).resolves.toMatchObject({type: 'ACK'});
   });
 
+  it('sends REVIEW_STATE_RESET to iframe after READY when commenting enabled', () => {
+    features.enable('frontend', ['commenting']);
+    jest.spyOn(window, 'fetch').mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({currentUser: {id: 1}, commentThreads: []})
+    });
+
+    const entry = factories.entry(ScrolledEntry, {}, {entryTypeSeed: normalizeSeed()});
+    const iframeWindow = createIframeWindow();
+
+    controller = new PreviewMessageController({entry, iframeWindow});
+
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'REVIEW_STATE_RESET') {
+          resolve(event.data);
+        }
+      });
+      window.postMessage({type: 'READY'}, '*');
+    })).resolves.toMatchObject({
+      type: 'REVIEW_STATE_RESET',
+      payload: {currentUser: {id: 1}, commentThreads: []}
+    });
+  });
+
   it('sets current section index in model on CHANGE_SECTION message', () => {
     const entry = factories.entry(ScrolledEntry, {}, {entryTypeSeed: normalizeSeed()});
     const iframeWindow = createIframeWindow();
@@ -469,6 +495,22 @@ describe('PreviewMessageController', () => {
     })).resolves.toBe('/');
   });
 
+  it('navigates to comments route on SELECTED message for contentElementComments', () => {
+    const editor = factories.editorApi();
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        contentElements: [{id: 1}]
+      })
+    });
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow, editor});
+
+    return expect(new Promise(resolve => {
+      editor.on('navigate', resolve);
+      window.postMessage({type: 'SELECTED', payload: {id: 1, type: 'contentElementComments'}}, '*');
+    })).resolves.toBe('/scrolled/content_elements/1/comments');
+  });
+
   it('updates configuration on UPDATE_CONTENT_ELEMENT message', () => {
     const entry = factories.entry(ScrolledEntry, {}, {
       entryTypeSeed: normalizeSeed({

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/spec/frontend/features/contentElementSelection-spec.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import {frontend} from 'frontend';
+import {features} from 'pageflow/frontend';
 
 import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects';
 import {fakeParentWindow} from 'support';
 import {changeLocationHash} from 'support/changeLocationHash';
 import '@testing-library/jest-dom/extend-expect'
-import {act} from '@testing-library/react';
+import {act, fireEvent, waitFor} from '@testing-library/react';
 
 describe('content element selection', () => {
   useInlineEditingPageObjects();
@@ -99,4 +100,48 @@ describe('content element selection', () => {
 
     expect(mainContentElement.isSelected()).toBe(false);
   });
+
+  it('marks selection rect as selected when comment badge is clicked', async () => {
+    features.enable('frontend', ['commenting']);
+
+    const {getByRole, getContentElementByTestId} = renderEntry({
+      seed: {
+        contentElements: [{
+          id: 1,
+          permaId: 10,
+          typeName: 'withTestId',
+          configuration: {testId: 5}
+        }]
+      }
+    });
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', {
+        data: {
+          type: 'REVIEW_STATE_RESET',
+          payload: {
+            currentUser: {id: 1},
+            commentThreads: [{
+              id: 1,
+              subjectType: 'ContentElement',
+              subjectId: 10,
+              comments: [{id: 100, body: 'Review this'}]
+            }]
+          }
+        },
+        origin: window.location.origin
+      }));
+    });
+
+    await waitFor(() => {
+      expect(getByRole('status')).toBeInTheDocument();
+    });
+
+    const contentElement = getContentElementByTestId(5);
+    expect(contentElement.isSelected()).toBe(false);
+
+    fireEvent.click(getByRole('status'));
+
+    expect(contentElement.isSelected()).toBe(true);
+  });
 });

entry_types/scrolled/package/spec/frontend/features/editorCommentBadges-spec.js

@@ -0,0 +1,65 @@
+import '@testing-library/jest-dom/extend-expect';
+import {act, waitFor} from '@testing-library/react';
+import {features} from 'pageflow/frontend';
+
+import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects';
+import {fakeParentWindow} from 'support';
+
+describe('editor comment badges', () => {
+  useInlineEditingPageObjects();
+
+  beforeEach(() => {
+    fakeParentWindow();
+    window.parent.postMessage = jest.fn();
+    features.enable('frontend', ['commenting']);
+  });
+
+  it('does not display comment icon when element is not selected', () => {
+    const {queryByRole} = renderEntry({
+      seed: {
+        contentElements: [{
+          typeName: 'withTestId',
+          permaId: 10,
+          configuration: {testId: 5}
+        }]
+      }
+    });
+
+    expect(queryByRole('status')).not.toBeInTheDocument();
+  });
+
+  it('displays dot badge when threads exist and element is not selected', async () => {
+    const {getByRole} = renderEntry({
+      seed: {
+        contentElements: [{
+          typeName: 'withTestId',
+          permaId: 10,
+          configuration: {testId: 5}
+        }]
+      }
+    });
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', {
+        data: {
+          type: 'REVIEW_STATE_RESET',
+          payload: {
+            currentUser: {id: 1},
+            commentThreads: [{
+              id: 1,
+              subjectType: 'ContentElement',
+              subjectId: 10,
+              comments: [{id: 100, body: 'Review this'}]
+            }]
+          }
+        },
+        origin: window.location.origin
+      }));
+    });
+
+    await waitFor(() => {
+      expect(getByRole('status')).toBeInTheDocument();
+      expect(getByRole('status')).not.toHaveTextContent(/\d/);
+    });
+  });
+});

entry_types/scrolled/package/spec/frontend/features/selectedMessage-spec.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import {frontend, WidgetSelectionRect} from 'frontend';
+import {features} from 'pageflow/frontend';
 
 import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects';
 import {fakeParentWindow} from 'support';
-import {fireEvent} from '@testing-library/react';
+import {act, fireEvent, waitFor} from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect'
 
 describe('SELECTED message', () => {
@@ -185,4 +186,43 @@ describe('SELECTED message', () => {
       payload: {id: 'header', type: 'widget'}
     }, expect.anything());
   });
+
+  it('is posted with type contentElementComments when comment badge is clicked', async () => {
+    features.enable('frontend', ['commenting']);
+
+    const {getByRole} = renderEntry({
+      seed: {
+        contentElements: [{id: 1, permaId: 10, typeName: 'withTestId', configuration: {testId: 5}}]
+      }
+    });
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', {
+        data: {
+          type: 'REVIEW_STATE_RESET',
+          payload: {
+            currentUser: {id: 1},
+            commentThreads: [{
+              id: 1,
+              subjectType: 'ContentElement',
+              subjectId: 10,
+              comments: [{id: 100, body: 'Review this'}]
+            }]
+          }
+        },
+        origin: window.location.origin
+      }));
+    });
+
+    await waitFor(() => {
+      expect(getByRole('status')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByRole('status'));
+
+    expect(window.parent.postMessage).toHaveBeenCalledWith({
+      type: 'SELECTED',
+      payload: {id: 1, type: 'contentElementComments'}
+    }, expect.anything());
+  });
 });