Merge pull request #6001 from gitbutlerapp/disabling-gitbutler-cloud

Add button for disabling cloud functionality

Author: Caleb-T-Owens

apps/desktop/src/components/CloudProjectSettings.svelte

@@ -16,9 +16,10 @@
 	import { RepositoryIdLookupService } from '@gitbutler/shared/organizations/repositoryIdLookupService';
 	import { AppState } from '@gitbutler/shared/redux/store.svelte';
 	import { WebRoutesService } from '@gitbutler/shared/routing/webRoutes';
-	import Button from '@gitbutler/ui/Button.svelte';
+	import AsyncButton from '@gitbutler/ui/AsyncButton.svelte';
 	import SectionCard from '@gitbutler/ui/SectionCard.svelte';
 	import Toggle from '@gitbutler/ui/Toggle.svelte';
+	import type { Project as BackendProject } from '$lib/project/project';
 	import type { Project } from '@gitbutler/shared/organizations/types';
 
 	const appState = getContext(AppState);
@@ -94,6 +95,17 @@
 		await projectsService.updateProject(mutableProject);
 	}
 
+	async function detachProject() {
+		if (!$project) {
+			return;
+		}
+
+		const mutableProject: BackendProject & { unset_api?: boolean } = structuredClone($project);
+		mutableProject.api = undefined;
+		mutableProject.unset_api = true;
+		await projectsService.updateProject(mutableProject);
+	}
+
 	async function onSyncChange(sync: boolean) {
 		if (!$project?.api) return;
 
@@ -199,9 +211,13 @@
 			{/if}
 		{/snippet}
 	</Loading>
+
+	<div>
+		<AsyncButton kind="outline" action={detachProject}>Disable cloud functionality</AsyncButton>
+	</div>
 {:else if !$project?.api?.repository_id}
 	<Section>
-		<Button onclick={createProject}>Enable cloud functionality</Button>
+		<AsyncButton action={createProject}>Enable cloud functionality</AsyncButton>
 	</Section>
 {:else}
 	<p>Loading...</p>

packages/ui/src/lib/AsyncButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import Button from '$lib/Button.svelte';
+	import type { TooltipPosition, TooltipAlign } from '$lib/Tooltip.svelte';
+	import type iconsJson from '$lib/data/icons.json';
+	import type { ComponentColorType, ComponentKindType } from '$lib/utils/colorTypes';
+	import type { Snippet } from 'svelte';
+
+	type ButtonPropsSubset = {
+		id?: string | undefined;
+		el?: HTMLElement;
+		// Interaction props
+		disabled?: boolean;
+		activated?: boolean;
+		tabindex?: number | undefined;
+		type?: 'submit' | 'reset' | 'button' | undefined;
+		// Layout props
+		shrinkable?: boolean;
+		reversedDirection?: boolean;
+		width?: number | undefined;
+		maxWidth?: number | undefined;
+		size?: 'tag' | 'button' | 'cta';
+		wide?: boolean;
+		grow?: boolean;
+		align?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'auto';
+		dropdownChild?: boolean;
+		// Style props
+		style?: ComponentColorType;
+		kind?: ComponentKindType;
+		solidBackground?: boolean;
+		// Additional elements
+		icon?: keyof typeof iconsJson | undefined;
+		tooltip?: string;
+		tooltipPosition?: TooltipPosition;
+		tooltipAlign?: TooltipAlign;
+		helpShowDelay?: number;
+		testId?: string;
+		// Snippets
+		children?: Snippet;
+	};
+
+	type Props = ButtonPropsSubset & { action: () => Promise<void> };
+	const { action, ...rest }: Props = $props();
+
+	let state = $state<'inert' | 'loading' | 'complete'>('inert');
+
+	async function performAction() {
+		state = 'loading';
+
+		try {
+			await action();
+		} finally {
+			state = 'complete';
+		}
+	}
+</script>
+
+<Button onclick={performAction} {...rest}></Button>