windmill-components 1.472.1 → 1.472.2

package/package/components/HighlightTheme.svelte

@@ -0,0 +1,316 @@
+<script>"use strict";
+</script>
+
+<style global>
+	:global(pre) :global(code.hljs) {
+		display: block;
+		overflow-x: auto;
+		padding: 1em;
+		overflow: visible !important;
+	}
+
+	:global(code.hljs) {
+		padding: 3px 5px;
+	}
+	:global(.dark) :global(.hljs) {
+		background: #2e3440 !important;
+	}
+	:global(.dark) :global(.hljs),
+	:global(.dark) :global(.hljs-subst) {
+		color: #d8dee9 !important;
+	}
+	:global(.dark) :global(.hljs-selector-tag) {
+		color: #81a1c1 !important;
+	}
+	:global(.dark) :global(.hljs-selector-id) {
+		color: #8fbcbb !important;
+		font-weight: bold !important;
+	}
+	:global(.dark) :global(.hljs-selector-class) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.hljs-selector-attr) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.hljs-property) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.hljs-selector-pseudo) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.hljs-addition) {
+		background-color: rgba(163, 190, 140, 0.5) !important;
+	}
+	:global(.dark) :global(.hljs-deletion) {
+		background-color: rgba(191, 97, 106, 0.5) !important;
+	}
+	:global(.dark) :global(.hljs-built_in),
+	:global(.dark) :global(.hljs-type) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.hljs-class) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.hljs-function) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.hljs-title.hljs-function),
+	:global(.dark) :global(.hljs-function) > :global(.hljs-title) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.hljs-keyword),
+	:global(.dark) :global(.hljs-literal),
+	:global(.dark) :global(.hljs-symbol) {
+		color: #81a1c1 !important;
+	}
+	:global(.dark) :global(.hljs-number) {
+		color: #b48ead !important;
+	}
+	:global(.dark) :global(.hljs-regexp) {
+		color: #ebcb8b !important;
+	}
+	:global(.dark) :global(.hljs-string) {
+		color: #a3be8c !important;
+	}
+	:global(.dark) :global(.hljs-title) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.hljs-params) {
+		color: #d8dee9 !important;
+	}
+	:global(.dark) :global(.hljs-bullet) {
+		color: #81a1c1 !important;
+	}
+	:global(.dark) :global(.hljs-code) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.hljs-emphasis) {
+		font-style: italic !important;
+	}
+	:global(.dark) :global(.hljs-formula) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.hljs-strong) {
+		font-weight: bold !important;
+	}
+	:global(.dark) :global(.hljs-link:hover) {
+		-webkit-text-decoration: underline !important;
+		text-decoration: underline !important;
+	}
+	:global(.dark) :global(.hljs-quote) {
+		color: #4c566a !important;
+	}
+	:global(.dark) :global(.hljs-comment) {
+		color: #4c566a !important;
+	}
+	:global(.dark) :global(.hljs-doctag) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.hljs-meta),
+	:global(.dark) :global(.hljs-meta) :global(.hljs-keyword) {
+		color: #5e81ac !important;
+	}
+	:global(.dark) :global(.hljs-meta) :global(.hljs-string) {
+		color: #a3be8c !important;
+	}
+	:global(.dark) :global(.hljs-attr) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.hljs-attribute) {
+		color: #d8dee9 !important;
+	}
+	:global(.dark) :global(.hljs-name) {
+		color: #81a1c1 !important;
+	}
+	:global(.dark) :global(.hljs-section) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.hljs-tag) {
+		color: #81a1c1 !important;
+	}
+	:global(.dark) :global(.hljs-variable) {
+		color: #d8dee9 !important;
+	}
+	:global(.dark) :global(.hljs-template-variable) {
+		color: #d8dee9 !important;
+	}
+	:global(.dark) :global(.hljs-template-tag) {
+		color: #5e81ac !important;
+	}
+	:global(.dark) :global(.language-abnf) :global(.hljs-attribute) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-abnf) :global(.hljs-symbol) {
+		color: #ebcb8b !important;
+	}
+	:global(.dark) :global(.language-apache) :global(.hljs-attribute) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-apache) :global(.hljs-section) {
+		color: #81a1c1 !important;
+	}
+	:global(.dark) :global(.language-arduino) :global(.hljs-built_in) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-aspectj) :global(.hljs-meta) {
+		color: #d08770 !important;
+	}
+	:global(.dark) :global(.language-aspectj) > :global(.hljs-title) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-bnf) :global(.hljs-attribute) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.language-clojure) :global(.hljs-name) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-clojure) :global(.hljs-symbol) {
+		color: #ebcb8b !important;
+	}
+	:global(.dark) :global(.language-coq) :global(.hljs-built_in) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-cpp) :global(.hljs-meta) :global(.hljs-string) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.language-css) :global(.hljs-built_in) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-css) :global(.hljs-keyword) {
+		color: #d08770 !important;
+	}
+	:global(.dark) :global(.language-diff) :global(.hljs-meta) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.language-ebnf) :global(.hljs-attribute) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.language-glsl) :global(.hljs-built_in) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-groovy) :global(.hljs-meta:not(:first-child)) {
+		color: #d08770 !important;
+	}
+	:global(.dark) :global(.language-haxe) :global(.hljs-meta) {
+		color: #d08770 !important;
+	}
+	:global(.dark) :global(.language-java) :global(.hljs-meta) {
+		color: #d08770 !important;
+	}
+	:global(.dark) :global(.language-ldif) :global(.hljs-attribute) {
+		color: #8fbcbb !important;
+	}
+	:global(.dark) :global(.language-lisp) :global(.hljs-name) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-lua) :global(.hljs-built_in) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-moonscript) :global(.hljs-built_in) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-nginx) :global(.hljs-attribute) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-nginx) :global(.hljs-section) {
+		color: #5e81ac !important;
+	}
+	:global(.dark) :global(.language-pf) :global(.hljs-built_in) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-processing) :global(.hljs-built_in) {
+		color: #88c0d0 !important;
+	}
+	:global(.dark) :global(.language-scss) :global(.hljs-keyword) {
+		color: #81a1c1 !important;
+	}
+	:global(.dark) :global(.language-stylus) :global(.hljs-keyword) {
+		color: #81a1c1 !important;
+	}
+	:global(.dark) :global(.language-swift) :global(.hljs-meta) {
+		color: #d08770 !important;
+	}
+	:global(.dark) :global(.language-vim) :global(.hljs-built_in) {
+		color: #88c0d0 !important;
+		font-style: italic !important;
+	}
+	:global(.dark) :global(.language-yaml) :global(.hljs-meta) {
+		color: #d08770 !important;
+	}
+	:global(.hljs) {
+		color: #24292e;
+		background: #ffffff;
+	}
+	:global(.hljs-doctag),
+	:global(.hljs-keyword),
+	:global(.hljs-meta) :global(.hljs-keyword),
+	:global(.hljs-template-tag),
+	:global(.hljs-template-variable),
+	:global(.hljs-type),
+	:global(.hljs-variable.language_) {
+		color: #d73a49;
+	}
+	:global(.hljs-title),
+	:global(.hljs-title.class_),
+	:global(.hljs-title.class_.inherited__),
+	:global(.hljs-title.function_) {
+		color: #6f42c1;
+	}
+	:global(.hljs-attr),
+	:global(.hljs-attribute),
+	:global(.hljs-literal),
+	:global(.hljs-meta),
+	:global(.hljs-number),
+	:global(.hljs-operator),
+	:global(.hljs-variable),
+	:global(.hljs-selector-attr),
+	:global(.hljs-selector-class),
+	:global(.hljs-selector-id) {
+		color: #005cc5;
+	}
+	:global(.hljs-regexp),
+	:global(.hljs-string),
+	:global(.hljs-meta) :global(.hljs-string) {
+		color: #032f62;
+	}
+	:global(.hljs-built_in),
+	:global(.hljs-symbol) {
+		color: #e36209;
+	}
+	:global(.hljs-comment),
+	:global(.hljs-code),
+	:global(.hljs-formula) {
+		color: #6a737d;
+	}
+	:global(.hljs-name),
+	:global(.hljs-quote),
+	:global(.hljs-selector-tag),
+	:global(.hljs-selector-pseudo) {
+		color: #22863a;
+	}
+	:global(.hljs-subst) {
+		color: #24292e;
+	}
+	:global(.hljs-section) {
+		color: #005cc5;
+		font-weight: bold;
+	}
+	:global(.hljs-bullet) {
+		color: #735c0f;
+	}
+	:global(.hljs-emphasis) {
+		color: #24292e;
+		font-style: italic;
+	}
+	:global(.hljs-strong) {
+		color: #24292e;
+		font-weight: bold;
+	}
+	:global(.hljs-addition) {
+		color: #22863a;
+		background-color: #f0fff4;
+	}
+	:global(.hljs-deletion) {
+		color: #b31d28;
+		background-color: #ffeef0;
+	}</style>

package/package/components/HighlightTheme.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HighlightThemeProps = typeof __propDef.props;
+export type HighlightThemeEvents = typeof __propDef.events;
+export type HighlightThemeSlots = typeof __propDef.slots;
+export default class HighlightTheme extends SvelteComponent<HighlightThemeProps, HighlightThemeEvents, HighlightThemeSlots> {
+}
+export {};

package/package/components/HistoricInputs.svelte

@@ -0,0 +1,136 @@
+<script>import {} from '../gen/index.js';
+import { sendUserToast } from '../utils.js';
+import RunningJobSchemaPicker from './schema/RunningJobSchemaPicker.svelte';
+import { createEventDispatcher, onDestroy } from 'svelte';
+import JobLoader from './runs/JobLoader.svelte';
+import { DataTable } from './table';
+import HistoricList from './HistoricList.svelte';
+export let runnableId = undefined;
+export let runnableType = undefined;
+export let loading = false;
+export let selected = undefined;
+let historicList = undefined;
+const dispatch = createEventDispatcher();
+let jobs = [];
+let hasMoreCurrentRuns = false;
+let page = 1;
+async function handleSelected(data) {
+    if (selected === data.id) {
+        resetSelected(true);
+        return;
+    }
+    selected = data.id;
+    if (data.payloadData === 'WINDMILL_TOO_BIG') {
+        const fullPayload = await data.getFullPayload?.();
+        dispatch('select', { args: fullPayload, jobId: data.id });
+    }
+    else {
+        dispatch('select', { args: structuredClone(data.payloadData), jobId: data.id });
+    }
+}
+onDestroy(() => {
+    resetSelected(true);
+});
+function handleKeydown(event) {
+    if (event.key === 'Escape' && selected) {
+        resetSelected(true);
+        event.stopPropagation();
+        event.preventDefault();
+    }
+}
+function handleError(e) {
+    if (e.type === 'load') {
+        sendUserToast(`Failed to load input history: ${e.error}`, true);
+    }
+}
+let jobHovered = undefined;
+export function refresh() {
+    historicList?.refresh();
+}
+export function resetSelected(dispatchEvent) {
+    selected = undefined;
+    if (dispatchEvent) {
+        dispatch('select', undefined);
+    }
+}
+function getJobKinds(runnableType) {
+    if (runnableType === 'FlowPath') {
+        return 'flow,flowpreview';
+    }
+    else if (runnableType === 'ScriptPath') {
+        return 'script,preview';
+    }
+    else if (runnableType === 'ScriptHash') {
+        return 'script,preview';
+    }
+    return 'all';
+}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if runnableId}
+	<JobLoader
+		bind:jobs
+		path={runnableId}
+		isSkipped={false}
+		jobKinds={getJobKinds(runnableType)}
+		user={null}
+		label={null}
+		folder={null}
+		concurrencyKey={null}
+		tag={null}
+		success="running"
+		argFilter={undefined}
+		bind:loading
+		syncQueuedRunsCount={false}
+		refreshRate={10000}
+		computeMinAndMax={undefined}
+		perPage={5}
+	/>
+{/if}
+
+<div class="h-full max-h-full min-h-0 w-full flex flex-col gap-4">
+	<div class="grow-0" data-schema-picker>
+		<DataTable size="xs" bind:currentPage={page} hasMore={hasMoreCurrentRuns} tableFixed={true}>
+			{#if loading && (jobs == undefined || jobs?.length == 0)}
+				<div class="text-center text-tertiary text-xs py-2">Loading current runs...</div>
+			{:else if jobs?.length > 0}
+				<colgroup>
+					<col class="w-8" />
+					<col class="w-16" />
+					<col />
+				</colgroup>
+
+				<tbody class="w-full overflow-y-auto">
+					{#each jobs as job (job.id)}
+						<RunningJobSchemaPicker
+							{job}
+							selected={selected === job.id}
+							hovering={jobHovered === job.id}
+							on:select={(e) => handleSelected(e.detail)}
+						/>
+					{/each}
+					{#if jobs?.length == 5}
+						<tr class="text-left text-tertiary text-xs w-full">
+							<td class="w-full px-2" colspan="3">limited to 5 runs</td>
+						</tr>
+					{/if}
+				</tbody>
+			{:else}
+				<div class="text-center text-tertiary text-xs py-2">No job currently running</div>
+			{/if}
+		</DataTable>
+	</div>
+
+	<div class="min-h-0 grow" data-schema-picker>
+		<HistoricList
+			bind:this={historicList}
+			on:error={(e) => handleError(e.detail)}
+			on:select={(e) => handleSelected(e.detail)}
+			{runnableId}
+			{runnableType}
+			{selected}
+		/>
+	</div>
+</div>

package/package/components/HistoricInputs.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import { type RunnableType } from '../gen/index.js';
+declare const __propDef: {
+    props: {
+        runnableId?: string | undefined;
+        runnableType?: RunnableType | undefined;
+        loading?: boolean | undefined;
+        selected?: string | undefined;
+        refresh?: (() => void) | undefined;
+        resetSelected?: ((dispatchEvent?: boolean) => void) | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HistoricInputsProps = typeof __propDef.props;
+export type HistoricInputsEvents = typeof __propDef.events;
+export type HistoricInputsSlots = typeof __propDef.slots;
+export default class HistoricInputs extends SvelteComponent<HistoricInputsProps, HistoricInputsEvents, HistoricInputsSlots> {
+    get refresh(): () => void;
+    get resetSelected(): (dispatchEvent?: boolean | undefined) => void;
+}
+export {};

package/package/components/HistoricList.svelte

@@ -0,0 +1,95 @@
+<script>import { InputService } from '../gen';
+import { workspaceStore } from '../stores';
+import { onDestroy } from 'svelte';
+import InfiniteList from './InfiniteList.svelte';
+import JobSchemaPicker from './schema/JobSchemaPicker.svelte';
+export let runnableId;
+export let runnableType;
+export let selected = undefined;
+let infiniteList = undefined;
+let loadInputsPageFn = undefined;
+export function refresh() {
+    if (infiniteList) {
+        infiniteList.loadData('refresh');
+    }
+}
+let cachedArgs = {};
+let interval = undefined;
+function initLoadInputs() {
+    interval && clearInterval(interval);
+    interval = setInterval(() => {
+        refresh();
+    }, 10000);
+    loadInputsPageFn = async (page, perPage) => {
+        const inputs = await InputService.getInputHistory({
+            workspace: $workspaceStore,
+            runnableId,
+            runnableType,
+            page,
+            perPage,
+            includePreview: true
+        });
+        const inputsWithPayload = await Promise.all(inputs.map(async (input) => {
+            if (cachedArgs[input.id]) {
+                return {
+                    ...input,
+                    payloadData: cachedArgs[input.id]
+                };
+            }
+            const payloadData = await loadArgsFromHistory(input.id, undefined, false);
+            if (payloadData === 'WINDMILL_TOO_BIG') {
+                return {
+                    ...input,
+                    payloadData: 'WINDMILL_TOO_BIG',
+                    getFullPayload: () => loadArgsFromHistory(input.id, undefined, true)
+                };
+            }
+            cachedArgs[input.id] = payloadData;
+            return {
+                ...input,
+                payloadData
+            };
+        }));
+        return inputsWithPayload;
+    };
+    infiniteList?.setLoader(loadInputsPageFn);
+}
+onDestroy(() => {
+    interval && clearInterval(interval);
+});
+async function loadArgsFromHistory(id, input, allowLarge) {
+    if (!id)
+        return;
+    const payloadData = await InputService.getArgsFromHistoryOrSavedInput({
+        jobOrInputId: id,
+        workspace: $workspaceStore,
+        input,
+        allowLarge
+    });
+    return payloadData;
+}
+$: $workspaceStore && runnableId && runnableType && infiniteList && initLoadInputs();
+</script>
+
+<InfiniteList bind:this={infiniteList} selectedItemId={selected} on:error on:select>
+	<svelte:fragment slot="columns">
+		<colgroup>
+			<col class="w-8" />
+			<col class="w-16" />
+			<col />
+		</colgroup>
+	</svelte:fragment>
+	<svelte:fragment let:item let:hover>
+		<JobSchemaPicker
+			job={item}
+			selected={selected === item.id}
+			hovering={hover}
+			payloadData={item.payloadData}
+		/>
+	</svelte:fragment>
+	<svelte:fragment slot="empty">
+		<div class="text-center text-tertiary text-xs py-2">
+			{runnableId ? 'No previous inputs' : 'Save draft to see previous runs'}
+		</div>
+	</svelte:fragment>
+</InfiniteList>

package/package/components/HistoricList.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type RunnableType } from '../gen';
+declare const __propDef: {
+    props: {
+        runnableId: string | undefined;
+        runnableType: RunnableType | undefined;
+        selected?: string | undefined;
+        refresh?: (() => void) | undefined;
+    };
+    events: {
+        error: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HistoricListProps = typeof __propDef.props;
+export type HistoricListEvents = typeof __propDef.events;
+export type HistoricListSlots = typeof __propDef.slots;
+export default class HistoricList extends SvelteComponent<HistoricListProps, HistoricListEvents, HistoricListSlots> {
+    get refresh(): () => void;
+}
+export {};

package/package/components/IconedPath.svelte

@@ -0,0 +1,24 @@
+<script>import { truncateHash } from '../utils';
+import { Building } from 'lucide-svelte';
+import { Badge } from './common';
+import IconedResourceType from './IconedResourceType.svelte';
+export let path;
+export let hash = undefined;
+</script>
+
+<div class="flex space-x-2 items-center w-full shrink min-w-0 {$$props.class}">
+	{#if path.startsWith('hub/')}
+		<div>
+			<IconedResourceType width="20px" height="20px" name={path.split('/')[2]} silent={true} />
+		</div>
+		<span class="text-sm truncate">{path}</span>
+	{:else}
+		<div class="center-center">
+			<Building size={16} />
+		</div>
+		<span class="text-sm truncate">{path}</span>
+		{#if hash}
+			<Badge>{truncateHash(hash)}</Badge>
+		{/if}
+	{/if}
+</div>

package/package/components/IconedPath.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        path: string;
+        hash?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconedPathProps = typeof __propDef.props;
+export type IconedPathEvents = typeof __propDef.events;
+export type IconedPathSlots = typeof __propDef.slots;
+export default class IconedPath extends SvelteComponent<IconedPathProps, IconedPathEvents, IconedPathSlots> {
+}
+export {};

package/package/components/IconedResourceType.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { FileText } from 'lucide-svelte'
+	import { APP_TO_ICON_COMPONENT } from './icons'
+	export let name
+	export let silent = false
+	export let after = false
+	export let height = '24px'
+	export let width = '24px'
+	export let center = false
+	export let isSelected = false
+	export let formatExtension = undefined
+
+	$: iconComponent = name === "teams" 
+		? APP_TO_ICON_COMPONENT.ms_teams_webhook 
+		: APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
+</script>
+
+<div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
+	{#if !silent && !after}
+		{name}
+	{/if}
+	{#if iconComponent}
+		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
+			<svelte:component this={iconComponent} {height} {width} />
+		</span>
+	{:else if formatExtension}
+		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
+			<svelte:component this={FileText} {height} {width} />
+		</span>
+	{:else}
+		<span style="width: {width}; height: {height}" class="bg-gray-100 rounded-full" />
+	{/if}
+	{#if !silent && after}
+		{name}
+	{/if}
+</div>
+