Refactor issue page info (#32445)

Fix a longstanding TODO since 2021 (#14826) / 2018 (#2531)

routers/web/repo/issue.go

@@ -1443,11 +1443,11 @@ func ViewIssue(ctx *context.Context) {
 	}
 
 	if issue.IsPull && !ctx.Repo.CanRead(unit.TypeIssues) {
-		ctx.Data["IssueType"] = "pulls"
+		ctx.Data["IssueDependencySearchType"] = "pulls"
 	} else if !issue.IsPull && !ctx.Repo.CanRead(unit.TypePullRequests) {
-		ctx.Data["IssueType"] = "issues"
+		ctx.Data["IssueDependencySearchType"] = "issues"
 	} else {
-		ctx.Data["IssueType"] = "all"
+		ctx.Data["IssueDependencySearchType"] = "all"
 	}
 
 	ctx.Data["IsProjectsEnabled"] = ctx.Repo.CanRead(unit.TypeProjects)

templates/repo/issue/view_content.tmpl

@@ -1,11 +1,4 @@
 <div class="issue-content">
-	<!-- I know, there is probably a better way to do this (moved from sidebar.tmpl, original author: 6543 @ 2021-02-28) -->
-	<!-- Agree, there should be a better way, eg: introduce window.config.pageData (original author: wxiaoguang @ 2021-09-05) -->
-	<input type="hidden" id="repolink" value="{{$.RepoRelPath}}">
-	<input type="hidden" id="repoId" value="{{.Repository.ID}}">
-	<input type="hidden" id="issueIndex" value="{{.Issue.Index}}">
-	<input type="hidden" id="type" value="{{.IssueType}}">
-
 	{{$createdStr:= DateUtils.TimeSince .Issue.CreatedUnix}}
 	<div class="issue-content-left comment-list prevent-before-timeline">
 		<div class="ui timeline">

templates/repo/issue/view_title.tmpl

@@ -3,6 +3,12 @@
 		{{template "base/alert" .}}
 	</div>
 {{end}}
+<div class="tw-hidden" id="issue-page-info"
+	data-issue-index="{{$.Issue.Index}}"
+	data-issue-dependency-search-type="{{$.IssueDependencySearchType}}"
+	data-issue-repo-link="{{$.RepoLink}}"
+	data-issue-repo-id="{{$.Repository.ID}}"
+></div>
 <div class="issue-title-header">
 	{{$canEditIssueTitle := and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
 	<div class="issue-title" id="issue-title-display">

templates/repo/pulls/files.tmpl

@@ -1,8 +1,4 @@
 {{template "base/head" .}}
-
-<input type="hidden" id="repolink" value="{{$.RepoRelPath}}">
-<input type="hidden" id="issueIndex" value="{{.Issue.Index}}">
-
 <div role="main" aria-label="{{.Title}}" class="page-content repository view issue pull files diff">
 	{{template "repo/header" .}}
 	<div class="ui container fluid padded">

web_src/js/features/repo-issue-content.ts

@@ -3,8 +3,8 @@ import {svg} from '../svg.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {GET, POST} from '../modules/fetch.ts';
 import {showElem} from '../utils/dom.ts';
+import {parseIssuePageInfo} from '../utils.ts';
 
-const {appSubUrl} = window.config;
 let i18nTextEdited;
 let i18nTextOptions;
 let i18nTextDeleteFromHistory;
@@ -121,15 +121,14 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
 }
 
 export async function initRepoIssueContentHistory() {
-  const issueIndex = $('#issueIndex').val();
+  const issuePageInfo = parseIssuePageInfo();
-  if (!issueIndex) return;
+  if (!issuePageInfo.issueNumber) return;
 
   const $itemIssue = $('.repository.issue .timeline-item.comment.first'); // issue(PR) main content
   const $comments = $('.repository.issue .comment-list .comment'); // includes: issue(PR) comments, review comments, code comments
   if (!$itemIssue.length && !$comments.length) return;
 
-  const repoLink = $('#repolink').val();
+  const issueBaseUrl = `${issuePageInfo.repoLink}/issues/${issuePageInfo.issueNumber}`;
-  const issueBaseUrl = `${appSubUrl}/${repoLink}/issues/${issueIndex}`;
 
   try {
     const response = await GET(`${issueBaseUrl}/content-history/overview`);

web_src/js/features/repo-issue.ts

@@ -4,7 +4,7 @@ import {createTippy, showTemporaryTooltip} from '../modules/tippy.ts';
 import {hideElem, showElem, toggleElem} from '../utils/dom.ts';
 import {setFileFolding} from './file-fold.ts';
 import {ComboMarkdownEditor, getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
-import {toAbsoluteUrl} from '../utils.ts';
+import {parseIssuePageInfo, toAbsoluteUrl} from '../utils.ts';
 import {GET, POST} from '../modules/fetch.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
@@ -57,13 +57,11 @@ function excludeLabel(item) {
 }
 
 export function initRepoIssueSidebarList() {
-  const repolink = $('#repolink').val();
+  const issuePageInfo = parseIssuePageInfo();
-  const repoId = $('#repoId').val();
   const crossRepoSearch = $('#crossRepoSearch').val();
-  const tp = $('#type').val();
+  let issueSearchUrl = `${issuePageInfo.repoLink}/issues/search?q={query}&type=${issuePageInfo.issueDependencySearchType}`;
-  let issueSearchUrl = `${appSubUrl}/${repolink}/issues/search?q={query}&type=${tp}`;
   if (crossRepoSearch === 'true') {
-    issueSearchUrl = `${appSubUrl}/issues/search?q={query}&priority_repo_id=${repoId}&type=${tp}`;
+    issueSearchUrl = `${appSubUrl}/issues/search?q={query}&priority_repo_id=${issuePageInfo.repoId}&type=${issuePageInfo.issueDependencySearchType}`;
   }
   $('#new-dependency-drop-list')
     .dropdown({

web_src/js/types.ts

@@ -37,6 +37,13 @@ export type IssuePathInfo = {
   indexString?: string,
 }
 
+export type IssuePageInfo = {
+  repoLink: string,
+  repoId: number,
+  issueNumber: number,
+  issueDependencySearchType: string,
+}
+
 export type Issue = {
   id: number;
   number: number;

web_src/js/utils.ts

@@ -1,5 +1,5 @@
-import {encode, decode} from 'uint8-to-base64';
+import {decode, encode} from 'uint8-to-base64';
-import type {IssuePathInfo} from './types.ts';
+import type {IssuePageInfo, IssuePathInfo} from './types.ts';
 
 // transform /path/to/file.ext to file.ext
 export function basename(path: string): string {
@@ -43,6 +43,16 @@ export function parseIssueNewHref(href: string): IssuePathInfo {
   return {ownerName, repoName, pathType, indexString};
 }
 
+export function parseIssuePageInfo(): IssuePageInfo {
+  const el = document.querySelector('#issue-page-info');
+  return {
+    issueNumber: parseInt(el?.getAttribute('data-issue-index')),
+    issueDependencySearchType: el?.getAttribute('data-issue-dependency-search-type') || '',
+    repoId: parseInt(el?.getAttribute('data-issue-repo-id')),
+    repoLink: el?.getAttribute('data-issue-repo-link') || '',
+  };
+}
+
 // parse a URL, either relative '/path' or absolute 'https://localhost/path'
 export function parseUrl(str: string): URL {
   return new URL(str, str.startsWith('http') ? undefined : window.location.origin);