windmill-components 1.309.7 → 1.352.0

package/package/components/schema/FlowPropertyEditor.svelte

@@ -0,0 +1,393 @@
+<script>import Alert from '../common/alert/Alert.svelte';
+import Label from '../Label.svelte';
+import Toggle from '../Toggle.svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
+import { createEventDispatcher } from 'svelte';
+import ArgInput from '../ArgInput.svelte';
+import ObjectTypeNarrowing from '../ObjectTypeNarrowing.svelte';
+import Tabs from '../common/tabs/Tabs.svelte';
+import { Tab, TabContent } from '../common';
+import LightweightArgInput from '../LightweightArgInput.svelte';
+import EditableSchemaDrawer from './EditableSchemaDrawer.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import Button from '../common/button/Button.svelte';
+import { Pen, Plus, Trash2 } from 'lucide-svelte';
+import Popup from '../common/popup/Popup.svelte';
+import { deepEqual } from 'fast-equals';
+export let format = '';
+export let contentEncoding = undefined;
+export let type = undefined;
+export let oneOf = undefined;
+export let required = false;
+export let pattern = undefined;
+export let password = false;
+export let variableEditor = undefined;
+export let itemPicker = undefined;
+export let nullable = false;
+export let defaultValue = undefined;
+export let propsNames = [];
+export let showExpr = undefined;
+export let extra = {};
+export let customErrorMessage = undefined;
+export let itemsType = undefined;
+export let properties = {};
+export let order = [];
+export let requiredProperty = [];
+export let displayWebhookWarning = true;
+export let lightweightMode = false;
+function getOneOfWithoutLabel(oneOf) {
+    return oneOf.map((v) => ({
+        ...v,
+        properties: Object.fromEntries(Object.entries(v.properties ?? {}).filter(([k, v]) => k !== 'label'))
+    }));
+}
+let oneOfSelected = undefined;
+function oneOfUpdate(oneOf) {
+    if (oneOf && oneOf.length >= 2) {
+        if (!oneOfSelected) {
+            oneOfSelected = oneOf[0].title;
+        }
+        if (!schema.oneOf ||
+            !deepEqual(oneOf.map((v) => [v.title, v.order]), schema.oneOf.map((v) => [v.title, v.order]))) {
+            // update schema if not exists or order changed
+            schema.oneOf = getOneOfWithoutLabel(oneOf);
+        }
+    }
+    else if (!oneOf) {
+        schema.oneOf = undefined;
+    }
+}
+$: oneOfUpdate(oneOf);
+function orderUpdate(order) {
+    if (order && !deepEqual(order, schema.order)) {
+        // update from external reordering
+        schema.order = order;
+    }
+}
+$: orderUpdate(order);
+const dispatch = createEventDispatcher();
+function getResourceTypesFromFormat(format) {
+    if (format?.startsWith('resource-')) {
+        return [format.split('-')[1]];
+    }
+    return [];
+}
+let schema = {
+    properties,
+    order,
+    required: requiredProperty,
+    oneOf: oneOf ? getOneOfWithoutLabel(oneOf) : undefined
+};
+console.log('initial schema', schema);
+function schemaUpdate(changedSchema) {
+    if (!deepEqual(changedSchema, {
+        properties,
+        order,
+        required: requiredProperty,
+        oneOf: oneOf ? getOneOfWithoutLabel(oneOf) : undefined
+    })) {
+        properties = changedSchema.properties;
+        order = changedSchema.order;
+        requiredProperty = changedSchema.required;
+        oneOf = changedSchema.oneOf?.map((v) => {
+            return {
+                ...v,
+                properties: {
+                    ...v.properties,
+                    label: {
+                        type: 'string',
+                        enum: [v.title ?? '']
+                    }
+                }
+            };
+        });
+        dispatch('schemaChange');
+    }
+}
+$: schemaUpdate(schema);
+let variantName = '';
+function createVariant(name) {
+    if (schema.oneOf) {
+        if (schema.oneOf.some((obj) => obj.title === name)) {
+            throw new Error('Variant name already exists');
+        }
+        const idx = schema.oneOf.findIndex((obj) => obj.title === name);
+        if (idx === -1) {
+            schema.oneOf = [
+                ...schema.oneOf,
+                {
+                    title: name,
+                    type: 'object',
+                    properties: {}
+                }
+            ];
+            oneOfSelected = name;
+        }
+        variantName = '';
+    }
+}
+function renameVariant(name, selected) {
+    if (schema.oneOf) {
+        if (schema.oneOf.some((obj) => obj.title === name)) {
+            throw new Error('Variant name already exists');
+        }
+        const idx = schema.oneOf.findIndex((obj) => obj.title === selected);
+        if (idx !== -1) {
+            schema.oneOf[idx].title = name;
+            oneOfSelected = name;
+        }
+        variantName = '';
+    }
+}
+</script>
+
+<div class="flex flex-col gap-2">
+	{#if type === 'object' && schema.oneOf && schema.oneOf.length >= 2}
+		<div class="flex flex-row gap-2 items-center justify-start">
+			<ToggleButtonGroup bind:selected={oneOfSelected} class="w-auto">
+				{#each schema.oneOf as obj}
+					<ToggleButton value={obj.title} label={obj.title} />
+				{/each}
+			</ToggleButtonGroup>
+
+			<Popup
+				floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+				containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+				let:close
+			>
+				<svelte:fragment slot="button">
+					<Button size="xs2" color="light" nonCaptureEvent startIcon={{ icon: Plus }} />
+				</svelte:fragment>
+				<Label label="Label">
+					<div class="flex flex-col gap-2">
+						<input
+							type="text"
+							class="w-full !bg-surface"
+							on:keydown={(event) => {
+								if (event.key === 'Enter') {
+									createVariant(variantName)
+									close(null)
+								}
+							}}
+							bind:value={variantName}
+						/>
+						<Button
+							variant="border"
+							color="light"
+							size="xs"
+							on:click={() => {
+								createVariant(variantName)
+								close(null)
+							}}
+							disabled={!variantName}
+						>
+							Add
+						</Button>
+					</div>
+				</Label>
+			</Popup>
+		</div>
+		<div class="flex flex-row gap-2 items-center">
+			<span class="font-semibold text-sm">{oneOfSelected}</span>
+
+			<Popup
+				floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+				containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+				let:close
+			>
+				<svelte:fragment slot="button">
+					<Button
+						size="xs2"
+						color="light"
+						startIcon={{ icon: Pen }}
+						propagateEvent
+						iconOnly={false}
+						on:click={() => {
+							if (oneOfSelected) {
+								variantName = oneOfSelected
+							}
+						}}
+					/>
+				</svelte:fragment>
+				<Label label="Label">
+					<div class="flex flex-col gap-2">
+						<input
+							type="text"
+							class="w-full !bg-surface"
+							on:keydown={(event) => {
+								if (event.key === 'Enter') {
+									if (oneOfSelected) {
+										renameVariant(variantName, oneOfSelected)
+										close(null)
+									}
+								}
+							}}
+							bind:value={variantName}
+						/>
+						<Button
+							variant="border"
+							color="light"
+							size="xs"
+							on:click={() => {
+								if (oneOfSelected) {
+									renameVariant(variantName, oneOfSelected)
+									close(null)
+								}
+							}}
+							disabled={!variantName}
+						>
+							Rename
+						</Button>
+					</div>
+				</Label>
+			</Popup>
+			<Button
+				size="xs2"
+				color="red"
+				startIcon={{ icon: Trash2 }}
+				iconOnly
+				disabled={schema.oneOf.length <= 2}
+				on:click={() => {
+					if (schema.oneOf && oneOfSelected) {
+						const idx = schema.oneOf.findIndex((obj) => obj.title === oneOfSelected)
+						schema.oneOf = schema.oneOf.filter((_, i) => i !== idx)
+						oneOfSelected = schema.oneOf[0].title
+					}
+				}}
+			/>
+		</div>
+		{#if oneOfSelected && schema.oneOf}
+			{@const idx = schema.oneOf.findIndex((obj) => obj.title === oneOfSelected)}
+			<EditableSchemaDrawer bind:schema={schema.oneOf[idx]} />
+		{/if}
+	{:else if type === 'object' && format !== 'resource-s3_object'}
+		<Tabs
+			selected="resource"
+			on:selected={(e) => {
+				if (e.detail === 'custom-object') {
+					format = ''
+				}
+			}}
+		>
+			<Tab value="resource">Resource</Tab>
+			<Tab value="custom-object">Custom Object</Tab>
+			<svelte:fragment slot="content">
+				<div class="pt-2">
+					<TabContent value="custom-object">
+						<EditableSchemaDrawer bind:schema />
+					</TabContent>
+
+					<TabContent value="resource">
+						<ObjectTypeNarrowing bind:format />
+					</TabContent>
+				</div>
+			</svelte:fragment>
+		</Tabs>
+	{/if}
+
+	{#if !(type === 'object' && oneOf && oneOf.length >= 2)}
+		<Label label="Default">
+			{#if lightweightMode}
+				<LightweightArgInput
+					bind:value={defaultValue}
+					type={password ? 'string' : type}
+					displayHeader={false}
+					{pattern}
+					{customErrorMessage}
+					{itemsType}
+					{contentEncoding}
+					{format}
+					{extra}
+				/>
+			{:else}
+				<ArgInput
+					{itemPicker}
+					resourceTypes={getResourceTypesFromFormat(format)}
+					bind:value={defaultValue}
+					type={password ? 'string' : type}
+					displayHeader={false}
+					{pattern}
+					{customErrorMessage}
+					{itemsType}
+					{contentEncoding}
+					{format}
+					{extra}
+					{nullable}
+					{variableEditor}
+					compact
+					noMargin
+				/>
+			{/if}
+		</Label>
+	{/if}
+
+	<div class="flex flex-row gap-2">
+		<Toggle
+			options={{ right: 'Required' }}
+			size="xs"
+			disabled={type === 'boolean'}
+			on:change={(event) => {
+				dispatch('requiredChange', { required: event?.detail })
+			}}
+			checked={required}
+			on:change={(event) => {
+				if (event?.detail) {
+					nullable = false
+				}
+			}}
+		/>
+		{#if type === 'string'}
+			<Toggle
+				options={{
+					right: 'Nullable',
+					rightTooltip: 'If enabled, the default value will be null and not an empty string.'
+				}}
+				lightMode
+				size="xs"
+				bind:checked={nullable}
+				disabled={required}
+			/>
+		{/if}
+	</div>
+
+	{#if displayWebhookWarning && !(type === 'object' && oneOf && oneOf.length >= 2)}
+		<Alert type="info" title="Default not used by webhooks" size="xs" collapsible>
+			If this flow is triggered by a webhook, the default value will not replace a missing value
+			from the payload. It will only be used as the default value in the autogenerated UI. We
+			recommend using default values in the signature of the steps where this value is used (using
+			`x=default`) to have the desired behavior.
+		</Alert>
+	{/if}
+</div>
+<div>
+	<Toggle
+		size="xs"
+		options={{ right: 'Show this field only when conditions are met' }}
+		checked={Boolean(showExpr)}
+		on:change={() => {
+			showExpr = showExpr ? undefined : 'true //fields.foo == 42'
+		}}
+	/>
+	{#if showExpr != undefined}
+		<div class="border">
+			<SimpleEditor
+				extraLib={`declare const fields: Record<${propsNames
+					?.filter((x) => x != name)
+					.map((x) => `"${x}"`)
+					.join(' | ')}, any>;\n`}
+				lang="javascript"
+				bind:code={showExpr}
+				shouldBindKey={false}
+				fixedOverflowWidgets={false}
+				autoHeight
+			/>
+		</div>
+		<div class="flex flex-row-reverse text-2xs text-tertiary">
+			<div>
+				Other fields are available under <code>fields</code> (e.g:
+				<code>fields.foo == 42</code>)
+			</div>
+		</div>
+	{/if}
+</div>

package/package/components/schema/FlowPropertyEditor.svelte.d.ts

@@ -0,0 +1,47 @@
+import { SvelteComponent } from "svelte";
+import type ItemPicker from '../ItemPicker.svelte';
+import type VariableEditor from '../VariableEditor.svelte';
+import type { SchemaProperty } from '../../common';
+declare const __propDef: {
+    props: {
+        format?: string | undefined;
+        contentEncoding?: 'base64' | 'binary' | undefined;
+        type?: string | undefined;
+        oneOf?: SchemaProperty[] | undefined;
+        required?: boolean | undefined;
+        pattern?: undefined | string;
+        password?: boolean | undefined;
+        variableEditor?: VariableEditor | undefined;
+        itemPicker?: ItemPicker | undefined;
+        nullable?: boolean | undefined;
+        defaultValue?: any;
+        propsNames?: any;
+        showExpr?: string | undefined;
+        extra?: Record<string, any> | undefined;
+        customErrorMessage?: string | undefined;
+        itemsType?: {
+            type?: "string" | "number" | "object" | "bytes" | undefined;
+            contentEncoding?: "base64" | undefined;
+            enum?: string[] | undefined;
+            multiselect?: string[] | undefined;
+        } | undefined;
+        properties?: Record<string, any> | undefined;
+        order?: string[] | undefined;
+        requiredProperty?: string[] | undefined;
+        displayWebhookWarning?: boolean | undefined;
+        lightweightMode?: boolean | undefined;
+    };
+    events: {
+        requiredChange: CustomEvent<any>;
+        schemaChange: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowPropertyEditorProps = typeof __propDef.props;
+export type FlowPropertyEditorEvents = typeof __propDef.events;
+export type FlowPropertyEditorSlots = typeof __propDef.slots;
+export default class FlowPropertyEditor extends SvelteComponent<FlowPropertyEditorProps, FlowPropertyEditorEvents, FlowPropertyEditorSlots> {
+}
+export {};

package/package/components/schema/PropertyEditor.svelte

@@ -0,0 +1,185 @@
+<script>import autosize from '../../autosize';
+import { shouldDisplayPlaceholder } from '../../utils';
+import { twMerge } from 'tailwind-merge';
+import ArrayTypeNarrowing from '../ArrayTypeNarrowing.svelte';
+import Label from '../Label.svelte';
+import NumberTypeNarrowing from '../NumberTypeNarrowing.svelte';
+import StringTypeNarrowing from '../StringTypeNarrowing.svelte';
+import Tooltip from '../Tooltip.svelte';
+import EditableSchemaForm from '../EditableSchemaForm.svelte';
+import { deepEqual } from 'fast-equals';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+export let description = '';
+export let format = '';
+export let contentEncoding = undefined;
+export let type = undefined;
+export let oneOf = undefined;
+export let pattern = undefined;
+export let enum_ = undefined;
+export let extra = {};
+export let minW = true;
+export let customErrorMessage = undefined;
+export let title = undefined;
+export let placeholder = undefined;
+export let properties = {};
+export let isFlowInput = false;
+export let isAppInput = false;
+export let order = [];
+export let itemsType = undefined;
+let el = undefined;
+let oneOfSelected = (oneOf && oneOf.length >= 2 && oneOf[0]['title']) || undefined;
+let oneOfSchemas = undefined;
+function updateOneOfSchemas(oneOf) {
+    if (oneOf && oneOf.length >= 2) {
+        oneOfSchemas = oneOf.map((obj) => {
+            return {
+                properties: obj.properties
+                    ? Object.fromEntries(Object.entries(obj.properties).filter(([k, v]) => k !== 'label'))
+                    : {},
+                order: obj.order
+            };
+        });
+    }
+}
+$: updateOneOfSchemas(oneOf);
+export function focus() {
+    el?.focus();
+    if (el) {
+        el.style.height = '5px';
+        el.style.height = el.scrollHeight + 50 + 'px';
+    }
+}
+function onKeyDown(e) {
+    if ((e.ctrlKey || e.metaKey) && e.key == 'Enter') {
+        return;
+    }
+    e.stopPropagation();
+}
+let schema = {
+    properties,
+    order
+};
+$: (properties || order) && updateSchema();
+function updateSchema() {
+    if (!deepEqual(schema.properties, properties) || !deepEqual(schema.order, order)) {
+        schema = {
+            properties,
+            order
+        };
+    }
+}
+</script>
+
+<div class="flex flex-row items-center justify-between w-full gap-2">
+	<!-- svelte-ignore a11y-autofocus -->
+	<div class={twMerge('flex flex-col w-full', 'gap-4', minW ? 'min-w-[250px]' : '')}>
+		<slot name="typeeditor" />
+
+		<Label label="Description">
+			<textarea
+				use:autosize
+				rows="2"
+				bind:value={description}
+				on:keydown={onKeyDown}
+				placeholder="Field description"
+			/>
+		</Label>
+
+		<Label label="Custom Title" class="w-full">
+			<svelte:fragment slot="header">
+				<Tooltip light>Will be displayed in the UI instead of the field name.</Tooltip>
+			</svelte:fragment>
+			<input bind:value={title} on:keydown={onKeyDown} placeholder="Field title" />
+		</Label>
+
+		<Label label="Placeholder">
+			<svelte:fragment slot="header">
+				<Tooltip light>
+					Will be displayed in the input field when the field is empty. If not set, the default
+					value will be used. The placeholder is disabled depending on the field typ, format, etc.
+				</Tooltip>
+			</svelte:fragment>
+
+			<textarea
+				placeholder="Enter a placeholder"
+				rows="1"
+				bind:value={placeholder}
+				disabled={!shouldDisplayPlaceholder(type, format, enum_, contentEncoding, pattern, extra)}
+			/>
+		</Label>
+
+		{#if type == 'array'}
+			<ArrayTypeNarrowing bind:itemsType />
+		{:else if type == 'string' || ['number', 'integer', 'object'].includes(type ?? '')}
+			<div>
+				<Label label="Field settings">
+					<div>
+						{#if type == 'string'}
+							<StringTypeNarrowing
+								bind:customErrorMessage
+								bind:format
+								bind:pattern
+								bind:enum_
+								bind:contentEncoding
+								bind:password={extra['password']}
+								bind:minRows={extra['minRows']}
+								bind:disableCreate={extra['disableCreate']}
+								bind:disableVariablePicker={extra['disableVariablePicker']}
+								bind:dateFormat={extra['dateFormat']}
+								bind:enumLabels={extra['enumLabels']}
+								originalType={extra['originalType']}
+								overrideAllowKindChange={isFlowInput || isAppInput}
+							/>
+						{:else if type == 'number' || type == 'integer'}
+							<NumberTypeNarrowing
+								bind:min={extra['min']}
+								bind:max={extra['max']}
+								bind:currency={extra['currency']}
+								bind:currencyLocale={extra['currencyLocale']}
+							/>
+						{:else if type == 'object' && oneOf && oneOf.length >= 2 && !isFlowInput && !isAppInput}
+							<ToggleButtonGroup bind:selected={oneOfSelected} class="mb-2">
+								{#each oneOf as obj}
+									<ToggleButton value={obj.title} label={obj.title} />
+								{/each}
+							</ToggleButtonGroup>
+							{#if oneOfSelected && oneOfSchemas}
+								{@const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)}
+								<div class="border">
+									<EditableSchemaForm
+										on:change
+										noPreview
+										bind:schema={oneOfSchemas[idx]}
+										uiOnly
+										jsonEnabled={false}
+									/>
+								</div>
+							{/if}
+						{:else if type == 'object' && !format?.startsWith('resource-') && !isFlowInput && !isAppInput}
+							<div class="border">
+								<EditableSchemaForm on:change noPreview bind:schema uiOnly jsonEnabled={false} />
+							</div>
+						{:else}
+							<div class="text-tertiary text-xs">No settings available for this field type</div>
+						{/if}
+					</div>
+				</Label>
+			</div>
+		{/if}
+
+		<slot />
+	</div>
+</div>
+
+<style>
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+		-webkit-appearance: none !important;
+		margin: 0;
+	}
+
+	/* Firefox */
+	input[type='number'] {
+		-moz-appearance: textfield !important;
+	}</style>

package/package/components/schema/PropertyEditor.svelte.d.ts

@@ -0,0 +1,46 @@
+import { SvelteComponent } from "svelte";
+import type { EnumType } from '../../common';
+import type { SchemaProperty } from '../../common';
+declare const __propDef: {
+    props: {
+        description?: string | undefined;
+        format?: string | undefined;
+        contentEncoding?: 'base64' | 'binary' | undefined;
+        type?: string | undefined;
+        oneOf?: SchemaProperty[] | undefined;
+        pattern?: undefined | string;
+        enum_?: EnumType;
+        extra?: Record<string, any> | undefined;
+        minW?: boolean | undefined;
+        customErrorMessage?: string | undefined;
+        title?: string | undefined;
+        placeholder?: string | undefined;
+        properties?: Record<string, any> | undefined;
+        isFlowInput?: boolean | undefined;
+        isAppInput?: boolean | undefined;
+        order?: string[] | undefined;
+        itemsType?: {
+            type?: "string" | "number" | "object" | "bytes" | undefined;
+            contentEncoding?: "base64" | undefined;
+            enum?: string[] | undefined;
+            multiselect?: string[] | undefined;
+        } | undefined;
+        focus?: (() => void) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        typeeditor: {};
+        default: {};
+    };
+};
+export type PropertyEditorProps = typeof __propDef.props;
+export type PropertyEditorEvents = typeof __propDef.events;
+export type PropertyEditorSlots = typeof __propDef.slots;
+export default class PropertyEditor extends SvelteComponent<PropertyEditorProps, PropertyEditorEvents, PropertyEditorSlots> {
+    get focus(): () => void;
+}
+export {};