Public: anyone can read this; the crew can change it.
The settings and origins pages' numbered steps draw §5's stack and muted text, and .steps leaves the markup #4345
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/4302-the-settings-and-origins-pages-numbered → main 1 commit fork
3 files
changed +83
−3
src/web/pages/origins.ts +2 −2
| @@ -406,7 +406,7 @@ function githubSection(configured: boolean, callback: string): Html { | ||
| 406 | 406 | for this forge yet, so the device flow has no client id to use. Three |
| 407 | 407 | steps, once, for every user of this forge: |
| 408 | 408 | </p> |
| 409 | <ol class="steps small"> | |
| 409 | <ol class="muted small"> | |
| 410 | 410 | <li> |
| 411 | 411 | Create an OAuth App at |
| 412 | 412 | <a |
| @@ -500,7 +500,7 @@ function forgejoSection( | ||
| 500 | 500 | there is no shared client id, and no device grant to fall back on. |
| 501 | 501 | It takes about a minute: |
| 502 | 502 | </p> |
| 503 | <ol class="steps small"> | |
| 503 | <ol class="muted small"> | |
| 504 | 504 | <li> |
| 505 | 505 | Open |
| 506 | 506 | <span class="mono" |
src/web/pages/settings.ts +1 −1
| @@ -1506,7 +1506,7 @@ function promptsView(base: string, sources: PromptSourceView[]): Html { | ||
| 1506 | 1506 | The one-time steps at Meta, for a professional account of your own. None |
| 1507 | 1507 | of them needs App Review. |
| 1508 | 1508 | </p> |
| 1509 | <ol class="steps"> | |
| 1509 | <ol class="muted"> | |
| 1510 | 1510 | <li> |
| 1511 | 1511 | Make the Instagram account a professional one — Business or Creator — |
| 1512 | 1512 | in the Instagram app's settings. |
test/steps-lists.test.ts added +80
| @@ -0,0 +1,80 @@ | ||
| 1 | import { afterAll, beforeAll, expect, test } from "bun:test"; | |
| 2 | import { mkdtempSync, rmSync } from "node:fs"; | |
| 3 | import { tmpdir } from "node:os"; | |
| 4 | import { join } from "node:path"; | |
| 5 | import { createApp, type App } from "../src/app.ts"; | |
| 6 | import { createRepo } from "../src/actions/repos.ts"; | |
| 7 | import { createUser } from "../src/core/users.ts"; | |
| 8 | import { serve, type Servers } from "../src/http/server.ts"; | |
| 9 | import { proveAll } from "./helpers/verified.ts"; | |
| 10 | import { quietLogs, withoutEnv } from "./helpers/globals.ts"; | |
| 11 | ||
| 12 | /** The numbered how-to lists stay ordered lists, drawn without `.steps` (#4302). */ | |
| 13 | quietLogs(); | |
| 14 | withoutEnv("FORGE_GITHUB_CLIENT_ID"); | |
| 15 | ||
| 16 | let root = ""; | |
| 17 | let app: App; | |
| 18 | let servers: Servers; | |
| 19 | let cookie = ""; | |
| 20 | ||
| 21 | beforeAll(async () => { | |
| 22 | root = mkdtempSync(join(tmpdir(), "forge-steps-")); | |
| 23 | app = createApp({ dataDir: root, port: 0, forgeRepo: "alice/forge" }); | |
| 24 | const u = await createUser(app.db, { | |
| 25 | origin: "seed", | |
| 26 | trusted: true, | |
| 27 | username: "alice", | |
| 28 | email: "[email protected]", | |
| 29 | password: "a-good-passphrase", | |
| 30 | adminIfFirst: true, | |
| 31 | }); | |
| 32 | if (!u.ok) throw new Error(u.error); | |
| 33 | const made = await createRepo(app, u.value, { name: "forge", visibility: "public", description: "x" }); | |
| 34 | if (!made.ok) throw new Error(String(made.error)); | |
| 35 | proveAll(app); | |
| 36 | servers = await serve(app); | |
| 37 | const signin = await fetch(`${servers.url}/signin`, { | |
| 38 | method: "POST", | |
| 39 | headers: { origin: servers.url }, | |
| 40 | body: new URLSearchParams({ username: "alice", password: "a-good-passphrase" }), | |
| 41 | redirect: "manual", | |
| 42 | }); | |
| 43 | cookie = (signin.headers.get("set-cookie") ?? "").split(";")[0]!; | |
| 44 | }); | |
| 45 | afterAll(() => { | |
| 46 | servers.stop(); | |
| 47 | app.close(); | |
| 48 | rmSync(root, { recursive: true, force: true }); | |
| 49 | }); | |
| 50 | ||
| 51 | async function get(path: string): Promise<string> { | |
| 52 | const res = await fetch(`${servers.url}${path}`, { headers: { cookie } }); | |
| 53 | expect(res.status).toBe(200); | |
| 54 | return res.text(); | |
| 55 | } | |
| 56 | ||
| 57 | function expectPlainList(body: string, lists: number, minItems: number): void { | |
| 58 | expect(body).not.toMatch(/class="[^"]*\bsteps\b/); | |
| 59 | expect(body.match(/<ol[ >]/g)?.length).toBe(lists); | |
| 60 | expect(body.match(/<li>/g)?.length ?? 0).toBeGreaterThanOrEqual(minItems); | |
| 61 | } | |
| 62 | ||
| 63 | test("settings: the Instagram steps are an ordered list without .steps", async () => { | |
| 64 | const body = await get("/alice/forge/settings/prompts"); | |
| 65 | expectPlainList(body, 1, 4); | |
| 66 | expect(body).toContain("Business Login for Instagram"); | |
| 67 | }); | |
| 68 | ||
| 69 | test("origins: the GitHub setup steps are an ordered list without .steps", async () => { | |
| 70 | const body = await get("/settings/origins"); | |
| 71 | expectPlainList(body, 1, 3); | |
| 72 | expect(body).toContain("github.com/settings/developers"); | |
| 73 | }); | |
| 74 | ||
| 75 | test("origins: the Forgejo registration steps are an ordered list without .steps", async () => { | |
| 76 | const body = await get("/settings/origins?host=codeberg.org®ister=1"); | |
| 77 | expect(body).toContain("/user/settings/applications"); | |
| 78 | expect(body).not.toMatch(/class="[^"]*\bsteps\b/); | |
| 79 | expect(body).toMatch(/<ol class="muted small">\s*<li>\s*Open/); | |
| 80 | }); |
new above
offline