Improve comments view

entry_types/scrolled/config/locales/de.yml

@@ -1587,9 +1587,14 @@ de:
       main_menu:
         comments: Kommentare
       comments_view:
+        new_thread: Neues Thema
         tabs:
           comments: Alle Kommentare
           selection: Für Auswahl
+      new_thread_view:
+        back: Kommentare
+        tabs:
+          newComment: Neues Thema
     help_entries:
       content_elements:
         menu_item: Inhaltselemente
@@ -1938,3 +1943,4 @@ de:
       reply_count:
         one: 1 Antwort
         other: '%{count} Antworten'
+      no_threads_yet: Noch keine Kommentare

entry_types/scrolled/config/locales/en.yml

@@ -1570,9 +1570,14 @@ en:
       main_menu:
         comments: Comments
       comments_view:
+        new_thread: New topic
         tabs:
           comments: All comments
           selection: For selection
+      new_thread_view:
+        back: Comments
+        tabs:
+          newComment: New topic
     help_entries:
       content_elements:
         menu_item: Content Elements
@@ -1767,3 +1772,4 @@ en:
       reply_count:
         one: 1 reply
         other: '%{count} replies'
+      no_threads_yet: No comments yet

entry_types/scrolled/package/jest.config.js

@@ -14,6 +14,7 @@ module.exports = {
   setupFilesAfterEnv: [
     '<rootDir>/spec/support/matchMediaStub.js',
     '<rootDir>/spec/support/requestAnimationFrameStub.js',
+    '<rootDir>/spec/support/scrollIntoViewStub.js',
     '<rootDir>/spec/support/fakeBrowserFeatures.js'
   ],
   modulePaths: ['<rootDir>/src', '<rootDir>/spec'],

entry_types/scrolled/package/spec/contentElements/textBlock/editor-spec.js

@@ -128,4 +128,49 @@ describe('contentElements/textBlock/editor', () => {
       });
     });
   });
+
+  describe('#compareRanges', () => {
+    function range(anchor, focus) {
+      return {
+        anchor: {path: [anchor[0], anchor[1]], offset: anchor[2]},
+        focus: {path: [focus[0], focus[1]], offset: focus[2]}
+      };
+    }
+
+    it('orders ranges by start block', () => {
+      const earlier = range([0, 0, 0], [0, 0, 5]);
+      const later = range([1, 0, 0], [1, 0, 5]);
+
+      expect(type.compareRanges(earlier, later)).toBeLessThan(0);
+      expect(type.compareRanges(later, earlier)).toBeGreaterThan(0);
+    });
+
+    it('orders ranges within the same block by offset', () => {
+      const earlier = range([0, 0, 2], [0, 0, 4]);
+      const later = range([0, 0, 6], [0, 0, 8]);
+
+      expect(type.compareRanges(earlier, later)).toBeLessThan(0);
+    });
+
+    it('uses the smaller of anchor and focus as the start point', () => {
+      const reversed = range([0, 0, 8], [0, 0, 2]);
+      const forward = range([0, 0, 5], [0, 0, 6]);
+
+      expect(type.compareRanges(reversed, forward)).toBeLessThan(0);
+    });
+
+    it('returns 0 for equal ranges', () => {
+      const r = range([0, 0, 0], [0, 0, 5]);
+
+      expect(type.compareRanges(r, r)).toBe(0);
+    });
+
+    it('sorts range-less subjects last', () => {
+      const r = range([0, 0, 0], [0, 0, 5]);
+
+      expect(type.compareRanges(undefined, r)).toBeGreaterThan(0);
+      expect(type.compareRanges(r, undefined)).toBeLessThan(0);
+      expect(type.compareRanges(undefined, undefined)).toBe(0);
+    });
+  });
 });

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

@@ -177,6 +177,37 @@ describe('PreviewMessageController', () => {
     });
   });
 
+  it('forwards selectNewThread events to iframe as SELECT newThread', async () => {
+    const entry = factories.entry(ScrolledEntry, {}, {entryTypeSeed: normalizeSeed()});
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow});
+
+    await postReadyMessageAndWaitForAcknowledgement(iframeWindow);
+
+    const range = {anchor: {path: [0, 0], offset: 0}, focus: {path: [0, 0], offset: 5}};
+
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'SELECT' && event.data.payload.type === 'newThread') {
+          resolve(event.data);
+        }
+      });
+      entry.trigger('selectNewThread', {
+        id: 10,
+        subjectType: 'ContentElement',
+        range
+      });
+    })).resolves.toMatchObject({
+      type: 'SELECT',
+      payload: {
+        type: 'newThread',
+        id: 10,
+        subjectType: 'ContentElement',
+        range
+      }
+    });
+  });
+
   it('passes on range from selectContentElement event', async () => {
     const entry = factories.entry(ScrolledEntry, {}, {
       entryTypeSeed: normalizeSeed({

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

@@ -9,6 +9,14 @@ import {useEditorGlobals} from 'support';
 import {fireEvent} from '@testing-library/dom';
 import {act} from '@testing-library/react';
 
+function unselectedEntry(createEntry) {
+  const entry = createEntry({
+    contentElements: [{id: 1, permaId: 10, typeName: 'textBlock'}]
+  });
+  entry.reviewSession = factories.reviewSession();
+  return entry;
+}
+
 describe('CommentsView', () => {
   const {createEntry} = useEditorGlobals();
 
@@ -19,6 +27,7 @@ describe('CommentsView', () => {
     'pageflow_scrolled.editor.content_elements.textBlock.name': 'Text',
     'pageflow_scrolled.editor.comments_view.tabs.comments': 'All comments',
     'pageflow_scrolled.editor.comments_view.tabs.selection': 'For selection',
+    'pageflow_scrolled.editor.comments_view.new_thread': 'New topic',
     'pageflow.editor.templates.back_button_decorator.outline': 'Outline'
   });
 
@@ -108,4 +117,72 @@ describe('CommentsView', () => {
     navigate.mockRestore();
   });
 
+  it('disables the new-thread button when no content element is selected', () => {
+    const entry = unselectedEntry(createEntry);
+
+    const view = new CommentsView({entry, editor});
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('button', {name: 'New topic'})).toBeDisabled();
+  });
+
+  it('enables the new-thread button when a content element is selected', () => {
+    const entry = unselectedEntry(createEntry);
+    entry.set('selectedContentElementCommentsId', 1);
+
+    const view = new CommentsView({entry, editor});
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('button', {name: 'New topic'})).not.toBeDisabled();
+  });
+
+  it("toggles the new-thread button when entry.selectedContentElementCommentsId changes", () => {
+    const entry = unselectedEntry(createEntry);
+
+    const view = new CommentsView({entry, editor});
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('button', {name: 'New topic'})).toBeDisabled();
+
+    act(() => { entry.set('selectedContentElementCommentsId', 1); });
+
+    expect(getByRole('button', {name: 'New topic'})).not.toBeDisabled();
+  });
+
+  it('triggers selectNewThread on entry when the new-thread button is clicked', () => {
+    const entry = unselectedEntry(createEntry);
+    entry.set('selectedContentElementCommentsId', 1);
+    const range = {anchor: {path: [0, 0], offset: 0}, focus: {path: [0, 0], offset: 5}};
+    entry.contentElements.get(1).transientState
+      .set('newCommentThreadSubjectRange', range);
+
+    const view = new CommentsView({entry, editor});
+    const {getByRole} = renderBackboneView(view);
+
+    const listener = jest.fn();
+    entry.on('selectNewThread', listener);
+
+    fireEvent.click(getByRole('button', {name: 'New topic'}));
+
+    expect(listener).toHaveBeenCalledWith({
+      id: 10,
+      subjectType: 'ContentElement',
+      range
+    });
+  });
+
+  it('does not trigger selectNewThread when clicking the button while disabled', () => {
+    const entry = unselectedEntry(createEntry);
+
+    const view = new CommentsView({entry, editor});
+    const {getByRole} = renderBackboneView(view);
+
+    const listener = jest.fn();
+    entry.on('selectNewThread', listener);
+
+    fireEvent.click(getByRole('button', {name: 'New topic'}));
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
 });