windmill-components 1.35.1 → 1.35.43

package/components/landing/FlowGettingStarted.svelte

@@ -1,25 +1,14 @@
 <script>
 	import { goto } from '$app/navigation'
+	import { faExternalLink, faFile, faPlus } from '@fortawesome/free-solid-svg-icons'
+	import Button from '../common/button/Button.svelte'
+	import HatIcon from '../icons/HatIcon.svelte'
 </script>
 
 <div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
 	<div class="flex items-center">
 		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
-			<svg
-				class="w-6 h-6 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
-					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
-				/>
-			</svg>
+			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>
 	</div>
@@ -29,67 +18,32 @@
 		the Hub!
 	</div>
 	<div class="inline-flex flex-wrap gap-y-2">
-		<button
-			type="button"
+		<Button
 			on:click={() => goto('flows/add')}
-			class="mr-2 inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="dark"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faPlus }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
 			Create flow
-		</button>
-		<button
+		</Button>
+		<Button
 			on:click={() => goto('https://docs.windmill.dev/docs/getting_started/flows')}
-			type="button"
-			class="mr-2 inline-flex items-center text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="blue"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faFile }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-				/>
-			</svg>
 			Flow documentation
-		</button>
-		<button
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center "
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
+		</Button>
+		<Button
 			on:click={() => goto('https://hub.windmill.dev/')}
+			color="light"
+			variant="border"
+			size="xs"
+			startIcon={{ icon: faExternalLink }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-				/>
-			</svg>
 			Explore community flows on WindmillHub
-		</button>
+		</Button>
 	</div>
 </div>

package/components/landing/FlowLandingBox.svelte

@@ -16,7 +16,7 @@ export let flow;
 		class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full bottom-4 right-4 flex-wrap"
 	>
 		<button
-			on:click|stopPropagation={() => goto(`/flows/edit/${flow.path}?step=2`)}
+			on:click|stopPropagation={() => goto(`/flows/edit/${flow.path}`)}
 			type="button"
 			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
 			data-dismiss-target="#alert-additional-content-5"

package/components/landing/RessourceGettingStarted.svelte

@@ -1,51 +1,21 @@
 <script>
 	import { goto } from '$app/navigation'
+	import { faLink } from '@fortawesome/free-solid-svg-icons'
+	import Button from '../common/button/Button.svelte'
+	import HatIcon from '../icons/HatIcon.svelte'
 </script>
 
 <div class="p-4 border border-gray-300 rounded-md bg-gray-50 dark:border-gray-600 dark:bg-gray-700">
 	<div class="flex items-center">
 		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
-			<svg
-				class="w-6 h-6 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
-					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
-				/>
-			</svg>
+			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>
 	</div>
 	<div class="mt-2 mb-4 text-sm text-gray-700 dark:text-gray-300">
 		Connect to apps like Slack, Google Drive or Airtable using OAuth.
 	</div>
-	<div class="flex">
-		<button
-			on:click={() => goto('resources')}
-			type="button"
-			class="inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center  dark:bg-gray-600 dark:hover:bg-gray-500 dark:focus:ring-gray-600"
-		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-				/>
-			</svg>
-			Connect an API
-		</button>
-	</div>
+	<Button on:click={() => goto('resources')} color="dark" startIcon={{ icon: faLink }} size="xs">
+		Connect an API
+	</Button>
 </div>

package/components/landing/ScriptBox.svelte

@@ -1,5 +1,7 @@
 <script>import { goto } from '$app/navigation';
 import { truncateHash } from '../../utils';
+import { faPencil, faPlay } from '@fortawesome/free-solid-svg-icons';
+import { Button, Badge, ActionRow } from '../common';
 export let script;
 </script>
 
@@ -12,70 +14,41 @@ export let script;
 	<div class="inline-flex justify-between w-full">
 		<div class="text-xs">{script.path}</div>
 
-		<span class="bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ">
+		<Badge color="gray">
 			{truncateHash(script.hash)}
-		</span>
+		</Badge>
 	</div>
 	<div class="inline-flex space-x-1 w-full">
-		<span class="bg-blue-100 text-blue-800 text-xs font-semibold  px-2.5 py-0.5 rounded ">
-			{String(script.language).toUpperCase()}
-		</span>
-		{#if script.is_trigger}
-			<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">
-				TRIGGER
-			</span>
+		<Badge color="blue" capitalize>
+			{script.language}
+		</Badge>
+		{#if script.kind !== 'script'}
+			<Badge color="green" capitalize>
+				{script.kind}
+			</Badge>
 		{/if}
 	</div>
-	<div class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full">
-		<button
-			on:click|stopPropagation={() => goto(`/scripts/edit/${script.hash}?step=2`)}
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
-		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-				/>
-			</svg>
-			Edit
-		</button>
+	<ActionRow>
+		<svelte:fragment slot="right">
+			<Button
+				on:click={() => goto(`/scripts/edit/${script.hash}?step=2`)}
+				color="dark"
+				size="xs"
+				variant="border"
+				startIcon={{ icon: faPencil }}
+			>
+				Edit
+			</Button>
 
-		<button
-			on:click|stopPropagation={() => goto(`/scripts/run/${script.hash}`)}
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
-		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
-			Run
-		</button>
-	</div>
+			<Button
+				on:click={() => goto(`/scripts/run/${script.hash}`)}
+				color="dark"
+				size="xs"
+				variant="border"
+				startIcon={{ icon: faPlay }}
+			>
+				Run
+			</Button>
+		</svelte:fragment>
+	</ActionRow>
 </div>

package/components/landing/ScriptGettingStarted.svelte

@@ -1,93 +1,47 @@
 <script>
 	import { goto } from '$app/navigation'
+	import { faExternalLink, faFile, faPlus } from '@fortawesome/free-solid-svg-icons'
+	import Button from '../common/button/Button.svelte'
+	import HatIcon from '../icons/HatIcon.svelte'
 </script>
 
 <div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
 	<div class="flex items-center">
 		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
-			<svg
-				class="w-6 h-6 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
-					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
-				/>
-			</svg>
+			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>
 	</div>
 	<div class="mt-2 mb-4 text-sm text-gray-700 ">
 		Create a new script or find inspiration on the Hub!
 	</div>
-	<div class="inline-flex flex-wrap gap-y-2">
-		<button
+	<div class="inline-flex flex-wrap gap-y-2 ">
+		<Button
 			on:click={() => goto('scripts/add')}
-			type="button"
-			class="mr-2 inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="dark"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faPlus }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
 			Create script
-		</button>
-		<button
+		</Button>
+		<Button
 			on:click={() => goto('https://docs.windmill.dev/docs/getting_started/scripts')}
-			type="button"
-			class="mr-2 inline-flex items-center text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="blue"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faFile }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-				/>
-			</svg>
 			Script documentation
-		</button>
-		<button
+		</Button>
+		<Button
 			on:click={() => goto('https://hub.windmill.dev/')}
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
+			color="light"
+			variant="border"
+			size="xs"
+			startIcon={{ icon: faExternalLink }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-				/>
-			</svg>
 			Explore community scripts on WindmillHub
-		</button>
+		</Button>
 	</div>
 </div>

package/components/propertyPicker/ObjectViewer.svelte

@@ -1,5 +1,6 @@
 <script>import { truncate } from '../../utils';
 import { createEventDispatcher } from 'svelte';
+import { NEVER_TESTED_THIS_FAR } from '../flows/flowStateUtils';
 import { getTypeAsString } from '../flows/utils';
 import { computeKey } from './utils';
 import WarningMessage from './WarningMessage.svelte';
@@ -31,15 +32,19 @@ function selectProp(key) {
 
 {#if keys.length > 0}
 	<span class:hidden={collapsed}>
-		{#if level != 0}<span class="cursor-pointer hover:bg-slate-200 px-1 rounded" on:click={collapse}
-				>(-)</span
-			>{/if}
+		{#if level != 0}<span
+				class="cursor-pointer hover:bg-slate-200 px-1 rounded"
+				on:click={collapse}
+			>
+				(-)
+			</span>
+		{/if}
 		<ul class="w-full">
 			{#each keys as key, index}
 				<li class="pt-1">
-					<button on:click={() => selectProp(key)} class="key rounded px-1 hover:bg-sky-100"
-						>{!isArray ? key : index}:</button
-					>
+					<button on:click={() => selectProp(key)} class="key rounded px-1 hover:bg-sky-100">
+						{!isArray ? key : index}:
+					</button>
 
 					{#if getTypeAsString(json[key]) === 'object'}
 						<svelte:self
@@ -55,8 +60,10 @@ function selectProp(key) {
 							class="val rounded px-1 hover:bg-sky-100 {getTypeAsString(json[key])}"
 							on:click={() => selectProp(key)}
 						>
-							{#if json[key] === undefined}
+							{#if json[key] === NEVER_TESTED_THIS_FAR}
 								<WarningMessage />
+							{:else if json[key] == undefined}
+								<span>undefined</span>
 							{:else}
 								<span>{truncate(JSON.stringify(json[key]), 40)}</span>
 							{/if}
@@ -83,6 +90,8 @@ function selectProp(key) {
 		border-left: 1px dotted lightgray;
 		--tw-text-opacity: 1;
 		color: rgb(0 0 0 / var(--tw-text-opacity));
+		font-size: 0.875rem;
+		line-height: 1.25rem;
 	}
 
 	.val {

package/components/propertyPicker/PropPicker.svelte

@@ -1,22 +1,48 @@
-<script>import ObjectViewer from './ObjectViewer.svelte';
+<script>import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import ObjectViewer from './ObjectViewer.svelte';
 import { keepByKey } from './utils';
 export let pickableProperties = {};
 const EMPTY_STRING = '';
 let search = '';
+const { propPickerConfig, clearFocus } = getContext('PropPickerWrapper');
 $: propsFiltered =
     search === EMPTY_STRING ? pickableProperties : keepByKey(pickableProperties, search);
 </script>
 
-<div
-	class="relative p-3  bg-white rounded-lg border border-gray-200 shadow-md max-h-max overflow-y-scroll"
->
-	<div class="overflow-y-auto max-h-96">
-		<input
-			type="text"
-			bind:value={search}
-			class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block p-2 mb-2"
-			placeholder="Search prop..."
-		/>
-		<ObjectViewer json={propsFiltered} on:select />
+<div class="px-4 pt-4">
+	<div class="flex justify-between items-center h-8">
+		<span class="font-bold text-sm">Context</span>
+		<div class="flex space-x-2 items-center">
+			{#if $propPickerConfig}
+				<span
+					class="flex items-center bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded dark:bg-green-200 dark:text-green-900"
+				>
+					{`Selected input: ${$propPickerConfig?.propName}`}
+				</span>
+				<span
+					class="flex items-center bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded dark:bg-green-200 dark:text-green-900"
+				>
+					{`Mode: ${$propPickerConfig?.insertionMode}`}
+				</span>
+				<button
+					class="border px-2 py-1 text-xs rounded-md flex items-center hover:bg-gray-50 hover:text-gray-900"
+					on:click={() => clearFocus()}
+				>
+					<Icon data={faClose} class="mr-2" scale={0.8} />
+					Deselect
+				</button>
+			{/if}
+		</div>
 	</div>
+	<input
+		type="text"
+		bind:value={search}
+		class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block p-2 mb-2"
+		placeholder="Search prop..."
+	/>
+</div>
+<div class="overflow-y-auto mb-8">
+	<ObjectViewer json={propsFiltered} on:select />
 </div>

package/components/propertyPicker/WarningMessage.svelte

@@ -1,16 +1,3 @@
-<div class="flex px-4 pt-1 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
-	<svg
-		class="flex-shrink-0 w-5 h-5 text-yellow-700 dark:text-yellow-800"
-		fill="currentColor"
-		viewBox="0 0 20 20"
-		xmlns="http://www.w3.org/2000/svg"
-		><path
-			fill-rule="evenodd"
-			d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-			clip-rule="evenodd"
-		/></svg
-	>
-	<div class="ml-3 text-sm font-medium text-yellow-700 dark:text-yellow-800">
-		Previous results are not available unless a preview is run on the previous step.
-	</div>
+<div class="flex px-2 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
+	<div class="text-sm font-medium text-yellow-700 dark:text-yellow-800">Require testing flow</div>
 </div>