Add links to toggle WIP status (#14677)

* Add links to toggle PR WIP status

* Allow PR author to toggle WIP status

* refactors and restyling, remove links from translations

Co-authored-by: Norwin <noerw@users.noreply.github.com>
Co-authored-by: silverwind <me@silverwind.io>

6 files changed, 59 insertions, 25 deletions

diff --git a/integrations/pull_merge_test.go b/integrations/pull_merge_test.go
index 79f62c32c1..b4a3397a45 100644
--- a/integrations/pull_merge_test.go
+++ b/integrations/pull_merge_test.go
@@ -197,10 +197,8 @@ func TestCantMergeWorkInProgress(t *testing.T) {
 		text := strings.TrimSpace(htmlDoc.doc.Find(".merge-section > .item").Last().Text())
 		assert.NotEmpty(t, text, "Can't find WIP text")
 
-		// remove <strong /> from lang
-		expected := i18n.Tr("en", "repo.pulls.cannot_merge_work_in_progress", "[wip]")
-		replacer := strings.NewReplacer("<strong>", "", "</strong>", "")
-		assert.Equal(t, replacer.Replace(expected), text, "Unable to find WIP text")
+		assert.Contains(t, text, i18n.Tr("en", "repo.pulls.cannot_merge_work_in_progress"), "Unable to find WIP text")
+		assert.Contains(t, text, "[wip]", "Unable to find WIP text")
 	})
 }
 
diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index d7d5abce1f..1d39f99425 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -1316,7 +1316,10 @@ pulls.manually_merged_as = The pull request has been manually merged as <a rel="
 pulls.is_closed = The pull request has been closed.
 pulls.has_merged = The pull request has been merged.
 pulls.title_wip_desc = `<a href="#">Start the title with <strong>%s</strong></a> to prevent the pull request from being merged accidentally.`
-pulls.cannot_merge_work_in_progress = This pull request is marked as a work in progress. Remove the <strong>%s</strong> prefix from the title when it's ready
+pulls.cannot_merge_work_in_progress = This pull request is marked as a work in progress. 
+pulls.still_in_progress = Still in progress?
+pulls.add_prefix = Add <strong>%s</strong> prefix
+pulls.remove_prefix = Remove <strong>%s</strong> prefix
 pulls.data_broken = This pull request is broken due to missing fork information.
 pulls.files_conflicted = This pull request has changes conflicting with the target branch.
 pulls.is_checking = "Merge conflict checking is in progress. Try again in few moments."
diff --git a/routers/repo/pull.go b/routers/repo/pull.go
index e13ad0cc03..bb166c68a6 100644
--- a/routers/repo/pull.go
+++ b/routers/repo/pull.go
@@ -519,6 +519,8 @@ func PrepareViewPullInfo(ctx *context.Context, issue *models.Issue) *git.Compare
 		return nil
 	}
 
+	ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
+
 	if pull.IsWorkInProgress() {
 		ctx.Data["IsPullWorkInProgress"] = true
 		ctx.Data["WorkInProgressPrefix"] = pull.GetWorkInProgressPrefix()
diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index 69462797a2..3bdec4becb 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -13,7 +13,7 @@
 									{{avatar .User}}
 								</a>
 							{{end}}
-							<span class="text grey">
+							<span>
 								{{if .User}}
 									<a href="{{.User.HomeLink}}">{{.User.GetDisplayName}}</a>
 								{{else if .Team}}
@@ -39,7 +39,7 @@
 								</span>
 							{{end}}
 							{{if (and $.Permission.IsAdmin (or (eq .Review.Type 1) (eq .Review.Type 3)) (not $.Issue.IsClosed))}}
-								<a href="#" class="ui grey poping up icon dismiss-review-btn" data-review-id="dismiss-review-{{.Review.ID}}" data-content="{{$.i18n.Tr "repo.issues.dismiss_review"}}">
+								<a href="#" class="ui muted poping up icon dismiss-review-btn" data-review-id="dismiss-review-{{.Review.ID}}" data-content="{{$.i18n.Tr "repo.issues.dismiss_review"}}">
 									{{svg "octicon-x" 16}}
 								</a>
 								<div class="ui small modal" id="dismiss-review-modal">
@@ -172,9 +172,18 @@
 					{{$.i18n.Tr "repo.pulls.data_broken"}}
 				</div>
 			{{else if .IsPullWorkInProgress}}
-				<div class="item">
-					<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
-					{{$.i18n.Tr "repo.pulls.cannot_merge_work_in_progress" (.WorkInProgressPrefix|Escape) | Str2html}}
+				<div class="item toggle-wip df ac sb" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title">
+					<div>
+						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{$.i18n.Tr "repo.pulls.cannot_merge_work_in_progress" }}
+					</div>
+					<div>
+						{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
+							<button class="ui compact button">
+								{{$.i18n.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
+							</button>
+						{{end}}
+					</div>
 				</div>
 			{{else if .Issue.PullRequest.IsChecking}}
 				<div class="item">
@@ -182,7 +191,7 @@
 					{{$.i18n.Tr "repo.pulls.is_checking"}}
 				</div>
 			{{else if .Issue.PullRequest.IsEmpty}}
-				<div class="item text grey">
+				<div class="item">
 					<i class="icon icon-octicon">{{svg "octicon-alert" 16}}</i>
 					{{$.i18n.Tr "repo.pulls.is_empty"}}
 				</div>
@@ -443,14 +452,14 @@
 								{{svg "octicon-x"}}
 								{{$.i18n.Tr "repo.pulls.no_merge_desc"}}
 							</div>
-							<div class="item text grey">
+							<div class="item">
 								{{svg "octicon-info"}}
 								{{$.i18n.Tr "repo.pulls.no_merge_helper"}}
 							</div>
 						{{end}}
 					{{else}}
 						<div class="ui divider"></div>
-						<div class="item text grey">
+						<div class="item">
 							{{svg "octicon-info"}}
 							{{$.i18n.Tr "repo.pulls.no_merge_access"}}
 						</div>
@@ -503,7 +512,7 @@
 						{{svg "octicon-x"}}
 						{{$.i18n.Tr "repo.pulls.cannot_auto_merge_desc"}}
 					</div>
-					<div class="item text grey">
+					<div class="item">
 						{{svg "octicon-info"}}
 						{{$.i18n.Tr "repo.pulls.cannot_auto_merge_helper"}}
 					</div>
@@ -511,17 +520,21 @@
 			{{end}}
 
 			{{if and (gt .Issue.PullRequest.CommitsBehind 0) (not  .Issue.IsClosed) (not .Issue.PullRequest.IsChecking) (not .IsPullFilesConflicted) (not .IsPullRequestBroken) (not $canAutoMerge)}}
-				<div class="item text grey">
-					<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
-					{{$.i18n.Tr "repo.pulls.outdated_with_base_branch"}}
-					{{if .UpdateAllowed}}
-						<form action="{{.Link}}/update" method="post" class="ui floating right">
-							{{.CsrfTokenHtml}}
-							<button class="ui compact button" data-do="update">
-								<span class="ui text">{{$.i18n.Tr "repo.pulls.update_branch"}}</span>
-							</button>
-						</form>
-					{{end}}
+				<div class="item df ac sb">
+					<div>
+						<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
+						{{$.i18n.Tr "repo.pulls.outdated_with_base_branch"}}
+					</div>
+					<div>
+						{{if .UpdateAllowed}}
+							<form action="{{.Link}}/update" method="post">
+								{{.CsrfTokenHtml}}
+								<button class="ui compact button" data-do="update">
+									<span class="ui text">{{$.i18n.Tr "repo.pulls.update_branch"}}</span>
+								</button>
+							</form>
+						{{end}}
+					</div>
 				</div>
 			{{end}}
 
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index e3530fc45b..2f42957266 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -91,6 +91,13 @@
 					{{end}}
 				</div>
 			</div>
+			{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .HasMerged) (not .Issue.IsClosed) (not .IsPullWorkInProgress)}}
+				<div class="toggle-wip" data-title="{{.Issue.Title}}" data-wip-prefix="{{(index .PullRequestWorkInProgressPrefixes 0| Escape)}}" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title">
+					<a class="muted">
+						{{.i18n.Tr "repo.pulls.still_in_progress"}} {{.i18n.Tr "repo.pulls.add_prefix" (index .PullRequestWorkInProgressPrefixes 0| Escape) | Safe}}
+					</a>
+				</div>
+			{{end}}
 			<div class="ui divider"></div>
 		{{end}}
 
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 5ba2662ea4..9f016ca84a 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -909,6 +909,17 @@ async function initRepository() {
       return false;
     });
 
+    // Toggle WIP
+    $('.toggle-wip a, .toggle-wip button').on('click', async (e) => {
+      e.preventDefault();
+      const {title, wipPrefix, updateUrl} = e.currentTarget.closest('.toggle-wip').dataset;
+      await $.post(updateUrl, {
+        _csrf: csrf,
+        title: title?.startsWith(wipPrefix) ? title.substr(wipPrefix.length).trim() : `${wipPrefix.trim()} ${title}`,
+      });
+      reload();
+    });
+
     // Issue Comments
     initIssueComments();