pub-solar/forgejo
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Introduce htmx and use it to avoid full page load on Subscribe and Follow (#28908)

Browse source 
- 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
`<body>` tag so every request that htmx sends is authenticated
- Place `hx-swap="outerHTML"` on the `<body>` 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 `<body>` tag so no changes to the
URL happen in `<form>` 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 `<form>` 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 `<div>` 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 <git@yardenshoham.com>
Co-authored-by: 6543 <m.huber@kithara.com>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
Yarden Shoham 2024-01-30 16:45:54 +02:00 committed by GitHub
parent 27d4c11ec3
commit 3e8414179c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 62 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
package-lock.json generated
View file

@ -26,6 +26,7 @@
"esbuild-loader": "4.0.2", "esbuild-loader": "4.0.2",
"escape-goat": "4.0.0", "escape-goat": "4.0.0",
"fast-glob": "3.3.2", "fast-glob": "3.3.2",
"htmx.org": "1.9.10",
"jquery": "3.7.1", "jquery": "3.7.1",
"katex": "0.16.9", "katex": "0.16.9",
"license-checker-webpack-plugin": "0.2.1", "license-checker-webpack-plugin": "0.2.1",
@ -6158,6 +6159,11 @@
"url": "https://github.com/fb55/entities?sponsor=1" "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": { "node_modules/http-proxy-agent": {
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",

1
package.json
View file

@ -25,6 +25,7 @@
"esbuild-loader": "4.0.2", "esbuild-loader": "4.0.2",
"escape-goat": "4.0.0", "escape-goat": "4.0.0",
"fast-glob": "3.3.2", "fast-glob": "3.3.2",
"htmx.org": "1.9.10",
"jquery": "3.7.1", "jquery": "3.7.1",
"katex": "0.16.9", "katex": "0.16.9",
"license-checker-webpack-plugin": "0.2.1", "license-checker-webpack-plugin": "0.2.1",

9
routers/web/repo/issue_watch.go
View file

@ -8,10 +8,15 @@ import (
"strconv" "strconv"
issues_model "code.gitea.io/gitea/models/issues" 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/context"
"code.gitea.io/gitea/modules/log" "code.gitea.io/gitea/modules/log"
) )
const (
tplWatching base.TplName = "repo/issue/view_content/watching"
)
// IssueWatch sets issue watching // IssueWatch sets issue watching
func IssueWatch(ctx *context.Context) { func IssueWatch(ctx *context.Context) {
issue := GetActionIssue(ctx) issue := GetActionIssue(ctx)
@ -52,5 +57,7 @@ func IssueWatch(ctx *context.Context) {
return return
} }
ctx.Redirect(issue.Link()) ctx.Data["Issue"] = issue
ctx.Data["IssueWatch"] = &issues_model.IssueWatch{IsWatching: watch}
ctx.HTML(http.StatusOK, tplWatching)
} }

11
routers/web/user/profile.go
View file

@ -14,6 +14,7 @@ import (
"code.gitea.io/gitea/models/db" "code.gitea.io/gitea/models/db"
repo_model "code.gitea.io/gitea/models/repo" repo_model "code.gitea.io/gitea/models/repo"
user_model "code.gitea.io/gitea/models/user" 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/context"
"code.gitea.io/gitea/modules/git" "code.gitea.io/gitea/modules/git"
"code.gitea.io/gitea/modules/log" "code.gitea.io/gitea/modules/log"
@ -26,6 +27,10 @@ import (
shared_user "code.gitea.io/gitea/routers/web/shared/user" 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) // OwnerProfile render profile page for a user or a organization (aka, repo owner)
func OwnerProfile(ctx *context.Context) { func OwnerProfile(ctx *context.Context) {
if strings.Contains(ctx.Req.Header.Get("Accept"), "application/rss+xml") { if strings.Contains(ctx.Req.Header.Get("Accept"), "application/rss+xml") {
@ -309,8 +314,10 @@ func Action(ctx *context.Context) {
if err != nil { if err != nil {
log.Error("Failed to apply action %q: %v", ctx.FormString("action"), err) 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 return
} }
ctx.JSONOK()
shared_user.PrepareContextForProfileBigAvatar(ctx)
ctx.HTML(http.StatusOK, tplProfileBigAvatar)
} }

2
templates/base/head.tmpl
View file

@ -29,7 +29,7 @@
{{template "base/head_style" .}} {{template "base/head_style" .}}
{{template "custom/header" .}} {{template "custom/header" .}}
</head> </head>
<body> <body hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}' hx-swap="outerHTML" hx-push-url="false">
{{ctx.DataRaceCheck $.Context}} {{ctx.DataRaceCheck $.Context}}
{{template "custom/body_outer_pre" .}} {{template "custom/body_outer_pre" .}}

14
templates/repo/issue/view_content/sidebar.tmpl
View file

@ -270,19 +270,7 @@
<div class="ui watching"> <div class="ui watching">
<span class="text"><strong>{{ctx.Locale.Tr "notification.notifications"}}</strong></span> <span class="text"><strong>{{ctx.Locale.Tr "notification.notifications"}}</strong></span>
<div class="gt-mt-3"> <div class="gt-mt-3">
<form method="post" action="{{.Issue.Link}}/watch"> {{template "repo/issue/view_content/watching" .}}
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
{{$.CsrfTokenHtml}}
<button class="fluid ui button">
{{if $.IssueWatch.IsWatching}}
{{svg "octicon-mute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.unsubscribe"}}
{{else}}
{{svg "octicon-unmute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.subscribe"}}
{{end}}
</button>
</form>
</div> </div>
</div> </div>
{{end}} {{end}}

12
templates/repo/issue/view_content/watching.tmpl Normal file
View file

@ -0,0 +1,12 @@
<form hx-boost="true" hx-sync="this:replace" hx-target="this" method="post" action="{{.Issue.Link}}/watch">
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
<button class="fluid ui button">
{{if $.IssueWatch.IsWatching}}
{{svg "octicon-mute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.unsubscribe"}}
{{else}}
{{svg "octicon-unmute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.subscribe"}}
{{end}}
</button>
</form>

8
templates/shared/user/profile_big_avatar.tmpl
View file

@ -1,4 +1,4 @@
<div class="ui card"> <div id="profile-avatar-card" class="ui card">
<div id="profile-avatar" class="content gt-df"> <div id="profile-avatar" class="content gt-df">
{{if eq .SignedUserID .ContextUser.ID}} {{if eq .SignedUserID .ContextUser.ID}}
<a class="image" href="{{AppSubUrl}}/user/settings" data-tooltip-content="{{ctx.Locale.Tr "user.change_avatar"}}"> <a class="image" href="{{AppSubUrl}}/user/settings" data-tooltip-content="{{ctx.Locale.Tr "user.change_avatar"}}">
@ -110,13 +110,13 @@
</li> </li>
{{end}} {{end}}
{{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}} {{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}}
<li class="follow"> <li class="follow" hx-target="#profile-avatar-card" hx-indicator="#profile-avatar-card" >
{{if $.IsFollowing}} {{if $.IsFollowing}}
<button class="ui basic red button link-action" data-url="{{.ContextUser.HomeLink}}?action=unfollow"> <button hx-post="{{.ContextUser.HomeLink}}?action=unfollow" class="ui basic red button">
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.unfollow"}} {{svg "octicon-person"}} {{ctx.Locale.Tr "user.unfollow"}}
</button> </button>
{{else}} {{else}}
<button class="ui basic primary button link-action" data-url="{{.ContextUser.HomeLink}}?action=follow"> <button hx-post="{{.ContextUser.HomeLink}}?action=follow" class="ui basic primary button">
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.follow"}} {{svg "octicon-person"}} {{ctx.Locale.Tr "user.follow"}}
</button> </button>
{{end}} {{end}}

1
web_src/js/features/common-global.js
View file

@ -12,6 +12,7 @@ import {showTemporaryTooltip} from '../modules/tippy.js';
import {confirmModal} from './comp/ConfirmModal.js'; import {confirmModal} from './comp/ConfirmModal.js';
import {showErrorToast} from '../modules/toast.js'; import {showErrorToast} from '../modules/toast.js';
import {request, POST} from '../modules/fetch.js'; import {request, POST} from '../modules/fetch.js';
import '../htmx.js';
const {appUrl, appSubUrl, csrfToken, i18n} = window.config; const {appUrl, appSubUrl, csrfToken, i18n} = window.config;

18
web_src/js/htmx.js Normal file
View file

@ -0,0 +1,18 @@
import * as htmx from 'htmx.org';
import {showErrorToast} from './modules/toast.js';
// https://htmx.org/reference/#config
htmx.config.requestClass = 'is-loading';
htmx.config.scrollIntoViewOnBoost = false;
// https://htmx.org/events/#htmx:sendError
document.body.addEventListener('htmx:sendError', (event) => {
// TODO: add translations
showErrorToast(`Network error when calling ${event.detail.requestConfig.path}`);
});
// https://htmx.org/events/#htmx:responseError
document.body.addEventListener('htmx:responseError', (event) => {
// TODO: add translations
showErrorToast(`Error ${event.detail.xhr.status} when calling ${event.detail.requestConfig.path}`);
});

1
webpack.config.js
View file

@ -214,6 +214,7 @@ export default {
}, },
override: { override: {
'khroma@*': {licenseName: 'MIT'}, // https://github.com/fabiospampinato/khroma/pull/33 'khroma@*': {licenseName: 'MIT'}, // https://github.com/fabiospampinato/khroma/pull/33
'htmx.org@1.9.10': {licenseName: 'BSD-2-Clause'}, // "BSD 2-Clause" -> "BSD-2-Clause"
}, },
emitError: true, emitError: true,
allow: '(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR ISC OR CPAL-1.0 OR Unlicense OR EPL-1.0 OR EPL-2.0)', allow: '(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR ISC OR CPAL-1.0 OR Unlicense OR EPL-1.0 OR EPL-2.0)',