refactor(ui): source browsing

cypress/integration/project_source_browsing.spec.js

@@ -317,6 +317,9 @@ context("source code browsing", () => {
     });
 
     it("allows navigating the tree structure", () => {
+      // Ensure the file has loaded before navigating away.
+      cy.pick("file-source").contains("README.md");
+
       cy.pick("source-tree").within(() => {
         // Traverse deeply nested folders.
         cy.pick("expand-this").click();
@@ -342,6 +345,9 @@ context("source code browsing", () => {
     });
 
     it("highlights the selected file", () => {
+      // Ensure the file has loaded before navigating away.
+      cy.pick("file-source").contains("README.md");
+
       cy.pick("source-tree").within(() => {
         cy.contains(".i-am-well-hidden").should("not.have.class", "active");
         cy.contains(".i-am-well-hidden").click();
@@ -352,6 +358,9 @@ context("source code browsing", () => {
     context("when clicking on a file name", () => {
       context("for non-binary files", () => {
         it("shows the contents of the file", () => {
+          // Ensure the file has loaded before navigating away.
+          cy.pick("file-source").contains("README.md");
+
           cy.pick("source-tree").within(() => {
             cy.pick("expand-src").click();
             cy.contains("Eval.hs").click();
@@ -374,6 +383,9 @@ context("source code browsing", () => {
 
       context("for binary files", () => {
         it("does not render the binary content", () => {
+          // Ensure the file has loaded before navigating away.
+          cy.pick("file-source").contains("README.md");
+
           cy.pick("source-tree").within(() => {
             cy.pick("expand-bin").click();
             cy.contains("ls").click();

ui/DesignSystem/Component/HorizontalMenu.svelte

@@ -12,7 +12,7 @@
     title: string;
     href: string;
     looseActiveStateMatching: boolean;
-    counter?: string;
+    counter?: string | number;
   }[];
 </script>
 

ui/DesignSystem/Component/HorizontalMenu/MenuItem.svelte

@@ -7,7 +7,7 @@
   export let icon: typeof SvelteComponent;
   export let title: string;
   export let active: boolean;
-  export let counter: string | undefined;
+  export let counter: string | number | undefined = undefined;
 </script>
 
 <style>

ui/DesignSystem/Component/SourceBrowser/RevisionSelector.svelte

@@ -1,48 +1,26 @@
-<script>
-  import { getContext } from "svelte";
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
 
   import { isExperimental } from "../../../../native/ipc.js";
-  import { RevisionType } from "../../../src/source.ts";
+
+  import * as source from "../../../src/source";
 
   import Overlay from "../Overlay.svelte";
   import { Icon } from "../../Primitive";
 
-  export let currentRevision = null;
-  export let currentPeerId = null;
-  export let expanded = false;
-  export let revisions = null;
-
-  let currentSelectedPeer;
-
-  const { metadata } = getContext("project");
-
-  $: if (currentPeerId) {
-    currentSelectedPeer = revisions.find(rev => {
-      return rev.identity.peerId === currentPeerId;
-    });
-  } else {
-    // The API returns a revision list where the first entry is the default
-    // peer.
-    currentSelectedPeer = revisions[0];
-  }
-
-  // initialize currentRevision
-  $: if (!currentRevision) {
-    currentRevision = {
-      type: RevisionType.Branch,
-      name: metadata.defaultBranch,
-      peerId: currentSelectedPeer ? currentSelectedPeer.identity.peerId : "",
-    };
-  }
+  export let revisions: source.PeerRevisions;
+  export let currentRevision: source.Branch | source.Tag;
 
+  let expanded: boolean = false;
   const toggle = () => (expanded = !expanded);
-
   const hideDropdown = () => {
     expanded = false;
   };
 
-  const selectRevision = revision => {
-    currentRevision = revision;
+  const dispatch = createEventDispatcher();
+
+  const selectRevision = (revision: source.Branch | source.Tag) => {
+    dispatch("select", { revision });
     hideDropdown();
   };
 </script>
@@ -126,7 +104,7 @@
     hidden={expanded}>
     <div class="selector-avatar typo-overflow-ellipsis">
       <div style="display: flex; overflow: hidden;">
-        {#if currentRevision.type === RevisionType.Branch}
+        {#if currentRevision.type === source.RevisionType.Branch}
           <Icon.Branch
             dataCy="branch-icon"
             style="vertical-align: bottom; fill: var(--color-foreground-level-4);
@@ -150,38 +128,31 @@
   <div class="revision-dropdown-container">
     <div class="revision-dropdown" hidden={!expanded}>
       <ul>
-        {#each currentSelectedPeer.branches as branch}
+        {#each revisions.branches as branch}
           <li
             class="branch"
-            class:selected={currentRevision.name === branch && currentSelectedPeer.identity.peerId === currentSelectedPeer.identity.peerId}
-            data-branch={branch}
-            on:click|stopPropagation={() => selectRevision({
-                type: RevisionType.Branch,
-                peerId: currentSelectedPeer.identity.peerId,
-                name: branch,
-              })}>
+            class:selected={currentRevision.name === branch.name && currentRevision.peerId === branch.peerId}
+            data-branch={branch.name}
+            on:click={() => selectRevision(branch)}>
             <Icon.Branch
               dataCy="branch-icon"
               style="vertical-align: bottom; fill:
             var(--color-foreground-level-4)" />
-            <span class="revision-name typo-text">{branch}</span>
+            <span class="revision-name typo-text">{branch.name}</span>
           </li>
         {/each}
         {#if isExperimental()}
-          {#each currentSelectedPeer.tags as tag}
+          {#each revisions.tags as tag}
             <li
               class="tag"
-              class:selected={currentRevision.name === tag && currentSelectedPeer.identity.peerId === currentSelectedPeer.identity.peerId}
-              data-tag={tag}
-              on:click|stopPropagation={() => selectRevision({
-                  type: RevisionType.Tag,
-                  name: tag,
-                })}>
+              class:selected={currentRevision.name === tag.name && currentRevision.peerId === tag.peerId}
+              data-tag={tag.name}
+              on:click={() => selectRevision(tag)}>
               <Icon.Label
                 dataCy="tag-icon"
                 style="vertical-align: bottom; fill:
               var(--color-foreground-level-4)" />
-              <span class="revision-name typo-text">{tag}</span>
+              <span class="revision-name typo-text">{tag.name}</span>
             </li>
           {/each}
         {/if}

ui/Modal/SearchModal.svelte

@@ -7,7 +7,6 @@
   import { Remote, TrackToggle, Urn } from "../DesignSystem/Component";
 
   import * as path from "../src/path";
-  import * as remote from "../src/remote";
 
   import { request, updateUrn, validation } from "../src/search";
   import { ValidationStatus } from "../src/validation";