Show upstream commits if such exist

- component was lost in a refactor, bringing it back
- needs a new design, but landing to unblock users

gitbutler-ui/src/lib/components/BranchCard.svelte

@@ -4,6 +4,7 @@
 	import BranchHeader from './BranchHeader.svelte';
 	import CommitDialog from './CommitDialog.svelte';
 	import DropzoneOverlay from './DropzoneOverlay.svelte';
+	import UpstreamCommits from './UpstreamCommits.svelte';
 	import ImgThemed from '$lib/components/ImgThemed.svelte';
 	import Resizer from '$lib/components/Resizer.svelte';
 	import { projectAiGenAutoBranchNamingEnabled } from '$lib/config/config';
@@ -21,6 +22,7 @@
 	import { dropzone } from '$lib/dragging/dropzone';
 	import { persisted } from '$lib/persisted/persisted';
 	import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/settings/userSettings';
+	import { getRemoteBranchData } from '$lib/stores/remoteBranches';
 	import { computeAddedRemovedByFiles } from '$lib/utils/metrics';
 	import { filesToOwnership, type Ownership } from '$lib/vbranches/ownership';
 	import lscache from 'lscache';
@@ -32,7 +34,13 @@
 	import type { GitHubService } from '$lib/github/service';
 	import type { Persisted } from '$lib/persisted/persisted';
 	import type { BranchController } from '$lib/vbranches/branchController';
-	import type { BaseBranch, Branch, LocalFile } from '$lib/vbranches/types';
+	import type {
+		BaseBranch,
+		Branch,
+		LocalFile,
+		RemoteBranchData,
+		RemoteCommit
+	} from '$lib/vbranches/types';
 
 	export let branch: Branch;
 	export let isUnapplied = false;
@@ -60,6 +68,20 @@
 	const laneWidthKey = 'laneWidth_';
 
 	let laneWidth: number;
+	let upstreamData: RemoteBranchData | undefined;
+	let unknownCommits: RemoteCommit[] | undefined;
+
+	$: upstream = branch.upstream;
+	$: if (upstream) reloadUpstream();
+
+	async function reloadUpstream() {
+		if (upstream?.name) {
+			upstreamData = await getRemoteBranchData(project.id, upstream.name);
+			unknownCommits = upstreamData.commits.filter(
+				(remoteCommit) => !branch.commits.find((commit) => remoteCommit.id == commit.id)
+			);
+		}
+	}
 
 	$: if ($commitBoxOpen && branch.files.length === 0) {
 		$commitBoxOpen = false;
@@ -188,6 +210,17 @@
 						}
 					}}
 				/>
+				{#if unknownCommits && unknownCommits.length > 0 && !branch.conflicted}
+					<UpstreamCommits
+						upstream={upstreamData}
+						branchId={branch.id}
+						{branchController}
+						{branchCount}
+						projectId={project.id}
+						{selectedFiles}
+						{base}
+					/>
+				{/if}
 				<!-- DROPZONES -->
 				<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
 				<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />

gitbutler-ui/src/lib/components/RemoteBranchPreview.svelte

@@ -66,7 +66,7 @@
 						</div>
 					</div>
 				{/if}
-				{#await getRemoteBranchData({ projectId, refname: branch.name }) then branchData}
+				{#await getRemoteBranchData(projectId, branch.name) then branchData}
 					{#if branchData.commits && branchData.commits.length > 0}
 						<div class="flex w-full flex-col gap-y-2">
 							{#each branchData.commits as commit (commit.id)}

gitbutler-ui/src/lib/components/UpstreamCommits.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import CommitCard from './CommitCard.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import { draggable } from '$lib/dragging/draggable';
+	import { draggableRemoteCommit } from '$lib/dragging/draggables';
+	import type { BranchController } from '$lib/vbranches/branchController';
+	import type { BaseBranch, LocalFile, RemoteBranchData } from '$lib/vbranches/types';
+	import type { Writable } from 'svelte/store';
+
+	export let branchId: string;
+	export let projectId: string;
+	export let branchCount: number;
+	export let upstream: RemoteBranchData | undefined;
+	export let branchController: BranchController;
+	export let base: BaseBranch | undefined | null;
+	export let selectedFiles: Writable<LocalFile[]>;
+
+	let upstreamCommitsShown = false;
+
+	$: if (upstreamCommitsShown && upstream?.commits.length === 0) {
+		upstreamCommitsShown = false;
+	}
+
+	function merge() {
+		branchController.mergeUpstream(branchId);
+	}
+</script>
+
+{#if upstream}
+	<div class="bg-zinc-300 p-2 dark:bg-zinc-800">
+		<div class="flex flex-row justify-between">
+			<div class="p-1 text-purple-700">
+				{upstream.commits.length}
+				upstream {upstream.commits.length > 1 ? 'commits' : 'commit'}
+			</div>
+			<Button
+				kind="outlined"
+				color="primary"
+				on:click={() => (upstreamCommitsShown = !upstreamCommitsShown)}
+			>
+				<span class="purple">
+					{#if !upstreamCommitsShown}
+						View
+					{:else}
+						Cancel
+					{/if}
+				</span>
+			</Button>
+		</div>
+	</div>
+	{#if upstreamCommitsShown}
+		<div
+			class="flex w-full flex-col gap-1 border-t border-light-400 bg-light-300 p-2 dark:border-dark-400 dark:bg-dark-800"
+			id="upstreamCommits"
+		>
+			{#each upstream.commits as commit (commit.id)}
+				<div use:draggable={draggableRemoteCommit(branchId, commit)}>
+					<CommitCard
+						{commit}
+						{projectId}
+						commitUrl={base?.commitUrl(commit.id)}
+						{branchController}
+						{selectedFiles}
+					/>
+				</div>
+			{/each}
+			<div class="flex justify-end p-2">
+				{#if branchCount > 1}
+					<div class="px-2 text-sm">
+						You have {branchCount} active branches. To merge upstream work, we will unapply all other
+						branches.
+					</div>
+				{/if}
+				<Button color="primary" on:click={merge}>Merge</Button>
+			</div>
+		</div>
+	{/if}
+{/if}

gitbutler-ui/src/lib/stores/remoteBranches.ts

@@ -24,8 +24,7 @@ export class RemoteBranchService {
 		baseBranch$: Observable<any>
 	) {
 		this.branches$ = combineLatest([baseBranch$, this.reload$, head$, fetches$]).pipe(
-			switchMap(() => listRemoteBranches({ projectId })),
-			// map((branches) => branches.filter((b) => b.ahead != 0)),
+			switchMap(() => listRemoteBranches(projectId)),
 			shareReplay(1),
 			catchError((e) => {
 				console.log(e);
@@ -41,23 +40,21 @@ export class RemoteBranchService {
 	}
 }
 
-async function listRemoteBranches(params: { projectId: string }): Promise<RemoteBranch[]> {
+async function listRemoteBranches(projectId: string): Promise<RemoteBranch[]> {
 	const branches = plainToInstance(
 		RemoteBranch,
-		await invoke<any[]>('list_remote_branches', params)
+		await invoke<any[]>('list_remote_branches', { projectId })
 	);
 
 	return branches;
 }
 
-export async function getRemoteBranchData(params: {
-	projectId: string;
-	refname: string;
-}): Promise<RemoteBranchData> {
-	const branchData = plainToInstance(
+export async function getRemoteBranchData(
+	projectId: string,
+	refname: string
+): Promise<RemoteBranchData> {
+	return plainToInstance(
 		RemoteBranchData,
-		await invoke<any>('get_remote_branch_data', params)
+		await invoke<any>('get_remote_branch_data', { projectId, refname })
 	);
-
-	return branchData;
 }