windmill-components 1.434.1 → 1.444.0

package/package/components/meltComponents/Popover.svelte

@@ -0,0 +1,82 @@
+<script>import { createPopover, createSync, melt } from '@melt-ui/svelte';
+import { fade } from 'svelte/transition';
+import { X } from 'lucide-svelte';
+export let open = false;
+export let closeButton = true;
+export let displayArrow = false;
+const { elements: { trigger, content, arrow, close }, states } = createPopover({
+    forceVisible: true
+});
+const sync = createSync(states);
+$: sync.open(open, (v) => (open = v));
+</script>
+
+<button type="button" {...$trigger} use:$trigger.action aria-label="Popup button">
+	<slot name="trigger" />
+</button>
+
+{#if open}
+	<div {...$content} use:$content.action transition:fade={{ duration: 100 }} class="content">
+		{#if displayArrow}
+			<div {...$arrow} use:$arrow.action />
+		{/if}
+		<slot name="content" />
+		{#if closeButton}
+			<button class="close" {...$close} use:$close.action>
+				<X class="size-3" />
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.close {
+    position: absolute;
+    right: 0.375rem;
+    top: 0.375rem;
+    display: flex;
+    height: 1.75rem;
+    width: 1.75rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    --tw-text-opacity: 1;
+    color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+	.close:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity))
+}
+	.close:focus-visible {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+    --tw-ring-offset-width: 2px
+}
+	.close {
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--color-surface) / var(--tw-bg-opacity));
+    padding: 0px;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500
+}
+
+	.content {
+    z-index: 10;
+    width: -moz-fit-content;
+    width: fit-content;
+    overflow: hidden;
+    border-radius: 4px;
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--color-surface) / var(--tw-bg-opacity));
+    padding: 0px;
+    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}</style>

package/package/components/meltComponents/Popover.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        closeButton?: boolean | undefined;
+        displayArrow?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trigger: {};
+        content: {};
+    };
+};
+export type PopoverProps = typeof __propDef.props;
+export type PopoverEvents = typeof __propDef.events;
+export type PopoverSlots = typeof __propDef.slots;
+export default class Popover extends SvelteComponent<PopoverProps, PopoverEvents, PopoverSlots> {
+}
+export {};

package/package/components/propertyPicker/PropPicker.svelte

@@ -60,8 +60,10 @@ async function loadResources() {
 let filteringFlowInputsOrResult = '';
 async function filterPickableProperties() {
     if (!$propPickerConfig || !filterActive) {
-        flowInputsFiltered = pickableProperties.flow_input;
-        resultByIdFiltered = pickableProperties.priorIds;
+        if (search === EMPTY_STRING) {
+            flowInputsFiltered = pickableProperties.flow_input;
+            resultByIdFiltered = pickableProperties.priorIds;
+        }
         filteringFlowInputsOrResult = '';
         return;
     }
@@ -145,7 +147,7 @@ async function updateState() {
     await filterPickableProperties();
     await updateCollapsable();
 }
-$: search, $inputMatches, $propPickerConfig, updateState();
+$: search, $inputMatches, $propPickerConfig, pickableProperties, updateState();
 </script>
 
 <div class="flex flex-col h-full rounded">

package/package/components/runs/JobLoader.svelte

@@ -79,7 +79,10 @@ function computeJobKinds(jobKindsCat) {
             'appdependencies',
             'preview',
             'flowpreview',
-            'script_hub'
+            'script_hub',
+            'flowscript',
+            'flownode',
+            'appscript',
         ];
         return kinds.join(',');
     }
@@ -100,7 +103,7 @@ function computeJobKinds(jobKindsCat) {
         return kinds.join(',');
     }
     else {
-        let kinds = ['script', 'flow'];
+        let kinds = ['script', 'flow', 'flowscript', 'flownode', 'appscript'];
         return kinds.join(',');
     }
 }

package/package/components/runs/JobPreview.svelte

@@ -13,7 +13,7 @@ import DurationMs from '../DurationMs.svelte';
 import { workspaceStore } from '../../stores';
 import WorkflowTimeline from '../WorkflowTimeline.svelte';
 import Popover from '../Popover.svelte';
-import { truncateRev } from '../../utils';
+import { isFlowPreview, isScriptPreview, truncateRev } from '../../utils';
 import { createEventDispatcher } from 'svelte';
 import { ListFilter } from 'lucide-svelte';
 export let id;
@@ -142,7 +142,7 @@ const dispatch = createEventDispatcher();
 		{/if}
 
 		<div class=" w-full rounded-md min-h-full">
-			{#if job?.is_flow_step == false && job?.flow_status && (job?.job_kind == 'preview' || job?.job_kind == 'script') && !(typeof job.flow_status == 'object' && '_metadata' in job.flow_status)}
+			{#if job?.is_flow_step == false && job?.flow_status && (isScriptPreview(job?.job_kind) || job?.job_kind == 'script') && !(typeof job.flow_status == 'object' && '_metadata' in job.flow_status)}
 				<WorkflowTimeline
 					flow_status={asWorkflowStatus(job.flow_status)}
 					flowDone={job.type == 'CompletedJob'}
@@ -153,14 +153,14 @@ const dispatch = createEventDispatcher();
 				<Tabs bind:selected={viewTab}>
 					<Tab size="xs" value="result">Result</Tab>
 					<Tab size="xs" value="logs">Logs</Tab>
-					{#if job?.job_kind == 'preview'}
+					{#if isScriptPreview(job?.job_kind)}
 						<Tab size="xs" value="code">Code</Tab>
 					{/if}
 				</Tabs>
 
 				<Skeleton loading={!job} layout={[[5]]} />
 				{#if job}
-					{#if viewTab == 'result' && (job?.job_kind == 'flow' || job?.job_kind == 'flowpreview')}
+					{#if viewTab == 'result' && (job?.job_kind == 'flow' || isFlowPreview(job?.job_kind))}
 						<div class="flex flex-col gap-2">
 							<div class="w-full mt-10 mb-20">
 								<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} />
@@ -203,7 +203,7 @@ const dispatch = createEventDispatcher();
 					{/if}
 				{/if}
 			{:else if job && `running` in job ? job.running : false}
-				{#if job?.job_kind == 'flow' || job?.job_kind == 'flowpreview'}
+				{#if job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)}
 					<div class="flex flex-col gap-2 w-full">
 						<FlowProgressBar {job} class="py-4" />
 						<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} />

package/package/components/runs/RunRow.svelte

@@ -1,6 +1,6 @@
 <script>import { base } from '../../base';
 import { goto } from '../../navigation';
-import { displayDate, msToReadableTime, truncateHash, truncateRev, isJobCancelable } from '../../utils';
+import { displayDate, msToReadableTime, truncateHash, truncateRev, isJobCancelable, isFlowPreview, isScriptPreview } from '../../utils';
 import { Badge, Button } from '../common';
 import ScheduleEditor from '../ScheduleEditor.svelte';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
@@ -91,7 +91,7 @@ $: isExternal = job && job.id === '-';
 					{#if job && 'duration_ms' in job && job.duration_ms != undefined}
 						(Ran in {msToReadableTime(
 							job.duration_ms
-						)}{#if job.job_kind == 'flow' || job.job_kind == 'flowpreview'}&nbsp;total{/if})
+						)}{#if job.job_kind == 'flow' || isFlowPreview(job.job_kind)}&nbsp;total{/if})
 					{/if}
 					{#if job && (job.self_wait_time_ms || job.aggregate_wait_time_ms)}
 						<WaitTimeWarning
@@ -104,7 +104,6 @@ $: isExternal = job && job.id === '-';
 					Scheduled for {displayDate(job.scheduled_for)}
 				{:else if job.canceled}
 					Cancelling job... (created <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
-
 				{:else}
 					Waiting for executor (created <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
 				{/if}
@@ -157,7 +156,7 @@ $: isExternal = job && job.id === '-';
 									</Button>
 								{/if}
 							</div>
-						{:else if 'job_kind' in job && job.job_kind == 'preview'}
+						{:else if 'job_kind' in job && isScriptPreview(job.job_kind)}
 							<a href="{base}/run/{job.id}?workspace={job.workspace_id}">Preview without path </a>
 						{:else if 'job_kind' in job && job.job_kind == 'dependencies'}
 							<a href="{base}/run/{job.id}?workspace={job.workspace_id}">

package/package/components/runs/RunsFilter.svelte

@@ -114,8 +114,8 @@ let tagTimeout = undefined;
 					<ToggleButton value="folder" label="Folder" />
 					<ToggleButtonMore
 						togglableItems={[
-							{ label: 'Schedule Path', value: 'schedulePath' },
-							{ label: 'Concurrency Key', value: 'concurrencyKey' },
+							{ label: 'Schedule path', value: 'schedulePath' },
+							{ label: 'Concurrency key', value: 'concurrencyKey' },
 							{ label: 'Label', value: 'label' },
 							{ label: 'Tag', value: 'tag' }
 						]}
@@ -663,7 +663,7 @@ let tagTimeout = undefined;
 						{/key}
 					{:else if filterBy === 'concurrencyKey'}
 						{#key concurrencyKey}
-							<Label label="Concurrency Key">
+							<Label label="Concurrency key">
 								<div class="relative w-full">
 									{#if concurrencyKey}
 										<button
@@ -738,7 +738,7 @@ let tagTimeout = undefined;
 					</Label>
 				{/if}
 
-				<Label label="Show Skipped Flows">
+				<Label label="Show skipped flows">
 					<div class="flex flex-row gap-1 items-center">
 						<Toggle size="xs" bind:checked={isSkipped} />
 						<Tooltip>Skipped flows are flows that did an early break</Tooltip>

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -4,7 +4,7 @@ import { Drawer, DrawerContent } from '../common';
 import AddProperty from './AddProperty.svelte';
 import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import { flip } from 'svelte/animate';
-import { emptyString, generateRandomString } from '../../utils';
+import { emptyString } from '../../utils';
 import Button from '../common/button/Button.svelte';
 import { createEventDispatcher, tick } from 'svelte';
 import Label from '../Label.svelte';
@@ -18,7 +18,7 @@ let addProperty = undefined;
 let schemaFormDrawer = undefined;
 let editableSchemaForm = undefined;
 $: items = ((schema?.order ?? Object.keys(schema.properties ?? {}))?.map((item, index) => {
-    return { value: item, id: generateRandomString() };
+    return { value: item, id: item };
 }) ?? []);
 function handleConsider(e) {
     const { items: newItems } = e.detail;
@@ -49,7 +49,7 @@ let error = undefined;
 		label="JSON View"
 		size="xs"
 		options={{
-			right: 'JSON Editor',
+			right: 'JSON editor',
 			rightTooltip:
 				'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
 		}}
@@ -133,7 +133,7 @@ let error = undefined;
 
 						{#if schema.properties[item.value]?.type === 'object' && !(schema.properties[item.value].oneOf && schema.properties[item.value].oneOf.length >= 2)}
 							<div class="flex flex-col w-full mt-2">
-								<Label label="Nested Properties">
+								<Label label="Nested properties">
 									<svelte:self
 										on:change={() => (schema = schema)}
 										schema={schema.properties[item.value]}

package/package/components/schema/PropertyEditor.svelte

@@ -110,7 +110,7 @@ function updateSchema() {
 			/>
 		</Label>
 
-		<Label label="Custom Title" class="w-full">
+		<Label label="Custom title" class="w-full">
 			<svelte:fragment slot="header">
 				<Tooltip light>Will be displayed in the UI instead of the field name.</Tooltip>
 			</svelte:fragment>

package/package/components/schema/SchemaFormDND.svelte

@@ -11,6 +11,7 @@ export let lightweightMode = false;
 export let onlyMaskPassword = false;
 export let disablePortal = false;
 export let disabled = false;
+export let schemaSkippedValues = [];
 const dispatch = createEventDispatcher();
 const flipDurationMs = 200;
 let items = computeItems();
@@ -47,6 +48,7 @@ function handleFinalize(e) {
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <SchemaForm
+	{schemaSkippedValues}
 	on:click
 	on:change
 	on:reorder

package/package/components/schema/SchemaFormDND.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         onlyMaskPassword?: boolean | undefined;
         disablePortal?: boolean | undefined;
         disabled?: boolean | undefined;
+        schemaSkippedValues?: string[] | undefined;
     };
     events: {
         click: CustomEvent<any>;