windmill-components 1.434.1 → 1.444.0

package/package/components/ScriptEditor.svelte

@@ -24,6 +24,8 @@ import { setLicense } from '../enterpriseUtils';
 import Tabs from './common/tabs/Tabs.svelte';
 import Tab from './common/tabs/Tab.svelte';
 import { slide } from 'svelte/transition';
+import CaptureTable from './triggers/CaptureTable.svelte';
+import CaptureButton from './triggers/CaptureButton.svelte';
 // Exported
 export let schema = emptySchema();
 export let code;
@@ -43,6 +45,10 @@ export let noHistory = false;
 export let saveToWorkspace = false;
 export let watchChanges = false;
 export let customUi = {};
+export let args = initialArgs;
+export let selectedTab = 'main';
+export let hasPreprocessor = false;
+export let captureTable = undefined;
 let jobProgressReset;
 let websocketAlive = {
     pyright: false,
@@ -57,8 +63,6 @@ $: watchChanges &&
     dispatch('change', { code, schema });
 let width = 1200;
 let testJobLoader;
-// Test args input
-let args = initialArgs;
 let isValid = true;
 let scriptProgress = undefined;
 // Test
@@ -99,14 +103,19 @@ async function loadPastTests() {
         scriptPathExact: path
     });
 }
-let hasPreprocessor = false;
-export async function inferSchema(code, nlang) {
+export async function inferSchema(code, nlang, resetArgs = false) {
     let nschema = schema ?? emptySchema();
     try {
         const result = await inferArgs(nlang ?? lang, code, nschema, selectedTab === 'preprocessor' ? 'preprocessor' : undefined);
         hasPreprocessor =
             (selectedTab === 'preprocessor' ? !result?.no_main_func : result?.has_preprocessor) ?? false;
+        if (!hasPreprocessor && selectedTab === 'preprocessor') {
+            selectedTab = 'main';
+        }
         validCode = true;
+        if (resetArgs) {
+            args = {};
+        }
         schema = nschema;
     }
     catch (e) {
@@ -183,10 +192,10 @@ function collabUrl() {
     url.search = '';
     return `${url}?collab=1` + (edit ? '' : `&path=${path}`);
 }
-let selectedTab = 'main';
 $: showTabs = hasPreprocessor;
 $: !hasPreprocessor && (selectedTab = 'main');
 $: selectedTab && inferSchema(code);
+let argsRender = 0;
 </script>
 
 <TestJobLoader
@@ -264,9 +273,10 @@ $: selectedTab && inferSchema(code);
 <SplitPanesWrapper>
 	<Splitpanes class="!overflow-visible">
 		<Pane size={60} minSize={10} class="!overflow-visible">
-			<div class="pl-2 h-full !overflow-visible bg-gray-50 dark:bg-[#272D38]">
+			<div class="h-full !overflow-visible bg-gray-50 dark:bg-[#272D38]">
 				{#key lang}
 					<Editor
+						lineNumbersMinChars={4}
 						folding
 						{path}
 						bind:code
@@ -314,10 +324,15 @@ $: selectedTab && inferSchema(code);
 					<div transition:slide={{ duration: 200 }}>
 						<Tabs bind:selected={selectedTab}>
 							<Tab value="main">Main</Tab>
-							<Tab value="preprocessor">Preprocessor</Tab>
+							{#if hasPreprocessor}
+								<div transition:slide={{ duration: 200, axis: 'x' }}>
+									<Tab value="preprocessor">Preprocessor</Tab>
+								</div>
+							{/if}
 						</Tabs>
 					</div>
 				{/if}
+
 				<div class="flex justify-center pt-1">
 					{#if testIsLoading}
 						<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
@@ -331,48 +346,53 @@ $: selectedTab && inferSchema(code);
 							Cancel
 						</Button>
 					{:else}
-						<Button
-							color="dark"
-							on:click={() => {
-								runTest()
-							}}
-							btnClasses="w-full"
-							size="xs"
-							startIcon={{
-								icon: Play,
-								classes: 'animate-none'
-							}}
-							shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
-						>
-							{#if testIsLoading}
-								Running
-							{:else}
-								Test
-							{/if}
-						</Button>
+						<div class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch">
+							<Button
+								color="dark"
+								on:click={() => {
+									runTest()
+								}}
+								btnClasses="w-full rounded-r-none"
+								size="xs"
+								startIcon={{
+									icon: Play,
+									classes: 'animate-none'
+								}}
+								shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
+							>
+								{#if testIsLoading}
+									Running
+								{:else}
+									Test
+								{/if}
+							</Button>
+							<CaptureButton on:openTriggers />
+						</div>
 					{/if}
 				</div>
 				<Splitpanes horizontal class="!max-h-[calc(100%-43px)]">
 					<Pane size={33}>
 						<div class="px-2">
 							<div class="break-words relative font-sans">
-								<SchemaForm
-									helperScript={{
-										type: 'inline',
-										code,
-										//@ts-ignore
-										lang
-									}}
-									compact
-									{schema}
-									bind:args
-									bind:isValid
-									showSchemaExplorer
-								/>
+								{#key argsRender}
+									<SchemaForm
+										helperScript={{
+											type: 'inline',
+											code,
+											//@ts-ignore
+											lang
+										}}
+										compact
+										{schema}
+										bind:args
+										bind:isValid
+										showSchemaExplorer
+									/>
+								{/key}
 							</div>
 						</div>
 					</Pane>
-					<Pane size={67}>
+					<Pane size={67} class="relative">
 						<LogPanel
 							{lang}
 							previewJob={testJob}
@@ -381,6 +401,7 @@ $: selectedTab && inferSchema(code);
 							{editor}
 							{diffEditor}
 							{args}
+							showCaptures={true}
 						>
 							{#if scriptProgress}
 								<!-- Put to the slot in logpanel -->
@@ -391,6 +412,23 @@ $: selectedTab && inferSchema(code);
 									compact={true}
 								/>
 							{/if}
+							<svelte:fragment slot="capturesTab">
+								<div class="h-full p-2">
+									<CaptureTable
+										bind:this={captureTable}
+										captureType="all"
+										{hasPreprocessor}
+										canHavePreprocessor={lang === 'bun' || lang === 'deno' || lang === 'python3'}
+										isFlow={false}
+										path={path ?? ''}
+										hideCapturesWhenEmpty={false}
+										canEdit={true}
+										on:applyArgs
+										on:updateSchema
+										on:addPreprocessor
+									/>
+								</div>
+							</svelte:fragment>
 						</LogPanel>
 					</Pane>
 				</Splitpanes>

package/package/components/ScriptEditor.svelte.d.ts

@@ -4,6 +4,7 @@ import { type Preview } from '../gen';
 import Editor from './Editor.svelte';
 import DiffEditor from './DiffEditor.svelte';
 import type { ScriptEditorWhitelabelCustomUi } from './custom_ui';
+import CaptureTable from './triggers/CaptureTable.svelte';
 declare const __propDef: {
     props: {
         schema?: Schema | any;
@@ -24,13 +25,27 @@ declare const __propDef: {
         saveToWorkspace?: boolean | undefined;
         watchChanges?: boolean | undefined;
         customUi?: ScriptEditorWhitelabelCustomUi | undefined;
-        inferSchema?: ((code: string, nlang?: SupportedLanguage) => Promise<void>) | undefined;
+        args?: Record<string, any> | undefined;
+        selectedTab?: "main" | "preprocessor" | undefined;
+        hasPreprocessor?: boolean | undefined;
+        captureTable?: CaptureTable | undefined;
+        inferSchema?: ((code: string, nlang?: SupportedLanguage, resetArgs?: boolean) => Promise<void>) | undefined;
         setCollaborationMode?: (() => Promise<void>) | undefined;
         disableCollaboration?: (() => void) | undefined;
     };
     events: {
         createScriptFromInlineScript: CustomEvent<any>;
         saveDraft: CustomEvent<any>;
+        openTriggers: CustomEvent<any>;
+        applyArgs: CustomEvent<{
+            kind: "main" | "preprocessor";
+            args: Record<string, any> | undefined;
+        }>;
+        updateSchema: CustomEvent<{
+            schema: any;
+            redirect: boolean;
+        }>;
+        addPreprocessor: CustomEvent<null>;
         format: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {
@@ -46,7 +61,7 @@ export type ScriptEditorProps = typeof __propDef.props;
 export type ScriptEditorEvents = typeof __propDef.events;
 export type ScriptEditorSlots = typeof __propDef.slots;
 export default class ScriptEditor extends SvelteComponent<ScriptEditorProps, ScriptEditorEvents, ScriptEditorSlots> {
-    get inferSchema(): (code: string, nlang?: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | "rust" | "ansible" | undefined) => Promise<void>;
+    get inferSchema(): (code: string, nlang?: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | "rust" | "ansible" | "csharp" | undefined, resetArgs?: boolean) => Promise<void>;
     get setCollaborationMode(): () => Promise<void>;
     get disableCollaboration(): () => void;
 }

package/package/components/ScriptPicker.svelte

@@ -22,6 +22,7 @@ export let kinds = ['script'];
 export let disabled = false;
 export let allowRefresh = false;
 export let allowEdit = true;
+export let allowView = true;
 let items = [];
 let drawerViewer;
 let drawerFlowViewer;
@@ -128,16 +129,18 @@ let darkMode = false;
 						href="{base}/flows/edit/{scriptPath}">Edit</Button
 					>
 				{/if}
-				<Button
-					color="light"
-					size="xs"
-					variant="border"
-					on:click={async () => {
-						drawerFlowViewer.openDrawer()
-					}}
-				>
-					View
-				</Button>
+				{#if allowView}
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						on:click={async () => {
+							drawerFlowViewer.openDrawer()
+						}}
+					>
+						View
+					</Button>
+				{/if}
 			</div>
 		{:else if itemKind == 'app'}
 			<div class="flex gap-2">
@@ -153,16 +156,18 @@ let darkMode = false;
 						Edit
 					</Button>
 				{/if}
-				<Button
-					color="light"
-					size="xs"
-					variant="border"
-					target="_blank"
-					startIcon={{ icon: Code }}
-					href="{base}/apps/get/{scriptPath}"
-				>
-					View
-				</Button>
+				{#if allowView}
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						target="_blank"
+						startIcon={{ icon: Code }}
+						href="{base}/apps/get/{scriptPath}"
+					>
+						View
+					</Button>
+				{/if}
 			</div>
 		{:else}
 			<div class="flex gap-2">
@@ -178,20 +183,22 @@ let darkMode = false;
 						Edit
 					</Button>
 				{/if}
-				<Button
-					color="light"
-					size="xs"
-					variant="border"
-					startIcon={{ icon: Code }}
-					on:click={async () => {
-						const { language, content } = await getScriptByPath(scriptPath ?? '')
-						code = content
-						lang = language
-						drawerViewer.openDrawer()
-					}}
-				>
-					View
-				</Button>
+				{#if allowView}
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						startIcon={{ icon: Code }}
+						on:click={async () => {
+							const { language, content } = await getScriptByPath(scriptPath ?? '')
+							code = content
+							lang = language
+							drawerViewer.openDrawer()
+						}}
+					>
+						View
+					</Button>
+				{/if}
 			</div>
 		{/if}
 	{/if}

package/package/components/ScriptPicker.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         allowRefresh?: boolean | undefined;
         allowEdit?: boolean | undefined;
+        allowView?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/package/components/ScriptVersionHistory.svelte

@@ -135,7 +135,7 @@ let previousHash = undefined;
 										color="blue"
 										buttonType="button"
 										btnClasses="!p-1 !w-[34px] !ml-1"
-										aria-label="Save Deployment Message"
+										aria-label="Save deployment message"
 										on:click={() => {
 											updateDeploymentMsg(selectedVersion?.script_hash)
 										}}

package/package/components/Section.svelte

@@ -7,48 +7,51 @@ export let tooltip = undefined;
 export let eeOnly = false;
 export let small = false;
 export let collapsable = false;
-let collapsed = true;
+export let collapsed = true;
+export let headless = false;
 </script>
 
 <div class="w-full">
-	<div class="flex flex-row justify-between items-center mb-2">
-		<h2
-			class={twMerge(
-				'font-semibold flex flex-row items-center gap-1',
-				small ? 'text-sm' : 'text-base'
-			)}
-		>
-			{#if collapsable}
-				<button class="flex items-center gap-1" on:click={() => (collapsed = !collapsed)}>
-					{#if collapsed}
-						<ChevronRight size={16} />
-					{:else}
-						<ChevronDown size={16} />
-					{/if}
+	{#if !headless}
+		<div class="flex flex-row justify-between items-center mb-2">
+			<h2
+				class={twMerge(
+					'font-semibold flex flex-row items-center gap-1',
+					small ? 'text-sm' : 'text-base'
+				)}
+			>
+				{#if collapsable}
+					<button class="flex items-center gap-1" on:click={() => (collapsed = !collapsed)}>
+						{#if collapsed}
+							<ChevronRight size={16} />
+						{:else}
+							<ChevronDown size={16} />
+						{/if}
+						{label}
+					</button>
+				{:else}
 					{label}
-				</button>
-			{:else}
-				{label}
-			{/if}
+				{/if}
 
-			<slot name="header" />
-			{#if tooltip}
-				<Tooltip>{tooltip}</Tooltip>
-			{/if}
-			{#if eeOnly}
-				{#if !$enterpriseLicense}
-					<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap ml-8">
-						<AlertTriangle size={16} />
-						EE only <Tooltip>Enterprise Edition only feature</Tooltip>
-					</div>
+				<slot name="header" />
+				{#if tooltip}
+					<Tooltip>{tooltip}</Tooltip>
 				{/if}
+				{#if eeOnly}
+					{#if !$enterpriseLicense}
+						<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap ml-8">
+							<AlertTriangle size={16} />
+							EE only <Tooltip>Enterprise Edition only feature</Tooltip>
+						</div>
+					{/if}
+				{/if}
+			</h2>
+			<slot name="action" />
+			{#if collapsable && collapsed}
+				<slot name="badge" />
 			{/if}
-		</h2>
-		<slot name="action" />
-		{#if collapsable && collapsed}
-			<slot name="badge" />
-		{/if}
-	</div>
+		</div>
+	{/if}
 	<div class={collapsable && collapsed ? `hidden ${$$props.class}` : `${$$props.class}`}>
 		<slot />
 	</div>

package/package/components/Section.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         eeOnly?: boolean | undefined;
         small?: boolean | undefined;
         collapsable?: boolean | undefined;
+        collapsed?: boolean | undefined;
+        headless?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/ServiceLogsInner.svelte

@@ -515,7 +515,7 @@ function allLogsOrQueryResults(allLogs, countsPerHost) {
 											<div
 												class="text-sm pt-2 pl-0.5 whitespace-nowrap"
 												title={hn}
-												style="width: 90px;">{truncateRev(hn, 8)}</div
+												style="width: 90px;">{truncateRev(hn, countsPerHost || loadingLogs ? 40 : 8)}</div
 											>
 											{#if loadingLogCounts}
 												<Loader2 size={15} class="animate-spin" />

package/package/components/SimpleEditor.svelte

@@ -187,6 +187,8 @@ async function loadMonaco() {
     editor = meditor.create(divEl, {
         ...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
         model,
+        lineDecorationsWidth: 6,
+        lineNumbersMinChars: 2,
         // overflowWidgetsDomNode: widgets,
         fontSize: small ? 12 : 14
     });

package/package/components/Subsection.svelte

@@ -0,0 +1,52 @@
+<script>import { enterpriseLicense } from '../stores';
+import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-svelte';
+import Tooltip from './Tooltip.svelte';
+import { twMerge } from 'tailwind-merge';
+export let label = undefined;
+export let tooltip = undefined;
+export let eeOnly = false;
+export let collapsable = false;
+export let collapsed = true;
+export let headless = false;
+</script>
+
+<div class="w-full">
+	{#if !headless}
+		<div class="flex flex-row justify-between items-center mb-1">
+			<h3 class={twMerge('font-semibold flex flex-row items-center gap-2', 'text-sm')}>
+				{#if collapsable}
+					<button class="flex items-center gap-1" on:click={() => (collapsed = !collapsed)}>
+						{#if collapsed}
+							<ChevronRight size={16} />
+						{:else}
+							<ChevronDown size={16} />
+						{/if}
+						{label}
+					</button>
+				{:else}
+					{label}
+				{/if}
+
+				<slot name="header" />
+				{#if tooltip}
+					<Tooltip>{tooltip}</Tooltip>
+				{/if}
+				{#if eeOnly}
+					{#if !$enterpriseLicense}
+						<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap ml-8">
+							<AlertTriangle size={16} />
+							EE only <Tooltip>Enterprise Edition only feature</Tooltip>
+						</div>
+					{/if}
+				{/if}
+			</h3>
+			<slot name="action" />
+			{#if collapsable && collapsed}
+				<slot name="badge" />
+			{/if}
+		</div>
+	{/if}
+	<div class={collapsable && collapsed ? `hidden ${$$props.class}` : `${$$props.class}`}>
+		<slot />
+	</div>
+</div>

package/package/components/Subsection.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string | undefined;
+        tooltip?: string | undefined;
+        eeOnly?: boolean | undefined;
+        collapsable?: boolean | undefined;
+        collapsed?: boolean | undefined;
+        headless?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        action: {};
+        badge: {};
+        default: {};
+    };
+};
+export type SubsectionProps = typeof __propDef.props;
+export type SubsectionEvents = typeof __propDef.events;
+export type SubsectionSlots = typeof __propDef.slots;
+export default class Subsection extends SvelteComponent<SubsectionProps, SubsectionEvents, SubsectionSlots> {
+}
+export {};

package/package/components/SuperadminSettings.svelte

@@ -49,7 +49,7 @@ async function listUsers(activeOnly) {
 }
 $: listUsers(activeOnly);
 let tab = 'users';
-$: $instanceSettingsSelectedTab, tab = $instanceSettingsSelectedTab;
+$: $instanceSettingsSelectedTab, (tab = $instanceSettingsSelectedTab);
 $: tab, instanceSettingsSelectedTab.set(tab);
 let nbDisplayed = 50;
 let instanceSettings;
@@ -122,7 +122,7 @@ async function updateName(name, email) {
 			</div>
 			<div class="pt-4 h-full">
 				<Tabs bind:selected={tab}>
-					<Tab value="users">Global users</Tab>
+					<Tab value="users">Users</Tab>
 					{#each settingsKeys as category}
 						<Tab value={category}>{category}</Tab>
 					{/each}
@@ -241,7 +241,7 @@ async function updateName(name, email) {
 														{/if}
 														<td>
 															<ToggleButtonGroup
-																selected={super_admin ? "super_admin" : devops ? "devops" : "user"}
+																selected={super_admin ? 'super_admin' : devops ? 'devops' : 'user'}
 																on:selected={async (e) => {
 																	if (email == $userStore?.email) {
 																		sendUserToast('You cannot demote yourself', true)
@@ -249,9 +249,9 @@ async function updateName(name, email) {
 																		return
 																	}
 
-																	let role = e.detail;
+																	let role = e.detail
 
-																	if (role === "super_admin") {
+																	if (role === 'super_admin') {
 																		await UserService.globalUserUpdate({
 																			email,
 																			requestBody: {
@@ -260,7 +260,7 @@ async function updateName(name, email) {
 																			}
 																		})
 																	}
-																	if (role === "devops") {
+																	if (role === 'devops') {
 																		await UserService.globalUserUpdate({
 																			email,
 																			requestBody: {
@@ -268,9 +268,8 @@ async function updateName(name, email) {
 																				is_devops: true
 																			}
 																		})
-
 																	}
-																	if (role === "user") {
+																	if (role === 'user') {
 																		await UserService.globalUserUpdate({
 																			email,
 																			requestBody: {
@@ -283,15 +282,20 @@ async function updateName(name, email) {
 																	listUsers(activeOnly)
 																}}
 															>
-																<ToggleButton value={"user"} size="xs" label="User" />
-																<ToggleButton value={"devops"} size="xs" label="Devops" tooltip="Devops is a role that grants visibilty similar to that of a super admin, but without giving all rights. For example devops users can see service logs and crtical alerts. You can think of it as a 'readonly' super admin" />
-																<ToggleButton value={"super_admin"} size="xs" label="Superadmin" />
+																<ToggleButton value={'user'} size="xs" label="User" />
+																<ToggleButton
+																	value={'devops'}
+																	size="xs"
+																	label="Devops"
+																	tooltip="Devops is a role that grants visibilty similar to that of a super admin, but without giving all rights. For example devops users can see service logs and crtical alerts. You can think of it as a 'readonly' super admin"
+																/>
+																<ToggleButton value={'super_admin'} size="xs" label="Superadmin" />
 															</ToggleButtonGroup>
 														</td>
 														<td>
 															<div class="flex flex-row gap-x-1 justify-end">
 																<InstanceNameEditor
-																	login_type={login_type}
+																	{login_type}
 																	value={name}
 																	{username}
 																	{email}
@@ -340,7 +344,13 @@ async function updateName(name, email) {
 							</div>
 						</TabContent>
 						<TabContent value="" values={settingsKeys}>
-							<InstanceSettings bind:this={instanceSettings} hideTabs hideSave {tab} {closeDrawer}/>
+							<InstanceSettings
+								bind:this={instanceSettings}
+								hideTabs
+								hideSave
+								{tab}
+								{closeDrawer}
+							/>
 						</TabContent>
 					</svelte:fragment>
 				</Tabs>