Merge pull request #4813 from gitbutlerapp/remove-missing-repo

Can remove repository if it's missing, from the error boundary page

Author: estib-vega

apps/desktop/src/app.d.ts

@@ -7,5 +7,6 @@ declare namespace App {
 	interface Error {
 		message: string;
 		errorId?: string;
+		errorCode?: string;
 	}
 }

apps/desktop/src/lib/assets/illustrations/not-found.svg

@@ -7,7 +7,12 @@ export enum Code {
 	Validation = 'errors.validation',
 	ProjectsGitAuth = 'errors.projects.git.auth',
 	DefaultTargetNotFound = 'errors.projects.default_target.not_found',
-	CommitSigningFailed = 'errors.commit.signing_failed'
+	CommitSigningFailed = 'errors.commit.signing_failed',
+	ProjectMissing = 'errors.projects.missing'
+}
+
+export function isUserErrorCode(something: unknown): something is Code {
+	return Object.values(Code).includes(something as Code);
 }
 
 export class UserError extends Error {
@@ -35,6 +40,13 @@ function capitalize(str: string): string {
 	return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
+export function getUserErrorCode(error: unknown): Code | undefined {
+	if (error instanceof UserError) {
+		return error.code;
+	}
+	return undefined;
+}
+
 export async function invoke<T>(command: string, params: Record<string, unknown> = {}): Promise<T> {
 	// This commented out code can be used to delay/reject an api call
 	// return new Promise<T>((resolve, reject) => {

apps/desktop/src/lib/backend/ipc.ts

@@ -81,8 +81,8 @@ export class ProjectService {
 		this.projects.set(await this.loadAll());
 	}
 
-	async getProject(projectId: string) {
-		return plainToInstance(Project, await invoke('get_project', { id: projectId }));
+	async getProject(projectId: string, noValidation?: boolean) {
+		return plainToInstance(Project, await invoke('get_project', { id: projectId, noValidation }));
 	}
 
 	async updateProject(project: Project) {
@@ -113,14 +113,28 @@ export class ProjectService {
 		await invoke('open_project_in_window', { id: projectId });
 	}
 
+	async relocateProject(projectId: string): Promise<void> {
+		const path = await this.getValidPath();
+		if (!path) return;
+
+		try {
+			const project = await this.getProject(projectId, true);
+			project.path = path;
+			await this.updateProject(project);
+			toasts.success(`Project ${project.title} relocated`);
+
+			goto(`/${project.id}/board`);
+		} catch (error: any) {
+			showError('Failed to relocate project:', error.message);
+		}
+	}
+
 	async addProject(path?: string) {
 		if (!path) {
-			path = await this.promptForDirectory();
+			path = await this.getValidPath();
 			if (!path) return;
 		}
 
-		if (!this.validateProjectPath(path)) return;
-
 		try {
 			const project = await this.add(path);
 			if (!project) return;
@@ -132,6 +146,13 @@ export class ProjectService {
 		}
 	}
 
+	async getValidPath(): Promise<string | undefined> {
+		const path = await this.promptForDirectory();
+		if (!path) return undefined;
+		if (!this.validateProjectPath(path)) return undefined;
+		return path;
+	}
+
 	validateProjectPath(path: string, showErrors = true) {
 		if (/^\\\\wsl.localhost/i.test(path)) {
 			if (showErrors) {

apps/desktop/src/lib/backend/projects.ts

@@ -160,7 +160,7 @@
 	.img-wrapper {
 		flex: 1;
 		width: 100%;
-		max-width: 400px;
+		max-width: 440px;
 		overflow: hidden;
 		padding: 0 24px;
 	}

apps/desktop/src/lib/components/DecorativeSplitView.svelte

@@ -7,6 +7,7 @@
 	import derectionDoubtSvg from '$lib/assets/illustrations/direction-doubt.svg?raw';
 	import { ProjectService, Project } from '$lib/backend/projects';
 	import { showError } from '$lib/notifications/toasts';
+	import Spacer from '$lib/shared/Spacer.svelte';
 	import { getContext } from '$lib/utils/context';
 	import * as toasts from '$lib/utils/toasts';
 	import { BranchController } from '$lib/vbranches/branchController';
@@ -82,6 +83,8 @@
 			{/if}
 		</div>
 
+		<Spacer dotted margin={0} />
+
 		<div class="switchrepo__project">
 			<ProjectSwitcher />
 		</div>
@@ -111,6 +114,5 @@
 
 	.switchrepo__project {
 		padding-top: 24px;
-		border-top: 1px dashed var(--clr-scale-ntrl-60);
 	}
 </style>

apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte

@@ -5,6 +5,8 @@
 	import loadErrorSvg from '$lib/assets/illustrations/load-error.svg?raw';
 	import { ProjectService, Project } from '$lib/backend/projects';
 	import { showError } from '$lib/notifications/toasts';
+	import ProjectNameLabel from '$lib/shared/ProjectNameLabel.svelte';
+	import Spacer from '$lib/shared/Spacer.svelte';
 	import { getContext } from '$lib/utils/context';
 	import * as toasts from '$lib/utils/toasts';
 	import Icon from '@gitbutler/ui/Icon.svelte';
@@ -37,10 +39,12 @@
 
 <DecorativeSplitView img={loadErrorSvg}>
 	<div class="problem" data-tauri-drag-region>
-		<p class="problem__project text-bold"><Icon name="repo-book" /> {project?.title}</p>
-		<p class="problem__title text-18 text-body text-bold" data-tauri-drag-region>
+		<div class="project-name">
+			<ProjectNameLabel projectName={project?.title} />
+		</div>
+		<h2 class="problem__title text-18 text-body text-bold" data-tauri-drag-region>
 			There was a problem loading this repo
-		</p>
+		</h2>
 
 		<div class="problem__error text-12 text-body">
 			<Icon name="error" color="error" />
@@ -56,20 +60,17 @@
 			/>
 		</div>
 
+		<Spacer dotted margin={0} />
+
 		<div class="problem__switcher">
 			<ProjectSwitcher />
 		</div>
 	</div>
 </DecorativeSplitView>
 
 <style lang="postcss">
-	.problem__project {
-		display: flex;
-		gap: 8px;
-		align-items: center;
-		line-height: 120%;
-		color: var(--clr-scale-ntrl-30);
-		margin-bottom: 20px;
+	.project-name {
+		margin-bottom: 12px;
 	}
 
 	.problem__title {
@@ -96,6 +97,5 @@
 		display: flex;
 		justify-content: flex-end;
 		padding-bottom: 24px;
-		border-bottom: 1px dashed var(--clr-scale-ntrl-60);
 	}
 </style>

apps/desktop/src/lib/components/ProblemLoadingRepo.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import DecorativeSplitView from './DecorativeSplitView.svelte';
+	import ProjectSwitcher from './ProjectSwitcher.svelte';
+	import RemoveProjectButton from './RemoveProjectButton.svelte';
+	import notFoundSvg from '$lib/assets/illustrations/not-found.svg?raw';
+	import { ProjectService } from '$lib/backend/projects';
+	import InfoMessage from '$lib/shared/InfoMessage.svelte';
+	import Spacer from '$lib/shared/Spacer.svelte';
+	import { getContext } from '$lib/utils/context';
+	import Button from '@gitbutler/ui/Button.svelte';
+
+	const projectService = getContext(ProjectService);
+	const id = projectService.getLastOpenedProject();
+	const projectPromise = id
+		? projectService.getProject(id, true)
+		: Promise.reject('Failed to get project');
+
+	let deleteSucceeded: boolean | undefined = $state(undefined);
+	let isDeleting = $state(false);
+
+	async function stopTracking(id: string) {
+		isDeleting = true;
+		deleteProject: {
+			try {
+				await projectService.deleteProject(id);
+			} catch (e) {
+				deleteSucceeded = false;
+				break deleteProject;
+			}
+			deleteSucceeded = true;
+		}
+		isDeleting = false;
+	}
+
+	async function locate(id: string) {
+		await projectService.relocateProject(id);
+	}
+
+	function getDeletionStatusMessage(repoName: string) {
+		if (deleteSucceeded === undefined) return null;
+		if (deleteSucceeded) return `Project "${repoName}" successfully deleted`;
+		return `Failed to delete "${repoName}" project`;
+	}
+</script>
+
+<DecorativeSplitView img={notFoundSvg}>
+	<div class="container" data-tauri-drag-region>
+		{#if deleteSucceeded === undefined}
+			{#await projectPromise then project}
+				<div class="text-content">
+					<h2 class="title-text text-18 text-body text-bold" data-tauri-drag-region>
+						Can’t find "{project.title}"
+					</h2>
+
+					<p class="description-text text-13 text-body">
+						Sorry, we can't find the project you're looking for.
+						<br />
+						It might have been removed or doesn't exist.
+						<button class="check-again-btn" onclick={() => location.reload()}>Click here</button>
+						to check again.
+						<br />
+						The current project path: <span class="code-string">{project.path}</span>
+					</p>
+				</div>
+
+				<div class="button-container">
+					<Button
+						type="button"
+						style="pop"
+						kind="solid"
+						onclick={async () => await locate(project.id)}>Locate project…</Button
+					>
+					<RemoveProjectButton
+						noModal
+						{isDeleting}
+						onDeleteClicked={async () => await stopTracking(project.id)}
+					/>
+				</div>
+
+				{#if deleteSucceeded !== undefined}
+					<InfoMessage filled outlined={false} style="success" icon="info">
+						<svelte:fragment slot="content"
+							>{getDeletionStatusMessage(project.title)}</svelte:fragment
+						>
+					</InfoMessage>
+				{/if}
+			{:catch}
+				<div class="text-content">
+					<h2 class="title-text text-18 text-body text-bold">Can’t find project</h2>
+				</div>
+			{/await}
+		{/if}
+
+		<Spacer dotted margin={0} />
+		<ProjectSwitcher />
+	</div>
+</DecorativeSplitView>
+
+<style lang="postcss">
+	.container {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+	}
+
+	.button-container {
+		display: flex;
+		gap: 8px;
+	}
+
+	.text-content {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	.title-text {
+		color: var(--clr-scale-ntrl-30);
+		/* margin-bottom: 12px; */
+	}
+
+	.description-text {
+		color: var(--clr-text-2);
+		line-height: 1.6;
+	}
+
+	.check-again-btn {
+		text-decoration: underline;
+	}
+</style>

apps/desktop/src/lib/components/ProjectNotFound.svelte

@@ -4,6 +4,7 @@
 
 	export let projectTitle: string = '#';
 	export let isDeleting = false;
+	export let noModal = false;
 	export let onDeleteClicked: () => Promise<void>;
 
 	export function show() {
@@ -13,18 +14,18 @@
 		modal.close();
 	}
 
+	function handleClick() {
+		if (noModal) {
+			onDeleteClicked();
+		} else {
+			modal.show();
+		}
+	}
+
 	let modal: Modal;
 </script>
 
-<Button
-	style="error"
-	kind="solid"
-	icon="bin-small"
-	reversedDirection
-	onclick={() => {
-		modal.show();
-	}}
->
+<Button style="error" kind="solid" icon="bin-small" reversedDirection onclick={handleClick}>
 	Remove project…
 </Button>