feat: expose a react sdk to integrate windmill into react apps (#1605)

* expose react sdk * expose react sdk * iterate * iterate * iterate * nit * update example * update example * small fixes * update all
windmill-labs · May 19, 2023 · 632be3b · 632be3b
1 parent f27abec
commit 632be3b
Show file tree

Hide file tree

Showing 114 changed files with 11,500 additions and 659 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,13 +1,13 @@
 
 Source code in this repository is variously licensed under the Apache License
-Version 2.0 (see file ./LICENSE-APACHE),or the AGPLv3 License (see file ./LICENSE-AGPL)
+Version 2.0 (see file ./LICENSE-APACHE), or the AGPLv3 License (see file ./LICENSE-AGPL)
 
 Every file is under copyright (c) Windmill Labs, Inc 2022 unless otherwise specified.
 Every file is under License AGPL unless otherwise specified 
 or belonging to one of the below cases:
 
-The files under backend/ are AGPL Licensed.
-The files under frontend/ are AGPL Licensed.
+The files under backend/ are AGPLv3 Licensed.
+The files under frontend/ are AGPLv3 Licensed.
 The files under python-client/ deno-client/ go-client/ are Apache 2.0 Licensed.
 
 The openapi files, including the OpenFlow spec is Apache 2.0 Licensed.

diff --git a/backend/windmill-worker/src/python_executor.rs b/backend/windmill-worker/src/python_executor.rs
@@ -74,7 +74,23 @@ pub async fn pip_compile(
 ) -> error::Result<String> {
     logs.push_str(&format!("\nresolving dependencies..."));
     set_logs(logs, job_id, db).await;
-    logs.push_str(&format!("\ncontent of requirements:\n{}", requirements));
+    logs.push_str(&format!("\ncontent of requirements:\n{}\n", requirements));
+    let requirements = if let Some(pip_local_dependencies) = PIP_LOCAL_DEPENDENCIES.as_ref() {
+        let deps = pip_local_dependencies.clone();
+        requirements
+            .lines()
+            .filter(|s| {
+                if !deps.contains(&s.to_string()) {
+                    return true;
+                } else {
+                    logs.push_str(&format!("\nignoring local dependency: {}", s));
+                    return false;
+                }
+            })
+            .join("\n")
+    } else {
+        requirements.to_string()
+    };
     let req_hash = calculate_hash(&requirements);
     if let Some(cached) = sqlx::query_scalar!(
         "SELECT lockfile FROM pip_resolution_cache WHERE hash = $1",
@@ -87,15 +103,7 @@ pub async fn pip_compile(
         return Ok(cached);
     }
     let file = "requirements.in";
-    let requirements = if let Some(pip_local_dependencies) = PIP_LOCAL_DEPENDENCIES.as_ref() {
-        let deps = pip_local_dependencies.clone();
-        requirements
-            .lines()
-            .filter(|s| !deps.contains(&s.to_string()))
-            .join("\n")
-    } else {
-        requirements.to_string()
-    };
+
     write_file(job_dir, file, &requirements).await?;
 
     let mut args = vec!["-q", "--no-header", file, "--resolver=backtracking"];

diff --git a/docker/DockerfileOpenbb b/docker/DockerfileOpenbb
@@ -90,7 +90,7 @@ FROM python:3.10.8-slim-buster
 ARG APP=/usr/src/app
 
 RUN apt-get update \
-    && apt-get install -y ca-certificates wget curl git jq libprotobuf-dev libnl-route-3-dev unzip build-essential pkg-config libcairo2-dev \
+    && apt-get install -y ca-certificates wget curl git jq libprotobuf-dev libnl-route-3-dev unzip build-essential pkg-config libcairo2-dev libwebkit2gtk-4.0-37 \
     && rm -rf /var/lib/apt/lists/*
 
 RUN arch="$(dpkg --print-architecture)"; arch="${arch##*-}"; \

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -82,6 +82,7 @@
 		"chartjs-plugin-zoom": "^2.0.0",
 		"d3-zoom": "^3.0.0",
 		"date-fns": "^2.29.3",
+		"esm-env": "^1.0.0",
 		"fast-equals": "^5.0.1",
 		"highlight.js": "^11.8.0",
 		"lodash": "^4.17.21",
@@ -157,6 +158,16 @@
 			"svelte": "./package/components/FlowViewer.svelte",
 			"default": "./package/components/FlowViewer.svelte"
 		},
+		"./components/FlowBuilder.svelte": {
+			"types": "./package/components/FlowBuilder.svelte.d.ts",
+			"svelte": "./package/components/FlowBuilder.svelte",
+			"default": "./package/components/FlowBuilder.svelte"
+		},
+		"./components/FlowEditor.svelte": {
+			"types": "./package/components/flows/FlowEditor.svelte.d.ts",
+			"svelte": "./package/components/flows/FlowEditor.svelte",
+			"default": "./package/components/flows/FlowEditor.svelte"
+		},
 		"./components/SchemaViewer.svelte": {
 			"types": "./package/components/SchemaViewer.svelte.d.ts",
 			"svelte": "./package/components/SchemaViewer.svelte",
@@ -171,6 +182,10 @@
 			"types": "./package/common.d.ts",
 			"default": "./package/common.js"
 		},
+		"./stores": {
+			"types": "./package/stores.d.ts",
+			"default": "./package/stores.js"
+		},
 		"./components/icons": {
 			"types": "./package/components/icons/index.d.ts",
 			"svelte": "./package/components/icons/index.js",
@@ -193,7 +208,7 @@
 		"dist",
 		"package"
 	],
-	"license": "Apache-2.0",
+	"license": "AGPL-3.0",
 	"svelte": "./dist/index.js",
 	"typesVersions": {
 		">4.0": {
@@ -227,6 +242,12 @@
 			"components/FlowViewer.svelte": [
 				"./package/components/FlowViewer.svelte.d.ts"
 			],
+			"components/FlowBuilder.svelte": [
+				"./package/components/FlowBuilder.svelte.d.ts"
+			],
+			"components/FlowEditor.svelte": [
+				"./package/components/flows/FlowEditor.svelte.d.ts"
+			],
 			"components/SchemaViewer.svelte": [
 				"./package/components/SchemaViewer.svelte.d.ts"
 			],
@@ -236,6 +257,9 @@
 			"common": [
 				"./package/common.d.ts"
 			],
+			"stores": [
+				"./package/stores.d.ts"
+			],
 			"components/icons": [
 				"./package/components/icons/index.d.ts"
 			],

diff --git a/frontend/src/lib/cloud.ts b/frontend/src/lib/cloud.ts
@@ -0,0 +1,43 @@
+import { BROWSER } from 'esm-env'
+import { page } from '$app/stores'
+import { get } from 'svelte/store'
+import { premiumStore, userStore, workspaceStore } from './stores'
+import { getUserExt } from './user'
+import { WorkspaceService } from './gen'
+
+export function isCloudHosted(): boolean {
+	return get(page)?.url?.hostname == 'app.windmill.dev'
+}
+
+if (BROWSER) {
+	workspaceStore.subscribe(async (workspace) => {
+		if (workspace) {
+			try {
+				localStorage.setItem('workspace', String(workspace))
+			} catch (e) {
+				console.error('Could not persist workspace to local storage', e)
+			}
+			const user = await getUserExt(workspace)
+			userStore.set(user)
+			if (isCloudHosted() && user?.is_admin) {
+				premiumStore.set(await WorkspaceService.getPremiumInfo({ workspace }))
+			}
+		} else {
+			userStore.set(undefined)
+		}
+	})
+
+	setInterval(async () => {
+		try {
+			const workspace = get(workspaceStore)
+			const user = get(userStore)
+
+			if (workspace && user && !user.is_super_admin && !user.is_admin) {
+				userStore.set(await getUserExt(workspace))
+				console.log('refreshed user')
+			}
+		} catch (e) {
+			console.error('Could not refresh user', e)
+		}
+	}, 30000)
+}
diff --git a/frontend/src/lib/components/AddUser.svelte b/frontend/src/lib/components/AddUser.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { sendUserToast } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import { workspaceStore } from '$lib/stores'
 	import { WorkspaceService } from '$lib/gen'
 	import { Button, ToggleButton, ToggleButtonGroup } from './common'
 	import Tooltip from './Tooltip.svelte'
+	import { sendUserToast } from '$lib/toast'
 
 	const dispatch = createEventDispatcher()
 

diff --git a/frontend/src/lib/components/ApiConnectForm.svelte b/frontend/src/lib/components/ApiConnectForm.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { JobService, Preview, ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { emptySchema, emptyString, sendUserToast } from '$lib/utils'
+	import { emptySchema, emptyString } from '$lib/utils'
 	import { Loader2 } from 'lucide-svelte'
 	import Button from './common/button/Button.svelte'
 	import SchemaForm from './SchemaForm.svelte'
 	import SimpleEditor from './SimpleEditor.svelte'
 	import Toggle from './Toggle.svelte'
+	import { sendUserToast } from '$lib/toast'
 
 	export let resource_type: string
 	export let args: Record<string, any> | any = {}

diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte
@@ -57,8 +57,7 @@
 	import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'
 	import IconedResourceType from './IconedResourceType.svelte'
 	import { OauthService, ResourceService, VariableService, type TokenResponse } from '$lib/gen'
-	import { page } from '$app/stores'
-	import { emptyString, sendUserToast, truncateRev } from '$lib/utils'
+	import { emptyString, truncateRev } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
 	import Path from './Path.svelte'
@@ -68,6 +67,7 @@
 	import SearchItems from './SearchItems.svelte'
 	import autosize from 'svelte-autosize'
 	import WhitelistIp from './WhitelistIp.svelte'
+	import { sendUserToast } from '$lib/toast'
 
 	export let newPageOAuth = false
 
@@ -163,7 +163,7 @@
 			step += 1
 			args = {}
 		} else if (step == 1 && !manual) {
-			const url = new URL(`/api/oauth/connect/${resource_type}`, $page.url.origin)
+			const url = new URL(`/api/oauth/connect/${resource_type}`, window.location.origin)
 			url.searchParams.append('scopes', scopes.join('+'))
 			if (extra_params.length > 0) {
 				extra_params.forEach(([key, value]) => url.searchParams.append(key, value))

diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
@@ -4,7 +4,6 @@
 	import Icon from 'svelte-awesome'
 	import { MoreVertical } from 'lucide-svelte'
 	import { Button, Menu } from './common'
-	import { goto } from '$app/navigation'
 	import { twMerge } from 'tailwind-merge'
 
 	type Alignment = 'start' | 'end'
@@ -79,7 +78,6 @@
 			{:else if item.href && !item.disabled}
 				<a
 					href={item.href}
-					on:click|stopPropagation|preventDefault={() => goto(item.href ?? '')}
 					class="block w-full px-4 font-semibold text-left py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { browser } from '$app/environment'
-	import { page } from '$app/stores'
-	import { sendUserToast } from '$lib/utils'
+	import { BROWSER } from 'esm-env'
+
+	import { sendUserToast } from '$lib/toast'
 
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 
@@ -339,7 +339,8 @@
 			}
 		}
 
-		const wsProtocol = $page.url.protocol == 'https:' ? 'wss' : 'ws'
+		const wsProtocol = BROWSER && window.location.protocol == 'https:' ? 'wss' : 'ws'
+		const hostname = BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR'
 
 		let encodedImportMap = ''
 		if (lang == 'typescript') {
@@ -349,14 +350,7 @@
 				const token = await UserService.createToken({
 					requestBody: { label: 'Ephemeral lsp token', expiration: expiration.toISOString() }
 				})
-				let root =
-					$page.url.protocol +
-					'//' +
-					$page.url.host +
-					'/api/scripts_u/tokened_raw/' +
-					$workspaceStore +
-					'/' +
-					token
+				let root = hostname + '/api/scripts_u/tokened_raw/' + $workspaceStore + '/' + token
 				const importMap = {
 					imports: {
 						'file:///': root + '/'
@@ -375,7 +369,7 @@
 				encodedImportMap = 'data:text/plain;base64,' + btoa(JSON.stringify(importMap))
 			}
 			await connectToLanguageServer(
-				`${wsProtocol}://${$page.url.host}/ws/deno`,
+				`${wsProtocol}://${window.location.host}/ws/deno`,
 				'deno',
 				{
 					certificateStores: null,
@@ -417,7 +411,7 @@
 			)
 		} else if (lang === 'python') {
 			await connectToLanguageServer(
-				`${wsProtocol}://${$page.url.host}/ws/pyright`,
+				`${wsProtocol}://${window.location.host}/ws/pyright`,
 				'pyright',
 				{},
 				(params, token, next) => {
@@ -447,9 +441,14 @@
 				}
 			)
 
-			connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/ruff`, 'ruff', {}, undefined)
 			connectToLanguageServer(
-				`${wsProtocol}://${$page.url.host}/ws/diagnostic`,
+				`${wsProtocol}://${window.location.host}/ws/ruff`,
+				'ruff',
+				{},
+				undefined
+			)
+			connectToLanguageServer(
+				`${wsProtocol}://${window.location.host}/ws/diagnostic`,
 				'black',
 				{
 					formatters: {
@@ -466,7 +465,7 @@
 			)
 		} else if (lang === 'go') {
 			connectToLanguageServer(
-				`${wsProtocol}://${$page.url.host}/ws/go`,
+				`${wsProtocol}://${window.location.host}/ws/go`,
 				'go',
 				{
 					'build.allowImplicitNetworkAccess': true
@@ -475,7 +474,7 @@
 			)
 		} else if (lang === 'shell') {
 			connectToLanguageServer(
-				`${wsProtocol}://${$page.url.host}/ws/diagnostic`,
+				`${wsProtocol}://${window.location.host}/ws/diagnostic`,
 				'shellcheck',
 				{
 					linters: {
@@ -658,7 +657,7 @@
 	}
 
 	onMount(() => {
-		if (browser) {
+		if (BROWSER) {
 			loadMonaco().then((x) => (disposeMethod = x))
 		}
 	})

diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
@@ -4,7 +4,6 @@
 
 <script lang="ts">
 	import { ResourceService, VariableService } from '$lib/gen'
-	import { getScriptByPath, sendUserToast } from '$lib/utils'
 
 	import {
 		faCube,
@@ -30,6 +29,8 @@
 	import Skeleton from './common/skeleton/Skeleton.svelte'
 	import Popover from './Popover.svelte'
 	import { SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS } from '$lib/consts'
+	import { sendUserToast } from '$lib/toast'
+	import { getScriptByPath } from '$lib/scripts'
 
 	export let lang: 'python3' | 'deno' | 'go' | 'bash'
 	export let editor: Editor | undefined