windmill-components 1.35.43 → 1.36.0

package/components/AppConnect.svelte

@@ -28,6 +28,7 @@ import Icon from 'svelte-awesome';
 import Modal from './Modal.svelte';
 import Password from './Password.svelte';
 import Path from './Path.svelte';
+import { Button } from './common';
 let manual = false;
 let value = '';
 let valueToken;
@@ -156,6 +157,10 @@ $: isGoogleSignin =
             resource_type == 'gcal' ||
             resource_type == 'gdrive' ||
             resource_type == 'gsheets');
+$: disabled =
+    (step == 1 && resource_type == '') ||
+        (step == 2 && value == '') ||
+        (step == 3 && pathError != '');
 </script>
 
 <Modal
@@ -185,8 +190,10 @@ $: isGoogleSignin =
 			<PageHeader title="OAuth APIs" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) as [key, values]}
-					<button
-						class="px-4 h-8 {key == resource_type ? 'item-button-selected' : 'item-button'}"
+					<Button
+						variant="border"
+						color={key === resource_type ? 'blue' : 'dark'}
+						btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 						on:click={() => {
 							manual = false
 							resource_type = key
@@ -197,64 +204,93 @@ $: isGoogleSignin =
 						}}
 					>
 						<IconedResourceType name={key} after={true} />
-					</button>
+					</Button>
 				{/each}
 			</div>
-			<PageHeader title="scopes" primary={false} />
+			<PageHeader title="Scopes" primary={false} />
 			{#if !manual && resource_type != ''}
 				{#each scopes as v}
-					<div class="flex flex-row max-w-md">
+					<div class="flex flex-row max-w-md mb-2">
 						<input type="text" bind:value={v} />
-						<button
-							class="default-button-secondary mx-6"
+						<Button
+							variant="border"
+							color="red"
+							size="xs"
+							btnClasses="mx-6"
 							on:click={() => {
 								scopes = scopes.filter((el) => el != v)
-							}}><Icon data={faMinus} class="mb-1" /></button
+							}}
 						>
+							<Icon data={faMinus} />
+						</Button>
 					</div>
 				{/each}
-				<button
-					class="default-button-secondary mt-1"
-					on:click={() => {
-						scopes = scopes.concat('')
-					}}>Add item &nbsp;<Icon data={faPlus} class="mb-1" /></button
-				><span class="ml-2">{(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''}</span
-				>
+				<div class="flex items-center mt-1">
+					<Button
+						variant="border"
+						color="blue"
+						size="sm"
+						endIcon={{ icon: faPlus }}
+						on:click={() => {
+							scopes = scopes.concat('')
+						}}
+					>
+						Add item
+					</Button>
+					<span class="ml-2 text-sm text-gray-500">
+						({(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''})
+					</span>
+				</div>
 			{:else}
 				<p class="italic text-sm">Pick an OAuth API and customize the scopes here</p>
 			{/if}
 			<PageHeader title="Extra Params" primary={false} />
 			{#if !manual && resource_type != ''}
 				{#each extra_params as [k, v]}
-					<div class="flex flex-row max-w-md">
-						<input type="text" bind:value={k} />
+					<div class="flex flex-row max-w-md mb-2">
+						<input type="text" bind:value={k} class="mr-2" />
 						<input type="text" bind:value={v} />
 
-						<button
-							class="default-button-secondary mx-6"
+						<Button
+							variant="border"
+							color="red"
+							size="xs"
+							btnClasses="mx-6"
 							on:click={() => {
 								extra_params = extra_params.filter((el) => el[0] != k)
-							}}><Icon data={faMinus} class="mb-1" /></button
+							}}
 						>
+							<Icon data={faMinus} />
+						</Button>
 					</div>
 				{/each}
-				<button
-					class="default-button-secondary mt-1"
-					on:click={() => {
-						extra_params.push(['', ''])
-						extra_params = extra_params
-					}}>Add item &nbsp;<Icon data={faPlus} class="mb-1" /></button
-				><span class="ml-2"
-					>{(extra_params ?? []).length} item{(extra_params ?? []).length > 1 ? 's' : ''}</span
-				>
+				<div class="flex items-center mt-1">
+					<Button
+						variant="border"
+						color="blue"
+						size="sm"
+						endIcon={{ icon: faPlus }}
+						on:click={() => {
+							extra_params.push(['', ''])
+							extra_params = extra_params
+						}}
+					>
+						Add item
+					</Button>
+					<span class="ml-2 text-sm text-gray-500">
+						({(extra_params ?? []).length} item{(extra_params ?? []).length > 1 ? 's' : ''})
+					</span>
+				</div>
 			{:else}
 				<p class="italic text-sm">Pick an OAuth API and customize the extra parameters here</p>
 			{/if}
 			<PageHeader title="Non OAuth APIs" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each connectsManual as [key, instructions]}
-					<button
-						class="px-4 h-8 {key == resource_type ? 'item-button-selected' : 'item-button'}"
+					<Button
+						variant="border"
+						color={key === resource_type ? 'blue' : 'dark'}
+						btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 						on:click={() => {
 							manual = true
 							resource_type = key
@@ -262,7 +298,7 @@ $: isGoogleSignin =
 						}}
 					>
 						<IconedResourceType name={key} after={true} />
-					</button>
+					</Button>
 				{/each}
 			</div>
 		{:else if step == 2}
@@ -310,34 +346,24 @@ $: isGoogleSignin =
 			</ul>
 		{/if}
 	</div>
-	<div slot="submission">
+	<div slot="submission" class="flex items-center gap-4">
 		{#if step > 1 && !no_back}
-			<button class="default-button px-4 py-2 font-semibold" on:click={back}>Back</button>
+			<Button variant="border" on:click={back}>Back</Button>
+		{/if}
+		{#if isGoogleSignin}
+			<button {disabled} on:click={next}>
+				<img class="h-10 w-auto" src="/google_signin.png" alt="Google sign-in" />
+			</button>
+		{:else}
+			<Button {disabled} on:click={next}>
+				{#if step == 1 && !manual}
+					Connect
+				{:else if step == 3}
+					Add resource
+				{:else}
+					Next
+				{/if}
+			</Button>
 		{/if}
-		<button
-			class={isGoogleSignin ? '' : 'default-button px-4 py-2 font-semibold'}
-			class:default-button-disabled={(step == 1 && resource_type == '') ||
-				(step == 2 && value == '') ||
-				(step == 3 && pathError != '')}
-			on:click={next}
-		>
-			{#if isGoogleSignin}
-				<img src="/google_signin.png" alt="Google sign-in" />
-			{:else if step == 1 && !manual}
-				Connect
-			{:else if step == 3}
-				Add resource
-			{:else}
-				Next
-			{/if}
-		</button>
 	</div>
 </Modal>
-
-<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/ArgInput.svelte

@@ -1,7 +1,7 @@
 <script>import { slide } from 'svelte/transition';
-import { faArrowRotateLeft, faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { setInputCat as computeInputCat } from '../utils';
-import { Button, Tooltip } from 'flowbite-svelte';
+import { Button } from './common';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import FieldHeader from './FieldHeader.svelte';
@@ -31,10 +31,10 @@ export let displayHeader = true;
 export let properties = undefined;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
-$: minHeight = `${1 + minRows * 1.2}em`;
 $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
 $: validateInput(pattern, value);
 let error = '';
+let el = undefined;
 export let editor = undefined;
 let rawValue = undefined;
 $: {
@@ -210,8 +210,11 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								{:else}
 									<input type="text" bind:value={v} />
 								{/if}
-								<button
-									class="default-button-secondary mx-6"
+								<Button
+									variant="border"
+									color="red"
+									size="sm"
+									btnClasses="mx-6"
 									on:click={() => {
 										value = value.filter((el) => el != v)
 										if (value.length == 0) {
@@ -219,13 +222,16 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 										}
 									}}
 								>
-									<Icon data={faMinus} class="mb-1" />
-								</button>
+									<Icon data={faMinus} />
+								</Button>
 							</div>
 						{/each}
 					</div>
-					<button
-						class="default-button-secondary mt-1"
+					<Button
+						variant="border"
+						color="blue"
+						size="sm"
+						btnClasses="mt-1"
 						on:click={() => {
 							if (value == undefined) {
 								value = []
@@ -235,7 +241,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					>
 						<Icon data={faPlus} class="mr-2" />
 						Add item
-					</button>
+					</Button>
 					<span class="ml-2">
 						{(value ?? []).length} item{(value ?? []).length > 1 ? 's' : ''}
 					</span>
@@ -252,9 +258,16 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					</div>
 				{:else}
 					<textarea
+						bind:this={el}
+						on:focus
 						{disabled}
-						style="min-height: {minHeight}; max-height: {maxHeight}"
-						on:input={async () => recomputeRowSize(rawValue ?? '')}
+						style="max-height: {maxHeight}"
+						on:input={(e) => {
+							if (el) {
+								el.style.height = '5px'
+								el.style.height = el.scrollHeight + 'px'
+							}
+						}}
 						class="col-span-10 {valid
 							? ''
 							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
@@ -300,17 +313,21 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				/>
 			{:else if inputCat == 'string'}
 				<textarea
+					bind:this={el}
 					on:focus={() => dispatch('focus')}
 					on:blur={() => dispatch('blur')}
 					{disabled}
-					style="height: {minHeight}; max-height: {maxHeight}"
+					style="height: 30px; max-height: {maxHeight}"
 					class="col-span-10 {valid
 						? ''
 						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 					placeholder={defaultValue ?? ''}
 					bind:value
 					on:input={async () => {
-						recomputeRowSize(value)
+						if (el) {
+							el.style.height = '30px'
+							el.style.height = el.scrollHeight + 'px'
+						}
 						dispatch('input', { rawValue: value, isRaw: false })
 					}}
 				/>

package/components/Button.svelte

@@ -1,16 +1,25 @@
 <script>import { faArchive, faEdit, faList, faPlay, faShare, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 export let category;
 export let disabled = false;
-const dispatch = createEventDispatcher();
+const colors = {
+    red: 'bg-transparent hover:bg-red-600 text-red-600 font-normal hover:text-white border-red-600 hover:border-transparent rounded',
+    blue: 'hover:bg-blue-500 hover:text-white'
+};
+const getCategoryClasses = () => {
+    if (category === 'delete' || category === 'archive')
+        return colors.red;
+    else if (category === 'edit' || category === 'list' || category === 'share')
+        return colors.blue;
+    return '';
+};
 </script>
 
 <button
-	class="{$$props.class} inline-flex items-center default-button py-0 px-1 {category} default-button-secondary"
-	on:click={() => {
-		dispatch('click')
-	}}
+	class="{$$props.class} inline-flex items-center bg-blue-500 hover:bg-blue-700 text-white 
+	font-bold py-1 px-2 border rounded border-blue-500 hover:border-blue-700 w-min min-w-max 
+	text-sm {getCategoryClasses()}"
+	on:click
 	{disabled}
 >
 	<div class="inline-flex items-center justify-center">
@@ -47,45 +56,3 @@ const dispatch = createEventDispatcher();
 		{/if}
 	</div>
 </button>
-
-<style>
-	.delete, 
-	.archive {
-    background-color: transparent
-}
-.delete:hover, 
-	.archive:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(224 36 36 / var(--tw-bg-opacity))
-}
-	.delete, 
-	.archive {
-    font-weight: 400;
-    --tw-text-opacity: 1;
-    color: rgb(224 36 36 / var(--tw-text-opacity))
-}
-	.delete:hover, 
-	.archive:hover {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity))
-}
-	.delete, 
-	.archive {
-    border-radius: 0.25rem;
-    --tw-border-opacity: 1;
-    border-color: rgb(224 36 36 / var(--tw-border-opacity))
-}
-	.delete:hover, 
-	.archive:hover {
-    border-color: transparent
-}
-
-	.edit:hover, 
-	.play:hover, 
-	.list:hover, 
-	.share:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(63 131 248 / var(--tw-bg-opacity));
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity))
-}</style>

package/components/Button.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
     };
     events: {
-        click: CustomEvent<any>;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/CronInput.svelte

@@ -32,7 +32,7 @@ async function handleScheduleInput(input) {
 }
 </script>
 
-<div class="text-purple-500 text-2xs grow">{cronError}</div>
+<div class="text-red-600 text-2xs grow">{cronError}</div>
 <div class="flex flex-row items-end max-w-5xl">
 	<label class="text-xs min-w-max mr-2 self-center" for="cron-schedule">CRON expression</label>
 	<input

package/components/DisplayResult.svelte

@@ -4,6 +4,7 @@ import TableCustom from './TableCustom.svelte';
 import { truncate } from '../utils';
 export let result;
 let resultKind = inferResultKind(result);
+let forceJson = false;
 function isRectangularArray(obj) {
     if (!Array.isArray(obj) || obj.length == 0) {
         return false;
@@ -40,6 +41,9 @@ function inferResultKind(result) {
             else if (keys.length == 1 && keys[0] == 'file') {
                 return 'file';
             }
+            else if (keys.length == 1 && keys[0] == 'error') {
+                return 'error';
+            }
         }
         catch (err) { }
     }
@@ -47,13 +51,17 @@ function inferResultKind(result) {
 }
 </script>
 
-<div>
+<div class="inline-highlight">
 	{#if result}
-		{#if typeof result == 'object' && Object.keys(result).length > 0}
-			<div>
-				The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
-			</div>{/if}{#if resultKind == 'table-col'}
-			<div class="grid grid-flow-col-dense border border-gray-200 rounded-md ">
+		{#if resultKind && resultKind != 'json'}
+			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
+				as JSON <input type="checkbox" bind:checked={forceJson} /></div
+			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
+				class="mb-2 text-gray-700"
+				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b></div
+			>{/if}{#if !forceJson && resultKind == 'table-col'}<div
+				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
+			>
 				{#each Object.keys(result) as col}
 					<div class="flex flex-col max-h-40 min-w-full overflow-auto">
 						<div
@@ -71,7 +79,7 @@ function inferResultKind(result) {
 					</div>
 				{/each}
 			</div>
-		{:else if resultKind == 'table-row'}<div
+		{:else if !forceJson && resultKind == 'table-row'}<div
 				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
 			>
 				<TableCustom>
@@ -86,37 +94,31 @@ function inferResultKind(result) {
 					</tbody>
 				</TableCustom>
 			</div>
-		{:else if resultKind == 'png'}
-			<div class="h-full">
-				Result is an image: <img
-					alt="png rendered"
-					class="w-auto h-full"
-					src="data:image/png;base64,{result.png}"
-				/>
+		{:else if !forceJson && resultKind == 'png'}
+			<div class="h-full"
+				><img alt="png rendered" class="w-auto h-full" src="data:image/png;base64,{result.png}" />
 			</div>
-		{:else if resultKind == 'jpeg'}
-			<div class="h-full">
-				Result is an image: <img
+		{:else if !forceJson && resultKind == 'jpeg'}
+			<div class="h-full"
+				><img
 					alt="jpeg rendered"
 					class="w-auto h-full"
 					src="data:image/jpeg;base64,{result.jpeg}"
 				/>
 			</div>
-		{:else if resultKind == 'gif'}
-			<div class="h-full">
-				Result is an image: <img
-					alt="gif rendered"
-					class="w-auto h-full"
-					src="data:image/gif;base64,{result.gif}"
-				/>
+		{:else if !forceJson && resultKind == 'gif'}
+			<div class="h-full"
+				><img alt="gif rendered" class="w-auto h-full" src="data:image/gif;base64,{result.gif}" />
 			</div>
-		{:else if resultKind == 'file'}
-			<div>
-				Result is a file: <a
-					download="windmill.file"
-					href="data:application/octet-stream;base64,{result.file}">Download</a
+		{:else if !forceJson && resultKind == 'file'}
+			<div
+				><a download="windmill.file" href="data:application/octet-stream;base64,{result.file}"
+					>Download</a
 				>
 			</div>
+		{:else if !forceJson && resultKind == 'error'}<div
+				><pre class="text-sm text-red-500">{result.error}</pre>
+			</div>
 		{:else}<Highlight
 				language={json}
 				code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}

package/components/Dropdown.svelte

@@ -2,6 +2,7 @@
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
+import { Button } from './common';
 let open = false;
 export let dropdownItems;
 export let name = undefined;
@@ -20,15 +21,16 @@ function handleClickOutsideMenu(event) {
 </script>
 
 <div
-	class="ml-3 {relative ? 'relative' : ''} {$$props.class}"
+	class="ml-2 {relative ? 'relative' : ''} {$$props.class}"
 	use:clickOutside
 	on:click_outside={handleClickOutsideMenu}
 >
-	<button
-		class="text-blue-500 text-right "
-		id="dropdown"
+	<Button
+		color="light"
+		size="xs"
 		aria-expanded="false"
 		aria-haspopup="true"
+		btnClasses="!text-blue-500 bg-transparent"
 		on:click={openMenu}
 	>
 		{#if !name}
@@ -36,7 +38,7 @@ function handleClickOutsideMenu(event) {
 		{:else}
 			{name}
 		{/if}
-	</button>
+	</Button>
 	<div
 		class="flex flex-col z-50 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none {open
 			? 'visible'
@@ -48,10 +50,10 @@ function handleClickOutsideMenu(event) {
 			{#each dropdownItems as item, i}
 				{#if item.action}
 					<button
-						on:click={() => {
+						on:click={(event) => {
 							if (!item.disabled) {
 								open = false
-								item.action && item.action()
+								item.action && item.action(event)
 								dispatch('click', { item: item?.eventName })
 							}
 						}}

package/components/Editor.svelte

@@ -22,6 +22,7 @@ import getMessageServiceOverride from 'vscode/service-override/messages';
 import { StandaloneServices } from 'vscode/services';
 import { DENO_INIT_CODE_CLEAR, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
 import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
+import { dirtyStore } from './common/confirmationModal/dirtyStore';
 try {
     StandaloneServices.initialize({
         ...getMessageServiceOverride(document.body)
@@ -312,18 +313,9 @@ async function loadMonaco() {
     const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
     model.updateOptions(updateOptions);
     editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout));
-    if (shouldBindKey) {
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
-            format();
-        });
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
-            if (cmdEnterAction) {
-                cmdEnterAction();
-            }
-        });
-    }
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
+        $dirtyStore = true;
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
             code = getCode();
@@ -332,6 +324,14 @@ async function loadMonaco() {
     });
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+            code = getCode();
+            shouldBindKey && format && format();
+        });
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+            code = getCode();
+            shouldBindKey && cmdEnterAction && cmdEnterAction();
+        });
         if (!websocketAlive.black &&
             !websocketAlive.deno &&
             !websocketAlive.pyright &&
@@ -375,10 +375,6 @@ onDestroy(() => {
 });
 </script>
 
-<!-- <button class="default-button px-6 max-h-8" type="button" on:click={format}>
-	Format (CtrlCmd + S)
-</button> -->
-
 <div bind:this={divEl} class={$$props.class} />
 
 <style>