Merge pull request #10297 from gitbutlerapp/fix-delete-project

FIx: Delete project & e2e

Author: estib-vega

apps/desktop/src/components/ChromeSidebar.svelte

@@ -275,6 +275,7 @@
 		<div class="bottom__primary-actions">
 			<div>
 				<Button
+					testId={TestId.ChromeSideBarProjectSettingsButton}
 					kind="outline"
 					onclick={() => {
 						openProjectSettings(projectId);

apps/desktop/src/components/GlobalModal.svelte

@@ -45,7 +45,7 @@
 				return {
 					state: modalState,
 					props: {
-						testId: 'general-settings-modal',
+						testId: TestId.GeneralSettingsModal,
 						closeButton: true,
 						width: 820,
 						noPadding: true
@@ -56,7 +56,7 @@
 				return {
 					state: modalState,
 					props: {
-						testId: 'project-settings-modal',
+						testId: TestId.ProjectSettingsModal,
 						closeButton: true,
 						width: 820,
 						noPadding: true

apps/desktop/src/components/RemoveProjectButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, Modal } from '@gitbutler/ui';
+	import { Button, Modal, TestId } from '@gitbutler/ui';
 
 	interface Props {
 		projectTitle?: string;
@@ -36,6 +36,7 @@
 </script>
 
 <Button
+	testId={TestId.ProjectDeleteButton}
 	style="error"
 	kind={outlineStyle ? 'outline' : 'solid'}
 	icon="bin-small"
@@ -66,6 +67,7 @@
 
 	{#snippet controls()}
 		<Button
+			testId={TestId.ProjectDeleteModalConfirm}
 			style="error"
 			kind="outline"
 			reversedDirection

apps/desktop/src/components/RemoveProjectForm.svelte

@@ -4,6 +4,7 @@
 	import RemoveProjectButton from '$components/RemoveProjectButton.svelte';
 	import { showError } from '$lib/notifications/toasts';
 	import { PROJECTS_SERVICE } from '$lib/project/projectsService';
+	import { useSettingsModal } from '$lib/settings/settingsModal.svelte';
 	import { inject } from '@gitbutler/core/context';
 
 	import { SectionCard, chipToasts } from '@gitbutler/ui';
@@ -12,13 +13,15 @@
 
 	const projectsService = inject(PROJECTS_SERVICE);
 	const projectResult = $derived(projectsService.getProject(projectId));
+	const { closeSettings } = useSettingsModal();
 
 	let isDeleting = $state(false);
 
 	async function onDeleteClicked() {
 		isDeleting = true;
 		try {
 			await projectsService.deleteProject(projectId);
+			closeSettings();
 			goto('/');
 			chipToasts.success('Project deleted');
 		} catch (err: any) {

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

@@ -44,10 +44,17 @@ class WebDiskStore implements DiskStore {
 
 	async get<T>(key: string, defaultValue: undefined): Promise<T | undefined>;
 	async get<T>(key: string, defaultValue: T): Promise<T>;
-	async get<T>(_: string, defaultValue?: T): Promise<T | undefined> {
+	async get<T>(key: string, defaultValue?: T): Promise<T | undefined> {
 		// TODO: Implement this for the web version
 		// This is a no-op for the web version
-		return defaultValue;
+		const fromCookie = getCookie(`disk-store-override:${key}`);
+		try {
+			const parsed = fromCookie ? (JSON.parse(fromCookie) as T) : undefined;
+			return parsed ?? defaultValue;
+		} catch (error) {
+			console.error('Error parsing disk store value from cookie', error);
+			return defaultValue;
+		}
 	}
 }
 

e2e/playwright/src/setup.ts

@@ -197,18 +197,15 @@ function spawnProcess(
 	return child;
 }
 
-/**
- * Set the project path cookie in the browser context.
- *
- * This is needed in order for the Frontend to be able to know the absolute paths of the
- * project files. The web file picker is not able to get absolute paths for security reasons.
- */
-async function setProjectPathCookie(context: BrowserContext, workdir: string): Promise<void> {
-	// Set the information about the workdir
+export async function setCookie(
+	name: string,
+	value: string,
+	context: BrowserContext
+): Promise<void> {
 	await context.addCookies([
 		{
-			name: 'PROJECT_PATH',
-			value: workdir,
+			name,
+			value,
 			domain: 'localhost',
 			path: '/',
 			httpOnly: false,
@@ -218,6 +215,17 @@ async function setProjectPathCookie(context: BrowserContext, workdir: string): P
 	]);
 }
 
+/**
+ * Set the project path cookie in the browser context.
+ *
+ * This is needed in order for the Frontend to be able to know the absolute paths of the
+ * project files. The web file picker is not able to get absolute paths for security reasons.
+ */
+async function setProjectPathCookie(context: BrowserContext, workdir: string): Promise<void> {
+	// Set the information about the workdir
+	await setCookie('PROJECT_PATH', workdir, context);
+}
+
 async function runCommand(
 	command: string,
 	args: string[],

e2e/playwright/tests/projectOffboarding.spec.ts

@@ -0,0 +1,46 @@
+import { getBaseURL, type GitButler, setCookie, startGitButler } from '../src/setup.ts';
+import { clickByTestId, waitForTestId, waitForTestIdToNotExist } from '../src/util.ts';
+import { test } from '@playwright/test';
+
+let gitbutler: GitButler;
+
+test.use({
+	baseURL: getBaseURL()
+});
+
+test.afterEach(async () => {
+	gitbutler?.destroy();
+});
+
+test('should be able to delete the last project gracefuly', async ({ page, context }, testInfo) => {
+	const workdir = testInfo.outputPath('workdir');
+	const configdir = testInfo.outputPath('config');
+	gitbutler = await startGitButler(workdir, configdir, context);
+
+	// Override the analytics confirmation so we don't see the page later
+	await setCookie('disk-store-override:appAnalyticsConfirmed', 'true', context);
+
+	await gitbutler.runScript('project-with-remote-branches.sh');
+
+	await page.goto('/');
+
+	// Should load the workspace
+	await waitForTestId(page, 'workspace-view');
+
+	// Open project settings
+	await clickByTestId(page, 'chrome-sidebar-project-settings-button');
+
+	await waitForTestId(page, 'project-settings-modal');
+
+	const deleteProjectButton = await waitForTestId(page, 'project-delete-button');
+	await deleteProjectButton.scrollIntoViewIfNeeded();
+	await deleteProjectButton.click();
+
+	await clickByTestId(page, 'project-delete-modal-confirm');
+
+	await waitForTestIdToNotExist(page, 'project-delete-modal-confirm');
+	await waitForTestIdToNotExist(page, 'project-delete-button');
+	await waitForTestIdToNotExist(page, 'project-settings-modal');
+
+	await waitForTestId(page, 'welcome-page');
+});

packages/ui/src/lib/utils/testIds.ts

@@ -130,13 +130,18 @@ export enum TestId {
 	ProjectSetupPageTargetContinueButton = 'set-base-branch',
 	ProjectSetupGitAuthPage = 'project-setup-git-auth-page',
 	ProjectSetupGitAuthPageButton = 'accept-git-auth',
+	ProjectDeleteButton = 'project-delete-button',
+	ProjectDeleteModalConfirm = 'project-delete-modal-confirm',
 	AddProjectAlreadyExistsModal = 'add-project-already-exists-modal',
 	AddProjectAlreadyExistsModalOpenProjectButton = 'add-project-already-exists-modal-open-project-button',
 	AddProjectBareRepoModal = 'add-project-bare-repo-modal',
 	AddProjectNoDotGitDirectoryModal = 'add-project-no-dot-git-directory-modal',
 	AddProjectNotAGitRepoModal = 'add-project-not-a-git-repo-modal',
 	ChromeHeaderProjectSelector = 'chrome-header-project-selector',
 	ChromeHeaderProjectSelectorAddLocalProject = 'chrome-header-project-selector-add-local-project',
+	ChromeSideBarProjectSettingsButton = 'chrome-sidebar-project-settings-button',
+	ProjectSettingsModal = 'project-settings-modal',
+	GeneralSettingsModal = 'general-settings-modal',
 	SyncButton = 'sync-button',
 	EditMode = 'edit-mode',
 	EditModeSaveAndExitButton = 'edit-mode-save-and-exit-button',