improve tea cli installed check (#346)

* #342 improve installed check

* #342 add close button for the modal

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil 2023-03-28 12:23:34 +08:00 committed by GitHub
parent c48d0435d3
commit 7a1d5fd64d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 32 deletions

View file

@ -4,6 +4,8 @@
import { openTerminal, isPackageInstalled } from '@native';
import { packagesStore } from "$libs/stores";
const log = window.require("electron-log");
export let tea:GUIPackage|undefined;
let installing = false;
@ -13,16 +15,27 @@
if (checkTeaPoll) return;
return new Promise((resolve) => {
checkTeaPoll = setInterval(async () => {
const installed = await isPackageInstalled("tea.xyz", tea?.version);
if (installed && checkTeaPoll) {
clearInterval(checkTeaPoll);
checkTeaPoll = null;
resolve(null);
try {
log.info("checking if tea is installed");
const installed = await isPackageInstalled("tea.xyz", tea?.version);
log.info("tea is installed:", installed);
if (installed && checkTeaPoll) {
clearInterval(checkTeaPoll);
checkTeaPoll = null;
resolve(null);
close();
}
} catch (error) {
log.error(error);
}
}, 5000); // check every 5s
})
}
const close = () => {
packagesStore.requireTeaCli.set(false);
}
const onOpenTerminal = async () => {
if (installing) return;
installing = true;
@ -42,25 +55,36 @@
</script>
<section class="fixed z-10 top-0 left-0 flex items-center justify-center">
<article class="flex margin-auto p-2 border border-gray rounded-md">
<figure>
<img class="object-contain" src="/images/welcome-bg.png" alt="welcome"/>
</figure>
<div class="flex-grow flex flex-col justify-center px-12">
<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 youre safe and secure. Under the hood is the powerful tea cli.</p>
<Button type="plain" color="secondary" class={`w-7/12 ${installing && "animate-pulse"}`}
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>
</div>
</article>
<button id="btn-cover" class="opacity-0 absolute" on:click={() => {
close();
}}></button>
<aside class="relative">
<article class="flex margin-auto p-2 border border-gray rounded-md">
<figure>
<img class="object-contain" src="/images/welcome-bg.png" alt="welcome"/>
</figure>
<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 youre safe and secure. Under the hood is the powerful tea cli.</p>
<Button type="plain" color="secondary" class={`w-7/12 ${installing && "animate-pulse"}`}
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>
</div>
</article>
<button class="icon-tea-x-btn absolute text-gray top-5 right-5 cursor-default"
on:click={() => {
close()
}}
></button>
</aside>
</section>
<style>
section {
section, #btn-cover {
width: 100%;
height: 100vh;
background: rgba(0,0,0, 0.5);

View file

@ -215,12 +215,12 @@ export const submitLogs = async () => {
export const isPackageInstalled = async (fullName: string, version?: string): Promise<boolean> => {
let isInstalled = false;
const pkgs = await getInstalledPackages();
const teaPkg = pkgs.find((p) => p.full_name === fullName);
const pkg = pkgs.find((p) => p.full_name === fullName);
if (teaPkg) {
if (pkg) {
isInstalled = true;
if (version) {
isInstalled = teaPkg.installed_versions.includes(version);
isInstalled = pkg.installed_versions.includes(version);
}
}

View file

@ -31,6 +31,7 @@ export default function initPackagesStore() {
let initialized = false;
const syncProgress = writable<number>(0); // TODO: maybe use this in the UI someday
const packages = writable<GUIPackage[]>([]);
const requireTeaCli = writable<boolean>(false);
let packagesIndex: Fuse<GUIPackage>;
@ -78,6 +79,11 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
};
const checkTeaCLIPackage = async (teaPkg: Package, installedPkg?: InstalledPackage) => {
if (!installedPkg) {
requireTeaCli.set(true);
return;
}
const isUpToDate = teaPkg.version === installedPkg?.installed_versions[0];
log.info("check if Tea-CLI is up to date:", isUpToDate);
//TODO: Is there where we handle the case of tea not being installed at all?
@ -116,13 +122,11 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
log.info("sync test for tea-cli");
const distTea = pkgs.find((p) => p.full_name === "tea.xyz");
const installedTeaVersions = installedPkgs.find((p) => p.full_name === "tea.xyz");
if (distTea) await checkTeaCLIPackage(distTea, installedTeaVersions);
const installedTeaPkg = installedPkgs.find((p) => p.full_name === "tea.xyz");
if (distTea) await checkTeaCLIPackage(distTea, installedTeaPkg);
log.info("set NEEDS_UPDATE state to pkgs");
let progressCount = 0;
for (const iPkg of installedPkgs) {
progressCount++;
for (const [i, iPkg] of installedPkgs.entries()) {
const pkg = guiPkgs.find((p) => p.full_name === iPkg.full_name);
if (pkg) {
const isUpdated = pkg.version === iPkg.installed_versions[0];
@ -131,7 +135,7 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
state: isUpdated ? PackageStates.INSTALLED : PackageStates.NEEDS_UPDATE
});
}
syncProgress.set(+(progressCount / installedPkgs.length).toFixed(2));
syncProgress.set(+((i + 1) / installedPkgs.length).toFixed(2));
}
} catch (error) {
log.error(error);
@ -156,6 +160,7 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
return {
packages,
syncProgress,
requireTeaCli,
subscribe: packages.subscribe,
search: async (term: string, limit = 5): Promise<GUIPackage[]> => {
if (!term || !packagesIndex) return [];

View file

@ -16,7 +16,7 @@
const log = window.require("electron-log");
const { sideNavOpen } = navStore; // right side not left
const { packages } = packagesStore;
const { packages, requireTeaCli } = packagesStore;
const url = $page.url;
@ -77,7 +77,7 @@
</div>
</header>
{#if !teaPkg || PackageStates.AVAILABLE === teaPkg?.state || !teaPkg?.installed_versions?.length }
{#if $requireTeaCli }
<WelcomeModal tea={teaPkg} />
{/if}
<style>