Show resolved threads UI in ThreadList

tf · tf · commit d665897b2e78 · 2026-04-14T12:33:59.000+02:00
Separate active from resolved threads. Show a "N resolved"
pill to expand the resolved section. Add resolve/unresolve
button on each thread that posts a RESOLVE_THREAD message.

REDMINE-21261
diff --git a/.rubocop.yml b/.rubocop.yml
@@ -173,6 +173,10 @@ Lint/UselessConstantScoping:
 Gemspec/DevelopmentDependencies:
   Enabled: false
 
+# Allow I18n-style %{var} tokens
+Style/FormatStringToken:
+  Mode: conservative
+
 # Ignore empty specs and factory traits
 Lint/EmptyBlock:
   Exclude:
diff --git a/entry_types/scrolled/config/locales/de.yml b/entry_types/scrolled/config/locales/de.yml
@@ -1922,6 +1922,11 @@ de:
       send: Senden
       enter_for_new_line: Enter für neue Zeile
       toggle_replies: Antworten umschalten
+      resolve: Als gelöst markieren
+      unresolve: Als ungelöst markieren
+      resolved_count:
+        one: 1 erledigt
+        other: '%{count} erledigt'
       reply_count:
         one: 1 Antwort
         other: '%{count} Antworten'
diff --git a/entry_types/scrolled/config/locales/en.yml b/entry_types/scrolled/config/locales/en.yml
@@ -1751,6 +1751,11 @@ en:
       send: Send
       enter_for_new_line: Enter for new line
       toggle_replies: Toggle replies
+      resolve: Mark as resolved
+      unresolve: Mark as unresolved
+      resolved_count:
+        one: 1 resolved
+        other: '%{count} resolved'
       reply_count:
         one: 1 reply
         other: '%{count} replies'
diff --git a/entry_types/scrolled/package/spec/review/CommentBadge-spec.js b/entry_types/scrolled/package/spec/review/CommentBadge-spec.js
@@ -33,6 +33,34 @@ describe('CommentBadge', () => {
     expect(getByRole('status')).toHaveTextContent('2');
   });
 
+  it('only counts unresolved threads', () => {
+    const {getByRole} = renderWithReviewState(
+      <CommentBadge subjectType="ContentElement" subjectId={10} />,
+      {
+        commentThreads: [
+          {id: 1, subjectType: 'ContentElement', subjectId: 10, resolvedAt: null, comments: []},
+          {id: 2, subjectType: 'ContentElement', subjectId: 10, resolvedAt: null, comments: []},
+          {id: 3, subjectType: 'ContentElement', subjectId: 10, resolvedAt: '2026-04-09T10:00:00Z', comments: []}
+        ]
+      }
+    );
+
+    expect(getByRole('status')).toHaveTextContent('2');
+  });
+
+  it('renders nothing when all threads are resolved', () => {
+    const {container} = renderWithReviewState(
+      <CommentBadge subjectType="ContentElement" subjectId={10} />,
+      {
+        commentThreads: [
+          {id: 1, subjectType: 'ContentElement', subjectId: 10, resolvedAt: '2026-04-09T10:00:00Z', comments: []}
+        ]
+      }
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
   it('renders nothing when no threads exist for subject', () => {
     const {container} = renderWithReviewState(
       <CommentBadge subjectType="ContentElement" subjectId={10} />
diff --git a/entry_types/scrolled/package/spec/review/ThreadList-spec.js b/entry_types/scrolled/package/spec/review/ThreadList-spec.js
@@ -16,7 +16,11 @@ describe('ThreadList', () => {
     'pageflow_scrolled.review.reply_placeholder': 'Reply...',
     'pageflow_scrolled.review.send': 'Send',
     'pageflow_scrolled.review.enter_for_new_line': 'Enter for new line',
-    'pageflow_scrolled.review.toggle_replies': 'Toggle replies'
+    'pageflow_scrolled.review.toggle_replies': 'Toggle replies',
+    'pageflow_scrolled.review.resolve': 'Mark as resolved',
+    'pageflow_scrolled.review.unresolve': 'Mark as unresolved',
+    'pageflow_scrolled.review.resolved_count.one': '1 resolved',
+    'pageflow_scrolled.review.resolved_count.other': '%{count} resolved'
   });
   it('displays comments of threads for subject', () => {
     const {getByText} = renderWithReviewState(
@@ -389,6 +393,121 @@ describe('ThreadList', () => {
     expect(getByRole('button', {name: 'Send'})).toBeInTheDocument();
   });
 
+  it('hides resolved threads and shows resolved count pill', () => {
+    const {queryByText, getByText} = renderWithReviewState(
+      <ThreadList subjectType="ContentElement" subjectId={10} />,
+      {
+        commentThreads: [
+          {id: 1, subjectType: 'ContentElement', subjectId: 10,
+           resolvedAt: '2026-04-09T10:00:00Z',
+           comments: [{id: 10, body: 'Resolved thread', creatorName: 'Bob', creatorId: 2}]},
+          {id: 2, subjectType: 'ContentElement', subjectId: 10,
+           resolvedAt: null,
+           comments: [{id: 20, body: 'Active thread', creatorName: 'Alice', creatorId: 1}]}
+        ]
+      }
+    );
+
+    expect(getByText('Active thread')).toBeInTheDocument();
+    expect(queryByText('Resolved thread')).not.toBeInTheDocument();
+    expect(getByText('1 resolved')).toBeInTheDocument();
+  });
+
+  it('toggles resolved threads when pill is clicked', async () => {
+    const user = userEvent.setup();
+
+    const {getByText, queryByText} = renderWithReviewState(
+      <ThreadList subjectType="ContentElement" subjectId={10} />,
+      {
+        commentThreads: [
+          {id: 1, subjectType: 'ContentElement', subjectId: 10,
+           resolvedAt: '2026-04-09T10:00:00Z',
+           comments: [{id: 10, body: 'Resolved thread', creatorName: 'Bob', creatorId: 2}]},
+          {id: 2, subjectType: 'ContentElement', subjectId: 10,
+           resolvedAt: null,
+           comments: [{id: 20, body: 'Active thread', creatorName: 'Alice', creatorId: 1}]}
+        ]
+      }
+    );
+
+    await user.click(getByText('1 resolved'));
+    expect(getByText('Resolved thread')).toBeInTheDocument();
+    expect(getByText('1 resolved')).toBeInTheDocument();
+
+    await user.click(getByText('1 resolved'));
+    expect(queryByText('Resolved thread')).not.toBeInTheDocument();
+  });
+
+  it('posts resolve message when resolve button is clicked', async () => {
+    const user = userEvent.setup();
+    const postMessage = jest.spyOn(window.top, 'postMessage').mockImplementation(() => {});
+
+    const {getByText} = renderWithReviewState(
+      <ThreadList subjectType="ContentElement" subjectId={10} />,
+      {
+        commentThreads: [
+          {id: 1, subjectType: 'ContentElement', subjectId: 10,
+           resolvedAt: null,
+           comments: [{id: 10, body: 'Open thread', creatorName: 'Bob', creatorId: 2}]}
+        ]
+      }
+    );
+
+    await user.click(getByText('Mark as resolved'));
+
+    expect(postMessage).toHaveBeenCalledWith(
+      {type: 'UPDATE_THREAD', payload: {threadId: 1, resolved: true}},
+      window.location.origin
+    );
+
+    postMessage.mockRestore();
+  });
+
+  it('does not show resolve button on collapsed threads', () => {
+    const {queryByText} = renderWithReviewState(
+      <ThreadList subjectType="ContentElement" subjectId={10} />,
+      {
+        commentThreads: [
+          {id: 1, subjectType: 'ContentElement', subjectId: 10,
+           resolvedAt: null,
+           comments: [{id: 10, body: 'First thread', creatorName: 'Bob', creatorId: 2}]},
+          {id: 2, subjectType: 'ContentElement', subjectId: 10,
+           resolvedAt: null,
+           comments: [{id: 20, body: 'Second thread', creatorName: 'Alice', creatorId: 1}]}
+        ]
+      }
+    );
+
+    expect(queryByText('Mark as resolved')).not.toBeInTheDocument();
+  });
+
+  it('does not show reply form on resolved threads', async () => {
+    const user = userEvent.setup();
+
+    const {queryByPlaceholderText, getByText} = renderWithReviewState(
+      <ThreadList subjectType="ContentElement" subjectId={10} />,
+      {
+        commentThreads: [
+          {id: 1, subjectType: 'ContentElement', subjectId: 10,
+           resolvedAt: null,
+           comments: [{id: 10, body: 'Active thread', creatorName: 'Bob', creatorId: 2}]},
+          {id: 2, subjectType: 'ContentElement', subjectId: 10,
+           resolvedAt: '2026-04-09T10:00:00Z',
+           comments: [{id: 20, body: 'Resolved thread', creatorName: 'Alice', creatorId: 1}]}
+        ]
+      }
+    );
+
+    await user.click(getByText('1 resolved'));
+
+    const replyFields = queryByPlaceholderText('Reply...');
+    expect(replyFields).toBeInTheDocument();
+
+    expect(getByText('Resolved thread')).toBeInTheDocument();
+    const resolvedThread = getByText('Resolved thread').closest('[class*="thread"]');
+    expect(resolvedThread.querySelector('textarea[placeholder="Reply..."]')).toBeNull();
+  });
+
   it('shows reply form in collapsed thread without replies', () => {
     const {getAllByPlaceholderText} = renderWithReviewState(
       <ThreadList subjectType="ContentElement" subjectId={10} />,
diff --git a/entry_types/scrolled/package/src/review/CommentBadge.js b/entry_types/scrolled/package/src/review/CommentBadge.js
@@ -8,7 +8,8 @@ import styles from './CommentBadge.module.css';
 
 export function CommentBadge({subjectType, subjectId, onClick, mode}) {
   const threads = useCommentThreads(subjectType, subjectId);
-  const hasThreads = threads.length > 0;
+  const unresolvedCount = threads.filter(t => !t.resolvedAt).length;
+  const hasThreads = unresolvedCount > 0;
 
   const variant = resolveVariant(mode, hasThreads);
 
@@ -21,7 +22,7 @@ export function CommentBadge({subjectType, subjectId, onClick, mode}) {
             className={classNames(styles.badge, styles[variant])}
             onClick={onClick}>
       {variant !== 'dot' && <CommentIcon className={styles.icon} />}
-      {(variant === 'active' || variant === 'expanded') && threads.length > 1 ? threads.length : null}
+      {(variant === 'active' || variant === 'expanded') && unresolvedCount > 1 ? unresolvedCount : null}
     </button>
   );
 }
diff --git a/entry_types/scrolled/package/src/review/Thread.js b/entry_types/scrolled/package/src/review/Thread.js
@@ -6,9 +6,11 @@ import {Comment} from './Comment';
 import {ReplyForm} from './ReplyForm';
 
 import ChevronIcon from './images/chevron.svg';
+import ResolveIcon from './images/resolve.svg';
+import UnresolveIcon from './images/unresolve.svg';
 import styles from './Thread.module.css';
 
-export function Thread({thread, collapsed, onToggle}) {
+export function Thread({thread, collapsed, onToggle, onResolve}) {
   const {t} = useI18n({locale: 'ui'});
   const firstComment = thread.comments[0];
   const replies = thread.comments.slice(1);
@@ -34,7 +36,18 @@ export function Thread({thread, collapsed, onToggle}) {
         <Comment key={comment.id} comment={comment} />
       ))}
 
-      {(!collapsed || replies.length === 0) && <ReplyForm threadId={thread.id} />}
+      {!thread.resolvedAt && (!collapsed || replies.length === 0) &&
+        <ReplyForm threadId={thread.id} />}
+
+      {onResolve && !collapsed &&
+        <div className={styles.resolveRow}>
+          <button className={styles.resolveButton} onClick={onResolve}>
+            {thread.resolvedAt ? <UnresolveIcon /> : <ResolveIcon />}
+            {t(thread.resolvedAt
+              ? 'pageflow_scrolled.review.unresolve'
+              : 'pageflow_scrolled.review.resolve')}
+          </button>
+        </div>}
     </div>
   );
 }
diff --git a/entry_types/scrolled/package/src/review/Thread.module.css b/entry_types/scrolled/package/src/review/Thread.module.css
@@ -52,3 +52,28 @@
 .expandButton:hover {
   text-decoration: underline;
 }
+
+.resolveRow {
+  display: flex;
+  justify-content: center;
+  margin-top: space(2);
+  padding-top: space(2);
+  border-top: 1px solid var(--ui-on-surface-color-lightest);
+}
+
+.resolveButton {
+  font: inherit;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: space(1);
+  color: var(--ui-on-surface-color-light);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.resolveButton:hover {
+  color: var(--ui-primary-color);
+}
diff --git a/entry_types/scrolled/package/src/review/ThreadList.js b/entry_types/scrolled/package/src/review/ThreadList.js
@@ -5,16 +5,23 @@ import {useI18n} from '../frontend/i18n';
 import {useCommentThreads} from './ReviewStateProvider';
 import {Thread} from './Thread';
 import {NewThreadForm} from './NewThreadForm';
+import {postUpdateThreadMessage} from './postMessage';
 
+import ChevronIcon from './images/chevron.svg';
 import NewTopicIcon from './images/newTopic.svg';
 import styles from './ThreadList.module.css';
 
 export function ThreadList({subjectType, subjectId, showNewForm: showNewFormProp, reversed, onDismiss, newTopicButtonClassName}) {
   const {t} = useI18n({locale: 'ui'});
   const threads = useCommentThreads(subjectType, subjectId);
+
+  const activeThreads = threads.filter(thread => !thread.resolvedAt);
+  const resolvedThreads = threads.filter(thread => thread.resolvedAt);
+
   const [expandedThreadId, setExpandedThreadId] = useState(null);
   const [formToggled, setFormToggled] = useState(null);
-  const showNewForm = formToggled !== null ? formToggled : (showNewFormProp || threads.length === 0);
+  const [showResolved, setShowResolved] = useState(false);
+  const showNewForm = formToggled !== null ? formToggled : (showNewFormProp || activeThreads.length === 0);
 
   function toggleThread(threadId) {
     setExpandedThreadId(expandedThreadId === threadId ? null : threadId);
@@ -38,15 +45,34 @@ export function ThreadList({subjectType, subjectId, showNewForm: showNewFormProp
                        onSubmit={() => setFormToggled(false)}
                        onCancel={() => {
                          setFormToggled(false);
-                         if (threads.length === 0 && onDismiss) onDismiss();
+                         if (activeThreads.length === 0 && onDismiss) onDismiss();
                        }} />}
 
-      {threads.map(thread => (
+      {activeThreads.map(thread => (
         <Thread key={thread.id}
                 thread={thread}
-                collapsed={threads.length > 1 && expandedThreadId !== thread.id}
-                onToggle={() => toggleThread(thread.id)} />
+                collapsed={activeThreads.length > 1 && expandedThreadId !== thread.id}
+                onToggle={() => toggleThread(thread.id)}
+                onResolve={() => postUpdateThreadMessage({threadId: thread.id, resolved: true})} />
       ))}
+
+      {resolvedThreads.length > 0 &&
+        <div className={styles.resolvedSection}>
+          <button className={styles.resolvedPill}
+                  onClick={() => setShowResolved(!showResolved)}>
+            {t('pageflow_scrolled.review.resolved_count', {count: resolvedThreads.length})}
+            <ChevronIcon className={classNames(styles.chevron,
+                                               {[styles.chevronExpanded]: showResolved})} />
+          </button>
+
+          {showResolved && resolvedThreads.map(thread => (
+            <Thread key={thread.id}
+                    thread={thread}
+                    collapsed={resolvedThreads.length > 1 && expandedThreadId !== thread.id}
+                    onToggle={() => toggleThread(thread.id)}
+                    onResolve={() => postUpdateThreadMessage({threadId: thread.id, resolved: false})} />
+          ))}
+        </div>}
     </div>
   );
 }
diff --git a/entry_types/scrolled/package/src/review/ThreadList.module.css b/entry_types/scrolled/package/src/review/ThreadList.module.css
@@ -24,3 +24,35 @@
 .reversed {
   align-self: flex-end;
 }
+
+.resolvedSection {
+  display: flex;
+  flex-direction: column;
+  gap: space(2);
+  margin-top: space(3);
+}
+
+.resolvedPill {
+  align-self: center;
+  display: flex;
+  align-items: center;
+  gap: space(1);
+  font: inherit;
+  font-size: space(3);
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--ui-on-primary-color);
+  background: var(--ui-primary-color);
+  border: 0;
+  border-radius: rounded(full);
+  padding: space(1) space(1.5) space(1) space(2.5);
+  cursor: pointer;
+}
+
+.chevron {
+  transition: transform 0.2s;
+}
+
+.chevronExpanded {
+  transform: rotate(180deg);
+}
diff --git a/entry_types/scrolled/package/src/review/images/resolve.svg b/entry_types/scrolled/package/src/review/images/resolve.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>
diff --git a/entry_types/scrolled/package/src/review/images/unresolve.svg b/entry_types/scrolled/package/src/review/images/unresolve.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
diff --git a/entry_types/scrolled/spec/features/entry_previewer/commenting_on_content_elements_spec.rb b/entry_types/scrolled/spec/features/entry_previewer/commenting_on_content_elements_spec.rb
