Public: anyone can read this; the crew can change it.
Settings › Flags, every declared flag and its live value, speaks the home page's language #9881
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/9872-settings-flags-every-declared-flag-and-i → main 3 commits fork
3 files
changed +78
−13
docs/design/areas/settings.md +2
| @@ -150,4 +150,6 @@ Settings › Model (`modelPage()` in `src/web/pages/model.ts`, #9800) adds no cl | ||
| 150 | 150 | |
| 151 | 151 | `/organizations/new` is one muted sentence (what an organization is) over the single name field, whose hint says it becomes the URL; "first owner" is said once, in the landing flash. A team's page (`/:owner/-/teams/:team`) is three `<section class="settings-block">`s, each an `<h2>` — Members, Add a member, Delete this team (not on Owners) — over a `list setting-list` of `row()`s or a plain form. No card, no empty-state box (an empty team is one muted line), no new class. Every change stays a plain POST form or a confirm page, so it works with JavaScript off. `test/org-team-rows.test.ts` holds the shape. |
| 152 | 152 | |
| 153 | Settings › Flags (`flagsPage()` in `src/web/pages/flags.ts`, #9872) has no card: one `<section class="settings-block">` under `<h2>Flags</h2>` holds the flags as `.list.setting-list` rows, or one plain sentence when none is declared. Pinned by `test/flags-language.test.ts`. | |
| 154 | ||
| 153 | 155 | Settings › General (`settingsPage()` and `provenanceCard()` in `src/web/pages/settings.ts`, #9853) adds no class and holds no `.card`: About, Your team, On its own and Held files (`src/web/studio/crew.ts`, `file_holds.ts`), Branch and gates, Mirror, Show where this came from, Follow upstream and Followed sources (`upstream-follow.ts`), and Cut a wave and Archive are each a `<section class="settings-block">` with an `<h2>`, one plain sentence and the form. The crew-readiness notices (`crewReadiness()` in `src/web/pages/crew.ts`) are `.toast` rows with `data-tone="danger"`. Every form keeps its action, method, field names and ids. Pinned by `test/settings.test.ts`, which asserts the whole page has no `class="card`. |
src/web/pages/flags.ts +7 −13
| @@ -15,7 +15,7 @@ import { settingsLayout, signInFirst } from "../chrome.ts"; | ||
| 15 | 15 | import { field, readForm } from "../form.ts"; |
| 16 | 16 | import { html } from "../html.ts"; |
| 17 | 17 | import { flashTo, page } from "../layout.ts"; |
| 18 | import { btn, card, empty, icon, row } from "../ui.ts"; | |
| 18 | import { btn, empty, icon, row } from "../ui.ts"; | |
| 19 | 19 | import { accountSections } from "./origins.ts"; |
| 20 | 20 | |
| 21 | 21 | export { useFlagRegistry }; |
| @@ -105,20 +105,14 @@ export function flagsPage(ctx: Ctx): Response { | ||
| 105 | 105 | </form>`, |
| 106 | 106 | }); |
| 107 | 107 | }); |
| 108 | const body = card( | |
| 109 | names.length === 0 | |
| 110 | ? html`<div class="card-body"> | |
| 111 | <p class="muted small">No flag is declared yet.</p> | |
| 112 | </div>` | |
| 108 | const body = html`<section class="settings-block"> | |
| 109 | <h2>Flags</h2> | |
| 110 | ${names.length === 0 | |
| 111 | ? html`<p class="muted">No flag is declared yet.</p>` | |
| 113 | 112 | : html`<ul class="list setting-list"> |
| 114 | 113 | ${rows} |
| 115 | </ul>`, | |
| 116 | { | |
| 117 | head: html`${icon("activity")} | |
| 118 | <h2>Flags</h2>`, | |
| 119 | pad: false, | |
| 120 | }, | |
| 121 | ); | |
| 114 | </ul>`} | |
| 115 | </section>`; | |
| 122 | 116 | const response = page({ |
| 123 | 117 | ctx, |
| 124 | 118 | title: "Flags", |
test/flags-language.test.ts added +69
| @@ -0,0 +1,69 @@ | ||
| 1 | /** Settings › Flags speaks the home page's language (#9872): a settings block and a plain list; no card. */ | |
| 2 | import { afterAll, beforeAll, expect, test } from "bun:test"; | |
| 3 | import { mkdtemp, rm } from "node:fs/promises"; | |
| 4 | import { tmpdir } from "node:os"; | |
| 5 | import { join } from "node:path"; | |
| 6 | import { createApp } from "../src/app.ts"; | |
| 7 | import { makeFlags } from "../src/core/flags.ts"; | |
| 8 | import { createUser } from "../src/core/users.ts"; | |
| 9 | import { serve } from "../src/http/server.ts"; | |
| 10 | import { useFlagRegistry } from "../src/web/pages/flags.ts"; | |
| 11 | import { quietLogs } from "./helpers/globals.ts"; | |
| 12 | ||
| 13 | quietLogs(); | |
| 14 | ||
| 15 | let dir = ""; | |
| 16 | let app: ReturnType<typeof createApp>; | |
| 17 | let servers: Awaited<ReturnType<typeof serve>>; | |
| 18 | ||
| 19 | const page = async (): Promise<string> => { | |
| 20 | const res = await fetch(`${servers.url}/signin`, { | |
| 21 | method: "POST", | |
| 22 | redirect: "manual", | |
| 23 | headers: { "content-type": "application/x-www-form-urlencoded", origin: servers.url }, | |
| 24 | body: new URLSearchParams({ username: "alice", password: "a-good-passphrase" }), | |
| 25 | }); | |
| 26 | const cookie = (res.headers.get("set-cookie") ?? "").split(";")[0] ?? ""; | |
| 27 | const got = await fetch(`${servers.url}/settings/flags`, { headers: { cookie } }); | |
| 28 | expect(got.status).toBe(200); | |
| 29 | return got.text(); | |
| 30 | }; | |
| 31 | ||
| 32 | beforeAll(async () => { | |
| 33 | dir = await mkdtemp(join(tmpdir(), "forge-flags-lang-")); | |
| 34 | app = createApp({ dataDir: dir, port: 0 }); | |
| 35 | servers = await serve(app); | |
| 36 | const made = await createUser(app.db, { | |
| 37 | origin: "seed", | |
| 38 | trusted: true, | |
| 39 | username: "alice", | |
| 40 | email: "[email protected]", | |
| 41 | password: "a-good-passphrase", | |
| 42 | adminIfFirst: true, | |
| 43 | }); | |
| 44 | if (!made.ok) throw new Error(String(made.error)); | |
| 45 | }); | |
| 46 | ||
| 47 | afterAll(async () => { | |
| 48 | useFlagRegistry(undefined); | |
| 49 | servers.stop(); | |
| 50 | app.close(); | |
| 51 | await rm(dir, { recursive: true, force: true }); | |
| 52 | }); | |
| 53 | ||
| 54 | test("declared flags are a settings block with a plain list, no card", async () => { | |
| 55 | useFlagRegistry(makeFlags({ alpha: { why: "shows the new board", default: false, issue: 9872 } })); | |
| 56 | const body = await page(); | |
| 57 | expect(body).not.toContain('class="card'); | |
| 58 | expect(body).toContain('<section class="settings-block">'); | |
| 59 | expect(body).toContain("<h2>Flags</h2>"); | |
| 60 | expect(body).toContain("setting-list"); | |
| 61 | expect(body).toContain("Save alpha"); | |
| 62 | }); | |
| 63 | ||
| 64 | test("no flag declared is one plain sentence, no card", async () => { | |
| 65 | useFlagRegistry(makeFlags({})); | |
| 66 | const body = await page(); | |
| 67 | expect(body).not.toContain('class="card'); | |
| 68 | expect(body).toContain("No flag is declared yet."); | |
| 69 | }); |