windmill-components 1.444.2 → 1.447.4

package/package/components/schema/AddPropertyV2.svelte

@@ -0,0 +1,151 @@
+<script>import { modalToSchema } from '../../common';
+import { emptySchema, sendUserToast } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
+import AddPropertyFormV2 from './AddPropertyFormV2.svelte';
+export let schema = emptySchema();
+export const DEFAULT_PROPERTY = {
+    selectedType: 'string',
+    description: '',
+    name: '',
+    required: false
+};
+const dispatch = createEventDispatcher();
+if (!schema) {
+    schema = emptySchema();
+}
+let schemaString = '';
+// Internal state: bound to args builder modal
+let argError = '';
+let editing = false;
+let oldArgName; // when editing argument and changing name
+let jsonEditor;
+reorder();
+function reorder() {
+    if (schema.order && Array.isArray(schema.order)) {
+        const n = {};
+        schema.order.forEach((x) => {
+            if (schema.properties && schema.properties[x] != undefined) {
+                n[x] = schema.properties[x];
+            }
+        });
+        Object.keys(schema.properties ?? {})
+            .filter((x) => !schema.order?.includes(x))
+            .forEach((x) => {
+            n[x] = schema.properties[x];
+        });
+        schema.properties = n;
+    }
+}
+function syncOrders() {
+    if (schema) {
+        schema.order = Object.keys(schema.properties ?? {});
+    }
+}
+function handleAddOrEditArgument(modalProperty) {
+    // If editing the arg's name, oldName containing the old argument name must be provided
+    argError = '';
+    modalProperty.name = modalProperty.name.trim();
+    if (modalProperty.name.length === 0) {
+        argError = 'Arguments need to have a name';
+    }
+    else if (Object.keys(schema.properties ?? {}).includes(modalProperty.name) &&
+        (!editing || (editing && oldArgName && oldArgName !== modalProperty.name))) {
+        argError = 'There is already an argument with this name';
+    }
+    else {
+        if (!schema.properties) {
+            schema.properties = {};
+        }
+        if (!schema.required) {
+            schema.required = [];
+        }
+        if (!schema.order || !Array.isArray(schema.order)) {
+            syncOrders();
+        }
+        schema.properties[modalProperty.name] = modalToSchema(modalProperty);
+        if (modalProperty.required) {
+            if (!schema.required.includes(modalProperty.name)) {
+                schema.required.push(modalProperty.name);
+            }
+        }
+        else if (schema.required.includes(modalProperty.name)) {
+            const index = schema.required.indexOf(modalProperty.name, 0);
+            if (index > -1) {
+                schema.required.splice(index, 1);
+            }
+        }
+        if (editing && oldArgName && oldArgName !== modalProperty.name) {
+            let oldPosition = schema.order.indexOf(oldArgName);
+            schema.order[oldPosition] = modalProperty.name;
+            reorder();
+            handleDeleteArgument([oldArgName]);
+        }
+        if (!schema.order?.includes(modalProperty.name)) {
+            schema.order.push(modalProperty.name);
+        }
+        modalProperty = Object.assign({}, DEFAULT_PROPERTY);
+        editing = false;
+        oldArgName = undefined;
+    }
+    schema = schema;
+    schemaString = JSON.stringify(schema, null, '\t');
+    jsonEditor?.setCode(schemaString);
+    if (argError !== '') {
+        sendUserToast(argError, true);
+    }
+    dispatch('change', schema);
+}
+export function handleDeleteArgument(argPath) {
+    try {
+        let modifiedObject = schema;
+        let modifiedProperties = modifiedObject.properties;
+        let argName = argPath.pop();
+        argPath.forEach((property) => {
+            if (Object.keys(modifiedProperties).includes(property)) {
+                modifiedObject = modifiedProperties[property];
+                modifiedProperties = modifiedObject.properties;
+            }
+            else {
+                throw Error('Nested argument not found!');
+            }
+        });
+        if (Object.keys(modifiedProperties).includes(argName)) {
+            delete modifiedProperties[argName];
+            modifiedObject.required = schema.required.filter((arg) => arg !== argName);
+            if (modifiedObject.order) {
+                modifiedObject.order = modifiedObject.order.filter((arg) => arg !== argName);
+            }
+            schema = schema;
+            schemaString = JSON.stringify(schema, null, '\t');
+            dispatch('change', schema);
+        }
+        else {
+            throw Error('Argument not found!');
+        }
+        syncOrders();
+        dispatch('change', schema);
+    }
+    catch (err) {
+        sendUserToast(`Could not delete argument: ${err}`, true);
+    }
+}
+</script>
+
+<AddPropertyFormV2
+	on:add={(e) => {
+		try {
+			handleAddOrEditArgument({
+				...DEFAULT_PROPERTY,
+				selectedType: 'string',
+				name: e.detail.name
+			})
+		} catch (err) {
+			sendUserToast(`Could not add argument: ${err}`, true)
+		}
+	}}
+>
+	<svelte:fragment slot="trigger">
+		<slot name="trigger" />
+	</svelte:fragment>
+</AddPropertyFormV2>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import { type Schema, type ModalSchemaProperty } from '../../common';
+declare const __propDef: {
+    props: {
+        schema?: Schema | any;
+        DEFAULT_PROPERTY?: ModalSchemaProperty | undefined;
+        handleDeleteArgument?: ((argPath: string[]) => void) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trigger: {};
+    };
+};
+export type AddPropertyV2Props = typeof __propDef.props;
+export type AddPropertyV2Events = typeof __propDef.events;
+export type AddPropertyV2Slots = typeof __propDef.slots;
+export default class AddPropertyV2 extends SvelteComponent<AddPropertyV2Props, AddPropertyV2Events, AddPropertyV2Slots> {
+    get DEFAULT_PROPERTY(): ModalSchemaProperty;
+    get handleDeleteArgument(): (argPath: string[]) => void;
+}
+export {};

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -1,4 +1,4 @@
-<script>import { GripVertical, Pen, Trash } from 'lucide-svelte';
+<script>import { GripVertical, Pen, Trash, Plus } from 'lucide-svelte';
 import EditableSchemaForm from '../EditableSchemaForm.svelte';
 import { Drawer, DrawerContent } from '../common';
 import AddProperty from './AddProperty.svelte';
@@ -10,6 +10,7 @@ import { createEventDispatcher, tick } from 'svelte';
 import Label from '../Label.svelte';
 import Toggle from '../Toggle.svelte';
 import SimpleEditor from '../SimpleEditor.svelte';
+import AddPropertyV2 from './AddPropertyV2.svelte';
 export let schema;
 export let parentId = undefined;
 const flipDurationMs = 200;
@@ -36,7 +37,6 @@ function handleFinalize(e) {
     schema = { ...schema };
     dispatch('change', schema);
 }
-const yOffset = 49;
 export let jsonView = false;
 let schemaString = JSON.stringify(schema, null, '\t');
 let editor = undefined;
@@ -151,10 +151,7 @@ let error = undefined;
 	</div>
 
 	<Drawer bind:this={schemaFormDrawer} size="1200px">
-		<DrawerContent noPadding title="UI Customisation" on:close={schemaFormDrawer.closeDrawer}>
-			<svelte:fragment slot="actions">
-				<AddProperty on:change bind:schema />
-			</svelte:fragment>
+		<DrawerContent title="UI Customisation" on:close={schemaFormDrawer.closeDrawer}>
 			<EditableSchemaForm
 				on:change
 				bind:this={editableSchemaForm}
@@ -166,10 +163,22 @@ let error = undefined;
 				on:delete={(e) => {
 					addProperty?.handleDeleteArgument([e.detail])
 				}}
-				offset={yOffset}
 				lightweightMode
 				dndType="drawer"
-			/>
+				editTab="inputEditor"
+			>
+				<svelte:fragment slot="addProperty">
+					<AddPropertyV2 bind:schema on:change>
+						<svelte:fragment slot="trigger">
+							<div
+								class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
+							>
+								<Plus size={14} />
+							</div>
+						</svelte:fragment>
+					</AddPropertyV2>
+				</svelte:fragment>
+			</EditableSchemaForm>
 		</DrawerContent>
 	</Drawer>
 {:else}

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -1,13 +1,13 @@
 <script>import { twMerge } from 'tailwind-merge';
 import EditableSchemaForm from '../EditableSchemaForm.svelte';
-import AddProperty from './AddProperty.svelte';
 import { createEventDispatcher } from 'svelte';
 import Toggle from '../Toggle.svelte';
 import { emptySchema, validateFileExtension } from '../../utils';
 import AutoComplete from 'simple-svelte-autocomplete';
 import { Alert } from '../common';
+import AddPropertyV2 from './AddPropertyV2.svelte';
+import { Plus } from 'lucide-svelte';
 export let schema;
-export let offset = 0;
 export let uiOnly = false;
 export let noPreview = false;
 export let fullHeight = true;
@@ -27,7 +27,7 @@ function switchResourceIsFile() {
         formatExtension = undefined;
     }
     else {
-        formatExtension = "";
+        formatExtension = '';
         schema = emptySchema();
         schema.order = ['content'];
         schema.properties = {
@@ -52,19 +52,44 @@ function numberOfMatches(listItem, searchWords) {
     });
     return matches;
 }
-let suggestedFileExtensions = ['json', 'yaml', 'jinja', 'j2', 'ini', 'cfg', 'toml', 'html', 'xml', 'yml'];
+let suggestedFileExtensions = [
+    'json',
+    'yaml',
+    'jinja',
+    'j2',
+    'ini',
+    'cfg',
+    'toml',
+    'html',
+    'xml',
+    'yml'
+];
 let autocompleteExtension = true;
 </script>
 
 {#if !resourceIsTextFile}
-	<div class={twMerge(fullHeight ? 'h-full' : 'h-80', 'border overflow-y-auto rounded-md')}>
-		<div class="p-4 border-b">
-			<AddProperty
-				on:change={() => dispatch('change', schema)}
+	<div
+		class={twMerge(
+			fullHeight ? 'h-full' : 'h-80',
+			noPreview ? '' : 'border rounded-md p-2',
+			'overflow-y-auto flex flex-col gap-2'
+		)}
+	>
+		{#if noPreview}
+			<AddPropertyV2
 				bind:schema
 				bind:this={addProperty}
-			/>
-		</div>
+				on:change={() => dispatch('change', schema)}
+			>
+				<svelte:fragment slot="trigger">
+					<div
+						class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
+					>
+						<Plus size={14} />
+					</div>
+				</svelte:fragment>
+			</AddPropertyV2>
+		{/if}
 		<EditableSchemaForm
 			bind:schema
 			on:change={() => dispatch('change', schema)}
@@ -75,17 +100,35 @@ let autocompleteExtension = true;
 			on:delete={(e) => {
 				addProperty?.handleDeleteArgument([e.detail])
 			}}
-			{offset}
 			{uiOnly}
 			{noPreview}
 			{lightweightMode}
-		/>
+			editTab="inputEditor"
+		>
+			<svelte:fragment slot="addProperty">
+				{#if !noPreview}
+					<AddPropertyV2
+						bind:schema
+						bind:this={addProperty}
+						on:change={() => dispatch('change', schema)}
+					>
+						<svelte:fragment slot="trigger">
+							<div
+								class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
+							>
+								<Plus size={14} />
+							</div>
+						</svelte:fragment>
+					</AddPropertyV2>
+				{/if}
+			</svelte:fragment>
+		</EditableSchemaForm>
 	</div>
 {/if}
 {#if resourceIsTextFile}
 	<div class="flex items-center space-x-2 w-5/12">
 		<label for="format-extension" class="text-base font-medium whitespace-nowrap">
-			File extension{autocompleteExtension ? "" : " (free text)"}:
+			File extension{autocompleteExtension ? '' : ' (free text)'}:
 		</label>
 		{#if autocompleteExtension}
 			<AutoComplete
@@ -135,7 +178,8 @@ let autocompleteExtension = true;
 	{#if invalidExtension}
 		<Alert title="Invalid file extension" type="error">
 			The provided extension (<span class="font-bold font-mono">.{formatExtension}</span>) contains
-			invalid characters. Note that you shouldn't add the leading dot, (i.e. enter `json` instead of `.json`)
+			invalid characters. Note that you shouldn't add the leading dot, (i.e. enter `json` instead of
+			`.json`)
 		</Alert>
 	{:else if formatExtension && formatExtension !== ''}
 		<Alert title={`Example: my_file.${formatExtension}`} type="info">

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

@@ -3,7 +3,6 @@ import type { Schema } from '../../common';
 declare const __propDef: {
     props: {
         schema: Schema | undefined | any;
-        offset?: number | undefined;
         uiOnly?: boolean | undefined;
         noPreview?: boolean | undefined;
         fullHeight?: boolean | undefined;

package/package/components/schema/FlowPropertyEditor.svelte

@@ -263,7 +263,12 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 		</div>
 		{#if oneOfSelected && schema.oneOf}
 			{@const idx = schema.oneOf.findIndex((obj) => obj.title === oneOfSelected)}
-			<EditableSchemaDrawer bind:schema={schema.oneOf[idx]} />
+			<EditableSchemaDrawer
+				bind:schema={schema.oneOf[idx]}
+				on:change={() => {
+					dispatch('schemaChange')
+				}}
+			/>
 		{/if}
 	{:else if type === 'object' && format !== 'resource-s3_object'}
 		<Tabs
@@ -279,7 +284,7 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 			<svelte:fragment slot="content">
 				<div class="pt-2">
 					<TabContent value="custom-object">
-						<EditableSchemaDrawer bind:schema />
+						<EditableSchemaDrawer bind:schema on:change={() => dispatch('schemaChange')} />
 					</TabContent>
 
 					<TabContent value="resource">
@@ -329,7 +334,7 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 		</Label>
 	{/if}
 
-	<div class="flex flex-row gap-2">
+	<div class="flex flex-row gap-2 flex-wrap h-auto">
 		<Toggle
 			options={{ right: 'Required' }}
 			size="xs"

package/package/components/schema/JobSchemaPicker.svelte

@@ -0,0 +1,32 @@
+<script>import SchemaPickerRow from './SchemaPickerRow.svelte';
+import { workspaceStore } from '../../stores';
+import { ExternalLink } from 'lucide-svelte';
+import { base } from '../../base';
+export let job;
+export let selected = false;
+export let payloadData = undefined;
+export let hovering = false;
+</script>
+
+<SchemaPickerRow {payloadData} date={job.created_at} {selected} {hovering}>
+	<svelte:fragment slot="start">
+		<div class="center-center">
+			<div
+				class="rounded-full w-2 h-2 {job.success ? 'bg-green-400' : 'bg-red-400'}"
+				title={job.success ? 'Success' : 'Failed'}
+			/>
+		</div>
+	</svelte:fragment>
+	<svelte:fragment slot="extra">
+		<div class="center-center {hovering ? '' : '!hidden'}">
+			<a
+				target="_blank"
+				href="{base}/run/{job.id}?workspace={$workspaceStore}"
+				class="text-right float-right text-secondary"
+				title="See run detail in a new tab"
+			>
+				<ExternalLink size={16} />
+			</a>
+		</div>
+	</svelte:fragment>
+</SchemaPickerRow>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        job: any;
+        selected?: boolean | undefined;
+        payloadData?: any | undefined;
+        hovering?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JobSchemaPickerProps = typeof __propDef.props;
+export type JobSchemaPickerEvents = typeof __propDef.events;
+export type JobSchemaPickerSlots = typeof __propDef.slots;
+export default class JobSchemaPicker extends SvelteComponent<JobSchemaPickerProps, JobSchemaPickerEvents, JobSchemaPickerSlots> {
+}
+export {};

package/package/components/schema/PropertyEditor.svelte

@@ -178,6 +178,7 @@ function updateSchema() {
 										bind:schema={oneOfSchemas[idx]}
 										uiOnly
 										jsonEnabled={false}
+										editTab="inputEditor"
 									/>
 								</div>
 							{/if}
@@ -185,7 +186,14 @@ function updateSchema() {
 							<div class="text-tertiary text-xs">No settings available for Dynamic Select</div>
 						{:else if type == 'object' && !format?.startsWith('resource-') && !isFlowInput && !isAppInput}
 							<div class="border">
-								<EditableSchemaForm on:change noPreview bind:schema uiOnly jsonEnabled={false} />
+								<EditableSchemaForm
+									on:change
+									noPreview
+									bind:schema
+									uiOnly
+									jsonEnabled={false}
+									editTab="inputEditor"
+								/>
 							</div>
 						{:else}
 							<div class="text-tertiary text-xs">No settings available for this field type</div>

package/package/components/schema/RunningJobSchemaPicker.svelte

@@ -0,0 +1,67 @@
+<script>import SchemaPickerRow from './SchemaPickerRow.svelte';
+import Skeleton from '../common/skeleton/Skeleton.svelte';
+import { JobService } from '../../gen/index.js';
+import { workspaceStore } from '../../stores';
+import { createEventDispatcher } from 'svelte';
+import { ExternalLink } from 'lucide-svelte';
+import { base } from '../../base';
+import { Cell, Row } from '../table';
+import { twMerge } from 'tailwind-merge';
+export let job;
+export let selected = false;
+export let payloadData = undefined;
+const dispatch = createEventDispatcher();
+export let hovering = false;
+let loadingArgs = true;
+loadArgsFromRunningJob(job.id);
+async function loadArgsFromRunningJob(id) {
+    if (!id)
+        return;
+    payloadData = await JobService.getJobArgs({
+        workspace: $workspaceStore,
+        id
+    });
+    loadingArgs = false;
+}
+</script>
+
+{#if loadingArgs}
+	<Cell>
+		<Skeleton layout={[[1]]} />
+	</Cell>
+	<Cell>
+		<Skeleton layout={[[1]]} />
+	</Cell>
+	<Cell>
+		<Skeleton layout={[[1]]} />
+	</Cell>
+{:else}
+	<Row
+		on:click={() => dispatch('select', { id: job.id, payloadData })}
+		class={twMerge(
+			selected === job.id ? 'bg-surface-selected' : 'hover:bg-surface-hover',
+			'cursor-pointer rounded-md'
+		)}
+		on:hover={(e) => (hovering = e.detail ? true : false)}
+	>
+		<SchemaPickerRow {payloadData} date={job.created_at} {selected} {hovering}>
+			<svelte:fragment slot="start">
+				<div class="center-center">
+					<div class="rounded-full w-2 h-2 bg-orange-400 animate-pulse" title="Running" />
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="extra">
+				<div class="center-center {hovering ? '' : '!hidden'}">
+					<a
+						target="_blank"
+						href="{base}/run/{job.id}?workspace={$workspaceStore}"
+						class="text-right float-right text-secondary"
+						title="See run detail in a new tab"
+					>
+						<ExternalLink size={16} />
+					</a>
+				</div>
+			</svelte:fragment>
+		</SchemaPickerRow>
+	</Row>
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        job: any;
+        selected?: boolean | undefined;
+        payloadData?: any | undefined;
+        hovering?: boolean | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RunningJobSchemaPickerProps = typeof __propDef.props;
+export type RunningJobSchemaPickerEvents = typeof __propDef.events;
+export type RunningJobSchemaPickerSlots = typeof __propDef.slots;
+export default class RunningJobSchemaPicker extends SvelteComponent<RunningJobSchemaPickerProps, RunningJobSchemaPickerEvents, RunningJobSchemaPickerSlots> {
+}
+export {};

package/package/components/schema/SchemaFormDND.svelte

@@ -55,7 +55,7 @@ function handleFinalize(e) {
 	on:consider={handleConsider}
 	on:finalize={handleFinalize}
 	{lightweightMode}
-	{args}
+	bind:args
 	{prettifyHeader}
 	{onlyMaskPassword}
 	{disablePortal}

package/package/components/schema/SchemaPicker.svelte

@@ -0,0 +1,92 @@
+<script>import CustomPopover from '../CustomPopover.svelte';
+import { copyToClipboard } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import ObjectViewer from '../propertyPicker/ObjectViewer.svelte';
+import { twMerge } from 'tailwind-merge';
+export let payloadData;
+export let date;
+export let selected = false;
+const dispatch = createEventDispatcher();
+let hovering = false;
+function formatDate(dateString) {
+    if (!dateString)
+        return '';
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    }).format(date);
+}
+</script>
+
+<button
+	class={twMerge(
+		'w-full rounded-sm px-2',
+		hovering ? 'bg-surface-hover' : '',
+		selected ? 'bg-surface-selected' : ''
+	)}
+	on:click={() => {
+		dispatch('select')
+	}}
+	on:mouseenter={() => {
+		hovering = true
+	}}
+	on:mouseleave={() => {
+		hovering = false
+	}}
+>
+	<div class="flex flex-row gap-2">
+		<slot name="start" />
+
+		<div
+			class="text-2xs font-normal text-left p-2 rounded-md overflow-auto grow-0 text-ellipsis whitespace-nowrap scrollbar-none"
+			title={formatDate(date)}
+		>
+			{formatDate(date)}
+		</div>
+
+		<CustomPopover class="grow min-w-12 ">
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class={twMerge(
+					'text-xs border font-normal text-left p-1 rounded-md overflow-auto grow whitespace-nowrap scrollbar-none',
+					hovering && 'border-surface'
+				)}
+				on:click={() => {
+					if (selected) {
+						copyToClipboard(JSON.stringify(payloadData))
+					}
+				}}
+				on:mouseenter={() => {
+					hovering = true
+				}}
+				on:mouseleave={() => {
+					hovering = false
+				}}
+			>
+				{JSON.stringify(payloadData)}
+			</div>
+			<svelte:fragment slot="overlay">
+				<ObjectViewer json={payloadData} />
+			</svelte:fragment>
+		</CustomPopover>
+
+		{#if hovering}
+			<slot name="extra" />
+		{/if}
+	</div>
+</button>
+
+<style>
+	.scrollbar-none {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+
+	.scrollbar-none::-webkit-scrollbar {
+		display: none; /* Chrome, Safari and Opera */
+	}</style>