windmill-components 1.122.0 → 1.138.2

package/package/components/SuperadminSettings.svelte

@@ -44,21 +44,22 @@ async function listUsers() {
 	<DrawerContent overflow_y={false} title="Superadmin Settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full">
 			<div>
-				<div class="text-xs pt-1 text-gray-500 flex flex-col">
+				<div class="text-xs pt-1 text-tertiary flex flex-col">
 					<div>Windmill <Version /></div><div><Uptodate /></div>
 				</div>
 
 				<PageHeader title="All global users" primary={false} />
 
-				<div class="pb-1" />
-				<InviteGlobalUser on:new={listUsers} />
+				<div class="p-2 border mb-4">
+					<InviteGlobalUser on:new={listUsers} />
+				</div>
 				<div class="pb-1" />
 
 				<input placeholder="Search users" bind:value={filter} class="input mt-1" />
 			</div>
 			<div class="mt-2 overflow-auto">
 				<TableCustom>
-					<tr slot="header-row" class="sticky top-0 bg-white border-b">
+					<tr slot="header-row" class="sticky top-0 bg-surface border-b">
 						<th>email</th>
 						<th>auth</th>
 						<th>name</th>
@@ -66,7 +67,7 @@ async function listUsers() {
 						<th />
 						<th />
 					</tr>
-					<tbody slot="body" class="overflow-y-auto h-full max-h-full">
+					<tbody slot="body" class="overflow-y-auto w-full h-full max-h-full">
 						{#if filteredUsers && users}
 							{#each filteredUsers as { email, super_admin, login_type, name, company } (email)}
 								<tr class="border">
@@ -80,7 +81,7 @@ async function listUsers() {
 									<td>
 										<div class="flex flex-row gap-x-1">
 											<button
-												class="text-blue-500"
+												class="text-blue-500 whitespace-nowrap"
 												on:click={async () => {
 													await UserService.globalUserUpdate({
 														email,
@@ -90,11 +91,11 @@ async function listUsers() {
 													})
 													sendUserToast('User updated')
 													listUsers()
-												}}>{super_admin ? 'non-superadmin' : 'superadmin'}</button
+												}}>make {super_admin ? 'non-superadmin' : 'superadmin'}</button
 											>
 											|
 											<button
-												class="text-red-500"
+												class="text-red-500 whitespace-nowrap"
 												on:click={async () => {
 													await UserService.globalUserDelete({ email })
 													sendUserToast(`User ${email} removed`)

package/package/components/TableCustom.svelte

@@ -11,7 +11,7 @@ const dispatch = createEventDispatcher();
 -->
 <div class="flex flex-col {$$props.class} min-w-full">
 	<div class="inline-block min-w-full py-2 align-middle">
-		<table class="table-custom min-w-full table-auto divide-y divide-gray-300">
+		<table class="table-custom min-w-full table-auto divide-y">
 			<thead>
 				<slot name="header-row" />
 			</thead>
@@ -19,7 +19,7 @@ const dispatch = createEventDispatcher();
 		</table>
 	</div>
 	{#if paginated}
-		<div class="sticky flex flex-row-reverse text-gray-500 mb-6">
+		<div class="sticky flex flex-row-reverse text-tertiary mb-6">
 			<button
 				class="ml-2 drop-shadow-md {showNext ? 'visible' : 'invisible'}"
 				on:click={() => dispatch('next')}

package/package/components/TableSimple.svelte

@@ -11,13 +11,13 @@ const dispatch = createEventDispatcher();
 
 <div class="mt-2 flex flex-col {$$props.class}">
 	<div class="inline-block min-w-full align-middle">
-		<table class="min-w-full divide-y divide-gray-300 table-auto">
+		<table class="min-w-full divide-y table-auto">
 			<thead>
 				<tr class={twTextSize}>
 					{#if headers}
 						{#each headers as header, i}
 							<th
-								class="py-3.5 text-left text-sm font-semibold text-gray-900 capitalize {i == 0
+								class="py-3.5 text-left text-sm font-semibold text-primary capitalize {i == 0
 									? 'sm:pl-6 md:pl-0 pl-4 pr-3'
 									: 'px-3 '}">{header}</th
 							>
@@ -25,13 +25,13 @@ const dispatch = createEventDispatcher();
 					{/if}
 				</tr>
 			</thead>
-			<tbody class="divide-y divide-gray-200">
+			<tbody class="divide-y">
 				{#if data && keys && data.length > 0}
 					{#each data as row}
 						<tr>
 							{#each keys as key, i}
 								<td
-									class="py-2 text-sm text-gray-700 break-words {i == 0
+									class="py-2 text-sm text-secondary break-words {i == 0
 										? 'pl-4 pr-3 sm:pl-6 md:pl-0 font-semibold'
 										: 'px-3'} {twTextSize}"
 								>
@@ -50,7 +50,7 @@ const dispatch = createEventDispatcher();
 	</div>
 </div>
 {#if paginated}
-	<div class="flex flex-row-reverse text-gray-500">
+	<div class="flex flex-row-reverse text-tertiary">
 		<button
 			on:click={() => {
 				dispatch('next')

package/package/components/TemplateEditor.svelte

@@ -320,16 +320,6 @@ languages.registerTokensProviderFactory('template', {
     create: () => language
 });
 languages.setLanguageConfiguration('template', conf);
-meditor.defineTheme('myTheme', {
-    base: 'vs',
-    inherit: true,
-    rules: [],
-    colors: {
-        'editorLineNumber.foreground': '#999',
-        'editorGutter.background': '#F9FAFB'
-    }
-});
-meditor.setTheme('myTheme');
 let divEl = null;
 let editor;
 let model;

package/package/components/TestConnection.svelte

@@ -0,0 +1,72 @@
+<script>import { JobService, Preview } from '../gen';
+import { Loader2 } from 'lucide-svelte';
+import Button from './common/button/Button.svelte';
+import { sendUserToast } from '../toast';
+import { workspaceStore } from '../stores';
+export let resource_type;
+export let args = {};
+const content = {
+    postgresql: `import { Client } from 'https://deno.land/x/postgres@v0.17.0/mod.ts'
+export async function main(args: any) {
+  const u = new URL("postgres://")
+	u.hash = ''
+	u.search = '?sslmode=' + args.sslmode
+	u.pathname = args.dbname
+	u.host = args.host
+	u.port = args.port
+	u.password = args.password
+	u.username = args.user
+	const client = new Client(u.toString())
+	await client.connect()
+	return 'Connection successful'
+}`,
+    mysql: `import { Client } from "https://deno.land/x/mysql@v2.11.0/mod.ts";
+export async function main(args: any) {
+  const conn = await new Client().connect({
+    hostname: args.host,
+    port: args.port,
+    username: args.user,
+    db: args.database,
+    password: args.password,
+  });
+  await conn.query("SELECT 1");
+  return "Connection successful";
+}`
+};
+let loading = false;
+async function testConnection() {
+    if (!resource_type)
+        return;
+    loading = true;
+    const job = await JobService.runScriptPreview({
+        workspace: $workspaceStore,
+        requestBody: {
+            language: 'deno',
+            content: content[resource_type],
+            args: {
+                args
+            }
+        }
+    });
+    await new Promise((r) => setTimeout(r, 5000));
+    loading = false;
+    try {
+        const testResult = await JobService.getCompletedJob({
+            workspace: $workspaceStore,
+            id: job
+        });
+        if (testResult) {
+            sendUserToast(testResult.success ? testResult.result : testResult.result?.['error']?.['message'], !testResult.success);
+        }
+    }
+    catch (e) {
+        sendUserToast('Connection did not resolve after 5s');
+    }
+}
+</script>
+
+{#if resource_type == 'postgresql' || resource_type == 'mysql'}
+	<Button size="sm" on:click={testConnection}
+		>{#if loading}<Loader2 class="animate-spin mr-2" />{/if} Test connection</Button
+	>
+{/if}

package/package/components/TestConnection.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        resource_type: string | undefined;
+        args?: Record<string, any> | any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TestConnectionProps = typeof __propDef.props;
+export type TestConnectionEvents = typeof __propDef.events;
+export type TestConnectionSlots = typeof __propDef.slots;
+export default class TestConnection extends SvelteComponentTyped<TestConnectionProps, TestConnectionEvents, TestConnectionSlots> {
+}
+export {};

package/package/components/TestJobLoader.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import { Job } from '../gen';
+import type { SupportedLanguage } from '../common';
 declare const __propDef: {
     props: {
         isLoading?: boolean | undefined;
@@ -9,7 +10,7 @@ declare const __propDef: {
         abstractRun?: ((fn: () => Promise<string>) => Promise<string>) | undefined;
         runScriptByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<string>) | undefined;
         runFlowByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<string>) | undefined;
-        runPreview?: ((path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3' | 'bash', args: Record<string, any>, tag: string | undefined) => Promise<string>) | undefined;
+        runPreview?: ((path: string | undefined, code: string, lang: SupportedLanguage, args: Record<string, any>, tag: string | undefined) => Promise<string>) | undefined;
         cancelJob?: (() => Promise<void>) | undefined;
         clearCurrentJob?: (() => Promise<void>) | undefined;
         watchJob?: ((testId: string) => Promise<void>) | undefined;
@@ -28,7 +29,7 @@ declare const __propDef: {
             abstractRun: (fn: () => Promise<string>) => Promise<string>;
             runScriptByPath: (path: string | undefined, args: Record<string, any>) => Promise<string>;
             runFlowByPath: (path: string | undefined, args: Record<string, any>) => Promise<string>;
-            runPreview: (path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3' | 'bash', args: Record<string, any>, tag: string | undefined) => Promise<string>;
+            runPreview: (path: string | undefined, code: string, lang: SupportedLanguage, args: Record<string, any>, tag: string | undefined) => Promise<string>;
             cancelJob: () => Promise<void>;
             clearCurrentJob: () => Promise<void>;
             watchJob: (testId: string) => Promise<void>;
@@ -44,7 +45,7 @@ export default class TestJobLoader extends SvelteComponentTyped<TestJobLoaderPro
     get abstractRun(): (fn: () => Promise<string>) => Promise<string>;
     get runScriptByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get runFlowByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
-    get runPreview(): (path: string | undefined, code: string, lang: "deno" | "python3" | "go" | "bash", args: Record<string, any>, tag: string | undefined) => Promise<string>;
+    get runPreview(): (path: string | undefined, code: string, lang: import("../gen").Script.language, args: Record<string, any>, tag: string | undefined) => Promise<string>;
     get cancelJob(): () => Promise<void>;
     get clearCurrentJob(): () => Promise<void>;
     get watchJob(): (testId: string) => Promise<void>;

package/package/components/Toast.svelte

@@ -19,7 +19,7 @@ onMount(() => {
 </script>
 
 <div
-	class="pointer-events-auto w-full max-w-sm overflow-hidden bg-white shadow-lg ring-1 ring-black ring-opacity-5 border"
+	class="pointer-events-auto w-full max-w-sm overflow-hidden bg-surface shadow-lg ring-1 ring-black ring-opacity-5 border"
 >
 	<div class="p-2 min-h-[60px] flex flex-col">
 		<div class="flex items-start w-full">
@@ -31,9 +31,11 @@ onMount(() => {
 				{/if}
 			</div>
 			<div class="ml-3 flex-1 w-0">
-				<p class="text-sm text-gray-500">{message}</p>
+				<p class="text-sm text-secondary">{message}</p>
 				{#if errorMessage}
-					<p class="text-sm text-gray-500 border bg-gray-50 p-2 w-full overflow-auto mt-2">
+					<p
+						class="text-sm text-secondary border bg-surface-secondary p-2 w-full overflow-auto mt-2"
+					>
 						{errorMessage}
 					</p>
 				{/if}
@@ -43,7 +45,7 @@ onMount(() => {
 				<button
 					type="button"
 					on:click={handleClose}
-					class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none"
+					class="inline-flex rounded-md bg-surface-secondary text-gray-400 hover:text-tertiary focus:outline-none"
 				>
 					<span class="sr-only">Close</span>
 					<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -61,7 +63,7 @@ onMount(() => {
 						action.callback()
 						toast.pop(toastId)
 					}}
-					class="text-sm !text-black"
+					class="text-sm !text-primary"
 				>
 					{action.label}
 				</Button>

package/package/components/Toggle.svelte

@@ -24,7 +24,7 @@ const dispatch = createEventDispatcher();
 			<span
 				class={twMerge(
 					'mr-2 font-medium duration-50',
-					disabled ? 'text-gray-500' : 'text-gray-900',
+					disabled ? 'text-disabled' : 'text-primary',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass
 				)}
@@ -50,7 +50,7 @@ const dispatch = createEventDispatcher();
 			/>
 			<div
 				class={classNames(
-					"transition-all bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-white after:border-white after:border after:rounded-full after:transition-all ",
+					"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-surface after:border-white after:border after:rounded-full after:transition-all ",
 					color == 'red' ? 'peer-checked:bg-red-600' : 'peer-checked:bg-blue-600',
 					size === 'sm'
 						? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
@@ -62,7 +62,7 @@ const dispatch = createEventDispatcher();
 			<span
 				class={twMerge(
 					'ml-2 font-medium duration-50',
-					disabled ? 'text-gray-500' : 'text-gray-900',
+					disabled ? 'text-disabled' : 'text-primary',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass
 				)}

package/package/components/ToggleHubWorkspace.svelte

@@ -1,16 +1,13 @@
-<script>import { faBuilding } from '@fortawesome/free-solid-svg-icons';
-import { ToggleButton, ToggleButtonGroup } from './common';
-import { WindmillIcon } from './icons';
+<script>import { WindmillIcon } from './icons';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import { Building } from 'lucide-svelte';
 export let selected = 'hub';
 </script>
 
 <div class="max-w-min">
 	<ToggleButtonGroup bind:selected>
-		<ToggleButton position="left" value="hub" size="sm">
-			<WindmillIcon white={selected == 'hub'} height="16px" width="16px" /><div class="mr-1" />Hub
-		</ToggleButton>
-		<ToggleButton position="right" value="workspace" size="sm" startIcon={{ icon: faBuilding }}>
-			Workspace
-		</ToggleButton>
+		<ToggleButton value="hub" icon={WindmillIcon} label="Hub" />
+		<ToggleButton value="workspace" icon={Building} label="Workspace" />
 	</ToggleButtonGroup>
 </div>

package/package/components/Tooltip.svelte

@@ -12,8 +12,8 @@ export let documentationLink = undefined;
 <Popover notClickable {placement} class={wrapperClass}>
 	<Icon
 		class="{light
-			? 'text-gray-400 hover:text-gray-500'
-			: ' text-gray-500 hover:text-gray-600'}  cursor-pointer transition-all font-thin flex h-4 p-0.5 w-4 justify-center items-center {$$props.class}"
+			? 'text-gray-400 dark:text-gray-200 hover:text-tertiary dark:hover:text-gray-300'
+			: ' text-tertiary dark:text-gray-300 hover:text-tertiary dark:hover:text-gray-400'}  cursor-pointer transition-all font-thin flex h-4 p-0.5 w-4 justify-center items-center {$$props.class}"
 		data={faInfoCircle}
 		{scale}
 	/>

package/package/components/Uptodate.svelte

@@ -21,6 +21,6 @@ async function loadVersion() {
 			How to update?<br />
 			- docker: `docker compose up`<br />-
 			<a href="https://github.com/windmill-labs/windmill-helm-charts#install">helm</a>
-		</Tooltip></span
-	>
+		</Tooltip>
+	</span>
 {/if}

package/package/components/UserSettings.svelte

@@ -81,7 +81,7 @@ async function deleteToken(tokenPrefix) {
 	<DrawerContent title="User Settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full">
 			<div>
-				<div class="text-xs pt-1 pb-2 text-gray-500 flex-col flex">
+				<div class="text-xs pt-1 pb-2 text-tertiary flex-col flex">
 					Windmill <Version />
 				</div>
 
@@ -93,8 +93,8 @@ async function deleteToken(tokenPrefix) {
 						{/if}
 						<div class="flex flex-col gap-2 w-full">
 							<div class="mt-4">
-								<label class="block w-60 mb-2 text-gray-500">
-									<div class="text-gray-700">email</div>
+								<label class="block w-60 mb-2 text-tertiary">
+									<div class="text-secondary">email</div>
 									<input
 										type="text"
 										disabled
@@ -104,7 +104,7 @@ async function deleteToken(tokenPrefix) {
 								</label>
 								{#if login_type == 'password'}
 									<label class="block w-120">
-										<div class="text-gray-700">password</div>
+										<div class="text-secondary">password</div>
 										<input
 											type="password"
 											bind:value={newPassword}
@@ -151,7 +151,7 @@ async function deleteToken(tokenPrefix) {
 						</Button>
 					</div>
 				</div>
-				<div class="text-2xs text-gray-500 italic pb-6">
+				<div class="text-2xs text-tertiary italic pb-6">
 					Authentify to the Windmill API with access tokens.
 				</div>
 
@@ -159,7 +159,7 @@ async function deleteToken(tokenPrefix) {
 					<div
 						class="{newToken
 							? ''
-							: 'hidden'} border rounded-md mb-6 px-2 py-2 bg-green-50 flex flex-row flex-wrap"
+							: 'hidden'} border rounded-md mb-6 px-2 py-2 bg-green-50 dark:bg-green-200 dark:text-green-800 flex flex-row flex-wrap"
 					>
 						<div>
 							Added token: <button on:click={() => copyToClipboard(newToken ?? '')} class="inline"
@@ -175,7 +175,7 @@ async function deleteToken(tokenPrefix) {
 					<div
 						class="{displayCreateToken
 							? ''
-							: 'hidden'} py-3 px-3 border rounded-md mb-6 bg-gray-50 min-w-min"
+							: 'hidden'} py-3 px-3 border rounded-md mb-6 bg-surface-secondary min-w-min"
 					>
 						<h3 class="pb-3 font-semibold">Add a new token</h3>
 						{#if scopes != undefined}
@@ -196,13 +196,13 @@ async function deleteToken(tokenPrefix) {
 						<div class="flex flex-row flex-wrap gap-x-2 w-full justify-between">
 							<div class="flex flex-col">
 								<label for="label"
-									>Label <span class="text-xs text-gray-500">(optional)</span></label
+									>Label <span class="text-xs text-tertiary">(optional)</span></label
 								>
 								<input type="text" bind:value={newTokenLabel} />
 							</div>
 							<div class="flex flex-col">
 								<label for="expires"
-									>Expires In &nbsp;<span class="text-xs text-gray-500">(optional)</span>
+									>Expires In &nbsp;<span class="text-xs text-tertiary">(optional)</span>
 								</label>
 								<select bind:value={newTokenExpiration}>
 									<option value={undefined}>No expiration</option>
@@ -246,7 +246,7 @@ async function deleteToken(tokenPrefix) {
 								{/each}
 							{:else if tokens && tokens.length === 0}
 								<tr class="px-6"
-									><td class="text-gray-700 italic text-xs"> There are no tokens yet</td></tr
+									><td class="text-secondary italic text-xs"> There are no tokens yet</td></tr
 								>
 							{:else}
 								<tr> Loading...</tr>

package/package/components/VariableEditor.svelte

@@ -4,7 +4,7 @@ import { createEventDispatcher } from 'svelte';
 import { userStore, workspaceStore } from '../stores';
 import Required from './Required.svelte';
 import Tooltip from './Tooltip.svelte';
-import { Button, ToggleButton, ToggleButtonGroup } from './common';
+import { Button } from './common';
 import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Alert from './common/alert/Alert.svelte';
@@ -14,6 +14,8 @@ import { faSave } from '@fortawesome/free-solid-svg-icons';
 import SimpleEditor from './SimpleEditor.svelte';
 import { sendUserToast } from '../toast';
 import { canWrite, isOwner } from '../utils';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 const dispatch = createEventDispatcher();
 let path = '';
 let variable = {
@@ -127,7 +129,7 @@ let editor = undefined;
 							>
 						</div>
 					{/if}
-					<span class="font-semibold text-gray-700">Path</span>
+					<span class="font-semibold text-secondary">Path</span>
 					<Path
 						disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
 						bind:error={pathError}
@@ -156,18 +158,23 @@ let editor = undefined;
 
 			<div>
 				<div class="mb-1">
-					<span class="font-semibold text-gray-700">Variable value</span>
-					<span class="text-sm text-gray-500 mr-4"
-						>({variable.value.length}/{MAX_VARIABLE_LENGTH} characters)</span
-					>
-					{#if edit && variable.is_secret}<Button
-							variant="border"
-							size="xs"
-							on:click={() => loadVariable(initialPath)}
-							>Load secret value<Tooltip>Will generate an audit log</Tooltip></Button
-						>{/if}
+					<span class="font-semibold text-secondary">Variable value</span>
+					<span class="text-sm text-tertiary mr-4">
+						({variable.value.length}/{MAX_VARIABLE_LENGTH} characters)
+					</span>
+					{#if edit && variable.is_secret}{#if $userStore?.operator}
+							<div class="p-2 border">Operators cannot load secret value</div>
+						{:else}
+							<Button variant="border" size="xs" on:click={() => loadVariable(initialPath)}
+								>Load secret value<Tooltip>Will generate an audit log</Tooltip></Button
+							>{/if}{/if}
 				</div>
-				<div class="flex flex-row">
+				<div class="flex flex-col gap-2">
+					<ToggleButtonGroup bind:selected={editorKind}>
+						<ToggleButton value="plain" label="Plain" />
+						<ToggleButton value="json" label="Json" />
+						<ToggleButton value="yaml" label="YAML" />
+					</ToggleButtonGroup>
 					{#if editorKind == 'plain'}
 						<textarea
 							disabled={!can_write}
@@ -198,18 +205,12 @@ let editor = undefined;
 							/>
 						</div>
 					{/if}
-
-					<ToggleButtonGroup col bind:selected={editorKind}>
-						<ToggleButton light position="center" value="plain" size="xs">Plain</ToggleButton>
-						<ToggleButton light position="center" value="json" size="xs">Json</ToggleButton>
-						<ToggleButton light position="center" value="yaml" size="xs">YAML</ToggleButton>
-					</ToggleButtonGroup>
 				</div>
 			</div>
 			<!-- {/if} -->
 
 			<div>
-				<div class="mb-1 font-semibold text-gray-700">
+				<div class="mb-1 font-semibold text-secondary">
 					Description
 					<Required required={false} />
 				</div>

package/package/components/Version.svelte

@@ -6,4 +6,6 @@ async function loadVersion() {
 }
 </script>
 
-{version}
+<div class="text-secondary text-xs">
+	{version}
+</div>

package/package/components/WhitelistIp.svelte

@@ -15,7 +15,7 @@ WorkerService.listWorkers({}).then((workers) => {
 {#if ips}
 	<div class="mt-2" />
 	<Alert size="xs" type="info" title="IPs to whitelist">
-		<span class="text-gray-600">If necessary, the workers IPs to whitelist are:</span>
+		<span class="text-tertiary">If necessary, the workers IPs to whitelist are:</span>
 		{ips.join(', ')}
 	</Alert>
 {/if}

package/package/components/apps/components/buttons/AppButton.svelte

@@ -27,7 +27,8 @@ let resolvedConfig = initConfig(components['buttoncomponent'].initialData.config
 $: errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay';
 let outputs = initOutput($worldStore, id, {
     result: undefined,
-    loading: false
+    loading: false,
+    jobId: undefined
 });
 if (controls) {
     $componentControl[id] = controls;
@@ -81,7 +82,6 @@ $: css = concatCustomCss($app.css?.buttoncomponent, customCss);
 {/each}
 
 <!-- gotoNewTab={resolvedConfig.onSuccess.selected == 'goto'} -->
-
 <RunnableWrapper
 	bind:this={runnableWrapper}
 	{recomputeIds}

package/package/components/apps/components/buttons/AppForm.svelte

@@ -18,11 +18,12 @@ export let customCss = undefined;
 export let render;
 export let errorHandledByComponent = false;
 $: errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay';
-export const staticOutputs = ['loading', 'result'];
+export const staticOutputs = ['loading', 'result', 'jobId'];
 const { app, worldStore, stateId } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
-    loading: false
+    loading: false,
+    jobId: undefined
 });
 const resolvedConfig = initConfig(components['formcomponent'].initialData.configuration, configuration);
 let runnableComponent;
@@ -66,13 +67,13 @@ $: css = concatCustomCss($app.css?.formcomponent, customCss);
 		>
 			<div>
 				{#if noInputs}
-					<div class="text-gray-600 italic text-sm my-4">
+					<div class="text-secondary italic text-sm my-4">
 						Run forms are associated with a runnable that has user inputs.
 						<br />
 						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
 						<strong>
 							User Input
-							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+							<Icon data={faUser} scale={1.3} class="rounded-sm bg-surface-secondary p-1 ml-0.5" />
 						</strong>
 					</div>
 				{/if}

package/package/components/apps/components/buttons/AppFormButton.svelte

@@ -73,7 +73,7 @@ let modal;
 			{errorHandledByComponent}
 		>
 			{#if noInputs}
-				<div class="text-gray-600 italic text-sm my-4">
+				<div class="text-secondary italic text-sm my-4">
 					Run forms are associated with a runnable that has user inputs.
 					<br />
 					Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to

package/package/components/apps/components/buttons/AppSchemaForm.svelte

@@ -74,6 +74,6 @@ let valid = true;
 			/>
 		</div>
 	{:else}
-		<p class="m-2 italic">Empty form (no propertie)</p>
+		<p class="m-2 italic">Empty form (no property)</p>
 	{/if}
 </RunnableWrapper>

package/package/components/apps/components/display/AppBarChart.svelte

@@ -54,7 +54,19 @@ $: data = {
             data: result?.data ?? [],
             backgroundColor
         }
-    ]
+    ],
+    options: {
+        scales: {
+            y: {
+                ticks: {
+                    // Include a dollar sign in the ticks
+                    callback: function (value, index, ticks) {
+                        return '$' + value;
+                    }
+                }
+            }
+        }
+    }
 };
 $: css = concatCustomCss($app.css?.barchartcomponent, customCss);
 </script>