windmill-components 1.13.0

package/components/JobStatus.svelte

@@ -0,0 +1,38 @@
+<script>import { faCalendar, faCircle, faClock, faHourglassHalf, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { displayDate, forLater } from '../../utils';
+import Icon from 'svelte-awesome';
+import { check } from 'svelte-awesome/icons';
+const SMALL_ICON_SCALE = 0.7;
+export let job;
+</script>
+
+{#if job && 'success' in job && job.success}
+	<Icon class="text-green-600" data={check} scale={SMALL_ICON_SCALE} />
+	<span class="mx-2">Succeeded</span>
+	<div>
+		<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span class="mx-2"
+			>Job ran in {job.duration}
+			s</span
+		>
+	</div>
+{:else if job && 'success' in job}
+	<Icon class="text-red-700" data={faTimes} scale={SMALL_ICON_SCALE} />
+	<span class="mx-2">Failed</span>
+	<div>
+		<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span class="mx-2"
+			>Job ran in {job.duration}
+			s</span
+		>
+	</div>
+{:else if job && 'running' in job && job.running}
+	<Icon class="text-yellow-500" data={faCircle} scale={SMALL_ICON_SCALE} />
+	<span class="mx-2">Running</span>
+{:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
+	<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
+	<span class="mx-2">Scheduled for {displayDate(job.scheduled_for)}</span>
+{:else if job && 'running' in job}
+	<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} />
+	<span class="mx-2">Queued</span>
+{:else}
+	<Icon class="text-gray-200" data={faCircle} scale={SMALL_ICON_SCALE} />
+{/if}

package/components/Modal.svelte

@@ -0,0 +1,94 @@
+<script>import { createEventDispatcher } from 'svelte';
+export let open = false;
+export let z = 'z-30';
+const dispatch = createEventDispatcher();
+export function closeModal() {
+    open = false;
+    dispatch('close');
+}
+export function openModal() {
+    open = true;
+    dispatch('open');
+}
+function handleKeyUp(event) {
+    const key = event.key || event.keyCode;
+    if (key === 27 || key === 'Escape' || key === 'Esc') {
+        if (open) {
+            event.preventDefault();
+            closeModal();
+        }
+    }
+}
+</script>
+
+<svelte:window on:keyup={handleKeyUp} />
+
+<div class="blurred-background z-0  {open ? '' : 'hidden'}" />
+
+<div class="fixed top-0 w-screen h-screen  {open ? '' : 'hidden'} {z}">
+	<div
+		class="fixed right-0 flex flex-col w-3/4 sm:w-2/3 lg:w-1/2 h-screen border border-gray-300 shadow-xl"
+	>
+		{#if open}
+			<div class="flex flex-row justify-between p-2  bg-white border-b border-gray-200">
+				<button
+					on:click={() => {
+						open = false
+						closeModal()
+					}}
+				>
+					<svg
+						class="w-6 h-6"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+				<p class="font-semibold text-gray-800"><slot name="title" /></p>
+				<div />
+			</div>
+			<div class="flex flex-col  bg-gray-50 pt-3 px-6 grow overflow-y-auto">
+				<slot name="content" />
+			</div>
+			<div class="flex flex-col bg-white border-gray-200 p-2">
+				<div class="flex flex-row justify-between p-2 ">
+					<button
+						on:click={() => {
+							closeModal()
+						}}
+					>
+						<svg
+							class="w-6 h-6"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+					<span class="mr-4"><slot name="submission">&nbsp;</slot></span>
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.blurred-background {
+		/* @apply absolute sm:top-6 lg:top-8 left-28 sm:left-40 md:left-48; */ /* If we wanted to make the navbars visible */ position: fixed; top: 0px; left: 0px; --tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity)); opacity: 0.75; width: 100vw; height: 100vh;
+		z-index: 1;
+	}</style>

package/components/ModuleStep.svelte

@@ -0,0 +1,64 @@
+<script>import SchemaForm from './SchemaForm.svelte';
+import ScriptPicker from './ScriptPicker.svelte';
+import { emptySchema, loadSchema as UloadSchema } from '../../utils';
+import FlowPreview from './FlowPreview.svelte';
+export let flow;
+export let i;
+export let mod;
+export let args = {};
+export let schemas = [];
+export let schemaForms = [];
+export async function loadSchema() {
+    if (mod.value.path) {
+        let schema = await UloadSchema(mod.value.path);
+        if (JSON.stringify(Object.keys(schema?.properties ?? {}).sort()) !=
+            JSON.stringify(Object.keys(mod.input_transform).sort())) {
+            let it = {};
+            Object.keys(schema?.properties ?? {}).map((x) => (it[x] = {
+                type: 'static',
+                value: ''
+            }));
+            schemaForms[i]?.setArgs(it);
+        }
+        schemas[i] = schema ?? emptySchema();
+    }
+    else {
+        schemaForms[i]?.setArgs({});
+        schemas[i] = emptySchema();
+    }
+    schemas = schemas;
+}
+</script>
+
+<li class="flex flex-row flex-shrink max-w-full  mx-auto mt-20">
+	<div class="bg-white border border-gray xl-rounded shadow-lg w-full max-w-3xl mx-4 md:mx-auto">
+		<div
+			class="flex items-center justify-between flex-wra px-4 py-5 border-b border-gray-200 sm:px-6"
+		>
+			<h3 class="text-lg leading-6 font-medium text-gray-900">Step {i + 1}</h3>
+			<button
+				class="text-xs default-button-secondary max-h-6 place-self-end"
+				on:click={() => {
+					flow.value.modules.splice(i, 1)
+					schemas.splice(i, 1)
+					schemaForms.splice(i, 1)
+					flow = flow
+				}}
+				>Remove this step
+			</button>
+		</div>
+		<div class="p-10">
+			<h2 class="mb-4">Step script</h2>
+			<ScriptPicker allowHub={true} bind:scriptPath={mod.value.path} on:select={loadSchema} />
+			<div class="my-4" />
+			<h2 class="mb-4">Step inputs</h2>
+			<SchemaForm
+				bind:this={schemaForms[i]}
+				inputTransform={true}
+				schema={schemas[i]}
+				bind:args={mod.input_transform}
+			/>
+			<FlowPreview {flow} {i} bind:args {schemas} />
+		</div>
+	</div>
+</li>

package/components/Multiselect.svelte

@@ -0,0 +1,327 @@
+<script>
+	// @ts-nocheck
+	import { onMount } from 'svelte'
+	import { fly } from 'svelte/transition'
+	export let id = ''
+	export let value = []
+	export let readonly = false
+	export let placeholder = ''
+
+	let input,
+		inputValue,
+		options = [],
+		activeOption,
+		showOptions = false,
+		selected = {},
+		first = true,
+		slot
+	const iconClearPath =
+		'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'
+
+	onMount(() => {
+		slot.querySelectorAll('option').forEach((o) => {
+			o.selected && !value.includes(o.value) && (value = [...value, o.value])
+			options = [...options, { value: o.value, name: o.textContent }]
+		})
+		value &&
+			(selected = options.reduce(
+				(obj, op) => (value.includes(op.value) ? { ...obj, [op.value]: op } : obj),
+				{}
+			))
+		first = false
+	})
+
+	$: if (!first) value = Object.values(selected).map((o) => o.value)
+	$: filtered = options.filter((o) =>
+		inputValue ? o.name.toLowerCase().includes(inputValue.toLowerCase()) : o
+	)
+	$: if ((activeOption && !filtered.includes(activeOption)) || (!activeOption && inputValue))
+		activeOption = filtered[0]
+
+	function add(token) {
+		if (!readonly) selected[token.value] = token
+	}
+
+	function remove(value) {
+		if (!readonly) {
+			const { [value]: val, ...rest } = selected
+			selected = rest
+		}
+	}
+
+	function optionsVisibility(show) {
+		if (readonly) return
+		if (typeof show === 'boolean') {
+			showOptions = show
+			show && input.focus()
+		} else {
+			showOptions = !showOptions
+		}
+		if (!showOptions) {
+			activeOption = undefined
+		}
+	}
+
+	function handleKeyup(e) {
+		if (e.keyCode === 13) {
+			Object.keys(selected).includes(activeOption.value)
+				? remove(activeOption.value)
+				: add(activeOption)
+			inputValue = ''
+		}
+		if ([38, 40].includes(e.keyCode)) {
+			// up and down arrows
+			const increment = e.keyCode === 38 ? -1 : 1
+			const calcIndex = filtered.indexOf(activeOption) + increment
+			activeOption =
+				calcIndex < 0
+					? filtered[filtered.length - 1]
+					: calcIndex === filtered.length
+					? filtered[0]
+					: filtered[calcIndex]
+		}
+	}
+
+	function handleBlur(e) {
+		optionsVisibility(false)
+	}
+
+	function handleTokenClick(e) {
+		if (e.target.closest('.token-remove')) {
+			e.stopPropagation()
+			remove(e.target.closest('.token').dataset.id)
+		} else if (e.target.closest('.remove-all')) {
+			selected = []
+			inputValue = ''
+		} else {
+			optionsVisibility(true)
+		}
+	}
+
+	function handleOptionMousedown(e) {
+		const value = e.target.dataset.value
+		if (selected[value]) {
+			remove(value)
+		} else {
+			add(options.filter((o) => o.value === value)[0])
+			input.focus()
+		}
+	}
+</script>
+
+<div class="multiselect" class:readonly>
+	<div class="tokens" class:showOptions on:click={handleTokenClick}>
+		{#each Object.values(selected) as s}
+			<div class="token" data-id={s.value}>
+				<span>{s.name}</span>
+				{#if !readonly}
+					<div class="token-remove" title="Remove {s.name}">
+						<svg
+							class="icon-clear"
+							xmlns="http://www.w3.org/2000/svg"
+							width="18"
+							height="18"
+							viewBox="0 0 24 24"
+						>
+							<path d={iconClearPath} />
+						</svg>
+					</div>
+				{/if}
+			</div>
+		{/each}
+		<div class="actions">
+			{#if !readonly}
+				<input
+					{id}
+					autocomplete="off"
+					bind:value={inputValue}
+					bind:this={input}
+					on:keyup={handleKeyup}
+					on:blur={handleBlur}
+					{placeholder}
+				/>
+				<div class="remove-all" title="Remove All" class:hidden={!Object.keys(selected).length}>
+					<svg
+						class="icon-clear"
+						xmlns="http://www.w3.org/2000/svg"
+						width="18"
+						height="18"
+						viewBox="0 0 24 24"
+					>
+						<path d={iconClearPath} />
+					</svg>
+				</div>
+				<svg
+					class="dropdown-arrow"
+					xmlns="http://www.w3.org/2000/svg"
+					width="18"
+					height="18"
+					viewBox="0 0 18 18"><path d="M5 8l4 4 4-4z" /></svg
+				>
+			{/if}
+		</div>
+	</div>
+
+	<select bind:this={slot} type="multiple" class="hidden"><slot /></select>
+
+	{#if showOptions}
+		<ul
+			class="options"
+			transition:fly={{ duration: 200, y: 5 }}
+			on:mousedown|preventDefault={handleOptionMousedown}
+		>
+			{#each filtered as option}
+				<li
+					class:selected={selected[option.value]}
+					class:active={activeOption === option}
+					data-value={option.value}
+				>
+					{option.name}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+<style>
+	.multiselect {
+		background-color: white;
+		border-bottom: 1px solid hsl(0, 0%, 70%);
+		position: relative;
+	}
+	.multiselect:not(.readonly):hover {
+		border-bottom-color: hsl(0, 0%, 50%);
+	}
+
+	.tokens {
+		align-items: center;
+		display: flex;
+		flex-wrap: wrap;
+		position: relative;
+	}
+	.tokens::after {
+		background: none repeat scroll 0 0 transparent;
+		bottom: -1px;
+		content: '';
+		display: block;
+		height: 2px;
+		left: 50%;
+		position: absolute;
+		background: hsl(45, 100%, 51%);
+		transition: width 0.3s ease 0s, left 0.3s ease 0s;
+		width: 0;
+	}
+	.tokens.showOptions::after {
+		width: 100%;
+		left: 0;
+	}
+	.token {
+		align-items: center;
+		background-color: hsl(214, 17%, 92%);
+		border-radius: 1.25rem;
+		display: flex;
+		margin: 0.25rem 0.5rem 0.25rem 0;
+		max-height: 1.3rem;
+		padding: 0.25rem 0.5rem 0.25rem 0.5rem;
+		transition: background-color 0.3s;
+		white-space: nowrap;
+	}
+	.token:hover {
+		background-color: hsl(214, 15%, 88%);
+	}
+	.readonly .token {
+		color: hsl(0, 0%, 40%);
+	}
+	.token-remove,
+	.remove-all {
+		align-items: center;
+		background-color: hsl(214, 15%, 55%);
+		border-radius: 50%;
+		color: hsl(214, 17%, 92%);
+		display: flex;
+		justify-content: center;
+		height: 1.25rem;
+		margin-left: 0.25rem;
+		min-width: 1.25rem;
+	}
+	.token-remove:hover,
+	.remove-all:hover {
+		background-color: hsl(215, 21%, 43%);
+		cursor: pointer;
+	}
+
+	.actions {
+		align-items: center;
+		display: flex;
+		flex: 1;
+		min-width: 15rem;
+	}
+
+	input {
+		border: none;
+		font-size: 1.5rem;
+		line-height: 1.5rem;
+		margin: 0;
+		outline: none;
+		padding: 0;
+		width: 100%;
+	}
+
+	.dropdown-arrow path {
+		fill: hsl(0, 0%, 70%);
+	}
+	.multiselect:hover .dropdown-arrow path {
+		fill: hsl(0, 0%, 50%);
+	}
+
+	.icon-clear path {
+		fill: white;
+	}
+
+	.options {
+		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px -2px 4px rgba(0, 0, 0, 0.1);
+		left: 0;
+		list-style: none;
+		-webkit-margin-after: 0;
+		        margin-block-end: 0;
+		-webkit-margin-before: 0;
+		        margin-block-start: 0;
+		max-height: 70vh;
+		overflow: auto;
+		-webkit-padding-start: 0;
+		        padding-inline-start: 0;
+		position: absolute;
+		top: calc(100% + 1px);
+		width: 100%;
+	}
+	li {
+		background-color: white;
+		cursor: pointer;
+		padding: 0.5rem;
+	}
+	li:last-child {
+		border-bottom-left-radius: 0.2rem;
+		border-bottom-right-radius: 0.2rem;
+	}
+	li:not(.selected):hover {
+		background-color: hsl(214, 17%, 92%);
+	}
+	li.selected {
+		background-color: hsl(232, 54%, 41%);
+		color: white;
+	}
+	li.selected:nth-child(even) {
+		background-color: hsl(232, 50%, 45%);
+		color: white;
+	}
+	li.active {
+		background-color: hsl(214, 17%, 88%);
+	}
+	li.selected.active,
+	li.selected:hover {
+		background-color: hsl(232, 48%, 50%);
+	}
+
+	.hidden {
+		display: none;
+	}</style>

package/components/ObjectResourceInput.svelte

@@ -0,0 +1,62 @@
+<script>import { ResourceService } from '../../gen';
+import ResourcePicker from './ResourcePicker.svelte';
+import { workspaceStore } from '../../stores';
+import SchemaForm from './SchemaForm.svelte';
+import RadioButton from './RadioButton.svelte';
+export let format;
+export let value;
+function isString(value) {
+    return typeof value === 'string' || value instanceof String;
+}
+let path = isString(value) && value.length >= '$res:'.length ? value.substr('$res:'.length) : undefined;
+let args = {};
+if (!isString(value) && value) {
+    console.log(value);
+    args = value;
+}
+let schema = undefined;
+let isValid = true;
+let resourceTypeName = '';
+async function loadSchema(format) {
+    resourceTypeName = format.substring('resource-'.length);
+    schema = (await ResourceService.getResourceType({ workspace: $workspaceStore, path: resourceTypeName })).schema;
+}
+let option = isString(value) || value == undefined ? 'resource' : 'raw';
+$: {
+    if (option == 'resource') {
+        value = `$res:${path}`;
+    }
+    else {
+        value = args;
+    }
+}
+$: format.startsWith('resource-') && loadSchema(format);
+</script>
+
+<div class="max-w-lg">
+	<RadioButton
+		options={[
+			[`Resource (${resourceTypeName})`, 'resource'],
+			[`Raw object value`, 'raw']
+		]}
+		small={true}
+		bind:value={option}
+	/>
+</div>
+<div class="mt-1" />
+{#if option == 'resource'}
+	<ResourcePicker
+		bind:value={path}
+		resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
+	/>
+{:else}
+	<div class="border rounded p-5">
+		<h2 class="mb-5">
+			Object of <a target="_blank" href="/resources">resource type</a>
+			{resourceTypeName}
+		</h2>
+		{#if !isString(args)}
+			<SchemaForm {schema} bind:isValid bind:args />
+		{/if}
+	</div>
+{/if}

package/components/ObjectTypeNarrowing.svelte

@@ -0,0 +1,25 @@
+<script>import RadioButton from './RadioButton.svelte';
+import ResourceTypePicker from './ResourceTypePicker.svelte';
+export let format;
+let kind = format?.startsWith('resource') ? 'resource' : 'none';
+let resource = format?.startsWith('resource-')
+    ? format.substring('resource-'.length)
+    : undefined;
+$: format =
+    kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : undefined;
+</script>
+
+<RadioButton
+	label="Kind"
+	small={true}
+	options={[
+		['None', 'none'],
+		['Resource Type', 'resource']
+	]}
+	bind:value={kind}
+/>
+
+{#if kind == 'resource'}
+	<div class="mt-1" />
+	<ResourceTypePicker bind:value={resource} />
+{/if}

package/components/PageHeader.svelte

@@ -0,0 +1,29 @@
+<script>import Tooltip from './Tooltip.svelte';
+export let title;
+export let tooltip = '';
+export let primary = true;
+</script>
+
+<div class="flex flex-col sm:flex-row justify-between mt-4 mb-2">
+	{#if primary}
+		<h1>
+			{title}
+			{#if tooltip}
+				<Tooltip>{tooltip}</Tooltip>
+			{/if}
+		</h1>
+	{:else}
+		<h2>
+			{title}
+			{#if tooltip}
+				<Tooltip>{tooltip}</Tooltip>
+			{/if}
+		</h2>
+	{/if}
+
+	{#if $$slots.default}
+		<div class="my-2 sm:ml-4">
+			<slot />
+		</div>
+	{/if}
+</div>

package/components/Password.svelte

@@ -0,0 +1,45 @@
+<script>// @ts-nocheck
+import { onMount } from 'svelte';
+export let password;
+export let label = 'password';
+export let placeholder = '******';
+onMount(() => {
+    const passwordToggle = document.querySelector('.js-password-toggle');
+    if (passwordToggle) {
+        passwordToggle.addEventListener('change', function () {
+            const password = document.querySelector('.js-password'), passwordLabel = document.querySelector('.js-password-label');
+            if (password.type === 'password') {
+                password.type = 'text';
+                passwordLabel.innerHTML = 'hide';
+            }
+            else {
+                password.type = 'password';
+                passwordLabel.innerHTML = 'show';
+            }
+            password.focus();
+        });
+    }
+    else {
+        throw Error('Password component is undefined');
+    }
+});
+</script>
+
+<label class="block text-gray-700" for="password"> {label} </label>
+<div class="relative w-full">
+	<div class="absolute inset-y-0 right-0 flex items-center px-2">
+		<input class="hidden js-password-toggle" id="toggle" type="checkbox" />
+		<label
+			class="bg-gray-300 hover:bg-gray-400 rounded px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label"
+			for="toggle">show</label
+		>
+	</div>
+	<input
+		class="block w-full py-2 px-2 border rounded-md border-gray-300 shadow-sm; focus:ring focus:ring-indigo-100 focus:ring-opacity-50 text-sm js-password h-12"
+		id="password"
+		type="password"
+		bind:value={password}
+		autocomplete="off"
+		{placeholder}
+	/>
+</div>