windmill-components 1.21.0 → 1.28.1

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) {
@@ -118,7 +117,7 @@ $: isValid = allTrue(inputCheck) ?? false;
 						namePlaceholder="my/resource"
 						kind="resource"
 					>
-						<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+						<div slot="ownerToolkit">
 							Resource permissions depend on their path. Select the group <span class="font-mono"
 								>all</span
 							>
@@ -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 class="px-2 mb-6"
-					>Optioal 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;

package/components/SchemaEditor.svelte

@@ -1,8 +1,15 @@
-<script>import SchemaModal, { DEFAULT_PROPERTY, modalToSchema, schemaToModal } from './SchemaModal.svelte';
+<script>import { emptySchema, sendUserToast } from '../utils';
+import { faPen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { Button } from 'flowbite-svelte';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
 import Editor from './Editor.svelte';
-import { emptySchema, sendUserToast } from '../utils';
-import Tooltip from './Tooltip.svelte';
+import SchemaEditorProperty from './SchemaEditorProperty.svelte';
+import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte';
 import TableCustom from './TableCustom.svelte';
+import Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
+const dispatch = createEventDispatcher();
 export let schema = emptySchema();
 let schemaModal;
 let schemaString = '';
@@ -28,6 +35,18 @@ export function getSchema() {
         throw Error(`Error: input is not a valid schema: ${err}`);
     }
 }
+function modalToSchema(schema) {
+    return {
+        type: schema.selectedType,
+        description: schema.description,
+        pattern: schema.pattern,
+        default: schema.default,
+        enum: schema.enum_,
+        items: schema.items,
+        contentEncoding: schema.contentEncoding,
+        format: schema.format
+    };
+}
 function handleAddOrEditArgument() {
     // If editing the arg's name, oldName containing the old argument name must be provided
     argError = '';
@@ -58,14 +77,15 @@ function handleAddOrEditArgument() {
     }
     schema = schema;
     schemaString = JSON.stringify(schema, null, '\t');
+    dispatch('change', schema);
 }
 function startEditArgument(argName) {
     argError = '';
     if (Object.keys(schema.properties).includes(argName)) {
-        schemaModal.openModal();
         editing = true;
         modalProperty = schemaToModal(schema.properties[argName], argName, schema.required.includes(argName));
         oldArgName = argName;
+        schemaModal.openModal();
     }
     else {
         sendUserToast(`This argument does not exist and can't be edited`, true);
@@ -75,8 +95,13 @@ function handleDeleteArgument(argName) {
     try {
         if (Object.keys(schema.properties).includes(argName)) {
             delete schema.properties[argName];
+            const requiredIndex = schema.required.findIndex((arg) => arg === argName);
+            if (requiredIndex > -1) {
+                schema.required = schema.required.slice(requiredIndex, 1);
+            }
             schema = schema;
             schemaString = JSON.stringify(schema, null, '\t');
+            dispatch('change', schema);
         }
         else {
             throw Error('Argument not found!');
@@ -101,93 +126,84 @@ function switchTab() {
 </script>
 
 <div class="flex flex-col">
-	<div class="w-full">
-		<div class="flex flex-row text-base">
-			<button
-				class="text-xs sm:text-base py-1 px-6 block hover:text-blue-500 focus:outline-noneborder-gray-200  {viewJsonSchema
-					? 'text-gray-500 '
-					: 'text-gray-700 font-semibold  '}"
-				on:click={() => (viewJsonSchema ? switchTab() : null)}
-			>
-				arguments
-			</button><button
-				class="py-1 px-6 block hover:text-blue-500 focus:outline-none border-gray-200  {viewJsonSchema
-					? 'text-gray-700 font-semibold '
-					: 'text-gray-500'}"
-				on:click={() => (viewJsonSchema ? null : switchTab())}
-			>
-				advanced <Tooltip
-					>Arguments can be edited either using the wizard, or by editing their json-schema <a
-						href="https://docs.windmill.dev/docs/reference/script_arguments_reference">docs</a
-					></Tooltip
-				>
-			</button>
-			<button
-				class="default-button-secondary grow"
-				on:click={() => {
-					modalProperty = Object.assign({}, DEFAULT_PROPERTY)
-					schemaModal.openModal()
-				}}>Add argument</button
-			>
+	<div class="flex justify-between">
+		<Button
+			on:click={() => {
+				modalProperty = Object.assign({}, DEFAULT_PROPERTY)
+				schemaModal.openModal()
+			}}
+			class="blue-button"
+		>
+			<Icon data={faPlus} class="mr-1" />
+			Add argument
+		</Button>
+
+		<div class="flex items-center">
+			<Toggle
+				on:change={() => switchTab()}
+				options={{
+					right: 'Json Schema Editor'
+				}}
+			/>
+			<div class="ml-2">
+				<Tooltip>
+					Arguments can be edited either using the wizard, or by editing their json-schema
+					<a href="https://docs.windmill.dev/docs/reference/script_arguments_reference">docs</a>
+				</Tooltip>
+			</div>
 		</div>
 	</div>
+
 	<!--json schema or table view-->
-	<div class="border-t py-1  h-full overflow-y-auto">
+	<div class="h-full overflow-y-auto">
 		{#if !viewJsonSchema}
 			<div class="h-full">
 				{#if schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
-					<TableCustom class="w-full min-h-full">
-						<tr slot="header-row" class="underline">
-							<th>name</th>
-							<th>type</th>
-							<th>description</th>
-							<th>default</th>
-							<th>required</th>
+					<TableCustom>
+						<tr slot="header-row">
+							<th>Name</th>
+							<th>Type</th>
+							<th>Description</th>
+							<th>Default</th>
+							<th>Required</th>
+							<th />
 						</tr>
 						<tbody slot="body">
 							{#each Object.entries(schema.properties) as [name, property] (name)}
 								<tr>
-									<td>{name}</td>
-									<td
-										>{#if !property.type} any {:else} {property.type} {/if}</td
-									>
+									<td class="font-bold">{name}</td>
+									<td>
+										<SchemaEditorProperty {property} />
+									</td>
 									<td>{property.description}</td>
 									<td>{JSON.stringify(property.default) ?? ''}</td>
-									<td>{schema.required.includes(name) ? 'required' : 'optional'}</td>
-									<td class="">
-										<button class="mr-2" on:click={() => handleDeleteArgument(name)}
-											><svg
-												class="w-4 h-4"
-												fill="none"
-												stroke="currentColor"
-												viewBox="0 0 24 14"
-												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
+									<td>{schema.required.includes(name) ? 'Required' : 'Optional'}</td>
+									<td class="justify-end flex">
+										<Button
+											color="red"
+											outline
+											class="mr-2"
+											size="xs"
+											on:click={() => handleDeleteArgument(name)}
 										>
-										<button
-											class="default-button-secondary text-xs inline-flex"
-											on:click={() => {
-												startEditArgument(name)
-											}}>edit</button
-										></td
-									>
+											<Icon data={faTrash} class="mr-2" scale={0.8} />
+											Delete
+										</Button>
+										<Button color="alternative" size="xs" on:click={() => startEditArgument(name)}>
+											<Icon data={faPen} class="mr-2" scale={0.8} />
+											Edit
+										</Button>
+									</td>
 								</tr>
 							{/each}
 						</tbody>
 					</TableCustom>
 				{:else}
-					<div class="text-gray-700 text-xs italic">This script has no argument</div>
+					<div class="text-gray-700 text-xs italic mt-2">This schema has no arguments.</div>
 				{/if}
 			</div>
 		{:else}
-			<div>
+			<div class="border rounded mt-4 p-2">
 				<Editor
 					on:change={() => {
 						try {
@@ -197,7 +213,7 @@ function switchTab() {
 						}
 					}}
 					bind:code={schemaString}
-					lang={'json'}
+					lang="json"
 					class="small-editor"
 				/>
 			</div>

package/components/SchemaEditor.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         getSchema?: (() => Schema) | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/SchemaEditorProperty.svelte

@@ -0,0 +1,11 @@
+<script>import { Badge } from 'flowbite-svelte';
+export let property;
+</script>
+
+<Badge color="blue">{property.type?.toUpperCase() ?? 'ANY'}</Badge>
+{#if property.format}
+	<Badge color="green">{property.format?.toUpperCase()}</Badge>
+{/if}
+{#if property.contentEncoding}
+	<Badge color="indigo">{property.contentEncoding?.toUpperCase()}</Badge>
+{/if}

package/components/SchemaEditorProperty.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SchemaProperty } from '../common';
+declare const __propDef: {
+    props: {
+        property: SchemaProperty;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SchemaEditorPropertyProps = typeof __propDef.props;
+export declare type SchemaEditorPropertyEvents = typeof __propDef.events;
+export declare type SchemaEditorPropertySlots = typeof __propDef.slots;
+export default class SchemaEditorProperty extends SvelteComponentTyped<SchemaEditorPropertyProps, SchemaEditorPropertyEvents, SchemaEditorPropertySlots> {
+}
+export {};