fix(tests): properly select peer in networking tests

Instead of using the test ID `peer-dropdown-container` to select a peer
we use the newly introduced `peer-dropdown-entry`. The former ID would
select the container element and clicking it should not result in peers
selection. (In practice this worked though because of how cypress
translates clicks to coordinates.)

We also inline the `Entry` component for the peer selector dropdown.

Signed-off-by: Thomas Scholtes <thomas@monadic.xyz>

cypress/integration/networking.spec.ts

@@ -104,7 +104,7 @@ context("p2p networking", () => {
 
           cy.log("current user does not show up in the peer selector");
           commands
-            .pickWithContent(["peer-dropdown-container"], "abbey")
+            .pickWithContent(["peer-dropdown-entry"], "abbey")
             .should("not.exist");
 
           cy.log("add contributor remote on maintainer's node");
@@ -227,9 +227,7 @@ context("p2p networking", () => {
           nodeManager.asNode(maintainerNode);
           commands.pick("project-list-entry-new-fancy-project.xyz").click();
           commands.pick("peer-selector").click();
-          commands
-            .pickWithContent(["peer-dropdown-container"], "abbey")
-            .click();
+          commands.pickWithContent(["peer-dropdown-entry"], "abbey").click();
           commands.pick("commits-tab").click();
           commands
             .pickWithContent(["commits-page"], contributorCommitSubject)

ui/DesignSystem/Component/PeerSelector.svelte

@@ -9,7 +9,6 @@
   import { Icon } from "../Primitive";
   import { Overlay, Tooltip } from "../Component";
 
-  import Entry from "./PeerSelector/Entry.svelte";
   import Peer from "./PeerSelector/Peer.svelte";
 
   export let expanded: boolean = false;
@@ -105,6 +104,29 @@
     display: flex;
     justify-content: center;
   }
+
+  .entry {
+    align-items: center;
+    background-color: var(--color-background);
+    color: var(--color-foreground-level-3);
+    cursor: not-allowed;
+    display: flex;
+    height: 2.5rem;
+    justify-content: space-between;
+    padding: 0 0.5em;
+  }
+
+  .entry.enabled {
+    color: var(--color-foreground-level-6);
+  }
+  .entry.enabled:hover {
+    background-color: var(--color-foreground-level-2);
+    cursor: pointer;
+  }
+
+  .entry.selected {
+    background-color: var(--color-foreground-level-2);
+  }
 </style>
 
 <Overlay
@@ -131,10 +153,12 @@
         dropdownHeight > 40 ? "0.5rem" : "0"
       }`}>
       {#each orderPeers(peers) as peer (peer.peerId)}
-        <Entry
-          disabled={peer.role === PeerRole.Tracker}
-          on:click={() => onSelect(peer)}
-          selected={peer.identity.peerId === selected.identity.peerId}>
+        <div
+          data-cy="peer-dropdown-entry"
+          class="entry"
+          class:enabled={peer.role !== PeerRole.Tracker}
+          class:selected={peer.identity.peerId === selected.identity.peerId}
+          on:click|stopPropagation={() => onSelect(peer)}>
           {#if peer.role === PeerRole.Tracker}
             <Tooltip position={CSSPosition.Left} value="Remote has no changes">
               <Peer {peer} />
@@ -155,7 +179,7 @@
               </Tooltip>
             {/if}
           </div>
-        </Entry>
+        </div>
       {/each}
     </div>
   </div>