From 5f82eb894bca60dae5fbc681822ae3af59c7c786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Tue, 16 Jan 2024 17:25:11 +0000
Subject: [PATCH] Show "Local Node" breadcrumb on node page only

---
 src/App/Header/Breadcrumbs.svelte             | 2 +-
 src/App/Header/Breadcrumbs/NodeSegment.svelte | 4 ++++
 src/views/nodes/View.svelte                   | 2 +-
 tests/e2e/node.spec.ts                        | 4 +---
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/App/Header/Breadcrumbs.svelte b/src/App/Header/Breadcrumbs.svelte
index 1e35cb829..24d134ef0 100644
--- a/src/App/Header/Breadcrumbs.svelte
+++ b/src/App/Header/Breadcrumbs.svelte
@@ -24,7 +24,7 @@
   <!-- Don't render breadcrumbs for these routes. -->
 {:else if $activeRouteStore.resource === "nodes"}
   <div class="breadcrumbs">
-    <NodeSegment baseUrl={$activeRouteStore.params.baseUrl} />
+    <NodeSegment baseUrl={$activeRouteStore.params.baseUrl} showLocalNode />
   </div>
 {: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"}
   <div class="breadcrumbs">
diff --git a/src/App/Header/Breadcrumbs/NodeSegment.svelte b/src/App/Header/Breadcrumbs/NodeSegment.svelte
index 77d501f5e..5778888ba 100644
--- a/src/App/Header/Breadcrumbs/NodeSegment.svelte
+++ b/src/App/Header/Breadcrumbs/NodeSegment.svelte
@@ -7,6 +7,7 @@
   import Link from "@app/components/Link.svelte";
 
   export let baseUrl: BaseUrl;
+  export let showLocalNode: boolean = false;
 </script>
 
 <style>
@@ -28,6 +29,9 @@
     }}>
     {#if isLocal(baseUrl.hostname)}
       <IconSmall name="device" />
+      {#if showLocalNode}
+        Local Node
+      {/if}
     {:else}
       <IconSmall name="globe" />
       {baseUrl.hostname}
diff --git a/src/views/nodes/View.svelte b/src/views/nodes/View.svelte
index 1ad6c4c27..6c6863e21 100644
--- a/src/views/nodes/View.svelte
+++ b/src/views/nodes/View.svelte
@@ -38,7 +38,7 @@
     }
   }
 
-  $: hostname = isLocal(baseUrl.hostname) ? "radicle.local" : baseUrl.hostname;
+  $: hostname = isLocal(baseUrl.hostname) ? "Local Node" : baseUrl.hostname;
   $: showMoreButton =
     !loadingProjects &&
     !error &&
diff --git a/tests/e2e/node.spec.ts b/tests/e2e/node.spec.ts
index 318de118f..2efd380ac 100644
--- a/tests/e2e/node.spec.ts
+++ b/tests/e2e/node.spec.ts
@@ -21,9 +21,7 @@ test("node metadata", async ({ page, peerManager }) => {
 
   await page.goto(peer.uiUrl());
 
-  await expect(
-    page.locator(".header").getByText("radicle.local"),
-  ).toBeVisible();
+  await expect(page.getByRole("link", { name: "Local Node" })).toBeVisible();
   await expect(
     page.getByText(`${shortNodeRemote}@seed.radicle.test:8123`),
   ).toBeVisible();