windmill-components 1.46.3 → 1.55.0

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';
@@ -14,15 +14,21 @@ import CenteredPage from './CenteredPage.svelte';
 import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 import { Button } from './common';
-import { faChevronDown, faChevronUp, faPen } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faChevronUp, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte';
 import Toggle from './Toggle.svelte';
+import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
 export let script;
 export let initialPath = '';
 export let template = 'script';
 export let initialArgs = {};
+const langs = [
+    ['Typescript', Script.language.DENO],
+    ['Python', Script.language.PYTHON3],
+    ['Go', Script.language.GO],
+    ['Bash', Script.language.BASH]
+];
 let viewScriptKind = script.kind !== Script.kind.SCRIPT;
-let viewTemplate = script.kind !== Script.kind.SCRIPT && script.language == Script.language.DENO;
 let pathError = '';
 let summaryC = undefined;
 let pathC = undefined;
@@ -67,224 +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-4 py-2 border-b shadow-sm">
-		<div class="justify-between flex flex-row w-full items-center overflow-x-auto scrollbar-hidden">
-			<div class="flex flex-row">
-				<Breadcrumb
-					items={['Metadata', 'Code', 'UI Customisation']}
-					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="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>
 
-			<div class="flex flex-row gap-x-2">
-				<Button
-					size="sm"
-					variant={step == 1 ? 'border' : 'contained'}
-					disabled={step === 1 && pathError !== ''}
-					btnClasses={step == 1 && initialPath == '' ? 'invisible' : ''}
-					on:click={editScript}>Save (commit)</Button
-				>
-				<Button
-					variant="border"
-					size="sm"
-					btnClasses={step == 1 ? 'invisible' : ''}
-					on:click={() => changeStep(step - 1)}
-				>
-					Back
-				</Button>
-				{#if step < 3}
+					<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>
-				{:else}
-					<Button size="sm" on:click={editScript}>Save</Button>
-				{/if}
-			</div>
-		</div>
-	</div>
-
-	<!-- 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="max-w-md">
-					<RadioButton
-						label="Language"
-						options={[
-							['Typescript (Deno)', 'deno'],
-							['Python 3.10', 'python3'],
-							['Go', 'go'],
-							['Bash', 'bash']
-						]}
-						on:change={(e) => initContent(e.detail, script.kind, template)}
-						bind:value={script.language}
-					/>
-				</div>
-				<h2 class="border-b pb-1 mt-4"> Metadata </h2>
-				<div>
 					<Button
-						color="light"
 						size="sm"
-						endIcon={{ icon: viewScriptKind ? faChevronUp : faChevronDown }}
-						on:click={() => (viewScriptKind = !viewScriptKind)}
+						variant={step == 1 ? 'border' : 'contained'}
+						disabled={step === 1 && pathError !== ''}
+						btnClasses={step == 1 && initialPath == '' ? 'invisible' : ''}
+						startIcon={{ icon: faSave }}
+						on:click={editScript}>Save</Button
 					>
-						Specialize the script as a specific module kind for 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
-								]
+			</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)
 							}}
-							bind:value={script.kind}
-						/>
+						>
+							<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)
+							}}
+						>
+							<LanguageIcon lang="mysql" /><span class="ml-2">MySQL</span>
+						</Button>
 					</div>
-				{/if}
-				{#if script.language == 'deno' && script.kind == Script.kind.SCRIPT}
-					<div
-						><Button
+					<h2 class="border-b pb-1 mt-4">Advanced</h2>
+					<div>
+						<Button
 							color="light"
 							size="sm"
-							endIcon={{ icon: viewTemplate ? faChevronUp : faChevronDown }}
-							on:click={() => (viewTemplate = !viewTemplate)}
+							endIcon={{ icon: viewScriptKind ? faChevronUp : faChevronDown }}
+							on:click={() => (viewScriptKind = !viewScriptKind)}
 						>
-							Use a predefined template specific to this language and script kind
+							Tag this script as having a specific purpose inside flows
 						</Button>
 					</div>
-					{#if viewTemplate}
+					{#if viewScriptKind}
 						<div class="max-w-lg">
 							<RadioButton
-								label="Template"
+								label="Script Type"
 								options={[
-									['Standard', 'script'],
-									['PostgreSQL Prepared Statement', 'pgsql']
+									['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) => initContent(script.language, script.kind, e.detail)}
-								bind:value={template}
+								on:change={(e) => {
+									if (isInitialCode(script.content)) {
+										template = 'script'
+										initContent(script.language, e.detail, template)
+									}
+								}}
+								bind:value={script.kind}
 							/>
 						</div>
 					{/if}
-				{/if}
-				<div class="ml-3">
-					<Toggle
-						bind:checked={script.is_template}
-						options={{ right: 'Save as a workspace template' }}
-					/>
+					<div class="ml-3">
+						<Toggle
+							bind:checked={script.is_template}
+							options={{ right: 'Save as a workspace template' }}
+						/>
+					</div>
 				</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: {
@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ScriptBuilderProps = typeof __propDef.props;
-export declare type ScriptBuilderEvents = typeof __propDef.events;
-export declare type ScriptBuilderSlots = typeof __propDef.slots;
+export type ScriptBuilderProps = typeof __propDef.props;
+export type ScriptBuilderEvents = typeof __propDef.events;
+export type ScriptBuilderSlots = typeof __propDef.slots;
 export default class ScriptBuilder extends SvelteComponentTyped<ScriptBuilderProps, ScriptBuilderEvents, ScriptBuilderSlots> {
 }
 export {};

package/components/ScriptEditor.svelte

@@ -1,7 +1,7 @@
 <script>import { CompletedJob, Job, JobService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
 import { emptySchema, scriptLangToEditorLang } from '../utils';
-import { faPlay, faRotateRight } from '@fortawesome/free-solid-svg-icons';
+import { faPlay } from '@fortawesome/free-solid-svg-icons';
 import Editor from './Editor.svelte';
 import { inferArgs } from '../infer';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
@@ -13,14 +13,15 @@ import TestJobLoader from './TestJobLoader.svelte';
 import { onMount } from 'svelte';
 import { Button, Kbd } from './common';
 import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte';
-import Tooltip from './Tooltip.svelte';
 import WindmillIcon from './icons/WindmillIcon.svelte';
 // Exported
 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 };
 let width = 1200;
 // Internal state
@@ -92,7 +93,7 @@ onMount(() => {
 
 <svelte:window on:keydown={onKeyDown} />
 
-<div class="border-b-2 shadow-sm p-1 pr-4" bind:clientWidth={width}>
+<div class="border-b-2 shadow-sm px-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
 		<EditorBar
 			{validCode}
@@ -100,26 +101,28 @@ onMount(() => {
 			{editor}
 			{lang}
 			{websocketAlive}
+			{kind}
 		/>
-
-		<Button
-			target="_blank"
-			href="https://github.com/windmill-labs/windmill-gh-action-deploy"
-			color="light"
-			size="sm"
-			btnClasses="mr-1 hidden md:block"
-			startIcon={{
-				icon: faGithub
-			}}
-		>
-			Sync from Github
-		</Button>
+		<div class="py-1">
+			<Button
+				target="_blank"
+				href="https://github.com/windmill-labs/windmill/tree/main/cli"
+				color="light"
+				size="xs"
+				btnClasses="mr-1 hidden md:block"
+				startIcon={{
+					icon: faGithub
+				}}
+			>
+				Sync from Github
+			</Button>
+		</div>
 	</div>
 </div>
-<SplitPanesWrapper>
-	<Pane size={60} minSize={10}>
+<SplitPanesWrapper panesClass="!overflow-visible">
+	<Pane size={60} minSize={10} class="!overflow-visible">
 		<div
-			class="p-2 h-full"
+			class="pl-2 h-full !overflow-visible"
 			on:mouseleave={() => {
 				inferSchema()
 			}}
@@ -128,6 +131,7 @@ onMount(() => {
 				bind:code
 				bind:websocketAlive
 				bind:this={editor}
+				on:change={() => inferSchema()}
 				cmdEnterAction={async () => {
 					await inferSchema()
 					runTest()
@@ -137,62 +141,60 @@ onMount(() => {
 					localStorage.setItem(path ?? 'last_save', code)
 					lastSave = code
 				}}
-				class="flex flex-1 h-full"
+				class="flex flex-1 h-full !overflow-visible"
 				lang={scriptLangToEditorLang(lang)}
 				automaticLayout={true}
+				{fixedOverflowWidgets}
 			/>
 		</div>
 	</Pane>
 	<Pane size={40} minSize={10}>
-		<Splitpanes horizontal>
-			<Pane size={33}>
-				<div class="w-full  bg-gray-100 px-2 text-sm"
-					>Preview <Tooltip>
-						To recompute the input schema press <Kbd>Ctrl/Cmd</Kbd> + <Kbd>S</Kbd> or move the focus
-						outside of the text editor
-					</Tooltip></div
-				>
-				<div class="px-2">
-					<div class="break-words relative font-sans">
-						<SchemaForm {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'
-							}}
-						>
-							{testIsLoading ? 'Running' : 'Test (Ctrl+Enter)'}
-						</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>