windmill-components 1.36.2 → 1.46.1

package/components/RunForm.svelte

@@ -1,29 +1,22 @@
 <script>import { page } from '$app/stores';
-import { decodeState, getToday } from '../utils';
+import { decodeArgs, defaultIfEmptyString, displayDaysAgo, emptyString, getToday, truncateHash } from '../utils';
 import { slide } from 'svelte/transition';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import Icon from 'svelte-awesome';
-import SvelteMarkdown from 'svelte-markdown';
 import SchemaForm from './SchemaForm.svelte';
-import Tooltip from './Tooltip.svelte';
-import { Button } from './common';
+import { Badge, Button } from './common';
+import SharedBadge from './SharedBadge.svelte';
 export let runnable;
 export let runAction;
 export let buttonText = 'Run';
 export let schedulable = true;
 export let detailed = true;
-export let args = {};
-let isValid = true;
-let queryArgs = $page.url.searchParams.get('args');
-if (queryArgs) {
-    const parsed = decodeState(queryArgs);
-    Object.entries(parsed).forEach(([k, v]) => {
-        if (v == '<function call>') {
-            parsed[k] = undefined;
-        }
-    });
-    args = parsed;
+export let autofocus = false;
+export let topButton = false;
+export let args = decodeArgs($page.url.searchParams.get('args') ?? undefined);
+export function run() {
+    runAction(scheduledForStr, args);
 }
+export let isValid = true;
 // Run later
 let viewOptions = false;
 let scheduledForStr;
@@ -31,38 +24,62 @@ let scheduledForStr;
 
 <div class="max-w-6xl">
 	{#if detailed}
-		<div class="grid grid-cols-3 gap-2">
-			<div>
-				<h2 class="mb-1">Summary</h2>
-				<div class="mb-2 md:mb-3 text-sm">
-					{runnable?.summary ? runnable?.summary : 'No summary'}
-				</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">
-						<SvelteMarkdown
-							source={runnable?.description ? runnable?.description : 'No description'}
-						/>
+		{#if runnable}
+			<div class="flex flex-row flex-wrap justify-between gap-4">
+				<div>
+					<div class="flex flex-col mb-2">
+						<h1 class="break-words py-2 mr-2">
+							{defaultIfEmptyString(runnable.summary, runnable.path ?? '')}
+						</h1>
+						{#if !emptyString(runnable.summary)}
+							<h2 class="font-bold pb-4">{runnable.path}</h2>
+						{/if}
+
+						<div class="flex items-center gap-2">
+							<span class="text-sm text-gray-500">
+								{#if runnable}
+									Edited {displayDaysAgo(runnable.created_at || '')} by {runnable.created_by ||
+										'unknown'}
+								{/if}
+							</span>
+							<Badge color="dark-gray">
+								{truncateHash(runnable?.hash ?? '')}
+							</Badge>
+							{#if runnable?.is_template}
+								<Badge color="blue">Template</Badge>
+							{/if}
+							{#if runnable && runnable.kind !== 'runnable'}
+								<Badge color="blue">
+									{runnable?.kind}
+								</Badge>
+							{/if}
+							<SharedBadge
+								canWrite={runnable.can_write ?? true}
+								extraPerms={runnable?.extra_perms ?? {}}
+							/>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
+		{:else}
+			<h1>Loading...</h1>
+		{/if}
+	{/if}
+	{#if topButton}
+		<Button
+			btnClasses="!px-6 !py-1 w-full"
+			disabled={!isValid}
+			on:click={() => runAction(undefined, args)}
+		>
+			{buttonText}
+		</Button>
 	{/if}
 	{#if runnable?.schema}
-		{#if detailed}
-			<h2>
-				Arguments
-				<Tooltip>
-					The optional fields, if left blank, will use the placeholder value as default.
-				</Tooltip>
-			</h2>
-		{/if}
+		<div class="my-2" />
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
 			<div class="text-sm p-4">No arguments</div>
 		{:else}
-			<SchemaForm schema={runnable.schema} bind:isValid bind:args />
+			<SchemaForm {autofocus} schema={runnable.schema} bind:isValid bind:args />
 		{/if}
 	{:else}
 		<div class="text-sm">No schema</div>
@@ -116,7 +133,7 @@ let scheduledForStr;
 				{scheduledForStr ? 'Schedule run to a later time' : buttonText}
 			</Button>
 		</div>
-	{:else}
+	{:else if !topButton}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
 			disabled={!isValid}

package/components/RunForm.svelte.d.ts

@@ -6,12 +6,24 @@ declare const __propDef: {
             summary?: string;
             schema?: Schema;
             description?: string;
+            path?: string;
+            is_template?: boolean;
+            hash?: string;
+            kind?: string;
+            can_write?: boolean;
+            created_at?: string;
+            created_by?: string;
+            extra_perms?: Record<string, boolean>;
         } | undefined;
         runAction: (scheduledForStr: string | undefined, args: Record<string, any>) => void;
         buttonText?: string | undefined;
         schedulable?: boolean | undefined;
         detailed?: boolean | undefined;
+        autofocus?: boolean | undefined;
+        topButton?: boolean | undefined;
         args?: Record<string, any> | undefined;
+        run?: (() => void) | undefined;
+        isValid?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,5 +34,6 @@ export declare type RunFormProps = typeof __propDef.props;
 export declare type RunFormEvents = typeof __propDef.events;
 export declare type RunFormSlots = typeof __propDef.slots;
 export default class RunForm extends SvelteComponentTyped<RunFormProps, RunFormEvents, RunFormSlots> {
+    get run(): () => void;
 }
 export {};

package/components/SchemaEditor.svelte

@@ -74,7 +74,7 @@ function handleAddOrEditArgument() {
         modalProperty = Object.assign({}, DEFAULT_PROPERTY);
         editing = false;
         oldArgName = undefined;
-        schemaModal.closeModal();
+        schemaModal.closeDrawer();
     }
     schema = schema;
     schemaString = JSON.stringify(schema, null, '\t');
@@ -86,7 +86,7 @@ function startEditArgument(argName) {
         editing = true;
         modalProperty = schemaToModal(schema.properties[argName], argName, schema.required.includes(argName));
         oldArgName = argName;
-        schemaModal.openModal();
+        schemaModal.openDrawer();
     }
     else {
         sendUserToast(`This argument does not exist and can't be edited`, true);
@@ -131,11 +131,11 @@ function switchTab() {
 		<Button
 			variant="contained"
 			color="blue"
-			size="md"
+			size="sm"
 			startIcon={{ icon: faPlus }}
 			on:click={() => {
 				modalProperty = Object.assign({}, DEFAULT_PROPERTY)
-				schemaModal.openModal()
+				schemaModal.openDrawer()
 			}}
 		>
 			Add argument
@@ -178,7 +178,7 @@ function switchTab() {
 									<td>
 										<SchemaEditorProperty {property} />
 									</td>
-									<td>{property.description}</td>
+									<td>{property.description ?? ''}</td>
 									<td>{property.default ? JSON.stringify(property.default) : ''}</td>
 									<td
 										>{#if schema.required.includes(name)}

package/components/SchemaEditorProperty.svelte

@@ -1,4 +1,4 @@
-<script>import { Badge } from 'flowbite-svelte';
+<script>import Badge from './common/badge/Badge.svelte';
 export let property;
 </script>
 

package/components/SchemaForm.svelte

@@ -8,6 +8,7 @@ export let editableSchema = false;
 export let isValid = true;
 export let extraLib = 'missing extraLib';
 export let importPath = undefined;
+export let autofocus = false;
 let clazz = '';
 export { clazz as class };
 let inputCheck = {};
@@ -28,18 +29,19 @@ $: schema?.properties && removeExtraKey();
 
 <div class="w-full {clazz}">
 	{#if Object.keys(schema?.properties ?? {}).length > 0}
-		{#each Object.keys(schema?.properties ?? {}) as argName}
+		{#each Object.keys(schema?.properties ?? {}) as argName, i (argName)}
 			{#if inputTransform}
 				<InputTransformForm
 					bind:arg={args[argName]}
 					bind:schema
 					bind:argName
-					bind:inputCheck
+					bind:inputCheck={inputCheck[argName]}
 					bind:extraLib
 					bind:importPath
 				/>
 			{:else}
 				<ArgInput
+					autofocus={i == 0 && autofocus}
 					label={argName}
 					bind:description={schema.properties[argName].description}
 					bind:value={args[argName]}
@@ -58,6 +60,6 @@ $: schema?.properties && removeExtraKey();
 			{/if}
 		{/each}
 	{:else}
-		<p class="italic text-sm">No settable input</p>
+		<p class="italic text-sm">No inputs</p>
 	{/if}
 </div>

package/components/SchemaForm.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         isValid?: boolean | undefined;
         extraLib?: string | undefined;
         importPath?: string | undefined;
+        autofocus?: boolean | undefined;
         class?: string | undefined;
     };
     events: {

package/components/SchemaModal.svelte

@@ -1,5 +1,4 @@
-<script context="module">import Modal from './Modal.svelte';
-export const ARG_TYPES = ['integer', 'number', 'string', 'boolean', 'object', 'array'];
+<script context="module">export const ARG_TYPES = ['integer', 'number', 'string', 'boolean', 'object', 'array'];
 export function schemaToModal(schema, name, required) {
     return {
         name,
@@ -20,26 +19,28 @@ export const DEFAULT_PROPERTY = {
 };
 </script>
 
-<script>import Switch from './Switch.svelte';
-import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import ArgInput from './ArgInput.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import Required from './Required.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
 import { Button } from './common';
+import Toggle from './Toggle.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import Drawer from './common/drawer/Drawer.svelte';
 export let property = DEFAULT_PROPERTY;
 export let error = '';
 export let editing = false;
 export let oldArgName = undefined;
 let resource_type = undefined;
 const dispatch = createEventDispatcher();
-let modal;
-export function openModal() {
-    modal.openModal();
+let drawer;
+export function openDrawer() {
+    drawer.openDrawer();
     resource_type = property.format?.substring(5);
 }
-export function closeModal() {
-    modal.closeModal();
+export function closeDrawer() {
+    drawer.closeDrawer();
 }
 function clearModal() {
     error = '';
@@ -52,6 +53,7 @@ function clearModal() {
     property.selectedType = DEFAULT_PROPERTY.selectedType;
     property.format = undefined;
     resource_type = undefined;
+    drawer.closeDrawer();
 }
 $: if (property.selectedType == 'object' && resource_type) {
     property.format = resource_type ? `$res:${resource_type}` : undefined;
@@ -64,112 +66,118 @@ else {
 }
 </script>
 
-<Modal bind:this={modal} on:close={clearModal}>
-	<div slot="title">Add an argument</div>
-	<div slot="content">
-		<div class="flex flex-col px-6 py-3 bg-gray-50">
-			<label class="font-semibold text-gray-700"
-				>Name<Required required={true} />
-				<input
-					autofocus
-					autocomplete="off"
-					type="text"
-					placeholder="name"
-					bind:value={property.name}
-					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 class="mb-2 text-red-600 text-2xs">{error}</div>
+<Drawer bind:this={drawer} placement="right">
+	<DrawerContent on:close={clearModal} title="Add an argument">
+		<div class="flex flex-col gap-6">
+			<div>
+				<label class="block">
+					<div class="mb-1 font-semibold text-gray-700">
+						Name
+						<Required required={true} />
+					</div>
+					<input
+						autofocus
+						autocomplete="off"
+						type="text"
+						placeholder="Enter a name"
+						bind:value={property.name}
+						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 class="text-red-600 text-2xs">{error}</div>
+			</div>
 
-			<label class="mb-2 font-semibold text-gray-700">
-				Description
-				<textarea
-					class="mb-1"
-					type="text"
-					placeholder="Type message..."
-					rows="3"
-					bind:value={property.description}
-				/>
+			<label class="block">
+				<div class="mb-1 font-semibold text-gray-700">
+					Description
+					<Required required={false} />
+				</div>
+				<textarea placeholder="Enter a description" rows="3" bind:value={property.description} />
 			</label>
-			<h3 class="font-semibold text-gray-700">Type<Required required={true} /></h3>
-			<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2 w-full">
-				{#each ARG_TYPES as argType}
-					{@const isSelected = argType == property.selectedType}
+			<div>
+				<div class="mb-1 font-semibold text-gray-700">Type<Required required={true} /></div>
+				<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2 w-full">
+					{#each ARG_TYPES as argType}
+						{@const isSelected = argType == property.selectedType}
+						<Button
+							size="sm"
+							variant="border"
+							color={isSelected ? 'blue' : 'dark'}
+							btnClasses={isSelected ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							on:click={() => {
+								property.selectedType = argType
+								property.format = undefined
+								property.contentEncoding = undefined
+								property.enum_ = undefined
+								property.pattern = undefined
+							}}
+						>
+							{argType}
+						</Button>
+					{/each}
 					<Button
+						size="sm"
 						variant="border"
-						color={isSelected ? 'blue' : 'dark'}
-						btnClasses={isSelected ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+						color={!property.selectedType ? 'blue' : 'dark'}
+						btnClasses={!property.selectedType ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 						on:click={() => {
-							property.selectedType = argType
-							property.format = undefined
-							property.contentEncoding = undefined
-							property.enum_ = undefined
-							property.pattern = undefined
+							property.selectedType = undefined
 						}}
 					>
-						{argType}
+						any
 					</Button>
-				{/each}
-				<Button
-					variant="border"
-					color={!property.selectedType ? 'blue' : 'dark'}
-					btnClasses={!property.selectedType ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-					on:click={() => {
-						property.selectedType = undefined
-					}}
-				>
-					Any
-				</Button>
-				>
+				</div>
+			</div>
+			<div class="flex flex-row gap-x-4">
+				<ArgInput
+					label="Default"
+					bind:value={property.default}
+					type={property.selectedType}
+					pattern={property.pattern}
+				/>
+				<Toggle
+					options={{ right: 'Required' }}
+					class="mt-5 !justify-start"
+					bind:checked={property.required}
+				/>
 			</div>
-			<Switch
-				label={'Required'}
-				textFormat={'text-md font-semibold text-gray-700'}
-				class="my-2"
-				bind:checked={property.required}
-			/>
-			<ArgInput
-				label="Default"
-				bind:value={property.default}
-				type={property.selectedType}
-				pattern={property.pattern}
-			/>
 			{#if property.selectedType !== 'boolean'}
-				<h2 class="mb-2 mt-4">Advanced</h2>
-
-				{#if property.selectedType == 'string'}
-					<StringTypeNarrowing
-						bind:format={property.format}
-						bind:pattern={property.pattern}
-						bind:enum_={property.enum_}
-						bind:contentEncoding={property.contentEncoding}
-					/>
-				{:else if property.selectedType == 'array'}
-					<select bind:value={property.items}>
-						<option value={undefined}>No specific item type</option>
-						<option value={{ type: 'string' }}> Items are strings</option>
-						<option value={{ type: 'number' }}>Items are numbers</option>
-					</select>
-				{:else if property.selectedType == 'object'}
-					<h3 class="mb-2 font-bold mt-4">Resource type</h3>
-					<ObjectTypeNarrowing bind:format={property.format} />
-				{:else}
-					<p>No advanced configuration for this type</p>
-				{/if}
+				<div>
+					<div class="font-semibold text-gray-700 mb-1">Advanced</div>
+					{#if property.selectedType == 'string'}
+						<StringTypeNarrowing
+							bind:format={property.format}
+							bind:pattern={property.pattern}
+							bind:enum_={property.enum_}
+							bind:contentEncoding={property.contentEncoding}
+						/>
+					{:else if property.selectedType == 'array'}
+						<select bind:value={property.items}>
+							<option value={undefined}>No specific item type</option>
+							<option value={{ type: 'string' }}> Items are strings</option>
+							<option value={{ type: 'number' }}>Items are numbers</option>
+						</select>
+					{:else if property.selectedType == 'object'}
+						<h3 class="mb-2 font-bold mt-4">Resource type</h3>
+						<ObjectTypeNarrowing bind:format={property.format} />
+					{:else}
+						<p>No advanced configuration for this type</p>
+					{/if}
+				</div>
 			{/if}
 		</div>
-	</div>
 
-	<button
-		disabled={!property.name || !property.selectedType || error != ''}
-		slot="submission"
-		class="px-4 py-2 text-white font-semibold bg-blue-500 rounded"
-		on:click={() => {
-			dispatch('save')
-		}}
-	>
-		Save
-	</button>
-</Modal>
+		<button
+			disabled={!property.name || !property.selectedType || error != ''}
+			slot="submission"
+			class="px-4 py-2 text-white font-semibold bg-blue-500 rounded"
+			on:click={() => {
+				dispatch('save')
+			}}
+		>
+			Save
+		</button>
+	</DrawerContent>
+</Drawer>

package/components/SchemaModal.svelte.d.ts

@@ -24,8 +24,8 @@ declare const __propDef: {
         error?: string | undefined;
         editing?: boolean | undefined;
         oldArgName?: string | undefined;
-        openModal?: (() => void) | undefined;
-        closeModal?: (() => void) | undefined;
+        openDrawer?: (() => void) | undefined;
+        closeDrawer?: (() => void) | undefined;
     };
     events: {
         save: CustomEvent<any>;
@@ -38,7 +38,7 @@ export declare type SchemaModalProps = typeof __propDef.props;
 export declare type SchemaModalEvents = typeof __propDef.events;
 export declare type SchemaModalSlots = typeof __propDef.slots;
 export default class SchemaModal extends SvelteComponentTyped<SchemaModalProps, SchemaModalEvents, SchemaModalSlots> {
-    get openModal(): () => void;
-    get closeModal(): () => void;
+    get openDrawer(): () => void;
+    get closeDrawer(): () => void;
 }
 export {};

package/components/SchemaViewer.svelte

@@ -5,6 +5,7 @@ import TableCustom from './TableCustom.svelte';
 import Tab from './common/tabs/Tab.svelte';
 import TabContent from './common/tabs/TabContent.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
+import { Badge } from './common';
 export let schema = emptySchema();
 </script>
 
@@ -28,11 +29,13 @@ export let schema = emptySchema();
 							<tbody slot="body">
 								{#each Object.entries(schema.properties) as [name, property] (name)}
 									<tr>
-										<td>{name}</td>
+										<td class="font-semibold pl-1">{name}</td>
 										<td
-											>{#if !property.type} any {:else} {property.type} {/if}</td
+											><Badge color="blue"
+												>{#if !property.type} any {:else} {property.type} {/if}</Badge
+											></td
 										>
-										<td>{property.description}</td>
+										<td>{property.description ?? ''}</td>
 										<td
 											>{property.default == '<function call>'
 												? '<function call>'
@@ -57,7 +60,7 @@ export let schema = emptySchema();
 						</TableCustom>
 					</div>
 				{:else}
-					<div class="text-gray-700 text-xs italic">This script has no arguments</div>
+					<div class="text-gray-700 text-xs italic m-1">No arguments</div>
 				{/if}
 			</TabContent>
 			<TabContent value="advanced">