windmill-components 1.22.42 → 1.28.1

package/components/ObjectResourceInput.svelte

@@ -1,61 +1,81 @@
 <script>import { ResourceService } from '../gen';
-import ResourcePicker from './ResourcePicker.svelte';
 import { workspaceStore } from '../stores';
-import SchemaForm from './SchemaForm.svelte';
 import RadioButton from './RadioButton.svelte';
+import ResourcePicker from './ResourcePicker.svelte';
+import SchemaForm from './SchemaForm.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 path = '';
 let args = {};
-if (!isString(value) && value) {
-    args = value;
-}
 let schema = undefined;
 let isValid = true;
 let resourceTypeName = '';
+let option = isString(value) || value == undefined ? 'resource' : 'raw';
+$: format.startsWith('resource-') && loadSchema(format);
 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}`;
+function argToValue() {
+    value = args;
+}
+function resourceToValue() {
+    value = `$res:${path}`;
+}
+function isResource() {
+    return isString(value) && value.length >= '$res:'.length;
+}
+function valueToPath() {
+    if (!isString(value) && value) {
+        args = value;
+    }
+    if (isResource()) {
+        path = value.substr('$res:'.length);
     }
-    else {
-        value = args;
+    else if (value !== undefined && value !== '') {
+        option = 'raw';
     }
 }
-$: format.startsWith('resource-') && loadSchema(format);
+$: value && valueToPath();
 </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 />
+<div class="flex flex-row w-full gap-2">
+	<div class="shrink w-40">
+		<RadioButton
+			options={[
+				[`Resource (${resourceTypeName})`, 'resource'],
+				[`Raw object value`, 'raw']
+			]}
+			on:change={argToValue}
+			bind:value={option}
+		/>
+	</div>
+	<div class="grow">
+		{#if option == 'resource'}
+			<ResourcePicker
+				on:refresh={() => loadSchema(format)}
+				on:change={(e) => {
+					path = e.detail
+					resourceToValue()
+				}}
+				bind:value={path}
+				resourceType={format.split('-').length > 1
+					? format.substring('resource-'.length)
+					: undefined}
+			/>
+		{:else}
+			<div class="border rounded p-5 w-full">
+				<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}
 	</div>
-{/if}
+</div>

package/components/ObjectTypeNarrowing.svelte

@@ -1,25 +1,10 @@
-<script>import RadioButton from './RadioButton.svelte';
-import ResourceTypePicker from './ResourceTypePicker.svelte';
+<script>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;
+$: format = resource != undefined ? `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}
+<div class="mt-2" />
+<ResourceTypePicker bind:value={resource} nonePickable={true} />

package/components/Path.svelte

@@ -155,6 +155,7 @@ $: {
 		<label class="block col-span-2">
 			<span class="text-gray-700 text-sm">Name<span class="text-red-600 text-sm">*</span></span>
 			<input
+				autofocus
 				bind:value={meta.name}
 				placeholder={namePlaceholder}
 				class={error === ''

package/components/Path.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         initialPath: string;
         path?: string | undefined;
         error?: string | undefined;
-        kind: "resource" | "script" | "schedule" | "variable" | "flow";
+        kind: "flow" | "script" | "resource" | "schedule" | "variable";
         getPath?: (() => string) | undefined;
         reset?: (() => Promise<void>) | undefined;
     };

package/components/RadioButton.svelte

@@ -1,16 +1,19 @@
 <script>export let label = '';
 export let options;
 export let value;
-export let small = false;
 import { createEventDispatcher } from 'svelte';
+import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
 </script>
 
-<fieldset>
+<fieldset class="w-full">
 	<legend class="sr-only">{label}</legend>
-	<div class="flex flex-row gap-2">
+	<div class="flex flex-row flex-wrap gap-2 items-center mb-2 w-full">
 		{#each options as [label, val]}
-			<label class:selected={val == value} class={small ? 'py-0' : 'py-3'}>
+			<label
+				class:item-button-selected={val == value}
+				class="item-button text-center text-sm h-full p-2 grow"
+			>
 				<input
 					type="radio"
 					value={val}
@@ -19,99 +22,11 @@ const dispatch = createEventDispatcher();
 					aria-labelledby="memory-option-0-label"
 					on:click={() => dispatch('change', val)}
 				/>
-				<p>{label}</p>
+				<p>
+					{#if typeof label !== 'string'}{label.title} <Tooltip>{label.desc}</Tooltip>
+					{:else}{label}{/if}
+				</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.7);
-
-    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/RadioButton.svelte.d.ts

@@ -2,9 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string | undefined;
-        options: [string, any][];
+        options: [string | {
+            title: string;
+            desc: string;
+        }, any][];
         value: any;
-        small?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/components/ResourceEditor.svelte

@@ -16,8 +16,7 @@ let pathError = '';
 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 DESCRIPTION_PLACEHOLDER = `You can use markdown to style your description`;
 let selectedResourceType;
 let resourceType;
 let resourceSchema;
@@ -28,8 +27,7 @@ let itemPicker;
 let variableEditor;
 let modal;
 const dispatch = createEventDispatcher();
-export async function initNew() {
-    selectedResourceType = undefined;
+export async function initNew(rt) {
     step = 1;
     args = {};
     path = '';
@@ -37,6 +35,7 @@ export async function initNew() {
     initialPath = '';
     resourceSchema = emptySchema();
     resourceToEdit = undefined;
+    selectedResourceType = rt;
     modal.openModal();
 }
 export async function initEdit(p) {
@@ -136,7 +135,7 @@ $: isValid = allTrue(inputCheck) ?? false;
 					minRows={3}
 				/>
 				<div>
-					<div class="mb-1 font-semibold text-gray-700">
+					<div class="mb-2 font-semibold text-gray-700">
 						Resource type<Required required={true} />
 					</div>
 					<ResourceTypePicker

package/components/ResourceEditor.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        initNew?: (() => Promise<void>) | undefined;
+        initNew?: ((rt?: string) => Promise<void>) | undefined;
         initEdit?: ((p: string) => Promise<void>) | undefined;
     };
     events: {
@@ -16,7 +16,7 @@ export declare type ResourceEditorProps = typeof __propDef.props;
 export declare type ResourceEditorEvents = typeof __propDef.events;
 export declare type ResourceEditorSlots = typeof __propDef.slots;
 export default class ResourceEditor extends SvelteComponentTyped<ResourceEditorProps, ResourceEditorEvents, ResourceEditorSlots> {
-    get initNew(): () => Promise<void>;
+    get initNew(): (rt?: string | undefined) => Promise<void>;
     get initEdit(): (p: string) => Promise<void>;
 }
 export {};

package/components/ResourcePicker.svelte

@@ -1,21 +1,44 @@
 <script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
+import { createEventDispatcher } from 'svelte';
+import ResourceEditor from './ResourceEditor.svelte';
+const dispatch = createEventDispatcher();
 let resources = [];
-export let value = undefined;
+export let initialValue = undefined;
+export let value = initialValue;
 export let resourceType = undefined;
+let resourceEditor;
 async function loadResources(resourceType) {
+    const v = value;
     resources = await ResourceService.listResource({ workspace: $workspaceStore, resourceType });
+    value = v;
 }
 $: {
     if ($workspaceStore) {
         loadResources(resourceType);
     }
 }
+$: dispatch('change', value);
 </script>
 
-<select class="mt-1" bind:value placeholder="Pick a resource {resourceType}">
+<ResourceEditor bind:this={resourceEditor} on:refresh={() => loadResources(resourceType)} />
+<select 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>
+<div class="flex flex-row gap-4">
+	<a class="text-xs hover:underline" target="_blank" href="/resources?connect_app={resourceType}"
+		>Connect the app {resourceType} to an account (if available)</a
+	>
+	<button
+		class="text-xs text-blue-500"
+		type="button"
+		on:click={() => {
+			resourceEditor.initNew(resourceType)
+		}}
+	>
+		+ Create a new {resourceType} resource manually
+	</button>
+</div>

package/components/ResourcePicker.svelte.d.ts

@@ -1,10 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        initialValue?: string | undefined;
         value?: string | undefined;
         resourceType?: string | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/ResourceTypePicker.svelte

@@ -5,6 +5,7 @@ import IconedResourceType from './IconedResourceType.svelte';
 let resources = [];
 export let value;
 export let notPickable = false;
+export let nonePickable = false;
 async function loadResources() {
     resources = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore });
 }
@@ -17,9 +18,24 @@ $: {
 </script>
 
 <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
+	{#if nonePickable}
+		<button
+			class="px-4 h-8 text-center {undefined == value
+				? 'item-button-selected'
+				: notPickable
+				? 'item-button-disabled'
+				: 'item-button'}"
+			on:click={() => {
+				value = undefined
+				dispatch('click')
+			}}
+		>
+			None
+		</button>
+	{/if}
 	{#each resources as r}
 		<button
-			class="px-4 h-8 {r == value
+			class="px-4 h-8 text-center {r == value
 				? 'item-button-selected'
 				: notPickable
 				? 'item-button-disabled'
@@ -35,34 +51,6 @@ $: {
 </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;

package/components/ResourceTypePicker.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         value: string | undefined;
         notPickable?: boolean | undefined;
+        nonePickable?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/RunForm.svelte

@@ -1,11 +1,11 @@
 <script>import { page } from '$app/stores';
-import { getToday } from '../utils';
+import { decodeState, getToday } from '../utils';
 import { slide } from 'svelte/transition';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
-import Tooltip from './Tooltip.svelte';
 import SvelteMarkdown from 'svelte-markdown';
 import SchemaForm from './SchemaForm.svelte';
+import Tooltip from './Tooltip.svelte';
 export let runnable;
 export let runAction;
 export let buttonText = 'Run';
@@ -15,7 +15,7 @@ export let args = {};
 let isValid = true;
 let queryArgs = $page.url.searchParams.get('args');
 if (queryArgs) {
-    const parsed = JSON.parse(atob(queryArgs));
+    const parsed = decodeState(queryArgs);
     Object.entries(parsed).forEach(([k, v]) => {
         if (v == '<function call>') {
             parsed[k] = undefined;
@@ -52,17 +52,16 @@ let scheduledForStr;
 	{#if runnable?.schema}
 		{#if detailed}
 			<h2>
-				Arguments <Tooltip
-					>The optional fields, if left blank, will use the placeholder value as default.</Tooltip
-				>
+				Arguments
+				<Tooltip>
+					The optional fields, if left blank, will use the placeholder value as default.
+				</Tooltip>
 			</h2>
 		{/if}
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
-			<div class="text-sm">No arguments</div>
+			<div class="text-sm p-4">No arguments</div>
 		{:else}
-			<div
-				class="bg-gray-50 border border shadow-md shadow-blue-100 shadow-inner rounded border-gray-300 p-6"
-			>
+			<div class="bg-gray-50 border  shadow-blue-100 shadow-inner rounded border-gray-300 p-6">
 				<SchemaForm schema={runnable.schema} bind:isValid bind:args />
 			</div>
 		{/if}
@@ -89,8 +88,10 @@ let scheduledForStr;
 						class="default-button-secondary mx-2 mb-1"
 						on:click={() => {
 							scheduledForStr = undefined
-						}}>clear</button
+						}}
 					>
+						Clear
+					</button>
 				</div>
 			</div>
 		</div>
@@ -105,10 +106,8 @@ let scheduledForStr;
 		>
 			{#if schedulable}
 				<div>
-					schedule to run later <Icon
-						data={viewOptions ? faChevronUp : faChevronDown}
-						scale={0.5}
-					/>
+					Schedule to run later
+					<Icon data={viewOptions ? faChevronUp : faChevronDown} scale={0.5} />
 				</div>
 			{/if}
 		</button>

package/components/RunForm.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Script, Flow } from '../gen';
+import type { Flow, Script } from '../gen';
 declare const __propDef: {
     props: {
         runnable: Script | Flow | undefined;