fix(ui): strike through deleted comment revisions (go-gitea#8458)

Resolves go-gitea#8403

There's a issue with the comment history items that are deleted, they can be deleted by the author of the comment or by those that have write access. However when the item is deleted, it shows that the one who wrote that revision of the comment deleted it, which is not always true. Strike-through the item instead.

Co-authored-by: Daniele Pintore <[email protected]>
Co-authored-by: 0ko <[email protected]>
Co-authored-by: Gusted <[email protected]>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8458
Reviewed-by: 0ko <[email protected]>
Co-authored-by: danielep <[email protected]>
Co-committed-by: danielep <[email protected]>

Author: 4 people

options/locale/locale_en-US.ini

@@ -1823,7 +1823,6 @@ issues.review.resolve_conversation = Resolve conversation
 issues.review.un_resolve_conversation = Unresolve conversation
 issues.review.resolved_by = marked this conversation as resolved
 issues.reference_issue.body = Body
-issues.content_history.deleted = deleted
 issues.content_history.edited = edited
 issues.content_history.created = created
 issues.content_history.delete_from_history = Delete from history

routers/web/repo/issue_content_history.go

@@ -5,6 +5,7 @@ package repo
 
 import (
 	"bytes"
+	"fmt"
 	"html"
 	"net/http"
 	"strings"
@@ -54,15 +55,18 @@ func GetContentHistoryList(ctx *context.Context) {
 	var results []map[string]any
 	for _, item := range items {
 		var actionText string
-		if item.IsDeleted {
-			actionTextDeleted := ctx.Locale.TrString("repo.issues.content_history.deleted")
-			actionText = "<i data-history-is-deleted='1'>" + actionTextDeleted + "</i>"
-		} else if item.IsFirstCreated {
+		contentFmt := "%s<strong>%s</strong> %s %s"
+		if item.IsFirstCreated {
 			actionText = ctx.Locale.TrString("repo.issues.content_history.created")
 		} else {
 			actionText = ctx.Locale.TrString("repo.issues.content_history.edited")
 		}
 
+		if item.IsDeleted {
+			actionText = "<span data-history-is-deleted='1'>" + actionText + "</span>"
+			contentFmt = "<s>" + contentFmt + "</s>"
+		}
+
 		username := item.UserName
 		if setting.UI.DefaultShowFullName && strings.TrimSpace(item.UserFullName) != "" {
 			username = strings.TrimSpace(item.UserFullName)
@@ -73,9 +77,10 @@ func GetContentHistoryList(ctx *context.Context) {
 		name := html.EscapeString(username)
 		avatarHTML := string(templates.AvatarHTML(src, 28, class, username))
 		timeSinceHTML := string(templates.TimeSince(item.EditedUnix))
+		content := fmt.Sprintf(contentFmt, avatarHTML, name, actionText, timeSinceHTML)
 
 		results = append(results, map[string]any{
-			"name":  avatarHTML + "<strong>" + name + "</strong> " + actionText + " " + timeSinceHTML,
+			"name":  content,
 			"value": item.HistoryID,
 		})
 	}

tests/e2e/issue-comment.test.e2e.ts

@@ -2,10 +2,11 @@
 // web_src/js/features/comp/**
 // web_src/js/features/repo-**
 // templates/repo/issue/view_content/*
+// routers/web/repo/issue_content_history.go
 // @watch end
 
 import {expect} from '@playwright/test';
-import {test, save_visual} from './utils_e2e.ts';
+import {test, dynamic_id, save_visual} from './utils_e2e.ts';
 
 test.use({user: 'user2'});
 
@@ -236,3 +237,34 @@ test('Emoji suggestions', async ({page}) => {
   const item = suggestionList.locator(`li:has-text("forgejo")`);
   await expect(item.locator('img')).toHaveAttribute('src', '/assets/img/emoji/forgejo.png');
 });
+
+test('Comment history', async ({page}) => {
+  const response = await page.goto('/user2/repo1/issues/new');
+  expect(response?.status()).toBe(200);
+
+  // Create a new issue.
+  await page.getByPlaceholder('Title').fill('Just a title');
+  await page.getByPlaceholder('Leave a comment').fill('Hi, have you considered using a rotating fish as logo?');
+  await page.getByRole('button', {name: 'Create issue'}).click();
+  await expect(page).toHaveURL(/\/user2\/repo1\/issues\/\d+$/);
+
+  page.on('dialog', (dialog) => dialog.accept());
+
+  // Make a change.
+  const editorTextarea = page.locator('[id="_combo_markdown_editor_1"]');
+  await page.click('.comment-container .context-menu');
+  await page.click('.comment-container .menu>.edit-content');
+  await editorTextarea.fill(dynamic_id());
+  await page.click('.comment-container .edit .save');
+
+  // Reload the page so the edited bit is rendered.
+  await page.reload();
+
+  await page.getByText('• edited').click();
+  await page.click('.content-history-menu .item:nth-child(1)');
+  await page.getByText('Options').click();
+  await page.getByText('Delete from history').click();
+
+  await page.getByText('• edited').click();
+  await expect(page.locator(".content-history-menu .item s span[data-history-is-deleted='1']")).toBeVisible();
+});

web_src/css/repo.css

@@ -2132,6 +2132,10 @@ details.repo-search-result summary::marker {
   gap: 4px;
 }
 
+.comment-header-left > .content-history-menu.active s {
+  text-decoration-thickness: 10%;
+}
+
 .comment-body {
   background: var(--color-box-body);
   border: none !important;