From 3e8414179c3f3e8a12d3a66fdf32c144f941f5c3 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 30 Jan 2024 16:45:54 +0200 Subject: [PATCH] Introduce htmx and use it to avoid full page load on `Subscribe` and `Follow` (#28908) - Closes https://github.com/go-gitea/gitea/issues/28880 This change introduces htmx with the hope we could use it to make Gitea more reactive while keeping our "HTML rendered on the server" approach. - Add `htmx.js` that imports `htmx.org` and initializes error toasts - Place `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` on the `` tag so every request that htmx sends is authenticated - Place `hx-swap="outerHTML"` on the `` tag so the response of each htmx request replaces the tag it targets (as opposed to its inner content) - Place `hx-push-url="false"` on the `` tag so no changes to the URL happen in `
` tags - Add the `is-loading` class during request ### Error toasts in action ![errors](https://github.com/go-gitea/gitea/assets/20454870/181a1beb-1cb8-4858-abe8-fa1fc3f5b8f3) ## Don't do a full page load when clicking the subscribe button - Refactor the form around the subscribe button into its own template - Use htmx to perform the form submission - `hx-boost="true"` to prevent the default form submission behavior of a full page load - `hx-sync="this:replace"` to replace the current request (in case the button is clicked again before the response is returned) - `hx-target="this"` to replace the form tag with the new form tag - Change the backend response to return a `` tag instead of a redirect to the issue page ### Before ![subscribe_before](https://github.com/go-gitea/gitea/assets/20454870/cb2439a2-c3c0-425c-8d3c-5d646b1cdc28) ### After ![subscribe_after](https://github.com/go-gitea/gitea/assets/20454870/6fcd77d8-7b11-40b0-af4f-b152aaad787c) ## Don't do a full page load when clicking the follow button - Use htmx to perform the button request - `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST request to follow the user - `hx-target="#profile-avatar-card"` to target the card div for replacement - `hx-indicator="#profile-avatar-card"` to place the loading indicator on the card - Change the backend response to return a `
` tag (the card) instead of a redirect to the user page ### Before ![follow_before](https://github.com/go-gitea/gitea/assets/20454870/a210b643-6e74-4ff9-8e61-d658c62edf1f) ### After ![follow_after](https://github.com/go-gitea/gitea/assets/20454870/5bb19ae9-0d59-4ae3-b538-4c83334e4722) --------- Signed-off-by: Yarden Shoham Co-authored-by: 6543 Co-authored-by: Giteabot --- package-lock.json | 6 ++++++ package.json | 1 + routers/web/repo/issue_watch.go | 9 ++++++++- routers/web/user/profile.go | 11 +++++++++-- templates/base/head.tmpl | 2 +- templates/repo/issue/view_content/sidebar.tmpl | 14 +------------- .../repo/issue/view_content/watching.tmpl | 12 ++++++++++++ templates/shared/user/profile_big_avatar.tmpl | 8 ++++---- web_src/js/features/common-global.js | 1 + web_src/js/htmx.js | 18 ++++++++++++++++++ webpack.config.js | 1 + 11 files changed, 62 insertions(+), 21 deletions(-) create mode 100644 templates/repo/issue/view_content/watching.tmpl create mode 100644 web_src/js/htmx.js diff --git a/package-lock.json b/package-lock.json index b299967eb..d73fc5df5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "esbuild-loader": "4.0.2", "escape-goat": "4.0.0", "fast-glob": "3.3.2", + "htmx.org": "1.9.10", "jquery": "3.7.1", "katex": "0.16.9", "license-checker-webpack-plugin": "0.2.1", @@ -6158,6 +6159,11 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/htmx.org": { + "version": "1.9.10", + "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-1.9.10.tgz", + "integrity": "sha512-UgchasltTCrTuU2DQLom3ohHrBvwr7OqpwyAVJ9VxtNBng4XKkVsqrv0Qr3srqvM9ZNI3f1MmvVQQqK7KW/bTA==" + }, "node_modules/http-proxy-agent": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz", diff --git a/package.json b/package.json index 801e85db8..5c6de1dd6 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "esbuild-loader": "4.0.2", "escape-goat": "4.0.0", "fast-glob": "3.3.2", + "htmx.org": "1.9.10", "jquery": "3.7.1", "katex": "0.16.9", "license-checker-webpack-plugin": "0.2.1", diff --git a/routers/web/repo/issue_watch.go b/routers/web/repo/issue_watch.go index 1cb5cc716..1f51ceba5 100644 --- a/routers/web/repo/issue_watch.go +++ b/routers/web/repo/issue_watch.go @@ -8,10 +8,15 @@ import ( "strconv" issues_model "code.gitea.io/gitea/models/issues" + "code.gitea.io/gitea/modules/base" "code.gitea.io/gitea/modules/context" "code.gitea.io/gitea/modules/log" ) +const ( + tplWatching base.TplName = "repo/issue/view_content/watching" +) + // IssueWatch sets issue watching func IssueWatch(ctx *context.Context) { issue := GetActionIssue(ctx) @@ -52,5 +57,7 @@ func IssueWatch(ctx *context.Context) { return } - ctx.Redirect(issue.Link()) + ctx.Data["Issue"] = issue + ctx.Data["IssueWatch"] = &issues_model.IssueWatch{IsWatching: watch} + ctx.HTML(http.StatusOK, tplWatching) } diff --git a/routers/web/user/profile.go b/routers/web/user/profile.go index c5305ebcd..73ab93cae 100644 --- a/routers/web/user/profile.go +++ b/routers/web/user/profile.go @@ -14,6 +14,7 @@ import ( "code.gitea.io/gitea/models/db" repo_model "code.gitea.io/gitea/models/repo" user_model "code.gitea.io/gitea/models/user" + "code.gitea.io/gitea/modules/base" "code.gitea.io/gitea/modules/context" "code.gitea.io/gitea/modules/git" "code.gitea.io/gitea/modules/log" @@ -26,6 +27,10 @@ import ( shared_user "code.gitea.io/gitea/routers/web/shared/user" ) +const ( + tplProfileBigAvatar base.TplName = "shared/user/profile_big_avatar" +) + // OwnerProfile render profile page for a user or a organization (aka, repo owner) func OwnerProfile(ctx *context.Context) { if strings.Contains(ctx.Req.Header.Get("Accept"), "application/rss+xml") { @@ -309,8 +314,10 @@ func Action(ctx *context.Context) { if err != nil { log.Error("Failed to apply action %q: %v", ctx.FormString("action"), err) - ctx.JSONError(fmt.Sprintf("Action %q failed", ctx.FormString("action"))) + ctx.Error(http.StatusBadRequest, fmt.Sprintf("Action %q failed", ctx.FormString("action"))) return } - ctx.JSONOK() + + shared_user.PrepareContextForProfileBigAvatar(ctx) + ctx.HTML(http.StatusOK, tplProfileBigAvatar) } diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl index 876b42d51..b9c050fdd 100644 --- a/templates/base/head.tmpl +++ b/templates/base/head.tmpl @@ -29,7 +29,7 @@ {{template "base/head_style" .}} {{template "custom/header" .}} - + {{ctx.DataRaceCheck $.Context}} {{template "custom/body_outer_pre" .}} diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index 4334e4bcb..6c13eef02 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -270,19 +270,7 @@
{{ctx.Locale.Tr "notification.notifications"}}
- - - {{$.CsrfTokenHtml}} - - + {{template "repo/issue/view_content/watching" .}}
{{end}} diff --git a/templates/repo/issue/view_content/watching.tmpl b/templates/repo/issue/view_content/watching.tmpl new file mode 100644 index 000000000..0e8562fed --- /dev/null +++ b/templates/repo/issue/view_content/watching.tmpl @@ -0,0 +1,12 @@ +
+ + +
diff --git a/templates/shared/user/profile_big_avatar.tmpl b/templates/shared/user/profile_big_avatar.tmpl index a637a9a5f..4fbc43f54 100644 --- a/templates/shared/user/profile_big_avatar.tmpl +++ b/templates/shared/user/profile_big_avatar.tmpl @@ -1,4 +1,4 @@ -
+
{{if eq .SignedUserID .ContextUser.ID}} @@ -110,13 +110,13 @@ {{end}} {{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}} -