windmill-components 1.382.1 → 1.382.7

package/package/base.d.ts

@@ -1 +1 @@
-export declare const base: string;
+export declare let base: string;

package/package/base.js

@@ -1 +1 @@
-export const base = import.meta.env.VITE_BASE_URL ?? '';
+export let base = import.meta.env.VITE_BASE_URL ?? '';

package/package/components/EditorBar.svelte

@@ -43,6 +43,7 @@ export let diffEditor = undefined;
 export let args;
 export let noHistory = false;
 export let saveToWorkspace = false;
+export let customUi = {};
 let contextualVariablePicker;
 let variablePicker;
 let resourcePicker;
@@ -284,6 +285,7 @@ let historyBrowserDrawerOpen = false;
 		{/if}
 	</DrawerContent>
 </Drawer>
+
 <ItemPicker
 	bind:this={contextualVariablePicker}
 	pickCallback={(path, name) => {
@@ -484,7 +486,7 @@ $res = json_decode(curl_exec($ch));`)
 			class="rounded-full w-2 h-2 mx-2 {validCode ? 'bg-green-300' : 'bg-red-300'}"
 		/>
 		<div class="flex items-center gap-0.5">
-			{#if showContextVarPicker}
+			{#if showContextVarPicker && customUi?.contextVar != false}
 				<Button
 					title="Add context variable"
 					color="light"
@@ -497,7 +499,7 @@ $res = json_decode(curl_exec($ch));`)
 					>+Context Var
 				</Button>
 			{/if}
-			{#if showVarPicker}
+			{#if showVarPicker && customUi?.variable != false}
 				<Button
 					title="Add variable"
 					color="light"
@@ -527,7 +529,7 @@ $res = json_decode(curl_exec($ch));`)
 				</Button>
 			{/if}
 
-			{#if showResourceTypePicker}
+			{#if showResourceTypePicker && customUi?.type != false}
 				<Button
 					title="Add resource type"
 					btnClasses="!font-medium text-tertiary"
@@ -555,37 +557,41 @@ $res = json_decode(curl_exec($ch));`)
 				Reset
 			</Button>
 
-			{#if lang == 'deno' || lang == 'python3' || lang == 'go' || lang == 'bash'}
-				<Button
-					btnClasses="!font-medium text-tertiary"
-					size="xs"
-					spacingSize="md"
-					color="light"
-					on:click={() => editor?.reloadWebsocket()}
-					startIcon={{
-						icon: RotateCw,
-						classes: websocketAlive[lang] == false ? 'animate-spin' : ''
-					}}
-					title="Reload assistants"
-				>
-					{#if !iconOnly}
-						Assistants
-					{/if}
-					<span class="-my-1">
-						{#if lang == 'deno'}
-							(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
-						{:else if lang == 'go'}
-							(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
-						{:else if lang == 'python3'}
-							(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
-							<span class={websocketAlive.ruff ? 'green' : 'text-red-700'}>Ruff</span>)
-						{:else if lang == 'bash'}
-							(<span class={websocketAlive.shellcheck ? 'green' : 'text-red-700'}>Shellcheck</span>)
+			{#if customUi?.assistants != false}
+				{#if lang == 'deno' || lang == 'python3' || lang == 'go' || lang == 'bash'}
+					<Button
+						btnClasses="!font-medium text-tertiary"
+						size="xs"
+						spacingSize="md"
+						color="light"
+						on:click={() => editor?.reloadWebsocket()}
+						startIcon={{
+							icon: RotateCw,
+							classes: websocketAlive[lang] == false ? 'animate-spin' : ''
+						}}
+						title="Reload assistants"
+					>
+						{#if !iconOnly}
+							Assistants
 						{/if}
-					</span>
-				</Button>
+						<span class="-my-1">
+							{#if lang == 'deno'}
+								(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
+							{:else if lang == 'go'}
+								(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
+							{:else if lang == 'python3'}
+								(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
+								<span class={websocketAlive.ruff ? 'green' : 'text-red-700'}>Ruff</span>)
+							{:else if lang == 'bash'}
+								(<span class={websocketAlive.shellcheck ? 'green' : 'text-red-700'}>Shellcheck</span
+								>)
+							{/if}
+						</span>
+					</Button>
+				{/if}
 			{/if}
-			{#if collabMode}
+
+			{#if collabMode && customUi?.multiplayer != false}
 				<div class="flex items-center px-3">
 					<Toggle
 						options={{ right: '' }}
@@ -619,11 +625,15 @@ $res = json_decode(curl_exec($ch));`)
 				</div>
 			{/if}
 
-			<FormatOnSave />
-
-			<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
-
-			<CodeCompletionStatus />
+			{#if customUi?.autoformatting != false}
+				<FormatOnSave />
+			{/if}
+			{#if customUi?.aiGen != false}
+				<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
+			{/if}
+			{#if customUi?.aiFix != false}
+				<CodeCompletionStatus />
+			{/if}
 		</div>
 	</div>
 
@@ -642,7 +652,7 @@ $res = json_decode(curl_exec($ch));`)
 				History
 			</Button>
 		{/if}
-		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
+		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS && customUi?.library != false}
 			<Button
 				btnClasses="!font-medium text-tertiary"
 				size="xs"

package/package/components/EditorBar.svelte.d.ts

@@ -3,6 +3,7 @@ export declare const EDITOR_BAR_WIDTH_THRESHOLD = 1044;
 import type Editor from './Editor.svelte';
 import type { SupportedLanguage } from '../common';
 import type DiffEditor from './DiffEditor.svelte';
+import type { EditorBarUi } from './custom_ui';
 declare const __propDef: {
     props: {
         lang: SupportedLanguage | 'bunnative' | undefined;
@@ -28,6 +29,7 @@ declare const __propDef: {
         args: Record<string, any>;
         noHistory?: boolean | undefined;
         saveToWorkspace?: boolean | undefined;
+        customUi?: EditorBarUi | undefined;
     };
     events: {
         toggleCollabMode: CustomEvent<any>;

package/package/components/FlowBuilder.svelte

@@ -330,7 +330,8 @@ setContext('FlowEditorContext', {
     testStepStore,
     saveDraft,
     initialPath,
-    flowInputsStore: writable({})
+    flowInputsStore: writable({}),
+    customUi
 });
 async function loadSchedule() {
     loadFlowSchedule(initialPath, $workspaceStore)
@@ -403,17 +404,19 @@ function generateIds() {
     ];
 }
 const dropdownItems = [];
-if (savedFlow?.draft_only === false || savedFlow?.draft_only === undefined) {
-    dropdownItems.push({
-        label: 'Exit & see details',
-        onClick: () => dispatch('details', $pathStore)
-    });
-}
-if (!newFlow) {
-    dropdownItems.push({
-        label: 'Fork',
-        onClick: () => window.open(`/flows/add?template=${initialPath}`)
-    });
+if (customUi.topBar?.extraDeployOptions != false) {
+    if (savedFlow?.draft_only === false || savedFlow?.draft_only === undefined) {
+        dropdownItems.push({
+            label: 'Exit & see details',
+            onClick: () => dispatch('details', $pathStore)
+        });
+    }
+    if (!newFlow) {
+        dropdownItems.push({
+            label: 'Fork',
+            onClick: () => window.open(`/flows/add?template=${initialPath}`)
+        });
+    }
 }
 let flowCopilotContext = {
     drawerStore: writable(undefined),

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

@@ -3,7 +3,7 @@ import { type Flow, type OpenFlow } from '../gen';
 import { type Writable } from 'svelte/store';
 import type { FlowState } from './flows/flowState';
 import type DiffDrawer from './DiffDrawer.svelte';
-import type { WhitelabelCustomUi } from './custom_ui';
+import type { FlowBuilderWhitelabelCustomUi } from './custom_ui';
 declare const __propDef: {
     props: {
         initialPath?: string | undefined;
@@ -18,7 +18,7 @@ declare const __propDef: {
             draft?: Flow | undefined;
         }) | undefined;
         diffDrawer?: DiffDrawer | undefined;
-        customUi?: WhitelabelCustomUi | undefined;
+        customUi?: FlowBuilderWhitelabelCustomUi | undefined;
         computeUnlockedSteps?: ((flow: Flow) => {
             [k: string]: string;
         }) | undefined;

package/package/components/FlowStatusViewer.svelte

@@ -8,6 +8,9 @@ export let workspaceId = undefined;
 export let flowStateStore = writable({});
 export let selectedJobStep = undefined;
 export let hideFlowResult = false;
+export let hideTimeline = false;
+export let hideDownloadInGraph = false;
+export let hideNodeDefinition = false;
 export let isOwner = false;
 export let wideResults = false;
 let lastJobId = jobId;
@@ -16,7 +19,10 @@ let suspendStatus = writable({});
 setContext('FlowStatusViewer', {
     flowStateStore,
     suspendStatus,
-    retryStatus
+    retryStatus,
+    hideDownloadInGraph,
+    hideNodeDefinition,
+    hideTimeline
 });
 function loadOwner(path) {
     isOwner = loadIsOwner(path, $userStore, workspaceId ?? $workspaceStore);

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

@@ -8,6 +8,9 @@ declare const __propDef: {
         flowStateStore?: Writable<FlowState> | undefined;
         selectedJobStep?: string | undefined;
         hideFlowResult?: boolean | undefined;
+        hideTimeline?: boolean | undefined;
+        hideDownloadInGraph?: boolean | undefined;
+        hideNodeDefinition?: boolean | undefined;
         isOwner?: boolean | undefined;
         wideResults?: boolean | undefined;
     };

package/package/components/FlowStatusViewerInner.svelte

@@ -22,7 +22,7 @@ import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 const dispatch = createEventDispatcher();
-let { flowStateStore, retryStatus, suspendStatus } = getContext('FlowStatusViewer');
+let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition } = getContext('FlowStatusViewer');
 export let jobId;
 export let workspaceId = undefined;
 export let flowJobIds = undefined;
@@ -654,7 +654,7 @@ let wrapperHeight = 0;
 						{/if}
 					{/each}
 				</div>
-			{:else if innerModules.length > 0}
+			{:else if innerModules.length > 0 && (job.raw_flow?.modules.length ?? 0) > 0}
 				<ul class="w-full">
 					<h3 class="text-md leading-6 font-bold text-primary border-b mb-4 py-2">
 						Step-by-step
@@ -774,6 +774,8 @@ let wrapperHeight = 0;
 						</li>
 					{/each}
 				</ul>
+			{:else}
+				<div class="p-2 text-tertiary text-sm italic">Empty flow</div>
 			{/if}
 		</div>
 	</div>
@@ -800,7 +802,7 @@ let wrapperHeight = 0;
 						</div>
 
 						<FlowGraphV2
-							download
+							download={!hideDownloadInGraph}
 							minHeight={wrapperHeight}
 							success={jobId != undefined && isSuccess(job?.['success'])}
 							flowModuleStates={$localModuleStates}
@@ -840,9 +842,14 @@ let wrapperHeight = 0;
 						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col z-0 h-full"
 					>
 						<Tabs bind:selected={rightColumnSelect}>
-							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
+							{#if !hideTimeline}
+								<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
+							{/if}
 							<Tab value="node_status"><span class="font-semibold">Node status</span></Tab>
-							<Tab value="node_definition"><span class="font-semibold">Node definition</span></Tab>
+							{#if !hideNodeDefinition}
+								<Tab value="node_definition"><span class="font-semibold">Node definition</span></Tab
+								>
+							{/if}
 							{#if Object.keys(job?.flow_status?.user_states ?? {}).length > 0}
 								<Tab value="user_states"><span class="font-semibold">User States</span></Tab>
 							{/if}

package/package/components/FlowViewer.svelte

@@ -1,27 +1,16 @@
-<script>import Highlight from 'svelte-highlight';
-import json from 'svelte-highlight/languages/json';
-import { Tab, Tabs, TabContent, Button } from './common';
+<script>import { Tab, Tabs, TabContent } from './common';
 import SchemaViewer from './SchemaViewer.svelte';
 import FieldHeader from './FieldHeader.svelte';
-import { copyToClipboard } from '../utils';
 import FlowGraphViewer from './FlowGraphViewer.svelte';
-import { Clipboard } from 'lucide-svelte';
-import YAML from 'yaml';
-import { yaml } from 'svelte-highlight/languages';
 import HighlightTheme from './HighlightTheme.svelte';
+import FlowViewerInner from './FlowViewerInner.svelte';
 export let flow;
 export let initialOpen = undefined;
 export let noSide = false;
-$: flowFiltered = {
-    summary: flow.summary,
-    description: flow.description,
-    value: flow.value,
-    schema: flow.schema
-};
 export let noGraph = false;
 export let tab = noGraph ? 'schema' : 'ui';
 export let noSummary = false;
-let rawType = 'yaml';
+export let noGraphDownload = false;
 let open = {};
 if (initialOpen) {
     open[initialOpen] = true;
@@ -73,40 +62,11 @@ function toAny(x) {
 					<div class="text-secondary text-xs italic mb-4">No inputs</div>
 				{/if}
 
-				<FlowGraphViewer download {noSide} {flow} overflowAuto />
+				<FlowGraphViewer download={!noGraphDownload} {noSide} {flow} overflowAuto />
 			</div>
 		</TabContent>
-		<TabContent value="raw"
-			><Tabs bind:selected={rawType} wrapperClass="mt-4">
-				<Tab value="yaml">YAML</Tab>
-				<Tab value="json">JSON</Tab>
-				<svelte:fragment slot="content">
-					<div class="relative pt-2">
-						<Button
-							on:click={() =>
-								copyToClipboard(
-									rawType === 'yaml'
-										? YAML.stringify(flowFiltered)
-										: JSON.stringify(flowFiltered, null, 4)
-								)}
-							color="light"
-							variant="border"
-							size="xs"
-							startIcon={{ icon: Clipboard }}
-							btnClasses="absolute top-2 right-2 w-min"
-						>
-							Copy content
-						</Button>
-						<Highlight
-							class="overflow-auto px-1"
-							language={rawType === 'yaml' ? yaml : json}
-							code={rawType === 'yaml'
-								? YAML.stringify(flowFiltered)
-								: JSON.stringify(flowFiltered, null, 4)}
-						/>
-					</div>
-				</svelte:fragment>
-			</Tabs>
+		<TabContent value="raw">
+			<FlowViewerInner {flow} />
 		</TabContent>
 		<TabContent value="schema">
 			<div class="my-4" />

package/package/components/FlowViewer.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         noGraph?: boolean | undefined;
         tab?: "schema" | "ui" | "raw" | undefined;
         noSummary?: boolean | undefined;
+        noGraphDownload?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowViewerInner.svelte

@@ -0,0 +1,109 @@
+<script>import Highlight from 'svelte-highlight';
+import json from 'svelte-highlight/languages/json';
+import { Tab, Tabs, Button } from './common';
+import { copyToClipboard } from '../utils';
+import { ArrowDown, Clipboard } from 'lucide-svelte';
+import YAML from 'yaml';
+import { yaml } from 'svelte-highlight/languages';
+import HighlightTheme from './HighlightTheme.svelte';
+export let flow;
+$: flowFiltered = {
+    summary: flow.summary,
+    description: flow.description,
+    value: flow.value,
+    schema: flow.schema
+};
+let rawType = 'yaml';
+function trimStringToLines(inputString, maxLines = 100) {
+    const lines = inputString?.split('\n') ?? [];
+    const linesToKeep = lines.slice(0, maxLines);
+    return linesToKeep.join('\n');
+}
+let code = '';
+function computeCode() {
+    const str = rawType === 'json' ? JSON.stringify(flowFiltered, null, 4) : YAML.stringify(flowFiltered);
+    const numberOfLines = str.split('\n').length;
+    if (numberOfLines > maxLines) {
+        shouldDisplayLoadMore = true;
+    }
+    code = str;
+}
+let shouldDisplayLoadMore = false;
+$: flowFiltered && rawType && computeCode();
+let maxLines = 100;
+</script>
+
+<HighlightTheme />
+
+<div>
+	<Tabs
+		bind:selected={rawType}
+		on:selected={() => {
+			maxLines = 100
+		}}
+	>
+		<Tab value="yaml">YAML</Tab>
+		<Tab value="json">JSON</Tab>
+		<svelte:fragment slot="content">
+			<div class="relative pt-2">
+				<Button
+					on:click={() =>
+						copyToClipboard(
+							rawType === 'yaml'
+								? YAML.stringify(flowFiltered)
+								: JSON.stringify(flowFiltered, null, 4)
+						)}
+					color="light"
+					variant="border"
+					size="xs"
+					startIcon={{ icon: Clipboard }}
+					btnClasses="absolute top-2 right-2 w-min"
+				>
+					Copy content
+				</Button>
+
+				<div class={shouldDisplayLoadMore ? 'code-container' : ''}>
+					<Highlight
+						class="overflow-auto px-1"
+						language={rawType === 'yaml' ? yaml : json}
+						code={trimStringToLines(code, maxLines)}
+					/>
+				</div>
+				{#if shouldDisplayLoadMore}
+					<Button
+						on:click={() => {
+							maxLines += 500
+
+							// If the code is less than the max lines, we don't need to show the button
+							if (maxLines >= code?.split('\n').length) {
+								shouldDisplayLoadMore = false
+							}
+						}}
+						color="light"
+						size="xs"
+						btnClasses="mb-2 mx-2"
+						startIcon={{ icon: ArrowDown }}
+					>
+						Show more
+					</Button>
+				{/if}
+			</div>
+		</svelte:fragment>
+	</Tabs>
+</div>
+
+<style>
+	.code-container {
+		position: relative;
+		overflow: hidden;
+	}
+	.code-container::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 100px;
+		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(var(--color-surface)));
+		pointer-events: none;
+	}</style>

package/package/components/FlowViewerInner.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { FlowValue } from '../gen';
+declare const __propDef: {
+    props: {
+        flow: {
+            summary: string;
+            description?: string;
+            value: FlowValue;
+            schema?: any;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowViewerInnerProps = typeof __propDef.props;
+export type FlowViewerInnerEvents = typeof __propDef.events;
+export type FlowViewerInnerSlots = typeof __propDef.slots;
+export default class FlowViewerInner extends SvelteComponent<FlowViewerInnerProps, FlowViewerInnerEvents, FlowViewerInnerSlots> {
+}
+export {};

package/package/components/ScriptBuilder.svelte

@@ -38,15 +38,18 @@ export let template = 'script';
 export let initialArgs = {};
 export let lockedLanguage = false;
 export let showMeta = false;
+export let neverShowMeta = false;
 export let diffDrawer = undefined;
 export let savedScript = undefined;
 export let searchParams = new URLSearchParams();
 export let disableHistoryChange = false;
 export let replaceStateFn = (url) => window.history.replaceState(null, '', url);
-let metadataOpen = showMeta ||
-    (initialPath == '' &&
-        searchParams.get('state') == undefined &&
-        searchParams.get('collab') == undefined);
+export let customUi = {};
+let metadataOpen = !neverShowMeta &&
+    (showMeta ||
+        (initialPath == '' &&
+            searchParams.get('state') == undefined &&
+            searchParams.get('collab') == undefined));
 let editor = undefined;
 let scriptEditor = undefined;
 let scheduleStore = writable({
@@ -344,7 +347,7 @@ async function saveDraft(forceSave = false) {
     loadingDraft = false;
 }
 function computeDropdownItems(initialPath) {
-    let dropdownItems = initialPath != ''
+    let dropdownItems = initialPath != '' && customUi?.topBar?.extraDeployOptions != false
         ? [
             {
                 label: 'Deploy & Stay here',
@@ -965,32 +968,34 @@ function langToLanguage(lang) {
 							{$scheduleStore.cron ?? ''}
 						</Button>
 					{/if}
-					<div class="flex justify-start w-full border rounded-md overflow-hidden">
-						<div>
-							<button
-								on:click={async () => {
-									metadataOpen = true
-								}}
-							>
-								<Badge
-									color="gray"
-									class="center-center !bg-surface-secondary !text-tertiary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all"
+					{#if customUi?.topBar?.path != false}
+						<div class="flex justify-start w-full border rounded-md overflow-hidden">
+							<div>
+								<button
+									on:click={async () => {
+										metadataOpen = true
+									}}
 								>
-									<Pen size={12} class="mr-2" /> Path
-								</Badge>
-							</button>
+									<Badge
+										color="gray"
+										class="center-center !bg-surface-secondary !text-tertiary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all"
+									>
+										<Pen size={12} class="mr-2" /> Path
+									</Badge>
+								</button>
+							</div>
+							<input
+								type="text"
+								readonly
+								value={script.path}
+								size={script.path?.length || 50}
+								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none !border-0 !shadow-none"
+								on:focus={({ currentTarget }) => {
+									currentTarget.select()
+								}}
+							/>
 						</div>
-						<input
-							type="text"
-							readonly
-							value={script.path}
-							size={script.path?.length || 50}
-							class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none !border-0 !shadow-none"
-							on:focus={({ currentTarget }) => {
-								currentTarget.select()
-							}}
-						/>
-					</div>
+					{/if}
 				</div>
 
 				{#if $enterpriseLicense && initialPath != ''}
@@ -1021,17 +1026,19 @@ function langToLanguage(lang) {
 							<span class="hidden lg:flex"> Diff </span>
 						</div>
 					</Button>
-					<Button
-						color="light"
-						variant="border"
-						size="xs"
-						on:click={() => {
-							metadataOpen = true
-						}}
-						startIcon={{ icon: Settings }}
-					>
-						<span class="hidden lg:flex"> Settings </span>
-					</Button>
+					{#if customUi?.topBar?.settings != false}
+						<Button
+							color="light"
+							variant="border"
+							size="xs"
+							on:click={() => {
+								metadataOpen = true
+							}}
+							startIcon={{ icon: Settings }}
+						>
+							<span class="hidden lg:flex"> Settings </span>
+						</Button>
+					{/if}
 					<Button
 						loading={loadingDraft}
 						size="xs"
@@ -1085,6 +1092,7 @@ function langToLanguage(lang) {
 		</div>
 
 		<ScriptEditor
+			{customUi}
 			collabMode
 			edit={initialPath != ''}
 			on:format={() => {