Comment - Reference in new issue (#14366)

* Implemented "Reference in new issue"

* Fixed menu style on "pulls/x/files" because "button" has a style.

* Added context menu for PR file comments.

* Use only a single modal for every comment.

* Use current repository as default. Added search filter.

* Added suggested changes.

* Fixed assignment.

Co-authored-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: 6543 <6543@obermui.de>

options/locale/locale_en-US.ini

@@ -1068,6 +1068,7 @@ issues.commented_at = `commented <a href="#%s">%s</a>`
 issues.delete_comment_confirm = Are you sure you want to delete this comment?
 issues.context.copy_link = Copy Link
 issues.context.quote_reply = Quote Reply
+issues.context.reference_issue = Reference in new issue
 issues.context.edit = Edit
 issues.context.delete = Delete
 issues.no_content = There is no content yet.
@@ -1225,6 +1226,7 @@ issues.review.resolve_conversation = Resolve conversation
 issues.review.un_resolve_conversation = Unresolve conversation
 issues.review.resolved_by = marked this conversation as resolved
 issues.assignee.error = Not all assignees was added due to an unexpected error.
+issues.reference_issue.body = Body
 
 pulls.desc = Enable pull requests and code reviews.
 pulls.new = New Pull Request

templates/repo/diff/box.tmpl

@@ -164,6 +164,8 @@
 			</div>
 		{{end}}
 
+		{{template "repo/issue/view_content/reference_issue_dialog" .}}
+
 		{{if .IsSplitStyle}}
 			<script>
 				document.addEventListener('DOMContentLoaded', () => {

templates/repo/issue/view_content.tmpl

@@ -52,7 +52,7 @@
 									</div>
 								{{end}}
 								{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}
-								{{template "repo/issue/view_content/context_menu" Dict "ctx" $ "item" .Issue "delete" false "diff" false "IsCommentPoster" $.IsIssuePoster}}
+								{{template "repo/issue/view_content/context_menu" Dict "ctx" $ "item" .Issue "delete" false "issue" true "diff" false "IsCommentPoster" $.IsIssuePoster}}
 							{{end}}
 						</div>
 					</div>
@@ -210,6 +210,8 @@
 	</div>
 </div>
 
+{{template "repo/issue/view_content/reference_issue_dialog" .}}
+
 <div class="hide" id="no-content">
 	<span class="no-content">{{.i18n.Tr "repo.issues.no_content"}}</span>
 </div>

templates/repo/issue/view_content/context_menu.tmpl

@@ -4,12 +4,15 @@
 		{{svg "octicon-kebab-horizontal"}}
 	</a>
 	<div class="menu">
+		{{ $referenceUrl := "" }}
 		{{ if .issue }}
-			<div class="item context clipboard" data-clipboard-text="{{Printf "%s%s/issues/%d#%s" AppUrl .ctx.Repository.FullName .ctx.Issue.Index .item.HashTag}}">{{.ctx.i18n.Tr "repo.issues.context.copy_link"}}</div>
+			{{ $referenceUrl = Printf "%s%s/issues/%d#%s" AppUrl .ctx.Repository.FullName .ctx.Issue.Index .item.HashTag }}
 		{{ else }}
-			<div class="item context clipboard" data-clipboard-text="{{Printf "%s%s/pulls/%d/files#%s" AppUrl .ctx.Repository.FullName .ctx.Issue.Index .item.HashTag}}">{{.ctx.i18n.Tr "repo.issues.context.copy_link"}}</div>
+			{{ $referenceUrl = Printf "%s%s/pulls/%d/files#%s" AppUrl .ctx.Repository.FullName .ctx.Issue.Index .item.HashTag }}
 		{{ end }}
+		<div class="item context clipboard" data-clipboard-text="{{$referenceUrl}}">{{.ctx.i18n.Tr "repo.issues.context.copy_link"}}</div>
 		<div class="item context quote-reply {{if .diff}}quote-reply-diff{{end}}" data-target="{{.item.ID}}">{{.ctx.i18n.Tr "repo.issues.context.quote_reply"}}</div>
+		<div class="item context reference-issue" data-target="{{.item.ID}}" data-modal="#reference-issue-modal" data-poster="{{.item.Poster.GetDisplayName}}" data-reference="{{$referenceUrl}}">{{.ctx.i18n.Tr "repo.issues.context.reference_issue"}}</div>
 		{{if or .ctx.Permission.IsAdmin .IsCommentPoster .ctx.HasIssuesOrPullsWritePermission}}
 			<div class="divider"></div>
 			<div class="item context edit-content">{{.ctx.i18n.Tr "repo.issues.context.edit"}}</div>

templates/repo/issue/view_content/reference_issue_dialog.tmpl

@@ -0,0 +1,30 @@
+<div class="ui small modal" id="reference-issue-modal">
+	<div class="header">
+		{{.i18n.Tr "repo.issues.context.reference_issue"}}
+	</div>
+	<div class="content" style="text-align:left">
+		<form class="ui form" action="{{ Printf "%s/issues/new" .Repository.Link }}" method="post">
+			{{.CsrfTokenHtml}}
+			<div class="ui segment content">
+				<div class="field">
+					<span class="text"><strong>{{.i18n.Tr "repository"}}</strong></span>
+					<div class="ui search normal selection dropdown issue_reference_repository_search">
+						<div class="default text">{{.Repository.FullName}}</div>
+						<div class="menu"></div>
+					</div>
+				</div>
+				<div class="field">
+					<span class="text"><strong>{{.i18n.Tr "repo.milestones.title"}}</strong></span>
+					<input name="title" value="" autofocus required maxlength="255" autocomplete="off">
+				</div>
+				<div class="field">
+					<span class="text"><strong>{{.i18n.Tr "repo.issues.reference_issue.body"}}</strong></span>
+					<textarea name="content" class="form-control"></textarea>
+				</div>
+				<div class="text right">
+					<button class="ui green button">{{.i18n.Tr "repo.issues.create"}}</button>
+				</div>
+			</div>
+		</form>
+	</div>
+</div>

web_src/js/index.js

@@ -932,6 +932,27 @@ async function initRepository() {
       event.preventDefault();
     });
 
+    // Reference issue
+    $(document).on('click', '.reference-issue', function (event) {
+      const $this = $(this);
+
+      $this.closest('.dropdown').find('.menu').toggle('visible');
+
+      const content = $(`#comment-${$this.data('target')}`).text();
+      const subject = content.split('\n', 1)[0].slice(0, 255);
+
+      const poster = $this.data('poster');
+      const reference = $this.data('reference');
+
+      const $modal = $($this.data('modal'));
+      $modal.find('input[name="title"').val(subject);
+      $modal.find('textarea[name="content"]').val(`${content}\n\n_Originally posted by @${poster} in ${reference}_`);
+
+      $modal.modal('show');
+
+      event.preventDefault();
+    });
+
     // Edit issue or comment content
     $(document).on('click', '.edit-content', async function (event) {
       $(this).closest('.dropdown').find('.menu').toggle('visible');
@@ -2337,6 +2358,31 @@ function initTemplateSearch() {
   changeOwner();
 }
 
+function initIssueReferenceRepositorySearch() {
+  $('.issue_reference_repository_search')
+    .dropdown({
+      apiSettings: {
+        url: `${AppSubUrl}/api/v1/repos/search?q={query}&limit=20`,
+        onResponse(response) {
+          const filteredResponse = {success: true, results: []};
+          $.each(response.data, (_r, repo) => {
+            filteredResponse.results.push({
+              name: htmlEscape(repo.full_name),
+              value: repo.full_name
+            });
+          });
+          return filteredResponse;
+        },
+        cache: false,
+      },
+      onChange(_value, _text, $choice) {
+        const $form = $choice.closest('form');
+        $form.attr('action', `${AppSubUrl}/${_text}/issues/new`);
+      },
+      fullTextSearch: true
+    });
+}
+
 $(document).ready(async () => {
   // Show exact time
   $('.time-since').each(function () {
@@ -2553,6 +2599,7 @@ $(document).ready(async () => {
   initPullRequestReview();
   initRepoStatusChecker();
   initTemplateSearch();
+  initIssueReferenceRepositorySearch();
   initContextPopups();
   initTableSort();
   initNotificationsTable();