windmill-components 1.13.0

package/components/FlowEditor.svelte

@@ -0,0 +1,95 @@
+<script>import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { emptySchema, loadSchema } from '../../utils';
+import Icon from 'svelte-awesome';
+import { FlowModuleValue, ScriptService } from '../../gen';
+import SchemaEditor from './SchemaEditor.svelte';
+import { workspaceStore } from '../../stores';
+import ModuleStep from './ModuleStep.svelte';
+import FlowPreview from './FlowPreview.svelte';
+export let flow;
+let args = {};
+let schemas = [];
+let schemaForms = [];
+export async function loadSchemas() {
+    await Promise.all(flow.value.modules.map(async (x, i) => {
+        if (x.value.path) {
+            const schema = await loadSchema(x.value.path ?? '');
+            if (JSON.stringify(Object.keys(schema?.properties ?? {}).sort()) !=
+                JSON.stringify(Object.keys(x.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;
+    if (flow.value.modules.length == 0) {
+        addModule();
+    }
+}
+function addModule() {
+    schemaForms.push(undefined);
+    let newModule = {
+        value: { type: FlowModuleValue.type.SCRIPT, path: '' },
+        input_transform: {}
+    };
+    flow.value.modules = flow.value.modules.concat(newModule);
+    schemas.push(emptySchema());
+}
+$: $workspaceStore && loadSchemas();
+</script>
+
+<!-- <PageHeader title="Flow" /> -->
+<div class="flow-root bg-gray-50 rounded-xl border  border-gray-200">
+	<ul class="relative -mt-10">
+		<span class="absolute top-0 left-1/2  h-full w-1 bg-gray-400" aria-hidden="true" />
+		<div class="relative">
+			<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 mx-4 xl:mx-20">
+					<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">Flow Input</h3>
+						<button
+							class="text-xs default-button-secondary max-h-6 place-self-end"
+							disabled={flow.value.modules.length == 0 ||
+								flow.value.modules[0].value.path == undefined}
+							on:click={async () => {
+								flow.schema = await loadSchema(flow.value.modules[0].value.path ?? '')
+							}}
+							>Copy from step 1's schema
+						</button>
+					</div>
+					<div class="p-4">
+						<SchemaEditor bind:schema={flow.schema} />
+						<div class="my-4" />
+						<FlowPreview {flow} i={flow.value.modules.length - 1} bind:args />
+					</div>
+				</div>
+			</li>
+			{#each flow.value.modules as mod, i}
+				<ModuleStep bind:flow bind:mod bind:schemas bind:schemaForms bind:args {i} />
+			{/each}
+			<li class="relative m-20 ">
+				<div class="absolute inset-0 flex items-center" aria-hidden="true">
+					<div class="w-full border-t border-gray-300" />
+				</div>
+				<div class="relative flex justify-center">
+					<button
+						class="default-button h-10 w-10 shadow-blue-600/40  border-blue-600 shadow"
+						on:click={addModule}><Icon class="text-white mb-1" data={faPlus} scale={0.9} /></button
+					>
+				</div>
+			</li>
+		</div>
+	</ul>
+</div>
+<div class="py-10 bg-white" />

package/components/FlowPreview.svelte

@@ -0,0 +1,141 @@
+<script>import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { sendUserToast, truncateRev } from '../../utils';
+import Icon from 'svelte-awesome';
+import { Job, JobService, InputTransform } from '../../gen';
+import { workspaceStore } from '../../stores';
+import RunForm from './RunForm.svelte';
+import FlowStatusViewer from './FlowStatusViewer.svelte';
+import { onDestroy } from 'svelte';
+import ChevronButton from './ChevronButton.svelte';
+import DisplayResult from './DisplayResult.svelte';
+import Tabs from './Tabs.svelte';
+export let i;
+export let flow;
+export let schemas = [];
+export let args = {};
+let stepArgs = {};
+let tab = 'upto';
+let viewPreview = false;
+let intervalId;
+let uptoText = i == flow.value.modules.length - 1 ? 'Preview whole flow' : 'Preview up to this step';
+let job;
+let jobs = [];
+let jobId;
+async function runPreview(args) {
+    intervalId && clearInterval(intervalId);
+    const newFlow = tab == 'upto' ? truncateFlow(flow) : extractStep(flow);
+    jobId = await JobService.runFlowPreview({
+        workspace: $workspaceStore ?? '',
+        requestBody: {
+            args,
+            value: newFlow.value,
+            path: newFlow.path
+        }
+    });
+    jobs = [];
+    intervalId = setInterval(loadJob, 1000);
+    sendUserToast(`started preview ${truncateRev(jobId, 10)}`);
+}
+function truncateFlow(flow) {
+    const localFlow = JSON.parse(JSON.stringify(flow));
+    localFlow.value.modules = flow.value.modules.slice(0, i + 1);
+    return localFlow;
+}
+function extractStep(flow) {
+    const localFlow = JSON.parse(JSON.stringify(flow));
+    localFlow.value.modules = flow.value.modules.slice(i, i + 1);
+    localFlow.schema = schemas[i];
+    stepArgs = {};
+    Object.entries(flow.value.modules[i].input_transform).forEach((x) => {
+        if (x[1].type == InputTransform.type.STATIC) {
+            stepArgs[x[0]] = x[1].value;
+        }
+    });
+    return localFlow;
+}
+async function loadJob() {
+    try {
+        job = await JobService.getJob({ workspace: $workspaceStore, id: jobId });
+        if (job?.type == 'CompletedJob') {
+            //only CompletedJob has success property
+            clearInterval(intervalId);
+        }
+    }
+    catch (err) {
+        sendUserToast(err, true);
+    }
+}
+onDestroy(() => {
+    intervalId && clearInterval(intervalId);
+});
+</script>
+
+<h2 class="mb-5 mt-2">
+	<button
+		type="submit"
+		class="underline text-gray-700 inline-flex  items-center"
+		on:click={() => {
+			viewPreview = !viewPreview
+		}}
+	>
+		<div>
+			Preview mode<Icon class="ml-1" data={viewPreview ? faChevronUp : faChevronDown} scale={1} />
+		</div>
+	</button>
+</h2>
+
+{#if viewPreview}
+	{#if i != flow.value.modules.length - 1}
+		<Tabs
+			tabs={[
+				['upto', uptoText],
+				['justthis', 'preview just this step']
+			]}
+			bind:tab
+		/>
+	{/if}
+	<div class="my-2" />
+	{#if tab == 'upto'}
+		<RunForm
+			runnable={truncateFlow(flow)}
+			runAction={(_, args) => runPreview(args)}
+			schedulable={false}
+			buttonText={uptoText}
+			detailed={false}
+			bind:args
+		/>
+	{:else}
+		<RunForm
+			runnable={extractStep(flow)}
+			runAction={(_, args) => runPreview(args)}
+			schedulable={false}
+			buttonText="Preview just this step"
+			detailed={false}
+			args={stepArgs}
+		/>
+	{/if}
+
+	{#if job}
+		<div class="w-full flex justify-center">
+			<FlowStatusViewer {job} bind:jobs />
+		</div>
+		{#if `result` in job}
+			<div class="flex flex-col ml-10">
+				<div>
+					<ChevronButton text="result" viewOptions={true}>
+						<div class="text-xs">
+							<DisplayResult result={job.result} />
+						</div>
+					</ChevronButton>
+				</div>
+				<div>
+					<ChevronButton text="logs" viewOptions={true}>
+						<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-lg">
+							<pre class="w-full">{job.logs}</pre>
+						</div>
+					</ChevronButton>
+				</div>
+			</div>
+		{/if}
+	{/if}
+{/if}

package/components/FlowStatusViewer.svelte

@@ -0,0 +1,137 @@
+<script>import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { truncateRev } from '../../utils';
+import Icon from 'svelte-awesome';
+import { check } from 'svelte-awesome/icons';
+import { CompletedJob, FlowModuleValue, FlowStatusModule, JobService, QueuedJob } from '../../gen';
+import { workspaceStore } from '../../stores';
+import DisplayResult from './DisplayResult.svelte';
+import ChevronButton from './ChevronButton.svelte';
+import JobStatus from './JobStatus.svelte';
+export let job;
+export let jobs;
+function loadResults() {
+    job?.flow_status?.modules?.forEach(async (x, i) => {
+        if ((i >= jobs.length && x.type == FlowStatusModule.type.SUCCESS) ||
+            x.type == FlowStatusModule.type.FAILURE) {
+            jobs.push(undefined);
+            jobs[i] = await JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job });
+        }
+    });
+}
+$: $workspaceStore && job && loadResults();
+</script>
+
+<div class="flow-root max-w-lg w-full p-4">
+	<div class="flex flex-row-reverse">
+		{#if job}
+			<div class="flex-col">
+				<a href="/run/{job?.id}" class="font-medium text-blue-600"
+					>{truncateRev(job?.id ?? '', 10)}</a
+				>
+				<div>
+					<JobStatus {job} />
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<p class="text-gray-500 mb-6 w-full text-center">
+		Step
+		<span class="font-medium text-gray-900"
+			>{Math.min((job?.flow_status?.step ?? 0) + 1, job?.raw_flow?.modules.length ?? 0)}</span
+		>
+		out of <span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
+		<span class="mt-4" />
+	</p>
+	<ul role="list" class="-mb-8 w-full">
+		{#each job?.raw_flow?.modules ?? [] as mod, i}
+			<li class="w-full">
+				<div class="relative pb-8 w-full">
+					{#if i < (job?.raw_flow?.modules ?? []).length - 1}
+						<span
+							class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+							aria-hidden="true"
+						/>
+					{/if}
+					<div class="relative flex space-x-3">
+						<div>
+							{#if job.flow_status?.modules[i].type == FlowStatusModule.type.SUCCESS}
+								<span
+									class="h-8 w-8 rounded-full bg-green-600 flex items-center justify-center ring-8 ring-white"
+								>
+									<Icon
+										class="text-white"
+										data={check}
+										scale={0.8}
+										label="Job completed successfully"
+									/>
+								</span>
+							{:else if job.flow_status?.modules[i].type == FlowStatusModule.type.FAILURE}
+								<span
+									class="h-8 w-8 rounded-full bg-red-600 flex items-center justify-center ring-8 ring-white"
+								>
+									<Icon class="text-white" data={faTimes} scale={0.8} label="Job failed" />
+								</span>
+							{:else if job.flow_status?.modules[i].type == FlowStatusModule.type.IN_PROGRESS}
+								<span
+									class="h-8 w-8 rounded-full bg-yellow-500 flex items-center justify-center ring-8 ring-white"
+								>
+									<Icon
+										class="text-white animate-spin"
+										data={faSpinner}
+										scale={1}
+										label="Job failed"
+									/>
+								</span>
+							{:else}
+								<span
+									class="h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"
+								>
+									<Icon class="text-white" data={faHourglassHalf} scale={1} label="Job failed" />
+								</span>
+							{/if}
+						</div>
+						<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
+							<div class="w-full">
+								<p class="text-sm text-gray-500">
+									{#if mod.value.type == FlowModuleValue.type.SCRIPT}
+										Script at path <a
+											href="/scripts/get/{mod.value.path}"
+											class="font-medium text-gray-900">{mod.value.path}</a
+										>
+									{/if}
+								</p>
+							</div>
+							<div class="text-right text-sm whitespace-nowrap text-gray-500">
+								{job.flow_status?.modules[i].type}
+								{#if job.flow_status?.modules[i].job}
+									<a href="/run/{job.flow_status?.modules[i].job}" class="font-medium text-blue-600"
+										>{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}</a
+									>
+								{/if}
+							</div>
+						</div>
+					</div>
+					{#if i < jobs.length && jobs[i] != undefined}
+						<div class="flex flex-col ml-10">
+							<div>
+								<ChevronButton text="result" viewOptions={true}>
+									<div class="text-xs">
+										<DisplayResult result={jobs[i]?.result} />
+									</div>
+								</ChevronButton>
+							</div>
+							<div>
+								<ChevronButton text="logs">
+									<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-lg">
+										<pre class="w-full">{jobs[i]?.logs}</pre>
+									</div>
+								</ChevronButton>
+							</div>
+						</div>
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ul>
+</div>

package/components/GroupModal.svelte

@@ -0,0 +1,90 @@
+<script>import { userStore, workspaceStore } from '../../stores';
+import Modal from './Modal.svelte';
+import { GroupService, UserService } from '../../gen';
+import AutoComplete from 'simple-svelte-autocomplete';
+import PageHeader from './PageHeader.svelte';
+import TableCustom from './TableCustom.svelte';
+import { canWrite } from '../../utils';
+let name = '';
+let modal;
+let can_write = false;
+let group;
+let members = [];
+let usernames = [];
+let username = '';
+async function loadUsernames() {
+    usernames = await UserService.listUsernames({ workspace: $workspaceStore });
+}
+$: {
+    if (group && $workspaceStore && userStore) {
+        members = (group.members ?? []).map((x) => {
+            return {
+                name: x,
+                isAdmin: x in (group?.extra_perms ?? {}) && (group?.extra_perms ?? {})[name]
+            };
+        });
+    }
+}
+export function openModal(newName) {
+    name = newName;
+    loadGroup();
+    loadUsernames();
+    modal.openModal();
+}
+async function addToGroup() {
+    await GroupService.addUserToGroup({
+        workspace: $workspaceStore ?? '',
+        name,
+        requestBody: { username }
+    });
+    loadGroup();
+}
+async function loadGroup() {
+    group = await GroupService.getGroup({ workspace: $workspaceStore, name });
+    can_write = canWrite(group.name, group.extra_perms ?? {}, $userStore);
+}
+</script>
+
+<Modal bind:this={modal}>
+	<div slot="title">group {name}</div>
+	<div slot="content">
+		<PageHeader title="Summary" />
+		<p>{group?.summary ?? 'No summary'}</p>
+		<PageHeader title="Members">
+			{#if can_write}
+				<div>
+					<AutoComplete items={usernames} bind:selectedItem={username} />
+					<button class="default-button ml-4" on:click={addToGroup}>Add member</button>
+				</div>
+			{/if}
+		</PageHeader>
+		<TableCustom>
+			<tr slot="header-row">
+				<th>user</th>
+				<th>admin of group</th>
+				<th />
+			</tr>
+			<tbody slot="body">
+				{#each members as { name, isAdmin }}<tr>
+						<td>{name}</td>
+						<td> {isAdmin ? 'admin' : ''} </td>
+						<td>
+							{#if can_write}
+								<button
+									class="ml-2 text-red-500"
+									on:click={async () => {
+										await GroupService.removeUserToGroup({
+											workspace: $workspaceStore ?? '',
+											name: group?.name ?? '',
+											requestBody: { username: name }
+										})
+										loadGroup()
+									}}>remove</button
+								>
+							{/if}</td
+						>
+					</tr>{/each}
+			</tbody></TableCustom
+		>
+	</div>
+</Modal>

package/components/IconedResourceType.svelte

@@ -0,0 +1,32 @@
+<script>import Mysql from './icons/Mysql.svelte';
+import Mail from './icons/Mail.svelte';
+import DbIcon from './icons/DbIcon.svelte';
+import PostgresIcon from './icons/PostgresIcon.svelte';
+import Icon from 'svelte-awesome';
+import { faSlack } from '@fortawesome/free-brands-svg-icons';
+import Slack from './icons/Slack.svelte';
+export let name;
+export let after = false;
+export let height = '24px';
+export let width = '24px';
+</script>
+
+<div class="flex flex-row gap-2">
+	{#if !after}
+		{name}
+	{/if}
+	{#if name === 'postgres'}
+		<PostgresIcon {height} {width} />
+	{:else if name === 'mysql'}
+		<Mysql {height} {width} />
+	{:else if name === 'SMTP'}
+		<Mail {height} {width} />
+	{:else if name === 'mongodb'}
+		<DbIcon {height} {width} />
+	{:else if name === 'slack'}
+		<Slack {height} {width} />
+	{/if}
+	{#if after}
+		{name}
+	{/if}
+</div>

package/components/InviteGlobalUser.svelte

@@ -0,0 +1,56 @@
+<script>import { sendUserToast } from '../../utils';
+import Switch from './Switch.svelte';
+import { createEventDispatcher } from 'svelte';
+import { UserService } from '../../gen';
+const dispatch = createEventDispatcher();
+let valid = true;
+let modal;
+export function openModal() {
+    modal.openModal();
+}
+let email;
+let is_super_admin = false;
+let password;
+let name;
+let company;
+function handleKeyUp(event) {
+    const key = event.key || event.keyCode;
+    if (key === 13 || key === 'Enter') {
+        event.preventDefault();
+        addUser();
+    }
+}
+async function addUser() {
+    await UserService.createUserGlobally({
+        requestBody: {
+            email,
+            password,
+            super_admin: is_super_admin,
+            name,
+            company
+        }
+    });
+    sendUserToast(`Successfully added ${email}. Welcome to them!`);
+    dispatch('new');
+}
+</script>
+
+<div class="flex flex-row">
+	<input on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
+
+	<Switch class="ml-2" bind:checked={is_super_admin} horizontal={true} label={'admin: '} />
+	<input on:keyup={handleKeyUp} type="password" placeholder="" bind:value={password} />
+	<input on:keyup={handleKeyUp} placeholder="name" bind:value={name} />
+	<input on:keyup={handleKeyUp} placeholder="company" bind:value={company} />
+
+	<button
+		class="ml-4 w-40 {valid ? 'default-button' : 'default-button-disabled'}"
+		type="button"
+		on:click={() => {
+			addUser()
+		}}
+		disabled={email == undefined || password == undefined}
+	>
+		Add
+	</button>
+</div>

package/components/InviteUser.svelte

@@ -0,0 +1,48 @@
+<script>import { sendUserToast } from '../../utils';
+import Switch from './Switch.svelte';
+import { createEventDispatcher } from 'svelte';
+import { workspaceStore } from '../../stores';
+import { WorkspaceService } from '../../gen';
+const dispatch = createEventDispatcher();
+let valid = true;
+let modal;
+export function openModal() {
+    modal.openModal();
+}
+let email;
+let is_admin = false;
+function handleKeyUp(event) {
+    const key = event.key || event.keyCode;
+    if (key === 13 || key === 'Enter') {
+        event.preventDefault();
+        inviteUser();
+    }
+}
+async function inviteUser() {
+    await WorkspaceService.inviteUser({
+        workspace: $workspaceStore,
+        requestBody: {
+            email,
+            is_admin
+        }
+    });
+    sendUserToast(`Successfully invited ${email}. Welcome to them!`);
+    dispatch('new');
+}
+</script>
+
+<div class="flex flex-row">
+	<input on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
+
+	<Switch class="ml-2" bind:checked={is_admin} horizontal={true} label={'admin: '} />
+	<button
+		class="ml-4 w-40 {valid ? 'default-button' : 'default-button-disabled'}"
+		type="button"
+		on:click={() => {
+			inviteUser()
+		}}
+		disabled={email == undefined}
+	>
+		Invite
+	</button>
+</div>

package/components/ItemPicker.svelte

@@ -0,0 +1,58 @@
+<script>import Fuse from 'fuse.js';
+import Modal from './Modal.svelte';
+export let pickCallback;
+export let loadItems;
+export let extraField;
+export let itemName;
+export let closeOnClick = true;
+let items = [];
+let filteredItems = [];
+let itemsFilter = '';
+const fuseOptions = {
+    includeScore: false,
+    keys: ['path', extraField]
+};
+const fuse = new Fuse(items, fuseOptions);
+export function openModal() {
+    loadItems().then((v) => {
+        items = v;
+        fuse.setCollection(items);
+    });
+    modal.openModal();
+}
+$: filteredItems =
+    itemsFilter.length > 0 ? fuse.search(itemsFilter).map((value) => value.item) : items;
+let modal;
+</script>
+
+<Modal bind:this={modal} z="z-30">
+	<div slot="title">search a {itemName}</div>
+	<div slot="content">
+		<div class="w-12/12 pb-4">
+			<input placeholder="Search {itemName}" bind:value={itemsFilter} class="search-item" />
+		</div>
+		<ul class="divide-y divide-gray-200">
+			{#each filteredItems as obj}
+				<li
+					class="py-4 px-1 gap-1 flex flex-col hover:bg-white hover:border text-black cursor-pointer"
+					on:click={() => {
+						if (closeOnClick) {
+							modal.closeModal()
+						}
+						pickCallback(obj['path'], obj[extraField])
+					}}
+				>
+					<p class="text-sm font-semibold">
+						<span class="mr-2">{obj[extraField]}</span><span class="font-normal whitespace-nowrap"
+							>{obj['path'] ?? ''}</span
+						>
+					</p>
+					<p class="text-xs italic">{obj['description'] ?? ''}</p>
+				</li>
+			{/each}
+		</ul>
+	</div>
+	<span slot="submission">
+		<slot name="submission" />
+	</span>
+</Modal>