windmill-components 1.13.0

package/components/ScriptPicker.svelte

@@ -0,0 +1,110 @@
+<script>import { sendUserToast } from '../../utils';
+import { ScriptService, FlowService, Script } from '../../gen';
+import Icon from 'svelte-awesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { hubScripts, workspaceStore } from '../../stores';
+import { createEventDispatcher } from 'svelte';
+import ItemPicker from './ItemPicker.svelte';
+import RadioButton from './RadioButton.svelte';
+import Modal from './Modal.svelte';
+import { Highlight } from 'svelte-highlight';
+import { python, typescript } from 'svelte-highlight/languages';
+import github from 'svelte-highlight/styles/github';
+export let scriptPath = undefined;
+export let allowFlow = false;
+export let allowHub = false;
+export let itemKind = allowHub ? 'hub' : 'script';
+let items = [];
+let itemPicker;
+let modalViewer;
+let code = '';
+let lang;
+let options = [['Script', 'script']];
+allowHub && options.unshift(['Hub', 'hub']);
+allowFlow && options.push(['Flow', 'flow']);
+const dispatch = createEventDispatcher();
+async function getScript() {
+    if (itemKind == 'hub') {
+        code = await ScriptService.getHubScriptContentByPath({ path: scriptPath });
+        lang = Script.language.DENO;
+    }
+    else {
+        const script = await ScriptService.getScriptByPath({
+            workspace: $workspaceStore,
+            path: scriptPath
+        });
+        code = script.content;
+        lang = script.language;
+    }
+}
+async function loadItems() {
+    try {
+        if (itemKind == 'flow') {
+            items = await FlowService.listFlows({ workspace: $workspaceStore });
+        }
+        else if (itemKind == 'script') {
+            items = await ScriptService.listScripts({ workspace: $workspaceStore });
+        }
+        else {
+            items = $hubScripts ?? [];
+        }
+    }
+    catch (err) {
+        sendUserToast(`Could not load items: ${err}`, true);
+    }
+}
+$: {
+    if ($workspaceStore) {
+        loadItems();
+    }
+}
+</script>
+
+<svelte:head>
+	{@html github}
+</svelte:head>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, _) => {
+		scriptPath = path
+		dispatch('select', { path: scriptPath })
+	}}
+	itemName={itemKind == 'flow' ? 'Flow' : 'Script'}
+	extraField="summary"
+	loadItems={async () => {
+		await loadItems()
+		return items
+	}}
+/>
+
+<div class="flex flex-row items-center space-x-5">
+	{#if options.length > 1}
+		<RadioButton bind:value={itemKind} {options} />
+	{/if}
+
+	<input type="text" value={scriptPath ?? 'No path chosen yet'} disabled />
+	<button class="default-button text-gray-100" on:click={() => itemPicker.openModal()}
+		>Pick a {itemKind} path<Icon class="mx-4" data={faSearch} /></button
+	>
+	{#if scriptPath != undefined && scriptPath != ''}
+		<button
+			class="text-xs text-blue-500"
+			on:click={async () => {
+				await getScript()
+				modalViewer.openModal()
+			}}>show code</button
+		>
+	{/if}
+</div>
+
+<Modal bind:this={modalViewer}>
+	<div slot="title">Script {scriptPath}</div>
+	<div slot="content">
+		{#if lang == 'python3'}
+			<Highlight language={python} {code} />
+		{:else if lang == 'deno'}
+			<Highlight language={typescript} {code} />
+		{/if}
+	</div>
+</Modal>

package/components/ScriptSchema.svelte

@@ -0,0 +1,71 @@
+<script>import PageHeader from './PageHeader.svelte';
+import SchemaForm from './SchemaForm.svelte';
+import Tabs from './Tabs.svelte';
+import Highlight from 'svelte-highlight';
+import json from 'svelte-highlight/languages/json';
+import github from 'svelte-highlight/styles/github';
+import SvelteMarkdown from 'svelte-markdown';
+export let schema;
+export let summary;
+export let description;
+export let synchronizedHeader = true;
+let tab = 'ui';
+export function setSchema(newSchema) {
+    schema = newSchema;
+}
+</script>
+
+<svelte:head>
+	{@html github}
+</svelte:head>
+
+<div class="w-full">
+	<PageHeader title="UI customisation" />
+	<Tabs
+		tabs={[
+			['ui', 'UI'],
+			['jsonschema', `Jsonschema`]
+		]}
+		bind:tab
+	/>
+
+	<div class="mt-8" />
+	{#if tab == 'ui'}
+		<div class="grid grid-cols-3 gap-2">
+			<div>
+				<h2 class="mb-1">Summary</h2>
+				<div class="mb-2 md:mb-3 text-sm">
+					<textarea bind:value={summary} placeholder="Edit summary" />
+					<div class="prose text-sm">
+						{summary != '' ? summary : 'No summary'}
+					</div>
+				</div>
+			</div>
+			<div class="col-span-2">
+				<h2 class="mb-1">Description</h2>
+				<div class="mb-2 md:mb-6">
+					<div class="prose text-sm">
+						<textarea bind:value={description} placeholder="Edit description" />
+						<div class="prose text-sm">
+							<SvelteMarkdown
+								source={description && description != '' ? description : 'No description'}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		{#if synchronizedHeader}
+			<div class="bg-blue-100 border-l-4 border-blue-600 text-blue-700 p-4 m-4" role="alert">
+				<p class="font-bold">Synchronized with main signature</p>
+				<p>
+					Argument names, being required or not, and default values are derived from the main
+					signature of step 2 and cannot be edited directly. Change the main signature to edit them.
+				</p>
+			</div>
+		{/if}
+		<SchemaForm {schema} editableSchema={true} />
+	{:else}
+		<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
+	{/if}
+</div>

package/components/ShareModal.svelte

@@ -0,0 +1,135 @@
+<script>import Modal from './Modal.svelte';
+import TableCustom from './TableCustom.svelte';
+import { GranularAclService } from '../../gen/services/GranularAclService';
+import { sendUserToast } from '../../utils';
+import { GroupService, UserService } from '../../gen';
+import { createEventDispatcher } from 'svelte';
+import AutoComplete from 'simple-svelte-autocomplete';
+import { workspaceStore } from '../../stores';
+const dispatch = createEventDispatcher();
+export let kind;
+export let path = '';
+let ownerKind = 'user';
+let owner = '';
+let newOwner = '';
+let write = false;
+let acls = [];
+let groups = [];
+let usernames = [];
+let modal;
+$: newOwner = [ownerKind === 'group' ? 'g' : 'u', owner].join('/');
+export async function openModal(newPath) {
+    if (newPath) {
+        path = newPath;
+    }
+    loadAcls();
+    loadGroups();
+    loadUsernames();
+    modal.openModal();
+}
+async function loadAcls() {
+    acls = Object.entries(await GranularAclService.getGranularAcls({ workspace: $workspaceStore, path, kind }));
+}
+async function loadGroups() {
+    groups = await GroupService.listGroupNames({ workspace: $workspaceStore });
+}
+async function loadUsernames() {
+    usernames = await UserService.listUsernames({ workspace: $workspaceStore });
+}
+async function deleteAcl(owner) {
+    try {
+        await GranularAclService.removeGranularAcls({
+            workspace: $workspaceStore,
+            path,
+            kind,
+            requestBody: { owner }
+        });
+        loadAcls();
+        dispatch('change');
+    }
+    catch (err) {
+        sendUserToast(err.toString(), true);
+    }
+}
+async function addAcl(owner, write) {
+    try {
+        await GranularAclService.addGranularAcls({
+            workspace: $workspaceStore,
+            path,
+            kind,
+            requestBody: { owner, write }
+        });
+        loadAcls();
+        dispatch('change');
+    }
+    catch (err) {
+        sendUserToast(err.toString(), true);
+    }
+}
+</script>
+
+<Modal bind:this={modal}>
+	<div slot="title">Share {path}</div>
+
+	<div slot="content">
+		<div class="flex flex-row pb-0 mb-5 justify-between">
+			<label class="block">
+				<span class="text-gray-700 text-sm"> Owner Kind </span>
+
+				<select
+					class="block mt-2 w-20"
+					bind:value={ownerKind}
+					on:change={() => {
+						if (ownerKind === 'group') {
+							owner = 'all'
+						} else {
+							owner = ''
+						}
+					}}
+				>
+					<option>user</option>
+					<option>group</option>
+				</select>
+			</label>
+			<label class="block grow mx-2">
+				<span class="text-sm text-gray-700">Owner</span>
+				<div class="block mt-1">
+					<div class="static z-50">
+						<AutoComplete
+							items={ownerKind === 'user' ? usernames : groups}
+							bind:selectedItem={owner}
+						/>
+					</div>
+				</div>
+			</label>
+			<label class="block">
+				<span class="text-sm text-gray-700">Editor</span>
+				<input class="block mt-4" type="checkbox" bind:checked={write} />
+			</label>
+			<button
+				class="text-xs default-button max-h-6 place-self-end ml-2"
+				on:click={() => addAcl(newOwner, write)}>Add permission</button
+			>
+		</div>
+		<TableCustom>
+			<tr slot="header-row">
+				<th>owner</th>
+				<th>has write permission</th>
+				<th />
+			</tr>
+			<tbody slot="body">
+				{#each acls as [owner, write]}
+					<tr>
+						<td>{owner}</td>
+						<td>{write}</td>
+						<td
+							><button class="default-button-secondary" on:click={() => deleteAcl(owner)}
+								>Delete</button
+							></td
+						>
+					</tr>
+				{/each}
+			</tbody>
+		</TableCustom>
+	</div>
+</Modal>

package/components/SharedBadge.svelte

@@ -0,0 +1,54 @@
+<script>import { userStore } from '../../stores';
+import Badge from './Badge.svelte';
+export let extraPerms = {};
+export let canWrite;
+let kind = undefined;
+let reason = '';
+$: {
+    let username = $userStore?.username ?? '';
+    let pgroups = $userStore?.pgroups ?? [];
+    let pusername = `u/${username}`;
+    let extraPermsKeys = Object.keys(extraPerms);
+    if (pusername in extraPermsKeys) {
+        if (extraPerms[pusername]) {
+            kind = 'write';
+        }
+        else {
+            kind = 'read';
+        }
+        reason = 'This item was shared to you personally';
+    }
+    else {
+        let writeGroup = pgroups.find((x) => extraPermsKeys.includes(x) && extraPerms[x]);
+        if (pgroups.find((x) => x in extraPermsKeys && extraPerms[x])) {
+            kind = 'write';
+            reason = `This item was write shared to the group ${writeGroup} which you are a member of`;
+        }
+        else {
+            let readGroup = pgroups.find((x) => extraPermsKeys.includes(x) && extraPerms[x]);
+            if (pgroups.find((x) => extraPermsKeys.includes(x))) {
+                kind = 'read';
+                reason = `This item was read-only shared to the group ${readGroup} which you are a member of`;
+            }
+            else {
+                kind = undefined;
+            }
+        }
+    }
+    if (kind == 'read' && canWrite) {
+        kind = undefined;
+    }
+    if (kind == undefined && !canWrite) {
+        kind = 'read';
+        reason = '';
+    }
+}
+</script>
+
+<span>
+	{#if kind == 'read'}
+		<Badge tooltip={reason}>shared to you (read-only)</Badge>
+	{:else if kind == 'write'}
+		<Badge tooltip={reason}>shared to you</Badge>
+	{/if}
+</span>

package/components/StringTypeNarrowing.svelte

@@ -0,0 +1,101 @@
+<script>import RadioButton from './RadioButton.svelte';
+import ResourceTypePicker from './ResourceTypePicker.svelte';
+export let pattern;
+export let enum_;
+export let format;
+let kind = 'none';
+let patternStr = pattern ?? '';
+let resource;
+const FORMATS = [
+    'email',
+    'hostname',
+    'uri',
+    'uuid',
+    'ipv4'
+    // 'time',
+    // 'date',
+    // 'duration',
+    // 'ipv6',
+    // 'jsonpointer'
+];
+$: format =
+    kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : undefined;
+$: pattern = patternStr == '' ? undefined : patternStr;
+</script>
+
+<RadioButton
+	label="Kind"
+	small={true}
+	options={[
+		['None', 'none'],
+		['Enum', 'enum'],
+		['Resource Path', 'resource'],
+		['Format', 'format'],
+		['Pattern', 'pattern']
+	]}
+	bind:value={kind}
+/>
+
+{#if kind == 'pattern'}
+	<label class="mb-2 text-gray-700 text-xs"
+		>Pattern (Regex)
+		<div class="flex flex-row">
+			<input
+				type="text"
+				placeholder="^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$"
+				bind:value={patternStr}
+			/>
+			<button
+				class="default-button-secondary mx-2 mb-1"
+				on:click={() => {
+					patternStr = ''
+				}}>clear</button
+			>
+		</div>
+	</label>
+{:else if kind == 'enum'}
+	<label class="mb-2 text-gray-700 text-xs"
+		>Enums
+		{#each enum_ ?? [] as e}
+			<div class="flex flex-row max-w-md">
+				<input type="text" bind:value={e} />
+				<button
+					class="default-button mx-6"
+					on:click={() => {
+						enum_ = (enum_ ?? []).filter((el) => el != e)
+						if (enum_.length == 0) {
+							enum_ = undefined
+						}
+					}}>-</button
+				>
+			</div>
+		{/each}
+		<div class="flex flex-row my-1">
+			<button
+				class="default-button"
+				on:click={() => {
+					if (enum_ == undefined) {
+						enum_ = []
+					}
+					enum_ = enum_.concat('')
+				}}>+</button
+			>
+			<button
+				class="default-button-secondary ml-2"
+				on:click={() => {
+					enum_ = undefined
+				}}>clear</button
+			>
+		</div>
+	</label>
+{:else if kind == 'resource'}
+	<div class="mt-1" />
+	<ResourceTypePicker bind:value={resource} />
+{:else if kind == 'format'}
+	<select class="mt-1" bind:value={format}>
+		<option value={undefined} />
+		{#each FORMATS as f}
+			<option value={f}>{f}</option>
+		{/each}
+	</select>
+{/if}

package/components/Switch.svelte

@@ -0,0 +1,61 @@
+<script>
+	export let checked = false
+	export let label = ''
+	export let horizontal = true // Determines if the switch and label are on a row or col
+	export let textFormat = 'text-base' // Tailwind CSS classes to format the text
+</script>
+
+<div class="flex {horizontal ? 'flex-row justify-between' : 'flex-col'}  {$$props.class}">
+	<div class="my-auto {textFormat} mr-2">{label}</div>
+	<label class="switch my-auto">
+		<input type="checkbox" bind:checked />
+		<span class="slider" />
+	</label>
+</div>
+
+<style>
+	.switch {
+		position: relative;
+		display: inline-block;
+		width: 30px;
+		height: 17px;
+	}
+
+	.switch input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.slider {
+		position: absolute;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: #ccc;
+		transition: 0.4s;
+		border-radius: 17px;
+	}
+
+	.slider:before {
+		position: absolute;
+		content: '';
+		height: 13px;
+		width: 13px;
+		left: 2px;
+		bottom: 2px;
+		background-color: white;
+		transition: 0.4s;
+		border-radius: 50%;
+	}
+
+	input:checked + .slider {
+		background-color: #2196f3;
+		box-shadow: 0 0 1px #2196f3;
+	}
+
+	input:checked + .slider:before {
+		transform: translateX(13px);
+	}</style>

package/components/TableCustom.svelte

@@ -0,0 +1,39 @@
+<script>import { createEventDispatcher } from 'svelte';
+export let paginated = false;
+export let currentPage = 1;
+export let showNext = true;
+const dispatch = createEventDispatcher();
+</script>
+
+<!-- A custom table 
+- the first slot should be a <tr>, containing th elements
+- the second slot should be a <tbody>, containing th elements
+-->
+<div class="flex flex-col {$$props.class} min-w-full">
+	<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+		<table id="table-custom" class="min-w-full divide-y divide-gray-300 table-auto">
+			<thead>
+				<slot name="header-row" />
+			</thead>
+			<slot name="body" />
+		</table>
+	</div>
+	{#if paginated}
+		<div class="flex flex-row-reverse text-gray-500 mb-6">
+			<button
+				class="ml-2 drop-shadow-md {showNext ? 'visible' : 'invisible'}"
+				on:click={() => {
+					dispatch('next')
+				}}>Next</button
+			>
+			<button
+				class="mx-2 drop-shadow-md {currentPage === 1 ? 'hidden' : ''}"
+				on:click={() => {
+					dispatch('previous')
+				}}>Previous</button
+			>
+		</div>
+	{/if}
+</div>
+
+<style></style>

package/components/TableSimple.svelte

@@ -0,0 +1,66 @@
+<script>import { createEventDispatcher } from 'svelte';
+// A table suitable if you can pass data as a list of row objects
+export let headers;
+export let data; // Object containing the data
+export let keys;
+export let defaultText = 'No data to display';
+export let paginated = false;
+export let twTextSize = 'text-sm md:text-base';
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="mt-8 flex flex-col {$$props.class}">
+	<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+		<table class="min-w-full divide-y divide-gray-300 table-auto">
+			<thead>
+				<tr class={twTextSize}>
+					{#if headers}
+						{#each headers as header, i}
+							<th
+								class="py-3.5 text-left text-sm font-semibold text-gray-900 capitalize {i == 0
+									? 'sm:pl-6 md:pl-0 pl-4 pr-3'
+									: 'px-3 '}">{header}</th
+							>
+						{/each}
+					{/if}
+				</tr>
+			</thead>
+			<tbody class="divide-y divide-gray-200">
+				{#if data && keys && data.length > 0}
+					{#each data as row}
+						<tr>
+							{#each keys as key, i}
+								<td
+									class="py-4 text-sm text-gray-700 {i == 0
+										? 'pl-4 pr-3 sm:pl-6 md:pl-0 font-semibold'
+										: 'px-3'} {twTextSize}"
+								>
+									{row[key] ?? ''}</td
+								>
+							{/each}
+						</tr>
+					{/each}
+				{:else if data}
+					<tr>{defaultText}</tr>
+				{:else}
+					<tr>Loading...</tr>
+				{/if}
+			</tbody>
+		</table>
+	</div>
+</div>
+{#if paginated}
+	<div class="flex flex-row-reverse text-gray-500">
+		<button
+			on:click={() => {
+				dispatch('next')
+			}}>Next</button
+		>
+		<button
+			class="mx-2"
+			on:click={() => {
+				dispatch('next')
+			}}>Previous</button
+		>
+	</div>
+{/if}

package/components/Tabs.svelte

@@ -0,0 +1,21 @@
+<script>import { createEventDispatcher } from 'svelte';
+export let tabs;
+export let dflt = 0;
+export let tab = tabs[dflt][0];
+const dispatch = createEventDispatcher();
+$: dispatch('update', tab);
+</script>
+
+<div class="flex flex-col sm:flex-row text-base">
+	{#each tabs as [t, label]}
+		<button
+			class=" py-1 px-6 block hover:text-blue-500 focus:outline-noneborder-gray-200  
+				{t === tab ? 'text-gray-700 font-semibold underline' : 'text-gray-500'}"
+			on:click={() => {
+				tab = t
+			}}
+		>
+			{label}
+		</button>
+	{/each}
+</div>