fix(comment-content): render reason text as comment content

This commit is contained in:
Tommaso Casaburi
2026-05-31 16:09:01 +07:00
parent d48cf10ee8
commit d3b5c40321
2 changed files with 18 additions and 15 deletions
@@ -408,11 +408,11 @@ describe('CommentContent', () => {
cid: 'post-2',
content: 'ignored',
postCid: 'post-2',
reason: 'spam',
reason: 'duplicate of >>96',
removed: true,
});
expect(container.textContent).toContain('this_post_was_removed');
expect(container.textContent).toContain('Reason: "spam"');
expect(queryMarkdownText()).toEqual(['Reason: duplicate of >>96']);
await renderContent({
cid: 'post-3',
@@ -422,7 +422,7 @@ describe('CommentContent', () => {
reason: 'self-delete',
});
expect(container.textContent).toContain('user_deleted_this_post');
expect(container.textContent).toContain('Reason: "self-delete"');
expect(queryMarkdownText()).toEqual(['Reason: self-delete']);
});
it('renders pending approval, ban details, and loading or failed states', async () => {
@@ -442,6 +442,7 @@ describe('CommentContent', () => {
expect(container.textContent).toContain('pending_mod_approval');
expect(container.textContent).toContain('pending-reason:rules violation');
expect(queryMarkdownText()).toEqual(['queued body', 'pending-reason:rules violation']);
const tooltip = container.querySelector('[data-testid="tooltip"]');
expect(tooltip?.getAttribute('title')).toContain('ban:short:music-posting.eth:2024-01-01 12:00:00');
@@ -156,7 +156,14 @@ const CommentContent = ({
const failedError = getFailedCommentError(resolvedPost);
const failedErrorMessage = formatErrorMessageForDisplay(failedError);
const shouldShowUnpublishedStateDetails = !cid && (!hasFailedState || Boolean(failedError));
const reasonMessage = reason ? `${capitalize(t('reason'))}: ${reason}` : undefined;
const pendingApprovalReason = pendingApproval ? reason?.trim() : undefined;
const pendingApprovalReasonMessage = pendingApprovalReason
? t('pending_mod_approval_reason', {
reason: pendingApprovalReason,
interpolation: { escapeValue: false },
})
: undefined;
const loadingString = (
<div className={styles.stateString}>
@@ -193,21 +200,21 @@ const CommentContent = ({
{purged ? (
<span className={styles.grayEditMessage}>{capitalize(t('this_post_was_purged'))}</span>
) : removed ? (
reason ? (
reasonMessage ? (
<>
<span className={styles.redEditMessage}>({t('this_post_was_removed')})</span>
<br />
<br />
<span className={styles.grayEditMessage}>{`${capitalize(t('reason'))}: "${reason}"`}</span>
{renderContent(reasonMessage)}
</>
) : (
<span className={styles.grayEditMessage}>{capitalize(t('this_post_was_removed'))}.</span>
)
) : deleted ? (
reason ? (
reasonMessage ? (
<>
<span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>{' '}
<span className={styles.grayEditMessage}>{`${capitalize(t('reason'))}: "${reason}"`}</span>
{renderContent(reasonMessage)}
</>
) : (
<span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>
@@ -220,18 +227,13 @@ const CommentContent = ({
<br />
<br />
<span className={styles.pendingApproval}>({t('pending_mod_approval')})</span>
{pendingApprovalReason && (
{pendingApprovalReasonMessage ? (
<>
<br />
<br />
<span className={styles.grayEditMessage}>
{t('pending_mod_approval_reason', {
reason: pendingApprovalReason,
interpolation: { escapeValue: false },
})}
</span>
{renderContent(pendingApprovalReasonMessage)}
</>
)}
) : null}
</>
)}
{((!isInPostView && content?.length > 1000 && !showFullComment) || (isInPostView && content?.length > 2000 && !showFullComment)) && !isPrivilegedAuthor && (