install tea cli automatically (#434)

* #433 install tea cli automatically

* bump to v0.0.29

---------

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

modules/desktop/electron/libs/cli.ts

@@ -1,12 +1,11 @@
-import { spawn } from "child_process";
+import { spawn, execSync } from "child_process";
 import { clean } from "semver";
 import { getGuiPath } from "./tea-dir";
 import fs from "fs";
 import path from "path";
+import axios from "axios";
 
-import Pushy from "pushy-electron";
 import * as log from "electron-log";
-import { nameToSlug } from "./package";
 import { subscribeToPackageTopic } from "./push-notification";
 
 export async function installPackage(full_name: string) {
@@ -76,6 +75,19 @@ export async function openTerminal(cmd: string) {
 	}
 }
 
+export async function installTeaCli(version: string): Promise<string> {
+	try {
+		log.info("installing tea-cli");
+		const command = 'TEA_YES=1 bash -c "sh <(curl https://tea.xyz)"';
+		const output = execSync(command, { encoding: "utf-8" });
+		log.info("tea-cli installed");
+		return "success";
+	} catch (error) {
+		log.error(error);
+		return error.message;
+	}
+}
+
 const createCommandScriptFile = async (cmd: string): Promise<string> => {
 	try {
 		const guiFolder = getGuiPath();

modules/desktop/electron/libs/ipc.ts

@@ -8,7 +8,7 @@ import { post } from "./v1-client";
 import { deepReadDir, deletePackageFolder } from "./tea-dir";
 import path from "path";
 
-import { installPackage, openTerminal } from "./cli";
+import { installPackage, openTerminal, installTeaCli } from "./cli";
 
 import { getUpdater } from "./auto-updater";
 import fetch from "node-fetch";
@@ -173,4 +173,15 @@ export default function initializeHandlers() {
 			return { version: "1", packages: {} };
 		}
 	});
+
+	ipcMain.handle("install-tea-cli", async (_, data) => {
+		try {
+			log.info("installing tea cli");
+			await installTeaCli(data.version);
+			return "success";
+		} catch (error) {
+			log.error(error);
+			return error.message;
+		}
+	});
 }

modules/desktop/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tea",
-	"version": "0.0.28",
+	"version": "0.0.29",
 	"private": true,
 	"description": "tea gui app",
 	"author": "tea.xyz",

modules/desktop/src/components/welcome-modal/welcome-modal.svelte

@@ -1,15 +1,23 @@
 <script lang="ts">
   import Button from "@tea/ui/button/button.svelte";
   import { PackageStates, type GUIPackage } from "$libs/types";
-	import { openTerminal, isPackageInstalled } from '@native';
+	import { openTerminal, isPackageInstalled, installTeaCli } from '@native';
   import { packagesStore } from "$libs/stores";
 	import clickOutside from "@tea/ui/lib/clickOutside";
+  import ProgressBar from "@tea/ui/progress-bar/progress-bar.svelte";
+  import { onMount } from "svelte";
+
+  import { withFakeLoader } from "$libs/stores/pkgs";
 
   const log = window.require("electron-log");
 
   export let tea:GUIPackage|undefined;
 
   let installing = false;
+  let installProgress = 0;
+  let message:string;
+  let errorMessage = "";
+  let fakeTimer: NodeJS.Timer;
   
   let checkTeaPoll: NodeJS.Timer | null;
   const checkInstalled = async () => {
@@ -53,9 +61,35 @@
       installing = false;
     }
 	}
+
+  const setupCli = async () => {
+    installing = true;
+    if (tea) {
+      fakeTimer = withFakeLoader(tea, (p) => {
+        installProgress = p;
+      })
+      try {
+        message = await installTeaCli(tea.version);
+        console.log("MESSAGE:", message)
+        if (message != "success") {
+          errorMessage = message;
+        }
+      } catch (error) {
+        console.log("install failed cli", error)
+      } finally {
+        clearInterval(fakeTimer);
+        installing = false;
+        installProgress = 100;
+      }
+    }
+  }
+
+  onMount(() => {
+    setupCli();
+  })
 </script>
 
-<section class="fixed z-10 top-0 left-0 flex items-center justify-center">
+<section class="fixed z-50 top-0 left-0 flex items-center justify-center">
   <aside class="relative" use:clickOutside on:click_outside={() => close()}>
     <article class="flex margin-auto p-2 border border-gray rounded-md">
       <figure>
@@ -64,13 +98,30 @@
       <div class="flex-grow mt-20 px-12 relative">
         <h1 class="text-primary text-4xl mb-4">Welcome to the tea app!</h1>
         <p class="font-inter mb-4">This app is your gateway into the world of open-source software. Easily explore and manage packages with a click of a button. This app will notify you of any available software updates to ensure you’re safe and secure. Under the hood is the powerful tea cli.</p>
-        <Button type="plain" color="secondary" class="w-7/12"
-          loading={installing}
-          onClick={onOpenTerminal}
-        >
-          INSTALL TEA CLI v{tea?tea.version:"latest"}
-        </Button>
-        <p class="text-gray text-sm mt-2">tea cli is required in order to use our app. Clicking the link above will automatically install it via your command-line.</p>
+
+        {#if !errorMessage}
+          {#if installProgress != 100}
+            <ProgressBar width={installProgress} />
+            <p class="text-gray text-sm mt-2">initializing the app. please wait for a few seconds</p>
+          {:else}
+            <p class="text-gray text-sm mt-2">setup was succesfull!</p>
+            <Button type="plain" color="secondary" class="w-7/12"
+              onClick={() => close()}
+            >
+              EXPLORE OPEN-SOURCE
+            </Button>
+          {/if}
+        {:else}
+          <div class="h-10 w-7/12">
+            <Button type="plain" color="secondary"
+              loading={installing}
+              onClick={onOpenTerminal}
+            >
+              INSTALL TEA CLI v{tea?tea.version:"latest"}
+            </Button>
+          </div>
+          <p class="text-gray text-sm mt-2">tea cli is required in order to use our app. Clicking the link above will automatically install it via your command-line.</p>
+        {/if}
       </div>
     </article>
 

modules/desktop/src/libs/native-electron.ts

@@ -251,3 +251,8 @@ export const writePackageCache = async (pkgs: Packages) => {
 		log.error(error);
 	}
 };
+
+export const installTeaCli = async (version: string): Promise<string> => {
+	const res = await ipcRenderer.invoke("install-tea-cli", { version });
+	return res;
+};

modules/desktop/src/libs/native-mock.ts

@@ -370,3 +370,7 @@ export const loadPackageCache = async () => {
 export const writePackageCache = async (pkgs: Packages) => {
 	console.log("write package cache", pkgs);
 };
+
+export const installTeaCli = async (): Promise<string> => {
+	return "success";
+};

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

@@ -228,7 +228,10 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 	};
 }
 
-const withFakeLoader = (pkg: GUIPackage, callback: (progress: number) => void): NodeJS.Timer => {
+export const withFakeLoader = (
+	pkg: GUIPackage,
+	callback: (progress: number) => void
+): NodeJS.Timer => {
 	let fakeLoadingProgress = 1;
 	const ms = 100;
 	const assumedDlSpeedMb = 1024 * 1024 * 3; // 3mbps

modules/desktop/src/routes/+page.svelte

@@ -99,7 +99,7 @@
 </div>
 
 <SideMenu bind:activeOption={sideMenuOption}/>
-{#if $requireTeaCli }
+{#if $requireTeaCli && teaPkg }
 	<WelcomeModal tea={teaPkg} />
 {/if}
 <style>

modules/ui/src/progress-bar/progress-bar.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let width = 0;
+</script>
+
+<div class="dark:bg-gray-700 h-2.5 w-full rounded-full bg-gray">
+	<div
+		class="h-2.5 rounded-full bg-secondary transition-all"
+		class:animate-pulse={width < 100 && width > 0}
+		class:bg-green={width == 100}
+		style="width: {width}%"
+	/>
+</div>