Give each event its own page and show bodies the same everywhere (closes #369)

Each row of the recent events on the webhook page links to the
event's own page, /hook/{id}/events/{eventID}, and expands to show its
body; only the newest starts expanded. The event's page shows its
details, its whole body and every delivery with its attempts.

One renderer, newBodyView with templates/event_body.html, shows a body
in all three places: whole up to 32 KiB, cut there in the lists with a
link to the event's page, JSON pretty-printed, a body of more than 200
lines or 32 KiB in a scrolling box, and a body that is not text left
out beside its download link. A resubmitted copy links to its
original's page.

Model: opus-5-5

internal/server/alpine_browser_test.go

@@ -39,6 +39,9 @@ const (
 	// the mobile menu button instead of the navigation links.
 	phoneWidth  = 390
 	phoneHeight = 844
+
+	// olderBody is the body of the event received before the newest.
+	olderBody = "the older event"
 )
 
 // TestAlpineRunsUnderTheSecurityPolicy loads the webhook page and the
@@ -63,6 +66,7 @@ func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 			Active:    true,
 		},
 	).Error)
+	env.seedEvent(t, webhook.ID, olderBody)
 	event := env.seedEvent(t, webhook.ID, `{"hello":"browser"}`)
 	target := env.seedTarget(t, webhook.ID)
 	dlv := env.seedFailedDelivery(t, webhook.ID, event.ID, target.ID)
@@ -86,6 +90,7 @@ func TestAlpineRunsUnderTheSecurityPolicy(t *testing.T) {
 	checkAddForms(ctx, t, page)
 	checkTargetType(ctx, t, page+"/events")
 	checkCopy(ctx, t, page)
+	checkRecentEvents(ctx, t, page)
 	checkEventLog(ctx, t, page+"/events", event.ID, target.Name)
 	checkMobileMenu(ctx, t, page)
 
@@ -363,6 +368,46 @@ func checkCopy(ctx context.Context, t *testing.T, url string) {
 		`clicking Copy does not show "Copied"`)
 }
 
+// checkRecentEvents loads a webhook page and checks that of its recent
+// events only the newest starts expanded, showing its body, that
+// clicking the older one's row expands it and clicking again collapses
+// it, and that clicking the newest one's row collapses it. It then
+// follows the newest one's Open link to the event's own page, which
+// shows the body.
+func checkRecentEvents(ctx context.Context, t *testing.T, url string) {
+	t.Helper()
+
+	// The newest event's body is pretty-printed JSON. Each row's
+	// toggle is the button in the element that holds its state.
+	newest := `//pre[contains(., '"hello": "browser"')]`
+	older := `//pre[text()="` + olderBody + `"]`
+	toggle := `/ancestor::div[@x-data][1]//button`
+
+	require.NoError(t, chromedp.Run(ctx, loadPage(url)))
+
+	assert.True(t, shown(ctx, newest), "the newest event starts collapsed")
+	assert.True(t, hidden(ctx, older), "an older event starts expanded")
+
+	click(ctx, t, older+toggle)
+	assert.True(t, shown(ctx, older), "clicking an event does not expand it")
+
+	click(ctx, t, older+toggle)
+	assert.True(t, hidden(ctx, older),
+		"clicking an event again does not collapse it")
+
+	click(ctx, t, newest+toggle)
+	assert.True(t, hidden(ctx, newest),
+		"clicking the newest event does not collapse it")
+
+	require.NoError(t, chromedp.Run(ctx, loadPage(url)))
+	click(ctx, t, newest+`/ancestor::div[@x-data][1]//a[text()="Open"]`)
+
+	assert.True(t, shown(ctx, `//h2[text()="Body"]`),
+		"Open does not lead to the event's own page")
+	assert.True(t, shown(ctx, newest),
+		"the event's own page does not show its body")
+}
+
 // checkEventLog loads the event log and checks that clicking an event's
 // row expands it, that in there clicking its delivery shows the
 // delivery's attempts and clicking again hides them, and that clicking
@@ -375,7 +420,7 @@ func checkEventLog(
 	// The event's row shows its ID, and its Resubmit form is in the part
 	// that expands. The delivery's row there shows the target's name.
 	eventRow := `//span[text()="` + eventID + `"]`
-	expanded := `form[action$="/resubmit"]`
+	expanded := `form[action$="/` + eventID + `/resubmit"]`
 	deliveryRow := `//span[text()="` + targetName + `"]`
 	attempt := `//span[text()="Attempt 1"]`
 

internal/server/routes.go

@@ -252,11 +252,12 @@ func (s *Server) setupSourceRoutes() {
 		r.Post("/edit", s.h.HandleSourceEditSubmit())
 		r.Post("/delete", s.h.HandleSourceDelete())
 		r.Get("/events", s.h.HandleSourceLogs())
-		// The log page renders each body only up to its cap, so
-		// this is the only route that serves a whole one. It
-		// belongs to this group for its RequireAuth and
-		// NoCache; see HandleEventBodyDownload for the headers
-		// that keep the bytes it returns inert.
+		r.Get("/events/{eventID}", s.h.HandleEventDetail())
+		// The pages show a body as escaped text and leave a
+		// binary one out, so this is the only route that serves
+		// the stored bytes. It belongs to this group for its
+		// RequireAuth and NoCache; see HandleEventBodyDownload for
+		// the headers that keep the bytes it returns inert.
 		r.Get(
 			"/events/{eventID}/body",
 			s.h.HandleEventBodyDownload(),

internal/server/routes_test.go

@@ -364,6 +364,7 @@ func (e *testEnv) seedEvent(
 		WebhookID:   webhookID,
 		Method:      http.MethodPost,
 		Body:        body,
+		BodyBytes:   int64(len(body)),
 		ContentType: "application/octet-stream",
 	}
 
@@ -1264,6 +1265,48 @@ func TestHook_LinksBetweenPages(t *testing.T) {
 	}
 }
 
+// TestEventPage_OpenedFromRecentEvents follows the Open link of a
+// row in the recent events on the webhook page through the
+// production router to the event's own page, which shows the body
+// and links back. Another user gets a 404 at the same URL, and a
+// logged-out request is sent to log in.
+func TestEventPage_OpenedFromRecentEvents(t *testing.T) {
+	t.Parallel()
+
+	env := newTestEnv(t)
+
+	ownerID, _ := env.seedUser(t, "owner", "somepassword")
+	cookies := env.authCookies(t, ownerID, "owner")
+	wh := env.seedWebhook(t, ownerID)
+	evt := env.seedEvent(t, wh.ID, "OWNERS-PAYLOAD-3e9d")
+
+	page := "/hook/" + wh.ID
+	path := env.urlFrom(t, page, `href="([^"]+)"[^>]*>Open<`, cookies)
+
+	require.Equal(t, page+"/events/"+evt.ID, path)
+
+	w := env.get(path, cookies)
+	require.Equal(t, http.StatusOK, w.Code)
+	assert.Contains(t, w.Body.String(), "OWNERS-PAYLOAD-3e9d")
+	assert.Equal(
+		t, page,
+		env.urlFrom(t, path, `href="([^"]+)"[^>]*>&larr; Back to `, cookies),
+	)
+
+	intruderID, _ := env.seedUser(t, "intruder", "somepassword")
+
+	w = env.get(path, env.authCookies(t, intruderID, "intruder"))
+	assert.Equal(t, http.StatusNotFound, w.Code)
+	assert.NotContains(t, w.Body.String(), "OWNERS-PAYLOAD-3e9d")
+
+	anon := env.get(path, nil)
+	assert.Equal(t, http.StatusSeeOther, anon.Code)
+	assert.Equal(
+		t, "/pages/login?next="+url.QueryEscape(path),
+		anon.Header().Get("Location"),
+	)
+}
+
 // TestSourceLogs_TruncationLinkDownloadsTheBody walks the whole
 // feature the way a user does: render the event log page through
 // the production router, take the download URL out of the markup