Don't do a full page load when clicking `Watch` or `Star` (#29001)

- The watch/unwatch button and star/unstar get their own template
- The backend returns HTML instead of redirect

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: John Olheiser <john.olheiser@gmail.com>

routers/web/repo/repo.go

@@ -302,6 +302,11 @@ func CreatePost(ctx *context.Context) {
 	handleCreateError(ctx, ctxUser, err, "CreatePost", tplCreate, &form)
 }
 
+const (
+	tplWatchUnwatch base.TplName = "repo/watch_unwatch"
+	tplStarUnstar   base.TplName = "repo/star_unstar"
+)
+
 // Action response for actions to a repository
 func Action(ctx *context.Context) {
 	var err error
@@ -334,6 +339,32 @@ func Action(ctx *context.Context) {
 		return
 	}
 
+	switch ctx.Params(":action") {
+	case "watch", "unwatch":
+		ctx.Data["IsWatchingRepo"] = repo_model.IsWatching(ctx, ctx.Doer.ID, ctx.Repo.Repository.ID)
+	case "star", "unstar":
+		ctx.Data["IsStaringRepo"] = repo_model.IsStaring(ctx, ctx.Doer.ID, ctx.Repo.Repository.ID)
+	}
+
+	switch ctx.Params(":action") {
+	case "watch", "unwatch", "star", "unstar":
+		// we have to reload the repository because NumStars or NumWatching (used in the templates) has just changed
+		ctx.Data["Repository"], err = repo_model.GetRepositoryByName(ctx, ctx.Repo.Repository.OwnerID, ctx.Repo.Repository.Name)
+		if err != nil {
+			ctx.ServerError(fmt.Sprintf("Action (%s)", ctx.Params(":action")), err)
+			return
+		}
+	}
+
+	switch ctx.Params(":action") {
+	case "watch", "unwatch":
+		ctx.HTML(http.StatusOK, tplWatchUnwatch)
+		return
+	case "star", "unstar":
+		ctx.HTML(http.StatusOK, tplStarUnstar)
+		return
+	}
+
 	ctx.RedirectToFirst(ctx.FormString("redirect_to"), ctx.Repo.RepoLink)
 }
 

templates/repo/header.tmpl

@@ -58,37 +58,9 @@
 						{{svg "octicon-rss" 16}}
 					</a>
 					{{end}}
-					<form method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
+					{{template "repo/watch_unwatch" $}}
-						{{$.CsrfTokenHtml}}
-						<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>
-							<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
-								{{if $.IsWatchingRepo}}
-									{{svg "octicon-eye-closed" 16}}<span class="text">{{ctx.Locale.Tr "repo.unwatch"}}</span>
-								{{else}}
-									{{svg "octicon-eye"}}<span class="text">{{ctx.Locale.Tr "repo.watch"}}</span>
-								{{end}}
-							</button>
-							<a class="ui basic label" href="{{.Link}}/watchers">
-								{{CountFmt .NumWatches}}
-							</a>
-						</div>
-					</form>
 					{{if not $.DisableStars}}
-						<form method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
+					{{template "repo/star_unstar" $}}
-							{{$.CsrfTokenHtml}}
-							<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}}>
-								<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
-									{{if $.IsStaringRepo}}
-										{{svg "octicon-star-fill"}}<span class="text">{{ctx.Locale.Tr "repo.unstar"}}</span>
-									{{else}}
-										{{svg "octicon-star"}}<span class="text">{{ctx.Locale.Tr "repo.star"}}</span>
-									{{end}}
-								</button>
-								<a class="ui basic label" href="{{.Link}}/stars">
-									{{CountFmt .NumStars}}
-								</a>
-							</div>
-						</form>
 					{{end}}
 					{{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}}
 						<div class="ui labeled button

templates/repo/star_unstar.tmpl

@@ -0,0 +1,14 @@
+<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star">
+	<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}}>
+		<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
+			{{if $.IsStaringRepo}}
+				{{svg "octicon-star-fill"}}<span class="text">{{ctx.Locale.Tr "repo.unstar"}}</span>
+			{{else}}
+				{{svg "octicon-star"}}<span class="text">{{ctx.Locale.Tr "repo.star"}}</span>
+			{{end}}
+		</button>
+		<a hx-boost="false" class="ui basic label" href="{{$.RepoLink}}/stars">
+			{{CountFmt .Repository.NumStars}}
+		</a>
+	</div>
+</form>

templates/repo/watch_unwatch.tmpl

@@ -0,0 +1,14 @@
+<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch">
+	<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>
+		<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
+			{{if $.IsWatchingRepo}}
+				{{svg "octicon-eye-closed" 16}}<span class="text">{{ctx.Locale.Tr "repo.unwatch"}}</span>
+			{{else}}
+				{{svg "octicon-eye"}}<span class="text">{{ctx.Locale.Tr "repo.watch"}}</span>
+			{{end}}
+		</button>
+		<a hx-boost="false" class="ui basic label" href="{{.RepoLink}}/watchers">
+			{{CountFmt .Repository.NumWatches}}
+		</a>
+	</div>
+</form>