windmill-components 1.383.8 → 1.389.1

package/package/components/FlowBuilder.svelte

@@ -35,6 +35,7 @@ import { MenuItem } from '@rgossiaux/svelte-headlessui';
 import { twMerge } from 'tailwind-merge';
 import CustomPopover from './CustomPopover.svelte';
 import Summary from './Summary.svelte';
+import FlowYamlEditor from './flows/header/FlowYamlEditor.svelte';
 export let initialPath = '';
 export let pathStoreInit = undefined;
 export let newFlow;
@@ -46,6 +47,7 @@ export let flowStateStore;
 export let savedFlow = undefined;
 export let diffDrawer = undefined;
 export let customUi = {};
+export let disableAi = false;
 $: setContext('customUi', customUi);
 const dispatch = createEventDispatcher();
 async function createSchedule(path) {
@@ -161,6 +163,7 @@ async function saveDraft(forceSave = false) {
     }
     catch (error) {
         sendUserToast(`Error while saving the flow as a draft: ${error.body || error.message}`, true);
+        dispatch('saveDraftError', error);
     }
     loadingDraft = false;
 }
@@ -271,6 +274,7 @@ async function saveFlow(deploymentMsg) {
         dispatch('deploy', $pathStore);
     }
     catch (err) {
+        dispatch('deployError', err);
         sendUserToast(`The flow could not be saved: ${err.body}`, true);
         loadingSave = false;
     }
@@ -827,6 +831,7 @@ $: $copilotCurrentStepStore === undefined && blurCopilot();
 let renderCount = 0;
 let flowTutorials = undefined;
 let jsonViewerDrawer = undefined;
+let yamlEditorDrawer = undefined;
 let flowHistory = undefined;
 export function triggerTutorial() {
     const urlParams = new URLSearchParams(window.location.search);
@@ -860,6 +865,11 @@ function onCustomUiChange(customUi) {
                     displayName: 'Export',
                     icon: FileJson,
                     action: () => jsonViewerDrawer?.openDrawer()
+                },
+                {
+                    displayName: 'Edit in YAML',
+                    icon: FileJson,
+                    action: () => yamlEditorDrawer?.openDrawer()
                 }
             ]
             : [])
@@ -879,6 +889,7 @@ let msgInput = undefined;
 		{#if $pathStore}
 			<FlowHistory bind:this={flowHistory} path={$pathStore} on:historyRestore />
 		{/if}
+		<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
 		<FlowImportExportMenu bind:drawer={jsonViewerDrawer} />
 		<FlowCopilotInputsModal
 			on:confirmed={async () => {
@@ -903,7 +914,10 @@ let msgInput = undefined;
 					<div transition:fade class="absolute inset-0 bg-gray-500 bg-opacity-75 z-[900] !m-0" />
 				{/if}
 				<div class="flex w-full max-w-md gap-4 items-center">
-					<Summary bind:value={$flowStore.summary} />
+					<Summary
+						disabled={customUi?.topBar?.editableSummary == false}
+						bind:value={$flowStore.summary}
+					/>
 
 					<UndoRedo
 						undoProps={{ disabled: $history.index === 0 }}
@@ -1048,7 +1062,7 @@ let msgInput = undefined;
 							</div>
 						</Button>
 					{/if}
-					{#if customUi?.topBar?.aiBuilder != false}
+					{#if !disableAi && customUi?.topBar?.aiBuilder != false}
 						<FlowCopilotStatus
 							{copilotLoading}
 							bind:copilotStatus
@@ -1112,7 +1126,7 @@ let msgInput = undefined;
 			<!-- metadata -->
 			{#if $flowStateStore}
 				<FlowEditor
-					enableAi={customUi?.stepInputs?.ai != false}
+					disableAi={disableAi || customUi?.stepInputs?.ai == false}
 					disableSettings={customUi?.settingsPanel === false}
 					{loading}
 					on:reload={() => {

package/package/components/FlowBuilder.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
         }) | undefined;
         diffDrawer?: DiffDrawer | undefined;
         customUi?: FlowBuilderWhitelabelCustomUi | undefined;
+        disableAi?: boolean | undefined;
         computeUnlockedSteps?: ((flow: Flow) => {
             [k: string]: string;
         }) | undefined;
@@ -30,7 +31,9 @@ declare const __propDef: {
         saveInitial: CustomEvent<any>;
         saveDraftOnlyAtNewPath: CustomEvent<any>;
         saveDraft: CustomEvent<any>;
+        saveDraftError: CustomEvent<any>;
         deploy: CustomEvent<any>;
+        deployError: CustomEvent<any>;
         details: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowGraphViewerStep.svelte

@@ -186,7 +186,7 @@ let codeViewer;
 						</Button>
 					</div>
 					<iframe
-						class="w-full grow text-sm"
+						class="w-full grow text-sm h-full"
 						title="embedded script from hub"
 						frameborder="0"
 						src="{$hubBaseUrlStore}/embed/script/{stepDetail.value?.path?.substring(4)}"

package/package/components/FlowStatusViewer.svelte

@@ -11,6 +11,7 @@ export let hideFlowResult = false;
 export let hideTimeline = false;
 export let hideDownloadInGraph = false;
 export let hideNodeDefinition = false;
+export let hideJobId = false;
 export let isOwner = false;
 export let wideResults = false;
 let lastJobId = jobId;
@@ -22,7 +23,8 @@ setContext('FlowStatusViewer', {
     retryStatus,
     hideDownloadInGraph,
     hideNodeDefinition,
-    hideTimeline
+    hideTimeline,
+    hideJobId
 });
 function loadOwner(path) {
     isOwner = loadIsOwner(path, $userStore, workspaceId ?? $workspaceStore);

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         hideTimeline?: boolean | undefined;
         hideDownloadInGraph?: boolean | undefined;
         hideNodeDefinition?: boolean | undefined;
+        hideJobId?: boolean | undefined;
         isOwner?: boolean | undefined;
         wideResults?: boolean | undefined;
     };

package/package/components/FlowStatusViewerInner.svelte

@@ -818,8 +818,11 @@ let wrapperHeight = 0;
 										selectedNode = 'end'
 										stepDetail = 'end'
 									} else {
-										selectedNode = e.detail
-										stepDetail = e.detail
+										const mod = dfs(job?.raw_flow?.modules ?? [], (m) => m).find(
+											(m) => m?.id === e?.detail
+										)
+										stepDetail = mod
+										selectedNode = e?.detail
 									}
 								} else {
 									stepDetail = e.detail

package/package/components/FlowViewerInner.svelte

@@ -6,13 +6,9 @@ import { ArrowDown, Clipboard } from 'lucide-svelte';
 import YAML from 'yaml';
 import { yaml } from 'svelte-highlight/languages';
 import HighlightTheme from './HighlightTheme.svelte';
+import { filteredContentForExport } from './flows/utils';
 export let flow;
-$: flowFiltered = {
-    summary: flow.summary,
-    description: flow.description,
-    value: flow.value,
-    schema: flow.schema
-};
+$: flowFiltered = filteredContentForExport(flow);
 let rawType = 'yaml';
 function trimStringToLines(inputString, maxLines = 100) {
     const lines = inputString?.split('\n') ?? [];
@@ -57,7 +53,7 @@ let maxLines = 100;
 					variant="border"
 					size="xs"
 					startIcon={{ icon: Clipboard }}
-					btnClasses="absolute top-2 right-2 w-min"
+					btnClasses="absolute top-2 right-2 w-min z-20"
 				>
 					Copy content
 				</Button>

package/package/components/FormatOnSave.svelte

@@ -1,33 +1,16 @@
-<script>import { Paintbrush } from 'lucide-svelte';
-import Button from './common/button/Button.svelte';
-import { formatOnSave } from '../stores';
-import Popover from './Popover.svelte';
-import { getLocalSetting, storeLocalSetting } from '../utils';
-import PaintbrushOff from './icons/PaintbrushOff.svelte';
-const SETTING_NAME = 'formatOnSave';
-function loadSetting() {
-    $formatOnSave = (getLocalSetting(SETTING_NAME) ?? 'true') == 'true';
-}
+<script>import { FORMAT_ON_SAVE_SETTING_NAME, formatOnSave } from '../stores';
+import { storeLocalSetting } from '../utils';
+import Toggle from './Toggle.svelte';
 function storeSetting() {
-    $formatOnSave = !$formatOnSave;
-    storeLocalSetting(SETTING_NAME, $formatOnSave.toString());
+    storeLocalSetting(FORMAT_ON_SAVE_SETTING_NAME, $formatOnSave.toString());
 }
-loadSetting();
 </script>
 
-<Popover>
-	<svelte:fragment slot="text"
-		>{$formatOnSave ? 'Disable' : 'Enable'} auto-formatting</svelte:fragment
-	>
-	<Button
-		size="xs"
-		color="light"
-		startIcon={{
-			icon: !$formatOnSave ? PaintbrushOff : Paintbrush
-		}}
-		btnClasses="text-tertiary"
-		on:click={() => {
-			storeSetting()
-		}}
-	/>
-</Popover>
+<Toggle
+	size="xs"
+	bind:checked={$formatOnSave}
+	on:change={() => {
+		storeSetting()
+	}}
+	options={{ right: 'auto-formatting' }}
+/>

package/package/components/GraphqlSchemaViewer.svelte

@@ -1,6 +1,6 @@
 <script>import { BROWSER } from 'esm-env';
 import { editor as meditor } from 'monaco-editor';
-import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
 import { onDestroy, onMount } from 'svelte';
 let divEl = null;
 let editor;

package/package/components/GraphqlSchemaViewer.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution';
+import '@codingame/monaco-vscode-standalone-languages';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/HighlightCode.svelte

@@ -8,6 +8,7 @@ import javascript from 'svelte-highlight/languages/javascript';
 import sql from 'svelte-highlight/languages/sql';
 import powershell from 'svelte-highlight/languages/powershell';
 import php from 'svelte-highlight/languages/php';
+import rust from 'svelte-highlight/languages/rust';
 import { Button } from './common';
 import { copyToClipboard } from '../utils';
 import { ClipboardCopy } from 'lucide-svelte';
@@ -47,6 +48,8 @@ function getLang(lang) {
             return powershell;
         case 'php':
             return php;
+        case 'rust':
+            return rust;
         default:
             return typescript;
     }

package/package/components/InstanceNameEditor.svelte

@@ -0,0 +1,64 @@
+<script>import { Pencil } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import Button from './common/button/Button.svelte';
+import Popup from './common/popup/Popup.svelte';
+import { offset, flip, shift } from 'svelte-floating-ui/dom';
+import ChangeInstanceUsernameInner from './ChangeInstanceUsernameInner.svelte';
+export let value;
+export let email;
+export let username = undefined;
+export let automateUsernameCreation = false;
+const dispatch = createEventDispatcher();
+function save() {
+    dispatch('save', value);
+}
+</script>
+
+<Popup
+	let:close
+	floatingConfig={{
+		strategy: 'fixed',
+		placement: 'left-end',
+		middleware: [offset(8), flip(), shift()]
+	}}
+>
+	<svelte:fragment slot="button">
+		<Button nonCaptureEvent={true} size="xs" color="light" endIcon={{ icon: Pencil }}>Edit</Button>
+	</svelte:fragment>
+	<div class="flex flex-col gap-8 max-w-sm">
+		{#if automateUsernameCreation && username}
+			<ChangeInstanceUsernameInner {email} {username} on:renamed />
+		{/if}
+		<label class="block text-primary">
+			<div class="pb-1 text-xs text-secondary">Name</div>
+			<div class="flex w-full">
+				<input
+					type="text"
+					bind:value
+					class="!w-auto grow"
+					on:click|stopPropagation={() => {}}
+					on:keydown|stopPropagation
+					on:keypress|stopPropagation={({ key }) => {
+						if (key === 'Enter') {
+							save()
+							close(null)
+						}
+					}}
+				/>
+			</div>
+			<Button
+				size="xs"
+				color="blue"
+				buttonType="button"
+				btnClasses="mt-2 "
+				aria-label="Save ID"
+				on:click={() => {
+					save()
+					close(null)
+				}}
+			>
+				Update name
+			</Button>
+		</label>
+	</div>
+</Popup>

package/package/components/InstanceNameEditor.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string | undefined;
+        email: string;
+        username?: string | undefined;
+        automateUsernameCreation?: boolean | undefined;
+    };
+    events: {
+        renamed: CustomEvent<any>;
+        keydown: KeyboardEvent;
+        save: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InstanceNameEditorProps = typeof __propDef.props;
+export type InstanceNameEditorEvents = typeof __propDef.events;
+export type InstanceNameEditorSlots = typeof __propDef.slots;
+export default class InstanceNameEditor extends SvelteComponent<InstanceNameEditorProps, InstanceNameEditorEvents, InstanceNameEditorSlots> {
+}
+export {};

package/package/components/LightweightArgInput.svelte

@@ -248,11 +248,9 @@ function addItemByItemsType() {
 								dispatch('focus')
 							}}
 							type="number"
-							class={twMerge(
-								valid && error == ''
-									? ''
-									: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'
-							)}
+							class={valid && error == ''
+								? ''
+								: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}
 							placeholder={placeholder ?? defaultValue ?? ''}
 							bind:value
 							min={extra['min']}
@@ -264,12 +262,9 @@ function addItemByItemsType() {
 						on:pointerdown={(e) => {
 							e?.stopPropagation()
 						}}
-						class={twMerge(
-							valid && error == ''
-								? ''
-								: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30',
-							'w-full'
-						)}
+						class={valid && error == ''
+							? ''
+							: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}
 						bind:checked={value}
 					/>
 					{#if type == 'boolean' && value == undefined}

package/package/components/LogViewer.svelte

@@ -24,6 +24,8 @@ export let jobId = undefined;
 export let tag;
 export let small = false;
 export let drawerOpen = false;
+export let noMaxH = false;
+export let noAutoScroll = false;
 // @ts-ignore
 const ansi_up = new AnsiUp();
 let scroll = true;
@@ -118,17 +120,19 @@ function showMoreTruncate(len) {
 <Drawer bind:this={logViewer} bind:open={drawerOpen} size="900px">
 	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
 		<svelte:fragment slot="actions">
-			<Button
-				href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
-				download="windmill_logs_{jobId}.txt"
-				color="light"
-				size="xs"
-				startIcon={{
-					icon: Download
-				}}
-			>
-				Download
-			</Button>
+			{#if jobId}
+				<Button
+					href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
+					download="windmill_logs_{jobId}.txt"
+					color="light"
+					size="xs"
+					startIcon={{
+						icon: Download
+					}}
+				>
+					Download
+				</Button>
+			{/if}
 
 			<Button
 				on:click={() => copyToClipboard(content)}
@@ -160,28 +164,32 @@ function showMoreTruncate(len) {
 <div class="relative w-full h-full {wrapperClass}">
 	<div
 		bind:this={div}
-		class="w-full h-full overflow-auto relative bg-surface-secondary max-h-screen"
+		class="w-full h-full overflow-auto relative bg-surface-secondary {noMaxH ? '' : 'max-h-screen'}"
 	>
 		<div class="sticky z-10 top-0 right-0 w-full flex flex-row-reverse justify-between text-sm">
 			<div class="flex gap-2 pl-0.5 bg-surface-secondary">
-				<div class="flex items-center">
-					<a
-						class="text-primary pb-0.5"
-						target="_blank"
-						href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
-						download="windmill_logs_{jobId}.txt"
-						><Download size="14" />
-					</a>
-				</div>
+				{#if jobId}
+					<div class="flex items-center">
+						<a
+							class="text-primary pb-0.5"
+							target="_blank"
+							href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
+							download="windmill_logs_{jobId}.txt"
+							><Download size="14" />
+						</a>
+					</div>
+				{/if}
 				<button on:click={logViewer.openDrawer}><Expand size="12" /></button>
-				<div
-					class="{small ? '' : 'py-2'} pr-2 {small
-						? '!text-2xs'
-						: '!text-xs'} flex gap-2 text-tertiary items-center"
-				>
-					Auto scroll
-					<input class="windmillapp" type="checkbox" bind:checked={scroll} />
-				</div>
+				{#if !noAutoScroll}
+					<div
+						class="{small ? '' : 'py-2'} pr-2 {small
+							? '!text-2xs'
+							: '!text-xs'} flex gap-2 text-tertiary items-center"
+					>
+						Auto scroll
+						<input class="windmillapp" type="checkbox" bind:checked={scroll} />
+					</div>
+				{/if}
 			</div>
 		</div>
 		{#if isLoading}

package/package/components/LogViewer.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         tag: string | undefined;
         small?: boolean | undefined;
         drawerOpen?: boolean | undefined;
+        noMaxH?: boolean | undefined;
+        noAutoScroll?: boolean | undefined;
         scrollToBottom?: (() => void) | undefined;
     };
     events: {

package/package/components/ObjectResourceInput.svelte

@@ -12,7 +12,7 @@ export let editor = undefined;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
-let path = '';
+export let path = '';
 function resourceToValue() {
     if (path) {
         value = `$res:${path}`;

package/package/components/ObjectResourceInput.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         selectFirst?: boolean | undefined;
         defaultValue: any;
         editor?: SimpleEditor | undefined;
+        path?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/Path.svelte

@@ -86,7 +86,7 @@ export async function reset() {
         while (await pathExists(metaToPath(newMeta), kind)) {
             disabled = true;
             error = 'finding an available name...';
-            newMeta.name = random_adj() + '_' + fullNamePlaceholder ?? namePlaceholder;
+            newMeta.name = random_adj() + '_' + (fullNamePlaceholder ?? namePlaceholder);
         }
         error = '';
         disabled = false;
@@ -232,7 +232,7 @@ async function addFolder() {
 function setDirty() {
     !dirty && (dirty = true);
 }
-const openSearchWithPrefilledText = getContext("openSearchWithPrefilledText");
+const openSearchWithPrefilledText = getContext('openSearchWithPrefilledText');
 </script>
 
 <Drawer bind:this={newFolder}>
@@ -427,7 +427,7 @@ const openSearchWithPrefilledText = getContext("openSearchWithPrefilledText");
 					variant="border"
 					color="dark"
 					on:click={() => {
-						openSearchWithPrefilledText("#")
+						openSearchWithPrefilledText('#')
 					}}
 					startIcon={{ icon: SearchCode }}
 				>