windmill-components 1.122.0 → 1.138.2

package/package/assets/app.css

@@ -4,6 +4,13 @@
 @tailwind utilities;
 
 @layer base {
+
+	*,
+  ::before,
+  ::after {
+    @apply dark:border-gray-600;
+  }
+
 	@font-face {
 		font-family: 'Inter';
 		src: url('/Inter-Variable.ttf');
@@ -70,3 +77,4 @@
 		display: flex !important;
 	}
 }
+

package/package/common.d.ts

@@ -45,4 +45,5 @@ type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] exte
 /** An inclusive range of integer numbers */
 export type IntRange<F extends number, T extends number> = F | Exclude<Enumerate<T>, Enumerate<F>> | T;
 export declare function pathToMeta(path: string): Meta;
+export declare function prettyLanguage(lang: string): string;
 export {};

package/package/common.js

@@ -24,3 +24,11 @@ export function pathToMeta(path) {
         name: splitted.slice(2).join('/')
     };
 }
+export function prettyLanguage(lang) {
+    switch (lang) {
+        case 'nativets':
+            return 'Native Typescript';
+        default:
+            return lang.charAt(0).toUpperCase() + lang.slice(1);
+    }
+}

package/package/components/AddUser.svelte

@@ -1,9 +1,11 @@
 <script>import { createEventDispatcher } from 'svelte';
-import { workspaceStore } from '../stores';
-import { WorkspaceService } from '../gen';
+import { globalEmailInvite, superadmin, workspaceStore } from '../stores';
+import { UserService, WorkspaceService } from '../gen';
 import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import Tooltip from './Tooltip.svelte';
 import { sendUserToast } from '../toast';
+import { isCloudHosted } from '../cloud';
+import { goto } from '$app/navigation';
 const dispatch = createEventDispatcher();
 let email;
 let username;
@@ -25,6 +27,24 @@ async function addUser() {
         }
     });
     sendUserToast(`Added ${email}`);
+    if (!(await UserService.existsEmail({ email }))) {
+        let isSuperadmin = $superadmin;
+        if (!isCloudHosted()) {
+            sendUserToast(`User ${email} is not registered yet on the instance. ${!isSuperadmin
+                ? `If not using SSO, ask an administrator to add ${email} to the instance`
+                : ''}`, true, isSuperadmin
+                ? [
+                    {
+                        label: 'Add user to the instance',
+                        callback: () => {
+                            $globalEmailInvite = email;
+                            goto('#superadmin-settings');
+                        }
+                    }
+                ]
+                : []);
+        }
+    }
     dispatch('new');
 }
 let selected = 'author';
@@ -43,15 +63,17 @@ let selected = 'author';
 		<ToggleButton position="left" value="operator" size="sm"
 			>Operator <Tooltip
 				>An operator can only execute and view scripts/flows/apps from your workspace, and only
-				those that he has visibility on</Tooltip
+				those that he has visibility on.</Tooltip
 			></ToggleButton
 		>
 		<ToggleButton position="center" value="author" size="sm"
 			>Author <Tooltip
-				>An Author can execute and view scripts/flows/apps, but he can also create new ones</Tooltip
+				>An Author can execute and view scripts/flows/apps, but he can also create new ones.</Tooltip
 			></ToggleButton
 		>
-		<ToggleButton position="right" value="admin" size="sm">Admin</ToggleButton>
+		<ToggleButton position="right" value="admin" size="sm">Admin<Tooltip
+			>An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace.</Tooltip
+		></ToggleButton>
 	</ToggleButtonGroup>
 	<Button
 		variant="contained"

package/package/components/ApiConnectForm.svelte

@@ -1,18 +1,21 @@
-<script>import { JobService, Preview, ResourceService } from '../gen';
+<script>import { OauthService, ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
 import { emptySchema, emptyString } from '../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 '../toast';
+import TestConnection from './TestConnection.svelte';
+import { Button } from './common';
 export let resource_type;
 export let args = {};
 export let password;
 export let isValid = true;
 let schema = emptySchema();
 let notFound = false;
+let supabaseWizard = false;
+async function isSupabaseAvailable() {
+    supabaseWizard = (await OauthService.listOAuthConnects())['supabase_wizard'] != undefined;
+}
 async function loadSchema() {
     rawCode = '{}';
     viewJsonSchema = false;
@@ -56,36 +59,7 @@ function switchTab(asJson) {
         parseJson();
     }
 }
-let loading = false;
-async function testConnection() {
-    loading = true;
-    const job = await JobService.runScriptPreview({
-        workspace: $workspaceStore,
-        requestBody: {
-            language: 'deno',
-            content: `
-import { Client } from 'https://deno.land/x/postgres/mod.ts'
-export async function main(args: any) {
-	const client = new Client("postgres://" + args.user + ":" + args.password + "@" + args.host + ":" + args.port + "/" + args.dbname + "?sslmode=" + args.sslmode)
-	await client.connect()
-	return 'Connection successful'
-}
-				`,
-            args: {
-                args
-            }
-        }
-    });
-    await new Promise((r) => setTimeout(r, 3000));
-    loading = false;
-    const testResult = await JobService.getCompletedJob({
-        workspace: $workspaceStore,
-        id: job
-    });
-    if (testResult) {
-        sendUserToast(testResult.success ? testResult.result : testResult.result?.['error']?.['message'], !testResult.success);
-    }
-}
+$: resource_type == 'postgresql' && isSupabaseAvailable();
 </script>
 
 {#if !notFound}
@@ -96,14 +70,15 @@ export async function main(args: any) {
 				right: 'As JSON'
 			}}
 		/>
-		{#if resource_type == 'postgresql'}
-			<Button size="sm" on:click={testConnection}
-				>{#if loading}<Loader2 class="animate-spin mr-2" />{/if} Test connection</Button
-			>
+		<TestConnection {resource_type} {args} />
+		{#if resource_type == 'postgresql' && supabaseWizard}
+			<Button variant="border" target="_blank" href="/api/oauth/connect/supabase_wizard">
+				Add a Supabase DB
+			</Button>
 		{/if}
 	</div>
 {:else}
-	<p class="italic text-gray-500 text-xs mb-4"
+	<p class="italic text-tertiary text-xs mb-4"
 		>No corresponding resource type found in your workspace for {resource_type}. Define the value in
 		JSON directly</p
 	>

package/package/components/AppConnect.svelte

@@ -119,15 +119,20 @@ export function openFromOauth(rt) {
     drawer.openDrawer?.();
 }
 async function loadConnects() {
-    connects = await OauthService.listOAuthConnects();
+    const nconnects = await OauthService.listOAuthConnects();
+    if (nconnects['supabase_wizard']) {
+        delete nconnects['supabase_wizard'];
+    }
+    connects = nconnects;
 }
+const connectAndManual = ['gitlab'];
 async function loadResources() {
     await loadConnects();
     const availableRts = await ResourceService.listResourceTypeNames({
         workspace: $workspaceStore
     });
     connectsManual = availableRts
-        .filter((x) => !Object.keys(connects ?? {}).includes(x))
+        .filter((x) => connectAndManual.includes(x) || !Object.keys(connects ?? {}).includes(x))
         .map((x) => [
         x,
         apiTokenApps[x] ?? {
@@ -267,9 +272,12 @@ let filteredConnectsManual = [];
 	}}
 	size="800px"
 >
-	<DrawerContent title="Connect an API or add a Resource" on:close={drawer.closeDrawer}
-	tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
-	documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill">
+	<DrawerContent
+		title="Connect an API or add a Resource"
+		on:close={drawer.closeDrawer}
+		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
+		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
+	>
 		{#if step == 1}
 			<div class="w-12/12 pb-2 flex flex-row my-1 gap-1">
 				<input
@@ -287,7 +295,7 @@ let filteredConnectsManual = [];
 						<Button
 							size="sm"
 							variant="border"
-							color={key === resource_type ? 'blue' : 'dark'}
+							color={key === resource_type ? 'blue' : 'light'}
 							btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 							on:click={() => {
 								manual = false
@@ -305,6 +313,14 @@ let filteredConnectsManual = [];
 					{/each}
 				{/if}
 			</div>
+			{#if connects && Object.keys(connects).length == 0}
+				<div class="text-secondary text-sm w-full"
+					>No OAuth APIs has been setup on the instance. To add oauth APIs, first sync the resource
+					types with the hub, then add oauth configuration. See <a
+						href="https://www.windmill.dev/docs/misc/setup_oauth">documentation</a
+					>
+				</div>
+			{/if}
 			{#if manual == false && resource_type != ''}
 				<h3>Scopes</h3>
 				{#if !manual && resource_type != ''}
@@ -337,7 +353,7 @@ let filteredConnectsManual = [];
 						>
 							Add item
 						</Button>
-						<span class="ml-2 text-sm text-gray-500">
+						<span class="ml-2 text-sm text-tertiary">
 							({(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''})
 						</span>
 					</div>
@@ -351,7 +367,7 @@ let filteredConnectsManual = [];
 						<Button
 							size="sm"
 							variant="border"
-							color={key === resource_type ? 'blue' : 'dark'}
+							color={key === resource_type ? 'blue' : 'light'}
 							btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 							on:click={() => {
 								manual = true
@@ -417,7 +433,7 @@ let filteredConnectsManual = [];
 				kind="resource"
 			/>
 			{#if apiTokenApps[resource_type] || !manual}
-				<ul class="mt-10 bg-white">
+				<ul class="mt-10">
 					<li>
 						1. A secret variable containing the {apiTokenApps[resource_type]?.key ?? 'token'}
 						<span class="font-bold">{truncateRev(value, 5, '*****')}</span>

package/package/components/ArgEnum.svelte

@@ -25,6 +25,7 @@ const dispatch = createEventDispatcher();
 		{/each}
 	</select>
 {:else}
+	<!-- svelte-ignore a11y-autofocus -->
 	<input
 		{autofocus}
 		on:focus

package/package/components/ArgInfo.svelte

@@ -38,7 +38,7 @@ async function getResource(path) {
 </Drawer>
 
 {#if value == undefined || value == null}
-	<span class="text-gray-600">null</span>
+	<span class="text-tertiary">null</span>
 {:else if value == '<function call>'}
 	{'<function call>'}<Tooltip
 		>The arg was none and the default argument of the script is a function call, hence the actual
@@ -67,7 +67,7 @@ async function getResource(path) {
 	<div class="relative">
 		{#if JSON.stringify(value).length > 120}
 			<button
-				class="text-xs absolute top-0 right-4 text-gray-500"
+				class="text-xs absolute top-0 right-4 text-tertiary"
 				on:click={() => {
 					jsonViewerContent = value
 					jsonViewer.toggleDrawer()

package/package/components/ArgInput.svelte

@@ -30,7 +30,7 @@ export let contentEncoding = undefined;
 export let type = undefined;
 export let required = false;
 export let pattern = undefined;
-export let valid = required ? false : true;
+export let valid = true;
 export let enum_ = undefined;
 export let disabled = false;
 export let editableSchema = false;
@@ -48,6 +48,7 @@ export let extra = {};
 export let minW = true;
 export let prettifyHeader = false;
 export let resourceTypes;
+export let disablePortal = false;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 let error = '';
@@ -112,19 +113,19 @@ export function focus() {
         el.style.height = el.scrollHeight + 50 + 'px';
     }
 }
-function validateInput(pattern, v) {
+function validateInput(pattern, v, required) {
     if (required && (v == undefined || v == null || v === '')) {
-        error = 'This field is required';
-        valid = false;
+        error = 'Required';
+        valid && (valid = false);
     }
     else {
         if (pattern && !testRegex(pattern, v)) {
             error = `Should match ${pattern}`;
-            valid = false;
+            valid && (valid = false);
         }
         else {
             error = '';
-            valid = true;
+            !valid && (valid = true);
         }
     }
 }
@@ -146,7 +147,7 @@ function onKeyDown(e) {
 let redraw = 0;
 let itemsLimit = 50;
 let customValue = false;
-$: validateInput(pattern, value);
+$: validateInput(pattern, value, required);
 </script>
 
 <!-- svelte-ignore a11y-autofocus -->
@@ -156,7 +157,7 @@ $: validateInput(pattern, value);
 			<FieldHeader prettify={prettifyHeader} {label} {required} {type} {contentEncoding} {format} />
 		{/if}
 		{#if editableSchema}
-			<label class="text-gray-700">
+			<label class="text-secondary">
 				Description
 				<textarea
 					class="mb-1"
@@ -200,7 +201,7 @@ $: validateInput(pattern, value);
 		{/if}
 
 		{#if description}
-			<div class="text-sm italic pb-1">
+			<div class="text-sm italic pb-1 text-secondary">
 				{description}
 			</div>
 		{/if}
@@ -283,7 +284,7 @@ $: validateInput(pattern, value);
 											{/if}
 											<button
 												transition:fade|local={{ duration: 100 }}
-												class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 ml-2"
+												class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
 												aria-label="Clear"
 												on:click={() => {
 													value.splice(i, 1)
@@ -322,11 +323,12 @@ $: validateInput(pattern, value);
 					</div>
 				</div>
 			{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))}
-				<ObjectResourceInput {format} bind:value />
+				<ObjectResourceInput {disablePortal} {format} bind:value />
 			{:else if inputCat == 'object' || inputCat == 'resource-object'}
 				{#if properties && Object.keys(properties).length > 0}
 					<div class="p-4 pl-8 border rounded w-full">
 						<SchemaForm
+							{disablePortal}
 							{disabled}
 							schema={{ properties, $schema: '', required: [], type: 'object' }}
 							bind:args={value}
@@ -372,6 +374,7 @@ $: validateInput(pattern, value);
 				/>
 			{:else if inputCat == 'resource-string'}
 				<ResourcePicker
+					{disablePortal}
 					bind:value
 					resourceType={format.split('-').length > 1
 						? format.substring('resource-'.length)
@@ -419,7 +422,7 @@ $: validateInput(pattern, value);
 						{/if}
 					</div>
 					{#if variableEditor}
-						<div class="text-sm text-gray-600">
+						<div class="text-sm text-tertiary-inverse">
 							{#if value && typeof value == 'string' && value?.startsWith('$var:')}
 								Linked to variable <button
 									class="text-blue-500 underline"
@@ -434,7 +437,7 @@ $: validateInput(pattern, value);
 			<slot name="actions" />
 		</div>
 		{#if !compact || (error && error != '')}
-			<div class="text-right text-xs text-red-600">
+			<div class="text-right text-xs text-red-600 dark:text-red-400">
 				{#if error === ''}
 					&nbsp;
 				{:else}

package/package/components/ArgInput.svelte.d.ts

@@ -38,6 +38,7 @@ declare const __propDef: {
         minW?: boolean | undefined;
         prettifyHeader?: boolean | undefined;
         resourceTypes: string[] | undefined;
+        disablePortal?: boolean | undefined;
         editor?: SimpleEditor | undefined;
         focus?: (() => void) | undefined;
     };

package/package/components/ArrayTypeNarrowing.svelte

@@ -33,7 +33,7 @@ let selected = itemsType?.type != 'string'
 </select>
 {#if Array.isArray(itemsType?.enum)}
 	<div class="pt-1" />
-	<label for="input" class="mb-2 text-gray-700 text-xs">
+	<label for="input" class="mb-2 text-secondary text-xs">
 		Enums
 		<div class="flex flex-col gap-1">
 			{#each itemsType?.enum || [] as e}

package/package/components/Badge.svelte

@@ -1,6 +1,6 @@
 <script>import Tooltip from './Tooltip.svelte';
 export let twBgColor = 'bg-blue-200';
-export let twTextColor = 'text-gray-700';
+export let twTextColor = 'text-secondary';
 export let tooltip = undefined;
 </script>
 

package/package/components/CenteredModal.svelte

@@ -1,32 +1,30 @@
 <script>import WindmillIcon from './icons/WindmillIcon.svelte';
-import Uptodate from './Uptodate.svelte';
-import Version from './Version.svelte';
+import LoginPageHeader from './LoginPageHeader.svelte';
 export let subtitle = undefined;
 export let title = 'Windmill';
 export let disableLogo = false;
 </script>
 
-<div class="center-center min-h-screen p-4 relative bg-gray-50">
+<div class="center-center min-h-screen p-4 relative bg-surface-secondary">
 	<div class="flex flex-col gap-2 items-center w-full">
 		{#if !disableLogo}
 			<div class="hidden lg:block">
 				<div>
 					<WindmillIcon height="100px" width="100px" spin="slow" />
 				</div>
-				<h2 class="text-center pt-2 text-gray-800">Windmill</h2>
+				<h2 class="text-center pt-2 text-primary">Windmill</h2>
 			</div>
 		{/if}
 
 		<div
-			class="border rounded-md shadow-md bg-white w-full max-w-[640px]
-	p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
+			class="border rounded-md shadow-md bg-surface w-full max-w-[640px] p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
 		>
 			<div class="mb-10">
-				<h1 class="text-center">
+				<h1 class="text-center text-primary">
 					{title}
 				</h1>
 				{#if subtitle}
-					<p class="text-sm text-center text-gray-600 mt-2">
+					<p class="text-sm text-center text-secondary mt-2">
 						{subtitle}
 					</p>
 				{/if}
@@ -35,9 +33,5 @@ export let disableLogo = false;
 		</div>
 	</div>
 
-	<div class="absolute top-0 right-0 text-2xs text-gray-600 italic px-3 py-1">
-		<span class="font-mono flex flex-col">
-			<div>Windmill <Version /></div><div><Uptodate /></div>
-		</span>
-	</div>
+	<LoginPageHeader />
 </div>

package/package/components/ChevronButton.svelte

@@ -6,7 +6,7 @@ export let viewOptions = false;
 
 <button
 	type="submit"
-	class="mr-6 text-sm underline text-gray-700 inline-flex items-center"
+	class="mr-6 text-sm underline text-secondary inline-flex items-center"
 	on:click={() => {
 		viewOptions = !viewOptions
 	}}

package/package/components/CliHelpBox.svelte

@@ -1,33 +1,12 @@
 <script>import { page } from '$app/stores';
 import { workspaceStore } from '../stores';
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import Icon from 'svelte-awesome';
-import { slide } from 'svelte/transition';
 import InlineCodeCopy from './InlineCodeCopy.svelte';
-$: opened = false;
 $: url = `${$page.url.protocol}//${$page.url.hostname}/`;
 </script>
 
-<div class="text-sm mt-2 flex">
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<button
-		class="underline mr-4 text-gray-600"
-		on:click={() => {
-			opened = !opened
-		}}
-	>
-		CLI quick setup
-		<Icon class="ml-2" data={opened ? faChevronUp : faChevronDown} scale={0.7} />
-	</button>
-</div>
-
-{#if opened}
-	<div
-		transition:slide|local={{ duration: 100 }}
-		class="border border-gray-200 rounded-md p-4 mt-2 text-sm text-gray-600"
-		role="alert"
-		id="dynamic-input-help-box"
-	>
+<div>
+	<div class="text-sm font-semibold">CLI quick setup </div>
+	<div class="text-sm" role="alert" id="dynamic-input-help-box">
 		<ul class="pl-0 pt-2 list-decimal list-inside">
 			<li
 				>Install the latest wmill CLI from deno.land: <InlineCodeCopy
@@ -43,4 +22,4 @@ $: url = `${$page.url.protocol}//${$page.url.hostname}/`;
 			<li>Use the run command above!</li>
 		</ul>
 	</div>
-{/if}
+</div>

package/package/components/CollapseLink.svelte

@@ -2,16 +2,17 @@
 import Icon from 'svelte-awesome';
 import { Button } from './common';
 import { slide } from 'svelte/transition';
+import { twMerge } from 'tailwind-merge';
 export let open = false;
 export let text;
 export let small = false;
 </script>
 
-<div class="flex">
+<div class={twMerge('flex', $$props.class)}>
 	<Button
 		variant="border"
 		color="light"
-		btnClasses="text-gray-600 {small ? 'text-xs' : ''} "
+		btnClasses="text-tertiary {small ? 'text-xs' : ''} "
 		on:click={() => (open = !open)}
 	>
 		{text}&nbsp;<Icon data={open ? faChevronUp : faChevronDown} scale={0.5} />

package/package/components/CollapseLink.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         open?: boolean | undefined;
         text: string;
         small?: boolean | undefined;

package/package/components/CronInput.svelte

@@ -293,16 +293,16 @@ $: dateFormatter = new Intl.DateTimeFormat('en-GB', {
 						<div class="w-full flex flex-col gap-1">
 							<small class="font-bold">Preview New Cron</small>
 
-							<div class="flex p-2 px-4 rounded-md bg-gray-100">
+							<div class="flex p-2 px-4 rounded-md bg-surface-secondary">
 								<span>{nschedule}</span>
 							</div>
 						</div>
 					</div>
 
 					<div class="mt-4">
-						<Button color="dark" size="xs" on:click={() => (schedule = nschedule)}
-							>Set Cron Schedule</Button
-						>
+						<Button color="dark" size="xs" on:click={() => (schedule = nschedule)}>
+							Set Cron Schedule
+						</Button>
 					</div>
 				</CollapseLink>
 			</div>
@@ -314,7 +314,7 @@ $: dateFormatter = new Intl.DateTimeFormat('en-GB', {
 		<hr />
 		<div class="flex flex-col space-y-2">
 			<small>Estimated upcoming events ({timezone})</small>
-			<div class="flex flex-col rounded-md p-4 border text-gray-600">
+			<div class="flex flex-col rounded-md p-4 border text-tertiary bg-surface-secondary">
 				{#each preview as date}
 					<div class="flex items-center space-x-2 text-sm">
 						<span>{dateFormatter(new Date(date))}</span>