From 66ae6f77717bc15ff04a4d81950b000d02bbce60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= Date: Tue, 21 May 2024 12:06:07 +0200 Subject: [PATCH] Tweak copyable IDs --- src/components/Comment.svelte | 10 +-- src/components/CopyableId.svelte | 42 ---------- src/components/HoverPopover.svelte | 13 ++- src/components/Id.svelte | 82 +++++++++++++++++++ src/components/NodeId.svelte | 48 +---------- src/views/nodes/View.svelte | 32 ++++---- src/views/projects/Cob/CobCommitTeaser.svelte | 6 +- src/views/projects/Cob/CobHeader.svelte | 1 - src/views/projects/Cob/Revision.svelte | 31 ++----- src/views/projects/Commit.svelte | 8 +- src/views/projects/Commit/CommitTeaser.svelte | 4 +- src/views/projects/Issue.svelte | 11 +-- src/views/projects/Issue/IssueTeaser.svelte | 14 +--- src/views/projects/Patch.svelte | 15 ++-- src/views/projects/Patch/PatchTeaser.svelte | 22 ++--- src/views/projects/Sidebar/ContextRepo.svelte | 13 +-- src/views/projects/Source/PeerSelector.svelte | 22 +++-- .../projects/Source/ProjectNameHeader.svelte | 4 +- .../projects/components/CommitLink.svelte | 22 ----- tests/e2e/clipboard.spec.ts | 4 +- tests/e2e/project.spec.ts | 18 ++-- tests/e2e/project/commit.spec.ts | 6 +- tests/e2e/project/commits.spec.ts | 12 +-- 23 files changed, 188 insertions(+), 252 deletions(-) delete mode 100644 src/components/CopyableId.svelte create mode 100644 src/components/Id.svelte delete mode 100644 src/views/projects/components/CommitLink.svelte diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte index 88f071dacd..92e42c1baf 100644 --- a/src/components/Comment.svelte +++ b/src/components/Comment.svelte @@ -9,6 +9,7 @@ import ExtendedTextarea from "@app/components/ExtendedTextarea.svelte"; import IconButton from "@app/components/IconButton.svelte"; import IconSmall from "@app/components/IconSmall.svelte"; + import Id from "@app/components/Id.svelte"; import Markdown from "@app/components/Markdown.svelte"; import NodeId from "@app/components/NodeId.svelte"; import ReactionSelector from "@app/components/ReactionSelector.svelte"; @@ -136,15 +137,10 @@ {/if}
- + {caption} {#if id} - - {utils.formatObjectId(id)} - + {/if} {utils.formatTimestamp(timestamp)} diff --git a/src/components/CopyableId.svelte b/src/components/CopyableId.svelte deleted file mode 100644 index 1c598fbdda..0000000000 --- a/src/components/CopyableId.svelte +++ /dev/null @@ -1,42 +0,0 @@ - - - - - -
{ - clipboard.copy(); - }} - class="id"> - - {id} - - -
diff --git a/src/components/HoverPopover.svelte b/src/components/HoverPopover.svelte index f7fe6eec04..4f59671e67 100644 --- a/src/components/HoverPopover.svelte +++ b/src/components/HoverPopover.svelte @@ -8,6 +8,10 @@ export let stylePopoverPositionTop: string | undefined = undefined; export let stylePopoverPositionBottom: string | undefined = undefined; export let stylePopoverPadding: string | undefined = "1rem"; + export let styleBorderRadius = "var(--border-radius-regular)"; + export let styleBackground = "var(--color-background-float)"; + export let styleBorder = "1px solid var(--color-border-hint)"; + export let debounceTimeout = 500; let visible: boolean = false; @@ -16,17 +20,15 @@ if (visible) { onShow(); } - }, 500); + }, debounceTimeout); + + +
+ + + + {#if shorten} + {formatObjectId(id)} + {:else} + {id} + {/if} + + +
+
+ + {tooltip} +
+ diff --git a/src/components/NodeId.svelte b/src/components/NodeId.svelte index 1e5ebcb41f..1e39808700 100644 --- a/src/components/NodeId.svelte +++ b/src/components/NodeId.svelte @@ -2,13 +2,10 @@ import { formatNodeId } from "@app/lib/utils"; import Avatar from "./Avatar.svelte"; - import HoverPopover from "./HoverPopover.svelte"; - import CopyableId from "./CopyableId.svelte"; + import Id from "./Id.svelte"; export let nodeId: string; export let alias: string | undefined = undefined; - export let large: boolean = false; - export let stylePopoverPositionLeft = "-4.5rem"; - -
+ +
{#if alias} {alias} @@ -55,19 +30,4 @@ {formatNodeId(nodeId)} {/if}
- -
-
-
- - {#if alias} - {alias} - {/if} -
- - - {formatNodeId(nodeId)} - -
-
- + diff --git a/src/views/nodes/View.svelte b/src/views/nodes/View.svelte index 1198e2ca1f..4452b1573d 100644 --- a/src/views/nodes/View.svelte +++ b/src/views/nodes/View.svelte @@ -11,9 +11,9 @@ import { isDelegate } from "@app/lib/roles"; import AppLayout from "@app/App/AppLayout.svelte"; - import CopyableId from "@app/components/CopyableId.svelte"; import IconButton from "@app/components/IconButton.svelte"; import IconSmall from "@app/components/IconSmall.svelte"; + import Id from "@app/components/Id.svelte"; import Loading from "@app/components/Loading.svelte"; import Popover from "@app/components/Popover.svelte"; import ProjectCard from "@app/components/ProjectCard.svelte"; @@ -128,25 +128,27 @@ {#each externalAddresses as address} - - {truncateId(nid)}@{address} - + {:else} - -
- {truncateId(nid)} -
-
- {nid} -
- +
+ +
+
+ +
{/each}
-
- {version} -
+ +
+ {version} +
+
diff --git a/src/views/projects/Cob/CobCommitTeaser.svelte b/src/views/projects/Cob/CobCommitTeaser.svelte index 484bd789fd..a016160668 100644 --- a/src/views/projects/Cob/CobCommitTeaser.svelte +++ b/src/views/projects/Cob/CobCommitTeaser.svelte @@ -3,11 +3,11 @@ import { twemoji } from "@app/lib/utils"; - import CommitLink from "@app/views/projects/components/CommitLink.svelte"; import CompactCommitAuthorship from "@app/components/CompactCommitAuthorship.svelte"; import ExpandButton from "@app/components/ExpandButton.svelte"; import IconButton from "@app/components/IconButton.svelte"; import IconSmall from "@app/components/IconSmall.svelte"; + import Id from "@app/components/Id.svelte"; import InlineMarkdown from "@app/components/InlineMarkdown.svelte"; import Link from "@app/components/Link.svelte"; @@ -88,7 +88,7 @@ {/if}
- +
@@ -96,7 +96,7 @@
- +
diff --git a/src/views/projects/Cob/CobHeader.svelte b/src/views/projects/Cob/CobHeader.svelte index d4cd26d031..38a17c256d 100644 --- a/src/views/projects/Cob/CobHeader.svelte +++ b/src/views/projects/Cob/CobHeader.svelte @@ -11,7 +11,6 @@ flex-wrap: wrap; gap: 0.5rem; font-size: var(--font-size-small); - font-family: var(--font-family-monospace); } .summary { display: flex; diff --git a/src/views/projects/Cob/Revision.svelte b/src/views/projects/Cob/Revision.svelte index 1592b6d877..ddc0ab48a6 100644 --- a/src/views/projects/Cob/Revision.svelte +++ b/src/views/projects/Cob/Revision.svelte @@ -18,7 +18,6 @@ import CobCommitTeaser from "@app/views/projects/Cob/CobCommitTeaser.svelte"; import CommentComponent from "@app/components/Comment.svelte"; - import CommitLink from "@app/views/projects/components/CommitLink.svelte"; import DiffStatBadge from "@app/components/DiffStatBadge.svelte"; import DropdownList from "@app/components/DropdownList.svelte"; import DropdownListItem from "@app/components/DropdownList/DropdownListItem.svelte"; @@ -35,6 +34,7 @@ import ReactionSelector from "@app/components/ReactionSelector.svelte"; import Reactions from "@app/components/Reactions.svelte"; import Thread from "@app/components/Thread.svelte"; + import Id from "@app/components/Id.svelte"; export let baseUrl: BaseUrl; export let initiallyExpanded: boolean = false; @@ -300,7 +300,7 @@ (expanded = !expanded)} /> Revision - {utils.formatObjectId(revisionId)} +
@@ -409,21 +409,16 @@ style:padding="0 0.375rem">
- + {#if patchId === revisionId} opened this patch on base - + {:else} updated to - - {utils.formatObjectId(revisionId)} - + {#if previousRevBase && previousRevBase !== revisionBase} with base - + {/if} {/if} merged revision - - {utils.formatObjectId(element.inner.revision)} - + at commit - + @@ -593,9 +582,7 @@ body={review.summary ?? ""}>
{formatVerdict(review.verdict)} - - {utils.formatObjectId(revisionId)} - +
{#if review.verdict === "accept"} diff --git a/src/views/projects/Commit.svelte b/src/views/projects/Commit.svelte index 68d1cdf36d..a53015749b 100644 --- a/src/views/projects/Commit.svelte +++ b/src/views/projects/Commit.svelte @@ -1,17 +1,15 @@ - - - - {formatCommit(commitId)} - - diff --git a/tests/e2e/clipboard.spec.ts b/tests/e2e/clipboard.spec.ts index ababb2e716..36f6138f5c 100644 --- a/tests/e2e/clipboard.spec.ts +++ b/tests/e2e/clipboard.spec.ts @@ -33,7 +33,7 @@ test("copy to clipboard", async ({ page, browserName, context }) => { // Project ID. { - await page.locator(".id > .clipboard").click(); + await page.getByLabel("project-id").click(); const clipboardContent = await page.evaluate( "navigator.clipboard.readText()", ); @@ -63,7 +63,7 @@ test("copy to clipboard", async ({ page, browserName, context }) => { await page.goto("/nodes/radicle.local"); // Node address. { - await page.locator(".clipboard").first().click(); + await page.getByRole("button", { name: "node-id" }).first().click(); await expectClipboard(`${nodeRemote}`, page); } diff --git a/tests/e2e/project.spec.ts b/tests/e2e/project.spec.ts index 5f0616dc24..25c7bfb623 100644 --- a/tests/e2e/project.spec.ts +++ b/tests/e2e/project.spec.ts @@ -288,13 +288,13 @@ test("peer and branch switching", async ({ page }) => { // Alice's peer. { - await page.getByTitle("Change peer").click(); + await page.getByLabel("Change peer").click(); await page .getByRole("link", { name: "alice delegate", }) .click(); - await expect(page.getByTitle("Change peer")).toHaveText("alice Delegate"); + await expect(page.getByLabel("Change peer")).toHaveText("alice Delegate"); // Default `main` branch. { @@ -356,8 +356,8 @@ test("peer and branch switching", async ({ page }) => { { await page.getByRole("link", { name: "source-browsing" }).nth(1).click(); - await expect(page.getByTitle("Change peer")).not.toContainText("alice"); - await expect(page.getByTitle("Change peer")).not.toContainText("bob"); + await expect(page.getByLabel("Change peer")).not.toContainText("alice"); + await expect(page.getByLabel("Change peer")).not.toContainText("bob"); await expect(page.getByTitle("Change branch")).toBeVisible(); await expect( @@ -372,10 +372,10 @@ test("peer and branch switching", async ({ page }) => { // Bob's peer. { - await page.getByTitle("Change peer").click(); + await page.getByLabel("Change peer").click(); await page.getByRole("link", { name: "bob" }).click(); - await expect(page.getByTitle("Change peer")).toContainText("bob"); - await expect(page.getByTitle("Change peer")).not.toHaveText("delegate"); + await expect(page.getByLabel("Change peer")).toContainText("bob"); + await expect(page.getByLabel("Change peer")).not.toHaveText("delegate"); // Default `main` branch. { @@ -402,7 +402,7 @@ test("peer and branch switching", async ({ page }) => { test("only one modal can be open at a time", async ({ page }) => { await page.goto(sourceBrowsingUrl); - await page.getByTitle("Change peer").click(); + await page.getByLabel("Change peer").click(); await page .getByRole("link", { name: "alice delegate", @@ -427,7 +427,7 @@ test("only one modal can be open at a time", async ({ page }) => { await expect(page.getByText("bob")).not.toBeVisible(); await expect(page.getByText("feature/branch")).toBeVisible(); - await page.getByTitle("Change peer").click(); + await page.getByLabel("Change peer").click(); await expect(page.getByText("Code font")).not.toBeVisible(); await expect(page.getByText("Use the Radicle CLI")).not.toBeVisible(); await expect(page.getByText("bob")).toBeVisible(); diff --git a/tests/e2e/project/commit.spec.ts b/tests/e2e/project/commit.spec.ts index 6ce4ffbbaf..401d4fa651 100644 --- a/tests/e2e/project/commit.spec.ts +++ b/tests/e2e/project/commit.spec.ts @@ -13,7 +13,7 @@ const commitUrl = `${sourceBrowsingUrl}/commits/${bobHead}`; test("navigation from commit list", async ({ page }) => { await page.goto(sourceBrowsingUrl); - await page.getByTitle("Change peer").click(); + await page.getByLabel("Change peer").click(); await page.getByRole("link", { name: "bob" }).click(); await page .getByRole("link", { name: `Commits ${bobMainCommitCount}` }) @@ -43,9 +43,7 @@ test("modified file", async ({ page }) => { // Commit header. { await expect(page.getByText("Update readme")).toBeVisible(); - await expect( - page.getByRole("button", { name: shortBobHead }), - ).toBeVisible(); + await expect(page.getByLabel("commit-id")).toHaveText(shortBobHead); } // Diff header. diff --git a/tests/e2e/project/commits.spec.ts b/tests/e2e/project/commits.spec.ts index 8be16ce30e..c2953105bb 100644 --- a/tests/e2e/project/commits.spec.ts +++ b/tests/e2e/project/commits.spec.ts @@ -20,14 +20,14 @@ test("peer and branch switching", async ({ page }) => { // Alice's peer. { - await page.getByTitle("Change peer").click(); + await page.getByLabel("Change peer").click(); await page .getByRole("link", { name: "alice delegate", }) .click(); - await expect(page.getByTitle("Change peer")).toHaveText("alice Delegate"); + await expect(page.getByLabel("Change peer")).toHaveText("alice Delegate"); await expect(page.getByText("Thursday, November 17, 2022")).toBeVisible(); await expect(page.locator(".list .teaser")).toHaveCount( @@ -65,10 +65,10 @@ test("peer and branch switching", async ({ page }) => { // Bob's peer. { - await page.getByTitle("Change peer").click(); + await page.getByLabel("Change peer").click(); await page.getByRole("link", { name: "bob" }).click(); - await expect(page.getByTitle("Change peer")).toContainText("bob"); + await expect(page.getByLabel("Change peer")).toContainText("bob"); await expect(page.getByText("Wednesday, December 21, 2022")).toBeVisible(); await expect(page.locator(".list").first().locator(".teaser")).toHaveCount( @@ -155,9 +155,9 @@ test("relative timestamps", async ({ page }) => { .getByRole("link", { name: `Commits ${aliceMainCommitCount}` }) .click(); - await page.getByTitle("Change peer").click(); + await page.getByLabel("Change peer").click(); await page.getByRole("link", { name: "bob" }).click(); - await expect(page.getByTitle("Change peer")).toHaveText("bob"); + await expect(page.getByLabel("Change peer")).toHaveText("bob"); const latestCommit = page.locator(".teaser").first(); await expect(latestCommit).toContainText( `Bob Belcher committed ${shortBobHead} now`,