windmill-components 1.85.0 → 1.87.0

package/components/SchemaModal.svelte

@@ -1,193 +0,0 @@
-<script context="module">export const ARG_TYPES = ['integer', 'number', 'string', 'boolean', 'object', 'array'];
-export function schemaToModal(schema, name, required) {
-    return {
-        name,
-        selectedType: schema.type,
-        description: schema.description,
-        pattern: schema.pattern,
-        default: schema.default,
-        contentEncoding: schema.contentEncoding,
-        format: schema.format,
-        required
-    };
-}
-export const DEFAULT_PROPERTY = {
-    selectedType: 'string',
-    description: '',
-    name: '',
-    required: false
-};
-</script>
-
-<script>import { createEventDispatcher } from 'svelte';
-import ArgInput from './ArgInput.svelte';
-import StringTypeNarrowing from './StringTypeNarrowing.svelte';
-import Required from './Required.svelte';
-import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
-import { Button } from './common';
-import Toggle from './Toggle.svelte';
-import DrawerContent from './common/drawer/DrawerContent.svelte';
-import Drawer from './common/drawer/Drawer.svelte';
-export let property = DEFAULT_PROPERTY;
-export let error = '';
-export let editing = false;
-export let oldArgName = undefined;
-let resource_type = undefined;
-const dispatch = createEventDispatcher();
-let drawer;
-function handleKeyUp(event) {
-    const key = event.key;
-    if (key === 'Enter') {
-        dispatch('save');
-    }
-}
-export function openDrawer() {
-    drawer.openDrawer();
-    resource_type = property.format?.substring(5);
-}
-export function closeDrawer() {
-    drawer.closeDrawer();
-}
-function clearModal() {
-    error = '';
-    editing = false;
-    oldArgName = undefined;
-    property.name = DEFAULT_PROPERTY.name;
-    property.default = DEFAULT_PROPERTY.default;
-    property.description = DEFAULT_PROPERTY.description;
-    property.required = DEFAULT_PROPERTY.required;
-    property.selectedType = DEFAULT_PROPERTY.selectedType;
-    property.format = undefined;
-    resource_type = undefined;
-    drawer.closeDrawer();
-}
-$: if (property.selectedType == 'object' && resource_type) {
-    property.format = resource_type ? `$res:${resource_type}` : undefined;
-}
-$: if (property.name == '') {
-    error = 'Name is required';
-}
-else {
-    error = '';
-}
-</script>
-
-<svelte:window on:keyup={handleKeyUp} />
-
-<Drawer bind:this={drawer} placement="right">
-	<DrawerContent on:close={clearModal} title="Add an argument">
-		<div class="flex flex-col gap-6">
-			<div>
-				<label class="block">
-					<div class="mb-1 font-semibold text-gray-700">
-						Name
-						<Required required={true} />
-					</div>
-					<!-- svelte-ignore a11y-autofocus -->
-					<input
-						autofocus
-						autocomplete="off"
-						type="text"
-						placeholder="Enter a name"
-						bind:value={property.name}
-						class={error === ''
-							? ''
-							: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
-					/>
-				</label>
-				<div class="text-red-600 text-2xs">{error}</div>
-			</div>
-
-			<label class="block">
-				<div class="mb-1 font-semibold text-gray-700">
-					Description
-					<Required required={false} />
-				</div>
-				<textarea placeholder="Enter a description" rows="3" bind:value={property.description} />
-			</label>
-			<div>
-				<div class="mb-1 font-semibold text-gray-700">Type<Required required={true} /></div>
-				<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2 w-full">
-					{#each ARG_TYPES as argType}
-						{@const isSelected = argType == property.selectedType}
-						<Button
-							size="sm"
-							variant="border"
-							color={isSelected ? 'blue' : 'dark'}
-							btnClasses={isSelected ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-							on:click={() => {
-								property.selectedType = argType
-								property.format = undefined
-								property.contentEncoding = undefined
-								property.enum_ = undefined
-								property.pattern = undefined
-							}}
-						>
-							{argType}
-						</Button>
-					{/each}
-					<Button
-						size="sm"
-						variant="border"
-						color={!property.selectedType ? 'blue' : 'dark'}
-						btnClasses={!property.selectedType ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-						on:click={() => {
-							property.selectedType = undefined
-						}}
-					>
-						any
-					</Button>
-				</div>
-			</div>
-			<div class="flex flex-row gap-x-4">
-				<ArgInput
-					label="Default"
-					bind:value={property.default}
-					type={property.selectedType}
-					pattern={property.pattern}
-				/>
-				<Toggle
-					options={{ right: 'Required' }}
-					class="mt-5 !justify-start"
-					bind:checked={property.required}
-				/>
-			</div>
-			{#if property.selectedType !== 'boolean'}
-				<div>
-					<div class="font-semibold text-gray-700 mb-1">Advanced</div>
-					{#if property.selectedType == 'string'}
-						<StringTypeNarrowing
-							bind:format={property.format}
-							bind:pattern={property.pattern}
-							bind:enum_={property.enum_}
-							bind:contentEncoding={property.contentEncoding}
-						/>
-					{:else if property.selectedType == 'array'}
-						<select bind:value={property.items}>
-							<option value={undefined}>No specific item type</option>
-							<option value={{ type: 'string' }}> Items are strings</option>
-							<option value={{ type: 'number' }}>Items are numbers</option>
-						</select>
-					{:else if property.selectedType == 'object'}
-						<h3 class="mb-2 font-bold mt-4">Resource type</h3>
-						<ObjectTypeNarrowing bind:format={property.format} />
-					{:else}
-						<p>No advanced configuration for this type</p>
-					{/if}
-				</div>
-			{/if}
-		</div>
-
-		<svelte:fragment slot="actions">
-			<Button
-				color="blue"
-				disabled={!property.name || !property.selectedType || error != ''}
-				on:click={() => {
-					dispatch('save')
-				}}
-			>
-				Save
-			</Button>
-		</svelte:fragment>
-	</DrawerContent>
-</Drawer>

package/components/ScriptBuilder.svelte

@@ -1,341 +0,0 @@
-<script>import { Script, ScriptService } from '../gen';
-import { goto } from '$app/navigation';
-import { page } from '$app/stores';
-import { inferArgs } from '../infer';
-import { initialCode } from '../script_helpers';
-import { userStore, workspaceStore } from '../stores';
-import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
-import Path from './Path.svelte';
-import ScriptEditor from './ScriptEditor.svelte';
-import ScriptSchema from './ScriptSchema.svelte';
-import CenteredPage from './CenteredPage.svelte';
-import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import { Button, ButtonPopup, ButtonPopupItem, Kbd } from './common';
-import { faPen, faSave } from '@fortawesome/free-solid-svg-icons';
-import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte';
-import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
-import Tooltip from './Tooltip.svelte';
-import SettingSection from './SettingSection.svelte';
-export let script;
-export let initialPath = '';
-export let template = 'script';
-export let initialArgs = {};
-export let lockedLanguage = false;
-export let topHash = undefined;
-const langs = [
-    ['Typescript', Script.language.DENO],
-    ['Python', Script.language.PYTHON3],
-    ['Go', Script.language.GO],
-    ['Bash', Script.language.BASH]
-];
-const scriptKindOptions = [
-    {
-        value: Script.kind.SCRIPT,
-        title: 'Action'
-    },
-    {
-        value: Script.kind.TRIGGER,
-        title: 'Trigger',
-        desc: 'First module of flows to trigger them based on external changes. These kind of scripts are usually running on a schedule to periodically look for changes.'
-    },
-    {
-        value: Script.kind.APPROVAL,
-        title: 'Approval',
-        desc: 'Send notifications externally to ask for approval to continue a flow.'
-    },
-    {
-        value: Script.kind.FAILURE,
-        title: 'Error Handler',
-        desc: 'Handle errors in flows after all retry attempts have been exhausted.'
-    }
-];
-let pathError = '';
-let summaryC = undefined;
-let pathC = undefined;
-let loadingSave = false;
-$: setQueryWithoutLoad($page.url, [{ key: 'state', value: encodeState(script) }]);
-$: step = Number($page.url.searchParams.get('step')) || 1;
-if (script.content == '') {
-    initContent(script.language, script.kind, template);
-}
-function initContent(language, kind, template) {
-    script.content = initialCode(language, kind, template);
-}
-async function editScript(leave) {
-    loadingSave = true;
-    try {
-        $dirtyStore = false;
-        localStorage.removeItem(script.path);
-        script.schema = script.schema ?? emptySchema();
-        try {
-            await inferArgs(script.language, script.content, script.schema);
-        }
-        catch (error) {
-            sendUserToast(`The main signature was not parsable. This script is considered to be without main function`);
-        }
-        const newHash = await ScriptService.createScript({
-            workspace: $workspaceStore,
-            requestBody: {
-                path: script.path,
-                summary: script.summary,
-                description: script.description ?? '',
-                content: script.content,
-                parent_hash: script.hash != '' ? topHash ?? script.hash : undefined,
-                schema: script.schema,
-                is_template: script.is_template,
-                language: script.language,
-                kind: script.kind
-            }
-        });
-        if (leave) {
-            history.replaceState(history.state, '', `/scripts/edit/${newHash}?step=2`);
-            goto(`/scripts/get/${newHash}?workspace_id=${$workspaceStore}`);
-        }
-        else {
-            await goto(`/scripts/edit/${newHash}?step=2`);
-            script.hash = newHash;
-            topHash = undefined;
-        }
-    }
-    catch (error) {
-        sendUserToast(`Error while saving the script: ${error.body || error.message}`, true);
-    }
-    loadingSave = false;
-}
-async function changeStep(step) {
-    if (step > 1) {
-        script.schema = script.schema ?? emptySchema();
-        try {
-            await inferArgs(script.language, script.content, script.schema);
-        }
-        catch (error) {
-            console.info('The main signature was not parsable. This script is considered to be without main function');
-        }
-    }
-    goto(`?step=${step}`);
-}
-$: kind = script.kind;
-function onKeyDown(event) {
-    if (event.key == 'Enter' && step == 1) {
-        changeStep(2);
-    }
-}
-</script>
-
-{#if !$userStore?.operator}
-	<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>
-
-					<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' : 'inline-flex gap-2'}
-						disabled={step === 1 && pathError !== ''}
-						on:click={() => changeStep(step + 1)}
-					>
-						Next {#if step == 1}<Kbd>Enter</Kbd>{/if}
-					</Button>
-					<ButtonPopup
-						loading={loadingSave}
-						size="sm"
-						variant={step == 1 ? 'border' : 'contained'}
-						disabled={step === 1 && pathError !== ''}
-						startIcon={{ icon: faSave }}
-						on:click={() => editScript(false)}
-					>
-						<svelte:fragment slot="main">Save</svelte:fragment>
-						<ButtonPopupItem on:click={() => editScript(true)}>Save and exit</ButtonPopupItem>
-						{#if initialPath != ''}
-							<ButtonPopupItem
-								on:click={() => {
-									window.open(`/scripts/add?template=${initialPath}`)
-								}}>Fork</ButtonPopupItem
-							>
-						{/if}
-					</ButtonPopup>
-				</div>
-			</div>
-		</div>
-
-		<!-- metadata -->
-		{#if step === 1}
-			<CenteredPage>
-				<SettingSection title="Path" element="h2">
-					<Path
-						bind:this={pathC}
-						bind:error={pathError}
-						bind:path={script.path}
-						{initialPath}
-						on:enter={() => changeStep(2)}
-						namePlaceholder="script"
-						kind="script"
-					/>
-				</SettingSection>
-				<SettingSection title="Summary" element="h2">
-					<input
-						type="text"
-						bind:this={summaryC}
-						bind:value={script.summary}
-						placeholder="Short summary to be displayed when listed"
-					/>
-				</SettingSection>
-				<SettingSection title="Language" element="h2">
-					{#if lockedLanguage}
-						<div class="text-sm text-gray-600 italic mb-2">
-							As a forked script, the language '{script.language}' cannot be modified.
-						</div>
-					{/if}
-					<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)
-								}}
-								disabled={lockedLanguage}
-							>
-								<LanguageIcon {lang} />
-								<span class="ml-2 py-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]'}
-							disabled={lockedLanguage}
-							on:click={() => {
-								script.language = Script.language.DENO
-								template = 'pgsql'
-								initContent(script.language, script.kind, template)
-							}}
-						>
-							<LanguageIcon lang="pgsql" /><span class="ml-2 py-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 py-2">MySQL</span>
-						</Button> -->
-					</div>
-				</SettingSection>
-				<SettingSection
-					title="Script kind"
-					element="h3"
-					tooltip="Tag this script as having a specific purpose inside flows. If it won't be used in flows,
-				you don't have to worry about this."
-					accordion
-				>
-					<div class="flex flex-wrap gap-2">
-						{#each scriptKindOptions as { value, title, desc }}
-							{@const isPicked = script.kind === value}
-							<Button
-								size="sm"
-								variant="border"
-								color={isPicked ? 'blue' : 'dark'}
-								btnClasses="font-medium {isPicked ? '!bg-blue-50/75' : ''}"
-								on:click={() => {
-									template = 'script'
-									script.kind = value
-									initContent(script.language, value, template)
-								}}
-								disabled={lockedLanguage}
-							>
-								{title}
-								{#if desc}
-									<Tooltip class="mb-0.5 ml-1">
-										{desc}
-									</Tooltip>
-								{/if}
-							</Button>
-						{/each}
-					</div>
-				</SettingSection>
-			</CenteredPage>
-		{:else if step === 2}
-			<ScriptEditor
-				bind:schema={script.schema}
-				path={script.path}
-				bind:code={script.content}
-				lang={script.language}
-				{initialArgs}
-				{kind}
-			/>
-		{: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}
-
-<svelte:window on:keydown={onKeyDown} />

package/components/ScriptBuilder.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { Script } from '../gen';
-declare const __propDef: {
-    props: {
-        script: Script;
-        initialPath?: string | undefined;
-        template?: "script" | "pgsql" | "mysql" | undefined;
-        initialArgs?: Record<string, any> | undefined;
-        lockedLanguage?: boolean | undefined;
-        topHash?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    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 {};