Support rendering commenting badges on elements in preview

app/assets/stylesheets/pageflow/ui/properties.scss

@@ -57,6 +57,10 @@
   --ui-box-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --ui-box-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
+  --ui-accent-color: #ffd24d;
+  --ui-accent-color-glow: #ffd24d3d;
+  --ui-on-accent-color: #795f0f;
+
   --ui-on-button-color: var(--ui-primary-color);
   --ui-button-border-color: var(--ui-primary-color-light);
   --ui-button-hover-border-color: var(--ui-primary-color);

app/controllers/pageflow/review/comment_threads_controller.rb

@@ -0,0 +1,16 @@
+module Pageflow
+  module Review
+    # @api private
+    class CommentThreadsController < Pageflow::ApplicationController
+      respond_to :json
+      before_action :authenticate_user!
+
+      def index
+        entry = DraftEntry.find(params[:entry_id])
+        authorize!(:read, entry.to_model)
+
+        @comment_threads = entry.comment_threads.includes(comments: :creator)
+      end
+    end
+  end
+end

app/models/pageflow/comment.rb

@@ -0,0 +1,15 @@
+module Pageflow
+  # @api private
+  class Comment < ApplicationRecord
+    include NestedRevisionComponent
+
+    belongs_to :comment_thread
+    belongs_to :creator, class_name: 'User'
+
+    validates :body, presence: true
+
+    def entry_for_auto_generated_perma_id
+      comment_thread.revision.entry
+    end
+  end
+end

app/models/pageflow/comment_thread.rb

@@ -0,0 +1,13 @@
+module Pageflow
+  # @api private
+  class CommentThread < ApplicationRecord
+    include RevisionComponent
+
+    belongs_to :creator, class_name: 'User'
+    has_many :comments, dependent: :destroy
+
+    nested_revision_components :comments
+
+    validates :subject_type, :subject_id, presence: true
+  end
+end

app/models/pageflow/entry_at_revision.rb

@@ -38,6 +38,7 @@ def initialize(entry, revision, theme: nil)
              :author, :publisher, :keywords,
              :published_at,
              :noindex?,
+             :comment_threads,
              :configuration,
              :structured_data_type_name,
              to: :revision)

app/models/pageflow/revision.rb

@@ -27,6 +27,8 @@ class Revision < ApplicationRecord # rubocop:todo Style/Documentation
     has_many :chapters, -> { order(CHAPTER_ORDER) }, through: :storylines
     has_many :pages, -> { reorder(PAGE_ORDER) }, through: :storylines
 
+    has_many :comment_threads, dependent: :destroy
+
     has_many :file_usages, dependent: :destroy
 
     has_many :image_files, -> { extending WithFileUsageExtension },

app/views/pageflow/review/comment_threads/_comment_thread.json.jbuilder

@@ -0,0 +1,15 @@
+json.key_format!(camelize: :lower)
+
+json.call(comment_thread,
+          :id,
+          :perma_id,
+          :subject_type,
+          :subject_id,
+          :creator_id,
+          :resolved_at,
+          :created_at,
+          :updated_at)
+
+json.comments(comment_thread.comments) do |comment|
+  json.partial!('pageflow/review/comments/comment', comment:)
+end

app/views/pageflow/review/comment_threads/index.json.jbuilder

@@ -0,0 +1,10 @@
+json.key_format!(camelize: :lower)
+
+json.current_user do
+  json.id current_user.id
+  json.name current_user.full_name
+end
+
+json.comment_threads(@comment_threads) do |comment_thread|
+  json.partial!('pageflow/review/comment_threads/comment_thread', comment_thread:)
+end

app/views/pageflow/review/comments/_comment.json.jbuilder

@@ -0,0 +1,11 @@
+json.key_format!(camelize: :lower)
+
+json.call(comment,
+          :id,
+          :perma_id,
+          :creator_id,
+          :body,
+          :created_at,
+          :updated_at)
+
+json.creator_name comment.creator.full_name

config/routes.rb

@@ -77,6 +77,12 @@
       resource :oembed, only: [:show]
     end
 
+    namespace :review do
+      resources :entries, only: [] do
+        resources :comment_threads, only: [:index]
+      end
+    end
+
     root to: redirect('/admin')
   end
 

db/migrate/20260323000000_create_comment_threads_and_comments.rb

@@ -0,0 +1,30 @@
+class CreateCommentThreadsAndComments < ActiveRecord::Migration[6.0]
+  def change
+    create_table :pageflow_comment_threads do |t|
+      t.integer :revision_id, null: false
+      t.integer :perma_id
+      t.string :subject_type, null: false
+      t.integer :subject_id, null: false
+      t.integer :creator_id, null: false
+      t.datetime :resolved_at
+      t.integer :resolved_by_id
+      t.timestamps
+    end
+
+    add_index :pageflow_comment_threads, :revision_id
+    add_index :pageflow_comment_threads, :creator_id
+    add_index :pageflow_comment_threads, [:revision_id, :subject_type, :subject_id],
+              name: 'index_comment_threads_on_revision_and_subject'
+
+    create_table :pageflow_comments do |t|
+      t.integer :comment_thread_id, null: false
+      t.integer :perma_id
+      t.integer :creator_id, null: false
+      t.text :body, null: false
+      t.timestamps
+    end
+
+    add_index :pageflow_comments, :comment_thread_id
+    add_index :pageflow_comments, :creator_id
+  end
+end

entry_types/scrolled/package/.eslintignore

@@ -8,6 +8,7 @@
 /contentElements-editor.js
 /contentElements-frontend.js
 /contentElements-frontend.css
+/review.js
 /testHelpers.js
 /widgets
 /.storybook/out/

entry_types/scrolled/package/.gitignore

@@ -6,6 +6,8 @@
 /contentElements-editor.js
 /contentElements-frontend.js
 /contentElements-frontend.css
+/review.css
+/review.js
 /testHelpers.js
 /widgets
 /.storybook/out/

entry_types/scrolled/package/.storybook/main.js

@@ -35,7 +35,9 @@ module.exports = {
         alias: {
           ...config.resolve.alias,
           'pageflow/frontend': path.resolve(__dirname, '../../../../package/src/frontend'),
+          'pageflow/review': path.resolve(__dirname, '../../../../package/src/review'),
           'pageflow-scrolled/frontend': path.resolve(__dirname, '../src/frontend'),
+          'pageflow-scrolled/review': path.resolve(__dirname, '../src/review'),
           'pageflow-scrolled/testHelpers': path.resolve(__dirname, '../src/testHelpers')
         }
       }

entry_types/scrolled/package/config/webpack.js

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

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import {act, waitFor} from '@testing-library/react';
+
+import {Entry} from 'frontend/Entry';
+import {usePageObjects} from 'support/pageObjects';
+import {renderInEntry} from 'support';
+import {clearExtensions} from 'frontend/extensions';
+import {loadCommentingComponents} from 'frontend/commenting';
+
+describe('commenting mode', () => {
+  usePageObjects();
+
+  beforeEach(() => {
+    jest.spyOn(window, 'fetch').mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({currentUser: null, commentThreads: []})
+    });
+
+    loadCommentingComponents();
+  });
+
+  afterEach(() => {
+    act(() => clearExtensions());
+    window.fetch.mockRestore();
+  });
+
+  it('fetches threads from API and displays badge', async () => {
+    window.fetch.mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({
+        currentUser: {id: 42, name: 'Alice'},
+        commentThreads: [
+          {id: 1, subjectType: 'ContentElement', subjectId: 1, comments: []}
+        ]
+      })
+    });
+
+    const {getByRole} = renderInEntry(<Entry />, {
+      seed: {
+        contentElements: [{
+          typeName: 'withTestId',
+          configuration: {testId: 5}
+        }]
+      }
+    });
+
+    await waitFor(() => {
+      expect(getByRole('status')).toBeInTheDocument();
+    });
+  });
+});

entry_types/scrolled/package/spec/review/CommentBadge-spec.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import {render, act} from '@testing-library/react';
+
+import {ReviewStateProvider} from 'review/ReviewStateProvider';
+import {CommentBadge} from 'review/CommentBadge';
+
+describe('CommentBadge', () => {
+  it('displays thread count for subject', () => {
+    const {getByRole} = render(
+      <ReviewStateProvider>
+        <CommentBadge subjectType="ContentElement" subjectId={10} />
+      </ReviewStateProvider>
+    );
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', {
+        data: {
+          type: 'REVIEW_STATE_RESET',
+          payload: {
+            currentUser: {id: 1},
+            commentThreads: [
+              {id: 1, subjectType: 'ContentElement', subjectId: 10, comments: []},
+              {id: 2, subjectType: 'ContentElement', subjectId: 10, comments: []},
+              {id: 3, subjectType: 'ContentElement', subjectId: 20, comments: []}
+            ]
+          }
+        },
+        origin: window.location.origin
+      }));
+    });
+
+    expect(getByRole('status')).toHaveTextContent('2');
+  });
+
+  it('renders nothing when no threads exist for subject', () => {
+    const {container} = render(
+      <ReviewStateProvider>
+        <CommentBadge subjectType="ContentElement" subjectId={10} />
+      </ReviewStateProvider>
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});

entry_types/scrolled/package/spec/review/ReviewMessageHandler-spec.js

@@ -0,0 +1,53 @@
+import BackboneEvents from 'backbone-events-standalone';
+
+import {ReviewMessageHandler} from 'review/ReviewMessageHandler';
+
+function fakeReviewSession() {
+  const session = {};
+  Object.assign(session, BackboneEvents);
+  return session;
+}
+
+describe('ReviewMessageHandler', () => {
+  it('posts REVIEW_STATE_RESET to target window on session reset', () => {
+    const session = fakeReviewSession();
+    const targetWindow = {postMessage: jest.fn()};
+
+    ReviewMessageHandler.create({session, targetWindow});
+
+    const state = {currentUser: {id: 42}, commentThreads: [{id: 1}]};
+    session.trigger('reset', state);
+
+    expect(targetWindow.postMessage).toHaveBeenCalledWith(
+      {type: 'REVIEW_STATE_RESET', payload: state},
+      window.location.origin
+    );
+  });
+
+  it('posts REVIEW_STATE_THREAD_CHANGE to target window on session change:thread', () => {
+    const session = fakeReviewSession();
+    const targetWindow = {postMessage: jest.fn()};
+
+    ReviewMessageHandler.create({session, targetWindow});
+
+    const thread = {id: 1, comments: [{body: 'Hello'}]};
+    session.trigger('change:thread', thread);
+
+    expect(targetWindow.postMessage).toHaveBeenCalledWith(
+      {type: 'REVIEW_STATE_THREAD_CHANGE', payload: thread},
+      window.location.origin
+    );
+  });
+
+  it('can be disposed', () => {
+    const session = fakeReviewSession();
+    const targetWindow = {postMessage: jest.fn()};
+
+    const handler = ReviewMessageHandler.create({session, targetWindow});
+    handler.dispose();
+
+    session.trigger('reset', {});
+
+    expect(targetWindow.postMessage).not.toHaveBeenCalled();
+  });
+});