windmill-components 1.75.0 → 1.77.0

package/components/DisplayResult.svelte

@@ -231,6 +231,6 @@ let jsonViewer;
 			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
 		{/if}
 	{:else}
-		<div class="text-gray-500 text-sm">No result</div>
+		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>
 	{/if}
 </div>

package/components/Dropdown.svelte

@@ -1,19 +1,29 @@
 <script>import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import { MoreHorizontal } from 'lucide-svelte';
+import { MoreVertical } from 'lucide-svelte';
 import { Button, Menu } from './common';
 import { goto } from '$app/navigation';
+import { twMerge } from 'tailwind-merge';
 export let dropdownItems;
 export let name = undefined;
 export let placement = 'bottom-start';
-export let btnClasses = '!text-blue-500 bg-transparent';
+export let btnClasses = '';
+$: buttonClass = twMerge('!border-0 bg-transparent !p-[6px]', btnClasses);
 const dispatch = createEventDispatcher();
 </script>
 
 <Menu {placement} let:close>
-	<Button nonCaptureEvent color="light" size="xs" {btnClasses} {...$$restProps} slot="trigger">
+	<Button
+		nonCaptureEvent
+		color="dark"
+		variant="border"
+		size="xs"
+		btnClasses={buttonClass}
+		{...$$restProps}
+		slot="trigger"
+	>
 		{#if !$$slots.default}
-			<MoreHorizontal size={20} />
+			<MoreVertical size={20} />
 		{:else}
 			<slot />
 		{/if}

package/components/FlowGraphViewer.svelte

@@ -80,7 +80,7 @@ let topHeight = 0;
 			minHeight={400}
 			modules={flow?.value?.modules}
 			failureModule={flow?.value?.failure_module}
-			on:click={(e) => (stepDetail = e.detail)}
+			on:select={(e) => (stepDetail = e.detail)}
 		/>
 	</div>
 	{#if !noSide}

package/components/FolderUsageInfo.svelte

@@ -1,6 +1,8 @@
 <script>import { FolderService, GroupService } from '../gen';
 import { workspaceStore } from '../stores';
 export let name;
+export let tabular = false;
+export let order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources'];
 $: $workspaceStore && loadUsage();
 let usage = {};
 async function loadUsage() {
@@ -8,10 +10,18 @@ async function loadUsage() {
 }
 </script>
 
-<div class="flex flex-col text-xs text-gray-600">
-	{#each Object.entries(usage) as [k, v]}
-		<div>
-			{k}: {v}
-		</div>
+{#if tabular}
+	{#each order as key}
+		<td class="text-center">
+			{usage[key] ?? ''}
+		</td>
 	{/each}
-</div>
+{:else}
+	<div class="flex flex-col text-xs text-gray-600">
+		{#each Object.entries(usage) as [k, v]}
+			<div>
+				{k}: {v}
+			</div>
+		{/each}
+	</div>
+{/if}

package/components/FolderUsageInfo.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         name: string;
+        tabular?: boolean | undefined;
+        order?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/PageHeader.svelte

@@ -9,7 +9,7 @@ export let primary = true;
 		<span class="flex items-center space-x-2 mb-2">
 			<h1>{title}</h1>
 			{#if tooltip}
-				<Tooltip>{tooltip}</Tooltip>
+				<Tooltip scale={0.9}>{tooltip}</Tooltip>
 			{/if}
 		</span>
 	{:else}

package/components/Path.svelte

@@ -12,6 +12,7 @@ import Tooltip from './Tooltip.svelte';
 import FolderEditor from './FolderEditor.svelte';
 import GroupEditor from './GroupEditor.svelte';
 import { random_adj } from './random_positive_adjetive';
+import Badge from './common/badge/Badge.svelte';
 let meta = undefined;
 export let namePlaceholder = '';
 export let initialPath;
@@ -272,7 +273,7 @@ async function addGroup() {
 		{#if meta != undefined}
 			<div class="flex gap-4 shrink">
 				<label class="block">
-					<span class="text-gray-700 text-sm whitespace-nowrap">&nbsp;</span>
+					<span class="text-gray-700 text-sm whitespace-nowrap">Owner</span>
 
 					<ToggleButtonGroup
 						class="mt-0.5"
@@ -375,8 +376,26 @@ async function addGroup() {
 		{/if}
 	</div>
 
-	<div class="flex-row flex justify-between w-full">
-		<div><span class="font-mono text-sm break-all">{path}</span></div>
+	<div class="flex flex-col w-full mt-4">
+		<div class="flex justify-start w-full">
+			<Badge
+				color="gray"
+				class="center-center !bg-gray-300 !text-gray-600 !w-[70px] !h-[24px] rounded-r-none"
+			>
+				Full path
+			</Badge>
+			<input
+				type="text"
+				readonly
+				value={path}
+				size={path?.length || 50}
+				class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+				on:focus={({ currentTarget }) => {
+					currentTarget.select()
+				}}
+			/>
+			<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+		</div>
 		<div class="text-red-600 text-2xs">{error}</div>
 	</div>
 </div>

package/components/ScriptBuilder.svelte

@@ -2,19 +2,20 @@
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { inferArgs } from '../infer';
-import { initialCode, isInitialCode } from '../script_helpers';
+import { initialCode } from '../script_helpers';
 import { userStore, workspaceStore } from '../stores';
 import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
 import Path from './Path.svelte';
-import RadioButton from './RadioButton.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
 import ScriptSchema from './ScriptSchema.svelte';
 import CenteredPage from './CenteredPage.svelte';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 import { Button, ButtonPopup, ButtonPopupItem, Kbd } from './common';
-import { faChevronDown, faChevronUp, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
+import { faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte';
 import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
+import Tooltip from './Tooltip.svelte';
+import SettingSection from './SettingSection.svelte';
 export let script;
 export let initialPath = '';
 export let template = 'script';
@@ -26,10 +27,31 @@ const langs = [
     ['Go', Script.language.GO],
     ['Bash', Script.language.BASH]
 ];
-let viewScriptKind = script.kind !== Script.kind.SCRIPT;
+const scriptKindOptions = [
+    {
+        value: Script.kind.SCRIPT,
+        title: 'Action'
+    },
+    {
+        value: Script.kind.TRIGGER,
+        title: 'Trigger',
+        desc: 'First module of flows to trigger them based on external changes. These kind of scripts are usually running on a schedule to periodically look for changes.'
+    },
+    {
+        value: Script.kind.APPROVAL,
+        title: 'Approval',
+        desc: 'Send notifications externally to ask for approval to continue a flow.'
+    },
+    {
+        value: Script.kind.FAILURE,
+        title: 'Error Handler',
+        desc: 'Handle errors in flows after all retry attempts have been exhausted.'
+    }
+];
 let pathError = '';
 let summaryC = undefined;
 let pathC = undefined;
+let loadingSave = false;
 $: setQueryWithoutLoad($page.url, [{ key: 'state', value: encodeState(script) }]);
 $: step = Number($page.url.searchParams.get('step')) || 1;
 if (script.content == '') {
@@ -38,7 +60,6 @@ if (script.content == '') {
 function initContent(language, kind, template) {
     script.content = initialCode(language, kind, template);
 }
-let loadingSave = false;
 async function editScript(leave) {
     loadingSave = true;
     try {
@@ -190,132 +211,111 @@ function onKeyDown(event) {
 		<!-- metadata -->
 		{#if step === 1}
 			<CenteredPage>
-				<h2 class="border-b pb-1 mt-8 mb-2">Path</h2>
-				<Path
-					bind:this={pathC}
-					bind:error={pathError}
-					bind:path={script.path}
-					{initialPath}
-					on:enter={() => changeStep(2)}
-					namePlaceholder="script"
-					kind="script"
-				/>
-				<h2 class="border-b pb-1 mt-12 mb-4">Summary</h2>
-				<input
-					type="text"
-					bind:this={summaryC}
-					bind:value={script.summary}
-					placeholder="Short summary to be displayed when listed"
-				/>
-
-				<h2 class="border-b pb-1 mt-12 mb-6">Language</h2>
-				{#if lockedLanguage}
-					<div class="text-sm text-gray-600 italic mb-2">
-						As a forked script, the language '{script.language}' cannot be modified.
-					</div>
-				{/if}
-				<div class="flex flex-row gap-2 flex-wrap">
-					{#each langs as [label, lang]}
-						{@const isPicked = script.language == lang && template == 'script'}
+				<SettingSection title="Path" element="h2">
+					<Path
+						bind:this={pathC}
+						bind:error={pathError}
+						bind:path={script.path}
+						{initialPath}
+						on:enter={() => changeStep(2)}
+						namePlaceholder="script"
+						kind="script"
+					/>
+				</SettingSection>
+				<SettingSection title="Summary" element="h2">
+					<input
+						type="text"
+						bind:this={summaryC}
+						bind:value={script.summary}
+						placeholder="Short summary to be displayed when listed"
+					/>
+				</SettingSection>
+				<SettingSection title="Language" element="h2">
+					{#if lockedLanguage}
+						<div class="text-sm text-gray-600 italic mb-2">
+							As a forked script, the language '{script.language}' cannot be modified.
+						</div>
+					{/if}
+					<div class="flex flex-row gap-2 flex-wrap">
+						{#each langs as [label, lang]}
+							{@const isPicked = script.language == lang && template == 'script'}
+							<Button
+								size="sm"
+								variant="border"
+								color={isPicked ? 'blue' : 'dark'}
+								btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+								on:click={() => {
+									script.language = lang
+									template = 'script'
+									initContent(lang, script.kind, template)
+								}}
+								disabled={lockedLanguage}
+							>
+								<LanguageIcon {lang} />
+								<span class="ml-2 py-2">{label}</span>
+							</Button>
+						{/each}
 						<Button
 							size="sm"
 							variant="border"
-							color={isPicked ? 'blue' : 'dark'}
-							btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							color={template == 'pgsql' ? 'blue' : 'dark'}
+							btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							disabled={lockedLanguage}
 							on:click={() => {
-								script.language = lang
-								template = 'script'
-								initContent(lang, script.kind, template)
+								script.language = Script.language.DENO
+								template = 'pgsql'
+								initContent(script.language, script.kind, template)
 							}}
-							disabled={lockedLanguage}
 						>
-							<LanguageIcon {lang} /><span class="ml-2 py-4">{label}</span>
+							<LanguageIcon lang="pgsql" /><span class="ml-2 py-2">PostgreSQL</span>
 						</Button>
-					{/each}
-					<Button
-						size="sm"
-						variant="border"
-						color={template == 'pgsql' ? 'blue' : 'dark'}
-						btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-						disabled={lockedLanguage}
-						on:click={() => {
-							script.language = Script.language.DENO
-							template = 'pgsql'
-							initContent(script.language, script.kind, template)
-						}}
-					>
-						<LanguageIcon lang="pgsql" /><span class="ml-2 py-4">PostgreSQL</span>
-					</Button>
-					<!-- <Button
-						size="sm"
-						variant="border"
-						color={template == 'mysql' ? 'blue' : 'dark'}
-						btnClasses={template == 'mysql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-						on:click={() => {
-							script.language = Script.language.DENO
-							template = 'mysql'
-							initContent(script.language, script.kind, template)
-						}}
-					>
-						<LanguageIcon lang="mysql" /><span class="ml-2 py-4">MySQL</span>
-					</Button> -->
-				</div>
-				<div class="mt-16 mb-4">
-					<Button
-						color="light"
-						size="sm"
-						endIcon={{ icon: viewScriptKind ? faChevronUp : faChevronDown }}
-						on:click={() => (viewScriptKind = !viewScriptKind)}
-					>
-						Tag this script as having a specific purpose inside flows
-					</Button>
-				</div>
-				{#if viewScriptKind}
-					<div class="max-w-lg">
-						<RadioButton
-							label="Script Type"
-							options={[
-								['Action', Script.kind.SCRIPT],
-								[
-									{
-										title: 'Trigger',
-										desc: `First module of flows to trigger them based on watching changes external periodically using an internal state`
-									},
-									Script.kind.TRIGGER
-								],
-								[
-									{
-										title: 'Approval',
-										desc: `Send notification externally to ask for approval to continue a flow`
-									},
-									Script.kind.APPROVAL
-								],
-								[
-									{
-										title: 'Error Handler',
-										desc: `Handle errors for flows after all retries attempts have been exhausted`
-									},
-									Script.kind.FAILURE
-								]
-
-								// ['Command Handler', Script.kind.COMMAND]
-							]}
-							on:change={(e) => {
-								if (isInitialCode(script.content)) {
-									template = 'script'
-									initContent(script.language, e.detail, template)
-								}
+						<!-- <Button
+							size="sm"
+							variant="border"
+							color={template == 'mysql' ? 'blue' : 'dark'}
+							btnClasses={template == 'mysql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							on:click={() => {
+								script.language = Script.language.DENO
+								template = 'mysql'
+								initContent(script.language, script.kind, template)
 							}}
-							bind:value={script.kind}
-						/>
+						>
+							<LanguageIcon lang="mysql" /><span class="ml-2 py-2">MySQL</span>
+						</Button> -->
 					</div>
-				{/if}
-				<!-- <div class="ml-3">
-					<Toggle
-						bind:checked={script.is_template}
-						options={{ right: 'Save as a workspace template' }}
-					/>
-				</div> -->
+				</SettingSection>
+				<SettingSection
+					title="Script kind"
+					element="h3"
+					tooltip="Tag this script as having a specific purpose inside flows. If it won't be used in flows,
+				you don't have to worry about this."
+					accordion
+				>
+					<div class="flex flex-wrap gap-2">
+						{#each scriptKindOptions as { value, title, desc }}
+							{@const isPicked = script.kind === value}
+							<Button
+								size="sm"
+								variant="border"
+								color={isPicked ? 'blue' : 'dark'}
+								btnClasses="font-medium {isPicked ? '!bg-blue-50/75' : ''}"
+								on:click={() => {
+									template = 'script'
+									script.kind = value
+									initContent(script.language, value, template)
+								}}
+								disabled={lockedLanguage}
+							>
+								{title}
+								{#if desc}
+									<Tooltip class="mb-0.5 ml-1">
+										{desc}
+									</Tooltip>
+								{/if}
+							</Button>
+						{/each}
+					</div>
+				</SettingSection>
 			</CenteredPage>
 		{:else if step === 2}
 			<ScriptEditor

package/components/SettingSection.svelte

@@ -0,0 +1,44 @@
+<script>import { ChevronDown } from 'lucide-svelte';
+import { slide } from 'svelte/transition';
+import Tooltip from './Tooltip.svelte';
+export let title;
+export let tooltip = '';
+export let element = 'h2';
+export let accordion = false;
+let showContent = !accordion;
+</script>
+
+<div class="border-b [&:has(button:hover)]:border-gray-400 duration-200 pb-1 mt-8 mb-2">
+	{#if accordion}
+		<button
+			class="flex w-full justify-start items-center"
+			on:click={() => (showContent = !showContent)}
+		>
+			<span class="rounded-full hover:bg-gray-100 focus:bg-gray-100 p-1 mr-1">
+				<ChevronDown size={22} class="rotate-0 duration-300 {showContent ? '!-rotate-180' : ''}" />
+			</span>
+			<svelte:element this={element}>
+				{title}
+				{#if tooltip}
+					<Tooltip scale={0.9} class="mb-0.5">
+						{tooltip}
+					</Tooltip>
+				{/if}
+			</svelte:element>
+		</button>
+	{:else}
+		<svelte:element this={element}>
+			{title}
+			{#if tooltip}
+				<Tooltip scale={0.9} class="mb-0.5">
+					{tooltip}
+				</Tooltip>
+			{/if}
+		</svelte:element>
+	{/if}
+</div>
+{#if showContent}
+	<div transition:slide={{ duration: 300 }}>
+		<slot />
+	</div>
+{/if}

package/components/SettingSection.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        tooltip?: string | undefined;
+        element?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        accordion?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SettingSectionProps = typeof __propDef.props;
+export type SettingSectionEvents = typeof __propDef.events;
+export type SettingSectionSlots = typeof __propDef.slots;
+export default class SettingSection extends SvelteComponentTyped<SettingSectionProps, SettingSectionEvents, SettingSectionSlots> {
+}
+export {};

package/components/Tooltip.svelte

@@ -15,5 +15,7 @@ export let placement = undefined;
 		data={faInfoCircle}
 		{scale}
 	/>
-	<span slot="text"> <slot /> </span>
+	<svelte:fragment slot="text">
+		<slot />
+	</svelte:fragment>
 </Popover>

package/components/WhitelistIp.svelte

@@ -5,9 +5,7 @@ WorkerService.listWorkers({}).then((workers) => {
     ips = [
         ...new Set(workers
             .filter((worker) => {
-            const date = new Date().getTime() - 300 * 60;
-            const ping_at = new Date(worker.ping_at).getTime();
-            return worker.ip != 'unretrievable IP' && ping_at > date;
+            return worker.ip != 'unretrievable IP' && worker.last_ping && worker.last_ping < 300;
         })
             .map((worker) => worker.ip))
     ];

package/components/apps/components/buttons/AppButton.svelte

@@ -17,8 +17,9 @@ export let noWFull = false;
 export let preclickAction = undefined;
 export let customCss = undefined;
 export let render;
+export let initializing = true;
 export const staticOutputs = ['loading', 'result'];
-const { runnableComponents, worldStore, app } = getContext('AppViewerContext');
+const { worldStore, app } = getContext('AppViewerContext');
 let labelValue;
 let color;
 let size;
@@ -52,6 +53,7 @@ $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 $: outputs?.loading.subscribe({
+    id: 'loading-' + id,
     next: (value) => {
         isLoading = value;
         if (ownClick && !value) {
@@ -84,13 +86,15 @@ async function handleClick(event) {
     else {
         await runnableComponent?.runComponent();
     }
-    if (recomputeIds) {
-        await Promise.all(recomputeIds.map((id) => $runnableComponents?.[id]?.()));
-    }
 }
 </script>
 
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue
+	on:done={() => initializing && (initializing = false)}
+	{id}
+	input={configuration.label}
+	bind:value={labelValue}
+/>
 <InputValue {id} input={configuration.goto} bind:value={gotoUrl} />
 <InputValue {id} input={configuration.color} bind:value={color} />
 <InputValue {id} input={configuration.size} bind:value={size} />
@@ -101,6 +105,7 @@ async function handleClick(event) {
 <InputValue
 	{id}
 	input={configuration.disabled}
+	extraContext={extraQueryParams}
 	bind:value={disabled}
 	bind:error={errors.disabled}
 />
@@ -109,6 +114,7 @@ async function handleClick(event) {
 
 <RunnableWrapper
 	flexWrap
+	{recomputeIds}
 	bind:runnableComponent
 	{componentInput}
 	{id}

package/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         preclickAction?: (() => Promise<void>) | undefined;
         customCss?: ComponentCustomCSS<'button'> | undefined;
         render: boolean;
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/buttons/AppForm.svelte

@@ -15,7 +15,7 @@ export let horizontalAlignment = undefined;
 export let customCss = undefined;
 export let render;
 export const staticOutputs = ['loading', 'result'];
-const { app, runnableComponents, worldStore, stateId } = getContext('AppViewerContext');
+const { app, worldStore, stateId } = getContext('AppViewerContext');
 let labelValue = 'Default label';
 let color;
 let size;
@@ -30,6 +30,7 @@ $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 $: outputs?.loading.subscribe({
+    id: 'loading-' + id,
     next: (value) => {
         isLoading = value;
     }
@@ -43,6 +44,7 @@ $: css = concatCustomCss($app.css?.formcomponent, customCss);
 <InputValue {id} input={configuration.size} bind:value={size} />
 
 <RunnableWrapper
+	{recomputeIds}
 	{render}
 	bind:runnableComponent
 	{componentInput}
@@ -84,12 +86,6 @@ $: css = concatCustomCss($app.css?.formcomponent, customCss);
 						}}
 						on:click={() => {
 							runnableComponent?.runComponent()
-
-							if (recomputeIds) {
-								recomputeIds.forEach((id) => {
-									$runnableComponents[id]?.()
-								})
-							}
 						}}
 						{size}
 						{color}

package/components/apps/components/buttons/AppFormButton.svelte

@@ -38,6 +38,7 @@ $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 $: outputs?.loading.subscribe({
+    id: 'loading-' + id,
     next: (value) => {
         isLoading = value;
         if (ownClick && !value) {
@@ -73,6 +74,7 @@ $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 		}}
 	>
 		<RunnableWrapper
+			{recomputeIds}
 			{render}
 			bind:runnableComponent
 			{componentInput}
@@ -107,12 +109,6 @@ $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 						on:click={async () => {
 							await runnableComponent?.runComponent()
 
-							if (recomputeIds) {
-								recomputeIds.forEach((id) => {
-									$runnableComponents[id]?.()
-								})
-							}
-
 							open = false
 						}}
 						size="xs"