windmill-components 1.13.0

package/components/Path.svelte

@@ -0,0 +1,129 @@
+<script>import { pathToMeta } from '../../common';
+import { GroupService } from '../../gen';
+import Tooltip from './Tooltip.svelte';
+import { userStore, workspaceStore } from '../../stores';
+import { sleep } from '../../utils';
+export let meta = {
+    ownerKind: 'user',
+    owner: '',
+    name: ''
+};
+export let namePlaceholder = '';
+export let initialPath;
+export let path = '';
+let groups = [];
+let error = '';
+$: {
+    path = [meta.ownerKind === 'group' ? 'g' : 'u', meta.owner, meta.name].join('/');
+}
+export function getPath() {
+    return path;
+}
+export async function reset() {
+    if (path == '' || path == 'u//') {
+        meta.ownerKind = 'user';
+        while ($userStore == undefined) {
+            await sleep(500);
+        }
+        meta.owner = $userStore.username;
+        meta.name = '';
+    }
+    else {
+        meta = pathToMeta(path);
+    }
+}
+$: validateName(meta);
+async function loadGroups() {
+    groups = await GroupService.listGroups({ workspace: $workspaceStore });
+}
+function validateName(meta) {
+    if (meta.name == undefined || meta.name == '') {
+        error = 'choose a name';
+        return;
+    }
+    const regex = new RegExp(/^[\w-]+(\/[\w-]+)*$/);
+    if (regex.test(meta.name)) {
+        error = '';
+    }
+    else {
+        error = 'This name is not valid. ';
+    }
+}
+$: {
+    if ($workspaceStore) {
+        loadGroups();
+    }
+}
+$: {
+    if (initialPath == undefined || initialPath == '') {
+        reset();
+    }
+    else {
+        meta = pathToMeta(initialPath);
+    }
+}
+</script>
+
+<div>
+	<div class="flex flex-col sm:grid sm:grid-cols-4 sm:gap-4 pb-0 mb-1">
+		<label class="block">
+			<span class="text-gray-700 text-sm">
+				Owner Kind<Tooltip class="mx-1">
+					<slot name="ownerToolkit" />
+				</Tooltip>
+			</span>
+
+			<select
+				bind:value={meta.ownerKind}
+				on:change={() => {
+					if (meta.ownerKind === 'group') {
+						meta.owner = 'all'
+					} else {
+						meta.owner = $userStore?.username ?? ''
+					}
+				}}
+			>
+				<option>user</option>
+				<option>group</option>
+			</select>
+		</label>
+		{#if meta.ownerKind === 'user'}
+			<label class="block">
+				<span class="text-sm text-gray-700">Owner</span>
+				<input
+					bind:value={meta.owner}
+					placeholder={$userStore?.username ?? ''}
+					disabled={!($userStore?.is_admin ?? false)}
+				/>
+			</label>
+		{:else}
+			<label class="block">
+				<span class="text-sm text-gray-700">Owner</span>
+				<select bind:value={meta.owner}>
+					{#each groups as g}
+						<option>{g.name}</option>
+					{/each}
+				</select>
+			</label>
+		{/if}
+		<label class="block col-span-2">
+			<span class="text-gray-700 text-sm">Name<span class="text-red-600 text-sm">*</span></span>
+			<input
+				bind:value={meta.name}
+				placeholder={namePlaceholder}
+				class={error === ''
+					? ''
+					: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+			/>
+		</label>
+	</div>
+	<div class="pt-0 text-xs px-1 flex flex-col-reverse sm:grid sm:grid-cols-4 sm:gap-4 w-full">
+		<div class="col-span-2">Path: <span class="font-mono">{path}</span></div>
+		<div class="text-purple-500 text-2xs col-span-2">{error}</div>
+	</div>
+</div>
+
+<style>
+	input:disabled {
+		background: rgba(200, 200, 200, 0.267);
+	}</style>

package/components/RadioButton.svelte

@@ -0,0 +1,117 @@
+<script>export let label = '';
+export let options;
+export let value;
+export let small = false;
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+</script>
+
+<fieldset>
+	<legend class="sr-only">{label}</legend>
+	<div class="flex flex-row gap-2">
+		{#each options as [label, val]}
+			<label class:selected={val == value} class={small ? 'py-0' : 'py-3'}>
+				<input
+					type="radio"
+					value={val}
+					class="sr-only"
+					bind:group={value}
+					aria-labelledby="memory-option-0-label"
+					on:click={() => dispatch('change', val)}
+				/>
+				<p>{label}</p>
+			</label>
+		{/each}
+	</div>
+</fieldset>
+
+<style>
+	label {
+
+    display: flex;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    justify-content: center;
+
+    border-radius: 0.375rem;
+
+    border-width: 1px;
+
+    padding-left: 0.75rem;
+
+    padding-right: 0.75rem;
+
+    font-size: 0.875rem;
+
+    line-height: 1.25rem;
+
+    font-weight: 500;
+
+    text-transform: uppercase
+}
+
+label:focus {
+
+    outline: 2px solid transparent;
+
+    outline-offset: 2px
+}
+
+@media (min-width: 640px) {
+
+    label {
+
+        flex: 1 1 0%
+    }
+}
+
+	label.selected {
+
+    display: flex;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    justify-content: center;
+
+    border-radius: 0.375rem;
+
+    border-width: 1px;
+
+    background-color: rgb(59 130 246 / 0.9);
+
+    padding-left: 0.75rem;
+
+    padding-right: 0.75rem;
+
+    font-size: 0.875rem;
+
+    line-height: 1.25rem;
+
+    font-weight: 500;
+
+    text-transform: uppercase;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--tw-text-opacity))
+}
+
+	label.selected:focus {
+
+    outline: 2px solid transparent;
+
+    outline-offset: 2px
+}
+
+	@media (min-width: 640px) {
+
+    label.selected {
+
+        flex: 1 1 0%
+    }
+}</style>

package/components/Required.svelte

@@ -0,0 +1,11 @@
+<script>export let required;
+export let detail = '';
+</script>
+
+{#if required}
+	<span class="text-red-600 font-normal">*</span>
+{:else}
+	<span class="text-sm text-gray-500 ml-2 font-normal"
+		>(optional{detail != '' ? `, ${detail}` : ''})</span
+	>
+{/if}

package/components/ResourceEditor.svelte

@@ -0,0 +1,260 @@
+<script>import { ResourceService, VariableService } from '../../gen';
+import { allTrue, emptySchema, sendUserToast } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import Modal from './Modal.svelte';
+import Path from './Path.svelte';
+import ArgInput from './ArgInput.svelte';
+import AutosizedTextarea from './AutosizedTextarea.svelte';
+import ItemPicker from './ItemPicker.svelte';
+import VariableEditor from './VariableEditor.svelte';
+import Required from './Required.svelte';
+import { workspaceStore } from '../../stores';
+import ResourceTypePicker from './ResourceTypePicker.svelte';
+let path = '';
+let initialPath = '';
+let step = 1;
+let resourceToEdit;
+let description = '';
+let DESCRIPTION_PLACEHOLDER = `You can use markdown to style your description.
+A good way to make resources user friendly is to link to a default script for your resource [example](scripts/add?template=f2d1dc8df796d9e8)`;
+let selectedResourceType;
+let resourceType;
+let resourceSchema;
+let args = {};
+let error;
+let pickForField;
+let itemPicker;
+let variableEditor;
+let modal;
+const dispatch = createEventDispatcher();
+export async function initNew() {
+    selectedResourceType = undefined;
+    step = 1;
+    args = {};
+    path = '';
+    description = '';
+    initialPath = '';
+    resourceSchema = emptySchema();
+    resourceToEdit = undefined;
+    modal.openModal();
+}
+export async function initEdit(p) {
+    initialPath = p;
+    path = p;
+    step = 2;
+    resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore, path: p });
+    description = resourceToEdit.description ?? '';
+    selectedResourceType = resourceToEdit.resource_type;
+    await loadResourceType();
+    args = resourceToEdit.value;
+    modal.openModal();
+}
+async function createResource() {
+    try {
+        await ResourceService.createResource({
+            workspace: $workspaceStore,
+            requestBody: { path, value: args, description, resource_type: resourceType.name }
+        });
+        sendUserToast(`Successfully created resource at ${path}`);
+        dispatch('refresh');
+        modal.closeModal();
+    }
+    catch (err) {
+        sendUserToast(`${err}`, true);
+    }
+}
+async function editResource() {
+    try {
+        if (resourceToEdit) {
+            await ResourceService.updateResource({
+                workspace: $workspaceStore,
+                path: resourceToEdit.path,
+                requestBody: { path, value: args, description }
+            });
+            sendUserToast(`Successfully updated resource at ${path}`);
+            dispatch('refresh');
+            modal.closeModal();
+        }
+        else {
+            throw Error('Cannot edit undefined resourceToEdit');
+        }
+    }
+    catch (err) {
+        sendUserToast(`${err}`, true);
+    }
+}
+async function loadResourceType() {
+    if (selectedResourceType) {
+        resourceType = await ResourceService.getResourceType({
+            workspace: $workspaceStore,
+            path: selectedResourceType
+        });
+        if (resourceType.schema) {
+            resourceSchema = resourceType.schema;
+        }
+    }
+    else {
+        sendUserToast(`ResourceType cannot be undefined.`, true);
+    }
+}
+let inputCheck = {};
+$: isValid = allTrue(inputCheck) ?? false;
+</script>
+
+<Modal
+	bind:this={modal}
+	on:close={() => {
+		dispatch('close')
+	}}
+>
+	<div slot="title">{resourceToEdit ? 'Edit ' + resourceToEdit.path : 'Add a resource'}</div>
+	<div slot="content">
+		<!-- content -->
+		{#if step === 1}
+			<div class="flex flex-col gap-3	px-6 py-3 bg-gray-50 text-gray-700">
+				<div>
+					<span class="text-purple-500 text-2xs grow">{error ?? ''}</span>
+					<span class="mb-1 font-semibold text-gray-700">Path</span>
+					<Path bind:path {initialPath} namePlaceholder="my/resource">
+						<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+							Resource permissions depend on their path. Select the group <span class="font-mono"
+								>all</span
+							>
+							to share it, and <span class="font-mono">user</span> to keep it private.
+							<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
+						</div>
+					</Path>
+				</div>
+				<span class=" mt-3 font-semibold text-gray-700 "
+					>Description <Required required={false} />
+				</span>
+				<AutosizedTextarea
+					bind:value={description}
+					placeholder={DESCRIPTION_PLACEHOLDER}
+					minRows={3}
+				/>
+				<div>
+					<div class="mb-1 font-semibold text-gray-700">
+						Resource type<Required required={true} />
+					</div>
+					<ResourceTypePicker
+						bind:value={selectedResourceType}
+						notPickable={resourceToEdit != undefined}
+						on:click={() => {
+							args = {}
+						}}
+					/>
+				</div>
+			</div>
+		{:else}
+			<div class="text-sm">
+				{#if resourceSchema && resourceSchema?.properties}
+					{#each Object.keys(resourceSchema.properties) as fieldName}
+						<div class="flex flex-row w-full items-end justify-between">
+							<ArgInput
+								label={fieldName}
+								description={resourceSchema.properties[fieldName]?.description}
+								bind:value={args[fieldName]}
+								type={resourceSchema.properties[fieldName]?.type}
+								required={resourceSchema.required.includes(fieldName)}
+								pattern={resourceSchema.properties[fieldName]?.pattern}
+								bind:valid={inputCheck[fieldName]}
+								defaultValue={resourceSchema.properties[fieldName]?.default}
+								enum_={resourceSchema.properties[fieldName]?.enum}
+								contentEncoding={resourceSchema.properties[fieldName]?.contentEncoding}
+								itemsType={resourceSchema.properties[fieldName]?.items}
+								format={resourceSchema.properties[fieldName]?.format}
+							/>
+							<div class="pb-3 ml-2 relative">
+								<button
+									class="default-button-secondary min-w-min items-center leading-4 py-0"
+									on:click={() => {
+										pickForField = fieldName
+										itemPicker.openModal()
+									}}>insert variable</button
+								>
+							</div>
+						</div>
+					{/each}
+				{:else}
+					<div>Invalid schema</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+	<span slot="submission">
+		{#if step === 1}
+			{#if selectedResourceType && path != undefined && path != '' && path.split('/')[2] != ''}
+				<button
+					class="default-button px-4 py-2 font-semibold"
+					on:click={async () => {
+						await loadResourceType()
+						step = 2
+					}}
+				>
+					Next
+				</button>
+			{:else}
+				<button class="default-button-disabled px-4 py-2 font-semibold">Next</button>
+			{/if}
+		{:else}
+			<button
+				class="default-button-secondary px-4 py-2 font-semibold"
+				on:click={() => {
+					step = 1
+				}}
+			>
+				Back
+			</button>
+			<button
+				disabled={!isValid}
+				class="default-button px-4 py-2 font-semibold"
+				on:click={() => {
+					if (resourceToEdit) {
+						editResource()
+					} else {
+						createResource()
+					}
+				}}
+			>
+				Save
+			</button>
+		{/if}
+	</span>
+</Modal>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, _) => {
+		if (pickForField) {
+			args[pickForField] = '$var:' + path
+		}
+	}}
+	itemName="Variable"
+	extraField="name"
+	loadItems={async () =>
+		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+			name: x.path,
+			...x
+		}))}
+>
+	<div
+		slot="submission"
+		class="flex flex-row-reverse w-full p-5 bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+	>
+		<button
+			class="default-button-secondary"
+			type="button"
+			on:click={() => {
+				variableEditor.initNew()
+			}}
+		>
+			Create a new variable
+		</button>
+		<div class="text-xs mr-2 align-middle">
+			The variable you were looking for does not exist yet?
+		</div>
+	</div>
+</ItemPicker>
+
+<VariableEditor bind:this={variableEditor} on:create={itemPicker.openModal} />

package/components/ResourcePicker.svelte

@@ -0,0 +1,21 @@
+<script>import { ResourceService } from '../../gen';
+import { workspaceStore } from '../../stores';
+let resources = [];
+export let value;
+export let resourceType;
+async function loadResources(resourceType) {
+    resources = await ResourceService.listResource({ workspace: $workspaceStore, resourceType });
+}
+$: {
+    if ($workspaceStore) {
+        loadResources(resourceType);
+    }
+}
+</script>
+
+<select class="mt-1" bind:value placeholder="Pick a resource {resourceType}">
+	<option value={undefined} />
+	{#each resources as r}
+		<option value={r.path}>{r.path}{r.description ? ' | ' + r.description : ''}</option>
+	{/each}
+</select>

package/components/ResourceTypePicker.svelte

@@ -0,0 +1,71 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { ResourceService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import IconedResourceType from './IconedResourceType.svelte';
+let resources = [];
+export let value;
+export let notPickable = false;
+async function loadResources() {
+    resources = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore });
+}
+const dispatch = createEventDispatcher();
+$: {
+    if ($workspaceStore) {
+        loadResources();
+    }
+}
+</script>
+
+<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
+	{#each resources as r}
+		<button
+			class="px-4 h-8 {r == value
+				? 'item-button-selected'
+				: notPickable
+				? 'item-button-disabled'
+				: 'item-button'}"
+			on:click={() => {
+				value = r
+				dispatch('click')
+			}}
+		>
+			<IconedResourceType name={r} after={true} />
+		</button>
+	{/each}
+</div>
+
+<style>
+	.item-button {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    border-width: 1px;
+    border-radius: 0.125rem
+}
+	.item-button-selected {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(59 130 246 / var(--tw-border-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+    border-radius: 0.125rem
+}
+
+	.item-button-disabled {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    border-width: 1px;
+    --tw-bg-opacity: 1;
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(209 213 219 / var(--tw-text-opacity));
+    border-radius: 0.125rem
+}
+
+	.selected:hover {
+    border-radius: 0.375rem;
+    border-width: 1px;
+    border-color: rgb(156 163 175 / var(--tw-border-opacity));
+    --tw-border-opacity: 0.5
+}</style>