trevato/forge

Public: anyone can read this; the crew can change it.

More
Forks1g fMapg aRuns15g rEventsFlows

A where line's dot separator draws components.ts's .sep, and .where-sep leaves the markup #4307

Merged scoutcrew opened this

Check · Review · Land · Live done — Landed and live in production.

ConversationFiles
Merged

scout/forge:scout/4280-a-where-line-s-dot-separator-draws-compo → main 2 commits fork

  • Merged. scout/4280-a-where-line-s-dot-separator-draws-compo was merged into main as 130e00a.

Review

Sign in to review this change.
8 files changed +45 −15
src/web/pages/origins.ts +1 −1
@@ -1530,7 +1530,7 @@ export async function originReposPage(ctx: Ctx): Promise<Response> {
15301530 >${when(
15311531 pinned,
15321532 () =>
1533 html`<span class="where-sep" aria-hidden="true">·</span
1533 html`<span class="sep" aria-hidden="true">·</span
15341534 ><span
15351535 class="where-place"
15361536 data-state="present"
src/web/pages/pull.ts +9 −9
@@ -190,11 +190,11 @@ function reviewsChip(
190190 ${parts.map((part, i) =>
191191 i === 0
192192 ? part
193 : html`<span class="where-sep" aria-hidden="true">·</span>${part}`,
193 : html`<span class="sep" aria-hidden="true">·</span>${part}`,
194194 )}${when(
195195 reviews.required,
196196 () =>
197 html`<span class="where-sep" aria-hidden="true">·</span
197 html`<span class="sep" aria-hidden="true">·</span
198198 ><span class="muted">an approval is required</span>`,
199199 )}
200200 </p>`;
@@ -240,14 +240,14 @@ export function checksLine(
240240 const link =
241241 run === null
242242 ? null
243 : html`<span class="where-sep" aria-hidden="true">·</span
243 : html`<span class="sep" aria-hidden="true">·</span
244244 ><a href="${base}/runs/${run.id}"
245245 >${run.kind === "check" ? "Check of" : "deploy"} ${run.commitOid.slice(0, 7)}</a
246246 >`;
247247 const words = run === null ? undefined : checkWords(run, Date.now(), progress);
248248 const against =
249249 run !== null && run.baseOid !== "" && baseBranch !== ""
250 ? html`<span class="where-sep" aria-hidden="true">·</span
250 ? html`<span class="sep" aria-hidden="true">·</span
251251 ><span class="checked-against"
252252 >checked against ${baseBranch} at ${run.baseOid.slice(0, 7)}</span
253253 >`
@@ -288,12 +288,12 @@ export function checksLine(
288288 ${body}${against}${when(
289289 tier !== "",
290290 () =>
291 html`<span class="where-sep" aria-hidden="true">·</span
291 html`<span class="sep" aria-hidden="true">·</span
292292 ><span class="tier-line">${tier}</span>`,
293293 )}${when(
294294 required,
295295 () =>
296 html`<span class="where-sep" aria-hidden="true">·</span
296 html`<span class="sep" aria-hidden="true">·</span
297297 ><span>a passing deploy is required</span>`,
298298 )}${again}
299299 </p>`;
@@ -938,17 +938,17 @@ export async function pullFilesPage(ctx: Ctx): Promise<Response> {
938938 ${changeHead(ctx, repo, pull)} ${changeTabs(repo, pull, "files")}
939939 <p class="files-where muted small" id="files">
940940 <span class="mono">${headLabel} → ${pull.baseBranch}</span>
941 <span class="where-sep" aria-hidden="true">·</span>
941 <span class="sep" aria-hidden="true">·</span>
942942 ${status.ahead} commit${status.ahead === 1 ? "" : "s"}
943943 ${when(
944944 pull.crossRepo,
945 () => html`<span class="where-sep" aria-hidden="true">·</span
945 () => html`<span class="sep" aria-hidden="true">·</span
946946 >${badge("fork", { icon: "fork" })}`,
947947 )}
948948 ${when(
949949 threads.length > 0,
950950 () =>
951 html`<span class="where-sep" aria-hidden="true">·</span
951 html`<span class="sep" aria-hidden="true">·</span
952952 ><span class="thread-count"
953953 >${threads.length} thread${threads.length === 1 ? "" : "s"} ·
954954 ${unresolved} unresolved</span
src/web/pages/site.ts +2 −2
@@ -119,12 +119,12 @@ export function downloadsCard(ctx: Ctx, user: User): Html {
119119 html`<span class="where-place" data-state="present"
120120 ><span aria-hidden="true">●</span
121121 >${hostOf(o.htmlUrl) || o.fullName}</span
122 ><span class="where-sep" aria-hidden="true">·</span>`,
122 ><span class="sep" aria-hidden="true">·</span>`,
123123 )}
124124 <span class="where-place" data-state="present"
125125 ><span aria-hidden="true">●</span
126126 >workbench</span
127 ><span class="where-sep" aria-hidden="true">·</span
127 ><span class="sep" aria-hidden="true">·</span
128128 ><span class="where-place" data-state="present"
129129 ><span aria-hidden="true">◆</span>this
130130 machine</span
src/web/scope.ts +1 −1
@@ -465,7 +465,7 @@ export function whereStrip(ctx: Ctx, scope: RepoScope): Html {
465465 ${places.map(
466466 (place, i) =>
467467 html`${i > 0
468 ? html`<span class="where-sep" aria-hidden="true">·</span>`
468 ? html`<span class="sep" aria-hidden="true">·</span>`
469469 : null}${placeNode(place)}`,
470470 )}
471471 </div>`;
src/web/studio/change.ts +2 −2
@@ -358,13 +358,13 @@ async function pullPanels(ctx: Ctx, repo: Repo, pull: Pull, spent: Spent = newSp
358358 ${wordBadge(word)} <span class="muted small">${note}</span>
359359 ${when(
360360 tellsAnswered(db, repo.id, [pull]).get(pull.number),
361 (t) => html`<span class="where-sep" aria-hidden="true">·</span
361 (t) => html`<span class="sep" aria-hidden="true">·</span
362362 >${tellLine(base, t)}`,
363363 )}
364364 ${when(
365365 deploy,
366366 (d) =>
367 html`<span class="where-sep" aria-hidden="true">·</span
367 html`<span class="sep" aria-hidden="true">·</span
368368 ><a href="${base}/runs/${d.id}"
369369 >deploy ${d.commitOid.slice(0, 7)}</a
370370 >`,
src/web/style/components.ts +4
@@ -783,6 +783,10 @@ details[open] > summary.row > .row-lead { transform: rotate(90deg); }
783783 /* On a phone the crumbs would be squeezed to "y… / c."; the page header
784784 right below says where you are, in full. */
785785 @media (max-width: 719px) { .topbar .crumbs { display: none; } }
786 /* The dot between facts on a line (a where strip, a row's meta); the crumbs
787 keep their own for the flex rule. */
788 .sep { color: var(--faint); }
789 .row-meta .sep { margin: 0 3px; }
786790 .crumbs .sep { color: var(--faint); flex: none; }
787791 .crumbs [aria-current="page"] { font-weight: 550; }
788792 .crumbs.mono, .crumbs.mono a { font-family: var(--mono); font-size: 12.5px; }
test/pull-check-again.test.ts +18
@@ -157,3 +157,21 @@ describe("reading a pull without its diff (#3367)", () => {
157157 expect((await read(q)).status).toBe(422);
158158 });
159159 });
160
161 describe("the pull page's separators", () => {
162 test("a pull's files line draws its dot with .sep, never .where-sep", async () => {
163 const html = await page(alice, openNumber);
164 expect(html).not.toContain("where-sep");
165 expect(html).toContain('<span class="sep" aria-hidden="true">·</span>');
166 expect(html).toContain("open → main");
167 expect(html).toContain("commit");
168 });
169 });
170
171 describe("the separator's stylesheet", () => {
172 test("components.ts carries a general .sep rule and the row-meta margin", async () => {
173 const { components } = await import("../src/web/style/components.ts");
174 expect(components).toMatch(/(^|\n)\.sep \{ color: var\(--faint\); \}/);
175 expect(components).toContain(".row-meta .sep { margin: 0 3px; }");
176 });
177 });
test/web-origins.test.ts +8
@@ -441,6 +441,14 @@ describe("origins on the web", () => {
441441 expect(pinned.status).toBe(303);
442442 expect(listPins(app.db, aliceId)).toHaveLength(1);
443443
444 // A mirrored, pinned row separates its two places with `.sep`, not `.where-sep`.
445 const originId = listOrigins(app.db, aliceId)[0]!.id;
446 const picker = await (await asUser(alice, `/settings/origins/${originId}/repos`)).text();
447 expect(picker).not.toContain("where-sep");
448 expect(picker).toContain('<span class="sep" aria-hidden="true">·</span');
449 expect(picker).toContain("mirrored as");
450 expect(picker).toContain("this machine");
451
444452 const dash = await (await asUser(`${alice}; forge_mode=dev`, "/")).text();
445453 expect(dash).toContain("On your machine");
446454 expect(dash).toContain("forge sync");

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs