Save and view issue/comment content history (#16909)

* issue content history

* Use timeutil.TimeStampNow() for content history time instead of issue/comment.UpdatedUnix (which are not updated in time)

* i18n for frontend

* refactor

* clean up

* fix refactor

* re-format

* temp refactor

* follow db refactor

* rename IssueContentHistory to ContentHistory, remove empty model tags

* fix html

* use avatar refactor to generate avatar url

* add unit test, keep at most 20 history revisions.

* re-format

* syntax nit

* Add issue content history table

* Update models/migrations/v197.go

Co-authored-by: 6543 <6543@obermui.de>

* fix merge

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: Lauris BH <lauris@nix.lv>

3 files changed, 139 insertions, 0 deletions

diff --git a/web_src/js/features/issue-content-history.js b/web_src/js/features/issue-content-history.js
new file mode 100644
index 0000000000..6ead067417
--- /dev/null
+++ b/web_src/js/features/issue-content-history.js
@@ -0,0 +1,135 @@
+import {svg} from '../svg.js';
+
+const {AppSubUrl, csrf} = window.config;
+
+let i18nTextEdited;
+let i18nTextOptions;
+let i18nTextDeleteFromHistory;
+let i18nTextDeleteFromHistoryConfirm;
+
+function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleHtml) {
+  let $dialog = $('.content-history-detail-dialog');
+  if ($dialog.length) return;
+
+  $dialog = $(`
+<div class="ui modal content-history-detail-dialog" style="min-height: 50%;">
+  <i class="close icon inside"></i>
+  <div class="header">
+    ${itemTitleHtml}
+    <div class="ui dropdown right dialog-header-options" style="display: none; margin-right: 50px;">
+      ${i18nTextOptions} <i class="dropdown icon"></i>
+      <div class="menu">
+        <div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
+      </div>
+    </div>
+  </div>
+  <!-- ".modal .content" style was polluted in "_base.less": "&.modal > .content"  -->
+  <div class="scrolling content" style="text-align: left;">
+      <div class="ui loader active"></div>
+  </div>
+</div>`);
+  $dialog.appendTo($('body'));
+  $dialog.find('.dialog-header-options').dropdown({
+    showOnFocus: false,
+    allowReselection: true,
+    onChange(_value, _text, $item) {
+      const optionItem = $item.data('option-item');
+      if (optionItem === 'delete') {
+        if (window.confirm(i18nTextDeleteFromHistoryConfirm)) {
+          $.post(`${issueBaseUrl}/content-history/soft-delete?comment_id=${commentId}&history_id=${historyId}`, {
+            _csrf: csrf,
+          }).done((resp) => {
+            if (resp.ok) {
+              $dialog.modal('hide');
+            } else {
+              alert(resp.message);
+            }
+          });
+        }
+      } else { // required by eslint
+        window.alert(`unknown option item: ${optionItem}`);
+      }
+    },
+    onHide() {
+      $(this).dropdown('clear', true);
+    }
+  });
+  $dialog.modal({
+    onShow() {
+      $.ajax({
+        url: `${issueBaseUrl}/content-history/detail?comment_id=${commentId}&history_id=${historyId}`,
+        data: {
+          _csrf: csrf,
+        },
+      }).done((resp) => {
+        $dialog.find('.content').html(resp.diffHtml);
+        // there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden.
+        if (resp.canSoftDelete) {
+          $dialog.find('.dialog-header-options').show();
+        }
+      });
+    },
+    onHidden() {
+      $dialog.remove();
+    },
+  }).modal('show');
+}
+
+function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
+  const $headerLeft = $item.find('.comment-header-left');
+  const menuHtml = `
+  <div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
+    <a>&bull; ${i18nTextEdited} ${svg('octicon-triangle-down', 17)}</a>
+    <div class="menu">
+    </div>
+  </div>`;
+
+  $headerLeft.find(`.content-history-menu`).remove();
+  $headerLeft.append($(menuHtml));
+  $headerLeft.find('.dropdown').dropdown({
+    action: 'hide',
+    apiSettings: {
+      cache: false,
+      url: `${issueBaseUrl}/content-history/list?comment_id=${commentId}`,
+    },
+    saveRemoteData: false,
+    onHide() {
+      $(this).dropdown('change values', null);
+    },
+    onChange(value, itemHtml, $item) {
+      if (value && !$item.find('[data-history-is-deleted=1]').length) {
+        showContentHistoryDetail(issueBaseUrl, commentId, value, itemHtml);
+      }
+    },
+  });
+}
+
+export function initIssueContentHistory() {
+  const issueIndex = $('#issueIndex').val();
+  const $itemIssue = $('.timeline-item.comment.first');
+  if (!issueIndex || !$itemIssue.length) return;
+
+  const repoLink = $('#repolink').val();
+  const issueBaseUrl = `${AppSubUrl}/${repoLink}/issues/${issueIndex}`;
+
+  $.ajax({
+    url: `${issueBaseUrl}/content-history/overview`,
+    data: {
+      _csrf: csrf,
+    },
+  }).done((resp) => {
+    i18nTextEdited = resp.i18n.textEdited;
+    i18nTextDeleteFromHistory = resp.i18n.textDeleteFromHistory;
+    i18nTextDeleteFromHistoryConfirm = resp.i18n.textDeleteFromHistoryConfirm;
+    i18nTextOptions = resp.i18n.textOptions;
+
+    if (resp.editedHistoryCountMap[0]) {
+      showContentHistoryMenu(issueBaseUrl, $itemIssue, '0');
+    }
+    for (const [commentId, _editedCount] of Object.entries(resp.editedHistoryCountMap)) {
+      if (commentId === '0') continue;
+      const $itemComment = $(`#issuecomment-${commentId}`);
+      showContentHistoryMenu(issueBaseUrl, $itemComment, commentId);
+    }
+  });
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 868b3ad049..b607015800 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -21,6 +21,7 @@ import {createCodeEditor, createMonaco} from './features/codeeditor.js';
 import {initMarkupAnchors} from './markup/anchors.js';
 import {initNotificationsTable, initNotificationCount} from './features/notification.js';
 import {initLastCommitLoader} from './features/lastcommitloader.js';
+import {initIssueContentHistory} from './features/issue-content-history.js';
 import {initStopwatch} from './features/stopwatch.js';
 import {showLineButton} from './code/linebutton.js';
 import {initMarkupContent, initCommentContent} from './markup/content.js';
@@ -2873,6 +2874,7 @@ $(document).ready(async () => {
   initFileViewToggle();
   initReleaseEditor();
   initRelease();
+  initIssueContentHistory();
 
   const routes = {
     'div.user.settings': initUserSettings,
diff --git a/web_src/js/svg.js b/web_src/js/svg.js
index 185c23c245..11be6b476c 100644
--- a/web_src/js/svg.js
+++ b/web_src/js/svg.js
@@ -13,6 +13,7 @@ import octiconProject from '../../public/img/svg/octicon-project.svg';
 import octiconRepo from '../../public/img/svg/octicon-repo.svg';
 import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
 import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg';
+import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg';
 
 import Vue from 'vue';
 
@@ -32,6 +33,7 @@ export const svgs = {
   'octicon-repo': octiconRepo,
   'octicon-repo-forked': octiconRepoForked,
   'octicon-repo-template': octiconRepoTemplate,
+  'octicon-triangle-down': octiconTriangleDown,
 };
 
 const parser = new DOMParser();