From 5868114be869594226f68ecd1cc7c0a796b591fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= Date: Thu, 16 Nov 2023 17:40:43 +0100 Subject: [PATCH] Add breadcrumbs to header --- src/App/Header.svelte | 10 +-- src/App/Header/Breadcrumbs.svelte | 38 +++++++++++ src/App/Header/Breadcrumbs/NodeSegment.svelte | 36 ++++++++++ .../Header/Breadcrumbs/ProjectSegment.svelte | 67 +++++++++++++++++++ src/App/Header/Breadcrumbs/Separator.svelte | 7 ++ src/components/IconSmall.svelte | 6 ++ src/components/Link.svelte | 3 +- src/views/projects/Layout.svelte | 15 +---- tests/e2e/hashRouter.spec.ts | 2 +- tests/e2e/historyRouter.spec.ts | 2 +- tests/e2e/project.spec.ts | 4 +- tests/e2e/project/commits.spec.ts | 5 +- 12 files changed, 171 insertions(+), 24 deletions(-) create mode 100644 src/App/Header/Breadcrumbs.svelte create mode 100644 src/App/Header/Breadcrumbs/NodeSegment.svelte create mode 100644 src/App/Header/Breadcrumbs/ProjectSegment.svelte create mode 100644 src/App/Header/Breadcrumbs/Separator.svelte diff --git a/src/App/Header.svelte b/src/App/Header.svelte index b5f062ee89..c0a7f391e5 100644 --- a/src/App/Header.svelte +++ b/src/App/Header.svelte @@ -1,9 +1,11 @@ + +{#if $activeRouteStore.resource === "booting" || $activeRouteStore.resource === "home" || $activeRouteStore.resource === "session" || $activeRouteStore.resource === "loadError" || $activeRouteStore.resource === "notFound"} + +{:else if $activeRouteStore.resource === "nodes"} +
+ +
+{:else if $activeRouteStore.resource === "project.source" || $activeRouteStore.resource === "project.history" || $activeRouteStore.resource === "project.commit" || $activeRouteStore.resource === "project.issues" || $activeRouteStore.resource === "project.newIssue" || $activeRouteStore.resource === "project.issue" || $activeRouteStore.resource === "project.patches" || $activeRouteStore.resource === "project.patch"} +
+ + + + + +
+{:else} + {utils.unreachable($activeRouteStore)} +{/if} diff --git a/src/App/Header/Breadcrumbs/NodeSegment.svelte b/src/App/Header/Breadcrumbs/NodeSegment.svelte new file mode 100644 index 0000000000..10b1e88b7c --- /dev/null +++ b/src/App/Header/Breadcrumbs/NodeSegment.svelte @@ -0,0 +1,36 @@ + + + + + + + {#if isLocal(baseUrl.hostname)} + + Local Node + {:else} + + {baseUrl.hostname} + {/if} + + diff --git a/src/App/Header/Breadcrumbs/ProjectSegment.svelte b/src/App/Header/Breadcrumbs/ProjectSegment.svelte new file mode 100644 index 0000000000..7eed40694c --- /dev/null +++ b/src/App/Header/Breadcrumbs/ProjectSegment.svelte @@ -0,0 +1,67 @@ + + + + + + + {activeRoute.params.project.name} + + + + + + + + {#if activeRoute.resource === "project.history" || activeRoute.resource === "project.commit"} + Commits + {:else if activeRoute.resource === "project.newIssue" || activeRoute.resource === "project.issue"} + Issues + {:else if activeRoute.resource === "project.patch"} + Patches + {:else} + {capitalize(activeRoute.resource.split(".")[1])} + {/if} + + + +{#if activeRoute.resource === "project.commit"} + + + {utils.formatCommit(activeRoute.params.commit.commit.id)} + +{:else if activeRoute.resource === "project.issue"} + + + {utils.formatObjectId(activeRoute.params.issue.id)} + +{:else if activeRoute.resource === "project.patch"} + + + {utils.formatObjectId(activeRoute.params.patch.id)} + +{/if} diff --git a/src/App/Header/Breadcrumbs/Separator.svelte b/src/App/Header/Breadcrumbs/Separator.svelte new file mode 100644 index 0000000000..cc38c2ca69 --- /dev/null +++ b/src/App/Header/Breadcrumbs/Separator.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/src/components/IconSmall.svelte b/src/components/IconSmall.svelte index 647cb54cb3..8f773dc744 100644 --- a/src/components/IconSmall.svelte +++ b/src/components/IconSmall.svelte @@ -29,6 +29,7 @@ | "eye-open" | "face" | "file" + | "globe" | "issue" | "key" | "logo" @@ -282,6 +283,11 @@ fill-rule="evenodd" clip-rule="evenodd" d="M4.5 3.33329C4.5 3.24125 4.57462 3.16663 4.66667 3.16663H8.5898C8.79929 3.16663 9.0011 3.24553 9.15503 3.38762L11.2319 5.30473C11.4028 5.46249 11.5 5.68449 11.5 5.91707V12.6666C11.5 12.7587 11.4254 12.8333 11.3333 12.8333H4.66667C4.57462 12.8333 4.5 12.7587 4.5 12.6666V3.33329ZM4.66667 2.16663C4.02233 2.16663 3.5 2.68896 3.5 3.33329V12.6666C3.5 13.311 4.02233 13.8333 4.66667 13.8333H11.3333C11.9777 13.8333 12.5 13.311 12.5 12.6666V5.91707C12.5 5.40539 12.2862 4.91699 11.9102 4.56993L9.83331 2.65282C9.49466 2.34021 9.05068 2.16663 8.5898 2.16663H4.66667ZM6 4.16663C5.72386 4.16663 5.5 4.39048 5.5 4.66663C5.5 4.94277 5.72386 5.16663 6 5.16663H7.33333C7.60948 5.16663 7.83333 4.94277 7.83333 4.66663C7.83333 4.39048 7.60948 4.16663 7.33333 4.16663H6ZM6 6.83329C5.72386 6.83329 5.5 7.05715 5.5 7.33329C5.5 7.60944 5.72386 7.83329 6 7.83329H10C10.2761 7.83329 10.5 7.60944 10.5 7.33329C10.5 7.05715 10.2761 6.83329 10 6.83329H6ZM6 8.83329C5.72386 8.83329 5.5 9.05715 5.5 9.33329C5.5 9.60943 5.72386 9.83329 6 9.83329H8.66667C8.94281 9.83329 9.16667 9.60943 9.16667 9.33329C9.16667 9.05715 8.94281 8.83329 8.66667 8.83329H6ZM6 10.8333C5.72386 10.8333 5.5 11.0571 5.5 11.3333C5.5 11.6094 5.72386 11.8333 6 11.8333H9.33333C9.60948 11.8333 9.83333 11.6094 9.83333 11.3333C9.83333 11.0571 9.60948 10.8333 9.33333 10.8333H6Z" /> + {:else if name === "globe"} + {:else if name === "issue"} - + diff --git a/src/views/projects/Layout.svelte b/src/views/projects/Layout.svelte index b368c93b06..f28d01f627 100644 --- a/src/views/projects/Layout.svelte +++ b/src/views/projects/Layout.svelte @@ -5,9 +5,8 @@ import dompurify from "dompurify"; import markdown from "@app/lib/markdown"; - import { twemoji, isLocal } from "@app/lib/utils"; + import { twemoji } from "@app/lib/utils"; - import Button from "@app/components/Button.svelte"; import CloneButton from "@app/views/projects/Header/CloneButton.svelte"; import Link from "@app/components/Link.svelte"; @@ -93,18 +92,6 @@
- - - { await expectBackAndForwardNavigationWorks("/#/nodes/radicle.local", page); await expectUrlPersistsReload(page); - await page.getByRole("link", { name: "radicle.local" }).click(); + await page.getByRole("link", { name: "Local Node" }).click(); await expect(page).toHaveURL("/#/nodes/127.0.0.1"); }); diff --git a/tests/e2e/historyRouter.spec.ts b/tests/e2e/historyRouter.spec.ts index f373a98df6..f62389c712 100644 --- a/tests/e2e/historyRouter.spec.ts +++ b/tests/e2e/historyRouter.spec.ts @@ -34,7 +34,7 @@ test("navigation between node and project pages", async ({ page }) => { await expectBackAndForwardNavigationWorks("/nodes/radicle.local", page); await expectUrlPersistsReload(page); - await page.getByRole("link", { name: "radicle.local" }).click(); + await page.getByRole("link", { name: "Local Node" }).click(); await expect(page).toHaveURL("/nodes/127.0.0.1"); }); diff --git a/tests/e2e/project.spec.ts b/tests/e2e/project.spec.ts index 032df3dcbc..d530e97bca 100644 --- a/tests/e2e/project.spec.ts +++ b/tests/e2e/project.spec.ts @@ -36,7 +36,7 @@ test("navigate to project", async ({ page }) => { // Header. { - const name = page.getByText("source-browsing"); + const name = page.getByRole("link", { name: "source-browsing" }).nth(1); const id = page.getByText(sourceBrowsingRid); const description = page.getByText( "Git repository for source browsing tests", @@ -331,7 +331,7 @@ test("peer and branch switching", async ({ page }) => { // Reset the source browser by clicking the project title. { - await page.getByText("source-browsing").click(); + 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"); diff --git a/tests/e2e/project/commits.spec.ts b/tests/e2e/project/commits.spec.ts index dc1244e254..f546bfbec6 100644 --- a/tests/e2e/project/commits.spec.ts +++ b/tests/e2e/project/commits.spec.ts @@ -150,7 +150,10 @@ test("pushing changes while viewing history", async ({ page, peerManager }) => { await expect(page.getByLabel("canonical-branch")).toHaveText("main"); await expect(page.getByTitle("Current HEAD")).toHaveText("516fa74"); - await page.getByText("alice-project").click(); + await page + .getByRole("banner") + .getByRole("link", { name: "alice-project" }) + .click(); await expect(page).toHaveURL(`${alice.uiUrl()}/${rid}`); await page.getByRole("link", { name: "2 commits" }).click();