#439 uninstall button (#440)

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>

modules/desktop/src/components/install-button/install-button.svelte

@@ -11,6 +11,10 @@
 		console.log("do nothing");
 	};
 
+	export let uninstall = async () => {
+		console.log("do nothing");
+	};
+
 	$: isOpened = false;
 
 	const toggleOpen = (evt?: MouseEvent) => {
@@ -24,13 +28,19 @@
 
 	const isInstalled = (version: string) => pkg.installed_versions?.includes(version);
 
+	$: installedVersions = pkg.installed_versions || [];
+
 	const handleClick = (evt: MouseEvent, version: string) => {
 		if (isInstalled(version)) {
 			return;
 		}
 
 		isOpened = false;
-		onClick(version);
+		if (version) {
+			onClick(version);
+		} else {
+			uninstall();
+		}
 	};
 
 	const handleClickOutside = () => (isOpened = false);
@@ -40,19 +50,28 @@
 	<PackageStateButton {buttonSize} {pkg} onClick={toggleOpen}>
 		<div class="pt-2">
 			<div class="version-list" class:visible={isOpened}>
+				{#if (pkg?.installed_versions || []).length > 0}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div class="version-item flex items-center justify-start gap-x-1 text-xs"
+						on:click={(evt) => handleClick(evt, "")}
+					>
+						<div>uninstall</div>
+					</div>
+					<hr class="divider" />
+				{/if}
 				{#each availableVersions as version, idx}
 					{#if idx !== 0}<hr class="divider" />{/if}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class="version-item flex items-center justify-start gap-x-1 text-xs"
-						class:installable-version={!isInstalled(version)}
+						class:installable-version={!installedVersions.includes(version)}
 						on:click={(evt) => handleClick(evt, version)}
 					>
-						<div class:installed-text={isInstalled(version)}>v{version}</div>
+						<div class:installed-text={installedVersions.includes(version)}>v{version}</div>
 						{#if idx === 0}
 							<div class="latest-version">(latest)</div>
 						{/if}
-						{#if isInstalled(version)}
+						{#if installedVersions.includes(version)}
 							<div class="flex grow justify-end">
 								<i class="installed-text icon-check-circle flex" />
 							</div>

modules/desktop/src/components/package-banner/package-banner.svelte

@@ -57,6 +57,9 @@
 					{pkg}
 					availableVersions={findAvailableVersions(pkg)}
 					onClick={install}
+					uninstall={async () => {
+						packagesStore.uninstallPkg(pkg);
+					}}
 				/>
 				{#if (pkg?.installed_versions?.length || 0) > 1}
 					<Button

modules/desktop/src/components/package-card/package-card.svelte

@@ -17,6 +17,10 @@
 	export let onClickCTA = async (_version: string) => {
 		console.log("do nothing");
 	};
+
+	export let onUninstall = async () => {
+		console.log("do nothing");
+	}
 </script>
 
 <section
@@ -38,7 +42,9 @@
 				</article>
 				<div class="mt-3.5 flex w-full">
 					<div class="install-button">
-						<InstallButton {pkg} {availableVersions} onClick={onClickCTA} />
+						<InstallButton {pkg} {availableVersions} onClick={onClickCTA}
+							uninstall={onUninstall}
+						/>
 					</div>
 				</div>
 				<div class="mt-1 h-[10px] leading-[10px]">

modules/desktop/src/components/packages/package.svelte

@@ -29,4 +29,7 @@
 	link="/packages/{pkg.slug}?tab={tab}"
 	progessLoading={pkg.install_progress_percentage}
 	{onClickCTA}
+	onUninstall={async () => {
+		packagesStore.uninstallPkg(pkg);
+	}}
 />

modules/desktop/src/libs/stores/pkgs.ts

@@ -166,6 +166,21 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 		}
 	};
 
+	const uninstallPkg = async (pkg: GUIPackage) => {
+		try {
+			for (const v of pkg.installed_versions || []) {
+				await deletePkg(pkg, v);
+			}
+			setTimeout(() => {
+				updatePackage(pkg.full_name, {
+					state: PackageStates.AVAILABLE
+				});
+			}, 3000);
+		} catch (error) {
+			log.error(error);
+		}
+	};
+
 	const fetchPackageBottles = async (pkgName: string) => {
 		// TODO: this api should take an architecture argument or else an architecture filter should be applied downstreawm
 		const bottles = await getPackageBottles(pkgName);
@@ -205,6 +220,7 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 		updatePackage,
 		init,
 		installPkg,
+		uninstallPkg,
 		syncPackageData,
 		deletePkg
 	};