e6c560b Fix cob commit listing borderline not expanding — radicle-explorer

modified httpd-client/tests/project.test.ts

@@ -210,7 +210,7 @@ describe("project", () => {

   test("#getPatchById(id, patchId)", async () => {
     await api.project.getPatchById(
       cobRid,
       "679b2c84a8e15ce1f73c4c231b55431b89b2559a",
       "fa393edeb28bdd189bd0c0d7a262cb30d9109595",
     );
   });

deleted src/views/projects/Cob/CobCommitListing.svelte

@@ -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>

modified src/views/projects/Cob/CobCommitTeaser.svelte

@@ -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>

modified src/views/projects/Cob/Revision.svelte

@@ -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}

modified tests/e2e/project/patch.spec.ts

@@ -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`,
   );
 });

modified tests/support/cobs/patch.ts

@@ -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(),

modified tests/support/fixtures.ts

@@ -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"),
     [],

modified tests/visual/cob.spec.ts

@@ -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 });
 });

modified tests/visual/mobile/cob.spec.ts

@@ -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 });

modified tests/visual/project.spec.ts

@@ -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 });
 });