radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-11-15 11:20:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix cob commit listing borderline not expanding

Browse Source
This commit is contained in:
Sebastian Martinez
2023-11-20 15:12:34 +01:00
parent 181fcc15af
commit e6c560b58b
10 changed files with 95 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
httpd-client/tests/project.test.ts
+1 -1
View File
@@ -210,7 +210,7 @@ describe("project", () => {
test("#getPatchById(id, patchId)", async () => {
await api.project.getPatchById(
cobRid,
"679b2c84a8e15ce1f73c4c231b55431b89b2559a",
"fa393edeb28bdd189bd0c0d7a262cb30d9109595",
);
});
src/views/projects/Cob/CobCommitListing.svelte
-67
View File
@@ -1,67 +0,0 @@
<script lang="ts">
import type { BaseUrl, CommitHeader } from "@httpd-client";
import { onMount } from "svelte";
import CobCommitTeaser from "@app/views/projects/Cob/CobCommitTeaser.svelte";
export let baseUrl: BaseUrl;
export let commits: CommitHeader[];
export let projectId: string;
let commitsDiv: HTMLElement | undefined = undefined;
const commitsDot: HTMLElement[] = [];
onMount(() => {
if (commitsDiv && commitsDot) {
const lastCommitDot = commitsDot.pop();
if (lastCommitDot?.parentElement) {
// Calculate the position of the last commit-dot relative to the div.commits
const commitDotBottom = lastCommitDot.parentElement.offsetTop + 10.5;
// Set the height of the pseudo-element (border)
commitsDiv.style.setProperty("--border-height", `${commitDotBottom}px`);
}
}
});
</script>
<style>
.commits {
position: relative;
display: flex;
flex-direction: column;
font-size: var(--font-size-small);
margin-left: 1rem;
gap: 0.5rem;
padding: 1rem 1rem;
}
.commits::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-left: 1px solid var(--color-fill-separator);
height: var(--border-height);
}
.commit-dot {
border-radius: var(--border-radius-round);
width: 4px;
height: 4px;
position: absolute;
top: 0.5rem;
left: -17.5px;
background-color: var(--color-fill-separator);
}
</style>
<div bind:this={commitsDiv} class="commits">
{#each commits.reverse() as commit, index}
<div style:position="relative">
<div class="commit-dot" bind:this={commitsDot[index]} />
<CobCommitTeaser {commit} {baseUrl} {projectId} />
</div>
{/each}
</div>
src/views/projects/Cob/CobCommitTeaser.svelte
+1 -1
View File
@@ -56,7 +56,7 @@
}
</style>
<div class="teaser">
<div class="teaser" aria-label="commit-teaser">
<div class="left">
<div class="message">
<span class="global-hash">{formatCommit(commit.id)}</span>
src/views/projects/Cob/Revision.svelte
+38 -3
View File
@@ -12,7 +12,7 @@
import { HttpdClient } from "@httpd-client";
import { onMount } from "svelte";
import CobCommitListing from "@app/views/projects/Cob/CobCommitListing.svelte";
import CobCommitTeaser from "@app/views/projects/Cob/CobCommitTeaser.svelte";
import CommentComponent from "@app/components/Comment.svelte";
import DiffStatBadge from "@app/components/DiffStatBadge.svelte";
import DropdownList from "@app/components/DropdownList.svelte";
@@ -24,8 +24,8 @@
import Link from "@app/components/Link.svelte";
import Loading from "@app/components/Loading.svelte";
import Markdown from "@app/components/Markdown.svelte";
import Popover from "@app/components/Popover.svelte";
import NodeId from "@app/components/NodeId.svelte";
import Popover from "@app/components/Popover.svelte";
import Thread from "@app/components/Thread.svelte";
export let baseUrl: BaseUrl;
@@ -196,9 +196,37 @@
font-size: var(--font-size-small);
color: var(--color-fill-gray);
}
.commits {
position: relative;
display: flex;
flex-direction: column;
font-size: 0.875rem;
margin-left: 1rem;
gap: 0.5rem;
padding: 1rem 1rem;
border-left: 1px solid var(--color-fill-separator);
}
.commit:last-of-type::after {
content: "";
position: absolute;
left: -17px;
top: 12px;
bottom: -1rem;
border-left: 1px solid var(--color-background-default);
}
.expanded {
box-shadow: 0 0 0 1px var(--color-border-hint);
}
.commit-dot {
border-radius: var(--border-radius-round);
width: 4px;
height: 4px;
position: absolute;
top: 0.5rem;
left: -18.5px;
background-color: var(--color-fill-separator);
}
.connector {
width: 1px;
height: 1.5rem;
@@ -373,7 +401,14 @@
</div>
{/if}
{#if response?.commits}
<CobCommitListing commits={response.commits} {baseUrl} {projectId} />
<div class="commits">
{#each response.commits.reverse() as commit}
<div class="commit" style:position="relative">
<div class="commit-dot" />
<CobCommitTeaser {commit} {baseUrl} {projectId} />
</div>
{/each}
</div>
{/if}
</div>
{#if error}
tests/e2e/project/patch.spec.ts
+22 -19
View File
@@ -21,7 +21,7 @@ test("navigate patch details", async ({ page }) => {
});
test("use revision selector", async ({ page }) => {
await page.goto(`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`);
await page.goto(`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`);
await page.getByRole("link", { name: "Changes" }).click();
// Validating the latest revision state
@@ -29,7 +29,7 @@ test("use revision selector", async ({ page }) => {
page.getByRole("cell", { name: "Had to push a new revision" }),
).toBeVisible();
await page.getByRole("link", { name: "Activity" }).click();
await expect(page.locator(".commits .teaser")).toHaveCount(2);
await expect(page.getByLabel("commit-teaser")).toHaveCount(2);
await expect(page.getByRole("link", { name: "Add more text" })).toBeVisible();
// Open the first revision and close the latest one
@@ -37,27 +37,29 @@ test("use revision selector", async ({ page }) => {
await page.getByLabel("expand").last().click();
// Validating the initial revision
await expect(page.locator(".commits .teaser")).toHaveCount(1);
await expect(page.getByLabel("commit-teaser")).toHaveCount(3);
await expect(
page.getByRole("link", { name: "Rewrite subtitle to README" }),
page.getByRole("link", { name: "Rewrite subtitle to README" }).first(),
).toBeVisible();
await page.getByRole("link", { name: "Changes" }).click();
// Switching to the initial revision
await page.getByText("Revision 2c2f036").click();
await page.getByRole("link", { name: "Revision 679b2c8" }).click();
await page.getByRole("button", { name: "Revision 92f6a0c" }).click();
await page.getByRole("button", { name: "Revision fa393ed" }).click();
// getByRole("link", { name: "Revision 92f6a0c" })
await expect(
page.getByRole("cell", { name: "Had to push a new revision" }),
).toBeHidden();
await expect(page).toHaveURL(
`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a/679b2c84a8e15ce1f73c4c231b55431b89b2559a?tab=changes`,
`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595/fa393edeb28bdd189bd0c0d7a262cb30d9109595?tab=changes`,
);
});
test("navigate through revision diffs", async ({ page }) => {
await page.goto(`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`);
await page.goto(`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`);
const firstRevision = page.locator(".revision").first();
const secondRevision = page.locator(".revision").nth(1);
@@ -72,10 +74,10 @@ test("navigate through revision diffs", async ({ page }) => {
.getByRole("link", { name: "Compare to main: 38c225e" })
.click();
await expect(
page.getByRole("link", { name: "Compare 38c225..9898da" }),
page.getByRole("button", { name: "Compare 38c225..9e4fea" }),
).toBeVisible();
await expect(page).toHaveURL(
`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?diff=38c225e2a0b47ba59def211f4e4825c31d9463ec..9898da6155467adad511f63bf0fb5aa4156b92ef`,
`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?diff=38c225e2a0b47ba59def211f4e4825c31d9463ec..9e4feab1b2123dfa5f22bd0e4656060ec9296638`,
);
await page.goBack();
await secondRevision
@@ -83,22 +85,23 @@ test("navigate through revision diffs", async ({ page }) => {
.first()
.click();
await secondRevision
.getByRole("link", { name: "Compare to previous revision: 679b2c8" })
.getByRole("link", { name: "Compare to previous revision: fa393ed" })
.click();
await expect(
page.getByRole("link", { name: "Compare 0dc373..9898da" }),
page.getByRole("button", { name: "Compare 88b7fd..9e4fea" }),
).toBeVisible();
await expect(page).toHaveURL(
`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?diff=0dc373db601ccbcffa80dec932e4006516709ca6..9898da6155467adad511f63bf0fb5aa4156b92ef`,
`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?diff=88b7fd90389c1a629f91ed7bf838d4b947426622..9e4feab1b2123dfa5f22bd0e4656060ec9296638`,
);
await page.goBack();
await secondRevision
.getByRole("link", { name: "Compare 0dc373d..9898da6" })
.getByRole("link", { name: "Compare 88b7fd9..9e4feab" })
.getByRole("button")
.click();
await expect(
page.getByRole("link", { name: "Compare 0dc373..9898da" }),
page.getByRole("link", { name: "Compare 88b7fd9..9e4fea" }),
).toBeVisible();
await page.goBack();
}
@@ -112,20 +115,20 @@ test("navigate through revision diffs", async ({ page }) => {
.getByRole("link", { name: "Compare to main: 38c225e" })
.click();
await expect(
page.getByRole("link", { name: "Compare 38c225..0dc373" }),
page.getByRole("button", { name: "Compare 38c225..88b7fd" }),
).toBeVisible();
await expect(page).toHaveURL(
`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?diff=38c225e2a0b47ba59def211f4e4825c31d9463ec..0dc373db601ccbcffa80dec932e4006516709ca6`,
`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?diff=38c225e2a0b47ba59def211f4e4825c31d9463ec..88b7fd90389c1a629f91ed7bf838d4b947426622`,
);
}
});
test("view file navigation from changes tab", async ({ page }) => {
await page.goto(`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`);
await page.goto(`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`);
await page.getByRole("button", { name: "Changes" }).click();
await page.getByRole("button", { name: "View file" }).click();
await expect(page).toHaveURL(
`${cobUrl}/tree/9898da6155467adad511f63bf0fb5aa4156b92ef/README.md`,
`${cobUrl}/tree/9e4feab1b2123dfa5f22bd0e4656060ec9296638/README.md`,
);
});
tests/support/cobs/patch.ts
+5 -2
View File
@@ -3,7 +3,7 @@ import type { Options } from "execa";
export async function create(
peer: RadiclePeer,
commit: string,
commitLines: string[],
branch: string,
changeFn: () => Promise<void>,
messages: string[],
@@ -16,7 +16,10 @@ export async function create(
}
await changeFn();
await peer.git(["add", "."], options);
await peer.git(["commit", "-m", commit], options);
await peer.git(
["commit"].concat(...commitLines.map(line => ["-m", line])),
options,
);
const cmd = [
"push",
...messages.map(msg => ["-o", `patch.message=${msg}`]).flat(),
tests/support/fixtures.ts
+9 -5
View File
@@ -483,7 +483,7 @@ export async function createCobsFixture(peer: RadiclePeer) {
const patchOne = await patch.create(
peer,
"Add README\n\nThis commit adds more information to the README",
["Add README", "This commit adds more information to the README"],
"feature/add-readme",
() => Fs.writeFile(Path.join(projectFolder, "README.md"), "# Cobs Repo"),
["Let's add a README", "This repo needed a README"],
@@ -563,7 +563,7 @@ export async function createCobsFixture(peer: RadiclePeer) {
const patchTwo = await patch.create(
peer,
"Add subtitle to README",
["Add subtitle to README"],
"feature/add-more-text",
() =>
Fs.appendFile(Path.join(projectFolder, "README.md"), "\n\n## Subtitle"),
@@ -577,7 +577,11 @@ export async function createCobsFixture(peer: RadiclePeer) {
const patchThree = await patch.create(
peer,
"Rewrite subtitle to README",
[
"Rewrite subtitle to README",
"This was really necessary",
"Blazingly fast",
],
"feature/better-subtitle",
() =>
Fs.appendFile(Path.join(projectFolder, "README.md"), "\n\n## Better?"),
@@ -621,7 +625,7 @@ export async function createCobsFixture(peer: RadiclePeer) {
const patchFour = await patch.create(
peer,
"This patch is going to be archived",
["This patch is going to be archived"],
"feature/archived",
() =>
Fs.writeFile(Path.join(projectFolder, "CONTRIBUTING.md"), "# Archived"),
@@ -636,7 +640,7 @@ export async function createCobsFixture(peer: RadiclePeer) {
const patchFive = await patch.create(
peer,
"This patch is going to be reverted to draft",
["This patch is going to be reverted to draft"],
"feature/draft",
() => Fs.writeFile(Path.join(projectFolder, "LICENSE"), "Draft"),
[],
tests/visual/cob.spec.ts
+16 -5
View File
@@ -65,13 +65,13 @@ test("patch page", async ({ page }) => {
await expect(page).toHaveScreenshot({ fullPage: true });
// Archived patch
await page.goto(
`${cobUrl}/patches/43ae785a9ceaf289b2445fb5b8e01036d456b2be`,
`${cobUrl}/patches/08d97e8cb6f94448d0452884a9bf686beecc8549`,
{ waitUntil: "networkidle" },
);
await expect(page).toHaveScreenshot({ fullPage: true });
// Merged patch
await page.goto(
`${cobUrl}/patches/6a51e1d2e350136e7bcfad8f13d16488c1f1c99a`,
`${cobUrl}/patches/cf0b92b99dd3e36d251f3d75e12b626c62d20e4c`,
{ waitUntil: "networkidle" },
);
await expect(page).toHaveScreenshot({ fullPage: true });
@@ -83,12 +83,23 @@ test("patch page", async ({ page }) => {
await expect(page).toHaveScreenshot({ fullPage: true });
// Open patch "Taking another stab at the README"
await page.goto(
`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`,
`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`,
{ waitUntil: "networkidle" },
);
await expect(page).toHaveScreenshot({ fullPage: true });
// Expand commit messages to check border line height
await page.getByLabel("expand").nth(2).click();
await expect(page).toHaveScreenshot({ fullPage: true });
// Expand the commit message in the first revision
await page.getByLabel("expand").first().click();
await expect(page).toHaveScreenshot({ fullPage: true });
await page.getByLabel("expand").nth(1).click();
await expect(page).toHaveScreenshot({ fullPage: true });
await page.goto(
`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?tab=changes`,
`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?tab=changes`,
{ waitUntil: "networkidle" },
);
await expect(page).toHaveScreenshot({ fullPage: true });
@@ -100,6 +111,6 @@ test("failed diff loading for a specific revision", async ({ page }) => {
route => route.fulfill({ status: 500 }),
);
await page.goto(`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`);
await page.goto(`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`);
await expect(page).toHaveScreenshot({ fullPage: true });
});
tests/visual/mobile/cob.spec.ts
+2 -2
View File
@@ -84,12 +84,12 @@ test("patch page", async ({ page }) => {
await expect(page).toHaveScreenshot({ fullPage: true });
// Open patch
await page.goto(
`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a`,
`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595`,
{ waitUntil: "networkidle" },
);
await expect(page).toHaveScreenshot({ fullPage: true });
await page.goto(
`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?tab=changes`,
`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?tab=changes`,
{ waitUntil: "networkidle" },
);
await expect(page).toHaveScreenshot({ fullPage: true });
tests/visual/project.spec.ts
+1 -1
View File
@@ -64,7 +64,7 @@ test("diff selection", async ({ page }) => {
});
await page.goto(
`${cobUrl}/patches/679b2c84a8e15ce1f73c4c231b55431b89b2559a?tab=changes#README.md:H0L0H0L3`,
`${cobUrl}/patches/fa393edeb28bdd189bd0c0d7a262cb30d9109595?tab=changes#README.md:H0L0H0L3`,
);
await expect(page).toHaveScreenshot({ fullPage: true });
});