From 536dfac6e4365db0828a860aef207d0223277492 Mon Sep 17 00:00:00 2001
From: estib <stron@me.com>
Date: Tue, 24 Sep 2024 09:54:13 +0200
Subject: [PATCH 1/3] IntegrateUpstreamModal: Factor out the modal

Factor out the modal for upstream integration into a dedicated component so that it can be shared easily
---
 .../src/lib/components/BaseBranch.svelte      |  41 ++-
 .../components/IntegrateUpstreamModal.svelte  | 252 ++++++++++++++++
 .../lib/components/UpdateBaseButton.svelte    | 268 +-----------------
 .../vbranches/upstreamIntegrationService.ts   |  56 +++-
 4 files changed, 333 insertions(+), 284 deletions(-)
 create mode 100644 apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte

diff --git a/apps/desktop/src/lib/components/BaseBranch.svelte b/apps/desktop/src/lib/components/BaseBranch.svelte
index a19cfb1e06..cc5b4bdc9a 100644
--- a/apps/desktop/src/lib/components/BaseBranch.svelte
+++ b/apps/desktop/src/lib/components/BaseBranch.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import IntegrateUpstreamModal from './IntegrateUpstreamModal.svelte';
 	import Spacer from '../shared/Spacer.svelte';
 	import { Project } from '$lib/backend/projects';
 	import CommitCard from '$lib/commit/CommitCard.svelte';
-	import UpdateBaseButton from '$lib/components/UpdateBaseButton.svelte';
 	import { projectMergeUpstreamWarningDismissed } from '$lib/config/config';
 	import { getGitHost } from '$lib/gitHost/interface/gitHost';
 	import { ModeService } from '$lib/modes/service';
@@ -29,6 +29,8 @@
 	);
 
 	let updateTargetModal: Modal;
+	let integrateUpstreamModal: IntegrateUpstreamModal | undefined;
+	let integrateUpstreamModalOpen = false;
 	let mergeUpstreamWarningDismissedCheckbox = false;
 
 	$: multiple = base ? base.upstreamCommits.length > 1 || base.upstreamCommits.length === 0 : false;
@@ -40,7 +42,22 @@
 		}
 	}
 
-	let updateBaseButton: UpdateBaseButton | undefined;
+	function closeIntegrateUpstreamModal() {
+		integrateUpstreamModalOpen = false;
+	}
+
+	function mergeUpstream() {
+		if (project.succeedingRebases) {
+			integrateUpstreamModalOpen = true;
+			integrateUpstreamModal?.show();
+		} else {
+			if (mergeUpstreamWarningDismissedCheckbox) {
+				updateBaseBranch();
+			} else {
+				updateTargetModal.show();
+			}
+		}
+	}
 </script>
 
 <div class="wrapper">
@@ -51,23 +68,17 @@
 	</div>
 
 	{#if base.upstreamCommits?.length > 0}
-		<UpdateBaseButton bind:this={updateBaseButton} showButton={false} />
+		<IntegrateUpstreamModal
+			bind:this={integrateUpstreamModal}
+			onClose={closeIntegrateUpstreamModal}
+		/>
 		<Button
 			style="pop"
 			kind="solid"
 			tooltip={`Merges the commits from ${base.branchName} into the base of all applied virtual branches`}
-			disabled={$mode?.type !== 'OpenWorkspace'}
-			onclick={() => {
-				if (project.succeedingRebases) {
-					updateBaseButton?.openModal();
-				} else {
-					if ($mergeUpstreamWarningDismissed) {
-						updateBaseBranch();
-					} else {
-						updateTargetModal.show();
-					}
-				}
-			}}
+			disabled={$mode?.type !== 'OpenWorkspace' || integrateUpstreamModalOpen}
+			loading={integrateUpstreamModalOpen}
+			onclick={mergeUpstream}
 		>
 			Merge into common base
 		</Button>
diff --git a/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte b/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte
new file mode 100644
index 0000000000..2f8c4619d5
--- /dev/null
+++ b/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte
@@ -0,0 +1,252 @@
+<script lang="ts">
+	import { BaseBranchService } from '$lib/baseBranch/baseBranchService';
+	import CommitCard from '$lib/commit/CommitCard.svelte';
+	import { getGitHost } from '$lib/gitHost/interface/gitHost';
+	import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
+	import Select from '$lib/select/Select.svelte';
+	import SelectItem from '$lib/select/SelectItem.svelte';
+	import { getContext } from '$lib/utils/context';
+	import {
+		getResolutionApproach,
+		sortStatusInfo,
+		UpstreamIntegrationService,
+		type BranchStatusesWithBranches,
+		type BranchStatusInfo,
+		type Resolution
+	} from '$lib/vbranches/upstreamIntegrationService';
+	import Button from '@gitbutler/ui/Button.svelte';
+	import Modal from '@gitbutler/ui/Modal.svelte';
+	import { tick } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import type { Readable } from 'svelte/store';
+
+	type OperationState = 'inert' | 'loading' | 'completed';
+
+	interface Props {
+		onClose?: () => void;
+	}
+
+	const { onClose }: Props = $props();
+
+	const gitHost = getGitHost();
+	const upstreamIntegrationService = getContext(UpstreamIntegrationService);
+	let branchStatuses = $state<Readable<BranchStatusesWithBranches | undefined>>();
+	const baseBranchService = getContext(BaseBranchService);
+	const base = baseBranchService.base;
+
+	let modal = $state<Modal>();
+	let integratingUpstream = $state<OperationState>('inert');
+	let results = $state(new SvelteMap<string, Resolution>());
+	let statuses = $state<BranchStatusInfo[]>([]);
+	let expanded = $state<boolean>(false);
+
+	$effect(() => {
+		if ($branchStatuses?.type !== 'updatesRequired') {
+			statuses = [];
+			return;
+		}
+
+		const statusesTmp = [...$branchStatuses.subject];
+		statusesTmp.sort(sortStatusInfo);
+
+		// Side effect, refresh results
+		results = new SvelteMap(
+			statusesTmp.map((status) => {
+				const defaultApproach = getResolutionApproach(status);
+
+				return [
+					status.branch.id,
+					{
+						branchId: status.branch.id,
+						branchTree: status.branch.tree,
+						approach: defaultApproach
+					}
+				];
+			})
+		);
+
+		statuses = statusesTmp;
+	});
+
+	async function integrate() {
+		integratingUpstream = 'loading';
+		await tick();
+		await upstreamIntegrationService.integrateUpstream(Array.from(results.values()));
+		await baseBranchService.refresh();
+		integratingUpstream = 'completed';
+
+		modal?.close();
+	}
+
+	export async function show() {
+		integratingUpstream = 'inert';
+		expanded = false;
+		branchStatuses = upstreamIntegrationService.upstreamStatuses();
+		await tick();
+		modal?.show();
+	}
+</script>
+
+<Modal bind:this={modal} title="Integrate upstream changes" {onClose} width="small" noPadding>
+	<ScrollableContainer maxHeight="50vh">
+		<div class="modal-content">
+			{#if $base}
+				<div class="upstream-commits">
+					{#each $base.upstreamCommits.slice(0, 2) as commit, index}
+						<CommitCard
+							{commit}
+							first={index === 0}
+							last={(() => {
+								if (expanded) {
+									return $base.upstreamCommits.length - 1 === index;
+								} else {
+									if ($base.upstreamCommits.length > 2) {
+										return index === 1;
+									} else {
+										return $base.upstreamCommits.length - 1 === index;
+									}
+								}
+							})()}
+							isUnapplied={true}
+							commitUrl={$gitHost?.commitUrl(commit.id)}
+							type="remote"
+							filesToggleable={false}
+						/>
+					{/each}
+					{#if $base.upstreamCommits.length > 2}
+						{#if expanded}
+							{#each $base.upstreamCommits.slice(2) as commit, index}
+								<CommitCard
+									{commit}
+									last={index === $base.upstreamCommits.length - 3}
+									isUnapplied={true}
+									commitUrl={$gitHost?.commitUrl(commit.id)}
+									type="remote"
+									filesToggleable={false}
+								/>
+							{/each}
+							<div class="commit-expand-button">
+								<Button wide onclick={() => (expanded = false)}>Hide</Button>
+							</div>
+						{:else}
+							<div class="commit-expand-button">
+								<Button wide onclick={() => (expanded = true)}
+									>Show more ({$base.upstreamCommits.length - 2})</Button
+								>
+							</div>
+						{/if}
+					{/if}
+				</div>
+			{/if}
+			{#if statuses.length > 0}
+				<div class="statuses">
+					{#each statuses as { branch, status }}
+						<div class="branch-status" class:integrated={status.type === 'fullyIntegrated'}>
+							<div class="description">
+								<h5 class="text-16">{branch?.name || 'Unknown'}</h5>
+								{#if status.type === 'conflicted'}
+									<p>Conflicted</p>
+								{:else if status.type === 'saflyUpdatable' || status.type === 'empty'}
+									<p>No Conflicts</p>
+								{:else if status.type === 'fullyIntegrated'}
+									<p>Integrated</p>
+								{/if}
+							</div>
+
+							<div class="action" class:action--centered={status.type === 'fullyIntegrated'}>
+								{#if status.type === 'fullyIntegrated'}
+									<p>Changes included in base branch</p>
+								{:else if results.get(branch.id)}
+									<Select
+										value={results.get(branch.id)!.approach.type}
+										onselect={(value) => {
+										const result = results.get(branch.id)!
+
+										results.set(branch.id, {...result, approach: { type: value as "rebase" | "merge" | "unapply" }})
+									}}
+										options={[
+											{ label: 'Rebase', value: 'rebase' },
+											{ label: 'Merge', value: 'merge' },
+											{ label: 'Stash', value: 'unapply' }
+										]}
+									>
+										{#snippet itemSnippet({ item, highlighted })}
+											<SelectItem selected={highlighted} {highlighted}>
+												{item.label}
+											</SelectItem>
+										{/snippet}
+									</Select>
+								{/if}
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</ScrollableContainer>
+
+	{#snippet controls()}
+		<Button onclick={() => modal?.close()}>Cancel</Button>
+		<Button onclick={integrate} style="pop" kind="solid" loading={integratingUpstream === 'loading'}
+			>Integrate</Button
+		>
+	{/snippet}
+</Modal>
+
+<style>
+	.upstream-commits {
+		text-align: left;
+		padding: 0 16px;
+	}
+
+	.modal-content {
+		display: flex;
+		flex-direction: column;
+		gap: 14px;
+		padding-bottom: 14px;
+	}
+
+	.statuses {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		gap: 14px;
+	}
+
+	.branch-status {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 14px;
+
+		&.integrated {
+			background-color: var(--clr-bg-2);
+		}
+
+		& .description {
+			display: flex;
+			flex-direction: column;
+
+			gap: 8px;
+			text-align: left;
+		}
+
+		& .action {
+			width: 144px;
+
+			&.action--centered {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+	}
+
+	.commit-expand-button {
+		margin: 8px -16px;
+		padding: 0 16px;
+		padding-bottom: 8px;
+
+		border-bottom: 1px solid var(--clr-border-2);
+	}
+</style>
diff --git a/apps/desktop/src/lib/components/UpdateBaseButton.svelte b/apps/desktop/src/lib/components/UpdateBaseButton.svelte
index 5160223506..6135b43def 100644
--- a/apps/desktop/src/lib/components/UpdateBaseButton.svelte
+++ b/apps/desktop/src/lib/components/UpdateBaseButton.svelte
@@ -1,129 +1,34 @@
 <script lang="ts">
+	import IntegrateUpstreamModal from './IntegrateUpstreamModal.svelte';
 	import { Project } from '$lib/backend/projects';
 	import { BaseBranchService } from '$lib/baseBranch/baseBranchService';
-	import CommitCard from '$lib/commit/CommitCard.svelte';
-	import { getGitHost } from '$lib/gitHost/interface/gitHost';
 	import { showInfo } from '$lib/notifications/toasts';
-	import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
-	import Select from '$lib/select/Select.svelte';
-	import SelectItem from '$lib/select/SelectItem.svelte';
 	import { getContext } from '$lib/utils/context';
 	import { BranchController } from '$lib/vbranches/branchController';
-	import { VirtualBranch } from '$lib/vbranches/types';
-	import {
-		UpstreamIntegrationService,
-		type BranchStatus,
-		type BranchStatusesWithBranches,
-		type Resolution,
-		type ResolutionApproach
-	} from '$lib/vbranches/upstreamIntegrationService';
 	import Button from '@gitbutler/ui/Button.svelte';
-	import Modal from '@gitbutler/ui/Modal.svelte';
-	import { SvelteMap } from 'svelte/reactivity';
-	import type { Readable } from 'svelte/store';
 
-	interface Props {
-		showButton?: boolean;
-	}
-
-	const { showButton = true }: Props = $props();
-
-	const upstreamIntegrationService = getContext(UpstreamIntegrationService);
 	const baseBranchService = getContext(BaseBranchService);
-	const gitHost = getGitHost();
 	const branchController = getContext(BranchController);
 	const project = getContext(Project);
 
 	const base = baseBranchService.base;
 
-	let modal = $state<Modal>();
-
-	let modalOpeningState = $state<'inert' | 'loading' | 'completed'>('inert');
-	let branchStatuses = $state<Readable<BranchStatusesWithBranches | undefined>>();
-
-	let results = $state(new SvelteMap<string, Resolution>());
-
-	let statuses = $state<{ branch: VirtualBranch; status: BranchStatus }[]>([]);
-
-	$effect(() => {
-		if ($branchStatuses?.type !== 'updatesRequired') {
-			statuses = [];
-			return;
-		}
-
-		const statusesTmp = [...$branchStatuses.subject];
-		statusesTmp.sort((a, b) => {
-			if (
-				(a.status.type !== 'fullyIntegrated' && b.status.type !== 'fullyIntegrated') ||
-				(a.status.type === 'fullyIntegrated' && b.status.type === 'fullyIntegrated')
-			) {
-				return (a.branch?.name || 'Unknown').localeCompare(b.branch?.name || 'Unknown');
-			}
-
-			if (a.status.type === 'fullyIntegrated') {
-				return 1;
-			} else {
-				return -1;
-			}
-		});
-
-		// Side effect, refresh results
-		results = new SvelteMap(
-			statusesTmp.map((status) => {
-				let defaultApproach: ResolutionApproach;
-
-				if (status.status.type === 'fullyIntegrated') {
-					defaultApproach = { type: 'delete' };
-				} else {
-					if (status.branch.allowRebasing) {
-						defaultApproach = { type: 'rebase' };
-					} else {
-						defaultApproach = { type: 'merge' };
-					}
-				}
-
-				return [
-					status.branch.id,
-					{
-						branchId: status.branch.id,
-						branchTree: status.branch.tree,
-						approach: defaultApproach
-					}
-				];
-			})
-		);
-
-		statuses = statusesTmp;
+	const displayButton = $derived.by(() => {
+		const hasUpstreamCommits = ($base?.upstreamCommits?.length ?? 0) > 0;
+		return hasUpstreamCommits;
 	});
 
-	$effect(() => {
-		if ($branchStatuses && modalOpeningState === 'loading') {
-			modalOpeningState = 'completed';
-			modal?.show();
-			console.log(modalOpeningState);
-		}
-	});
+	let modal = $state<IntegrateUpstreamModal>();
 
-	let integratingUpstream = $state<'inert' | 'loading' | 'complete'>('inert');
+	let modalOpen = $state<boolean>(false);
 
-	export function openModal() {
-		modalOpeningState = 'loading';
-		integratingUpstream = 'inert';
-		expanded = false;
-		branchStatuses = upstreamIntegrationService.upstreamStatuses();
+	function openModal() {
+		modalOpen = true;
+		modal?.show();
 	}
 
 	function onClose() {
-		modalOpeningState = 'inert';
-	}
-
-	async function integrate() {
-		integratingUpstream = 'loading';
-		await upstreamIntegrationService.integrateUpstream([...results.values()]);
-		await baseBranchService.refresh();
-		integratingUpstream = 'complete';
-
-		modal?.close();
+		modalOpen = false;
 	}
 
 	async function updateBaseBranch() {
@@ -132,113 +37,11 @@
 			showInfo('Stashed conflicting branches', infoText);
 		}
 	}
-
-	let expanded = $state(false);
 </script>
 
-<Modal bind:this={modal} title="Integrate upstream changes" {onClose} width="small" noPadding>
-	<ScrollableContainer maxHeight="50vh">
-		{#if $base}
-			<div class="upstream-commits">
-				{#each $base.upstreamCommits.slice(0, 2) as commit, index}
-					<CommitCard
-						{commit}
-						first={index === 0}
-						last={(() => {
-							if (expanded) {
-								return $base.upstreamCommits.length - 1 === index;
-							} else {
-								if ($base.upstreamCommits.length > 2) {
-									return index === 1;
-								} else {
-									return $base.upstreamCommits.length - 1 === index;
-								}
-							}
-						})()}
-						isUnapplied={true}
-						commitUrl={$gitHost?.commitUrl(commit.id)}
-						type="remote"
-						filesToggleable={false}
-					/>
-				{/each}
-				{#if $base.upstreamCommits.length > 2}
-					{#if expanded}
-						{#each $base.upstreamCommits.slice(2) as commit, index}
-							<CommitCard
-								{commit}
-								last={index === $base.upstreamCommits.length - 3}
-								isUnapplied={true}
-								commitUrl={$gitHost?.commitUrl(commit.id)}
-								type="remote"
-								filesToggleable={false}
-							/>
-						{/each}
-						<div class="commit-expand-button">
-							<Button wide onclick={() => (expanded = false)}>Hide</Button>
-						</div>
-					{:else}
-						<div class="commit-expand-button">
-							<Button wide onclick={() => (expanded = true)}
-								>Show more ({$base.upstreamCommits.length - 2})</Button
-							>
-						</div>
-					{/if}
-				{/if}
-			</div>
-		{/if}
-		<div class="statuses">
-			{#each statuses as { branch, status }}
-				<div class="branch-status" class:integrated={status.type === 'fullyIntegrated'}>
-					<div class="description">
-						<h5 class="text-16">{branch?.name || 'Unknown'}</h5>
-						{#if status.type === 'conflicted'}
-							<p>Conflicted</p>
-						{:else if status.type === 'saflyUpdatable' || status.type === 'empty'}
-							<p>No Conflicts</p>
-						{:else if status.type === 'fullyIntegrated'}
-							<p>Integrated</p>
-						{/if}
-					</div>
-
-					<div class="action" class:action--centered={status.type === 'fullyIntegrated'}>
-						{#if status.type === 'fullyIntegrated'}
-							<p>Changes included in base branch</p>
-						{:else if results.get(branch.id)}
-							<Select
-								value={results.get(branch.id)!.approach.type}
-								onselect={(value) => {
-								const result = results.get(branch.id)!
-
-								results.set(branch.id, {...result, approach: { type: value as "rebase" | "merge" | "unapply" }})
-							}}
-								options={[
-									{ label: 'Rebase', value: 'rebase' },
-									{ label: 'Merge', value: 'merge' },
-									{ label: 'Stash', value: 'unapply' }
-								]}
-							>
-								{#snippet itemSnippet({ item, highlighted })}
-									<SelectItem selected={highlighted} {highlighted}>
-										{item.label}
-									</SelectItem>
-								{/snippet}
-							</Select>
-						{/if}
-					</div>
-				</div>
-			{/each}
-		</div>
-	</ScrollableContainer>
+<IntegrateUpstreamModal bind:this={modal} {onClose} />
 
-	{#snippet controls()}
-		<Button onclick={() => modal?.close()}>Cancel</Button>
-		<Button onclick={integrate} style="pop" kind="solid" loading={integratingUpstream === 'loading'}
-			>Integrate</Button
-		>
-	{/snippet}
-</Modal>
-
-{#if showButton && ($base?.upstreamCommits.length || 0) > 0}
+{#if displayButton}
 	<Button
 		size="tag"
 		style="error"
@@ -251,53 +54,8 @@
 				updateBaseBranch();
 			}
 		}}
-		loading={modalOpeningState === 'loading'}
+		loading={modalOpen}
 	>
 		Update
 	</Button>
 {/if}
-
-<style>
-	.upstream-commits {
-		text-align: left;
-
-		padding: 0 16px;
-	}
-
-	.branch-status {
-		display: flex;
-		justify-content: space-between;
-
-		padding: 14px;
-
-		&.integrated {
-			background-color: var(--clr-bg-2);
-		}
-
-		& .description {
-			display: flex;
-			flex-direction: column;
-
-			gap: 8px;
-			text-align: left;
-		}
-
-		& .action {
-			width: 144px;
-
-			&.action--centered {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-		}
-	}
-
-	.commit-expand-button {
-		margin: 8px -16px;
-		padding: 0 16px;
-		padding-bottom: 8px;
-
-		border-bottom: 1px solid var(--clr-border-2);
-	}
-</style>
diff --git a/apps/desktop/src/lib/vbranches/upstreamIntegrationService.ts b/apps/desktop/src/lib/vbranches/upstreamIntegrationService.ts
index 3079797e2f..2f8ab47e4c 100644
--- a/apps/desktop/src/lib/vbranches/upstreamIntegrationService.ts
+++ b/apps/desktop/src/lib/vbranches/upstreamIntegrationService.ts
@@ -16,14 +16,7 @@ export type BranchStatus =
 			};
 	  };
 
-type BranchStatuses =
-	| {
-			type: 'upToDate';
-	  }
-	| {
-			type: 'updatesRequired';
-			subject: [string, BranchStatus][];
-	  };
+export type BranchStatusInfo = { branch: VirtualBranch; status: BranchStatus };
 
 export type BranchStatusesWithBranches =
 	| {
@@ -31,7 +24,7 @@ export type BranchStatusesWithBranches =
 	  }
 	| {
 			type: 'updatesRequired';
-			subject: { branch: VirtualBranch; status: BranchStatus }[];
+			subject: BranchStatusInfo[];
 	  };
 
 export type ResolutionApproach = {
@@ -44,6 +37,42 @@ export type Resolution = {
 	approach: ResolutionApproach;
 };
 
+export function getResolutionApproach(statusInfo: BranchStatusInfo): ResolutionApproach {
+	if (statusInfo.status.type === 'fullyIntegrated') {
+		return { type: 'delete' };
+	}
+
+	if (statusInfo.branch.allowRebasing) {
+		return { type: 'rebase' };
+	}
+
+	return { type: 'merge' };
+}
+
+export function sortStatusInfo(a: BranchStatusInfo, b: BranchStatusInfo): number {
+	if (
+		(a.status.type !== 'fullyIntegrated' && b.status.type !== 'fullyIntegrated') ||
+		(a.status.type === 'fullyIntegrated' && b.status.type === 'fullyIntegrated')
+	) {
+		return (a.branch?.name || 'Unknown').localeCompare(b.branch?.name || 'Unknown');
+	}
+
+	if (a.status.type === 'fullyIntegrated') {
+		return 1;
+	} else {
+		return -1;
+	}
+}
+
+type BranchStatusesResponse =
+	| {
+			type: 'upToDate';
+	  }
+	| {
+			type: 'updatesRequired';
+			subject: [string, BranchStatus][];
+	  };
+
 export class UpstreamIntegrationService {
 	constructor(
 		private project: Project,
@@ -51,10 +80,10 @@ export class UpstreamIntegrationService {
 	) {}
 
 	upstreamStatuses(): Readable<BranchStatusesWithBranches | undefined> {
-		const branchStatuses = readable<BranchStatuses | undefined>(undefined, (set) => {
-			invoke<BranchStatuses>('upstream_integration_statuses', { projectId: this.project.id }).then(
-				set
-			);
+		const branchStatuses = readable<BranchStatusesResponse | undefined>(undefined, (set) => {
+			invoke<BranchStatusesResponse>('upstream_integration_statuses', {
+				projectId: this.project.id
+			}).then(set);
 		});
 
 		const branchStatusesWithBranches = derived(
@@ -85,7 +114,6 @@ export class UpstreamIntegrationService {
 	}
 
 	async integrateUpstream(resolutions: Resolution[]) {
-		console.log(resolutions);
 		return await invoke('integrate_upstream', { projectId: this.project.id, resolutions });
 	}
 }

From 6ce77554fea59ca5220bf44a54987fc480abc213 Mon Sep 17 00:00:00 2001
From: estib <stron@me.com>
Date: Tue, 24 Sep 2024 13:36:25 +0200
Subject: [PATCH 2/3] Modal: Expose the open or closed state

Expose the state of whether the modal is open or not.

[Some more info about this pattern.](https://github.com/sveltejs/svelte/issues/11974#issuecomment-2157837477)
---
 packages/ui/src/lib/Modal.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/ui/src/lib/Modal.svelte b/packages/ui/src/lib/Modal.svelte
index 34b18e4360..6135a3acf4 100644
--- a/packages/ui/src/lib/Modal.svelte
+++ b/packages/ui/src/lib/Modal.svelte
@@ -42,6 +42,12 @@
 		onClose?.();
 		dialogElement?.close();
 	}
+
+	export const imports = {
+		get open() {
+			return open;
+		}
+	};
 </script>
 
 <dialog

From adc6357a808a4d65cca87abad785a0135925c215 Mon Sep 17 00:00:00 2001
From: estib <stron@me.com>
Date: Tue, 24 Sep 2024 13:37:58 +0200
Subject: [PATCH 3/3] Use the exposed state of the integrate upstream modal

Export the state of whether the modal is open or not.
Use it in the base branch page and the update base button.
---
 apps/desktop/src/lib/components/BaseBranch.svelte | 15 +++------------
 .../lib/components/IntegrateUpstreamModal.svelte  |  6 ++++++
 .../src/lib/components/UpdateBaseButton.svelte    |  9 ++-------
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/apps/desktop/src/lib/components/BaseBranch.svelte b/apps/desktop/src/lib/components/BaseBranch.svelte
index cc5b4bdc9a..56510a3eca 100644
--- a/apps/desktop/src/lib/components/BaseBranch.svelte
+++ b/apps/desktop/src/lib/components/BaseBranch.svelte
@@ -30,7 +30,6 @@
 
 	let updateTargetModal: Modal;
 	let integrateUpstreamModal: IntegrateUpstreamModal | undefined;
-	let integrateUpstreamModalOpen = false;
 	let mergeUpstreamWarningDismissedCheckbox = false;
 
 	$: multiple = base ? base.upstreamCommits.length > 1 || base.upstreamCommits.length === 0 : false;
@@ -42,13 +41,8 @@
 		}
 	}
 
-	function closeIntegrateUpstreamModal() {
-		integrateUpstreamModalOpen = false;
-	}
-
 	function mergeUpstream() {
 		if (project.succeedingRebases) {
-			integrateUpstreamModalOpen = true;
 			integrateUpstreamModal?.show();
 		} else {
 			if (mergeUpstreamWarningDismissedCheckbox) {
@@ -68,16 +62,13 @@
 	</div>
 
 	{#if base.upstreamCommits?.length > 0}
-		<IntegrateUpstreamModal
-			bind:this={integrateUpstreamModal}
-			onClose={closeIntegrateUpstreamModal}
-		/>
+		<IntegrateUpstreamModal bind:this={integrateUpstreamModal} />
 		<Button
 			style="pop"
 			kind="solid"
 			tooltip={`Merges the commits from ${base.branchName} into the base of all applied virtual branches`}
-			disabled={$mode?.type !== 'OpenWorkspace' || integrateUpstreamModalOpen}
-			loading={integrateUpstreamModalOpen}
+			disabled={$mode?.type !== 'OpenWorkspace' || integrateUpstreamModal.imports.open}
+			loading={integrateUpstreamModal.imports.open}
 			onclick={mergeUpstream}
 		>
 			Merge into common base
diff --git a/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte b/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte
index 2f8c4619d5..0899e381ee 100644
--- a/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte
+++ b/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte
@@ -85,6 +85,12 @@
 		await tick();
 		modal?.show();
 	}
+
+	export const imports = {
+		get open() {
+			return modal?.imports.open;
+		}
+	};
 </script>
 
 <Modal bind:this={modal} title="Integrate upstream changes" {onClose} width="small" noPadding>
diff --git a/apps/desktop/src/lib/components/UpdateBaseButton.svelte b/apps/desktop/src/lib/components/UpdateBaseButton.svelte
index 6135b43def..0ce4069847 100644
--- a/apps/desktop/src/lib/components/UpdateBaseButton.svelte
+++ b/apps/desktop/src/lib/components/UpdateBaseButton.svelte
@@ -20,16 +20,11 @@
 
 	let modal = $state<IntegrateUpstreamModal>();
 
-	let modalOpen = $state<boolean>(false);
-
 	function openModal() {
-		modalOpen = true;
 		modal?.show();
 	}
 
-	function onClose() {
-		modalOpen = false;
-	}
+	function onClose() {}
 
 	async function updateBaseBranch() {
 		let infoText = await branchController.updateBaseBranch();
@@ -54,7 +49,7 @@
 				updateBaseBranch();
 			}
 		}}
-		loading={modalOpen}
+		loading={modal?.imports.open}
 	>
 		Update
 	</Button>