windmill-components 1.35.43 → 1.36.1

package/components/icons/S3Icon.svelte

@@ -9,7 +9,7 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 50 50"
-	style=" fill:#000000;"
+	style="fill:currentcolor;"
 	><path
 		d="M 28 7.9453125 L 21 10.279297 L 21 18.279297 L 16 19.945312 L 10 17.945312 L 3 20.279297 L 3 29.720703 L 3.6835938 29.949219 L 9 31.720703 L 9 39.720703 L 9.6835938 39.949219 L 16 42.054688 L 23 39.720703 L 23 31.720703 L 29 29.720703 L 29 21.720703 L 34 20.054688 L 40 22.054688 L 47 19.720703 L 47 10.279297 L 40 7.9453125 L 34 9.9453125 L 28 7.9453125 z M 28 10.054688 L 32.335938 11.5 L 28 12.945312 L 23.664062 11.5 L 28 10.054688 z M 40 10.054688 L 44.335938 11.5 L 40 12.945312 L 35.664062 11.5 L 40 10.054688 z M 23 13.388672 L 27 14.720703 L 27 19.611328 L 23 18.279297 L 23 13.388672 z M 33 13.388672 L 33 18.279297 L 29 19.611328 L 29 14.720703 L 33 13.388672 z M 35 13.388672 L 39 14.720703 L 39 19.611328 L 35 18.279297 L 35 13.388672 z M 45 13.388672 L 45 18.279297 L 41 19.611328 L 41 14.720703 L 45 13.388672 z M 10 20.054688 L 14.335938 21.5 L 10 22.945312 L 5.6640625 21.5 L 10 20.054688 z M 22 20.054688 L 26.335938 21.5 L 22 22.945312 L 17.664062 21.5 L 22 20.054688 z M 5 23.388672 L 9 24.720703 L 9 29.611328 L 5 28.279297 L 5 23.388672 z M 15 23.388672 L 15 28.279297 L 11 29.611328 L 11 24.720703 L 15 23.388672 z M 17 23.388672 L 21 24.720703 L 21 29.611328 L 17 28.279297 L 17 23.388672 z M 27 23.388672 L 27 28.279297 L 23 29.611328 L 23 24.720703 L 27 23.388672 z M 16 30.054688 L 20.335938 31.5 L 16 32.945312 L 11.664062 31.5 L 16 30.054688 z M 11 33.388672 L 15 34.720703 L 15 39.611328 L 11 38.279297 L 11 33.388672 z M 21 33.388672 L 21 38.279297 L 17 39.611328 L 17 34.720703 L 21 33.388672 z"
 	/></svg

package/components/icons/Slack.svelte

@@ -9,7 +9,7 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 30 30"
-	style=" fill:#000000;"
+	style="fill:currentcolor;"
 >
 	<path
 		d="M 16.644531 2.0058594 C 16.365063 1.9841719 16.077422 2.0168281 15.794922 2.1113281 C 14.664922 2.4893281 14.053641 3.71375 14.431641 4.84375 L 15.324219 7.5117188 L 10.236328 9.2128906 L 9.3828125 6.6601562 C 9.0048125 5.5301563 7.7803906 4.9208281 6.6503906 5.2988281 C 5.5193906 5.6768281 4.9110625 6.8992969 5.2890625 8.0292969 L 6.1425781 10.582031 L 3.4746094 11.474609 C 2.3446094 11.852609 1.7333281 13.075078 2.1113281 14.205078 C 2.4893281 15.335078 3.71375 15.946359 4.84375 15.568359 L 7.5117188 14.675781 L 9.2128906 19.763672 L 6.6601562 20.617188 C 5.5301563 20.995187 4.9208281 22.219609 5.2988281 23.349609 C 5.6768281 24.480609 6.8992969 25.088938 8.0292969 24.710938 L 10.582031 23.857422 L 11.474609 26.525391 C 11.852609 27.655391 13.075078 28.266672 14.205078 27.888672 C 15.335078 27.510672 15.945359 26.28625 15.568359 25.15625 L 14.675781 22.488281 L 19.763672 20.785156 L 20.617188 23.339844 C 20.995187 24.469844 22.219609 25.079172 23.349609 24.701172 C 24.480609 24.323172 25.089891 23.100703 24.712891 21.970703 L 23.857422 19.416016 L 26.525391 18.523438 C 27.655391 18.145437 28.266672 16.922969 27.888672 15.792969 C 27.510672 14.662969 26.28625 14.053641 25.15625 14.431641 L 22.488281 15.324219 L 20.787109 10.236328 L 23.339844 9.3828125 C 24.469844 9.0048125 25.079172 7.7803906 24.701172 6.6503906 C 24.323172 5.5203906 23.100703 4.9110625 21.970703 5.2890625 L 19.417969 6.1425781 L 18.525391 3.4746094 C 18.241891 2.6271094 17.482937 2.0709219 16.644531 2.0058594 z M 16.693359 11.605469 L 18.394531 16.693359 L 13.306641 18.394531 L 11.605469 13.306641 L 16.693359 11.605469 z"

package/components/icons/TogglIcon.svelte

@@ -9,51 +9,13 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 60 60"
-	style=" fill:#000000;"
-	><linearGradient
-		id="2R_xNhRC2gDYhp_e6bogba"
-		x1="32"
-		x2="32"
-		y1="7"
-		y2="57"
-		gradientUnits="userSpaceOnUse"
-		><stop offset="0" stop-color="#000000" /><stop
-			offset="1"
-			stop-color="#000000"
-		/></linearGradient
-	><path
-		fill="url(#2R_xNhRC2gDYhp_e6bogba)"
+	style="fill:currentcolor;"
+>
+	<path
 		d="M32,9c12.682,0,23,10.318,23,23S44.682,55,32,55S9,44.682,9,32S19.318,9,32,9 M32,7	C18.193,7,7,18.193,7,32s11.193,25,25,25s25-11.193,25-25S45.807,7,32,7L32,7z"
-	/><linearGradient
-		id="2R_xNhRC2gDYhp_e6bogbb"
-		x1="32.001"
-		x2="32.001"
-		y1="16.294"
-		y2="45.473"
-		gradientUnits="userSpaceOnUse"
-		><stop offset="0" stop-color="#000000" /><stop
-			offset="1"
-			stop-color="#000000"
-		/></linearGradient
-	><rect
-		width="3.999"
-		height="17.995"
-		x="30.001"
-		y="16.005"
-		fill="url(#2R_xNhRC2gDYhp_e6bogbb)"
-	/><linearGradient
-		id="2R_xNhRC2gDYhp_e6bogbc"
-		x1="32.001"
-		x2="32.001"
-		y1="16.294"
-		y2="45.473"
-		gradientUnits="userSpaceOnUse"
-		><stop offset="0" stop-color="#000000" /><stop
-			offset="1"
-			stop-color="#000000"
-		/></linearGradient
-	><path
-		fill="url(#2R_xNhRC2gDYhp_e6bogbc)"
+	/>
+	<rect width="3.999" height="17.995" x="30.001" y="16.005" />
+	<path
 		d="M35.5,20.043v3.713c3.35,1.379,5.714,4.67,5.714,8.518c0,5.087-4.126,9.214-9.213,9.214	c-5.087,0-9.212-4.126-9.212-9.214c0-3.847,2.36-7.137,5.712-8.517v-3.714c-5.324,1.525-9.223,6.418-9.223,12.23	C19.277,39.3,24.976,45,32,45c7.026,0,12.724-5.7,12.724-12.725C44.724,26.461,40.822,21.567,35.5,20.043z"
-	/></svg
->
+	/>
+</svg>

package/components/jobs/JobDetail.svelte

@@ -93,7 +93,7 @@ export let job;
 			</div>
 		</div>
 		<div class="bg-white grid grid-cols-2 gap-x-2 col-span-2">
-			<div class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4">
+			<div class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden">
 				<div>
 					<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 						By {job.created_by}</span

package/components/propertyPicker/ObjectViewer.svelte

@@ -10,6 +10,7 @@ export let isLast = true;
 export let currentPath = '';
 export let pureViewer = false;
 export let collapsed = level == 3 || Array.isArray(json);
+export let rawKey = false;
 const collapsedSymbol = '...';
 let keys;
 let isArray;
@@ -26,23 +27,19 @@ function collapse() {
 }
 const dispatch = createEventDispatcher();
 function selectProp(key) {
-    dispatch('select', computeKey(key, isArray, currentPath));
+    dispatch('select', rawKey ? key : computeKey(key, isArray, currentPath));
 }
 </script>
 
 {#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 level != 0}
+			<span class="cursor-pointer hover:bg-gray-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">
+					<button on:click={() => selectProp(key)} class="key rounded px-1 hover:bg-blue-100">
 						{!isArray ? key : index}:
 					</button>
 
@@ -57,7 +54,7 @@ function selectProp(key) {
 						/>
 					{:else}
 						<button
-							class="val rounded px-1 hover:bg-sky-100 {getTypeAsString(json[key])}"
+							class="val rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
 							on:click={() => selectProp(key)}
 						>
 							{#if json[key] === NEVER_TESTED_THIS_FAR}
@@ -73,7 +70,7 @@ function selectProp(key) {
 			{/each}
 		</ul>
 	</span>
-	<span class="cursor-pointer hover:bg-slate-200" class:hidden={!collapsed} on:click={collapse}>
+	<span class="cursor-pointer hover:bg-gray-200" class:hidden={!collapsed} on:click={collapse}>
 		{openBracket}{collapsedSymbol}{closeBracket}
 	</span>
 	{#if !isLast && collapsed}
@@ -108,7 +105,7 @@ function selectProp(key) {
 }
 	.val.string {
 		--tw-text-opacity: 1;
-		color: rgb(101 163 13 / var(--tw-text-opacity));
+		color: rgb(5 122 85 / var(--tw-text-opacity));
 }
 	.val.number {
 		--tw-text-opacity: 1;
@@ -116,5 +113,5 @@ function selectProp(key) {
 }
 	.val.boolean {
 		--tw-text-opacity: 1;
-		color: rgb(8 145 178 / var(--tw-text-opacity));
+		color: rgb(28 100 242 / var(--tw-text-opacity));
 }</style>

package/components/propertyPicker/ObjectViewer.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         currentPath?: string | undefined;
         pureViewer?: boolean | undefined;
         collapsed?: boolean | undefined;
+        rawKey?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/components/propertyPicker/PropPicker.svelte

@@ -1,25 +1,50 @@
-<script>import { faClose } from '@fortawesome/free-solid-svg-icons';
+<script>import { ResourceService, VariableService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import Icon from 'svelte-awesome';
+import { Button } from '../common';
+import { createEventDispatcher } from 'svelte';
 import ObjectViewer from './ObjectViewer.svelte';
 import { keepByKey } from './utils';
 export let pickableProperties = {};
+let variables = {};
+let resources = {};
+let displayVariable = false;
+let displayResources = false;
+const dispatch = createEventDispatcher();
 const EMPTY_STRING = '';
 let search = '';
 const { propPickerConfig, clearFocus } = getContext('PropPickerWrapper');
 $: propsFiltered =
     search === EMPTY_STRING ? pickableProperties : keepByKey(pickableProperties, search);
+async function loadVariables() {
+    variables = Object.fromEntries((await VariableService.listVariable({
+        workspace: $workspaceStore ?? ''
+    })).map((variable) => [variable.path, variable.is_secret ? '***' : variable.value ?? '']));
+}
+async function loadResources() {
+    resources = Object.fromEntries((await ResourceService.listResource({
+        workspace: $workspaceStore ?? ''
+    })).map((resource) => [resource.path, resource.description ?? '']));
+}
 </script>
 
-<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="px-2 pt-2">
+	<input
+		type="text"
+		bind:value={search}
+		class="bg-gray-50 mt-1 border border-gray-300 text-gray-900 text-sm rounded-lg block px-2 mb-2 w-full"
+		placeholder="Search prop..."
+	/>
+	<div class="flex justify-between items-center space-x-1">
+		<span class="font-bold text-sm">Step 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}`}
+					{`Selected: ${$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"
@@ -36,13 +61,59 @@ $: propsFiltered =
 			{/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 class="overflow-y-auto mb-2">
+		<ObjectViewer json={propsFiltered} on:select />
+	</div>
+	<span class="font-bold text-sm">Variables </span>
+	<div class="overflow-y-auto mb-2">
+		{#if displayVariable}
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					displayVariable = false
+				}}>(-)</Button
+			>
+			<ObjectViewer
+				rawKey={true}
+				json={variables}
+				on:select={(e) => dispatch('select', `variable('${e.detail}')`)}
+			/>
+		{:else}
+			<Button
+				color="light"
+				size="xs"
+				on:click={async () => {
+					await loadVariables()
+					displayVariable = true
+				}}>{'{...}'}</Button
+			>
+		{/if}
+	</div>
+	<span class="font-bold text-sm">Resources</span>
+	<div class="overflow-y-auto mb-2">
+		{#if displayResources}
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					displayResources = false
+				}}>(-)</Button
+			>
+			<ObjectViewer
+				rawKey={true}
+				json={resources}
+				on:select={(e) => dispatch('select', `resource('${e.detail}')`)}
+			/>
+		{:else}
+			<Button
+				color="light"
+				size="xs"
+				on:click={async () => {
+					await loadResources()
+					displayResources = true
+				}}>{'{...}'}</Button
+			>
+		{/if}
+	</div>
 </div>

package/components/script_editor/LogPanel.svelte

@@ -68,7 +68,7 @@ function closeDrawer() {
 								result={previewJob.result}
 							/>
 						{:else if previewIsLoading}Waiting for Result...
-						{:else}Test to see result here
+						{:else}Test to see the result here
 						{/if}
         </pre>
 				</down>

package/components/scripts/CreateActions.svelte

@@ -0,0 +1,114 @@
+<script>import { goto } from '$app/navigation';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import Fuse from 'fuse.js';
+import { Script } from '../../gen';
+import { ScriptService } from '../../gen';
+import { workspaceStore, hubScripts } from '../../stores';
+import { sendUserToast } from '../../utils';
+import { Button, ButtonPopup, ButtonPopupItem } from '../common';
+import ItemPicker from '../ItemPicker.svelte';
+import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
+import { flowStore, initFlow } from '../flows/flowStore';
+const drawers = {
+    hub: undefined,
+    template: undefined,
+    json: undefined
+};
+let hubItems;
+let pendingJson;
+let templateScripts = [];
+let templateFilter = '';
+let filteredTemplates;
+const fuseOptions = {
+    includeScore: false,
+    keys: ['description', 'path', 'content', 'hash', 'summary']
+};
+const templateFuse = new Fuse(templateScripts, fuseOptions);
+$: hubItems = $hubScripts?.filter((x) => x.kind == Script.kind.SCRIPT) || [];
+$: filteredTemplates =
+    templateFilter.length > 0
+        ? templateFuse.search(templateFilter).map((value) => value.item)
+        : templateScripts;
+function importJson() {
+    Object.assign($flowStore, JSON.parse(pendingJson));
+    initFlow($flowStore);
+    sendUserToast('OpenFlow imported from JSON');
+    drawers.json?.toggleDrawer();
+}
+async function loadTemplateScripts() {
+    templateScripts = await ScriptService.listScripts({
+        workspace: $workspaceStore,
+        isTemplate: true
+    });
+    templateFuse.setCollection(templateScripts);
+}
+</script>
+
+<!-- Buttons -->
+<div class="flex flex-row gap-2">
+	<ButtonPopup size="sm" startIcon={{ icon: faPlus }} href="/scripts/add">
+		<svelte:fragment slot="main">New script</svelte:fragment>
+		<ButtonPopupItem on:click={() => drawers.hub?.openModal()}>
+			Import script from WindmillHub
+		</ButtonPopupItem>
+		<ButtonPopupItem on:click={() => drawers.template?.toggleDrawer()}>
+			Import script from template
+		</ButtonPopupItem>
+		<ButtonPopupItem on:click={() => drawers.json?.toggleDrawer()}>
+			Import script from raw JSON
+		</ButtonPopupItem>
+	</ButtonPopup>
+</div>
+
+<!-- Initially hidden elements in a drawer -->
+<!-- WindmillHub script list -->
+<ItemPicker
+	bind:this={drawers.hub}
+	pickCallback={(path) => {
+		console.log('pick', { path })
+		goto('/scripts/add?hub=' + path)
+	}}
+	itemName={'Script'}
+	extraField="summary"
+	loadItems={async () => {
+		return hubItems
+	}}
+/>
+<!-- Template script list -->
+<Drawer bind:this={drawers.template} size="800px" on:open={loadTemplateScripts}>
+	<DrawerContent title="Pick a template" on:close={() => drawers.template?.toggleDrawer()}>
+		<div class="pt-2 pb-4">
+			<input placeholder="Search templates" bind:value={templateFilter} class="search-bar" />
+		</div>
+		<div class="flex flex-col mb-2 md:mb-6">
+			{#if filteredTemplates && filteredTemplates.length > 0}
+				{#each filteredTemplates as { summary, path, hash }}
+					<a
+						class="p-1 flex flex-row items-baseline gap-2 selected text-gray-700"
+						href="/scripts/add?template={path}"
+					>
+						{#if summary}
+							<p class="text-sm font-semibold">{summary}</p>
+						{/if}
+
+						<p class="text-sm">{path}</p>
+						<p class="text-gray-400 text-xs text-right grow">
+							Last version: {hash}
+						</p>
+					</a>
+				{/each}
+			{:else}
+				<p class="text-sm text-gray-700">No templates</p>
+			{/if}
+		</div>
+	</DrawerContent>
+</Drawer>
+<!-- Raw JSON -->
+<Drawer bind:this={drawers.json} size="800px">
+	<DrawerContent title="Import JSON" on:close={() => drawers.json?.toggleDrawer()}>
+		<div class="p-2"><Button size="sm" on:click={importJson}>Import</Button></div>
+		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
+	</DrawerContent>
+</Drawer>

package/components/scripts/CreateActions.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CreateActionsProps = typeof __propDef.props;
+export declare type CreateActionsEvents = typeof __propDef.events;
+export declare type CreateActionsSlots = typeof __propDef.slots;
+export default class CreateActions extends SvelteComponentTyped<CreateActionsProps, CreateActionsEvents, CreateActionsSlots> {
+}
+export {};

package/editorUtils.d.ts

@@ -7,6 +7,9 @@ export declare function editorConfig(model: any, code: string, lang: string, aut
     fixedOverflowWidgets: boolean;
     autoDetectHighContrast: boolean;
     lineNumbersMinChars: number;
+    scrollbar: {
+        alwaysConsumeMouseWheel: boolean;
+    };
     lineNumbers: (ln: any) => string;
     folding: boolean;
     scrollBeyondLastLine: boolean;

package/editorUtils.js

@@ -10,6 +10,7 @@ export function editorConfig(model, code, lang, automaticLayout) {
         //lineNumbers: 'off',
         //lineDecorationsWidth: 0,
         lineNumbersMinChars: 4,
+        scrollbar: { alwaysConsumeMouseWheel: false },
         lineNumbers: (ln) => '<span class="pr-4 text-gray-400">' + ln + '</span>',
         folding: false,
         scrollBeyondLastLine: false,

package/gen/core/OpenAPI.js

@@ -1,6 +1,6 @@
 export const OpenAPI = {
     BASE: '/api',
-    VERSION: '1.35.0',
+    VERSION: '1.36.0',
     WITH_CREDENTIALS: false,
     CREDENTIALS: 'include',
     TOKEN: undefined,

package/gen/index.d.ts

@@ -42,6 +42,7 @@ export { QueuedJob } from './models/QueuedJob';
 export { RawScript } from './models/RawScript';
 export type { Resource } from './models/Resource';
 export type { ResourceType } from './models/ResourceType';
+export type { Retry } from './models/Retry';
 export type { Schedule } from './models/Schedule';
 export { Script } from './models/Script';
 export type { ScriptArgs } from './models/ScriptArgs';

package/gen/models/FlowModule.d.ts

@@ -1,5 +1,6 @@
 import type { FlowModuleValue } from './FlowModuleValue';
 import type { InputTransform } from './InputTransform';
+import type { Retry } from './Retry';
 export declare type FlowModule = {
     input_transforms: Record<string, InputTransform>;
     value: FlowModuleValue;
@@ -9,4 +10,5 @@ export declare type FlowModule = {
     };
     summary?: string;
     suspend?: number;
+    retry?: Retry;
 };

package/gen/models/FlowValue.d.ts

@@ -2,15 +2,5 @@ import type { FlowModule } from './FlowModule';
 export declare type FlowValue = {
     modules: Array<FlowModule>;
     failure_module?: FlowModule;
-    retry?: {
-        constant?: {
-            attempts?: number;
-            seconds?: number;
-        };
-        exponential?: {
-            attempts?: number;
-            multiplier?: number;
-            seconds?: number;
-        };
-    };
+    same_worker?: boolean;
 };

package/gen/models/Retry.d.ts

@@ -0,0 +1,11 @@
+export declare type Retry = {
+    constant?: {
+        attempts?: number;
+        seconds?: number;
+    };
+    exponential?: {
+        attempts?: number;
+        multiplier?: number;
+        seconds?: number;
+    };
+};

package/gen/models/Retry.js

@@ -0,0 +1,4 @@
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export {};