windmill-components 1.504.6 → 1.511.0

package/package/components/jobs/JobPreview.svelte

@@ -4,7 +4,7 @@
 <script lang="ts">import { onDestroy, tick } from 'svelte';
 import { fade } from 'svelte/transition';
 import {} from '../../gen';
-import TestJobLoader from '../TestJobLoader.svelte';
+import JobLoader from '../JobLoader.svelte';
 import DisplayResult from '../DisplayResult.svelte';
 import JobArgs from '../JobArgs.svelte';
 import { writable } from 'svelte/store';
@@ -19,7 +19,7 @@ let job = $state(undefined);
 let hovered = $state(false);
 let timeout;
 let result = $state();
-let testJobLoader = $state();
+let jobLoader = $state();
 let loaded = false;
 let wrapper = $state();
 let popupOnTop = $state(true);
@@ -31,7 +31,11 @@ async function instantOpen() {
         openStore.set(id);
         if (!loaded) {
             await tick();
-            testJobLoader?.watchJob(id);
+            jobLoader?.watchJob(id, {
+                done(job) {
+                    onDone(job);
+                }
+            });
         }
     }
     else {
@@ -58,8 +62,8 @@ function staggeredClose() {
         close();
     }, loaded ? 100 : 300);
 }
-function onDone(event) {
-    job = event.detail;
+function onDone(njob) {
+    job = njob;
     result = job['result'];
     loaded = true;
 }
@@ -70,7 +74,7 @@ onDestroy(() => {
 
 <svelte:window onkeydown={({ key }) => ['Escape', 'Esc'].includes(key) && close()} />
 {#if hovered}
-	<TestJobLoader bind:job bind:this={testJobLoader} on:done={onDone} />
+	<JobLoader bind:job bind:this={jobLoader} />
 {/if}
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte

@@ -9,7 +9,7 @@ import RawAppInputsSpecEditor from './RawAppInputsSpecEditor.svelte';
 import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
 import SchemaForm from '../SchemaForm.svelte';
 import RunnableJobPanelInner from '../apps/editor/RunnableJobPanelInner.svelte';
-import TestJobLoader from '../TestJobLoader.svelte';
+import JobLoader from '../JobLoader.svelte';
 let { runnable = $bindable(), id, appPath } = $props();
 const dispatch = createEventDispatcher();
 async function fork(nrunnable) {
@@ -37,7 +37,7 @@ function getSchema(runnable) {
     }
     return {};
 }
-let testJobLoader = $state();
+let jobLoader = $state();
 let testJob = $state();
 let testIsLoading = $state(false);
 let scriptProgress = $state(0);
@@ -54,15 +54,15 @@ function onFieldsChange(fields) {
 async function testPreview() {
     selectedTab = 'test';
     if (runnable?.type == 'runnableByName' && runnable.inlineScript?.language != 'frontend') {
-        await testJobLoader?.runPreview(appPath + '/' + id, runnable.inlineScript?.content ?? '', runnable.inlineScript?.language, args, undefined);
+        await jobLoader?.runPreview(appPath + '/' + id, runnable.inlineScript?.content ?? '', runnable.inlineScript?.language, args, undefined);
     }
     else if (runnable?.type == 'runnableByPath') {
-        if (testJobLoader && runnable?.type == 'runnableByPath') {
+        if (jobLoader && runnable?.type == 'runnableByPath') {
             if (runnable.runType == 'flow') {
-                await testJobLoader.runFlowByPath(runnable.path, args);
+                await jobLoader.runFlowByPath(runnable.path, args);
             }
             else if (runnable.runType == 'script' || runnable.runType == 'hubscript') {
-                await testJobLoader.runScriptByPath(runnable.path, args);
+                await jobLoader.runScriptByPath(runnable.path, args);
             }
         }
     }
@@ -74,9 +74,10 @@ $effect(() => {
 });
 </script>
 
-<TestJobLoader
+<JobLoader
+	noCode={true}
 	bind:scriptProgress
-	bind:this={testJobLoader}
+	bind:this={jobLoader}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
 />
@@ -97,8 +98,8 @@ $effect(() => {
 						isLoading={testIsLoading}
 						onRun={testPreview}
 						onCancel={async () => {
-							if (testJobLoader) {
-								await testJobLoader.cancelJob()
+							if (jobLoader) {
+								await jobLoader.cancelJob()
 							}
 						}}
 						on:delete
@@ -116,8 +117,8 @@ $effect(() => {
 					isLoading={testIsLoading}
 					onRun={testPreview}
 					onCancel={async () => {
-						if (testJobLoader) {
-							await testJobLoader.cancelJob()
+						if (jobLoader) {
+							await jobLoader.cancelJob()
 						}
 					}}
 				/>

package/package/components/runs/BatchReRunOptionsPane.svelte

@@ -12,6 +12,7 @@ import Alert from '../common/alert/Alert.svelte';
 import { batchReRunDefaultPropertyExpr, buildExtraLibForBatchReruns, mergeSchemasForBatchReruns } from '../jobs/batchReruns';
 import Toggle from '../Toggle.svelte';
 import { TriangleAlert } from 'lucide-svelte';
+import { readFieldsRecursively } from '../../utils';
 let { selectedIds, options = $bindable() } = $props();
 let selected = $state();
 $effect(() => {
@@ -103,7 +104,10 @@ function propertyAlwaysHasSameType(propertyName, group) {
 const selectedUsesLatestSchema = $derived(!!selected &&
     (selected?.kind === 'flow' ||
         (options[selected.kind][selected.script_path]?.use_latest_version ?? false)));
-const jobGroupsPromise = $derived(selectedIds && untrack(() => fetchJobGroups()));
+const jobGroupsPromise = $derived.by(() => {
+    readFieldsRecursively(selectedIds);
+    return untrack(() => fetchJobGroups());
+});
 </script>
 
 <div class="flex-1 flex flex-col">

package/package/components/runs/JobPreview.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { base } from '../../base';
 import { ConcurrencyGroupsService } from '../../gen';
-import TestJobLoader from '../TestJobLoader.svelte';
+import JobLoader from '../JobLoader.svelte';
 import DisplayResult from '../DisplayResult.svelte';
 import JobArgs from '../JobArgs.svelte';
 import LogViewer from '../LogViewer.svelte';
@@ -14,13 +14,14 @@ import { workspaceStore } from '../../stores';
 import WorkflowTimeline from '../WorkflowTimeline.svelte';
 import Popover from '../Popover.svelte';
 import { isFlowPreview, isScriptPreview, truncateRev } from '../../utils';
-import { createEventDispatcher, untrack } from 'svelte';
+import { createEventDispatcher, setContext, untrack } from 'svelte';
 import { ListFilter } from 'lucide-svelte';
+import FlowAssetsHandler, { initFlowGraphAssetsCtx } from '../flows/FlowAssetsHandler.svelte';
+import JobAssetsViewer from '../assets/JobAssetsViewer.svelte';
 let { id, blankLink = false, workspace } = $props();
 let job = $state(undefined);
 let result = $state();
-function onDone(event) {
-    job = event.detail;
+function onDone(job) {
     result = job['result'];
 }
 let currentJob = $state(undefined);
@@ -31,6 +32,7 @@ async function getConcurrencyKey(job) {
     concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({ id: job.id });
 }
 let viewTab = $state('result');
+setContext('FlowGraphAssetContext', initFlowGraphAssetsCtx({ getModules: () => job?.raw_flow?.modules ?? [] }));
 function asWorkflowStatus(x) {
     return x;
 }
@@ -41,24 +43,24 @@ $effect(() => {
     }
 });
 $effect(() => {
-    id && testJobLoader && untrack(() => testJobLoader?.watchJob(id));
+    id &&
+        jobLoader &&
+        untrack(() => jobLoader?.watchJob(id, {
+            done(x) {
+                onDone(x);
+            }
+        }));
 });
 $effect(() => {
-    job?.logs == undefined && job && viewTab == 'logs' && untrack(() => testJobLoader?.getLogs());
+    job?.logs == undefined && job && viewTab == 'logs' && untrack(() => jobLoader?.getLogs());
 });
 $effect(() => {
     job?.id && lastJobId !== job.id && untrack(() => job && getConcurrencyKey(job));
 });
-let testJobLoader = $state(undefined);
+let jobLoader = $state(undefined);
 </script>
 
-<TestJobLoader
-	lazyLogs
-	workspaceOverride={workspace}
-	bind:job={currentJob}
-	bind:this={testJobLoader}
-	on:done={onDone}
-/>
+<JobLoader lazyLogs workspaceOverride={workspace} bind:job={currentJob} bind:this={jobLoader} />
 
 <div class="p-4 flex flex-col gap-2 items-start h-full">
 	{#if job}
@@ -165,9 +167,9 @@ let testJobLoader = $state(undefined);
 		{/if}
 
 		<div class=" w-full rounded-md min-h-full">
-			{#if job?.is_flow_step == false && job?.flow_status && (isScriptPreview(job?.job_kind) || job?.job_kind == 'script') && !(typeof job.flow_status == 'object' && '_metadata' in job.flow_status)}
+			{#if job?.workflow_as_code_status}
 				<WorkflowTimeline
-					flow_status={asWorkflowStatus(job.flow_status)}
+					flow_status={asWorkflowStatus(job.workflow_as_code_status)}
 					flowDone={job.type == 'CompletedJob'}
 				/>
 			{/if}
@@ -176,6 +178,7 @@ let testJobLoader = $state(undefined);
 				<Tabs bind:selected={viewTab}>
 					<Tab size="xs" value="result">Result</Tab>
 					<Tab size="xs" value="logs">Logs</Tab>
+					<Tab size="xs" value="assets">Assets</Tab>
 					{#if isScriptPreview(job?.job_kind)}
 						<Tab size="xs" value="code">Code</Tab>
 					{/if}
@@ -189,6 +192,8 @@ let testJobLoader = $state(undefined);
 								<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} />
 							</div>
 						</div>
+					{:else if viewTab == 'assets'}
+						<JobAssetsViewer {job} />
 					{:else}
 						<div class="flex flex-col border rounded-md p-2 mt-2 h-full overflow-auto">
 							{#if viewTab == 'logs'}
@@ -247,3 +252,8 @@ let testJobLoader = $state(undefined);
 		</div>
 	{/if}
 </div>
+<FlowAssetsHandler
+	modules={job?.raw_flow?.modules ?? []}
+	enableDbExplore
+	enablePathScriptAndFlowAssets
+/>

package/package/components/runs/{JobLoader.svelte.d.ts → JobsLoader.svelte.d.ts}

@@ -40,9 +40,9 @@ interface Props {
     perPage?: number | undefined;
     allowWildcards?: boolean;
 }
-declare const JobLoader: import("svelte").Component<Props, {
+declare const JobsLoader: import("svelte").Component<Props, {
     loadExtraJobs: () => Promise<boolean>;
     loadJobs: (nMinTs: string | undefined, nMaxTs: string | undefined, reset: boolean, shouldGetCount?: boolean) => Promise<void>;
 }, "jobs" | "loading" | "minTs" | "maxTs" | "jobKinds" | "queue_count" | "suspended_count" | "completedJobs" | "externalJobs" | "extendedJobs">;
-type JobLoader = ReturnType<typeof JobLoader>;
-export default JobLoader;
+type JobsLoader = ReturnType<typeof JobsLoader>;
+export default JobsLoader;

package/package/components/runs/NoWorkerWithTagWarning.svelte

@@ -2,7 +2,7 @@
 import { AlertTriangle } from 'lucide-svelte';
 import Popover from '../Popover.svelte';
 import { onDestroy } from 'svelte';
-let { tag } = $props();
+let { tag, tagLabel = undefined } = $props();
 let noWorkerWithTag = $state(false);
 let timeout = undefined;
 let visible = true;
@@ -35,7 +35,7 @@ onDestroy(() => {
 	<Popover notClickable placement="top">
 		<AlertTriangle size={16} class="text-yellow-500" />
 		{#snippet text()}
-			No worker with tag <b>{tag}</b> is currently running.
+			No worker with {tagLabel ?? 'tag'} <b>{tag}</b> is currently running.
 		{/snippet}
 	</Popover>
 {/if}

package/package/components/runs/NoWorkerWithTagWarning.svelte.d.ts

@@ -1,5 +1,6 @@
 interface Props {
     tag: string;
+    tagLabel?: string;
 }
 declare const NoWorkerWithTagWarning: import("svelte").Component<Props, {}, "">;
 type NoWorkerWithTagWarning = ReturnType<typeof NoWorkerWithTagWarning>;

package/package/components/runs/RunsFilter.svelte.d.ts

@@ -40,6 +40,6 @@ declare const RunsFilter: $$__sveltets_2_IsomorphicComponent<Props, {
     successChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "path" | "tag" | "success" | "worker" | "folder" | "user" | "label" | "isSkipped" | "argFilter" | "resultFilter" | "schedulePath" | "jobKindsCat" | "concurrencyKey" | "argError" | "resultError" | "allWorkspaces" | "allowWildcards" | "filterBy">;
+}, {}, {}, "path" | "tag" | "success" | "worker" | "label" | "folder" | "user" | "isSkipped" | "argFilter" | "resultFilter" | "schedulePath" | "jobKindsCat" | "concurrencyKey" | "argError" | "resultError" | "allWorkspaces" | "allowWildcards" | "filterBy">;
 type RunsFilter = InstanceType<typeof RunsFilter>;
 export default RunsFilter;

package/package/components/scriptEditor/LogPanel.svelte

@@ -76,10 +76,10 @@ let forceJson = $state(false);
 				{#if selectedTab === 'logs'}
 					<SplitPanesWrapper>
 						<Splitpanes horizontal>
-							{#if previewJob?.is_flow_step == false && previewJob?.flow_status && !(typeof previewJob.flow_status == 'object' && '_metadata' in previewJob.flow_status)}
+							{#if previewJob?.workflow_as_code_status}
 								<Pane class="relative">
 									<WorkflowTimeline
-										flow_status={asWorkflowStatus(previewJob.flow_status)}
+										flow_status={asWorkflowStatus(previewJob.workflow_as_code_status)}
 										flowDone={previewJob.type == 'CompletedJob'}
 									/>
 								</Pane>
@@ -93,6 +93,7 @@ let forceJson = $state(false);
 									isLoading={previewJob?.['running'] == false && previewIsLoading}
 									tag={previewJob?.tag}
 									download={customUi?.disableDownload !== true}
+									tagLabel={customUi?.tagLabel}
 								/>
 							</Pane>
 							<Pane>

package/package/components/script_builder.d.ts

@@ -1,5 +1,5 @@
 import type { NewScript } from '../gen';
-import type { AssetWithAccessType } from './assets/lib';
+import type { AssetWithAltAccessType } from './assets/lib';
 import type { ScriptBuilderWhitelabelCustomUi } from './custom_ui';
 import type { DiffDrawerI } from './diff_drawer';
 import type { ScriptBuilderFunctionExports } from './scriptBuilder';
@@ -8,7 +8,7 @@ import type { NewScriptWithDraftAndDraftTriggers, Trigger } from './triggers/uti
 export interface ScriptBuilderProps {
     script: NewScript & {
         draft_triggers?: Trigger[];
-        fallback_access_types?: AssetWithAccessType[];
+        assets?: AssetWithAltAccessType[];
     };
     disableAi?: boolean;
     fullyLoaded?: boolean;

package/package/components/settings/CreateToken.svelte

@@ -4,12 +4,13 @@ import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 import Toggle from '../Toggle.svelte';
-import { UserService } from '../../gen';
-import { copyToClipboard } from '../../utils';
-import { Clipboard } from 'lucide-svelte';
-import ClipboardPanel from '../details/ClipboardPanel.svelte';
+import { IntegrationService, UserService } from '../../gen';
 import { createEventDispatcher } from 'svelte';
-let { showMcpMode = false, defaultNewTokenWorkspace, scopes, actions, newTokenLabel = $bindable(undefined) } = $props();
+import MultiSelect from '../select/MultiSelect.svelte';
+import { safeSelectItems } from '../select/utils.svelte';
+import TokenDisplay from './TokenDisplay.svelte';
+import ScopeSelector from './ScopeSelector.svelte';
+let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined) } = $props();
 let newToken = $state(undefined);
 let newMcpToken = $state(undefined);
 let newTokenExpiration = $state(undefined);
@@ -19,10 +20,9 @@ let mcpCreationMode = $state(false);
 let newMcpScope = $state('favorites');
 let loadingApps = $state(false);
 let errorFetchApps = $state(false);
-// let allApps = $state<string[]>([])
-function handleCopyClick() {
-    copyToClipboard(newToken ?? '');
-}
+let allApps = $state([]);
+let customScopes = $state([]);
+let showCustomScopes = $state(false);
 const dispatch = createEventDispatcher();
 function ensureCurrentWorkspaceIncluded(workspacesList, currentWorkspace) {
     if (!currentWorkspace) {
@@ -47,6 +47,9 @@ async function createToken(mcpMode = false) {
                 tokenScopes.push(`mcp:hub:${newMcpApps.join(',')}`);
             }
         }
+        else if (showCustomScopes && customScopes.length > 0) {
+            tokenScopes = customScopes;
+        }
         const createdToken = await UserService.createToken({
             requestBody: {
                 label: newTokenLabel,
@@ -62,8 +65,8 @@ async function createToken(mcpMode = false) {
             newToken = `${createdToken}`;
         }
         dispatch('tokenCreated', newToken ?? newMcpToken);
-        if (actions) {
-            actions();
+        if (onTokenCreated) {
+            onTokenCreated(newToken ?? newMcpToken ?? '');
         }
         mcpCreationMode = false;
     }
@@ -73,37 +76,36 @@ async function createToken(mcpMode = false) {
 }
 const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore));
 const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/sse?token=`);
+$effect(() => {
+    if (mcpCreationMode) {
+        getAllApps();
+    }
+    else {
+        newMcpApps = [];
+    }
+});
+async function getAllApps() {
+    if (allApps.length > 0) {
+        return;
+    }
+    try {
+        loadingApps = true;
+        allApps = (await IntegrationService.listHubIntegrations({
+            kind: 'script'
+        })).map((x) => x.name);
+    }
+    catch (err) {
+        console.error('Hub is not available');
+        allApps = [];
+        errorFetchApps = true;
+    }
+    finally {
+        loadingApps = false;
+    }
+}
 </script>
 
 <div>
-	{#if newToken}
-		<div
-			class="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 onclick={handleCopyClick} class="inline-flex gap-2 items-center">
-					{newToken}
-					<Clipboard size={12} />
-				</button>
-			</div>
-			<div class="pt-1 text-xs ml-2">
-				Make sure to copy your personal access token now. You won't be able to see it again!
-			</div>
-		</div>
-	{/if}
-
-	{#if newMcpToken}
-		<div
-			class="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"
-		>
-			<p class="text-sm mb-2">New MCP URL:</p>
-			<ClipboardPanel content={`${mcpBaseUrl}${newMcpToken}`} />
-			<p class="pt-1 text-xs">
-				Make sure to copy this URL now. You won't be able to see it again!
-			</p>
-		</div>
-	{/if}
-
 	<div class="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>
 
@@ -149,7 +151,27 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 			</div>
 		{/if}
 
-		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+		{#if !mcpCreationMode && (!scopes || scopes.length === 0)}
+			<div class="flex flex-col gap-2">
+				<Toggle
+					checked={showCustomScopes}
+					on:change={(e) => {
+						showCustomScopes = e.detail
+					}}
+					options={{
+						right: 'Limit token permissions',
+						rightTooltip:
+							'By default, tokens have full API access. Enable this to restrict the token to specific scopes.'
+					}}
+					size="xs"
+				/>
+				{#if showCustomScopes}
+					<ScopeSelector bind:selectedScopes={customScopes} />
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
 			{#if mcpCreationMode}
 				<div>
 					<span class="block mb-1">Scope</span>
@@ -178,7 +200,12 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 					{:else if errorFetchApps}
 						<div>Error fetching apps</div>
 					{:else}
-						<!-- MultiSelectWrapper was confirmed not to be necessary : deleted -->
+						<MultiSelect
+							items={safeSelectItems(allApps)}
+							placeholder="Select apps"
+							bind:value={newMcpApps}
+							class="!bg-surface"
+						/>
 					{/if}
 				</div>
 
@@ -232,4 +259,12 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 			</Button>
 		</div>
 	</div>
+
+	{#if newToken}
+		<TokenDisplay token={newToken} type="token" />
+	{/if}
+
+	{#if newMcpToken}
+		<TokenDisplay token={newMcpToken} type="mcp" mcpUrl={`${mcpBaseUrl}${newMcpToken}`} />
+	{/if}
 </div>

package/package/components/settings/CreateToken.svelte.d.ts

@@ -4,7 +4,7 @@ interface Props {
     newTokenLabel?: string;
     defaultNewTokenWorkspace?: string;
     scopes?: string[];
-    actions?: () => void;
+    onTokenCreated?: (token: string) => void;
     displayCreateToken?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {