windmill-components 1.52.0 → 1.55.1

package/components/ScriptBuilder.svelte

@@ -3,7 +3,7 @@ import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { inferArgs } from '../infer';
 import { initialCode, isInitialCode } from '../script_helpers';
-import { workspaceStore } from '../stores';
+import { userStore, workspaceStore } from '../stores';
 import { encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
 import Path from './Path.svelte';
 import RadioButton from './RadioButton.svelte';
@@ -73,216 +73,231 @@ async function changeStep(step) {
     }
     goto(`?step=${step}`);
 }
+$: kind = script.kind;
 </script>
 
-<UnsavedConfirmationModal />
-<div class="flex flex-col h-screen">
-	<!-- Nav between steps-->
-	<div class="flex flex-col w-full px-2 py-1  border-b shadow-sm">
-		<div
-			class="justify-between flex flex-row w-full items-center overflow-x-auto scrollbar-hidden px-2"
-		>
-			<div class="flex flex-row py-1">
-				<Breadcrumb
-					items={['Metadata', 'Code', 'Advanced']}
-					selectedIndex={step}
-					on:select={(e) => changeStep(e.detail.index + 1)}
-					disabled={pathError != ''}
-				>
-					<svelte:fragment slot="separator">/</svelte:fragment>
-				</Breadcrumb>
-			</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 () => {
-						await changeStep(1)
-						setTimeout(() => pathC?.focus(), 100)
-					}}
-				>
-					{script.path}
-				</Button>
+{#if !$userStore?.operator}
+	<UnsavedConfirmationModal />
+	<div class="flex flex-col h-screen">
+		<!-- Nav between steps-->
+		<div class="flex flex-col w-full px-2 py-1  border-b shadow-sm">
+			<div
+				class="justify-between flex flex-row w-full items-center overflow-x-auto scrollbar-hidden px-2"
+			>
+				<div class="flex flex-row py-1">
+					<Breadcrumb
+						items={['Metadata', 'Code', 'Advanced']}
+						selectedIndex={step}
+						on:select={(e) => changeStep(e.detail.index + 1)}
+						disabled={pathError != ''}
+					>
+						<svelte:fragment slot="separator">/</svelte:fragment>
+					</Breadcrumb>
+				</div>
 
-				<Button
-					startIcon={{ icon: faPen }}
-					variant="contained"
-					color="light"
-					size="xs"
-					on:click={async () => {
-						await changeStep(1)
-						setTimeout(() => summaryC?.focus(), 100)
-					}}
-				>
-					<div class="max-w-[10em] !truncate">
-						{script.summary == '' || !script.summary ? 'No summary' : script.summary}
-					</div>
-				</Button>
-			</div>
-			<div class="flex flex-row gap-x-2">
-				<Button
-					variant="border"
-					size="sm"
-					btnClasses={step == 1 ? 'hidden sm:invisible' : ''}
-					on:click={() => changeStep(step - 1)}
-				>
-					Back
-				</Button>
-				<Button
-					size="sm"
-					variant={step == 1 ? 'contained' : 'border'}
-					btnClasses={step == 3 ? 'invisible' : ''}
-					disabled={step === 1 && pathError !== ''}
-					on:click={() => changeStep(step + 1)}
-				>
-					Next
-				</Button>
-				<Button
-					size="sm"
-					variant={step == 1 ? 'border' : 'contained'}
-					disabled={step === 1 && pathError !== ''}
-					btnClasses={step == 1 && initialPath == '' ? 'invisible' : ''}
-					startIcon={{ icon: faSave }}
-					on:click={editScript}>Save</Button
-				>
-			</div>
-		</div>
-	</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 () => {
+							await changeStep(1)
+							setTimeout(() => pathC?.focus(), 100)
+						}}
+					>
+						{script.path}
+					</Button>
 
-	<!-- metadata -->
-	{#if step === 1}
-		<CenteredPage>
-			<div class="space-y-6">
-				<h2 class="border-b pb-1 mt-4">Path & Summary</h2>
-				<Path
-					bind:this={pathC}
-					bind:error={pathError}
-					bind:path={script.path}
-					{initialPath}
-					on:enter={() => changeStep(2)}
-					namePlaceholder="my_script"
-					kind="script"
-				/>
-				<label class="block ">
-					<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
-					<input
-						type="text"
-						bind:this={summaryC}
-						bind:value={script.summary}
-						placeholder="A very short summary of the script displayed when the script is listed"
-						rows="1"
-					/>
-				</label>
-				<h2 class="border-b pb-1 mt-4">Language</h2>
-				<div class="flex flex-row gap-2 flex-wrap">
-					{#each langs as [label, lang]}
-						{@const isPicked = script.language == lang && template == 'script'}
-						<Button
-							size="sm"
-							variant="border"
-							color={isPicked ? 'blue' : 'dark'}
-							btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-							on:click={() => {
-								script.language = lang
-								template = 'script'
-								initContent(lang, script.kind, template)
-							}}
-						>
-							<LanguageIcon {lang} /><span class="ml-2">{label}</span>
-						</Button>
-					{/each}
 					<Button
-						size="sm"
-						variant="border"
-						color={template == 'pgsql' ? 'blue' : 'dark'}
-						btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-						on:click={() => {
-							script.language = Script.language.DENO
-							template = 'pgsql'
-							initContent(script.language, script.kind, template)
+						startIcon={{ icon: faPen }}
+						variant="contained"
+						color="light"
+						size="xs"
+						on:click={async () => {
+							await changeStep(1)
+							setTimeout(() => summaryC?.focus(), 100)
 						}}
 					>
-						<LanguageIcon lang="pgsql" /><span class="ml-2">PostgreSQL</span>
+						<div class="max-w-[10em] !truncate">
+							{script.summary == '' || !script.summary ? 'No summary' : script.summary}
+						</div>
 					</Button>
 				</div>
-				<h2 class="border-b pb-1 mt-4">Advanced</h2>
-				<div>
+				<div class="flex flex-row gap-x-2">
+					<Button
+						variant="border"
+						size="sm"
+						btnClasses={step == 1 ? 'hidden sm:invisible' : ''}
+						on:click={() => changeStep(step - 1)}
+					>
+						Back
+					</Button>
 					<Button
-						color="light"
 						size="sm"
-						endIcon={{ icon: viewScriptKind ? faChevronUp : faChevronDown }}
-						on:click={() => (viewScriptKind = !viewScriptKind)}
+						variant={step == 1 ? 'contained' : 'border'}
+						btnClasses={step == 3 ? 'invisible' : ''}
+						disabled={step === 1 && pathError !== ''}
+						on:click={() => changeStep(step + 1)}
 					>
-						Tag this script as having a specific purpose inside flows
+						Next
 					</Button>
+					<Button
+						size="sm"
+						variant={step == 1 ? 'border' : 'contained'}
+						disabled={step === 1 && pathError !== ''}
+						btnClasses={step == 1 && initialPath == '' ? 'invisible' : ''}
+						startIcon={{ icon: faSave }}
+						on:click={editScript}>Save</Button
+					>
 				</div>
-				{#if viewScriptKind}
-					<div class="max-w-lg">
-						<RadioButton
-							label="Script Type"
-							options={[
-								['Common Script', Script.kind.SCRIPT],
-								[
-									{
-										title: 'Trigger Script',
-										desc: `First module of flows to trigger them based on watching changes external periodically using an internal state`
-									},
-									Script.kind.TRIGGER
-								],
-								[
-									{
-										title: 'Error Handler',
-										desc: `Handle errors for flows after all retries attempts have been exhausted`
-									},
-									Script.kind.FAILURE
-								],
-								[
-									{
-										title: 'Approval Script',
-										desc: `Send notification externally to ask for approval to continue a flow`
-									},
-									Script.kind.APPROVAL
-								]
+			</div>
+		</div>
 
-								// ['Command Handler', Script.kind.COMMAND]
-							]}
-							on:change={(e) => {
-								if (isInitialCode(script.content)) {
+		<!-- metadata -->
+		{#if step === 1}
+			<CenteredPage>
+				<div class="space-y-6">
+					<h2 class="border-b pb-1 mt-4">Path & Summary</h2>
+					<Path
+						bind:this={pathC}
+						bind:error={pathError}
+						bind:path={script.path}
+						{initialPath}
+						on:enter={() => changeStep(2)}
+						namePlaceholder="my_script"
+						kind="script"
+					/>
+					<label class="block ">
+						<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
+						<input
+							type="text"
+							bind:this={summaryC}
+							bind:value={script.summary}
+							placeholder="A very short summary of the script displayed when the script is listed"
+							rows="1"
+						/>
+					</label>
+					<h2 class="border-b pb-1 mt-4">Language</h2>
+					<div class="flex flex-row gap-2 flex-wrap">
+						{#each langs as [label, lang]}
+							{@const isPicked = script.language == lang && template == 'script'}
+							<Button
+								size="sm"
+								variant="border"
+								color={isPicked ? 'blue' : 'dark'}
+								btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+								on:click={() => {
+									script.language = lang
 									template = 'script'
-									initContent(script.language, e.detail, template)
-								}
+									initContent(lang, script.kind, template)
+								}}
+							>
+								<LanguageIcon {lang} /><span class="ml-2">{label}</span>
+							</Button>
+						{/each}
+						<Button
+							size="sm"
+							variant="border"
+							color={template == 'pgsql' ? 'blue' : 'dark'}
+							btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							on:click={() => {
+								script.language = Script.language.DENO
+								template = 'pgsql'
+								initContent(script.language, script.kind, template)
+							}}
+						>
+							<LanguageIcon lang="pgsql" /><span class="ml-2">PostgreSQL</span>
+						</Button>
+						<Button
+							size="sm"
+							variant="border"
+							color={template == 'mysql' ? 'blue' : 'dark'}
+							btnClasses={template == 'mysql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							on:click={() => {
+								script.language = Script.language.DENO
+								template = 'mysql'
+								initContent(script.language, script.kind, template)
 							}}
-							bind:value={script.kind}
+						>
+							<LanguageIcon lang="mysql" /><span class="ml-2">MySQL</span>
+						</Button>
+					</div>
+					<h2 class="border-b pb-1 mt-4">Advanced</h2>
+					<div>
+						<Button
+							color="light"
+							size="sm"
+							endIcon={{ icon: viewScriptKind ? faChevronUp : faChevronDown }}
+							on:click={() => (viewScriptKind = !viewScriptKind)}
+						>
+							Tag this script as having a specific purpose inside flows
+						</Button>
+					</div>
+					{#if viewScriptKind}
+						<div class="max-w-lg">
+							<RadioButton
+								label="Script Type"
+								options={[
+									['Common Script', Script.kind.SCRIPT],
+									[
+										{
+											title: 'Trigger Script',
+											desc: `First module of flows to trigger them based on watching changes external periodically using an internal state`
+										},
+										Script.kind.TRIGGER
+									],
+									[
+										{
+											title: 'Error Handler',
+											desc: `Handle errors for flows after all retries attempts have been exhausted`
+										},
+										Script.kind.FAILURE
+									],
+									[
+										{
+											title: 'Approval Script',
+											desc: `Send notification externally to ask for approval to continue a flow`
+										},
+										Script.kind.APPROVAL
+									]
+
+									// ['Command Handler', Script.kind.COMMAND]
+								]}
+								on:change={(e) => {
+									if (isInitialCode(script.content)) {
+										template = 'script'
+										initContent(script.language, e.detail, template)
+									}
+								}}
+								bind:value={script.kind}
+							/>
+						</div>
+					{/if}
+					<div class="ml-3">
+						<Toggle
+							bind:checked={script.is_template}
+							options={{ right: 'Save as a workspace template' }}
 						/>
 					</div>
-				{/if}
-				<div class="ml-3">
-					<Toggle
-						bind:checked={script.is_template}
-						options={{ right: 'Save as a workspace template' }}
-					/>
 				</div>
-			</div>
-		</CenteredPage>
-	{:else if step === 2}
-		<ScriptEditor
-			bind:schema={script.schema}
-			path={script.path}
-			bind:code={script.content}
-			lang={script.language}
-			{initialArgs}
-		/>
-	{:else if step === 3}
-		<CenteredPage>
-			<ScriptSchema
-				bind:summary={script.summary}
-				bind:description={script.description}
+			</CenteredPage>
+		{:else if step === 2}
+			<ScriptEditor
 				bind:schema={script.schema}
+				path={script.path}
+				bind:code={script.content}
+				lang={script.language}
+				{initialArgs}
+				{kind}
 			/>
-		</CenteredPage>
-	{/if}
-</div>
+		{:else if step === 3}
+			<CenteredPage>
+				<ScriptSchema bind:description={script.description} bind:schema={script.schema} />
+			</CenteredPage>
+		{/if}
+	</div>
+{:else}
+	Script Builder not available to operators
+{/if}

package/components/ScriptBuilder.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         script: Script;
         initialPath?: string | undefined;
-        template?: "script" | "pgsql" | undefined;
+        template?: "script" | "pgsql" | "mysql" | undefined;
         initialArgs?: Record<string, any> | undefined;
     };
     events: {

package/components/ScriptEditor.svelte

@@ -19,6 +19,7 @@ export let schema = emptySchema();
 export let code;
 export let path;
 export let lang;
+export let kind = undefined;
 export let initialArgs = {};
 export let fixedOverflowWidgets = true;
 let websocketAlive = { pyright: false, black: false, deno: false, go: false };
@@ -100,6 +101,7 @@ onMount(() => {
 			{editor}
 			{lang}
 			{websocketAlive}
+			{kind}
 		/>
 		<div class="py-1">
 			<Button
@@ -120,7 +122,7 @@ onMount(() => {
 <SplitPanesWrapper panesClass="!overflow-visible">
 	<Pane size={60} minSize={10} class="!overflow-visible">
 		<div
-			class="p-2 h-full !overflow-visible"
+			class="pl-2 h-full !overflow-visible"
 			on:mouseleave={() => {
 				inferSchema()
 			}}
@@ -147,50 +149,52 @@ onMount(() => {
 		</div>
 	</Pane>
 	<Pane size={40} minSize={10}>
-		<Splitpanes horizontal>
-			<Pane size={33}>
-				<div class="w-full border-b p-2 text-xs font-bold">Preview</div>
-				<div class="px-2">
-					<div class="break-words relative font-sans">
-						<SchemaForm compact {schema} bind:args bind:isValid />
+		<div class="flex flex-col h-full">
+			<div class="px-2 w-full border-b py-1">
+				{#if testIsLoading}
+					<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
+						<WindmillIcon
+							white={true}
+							class="animate-[spin_5s_linear_infinite] mr-2 text-white"
+							height="20px"
+							width="20px"
+						/>
+						Cancel
+					</Button>
+				{:else}
+					<Button
+						on:click={runTest}
+						btnClasses="w-full"
+						size="xs"
+						startIcon={{
+							icon: faPlay,
+							classes: 'animate-none'
+						}}
+					>
+						{#if testIsLoading}Running{:else}Test <Kbd class="ml-4 text-5xs -my-0.5">Ctrl+Enter</Kbd
+							>{/if}
+					</Button>
+				{/if}
+			</div>
+			<Splitpanes horizontal>
+				<Pane size={33}>
+					<div class="px-2">
+						<div class="break-words relative font-sans">
+							<SchemaForm compact {schema} bind:args bind:isValid />
+						</div>
 					</div>
-				</div>
-			</Pane>
-			<Pane size={67}>
-				<div class="px-2 py-1 w-full">
-					{#if testIsLoading}
-						<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
-							<WindmillIcon
-								white={true}
-								class="animate-[spin_5s_linear_infinite] mr-2 text-white"
-								height="20px"
-								width="20px"
-							/>
-							Cancel
-						</Button>
-					{:else}
-						<Button
-							on:click={runTest}
-							btnClasses="w-full"
-							size="xs"
-							startIcon={{
-								icon: faPlay,
-								classes: 'animate-none'
-							}}
-						>
-							{#if testIsLoading}Running{:else}Test <Kbd class="ml-4 text-5xs">Ctrl+Enter</Kbd>{/if}
-						</Button>
-					{/if}
-				</div>
-				<LogPanel
-					{path}
-					{lang}
-					previewJob={testJob}
-					{pastPreviews}
-					previewIsLoading={testIsLoading}
-					bind:lastSave
-				/>
-			</Pane>
-		</Splitpanes>
+				</Pane>
+				<Pane size={67}>
+					<LogPanel
+						{path}
+						{lang}
+						previewJob={testJob}
+						{pastPreviews}
+						previewIsLoading={testIsLoading}
+						bind:lastSave
+					/>
+				</Pane>
+			</Splitpanes>
+		</div>
 	</Pane>
 </SplitPanesWrapper>

package/components/ScriptEditor.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         code: string;
         path: string | undefined;
         lang: Preview.language;
+        kind?: 'script' | 'trigger' | 'approval' | undefined;
         initialArgs?: Record<string, any> | undefined;
         fixedOverflowWidgets?: boolean | undefined;
     };

package/components/ScriptPicker.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         scriptPath?: string | undefined;
         allowFlow?: boolean | undefined;
         allowHub?: boolean | undefined;
-        itemKind?: "script" | "flow" | "hub" | undefined;
+        itemKind?: "flow" | "script" | "hub" | undefined;
         kind?: Script.kind | undefined;
     };
     events: {

package/components/ScriptSchema.svelte

@@ -4,10 +4,9 @@ import Tabs from './common/tabs/Tabs.svelte';
 import TabContent from './common/tabs/TabContent.svelte';
 import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
-import SvelteMarkdown from 'svelte-markdown';
 import { Alert } from './common';
+import autosize from 'svelte-autosize';
 export let schema;
-export let summary;
 export let description;
 export function setSchema(newSchema) {
     schema = newSchema;
@@ -18,37 +17,19 @@ export function setSchema(newSchema) {
 	<h1 class="my-4">Advanced</h1>
 
 	<Tabs selected="ui">
-		<Tab value="ui">UI</Tab>
+		<Tab value="ui">Description & Arguments refinement</Tab>
 		<Tab value="jsonschema">JSON Schema</Tab>
 		<svelte:fragment slot="content">
 			<TabContent value="ui">
-				<h2 class="border-b pb-1 mt-6">Display</h2>
-				<div class="grid grid-cols-3 gap-2 mt-4">
-					<label>
-						<div class="text-gray-700 text-sm">Summary</div>
-						<textarea bind:value={summary} placeholder="Edit summary" class="text-sm" />
-					</label>
-					<label class="col-span-2">
-						<div class="text-gray-700 text-sm">Description</div>
-						<textarea
-							bind:value={description}
-							placeholder="Edit description. Markdown accepted."
-							class="text-sm"
-						/>
-						<div class="mt-1 px-2">
-							{#if description}
-								<div
-									class="prose !max-w-full !max-h-48 text-xs shadow-inner shadow-blue overflow-auto mt-1"
-								>
-									<SvelteMarkdown source={description} />
-								</div>
-							{:else}
-								<div class="text-xs text-gray-500"> Enter a description to see the preview </div>
-							{/if}
-						</div>
-					</label>
-				</div>
-				<h2 class="border-b pb-1 my-4">Arguments</h2>
+				<h2 class="border-b pb-1 mt-6 mb-4">Description</h2>
+				<textarea
+					use:autosize
+					bind:value={description}
+					placeholder="Edit description"
+					class="text-sm"
+				/>
+
+				<h2 class="border-b pb-1 mb-4 mt-8">Arguments</h2>
 				<Alert type="info" title="Synchronized with main signature">
 					Argument names, being required or not, and default values are derived from the main
 					signature of step 2 and cannot be edited directly. Change the main signature to edit them.

package/components/ScriptSchema.svelte.d.ts

@@ -3,7 +3,6 @@ import type { Schema } from '../common';
 declare const __propDef: {
     props: {
         schema: Schema;
-        summary: string;
         description: string | undefined;
         setSchema?: ((newSchema: Schema) => void) | undefined;
     };

package/components/SharedBadge.svelte

@@ -1,6 +1,5 @@
 <script>import { userStore } from '../stores';
-import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons';
-import { Users } from 'svelte-lucide';
+import { Users } from 'lucide-svelte';
 import Badge from './common/badge/Badge.svelte';
 import Tooltip from './Tooltip.svelte';
 export let extraPerms = {};
@@ -50,7 +49,7 @@ $: {
 
 {#if kind === 'read' || kind === 'write'}
 	<Badge capitalize color="blue" baseClass="border border-blue-200 flex gap-1 items-center">
-		<Users size="12" />
+		<Users size={12} />
 		{kind}
 		{#if reason}
 			<Tooltip><span class="normal-case">{reason}</span></Tooltip>