Add delegate info to peer selector

This commit also adds a highlight to the currently selected peer and
branch.

Signed-off-by: Sebastian Martinez <sebastinez@me.com>
Signed-off-by: Alexis Sellier <self@cloudhead.io>

src/base/projects/BranchSelector.svelte

@@ -17,7 +17,7 @@
 
   let branchLabel: string | null = null;
 
-  $: branchList = Object.keys(branches).sort();
+  $: branchList = Object.keys(branches).sort().map(b => ({ key: b, value: b, badge: null }));
   $: showSelector = branchList.length > 1;
   $: head = branches[project.defaultBranch];
   $: commit = getOid(revision, branches) || head;
@@ -81,6 +81,7 @@
         </div>
         <Dropdown
           items={branchList}
+          selected={branchLabel}
           visible={branchesDropdown}
           on:select={(e) => switchBranch(e.detail)} />
       </span>

src/base/projects/Header.svelte

@@ -73,16 +73,16 @@
   }
 
   .clone {
-    color: var(--color-primary);
-    background-color: var(--color-primary-background);
+    color: var(--color-yellow);
+    background-color: var(--color-yellow-background);
     font-family: var(--font-family-monospace);
     padding: 0.5rem 0.75rem;
     border-radius: 0.25rem;
     cursor: pointer;
     user-select: none;
   }
-  .clone:hoverr {
-    background-color: var(--color-primary-background-lighter);
+  .clone:hover {
+    background-color: var(--color-yellow-background-lighter);
   }
   .commit-count {
     cursor: pointer;
@@ -103,8 +103,8 @@
     display: block;
   }
   .clone-dropdown input {
-    color: var(--color-primary);
-    background: var(--color-primary-background);
+    color: var(--color-yellow);
+    background: var(--color-yellow-background);
   }
   .dropdown input {
     font-size: 0.75rem;

src/base/projects/PeerSelector.spec.ts

@@ -0,0 +1,80 @@
+import PeerSelector from "./PeerSelector.svelte";
+import { mount } from "radicle-svelte-unit-test";
+import { styles } from "@test/support/index";
+
+const defaultProps = {
+  peer: "hyyg555wwkkutaysg6yr67qnu5d5ji54iur3n5uzzszndh8dp7ofue",
+  peers: [
+    {
+      "id": "hyyg555wwkkutaysg6yr67qnu5d5ji54iur3n5uzzszndh8dp7ofue",
+      "name": "sebastinez",
+      "delegate": true
+    }
+  ],
+  toggleDropdown: () => console.log("toggle"),
+};
+
+describe('PeerSelector', function () {
+  it("Render correctly with default props", () => {
+    mount(PeerSelector, {
+      props: defaultProps
+    }, styles);
+    cy.get("span.peer-id").should("has.text", "sebastinez");
+    cy.get("span.badge").should("has.text", "delegate");
+  });
+
+  it("Test Peer selection", () => {
+    mount(PeerSelector, {
+      props: {
+        ...defaultProps, peers: [
+          {
+            "id": "hyyg555wwkkutaysg6yr67qnu5d5ji54iur3n5uzzszndh8dp7ofue",
+            "name": "sebastinez",
+            "delegate": false
+          },
+          {
+            "id": "hydkkkf5ksbe5fuszdhpqhytu3q36gwagj874wxwpo5a8ti8coygh1",
+            "name": "cloudhead",
+            "delegate": true
+          },
+        ],
+        peersDropdown: true
+      }, callbacks: {
+        peerChanged: cy.stub().as("peerChanged")
+      }
+    }, styles);
+    cy.get("div.dropdown > div").last().click();
+    cy.get("@peerChanged")
+      .should("be.calledOnce")
+      .its("firstCall.args.0.detail")
+      .should("equal", "hydkkkf5ksbe5fuszdhpqhytu3q36gwagj874wxwpo5a8ti8coygh1");
+  });
+  it("If no peers are provided, no dropdown should be showed", () => {
+    mount(PeerSelector, {
+      props: {
+        ...defaultProps,
+        peers: [],
+        peersDropdown: true
+      }
+    }, styles);
+    cy.get("div.dropdown > div.dropdown-item").should("not.exist");
+  });
+  it("If peer identity is not being resolved, fallback to peer id", () => {
+    mount(PeerSelector, {
+      props: {
+        ...defaultProps,
+        peers: [
+          {
+            "id": "hyyg555wwkkutaysg6yr67qnu5d5ji54iur3n5uzzszndh8dp7ofue",
+          }
+        ],
+        peersDropdown: true
+      }
+    }, styles);
+    cy.get("span.peer-id").should("has.text", "hyyg55…p7ofue");
+    cy.get("span.badge").should("not.exist");
+    cy.get("div.dropdown > .dropdown-item")
+      .first()
+      .should("contain", "hyyg555wwkkutaysg6yr67qnu5d5ji54iur3n5uzzszndh8dp7ofue");
+  });
+});

src/base/projects/PeerSelector.svelte

@@ -1,14 +1,29 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import Icon from "@app/Icon.svelte";
   import Dropdown from "@app/Dropdown.svelte";
   import { formatSeedId } from "@app/utils";
+  import type { Peer } from "@app/project";
 
   export let peer: string | null = null;
-  export let peers: (string | { id: string })[];
+  export let peers: Peer[];
   export let toggleDropdown: (input: string) => void;
   export let peersDropdown = false;
 
+  let meta: Peer | undefined;
+  // List of items to be created for the Dropdown component.
+  let items: { key: string; value: string; badge: string | null }[] = [];
+
+  onMount(() => {
+    meta = peers.find(p => p.id === peer);
+    items = peers.map(p => {
+      if (! p.name) console.debug("Not able to resolve peer identity for: ", p.id);
+      let key = p.name ? `<strong>${p.name}</strong> ${p.id}` : p.id;
+
+      return { key, value: p.id, badge: p.delegate ? "delegate" : null };
+    });
+  });
+
   const dispatch = createEventDispatcher();
   const switchPeer = (peer: string) => {
     dispatch("peerChanged", peer);
@@ -32,8 +47,11 @@
   .selector .peer.not-allowed {
     cursor: not-allowed;
   }
+  .selector .badge {
+    margin: 0;
+  }
   .peer-id {
-    margin-left: 0.5rem;
+    margin: 0 0.5rem;
   }
   .peer:hover {
     background-color: var(--color-foreground-background-lighter);
@@ -52,14 +70,23 @@
   <span>
     <div on:click={() => toggleDropdown("peer")} class="stat peer" class:not-allowed={!peers}>
       <Icon name="fork" width={15} height={15} />
-      {#if peer}
+      {#if meta}
+        <span class="peer-id">
+          {meta.name ?? formatSeedId(meta.id)}
+        </span>
+        {#if meta.delegate}
+          <span class="badge primary">delegate</span>
+        {/if}
+      <!-- If the delegate metadata is not found -->
+      {:else if peer}
         <span class="peer-id">
           {formatSeedId(peer)}
         </span>
       {/if}
     </div>
     <Dropdown
-      items={peers.map((p) => typeof(p) == "string" ? p : p.id)}
+      {items}
+      selected={peer}
       visible={peersDropdown}
       on:select={(e) => switchPeer(e.detail)}
     />