windmill-components 1.52.0 → 1.55.1

package/components/EditorBar.svelte

@@ -1,10 +1,10 @@
 <script context="module">export const EDITOR_BAR_WIDTH_THRESHOLD = 1044;
 </script>
 
-<script>import { ResourceService, ScriptService, VariableService } from '../gen';
-import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
-import { faCode, faCube, faDollarSign, faEye, faRotate, faRotateLeft, faWallet } from '@fortawesome/free-solid-svg-icons';
-import { hubScripts, workspaceStore } from '../stores';
+<script>import { ResourceService, VariableService } from '../gen';
+import { getScriptByPath, sendUserToast } from '../utils';
+import { faCube, faDollarSign, faEye, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
+import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
 import VariableEditor from './VariableEditor.svelte';
@@ -12,20 +12,23 @@ import Button from './common/button/Button.svelte';
 import HighlightCode from './HighlightCode.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import { Badge, Drawer } from './common';
+import WorkspaceScriptPicker from './flows/pickers/WorkspaceScriptPicker.svelte';
+import PickHubScript from './flows/pickers/PickHubScript.svelte';
+import ToggleHubWorkspace from './ToggleHubWorkspace.svelte';
+import Skeleton from './common/skeleton/Skeleton.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
 export let iconOnly = false;
 export let validCode = true;
+export let kind = 'script';
 let contextualVariablePicker;
 let variablePicker;
 let resourcePicker;
-let scriptPicker;
 let variableEditor;
 let resourceEditor;
 let codeViewer;
-let codeLang = 'deno';
-let codeContent = '';
+let codeObj = undefined;
 function addEditorActions() {
     editor.addAction('insert-variable', 'Windmill: Insert variable', () => {
         variablePicker.openDrawer();
@@ -43,35 +46,37 @@ async function loadContextualVariables() {
         workspace: $workspaceStore ?? 'NO_W'
     });
 }
-async function loadScripts() {
-    const workspaceScripts = await ScriptService.listScripts({
-        workspace: $workspaceStore ?? 'NO_W'
-    });
-    if (!$hubScripts) {
-        await loadHubScripts();
-    }
-    const hubScripts_ = $hubScripts ?? [];
-    return workspaceScripts.concat(hubScripts_);
+let scriptPicker;
+let pick_existing = 'hub';
+let filter = '';
+async function onScriptPick(e) {
+    codeObj = undefined;
+    codeViewer?.openDrawer?.();
+    codeObj = await getScriptByPath(e.detail.path ?? '');
 }
 </script>
 
-<ItemPicker
-	bind:this={scriptPicker}
-	pickCallback={async (path, _) => {
-		const { language, content } = await getScriptByPath(path ?? '')
-		codeContent = content
-		codeLang = language
-		codeViewer.openDrawer()
-	}}
-	closeOnClick={false}
-	itemName="script"
-	extraField="summary"
-	loadItems={loadScripts}
-/>
+<Drawer bind:this={scriptPicker} size="900px">
+	<DrawerContent title="Code" on:close={scriptPicker.closeDrawer}>
+		{#if pick_existing == 'hub'}
+			<PickHubScript bind:filter {kind} on:pick={onScriptPick}>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</PickHubScript>
+		{:else}
+			<WorkspaceScriptPicker bind:filter {kind} on:pick={onScriptPick}>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</WorkspaceScriptPicker>
+		{/if}
+	</DrawerContent>
+</Drawer>
 
 <Drawer bind:this={codeViewer} size="600px">
 	<DrawerContent title="Code" on:close={codeViewer.closeDrawer}>
-		<HighlightCode language={codeLang} code={codeContent} />
+		{#if codeObj}
+			<HighlightCode language={codeObj?.language} code={codeObj?.content} />
+		{:else}
+			<Skeleton layout={[[40]]} />
+		{/if}
 	</DrawerContent>
 </Drawer>
 
@@ -176,6 +181,7 @@ async function loadScripts() {
 	itemName="Resource"
 	buttons={{ 'Edit/View': (x) => resourceEditor.initEdit(x) }}
 	extraField="description"
+	extraField2="resource_type"
 	loadItems={async () =>
 		await ResourceService.listResource({ workspace: $workspaceStore ?? 'NO_W' })}
 >
@@ -224,7 +230,7 @@ async function loadScripts() {
 				on:click={variablePicker.openDrawer}
 				size="xs"
 				spacingSize="md"
-				startIcon={{ icon: faWallet }}
+				startIcon={{ icon: faDollarSign }}
 				{iconOnly}
 			>
 				+Variable
@@ -243,59 +249,59 @@ async function loadScripts() {
 				+Resource
 			</Button>
 		</div>
-
 		<div>
 			<Button
 				btnClasses="mx-1 !font-medium"
 				size="xs"
 				spacingSize="md"
 				color="light"
-				on:click={scriptPicker.openDrawer}
+				on:click={editor.clearContent}
 				{iconOnly}
-				startIcon={{ icon: faEye }}
+				startIcon={{ icon: faRotateLeft }}
 			>
-				Script
+				Reset
 			</Button>
 		</div>
-
+		<div>
+			<Button
+				btnClasses="!font-medium"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={editor.reloadWebsocket}
+				startIcon={{ icon: faRotate }}
+			>
+				{#if !iconOnly}
+					Assistant
+				{/if}
+				<span class="ml-1 -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.black ? 'green' : 'text-red-700'}>Black</span>)
+					{/if}
+				</span>
+			</Button></div
+		>
+	</div>
+	<div class="py-1">
 		<div>
 			<Button
 				btnClasses="mx-1 !font-medium"
 				size="xs"
 				spacingSize="md"
 				color="light"
-				on:click={editor.clearContent}
+				on:click={scriptPicker.openDrawer}
 				{iconOnly}
-				startIcon={{ icon: faRotateLeft }}
+				startIcon={{ icon: faEye }}
 			>
-				Reset
+				Script
 			</Button>
 		</div>
 	</div>
-	<div class="py-1">
-		<Button
-			btnClasses="!font-medium"
-			size="xs"
-			spacingSize="md"
-			color="light"
-			on:click={editor.reloadWebsocket}
-			startIcon={{ icon: faRotate }}
-		>
-			{#if !iconOnly}
-				Assistant
-			{/if}
-			<span class="ml-1 -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.black ? 'green' : 'text-red-700'}>Black</span>)
-				{/if}
-			</span>
-		</Button>
-	</div>
 </div>
 
 <style>

package/components/EditorBar.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         };
         iconOnly?: boolean | undefined;
         validCode?: boolean | undefined;
+        kind?: "script" | "trigger" | "approval" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowBuilder.svelte

@@ -1,7 +1,7 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
-import { workspaceStore } from '../stores';
+import { userStore, workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, sendUserToast, setQueryWithoutLoad } from '../utils';
 import { faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import { setContext } from 'svelte';
@@ -152,78 +152,84 @@ loadHubScripts();
 let flowViewer;
 </script>
 
-<UnsavedConfirmationModal />
+{#if !$userStore?.operator}
+	<UnsavedConfirmationModal />
 
-<Drawer bind:this={flowViewer} size="1200px">
-	<DrawerContent title="View Graph" on:close={flowViewer.closeDrawer} noPadding>
-		<FlowGraphViewer flow={$flowStore} overflowAuto />
-	</DrawerContent>
-</Drawer>
+	<Drawer bind:this={flowViewer} size="75%">
+		<DrawerContent title="View Graph" on:close={flowViewer.closeDrawer} noPadding>
+			<div class="overflow-hidden h-full w-full">
+				<FlowGraphViewer flow={$flowStore} />
+			</div>
+		</DrawerContent>
+	</Drawer>
 
-<div class="flex flex-col flex-1 h-screen">
-	<!-- Nav between steps-->
-	<div
-		class="justify-between flex flex-row w-full items-center pl-2.5 pr-6  space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
-	>
-		<div class="flex flex-row">
-			<FlowImportExportMenu />
-			<Button
-				btnClasses="inline-flex"
-				startIcon={{ icon: faEye }}
-				variant="border"
-				color="light"
-				size="sm"
-				on:click={flowViewer.openDrawer}
-			>
-				View Graph
-			</Button>
-		</div>
-		<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
-			<Button
-				btnClasses="hidden lg:inline-flex"
-				startIcon={{ icon: faPen }}
-				variant="contained"
-				color="light"
-				size="xs"
-				on:click={async () => {
-					select('settings')
-					document.getElementById('path')?.focus()
-				}}
-			>
-				{$flowStore.path && $flowStore.path != '' ? $flowStore.path : 'Choose a path'}
-			</Button>
-			<Button
-				startIcon={{ icon: faPen }}
-				variant="contained"
-				color="light"
-				size="xs"
-				on:click={async () => {
-					select('settings')
-					document.getElementById('flow-summary')?.focus()
-				}}
-			>
-				<div class="max-w-[10em] !truncate">
-					{$flowStore.summary == '' || !$flowStore.summary ? 'No summary' : $flowStore.summary}
-				</div>
-			</Button>
-		</div>
-		<div class="flex flex-row space-x-2">
-			<FlowPreviewButtons />
-			<div class="center-center">
+	<div class="flex flex-col flex-1 h-screen">
+		<!-- Nav between steps-->
+		<div
+			class="justify-between flex flex-row w-full items-center pl-2.5 pr-6  space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
+		>
+			<div class="flex flex-row">
+				<FlowImportExportMenu />
 				<Button
-					disabled={pathError != ''}
-					startIcon={{ icon: faSave }}
+					btnClasses="inline-flex"
+					startIcon={{ icon: faEye }}
+					variant="border"
+					color="light"
 					size="sm"
-					on:click={saveFlow}>Save</Button
+					on:click={flowViewer.openDrawer}
 				>
+					View Graph
+				</Button>
+			</div>
+			<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
+				<Button
+					btnClasses="hidden lg:inline-flex"
+					startIcon={{ icon: faPen }}
+					variant="contained"
+					color="light"
+					size="xs"
+					on:click={async () => {
+						select('settings')
+						document.getElementById('path')?.focus()
+					}}
+				>
+					{$flowStore.path && $flowStore.path != '' ? $flowStore.path : 'Choose a path'}
+				</Button>
+				<Button
+					startIcon={{ icon: faPen }}
+					variant="contained"
+					color="light"
+					size="xs"
+					on:click={async () => {
+						select('settings')
+						document.getElementById('flow-summary')?.focus()
+					}}
+				>
+					<div class="max-w-[10em] !truncate">
+						{$flowStore.summary == '' || !$flowStore.summary ? 'No summary' : $flowStore.summary}
+					</div>
+				</Button>
+			</div>
+			<div class="flex flex-row space-x-2">
+				<FlowPreviewButtons />
+				<div class="center-center">
+					<Button
+						disabled={pathError != ''}
+						startIcon={{ icon: faSave }}
+						size="sm"
+						on:click={saveFlow}>Save</Button
+					>
+				</div>
 			</div>
 		</div>
-	</div>
 
-	<!-- metadata -->
-	{#if $flowStateStore}
-		<FlowEditor {initialPath} {loading} />
-	{:else}
-		<CenteredPage>Loading...</CenteredPage>
-	{/if}
-</div>
+		<!-- metadata -->
+		{#if $flowStateStore}
+			<FlowEditor {initialPath} {loading} />
+		{:else}
+			<CenteredPage>Loading...</CenteredPage>
+		{/if}
+	</div>
+{:else}
+	Flow Builder not available to operators
+{/if}

package/components/FlowGraphViewer.svelte

@@ -3,44 +3,25 @@ import HighlightCode from './HighlightCode.svelte';
 import InputTransformsViewer from './InputTransformsViewer.svelte';
 import IconedPath from './IconedPath.svelte';
 import { scriptPathToHref } from '../utils';
+import { Drawer, DrawerContent } from './common';
+import { Highlight } from 'svelte-highlight';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import typescript from 'svelte-highlight/languages/typescript';
+import { cleanExpr } from './flows/utils';
+import FlowPathViewer from './flows/content/FlowPathViewer.svelte';
+import SchemaViewer from './SchemaViewer.svelte';
 export let flow;
 export let overflowAuto = false;
+export let noSide = false;
 let stepDetail = undefined;
+let codeViewer;
+let topHeight = 0;
 </script>
 
-<div class="flex flex-col h-full">
-	<div class="h-full w-full border border-gray-700" class:overflow-auto={overflowAuto}>
-		<FlowGraph
-			modules={flow?.value?.modules}
-			failureModule={flow?.value?.failure_module}
-			on:click={(e) => (stepDetail = e.detail)}
-		/>
-	</div>
-	<div class="w-full border-l border-r border-b border-gray-700 min-h-[150px] p-2">
-		{#if stepDetail == undefined}
-			<span class="font-black text-lg w-full my-4">
-				<span>Click on a step to see its details</span>
-			</span>
-		{:else}
-			<div class="font-black text-lg w-full mb-2 "
-				>Step {stepDetail.id ?? ''}<span class="ml-2 font-normal">{stepDetail.summary || ''}</span
-				></div
-			>
-			{#if stepDetail.value.type == 'identity'}
-				<div> An identity step return as output its input </div>
-			{:else if stepDetail.value.type == 'rawscript'}
-				<div class="text-2xs mb-4">
-					<h3>Step Inputs</h3>
-					<InputTransformsViewer
-						inputTransforms={stepDetail?.value?.input_transforms ??
-							stepDetail?.input_transforms ??
-							{}}
-					/>
-				</div>
-
-				<h3>Code</h3>
-				<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
-			{:else if stepDetail.value.type == 'script'}
+<Drawer bind:this={codeViewer} size="900px">
+	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
+		{#if stepDetail && typeof stepDetail != 'string'}
+			{#if stepDetail.value.type == 'script'}
 				<div class="mb-4">
 					<a
 						rel="noreferrer"
@@ -52,7 +33,7 @@ let stepDetail = undefined;
 					</a>
 				</div>
 				<div class="text-2xs mb-4">
-					<h3>Step Inputs</h3>
+					<h3 class="mb-2">Step Inputs</h3>
 					<InputTransformsViewer
 						inputTransforms={stepDetail?.value?.input_transforms ??
 							stepDetail?.input_transforms ??
@@ -70,7 +51,128 @@ let stepDetail = undefined;
 						/>
 					</div>
 				{/if}
+			{:else if stepDetail.value.type == 'rawscript'}
+				<div class="text-2xs mb-4">
+					<h3 class="mb-2">Step Inputs</h3>
+					<InputTransformsViewer
+						inputTransforms={stepDetail?.value?.input_transforms ??
+							stepDetail?.input_transforms ??
+							{}}
+					/>
+				</div>
+
+				<h3 class="mb-2">Code</h3>
+				<span class="!text-xs">
+					<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
+				</span>
 			{/if}
 		{/if}
+	</DrawerContent>
+</Drawer>
+<div class="grid grid-cols-3 w-full">
+	<div
+		bind:clientHeight={topHeight}
+		class="{noSide ? 'col-span-3' : 'col-span-2'} w-full border border-gray-400 h-screen"
+		class:overflow-auto={overflowAuto}
+	>
+		<FlowGraph
+			minHeight={topHeight}
+			modules={flow?.value?.modules}
+			failureModule={flow?.value?.failure_module}
+			on:click={(e) => (stepDetail = e.detail)}
+		/>
 	</div>
+	{#if !noSide}
+		<div class="w-full border-r border-b border-t border-gray-400 min-h-[150px] p-2 overflow-auto">
+			{#if stepDetail == undefined}
+				<span class="font-black text-lg w-full my-4">
+					<span>Click on a step to see its details</span>
+				</span>
+			{:else if stepDetail == 'Input'}
+				<SchemaViewer schema={flow?.schema} />
+			{:else if stepDetail == 'Result'}
+				End of the flow
+			{:else if typeof stepDetail != 'string' && stepDetail.value}
+				<div class="font-black text-lg w-full mb-6"
+					>Step {stepDetail.id ?? ''}<span class="ml-2 font-normal">{stepDetail.summary || ''}</span
+					></div
+				>
+				{#if stepDetail.value.type == 'identity'}
+					<div> An identity step return as output its input </div>
+				{:else if stepDetail.value.type == 'rawscript'}
+					<div class="text-2xs mb-4">
+						<h3 class="mb-2">Step Inputs</h3>
+						<InputTransformsViewer
+							inputTransforms={stepDetail?.value?.input_transforms ??
+								stepDetail?.input_transforms ??
+								{}}
+						/>
+					</div>
+
+					<h3 class="mb-2"
+						>Code &nbsp; <button class="text-gray-600 text-xs" on:click={codeViewer.openDrawer}
+							>Expand</button
+						>
+					</h3>
+					<span class="!text-xs">
+						<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
+					</span>
+				{:else if stepDetail.value.type == 'script'}
+					<div class="mb-4">
+						<a
+							rel="noreferrer"
+							target="_blank"
+							href={scriptPathToHref(stepDetail?.value?.path ?? '')}
+							class=""
+						>
+							<IconedPath path={stepDetail?.value?.path ?? ''} />
+						</a>
+					</div>
+					<div class="text-2xs mb-4">
+						<h3 class="mb-2">Step Inputs</h3>
+						<InputTransformsViewer
+							inputTransforms={stepDetail?.value?.input_transforms ??
+								stepDetail?.input_transforms ??
+								{}}
+						/>
+					</div>
+					{#if stepDetail.value.path.startsWith('hub/')}
+						<div class="mt-6">
+							<h3
+								>Code&nbsp; <button class="text-gray-600 text-xs" on:click={codeViewer.openDrawer}
+									>Expand</button
+								>
+							</h3>
+							<iframe
+								class="w-full h-full  text-sm"
+								title="embedded script from hub"
+								frameborder="0"
+								src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
+							/>
+						</div>
+					{/if}
+				{:else if stepDetail.value.type == 'forloopflow'}
+					<p
+						>For loop with iterator: {#if stepDetail.value.iterator.type == 'static'}<ObjectViewer
+								json={stepDetail.value.iterator.value}
+							/>{:else}
+							<span class="text-xs">
+								<Highlight
+									offsetTop={0}
+									language={typescript}
+									code={cleanExpr(stepDetail.value.iterator.expr)}
+								/>
+							</span>
+						{/if}</p
+					>
+				{:else if stepDetail.value.type == 'branchall'}
+					<p>Run all branches</p>
+				{:else if stepDetail.value.type == 'branchone'}
+					<p>Run one branch based on a predicate</p>
+				{:else if stepDetail.value.type == 'flow'}
+					<FlowPathViewer noSide path={stepDetail.value.path} />
+				{/if}
+			{/if}
+		</div>
+	{/if}
 </div>

package/components/FlowGraphViewer.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
             schema?: any;
         };
         overflowAuto?: boolean | undefined;
+        noSide?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowJobResult.svelte

@@ -2,9 +2,14 @@
 import LogViewer from './LogViewer.svelte';
 export let result;
 export let logs;
+export let col = false;
+export let noBorder = false;
 </script>
 
-<div class="grid grid-cols-2 shadow border border-gray-800 h-full">
+<div
+	class:border={!noBorder}
+	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow  border-gray-400 h-full"
+>
 	<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
 		<span class="text-gray-500">Result</span>
 		<DisplayResult {result} />

package/components/FlowJobResult.svelte.d.ts

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         result: any;
         logs: string;
+        col?: boolean | undefined;
+        noBorder?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowMetadata.svelte

@@ -1,7 +1,7 @@
 <script>import JobStatus from './JobStatus.svelte';
 import Icon from 'svelte-awesome';
 import { displayDaysAgo } from '../utils';
-import { faCalendar, faClock, faRobot, faScroll, faUser, faWind } from '@fortawesome/free-solid-svg-icons';
+import { faCalendar, faClock, faRobot, faScroll, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 export let job;
 const SMALL_ICON_SCALE = 0.7;
 </script>
@@ -23,7 +23,9 @@ const SMALL_ICON_SCALE = 0.7;
 	<div>
 		{#if job && job.parent_job}
 			{#if job.is_flow_step}
-				<Icon class="text-gray-700" data={faWind} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+				<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
+					class="mx-2"
+				>
 					Step of flow <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
 				>
 			{:else}