windmill-components 1.28.7 → 1.35.1

package/components/SchemaViewer.svelte

@@ -2,77 +2,67 @@
 import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
 import TableCustom from './TableCustom.svelte';
+import Tab from './common/tabs/Tab.svelte';
+import TabContent from './common/tabs/TabContent.svelte';
+import Tabs from './common/tabs/Tabs.svelte';
 export let schema = emptySchema();
-let viewJsonSchema = false;
 </script>
 
 <div class="w-full">
-	<div class="flex flex-col sm:flex-row text-base">
-		<button
-			class="text-xs sm:text-base py-1 px-6 block hover:text-blue-500 focus:outline-noneborder-gray-200  {viewJsonSchema
-				? 'text-gray-500 '
-				: 'text-gray-700 font-semibold  '}"
-			on:click={() => (viewJsonSchema = false)}
-		>
-			arguments
-		</button><button
-			class="py-1 px-6 block hover:text-blue-500 focus:outline-none border-gray-200  {viewJsonSchema
-				? 'text-gray-700 font-semibold '
-				: 'text-gray-500'}"
-			on:click={() => (viewJsonSchema = true)}
-		>
-			advanced
-		</button>
-	</div>
-</div>
-<!--json schema or table view-->
-<div class="border-t py-1">
-	<div class={viewJsonSchema ? 'hidden' : ''}>
-		{#if schema && schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
-			<div class="flex flex-row">
-				<TableCustom>
-					<tr slot="header-row" class="underline">
-						<th>name</th>
-						<th>type</th>
-						<th>description</th>
-						<th>default</th>
-						<th>format</th>
-						<th>required</th>
-					</tr>
-					<tbody slot="body">
-						{#each Object.entries(schema.properties) as [name, property] (name)}
-							<tr>
-								<td>{name}</td>
-								<td
-									>{#if !property.type} any {:else} {property.type} {/if}</td
-								>
-								<td>{property.description}</td>
-								<td
-									>{property.default == '<function call>'
-										? '<function call>'
-										: property.default
-										? JSON.stringify(property.default)
-										: ''}</td
-								>
-								<td
-									>{property.format ?? ''}
-									{property.contentEncoding ? `(encoding: ${property.contentEncoding})` : ''}</td
-								>
-								<td
-									>{#if schema.required.includes(name)}
-										<span class="text-red-600 font-bold text-lg">*</span>
-									{/if}</td
-								>
+	<Tabs selected="arguments">
+		<Tab value="arguments">Arguments</Tab>
+		<Tab value="advanced">Advanced</Tab>
+		<svelte:fragment slot="content">
+			<TabContent value="arguments">
+				{#if schema && schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
+					<div class="flex flex-row">
+						<TableCustom>
+							<tr slot="header-row" class="underline">
+								<th>name</th>
+								<th>type</th>
+								<th>description</th>
+								<th>default</th>
+								<th>format</th>
+								<th>required</th>
 							</tr>
-						{/each}
-					</tbody>
-				</TableCustom>
-			</div>
-		{:else}
-			<div class="text-gray-700 text-xs italic">This script has no arguments</div>
-		{/if}
-	</div>
-	<div class={viewJsonSchema ? '' : 'hidden'}>
-		<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
-	</div>
+							<tbody slot="body">
+								{#each Object.entries(schema.properties) as [name, property] (name)}
+									<tr>
+										<td>{name}</td>
+										<td
+											>{#if !property.type} any {:else} {property.type} {/if}</td
+										>
+										<td>{property.description}</td>
+										<td
+											>{property.default == '<function call>'
+												? '<function call>'
+												: property.default
+												? JSON.stringify(property.default)
+												: ''}</td
+										>
+										<td
+											>{property.format ?? ''}
+											{property.contentEncoding
+												? `(encoding: ${property.contentEncoding})`
+												: ''}</td
+										>
+										<td
+											>{#if schema.required.includes(name)}
+												<span class="text-red-600 font-bold text-lg">*</span>
+											{/if}</td
+										>
+									</tr>
+								{/each}
+							</tbody>
+						</TableCustom>
+					</div>
+				{:else}
+					<div class="text-gray-700 text-xs italic">This script has no arguments</div>
+				{/if}
+			</TabContent>
+			<TabContent value="advanced">
+				<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
+			</TabContent>
+		</svelte:fragment>
+	</Tabs>
 </div>

package/components/ScriptBuilder.svelte

@@ -2,7 +2,7 @@
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { inferArgs } from '../infer';
-import { DENO_INIT_CODE, DENO_INIT_CODE_TRIGGER, initialCode } from '../script_helpers';
+import { DENO_INIT_CODE, DENO_INIT_CODE_TRIGGER, initialCode, POSTGRES_INIT_CODE } from '../script_helpers';
 import { workspaceStore } from '../stores';
 import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
 import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
@@ -13,23 +13,25 @@ import RadioButton from './RadioButton.svelte';
 import Required from './Required.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
 import ScriptSchema from './ScriptSchema.svelte';
+import CenteredPage from './CenteredPage.svelte';
 let editor;
 let scriptSchema;
-$: step = Number($page.url.searchParams.get('step')) || 1;
 export let script;
 export let initialPath = '';
+export let template = undefined;
 let pathError = '';
 $: setQueryWithoutLoad($page.url, 'state', encodeState(script));
+$: step = Number($page.url.searchParams.get('step')) || 1;
 $: {
     if (script.language == 'python3') {
         script.is_trigger = false;
     }
 }
 if (script.content == '') {
-    initContent(script.language, script.is_trigger);
+    initContent(script.language, template);
 }
-function initContent(lang, is_trigger) {
-    script.content = initialCode(lang, is_trigger);
+function initContent(language, template) {
+    script.content = initialCode(language, template == 'pgsql' ? 'pgsql' : script.is_trigger ? 'trigger' : undefined);
 }
 async function editScript() {
     try {
@@ -81,11 +83,11 @@ onDestroy(() => {
 });
 </script>
 
-<div class="flex flex-col h-screen max-w-screen-lg xl:-ml-20 xl:pl-4 w-full -mt-4 pt-4 md:mx-10 ">
+<div class="flex flex-col h-screen">
 	<!-- Nav between steps-->
-	<div class="flex flex-col w-full">
-		<div class="justify-between flex flex-row drop-shadow-sm w-full mt-4">
-			<div class="wizard-nav flex flex-row w-full">
+	<div class="flex flex-col w-full px-4 py-2 border-b shadow-sm">
+		<div class="justify-between flex flex-row drop-shadow-sm w-full">
+			<div class="flex flex-row w-full">
 				<Breadcrumb>
 					<BreadcrumbItem>
 						<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
@@ -119,68 +121,92 @@ onDestroy(() => {
 						class="default-button px-6 max-h-8"
 						on:click={() => {
 							changeStep(step + 1)
-						}}>Next</button
+						}}
 					>
-					{#if step == 2}
-						<button
-							class="default-button-secondary px-6 max-h-8 mr-2"
-							on:click={async () => {
-								await inferSchema()
-								editScript()
-							}}>Save (commit)</button
-						>
-					{/if}
+						Next
+					</button>
 				{:else}
-					<button class="default-button px-6 self-end" on:click={editScript}>Save (commit)</button>
+					<button class="default-button px-6 self-end" on:click={editScript}>Save</button>
+				{/if}
+				{#if step > 1}
+					<button
+						class="default-button-secondary px-6 max-h-8 mr-2"
+						on:click={async () => {
+							changeStep(step - 1)
+						}}
+					>
+						Back
+					</button>
+				{/if}
+				{#if step == 2}
+					<button
+						class="default-button-secondary px-6 max-h-8 mr-2"
+						on:click={async () => {
+							await inferSchema()
+							editScript()
+						}}
+					>
+						Save (commit)
+					</button>
 				{/if}
 			</div>
 		</div>
-		<div class="flex flex-row-reverse">
-			<span class="my-1 text-sm text-gray-500 italic">
-				{#if script.hash != ''} Editing from {script.hash} with path{/if}
-				{#if initialPath && initialPath != script.path} {initialPath} &rightarrow; {/if}
-				{script.path}
-			</span>
-		</div>
 	</div>
 
 	<!-- metadata -->
 	{#if step === 1}
-		<div class="grid grid-cols-1 gap-6 max-w-7xl">
-			<Path
-				bind:error={pathError}
-				bind:path={script.path}
-				{initialPath}
-				namePlaceholder="example/my/script"
-				kind="script"
-			>
-				<div slot="ownerToolkit">
-					Script permissions depend on their path. Select the group <span class="font-mono"
-						>all</span
-					>
-					to share your script, and <span class="font-mono">user</span> to keep it private.
-					<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
+		<CenteredPage>
+			<div class="space-y-6">
+				<Path
+					bind:error={pathError}
+					bind:path={script.path}
+					{initialPath}
+					on:enter={() => changeStep(2)}
+					namePlaceholder="my_script"
+					kind="script"
+				>
+					<div slot="ownerToolkit">
+						Script permissions depend on their path. Select the group
+						<span class="font-mono"> all </span>
+						to share your script, and <span class="font-mono">user</span> to keep it private.
+						<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
+					</div>
+				</Path>
+				<h3 class="text-gray-700 border-b">Language</h3>
+				<div class="max-w-md">
+					<RadioButton
+						label="Language"
+						options={[
+							['Typescript (Deno)', 'deno'],
+							['Python 3.10', 'python3']
+						]}
+						on:change={(e) => initContent(e.detail, template)}
+						bind:value={script.language}
+					/>
 				</div>
-			</Path>
-			<h3 class="text-gray-700 pb-1 border-b">Language</h3>
-			<div class="max-w-md">
-				<RadioButton
-					label="Language"
-					options={[
-						['Typescript (Deno)', 'deno'],
-						['Python 3.10', 'python3']
-					]}
-					on:change={(e) => initContent(e.detail, script.is_trigger)}
-					bind:value={script.language}
-				/>
-			</div>
-			<h3 class="text-gray-700 pb-1 border-b">Metadata</h3>
+				{#if script.language == 'deno'}
+					<h4 class="text-gray-700  border-b">Template</h4>
+
+					<div class="max-w-md">
+						<RadioButton
+							label="Template"
+							options={[
+								['None', undefined],
+								['PostgreSQL', 'pgsql']
+							]}
+							on:change={(e) => initContent(script.language, e.detail)}
+							bind:value={template}
+						/>
+					</div>
+				{/if}
+
+				<h3 class="text-gray-700 pb-1 border-b">Metadata</h3>
 
-			<label class="block ">
-				<span class="text-gray-700">Summary <Required required={false} /></span>
-				<textarea
-					bind:value={script.summary}
-					class="
+				<label class="block ">
+					<span class="text-gray-700">Summary <Required required={false} /></span>
+					<textarea
+						bind:value={script.summary}
+						class="
 					mt-1
 					block
 					w-full
@@ -189,17 +215,17 @@ onDestroy(() => {
 					shadow-sm
 					focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
 					"
-					placeholder="A very short summary of the script displayed when the script is listed"
-					rows="1"
-				/>
-			</label>
-			<label class="block" for="inp">
-				<span class="text-gray-700"
-					>Description<Required required={false} detail="accept markdown formatting" />
-					<textarea
-						id="inp"
-						bind:value={script.description}
-						class="
+						placeholder="A very short summary of the script displayed when the script is listed"
+						rows="1"
+					/>
+				</label>
+				<label class="block" for="inp">
+					<span class="text-gray-700"
+						>Description<Required required={false} detail="accept markdown formatting" />
+						<textarea
+							id="inp"
+							bind:value={script.description}
+							class="
 					mt-1
 					block
 					w-full
@@ -208,64 +234,61 @@ onDestroy(() => {
 					shadow-sm
 					focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
 					"
-						placeholder="A description to help users understand what this script does and how to use it."
-						rows="3"
-					/>
-				</span></label
-			>
+							placeholder="A description to help users understand what this script does and how to use it."
+							rows="3"
+						/>
+					</span>
+				</label>
 
-			<label class="block">
-				<span class="text-gray-700 mr-2">Save as template</span>
-				<input type="checkbox" bind:checked={script.is_template} />
-			</label>
+				<label class="block">
+					<span class="text-gray-700 mr-2">Save as template</span>
+					<input type="checkbox" bind:checked={script.is_template} />
+				</label>
 
-			<label class="block">
-				<span class="text-gray-700 mr-2">Save as trigger script</span>
-				<input
-					disabled={script.language == 'python3'}
-					type="checkbox"
-					bind:checked={script.is_trigger}
-					on:change={() => {
-						if (script.content == DENO_INIT_CODE || script.content == DENO_INIT_CODE_TRIGGER) {
-							initContent(script.language, script.is_trigger)
-						}
-					}}
-				/>
-			</label>
+				<label class="block">
+					<span class="text-gray-700 mr-2">Save as trigger script</span>
+					<input
+						disabled={script.language == 'python3'}
+						type="checkbox"
+						bind:checked={script.is_trigger}
+						on:change={() => {
+							if (
+								script.content == DENO_INIT_CODE ||
+								script.content == DENO_INIT_CODE_TRIGGER ||
+								script.content == POSTGRES_INIT_CODE
+							) {
+								initContent(script.language, template)
+							}
+						}}
+					/>
+				</label>
 
-			<div>
-				<h3 class="text-gray-700 ">Description rendered</h3>
-				<div
-					class="prose mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto"
-					style="max-height: 200px;"
-				>
-					<SvelteMarkdown source={script.description ?? ''} />
+				<div>
+					<h3 class="text-gray-700 ">Description rendered</h3>
+					<div
+						class="prose mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto"
+						style="max-height: 200px;"
+					>
+						<SvelteMarkdown source={script.description ?? ''} />
+					</div>
 				</div>
 			</div>
-		</div>
+		</CenteredPage>
 	{:else if step === 2}
-		<div class="flex-1 overflow-auto">
-			<ScriptEditor
-				bind:this={editor}
-				bind:schema={script.schema}
-				path={script.path}
-				bind:code={script.content}
-				lang={script.language}
-			/>
-		</div>
-	{:else if step === 3}
-		<ScriptSchema
-			bind:summary={script.summary}
-			bind:description={script.description}
+		<ScriptEditor
+			bind:this={editor}
 			bind:schema={script.schema}
+			path={script.path}
+			bind:code={script.content}
+			lang={script.language}
 		/>
+	{:else if step === 3}
+		<CenteredPage>
+			<ScriptSchema
+				bind:summary={script.summary}
+				bind:description={script.description}
+				bind:schema={script.schema}
+			/>
+		</CenteredPage>
 	{/if}
 </div>
-
-<style>
-	/* .wizard-nav {
-		@apply w-1/2 sm:w-1/4;
-	} */
-	.wizard-nav button {
-		max-height: 30px;
-	}</style>

package/components/ScriptBuilder.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         script: Script;
         initialPath?: string | undefined;
+        template?: 'pgsql' | undefined;
         setCode?: ((script: Script) => void) | undefined;
     };
     events: {