windmill-components 1.35.42 → 1.36.0

package/components/RadioButton.svelte

@@ -11,8 +11,9 @@ const dispatch = createEventDispatcher();
 	<div class="flex flex-row flex-wrap gap-2 items-center mb-2 w-full">
 		{#each options as [label, val]}
 			<label
-				class:item-button-selected={val == value}
-				class="item-button text-center text-sm h-full p-2 grow whitespace-nowrap"
+				class="text-center text-sm border border-gray-300 h-full rounded-sm cursor-pointer p-2 
+				grow whitespace-nowrap hover:border-gray-600 hover:bg-gray-100
+				{val === value ? '!bg-blue-50 !border-blue-500' : ''}"
 			>
 				<input
 					type="radio"

package/components/ResourceEditor.svelte

@@ -8,6 +8,7 @@ import AutosizedTextarea from './AutosizedTextarea.svelte';
 import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import Required from './Required.svelte';
+import { Button } from './common';
 import { workspaceStore } from '../stores';
 import ResourceTypePicker from './ResourceTypePicker.svelte';
 let path = '';
@@ -92,6 +93,9 @@ async function loadResourceType() {
         sendUserToast(`ResourceType cannot be undefined.`, true);
     }
 }
+function resourceAction() {
+    return resourceToEdit ? editResource() : createResource();
+}
 let inputCheck = {};
 $: isValid = allTrue(inputCheck) ?? false;
 </script>
@@ -108,7 +112,7 @@ $: isValid = allTrue(inputCheck) ?? false;
 		{#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="text-red-600 text-2xs grow">{error ?? ''}</span>
 					<span class="mb-1 font-semibold text-gray-700">Path</span>
 					<Path
 						bind:error={pathError}
@@ -167,13 +171,16 @@ $: isValid = allTrue(inputCheck) ?? false;
 								properties={resourceSchema.properties[fieldName]?.properties}
 								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"
+							<div class="pb-6 ml-2 relative">
+								<Button
+									variant="border"
+									color="blue"
+									size="sm"
+									btnClasses="min-w-min items-center leading-4 py-0"
 									on:click={() => {
 										pickForField = fieldName
 										itemPicker.openModal()
-									}}>insert variable</button
+									}}>Insert variable</Button
 								>
 							</div>
 						</div>
@@ -184,10 +191,9 @@ $: isValid = allTrue(inputCheck) ?? false;
 			</div>
 		{/if}
 	</div>
-	<span slot="submission">
+	<span slot="submission" class="flex gap-4">
 		{#if step === 1}
-			<button
-				class="default-button px-4 py-2 font-semibold"
+			<Button
 				on:click={async () => {
 					await loadResourceType()
 					step = 2
@@ -195,29 +201,10 @@ $: isValid = allTrue(inputCheck) ?? false;
 				disabled={selectedResourceType == undefined || pathError != ''}
 			>
 				Next
-			</button>
+			</Button>
 		{: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>
+			<Button variant="border" on:click={() => (step = 1)}>Back</Button>
+			<Button on:click={resourceAction} disabled={!isValid}>Save</Button>
 		{/if}
 	</span>
 </Modal>
@@ -241,15 +228,16 @@ $: isValid = allTrue(inputCheck) ?? false;
 		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"
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
 			on:click={() => {
 				variableEditor.initNew()
 			}}
 		>
 			Create a new variable
-		</button>
+		</Button>
 		<div class="text-xs mr-2 align-middle">
 			The variable you were looking for does not exist yet?
 		</div>

package/components/ResourceTypePicker.svelte

@@ -2,6 +2,7 @@
 import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
 import IconedResourceType from './IconedResourceType.svelte';
+import { Button } from './common';
 let resources = [];
 export let value;
 export let notPickable = false;
@@ -10,50 +11,38 @@ async function loadResources() {
     resources = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore });
 }
 const dispatch = createEventDispatcher();
-$: {
-    if ($workspaceStore) {
-        loadResources();
-    }
+function onClick(resource) {
+    value = resource;
+    dispatch('click');
+}
+$: 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">
 	{#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')
-			}}
+		{@const isPicked = value === undefined}
+		<Button
+			variant="border"
+			color={isPicked ? 'blue' : 'dark'}
+			btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+			disabled={notPickable}
+			on:click={() => onClick(undefined)}
 		>
 			None
-		</button>
+		</Button>
 	{/if}
 	{#each resources as r}
-		<button
-			class="px-4 h-8 text-center {r == value
-				? 'item-button-selected'
-				: notPickable
-				? 'item-button-disabled'
-				: 'item-button'}"
-			on:click={() => {
-				value = r
-				dispatch('click')
-			}}
+		{@const isPicked = value === r}
+		<Button
+			variant="border"
+			color={isPicked ? 'blue' : 'dark'}
+			btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+			disabled={notPickable}
+			on:click={() => onClick(r)}
 		>
 			<IconedResourceType name={r} after={true} />
-		</button>
+		</Button>
 	{/each}
 </div>
-
-<style>
-	.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>

package/components/RunForm.svelte

@@ -6,6 +6,7 @@ import Icon from 'svelte-awesome';
 import SvelteMarkdown from 'svelte-markdown';
 import SchemaForm from './SchemaForm.svelte';
 import Tooltip from './Tooltip.svelte';
+import { Button } from './common';
 export let runnable;
 export let runAction;
 export let buttonText = 'Run';
@@ -28,7 +29,7 @@ let viewOptions = false;
 let scheduledForStr;
 </script>
 
-<div class="max-w-5xl">
+<div class="max-w-6xl">
 	{#if detailed}
 		<div class="grid grid-cols-3 gap-2">
 			<div>
@@ -61,9 +62,7 @@ let scheduledForStr;
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
 			<div class="text-sm p-4">No arguments</div>
 		{:else}
-			<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>
+			<SchemaForm schema={runnable.schema} bind:isValid bind:args />
 		{/if}
 	{:else}
 		<div class="text-sm">No schema</div>
@@ -84,42 +83,46 @@ let scheduledForStr;
 							min={getToday().toISOString().slice(0, 16)}
 						/>
 					</div>
-					<button
-						class="default-button-secondary mx-2 mb-1"
+					<Button
+						variant="border"
+						color="blue"
+						size="sm"
+						btnClasses="mx-2 mb-1"
 						on:click={() => {
 							scheduledForStr = undefined
 						}}
 					>
 						Clear
-					</button>
+					</Button>
 				</div>
 			</div>
 		</div>
 	{/if}
-	<div class="flex justify-between mt-2 md:mt-6 mb-6">
-		<button
-			type="submit"
-			class="mr-6 text-sm underline text-gray-700 inline-flex  items-center"
-			on:click={() => {
-				viewOptions = !viewOptions
-			}}
-		>
-			{#if schedulable}
-				<div>
-					Schedule to run later
-					<Icon data={viewOptions ? faChevronUp : faChevronDown} scale={0.5} />
-				</div>
-			{/if}
-		</button>
-		<button
-			type="submit"
+	{#if schedulable}
+		<div class="flex justify-between mt-2 md:mt-6 mb-6">
+			<Button
+				color="light"
+				size="sm"
+				endIcon={{ icon: viewOptions ? faChevronUp : faChevronDown }}
+				on:click={() => (viewOptions = !viewOptions)}
+			>
+				Schedule to run later
+			</Button>
+			<Button
+				btnClasses="!px-6 !py-1"
+				disabled={!isValid}
+				on:click={() => runAction(scheduledForStr, args)}
+			>
+				{scheduledForStr ? 'Schedule run to a later time' : buttonText}
+			</Button>
+		</div>
+	{:else}
+		<Button
+			btnClasses="!px-6 !py-1 w-full"
 			disabled={!isValid}
-			class="{isValid ? 'default-button' : 'default-button-disabled'} w-min px-6"
-			on:click={() => {
-				runAction(scheduledForStr, args)
-			}}
+			on:click={() => runAction(undefined, args)}
 		>
-			{scheduledForStr ? 'Schedule run to a later time' : buttonText}
-		</button>
-	</div>
+			{buttonText}
+		</Button>
+	{/if}
 </div>

package/components/RunForm.svelte.d.ts

@@ -1,8 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Flow, Script } from '../gen';
+import type { Schema } from '../common';
 declare const __propDef: {
     props: {
-        runnable: Script | Flow | undefined;
+        runnable: {
+            summary?: string;
+            schema?: Schema;
+            description?: string;
+        } | undefined;
         runAction: (scheduledForStr: string | undefined, args: Record<string, any>) => void;
         buttonText?: string | undefined;
         schedulable?: boolean | undefined;

package/components/SchemaEditor.svelte

@@ -1,8 +1,7 @@
 <script>import { emptySchema, sendUserToast } from '../utils';
 import { faPen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'flowbite-svelte';
+import { Button } from './common';
 import { createEventDispatcher } from 'svelte';
-import Icon from 'svelte-awesome';
 import SchemaEditorProperty from './SchemaEditorProperty.svelte';
 import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
@@ -59,7 +58,9 @@ function handleAddOrEditArgument() {
     else {
         schema.properties[modalProperty.name] = modalToSchema(modalProperty);
         if (modalProperty.required) {
-            schema.required = [...schema.required, modalProperty.name];
+            if (!schema.required.includes(modalProperty.name)) {
+                schema.required.push(modalProperty.name);
+            }
         }
         else if (schema.required.includes(modalProperty.name)) {
             const index = schema.required.indexOf(modalProperty.name, 0);
@@ -128,13 +129,15 @@ function switchTab() {
 <div class="flex flex-col">
 	<div class="flex justify-between gap-x-2">
 		<Button
+			variant="contained"
+			color="blue"
+			size="md"
+			startIcon={{ icon: faPlus }}
 			on:click={() => {
 				modalProperty = Object.assign({}, DEFAULT_PROPERTY)
 				schemaModal.openModal()
 			}}
-			class="blue-button"
 		>
-			<Icon data={faPlus} class="mr-1" />
 			Add argument
 		</Button>
 
@@ -185,16 +188,21 @@ function switchTab() {
 									<td class="justify-end flex">
 										<Button
 											color="red"
-											outline
-											class="mr-2"
-											size="xs"
+											variant="border"
+											btnClasses="mr-2"
+											size="sm"
+											startIcon={{ icon: faTrash }}
 											on:click={() => handleDeleteArgument(name)}
 										>
-											<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} />
+										<Button
+											color="light"
+											variant="border"
+											size="sm"
+											startIcon={{ icon: faPen }}
+											on:click={() => startEditArgument(name)}
+										>
 											Edit
 										</Button>
 									</td>

package/components/SchemaForm.svelte

@@ -6,9 +6,10 @@ export let schema;
 export let args = {};
 export let editableSchema = false;
 export let isValid = true;
-export let pickableProperties = undefined;
 export let extraLib = 'missing extraLib';
 export let importPath = undefined;
+let clazz = '';
+export { clazz as class };
 let inputCheck = {};
 $: isValid = allTrue(inputCheck) ?? false;
 $: if (args == undefined) {
@@ -25,7 +26,7 @@ function removeExtraKey() {
 $: schema?.properties && removeExtraKey();
 </script>
 
-<div class="w-full">
+<div class="w-full {clazz}">
 	{#if Object.keys(schema?.properties ?? {}).length > 0}
 		{#each Object.keys(schema?.properties ?? {}) as argName}
 			{#if inputTransform}
@@ -34,7 +35,6 @@ $: schema?.properties && removeExtraKey();
 					bind:schema
 					bind:argName
 					bind:inputCheck
-					bind:pickableProperties
 					bind:extraLib
 					bind:importPath
 				/>

package/components/SchemaForm.svelte.d.ts

@@ -7,9 +7,9 @@ declare const __propDef: {
         args?: Record<string, any> | undefined;
         editableSchema?: boolean | undefined;
         isValid?: boolean | undefined;
-        pickableProperties?: Object | undefined;
         extraLib?: string | undefined;
         importPath?: string | undefined;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/SchemaModal.svelte

@@ -26,6 +26,7 @@ import ArgInput from './ArgInput.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import Required from './Required.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
+import { Button } from './common';
 export let property = DEFAULT_PROPERTY;
 export let error = '';
 export let editing = false;
@@ -80,7 +81,7 @@ else {
 						: '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-purple-500 text-2xs">{error}</div>
+			<div class="mb-2 text-red-600 text-2xs">{error}</div>
 
 			<label class="mb-2 font-semibold text-gray-700">
 				Description
@@ -95,22 +96,32 @@ else {
 			<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}
-					<button
-						class={argType == property.selectedType ? 'item-button-selected' : 'item-button'}
+					{@const isSelected = argType == property.selectedType}
+					<Button
+						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
+						}}
 					>
+						{argType}
+					</Button>
 				{/each}
-				<button
-					class={!property.selectedType ? 'item-button-selected' : 'item-button'}
+				<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
+					}}
+				>
+					Any
+				</Button>
 				>
 			</div>
 			<Switch