Display comment badge on content elements

Wire up the full data flow from REST API to UI: ReviewSession
fetches threads, ReviewMessageHandler bridges via postMessage,
ReviewStateProvider holds React state, CommentBadge renders
thread count. The commenting EntryDecorator sets up the
session, ContentElementDecorator renders the badge.

REDMINE-21261

Author: tf

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);

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();
+  });
+});

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import {act} from '@testing-library/react';
+import {renderHook} from '@testing-library/react-hooks';
+
+import {
+  ReviewStateProvider,
+  useCommentThreads
+} from 'review/ReviewStateProvider';
+import {
+  postReviewStateResetMessage,
+  postReviewStateThreadChangeMessage
+} from 'review/postMessage';
+
+function wrapper({children}) {
+  return <ReviewStateProvider>{children}</ReviewStateProvider>;
+}
+
+function postReset(payload) {
+  act(() => {
+    postReviewStateResetMessage(window, payload);
+  });
+}
+
+function postThreadChange(payload) {
+  act(() => {
+    postReviewStateThreadChangeMessage(window, payload);
+  });
+}
+
+describe('ReviewStateProvider', () => {
+  it('provides empty initial state', () => {
+    const {result} = renderHook(
+      () => useCommentThreads('CE', 10),
+      {wrapper}
+    );
+
+    expect(result.current).toEqual([]);
+  });
+
+  it('updates state on reset message', async () => {
+    const {result, waitForNextUpdate} = renderHook(
+      () => useCommentThreads('CE', 10),
+      {wrapper}
+    );
+
+    postReset({
+      currentUser: {id: 42, name: 'Alice'},
+      commentThreads: [
+        {id: 1, subjectType: 'CE', subjectId: 10, comments: []},
+        {id: 2, subjectType: 'CE', subjectId: 20, comments: []}
+      ]
+    });
+
+    await waitForNextUpdate();
+
+    expect(result.current).toHaveLength(1);
+    expect(result.current[0].id).toBe(1);
+  });
+
+  it('updates single thread on thread change message', async () => {
+    const {result, waitForNextUpdate} = renderHook(
+      () => useCommentThreads('CE', 10),
+      {wrapper}
+    );
+
+    postReset({
+      currentUser: {id: 42},
+      commentThreads: [
+        {id: 1, subjectType: 'CE', subjectId: 10, comments: []}
+      ]
+    });
+
+    await waitForNextUpdate();
+    expect(result.current[0].comments).toHaveLength(0);
+
+    postThreadChange({
+      id: 1,
+      subjectType: 'CE',
+      subjectId: 10,
+      comments: [{id: 100, body: 'Hello'}]
+    });
+
+    await waitForNextUpdate();
+    expect(result.current[0].comments).toHaveLength(1);
+  });
+
+  it('ignores messages from different origins', () => {
+    const {result} = renderHook(
+      () => useCommentThreads('CE', 10),
+      {wrapper}
+    );
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', {
+        data: {
+          type: 'REVIEW_STATE_RESET',
+          payload: {
+            currentUser: {id: 99},
+            commentThreads: [{id: 1, subjectType: 'CE', subjectId: 10, comments: []}]
+          }
+        },
+        origin: 'https://evil.example.com'
+      }));
+    });
+
+    expect(result.current).toEqual([]);
+  });
+});

entry_types/scrolled/package/src/frontend/commenting/ContentElementDecorator.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {CommentBadge} from 'pageflow-scrolled/review';
+
+export function ContentElementDecorator({permaId, children}) {
+  return (
+    <>
+      {children}
+      <CommentBadge subjectType="ContentElement" subjectId={permaId} />
+    </>
+  );
+}