windmill-components 1.34.0 → 1.35.42

package/components/AppConnect.svelte

@@ -225,7 +225,7 @@ $: isGoogleSignin =
 			{/if}
 			<PageHeader title="Extra Params" primary={false} />
 			{#if !manual && resource_type != ''}
-				{#each extra_params as [k, v], i}
+				{#each extra_params as [k, v]}
 					<div class="flex flex-row max-w-md">
 						<input type="text" bind:value={k} />
 						<input type="text" bind:value={v} />

package/components/ArgInput.svelte

@@ -4,13 +4,13 @@ import { setInputCat as computeInputCat } from '../utils';
 import { Button, Tooltip } from 'flowbite-svelte';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import Editor from './Editor.svelte';
 import FieldHeader from './FieldHeader.svelte';
 import ObjectResourceInput from './ObjectResourceInput.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import SchemaForm from './SchemaForm.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -275,7 +275,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<input class="inline-block" type="datetime-local" bind:value />
 			{:else if inputCat == 'sql'}
 				<div class="border rounded mb-4 w-full border-gray-700">
-					<Editor
+					<SimpleEditor
 						on:focus={() => dispatch('focus')}
 						on:blur={() => dispatch('blur')}
 						bind:this={editor}

package/components/ArgInput.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type InputCat } from '../utils';
-import Editor from './Editor.svelte';
 import type { SchemaProperty } from '../common';
+import SimpleEditor from './SimpleEditor.svelte';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -27,7 +27,7 @@ declare const __propDef: {
         properties?: {
             [name: string]: SchemaProperty;
         } | undefined;
-        editor?: Editor | undefined;
+        editor?: SimpleEditor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         inputCat?: InputCat | undefined;
     };

package/components/CenteredPage.svelte

@@ -1,5 +1,5 @@
-<div class="max-w-screen-lg flex grow w-full h-full xl:-ml-20 mr-2 lg:mr-0">
-	<div class="grow w-full h-full mt-4">
+<div class="py-6">
+	<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
 		<slot />
 	</div>
 </div>

package/components/Editor.svelte

@@ -1,9 +1,4 @@
 <script context="module">import * as monaco from 'monaco-editor';
-monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-    target: monaco.languages.typescript.ScriptTarget.Latest,
-    allowNonTsExtensions: true,
-    noLib: true
-});
 monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     target: monaco.languages.typescript.ScriptTarget.Latest,
     allowNonTsExtensions: true,
@@ -14,25 +9,19 @@ monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
     noSuggestionDiagnostics: true,
     noSyntaxValidation: true
 });
-monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-    validate: true,
-    allowComments: false,
-    schemas: [],
-    enableSchemaRequest: true
-});
 </script>
 
 <script>import { browser, dev } from '$app/env';
 import { page } from '$app/stores';
 import { sendUserToast } from '../utils';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import getMessageServiceOverride from 'vscode/service-override/messages';
 import { StandaloneServices } from 'vscode/services';
 import { DENO_INIT_CODE_CLEAR, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
+import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 StandaloneServices.initialize({
     ...getMessageServiceOverride(document.body)
 });
@@ -41,13 +30,11 @@ let editor;
 export let deno = false;
 export let lang = deno ? 'typescript' : 'python';
 export let code = '';
-export let hash = (Math.random() + 1).toString(36).substring(2);
+export let hash = randomHash();
 export let cmdEnterAction = undefined;
 export let formatAction = undefined;
 export let automaticLayout = true;
 export let websocketAlive = { pyright: false, black: false, deno: false };
-export let extraLib = '';
-export let extraLibPath = '';
 export let shouldBindKey = true;
 let websockets = [];
 let websocketInterval;
@@ -64,10 +51,7 @@ if (browser) {
         // @ts-ignore
         self.MonacoEnvironment = {
             getWorker: function (_moduleId, label) {
-                if (label === 'json') {
-                    return new jsonWorker();
-                }
-                else if (label === 'typescript' || label === 'javascript') {
+                if (label === 'typescript' || label === 'javascript') {
                     return new tsWorker();
                 }
                 else {
@@ -85,22 +69,6 @@ export function insertAtCursor(code) {
         editor.trigger('keyboard', 'type', { text: code });
     }
 }
-function langToExt(lang) {
-    switch (lang) {
-        case 'typescript':
-            return 'ts';
-        case 'python':
-            return 'py';
-        case 'javascript':
-            return 'js';
-        case 'json':
-            return 'json';
-        case 'sql':
-            return 'sql';
-        default:
-            return 'unknown';
-    }
-}
 export function insertAtBeginning(code) {
     if (editor) {
         const range = { startLineNumber: 1, startColumn: 1, endLineNumber: 1, endColumn: 1 };
@@ -336,28 +304,8 @@ async function closeWebsockets() {
 }
 async function loadMonaco() {
     const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
-    model.updateOptions({ tabSize: 2, insertSpaces: true });
-    editor = monaco.editor.create(divEl, {
-        model: model,
-        value: code,
-        language: lang,
-        automaticLayout,
-        readOnly: false,
-        fixedOverflowWidgets: true,
-        autoDetectHighContrast: true,
-        //lineNumbers: 'off',
-        //lineDecorationsWidth: 0,
-        lineNumbersMinChars: 4,
-        lineNumbers: (ln) => '<span class="pr-4 text-gray-400">' + ln + '</span>',
-        folding: false,
-        scrollBeyondLastLine: false,
-        minimap: {
-            enabled: false
-        },
-        lightbulb: {
-            enabled: true
-        }
-    });
+    model.updateOptions(updateOptions);
+    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout));
     if (shouldBindKey) {
         editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
             format();
@@ -390,14 +338,6 @@ async function loadMonaco() {
     editor.onDidBlurEditorText(() => {
         dispatch('blur');
     });
-    if (lang == 'javascript' && extraLib != '' && extraLibPath != '') {
-        monaco.languages.typescript.javascriptDefaults.setExtraLibs([
-            {
-                content: extraLib,
-                filePath: extraLibPath
-            }
-        ]);
-    }
     if (lang == 'python' || deno) {
         reloadWebsocket();
     }
@@ -433,20 +373,5 @@ onDestroy(() => {
 		padding-left: 0px;
 		padding-right: 0px;
 		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80vh;
-}
-
-	.small-editor {
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 26vh;
-	}
-
-	.few-lines-editor {
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80px;
-	}
-
-	.two-lines-editor {
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 40px;
-	}</style>
+		height: 80vh
+}</style>

package/components/Editor.svelte.d.ts

@@ -14,8 +14,6 @@ declare const __propDef: {
             black: boolean;
             deno: boolean;
         } | undefined;
-        extraLib?: string | undefined;
-        extraLibPath?: string | undefined;
         shouldBindKey?: boolean | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;

package/components/EditorBar.svelte

@@ -1,9 +1,8 @@
 <script>import { ResourceService, ScriptService, VariableService } from '../gen';
 import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faCube, faFile, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { hubScripts, workspaceStore } from '../stores';
-import { Button } from 'flowbite-svelte';
 import { Highlight } from 'svelte-highlight';
 import { python, typescript } from 'svelte-highlight/languages';
 import ItemPicker from './ItemPicker.svelte';
@@ -157,55 +156,69 @@ async function loadScripts() {
 </ItemPicker>
 
 <ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
-
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
 
-<div class="flex flex-row w-full">
-	<div class="flex flex-row w-full space-x-2 whitespace-nowrap">
-		<Button
-			size="xs"
-			color="alternative"
+<div class="flex divide-x items-center">
+	<div>
+		<button
+			type="button"
+			class="mr-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
 			on:click={() => {
 				variablePicker.openModal()
 			}}
 		>
-			<Icon data={faSearch} scale={0.7} class="mr-2" />
-			Variable picker
-		</Button>
-
-		<Button
-			size="xs"
-			color="alternative"
+			<Icon data={faFile} class="h-4 w-4 mr-2" />
+			Insert variable
+		</button>
+	</div>
+	<div>
+		<button
+			type="button"
+			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
 			on:click={() => {
 				resourcePicker.openModal()
 			}}
 		>
-			<Icon data={faSearch} scale={0.7} class="mr-2" />
-			Resource picker
-		</Button>
+			<Icon data={faCube} class="h-4 w-4 mr-2" />
+			Insert resource
+		</button>
+	</div>
 
-		<Button
-			size="xs"
-			color="alternative"
+	<div>
+		<button
+			type="button"
+			class="mx-1  bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
 			on:click={() => {
 				scriptPicker.openModal()
 			}}
 		>
-			<Icon data={faSearch} scale={0.7} class="mr-2" />
-			Script explorer
-		</Button>
+			<Icon data={faCode} class="h-4 w-4 mr-2" />
+			Search script
+		</button>
 	</div>
-	<div class="flex flex-row-reverse gap-x-2 w-full">
-		<Button
-			size="xs"
-			class={!websocketAlive.pyright && !websocketAlive.deno && !websocketAlive.black
-				? 'bg-red-50'
-				: ''}
-			color="alternative"
+
+	<div>
+		<button
+			type="button"
+			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
+			on:click={() => {
+				editor.clearContent()
+			}}
+		>
+			<Icon data={faRotateLeft} class="h-4 w-4 mr-2" />
+			Reset content
+		</button>
+	</div>
+	<div>
+		<button
+			type="button"
+			class="ml-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
 			on:click={() => {
 				editor.reloadWebsocket()
 			}}
 		>
+			<Icon data={faRotate} class="h-4 w-4 mr-2" />
+
 			Reload assistants
 			<span class="ml-1">
 				{#if lang == 'deno'}
@@ -216,13 +229,6 @@ async function loadScripts() {
 					<span class={websocketAlive.black ? 'text-green-600' : 'text-red-700'}>Black</span>)
 				{/if}
 			</span>
-		</Button>
-		<Button
-			size="xs"
-			color="alternative"
-			on:click={() => {
-				editor.clearContent()
-			}}>Reset content</Button
-		>
+		</button>
 	</div>
 </div>

package/components/FlowBuilder.svelte

@@ -1,6 +1,6 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import { FlowService, Job, ScheduleService } from '../gen';
+import { FlowService, ScheduleService } from '../gen';
 import { workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, pathIsEmpty, sendUserToast, setQueryWithoutLoad } from '../utils';
 import { faPlay } from '@fortawesome/free-solid-svg-icons';
@@ -8,7 +8,7 @@ import { Breadcrumb, BreadcrumbItem, Button } from 'flowbite-svelte';
 import { onDestroy, onMount } from 'svelte';
 import Icon from 'svelte-awesome';
 import { OFFSET } from './CronInput.svelte';
-import Drawer from './Drawer.svelte';
+import Drawer from './common/drawer/Drawer.svelte';
 import FlowEditor from './FlowEditor.svelte';
 import FlowPreviewContent from './FlowPreviewContent.svelte';
 import { flowStateStore, flowStateToFlow } from './flows/flowState';
@@ -133,8 +133,8 @@ onDestroy(() => {
 });
 </script>
 
-<div class="flex flex-row w-full h-full justify-between">
-	<div class={`flex flex-col mb-96 m-auto w-full sm:w-3/4 lg:w-2/3`}>
+<div class="flex flex-row w-full h-full justify-between ">
+	<div class={`flex flex-col mb-96 m-auto w-full`}>
 		<!-- Nav between steps-->
 		<div class="justify-between flex flex-row w-full my-4">
 			<Breadcrumb>

package/components/FlowJobResult.svelte

@@ -1,24 +1,23 @@
 <script>import DisplayResult from './DisplayResult.svelte';
-import Tabs from './tabs/Tabs.svelte';
-import Tab from './tabs/Tab.svelte';
-import TabPanel from './tabs/TabPanel.svelte';
-let value = 0;
+import Tabs from './common/tabs/Tabs.svelte';
+import Tab from './common/tabs/Tab.svelte';
+import TabContent from './common/tabs/TabContent.svelte';
 export let job;
 </script>
 
 {#if job}
-	<div>
-		<Tabs>
-			<Tab bind:value index={0}>Results</Tab>
-			<Tab bind:value index={1}>Logs</Tab>
-		</Tabs>
-		<TabPanel bind:value index={0} class="border p-2 h-36 overflow-y-scroll">
-			<DisplayResult result={job.result} />
-		</TabPanel>
-		<TabPanel bind:value index={1} class="border p-2 h-36 overflow-y-scroll">
-			<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
-				<pre class="w-full">{job.logs}</pre>
-			</div>
-		</TabPanel>
-	</div>
+	<Tabs selected="results">
+		<Tab value="results">Results</Tab>
+		<Tab value="logs">Logs</Tab>
+		<svelte:fragment slot="content">
+			<TabContent value="results" class="border p-2 h-36 overflow-y-scroll">
+				<DisplayResult result={job.result} />
+			</TabContent>
+			<TabContent value="logs" class="border p-2 h-36 overflow-y-scroll">
+				<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
+					<pre class="w-full">{job.logs}</pre>
+				</div>
+			</TabContent>
+		</svelte:fragment>
+	</Tabs>
 {/if}

package/components/FlowModulesViewer.svelte

@@ -0,0 +1,97 @@
+<script>import { scriptPathToHref } from '../utils';
+import Highlight from 'svelte-highlight';
+import python from 'svelte-highlight/languages/python';
+import typescript from 'svelte-highlight/languages/typescript';
+import { slide } from 'svelte/transition';
+import InputTransformsViewer from './InputTransformsViewer.svelte';
+import IconedPath from './IconedPath.svelte';
+export let modules;
+let open = {};
+</script>
+
+<p class="font-black text-lg my-6 w-full">
+	<span>{modules?.length} Step{modules?.length > 1 ? 's' : ''} </span>
+	<span class="mt-4" />
+</p>
+<ul class="-mb-8 w-full">
+	{#each modules ?? [] as mod, i}
+		<li class="w-full">
+			<div class="relative pb-8 w-full">
+				{#if i < (modules ?? []).length - 1}
+					<span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true" />
+				{/if}
+				<div class="relative flex space-x-3">
+					<div>
+						<span
+							class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center ring-8 ring-white text-white"
+							>{i + 1}
+						</span>
+					</div>
+					<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
+						<div class="w-full">
+							<span class="text-black">{mod?.summary ?? ''}</span>
+							<p class="text-sm text-gray-500">
+								{#if mod?.value?.type == 'script'}
+									<a
+										target="_blank"
+										href={scriptPathToHref(mod?.value?.path ?? '')}
+										class="font-medium text-gray-900"
+									>
+										<IconedPath path={mod?.value?.path ?? ''} />
+									</a>
+									{#if mod?.value?.path?.startsWith('hub/')}
+										<div>
+											<button
+												on:click={async () => {
+													open[i] = !open[i]
+												}}
+												class="mb-2 underline text-black"
+											>
+												View code and inputs {open[i] ? '(-)' : '(+)'}</button
+											>
+											{#if open[i]}
+												<div class="border border-black p-2 bg-gray-50  divide-y">
+													<InputTransformsViewer inputTransforms={mod?.input_transforms} />
+													<div class="w-full h-full mt-6">
+														<iframe
+															style="height: 400px;"
+															class="w-full h-full  text-sm"
+															title="embedded script from hub"
+															frameborder="0"
+															src="https://hub.windmill.dev/embed/script/{mod?.value?.path?.substring(
+																4
+															)}"
+														/>
+													</div>
+												</div>
+											{/if}
+										</div>
+									{/if}
+								{:else if mod?.value?.type == 'rawscript'}
+									<button on:click={() => (open[i] = !open[i])} class="mb-2 underline text-black">
+										Raw {mod?.value?.language} script {open[i] ? '(-)' : '(+)'}</button
+									>
+
+									{#if open[i]}
+										<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
+											<InputTransformsViewer inputTransforms={mod?.input_transforms} />
+											<Highlight
+												language={mod?.value?.language == 'deno' ? typescript : python}
+												code={mod?.value?.content}
+											/>
+										</div>
+									{/if}
+								{:else if mod?.value?.type == 'flow'}
+									Flow at path {mod?.value?.path}
+								{:else if mod?.value?.type == 'forloopflow'}
+									For loop over all the elements of the list returned as a result of step {i}:
+									<svelte:self modules={mod.value.modules} />
+								{/if}
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</li>
+	{/each}
+</ul>

package/components/FlowModulesViewer.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../gen';
+declare const __propDef: {
+    props: {
+        modules: FlowModule[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModulesViewerProps = typeof __propDef.props;
+export declare type FlowModulesViewerEvents = typeof __propDef.events;
+export declare type FlowModulesViewerSlots = typeof __propDef.slots;
+export default class FlowModulesViewer extends SvelteComponentTyped<FlowModulesViewerProps, FlowModulesViewerEvents, FlowModulesViewerSlots> {
+}
+export {};

package/components/FlowPreview.svelte

@@ -1,14 +1,14 @@
-<script>import { workspaceStore } from '../stores';
-import { sendUserToast, truncateRev } from '../utils';
+<script>import { sendUserToast, truncateRev } from '../utils';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import { onDestroy } from 'svelte';
 import Icon from 'svelte-awesome';
 import { flowStateStore, flowStateToFlow } from './flows/flowState';
 import { mapJobResultsToFlowState } from './flows/flowStateUtils';
 import { runFlowPreview } from './flows/utils';
 import FlowStatusViewer from './FlowStatusViewer.svelte';
 import RunForm from './RunForm.svelte';
-import Tabs from './Tabs.svelte';
+import Tab from './common/tabs/Tab.svelte';
+import TabContent from './common/tabs/TabContent.svelte';
+import Tabs from './common/tabs/Tabs.svelte';
 export let i;
 export let flow;
 export let schema;
@@ -37,14 +37,14 @@ function extractStep(flow) {
     return localFlow;
 }
 function setInputTransformFromArgs(flow, args) {
-    let input_transform = {};
+    let input_transforms = {};
     Object.entries(args).forEach(([key, value]) => {
-        input_transform[key] = {
+        input_transforms[key] = {
             type: 'static',
             value: value
         };
     });
-    flow.value.modules[0].input_transform = input_transform;
+    flow.value.modules[0].input_transforms = input_transforms;
     return flow;
 }
 </script>
@@ -65,33 +65,34 @@ function setInputTransformFromArgs(flow, args) {
 
 {#if viewPreview}
 	{#if i != flow.value.modules.length}
-		<Tabs
-			tabs={[
-				['upto', uptoText],
-				['justthis', 'preview just this step']
-			]}
-			bind:tab
-		/>
-	{/if}
-	<div class="my-2" />
-	{#if tab == 'upto'}
-		<RunForm
-			runnable={truncateFlow(flow)}
-			runAction={(_, args) => runPreview(args)}
-			schedulable={false}
-			buttonText={uptoText}
-			detailed={false}
-			bind:args
-		/>
-	{:else}
-		<RunForm
-			runnable={extractStep(flow)}
-			runAction={(_, args) => runPreview(args)}
-			schedulable={false}
-			buttonText="Preview just this step"
-			detailed={false}
-			args={stepArgs}
-		/>
+		<div class="mt-2">
+			<Tabs bind:selected={tab}>
+				<Tab value="upto">{uptoText}</Tab>
+				<Tab value="justthis">Preview just this step</Tab>
+				<svelte:fragment slot="content">
+					<TabContent value="upto">
+						<RunForm
+							runnable={truncateFlow(flow)}
+							runAction={(_, args) => runPreview(args)}
+							schedulable={false}
+							buttonText={uptoText}
+							detailed={false}
+							bind:args
+						/>
+					</TabContent>
+					<TabContent value="justthis">
+						<RunForm
+							runnable={extractStep(flow)}
+							runAction={(_, args) => runPreview(args)}
+							schedulable={false}
+							buttonText="Preview just this step"
+							detailed={false}
+							args={stepArgs}
+						/>
+					</TabContent>
+				</svelte:fragment>
+			</Tabs>
+		</div>
 	{/if}
 
 	{#if jobId}

package/components/FlowPreviewContent.svelte

@@ -72,7 +72,10 @@ onDestroy(() => {
 		{#if jobId}
 			<FlowStatusViewer
 				{jobId}
-				on:jobsLoaded={(e) => mapJobResultsToFlowState(e.detail, 'upto', steps - 1)}
+				on:jobsLoaded={(e) => {
+					intervalState = 'done'
+					mapJobResultsToFlowState(e.detail, 'upto', steps - 1)
+				}}
 				root={true}
 			/>
 		{/if}