windmill-components 1.35.42 → 1.36.0

package/components/flows/FlowBox.svelte.d.ts

@@ -1,23 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        title?: string | undefined;
-        headerClickable?: boolean | undefined;
-    };
-    events: {
-        clickheader: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        content: {};
-    };
-};
-export declare type FlowBoxProps = typeof __propDef.props;
-export declare type FlowBoxEvents = typeof __propDef.events;
-export declare type FlowBoxSlots = typeof __propDef.slots;
-export default class FlowBox extends SvelteComponentTyped<FlowBoxProps, FlowBoxEvents, FlowBoxSlots> {
-}
-export {};

package/components/flows/FlowBoxHeader.svelte

@@ -1,16 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-export let title = undefined;
-export let clickable = false;
-const dispatch = createEventDispatcher();
-</script>
-
-<div
-	on:click={() => dispatch('click')}
-	class="flex items-center justify-between flex-wrap px-6 py-2"
-	class:cursor-pointer={clickable}
->
-	{#if title}
-		<h3 class="text-sm font-bold text-gray-900">{title}</h3>
-	{/if}
-	<slot />
-</div>

package/components/flows/FlowBoxHeader.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        title?: string | undefined;
-        clickable?: boolean | undefined;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type FlowBoxHeaderProps = typeof __propDef.props;
-export declare type FlowBoxHeaderEvents = typeof __propDef.events;
-export declare type FlowBoxHeaderSlots = typeof __propDef.slots;
-export default class FlowBoxHeader extends SvelteComponentTyped<FlowBoxHeaderProps, FlowBoxHeaderEvents, FlowBoxHeaderSlots> {
-}
-export {};

package/components/flows/FlowInput.svelte

@@ -1,22 +0,0 @@
-<script>import { emptySchema } from '../../utils';
-import SchemaEditor from '../SchemaEditor.svelte';
-import { flowStore } from './../flows/flowStore';
-import CopyFirstStepSchema from './CopyFirstStepSchema.svelte';
-import FlowBox from './FlowBox.svelte';
-</script>
-
-<FlowBox title="Flow Inputs">
-	<div slot="header">
-		<CopyFirstStepSchema />
-	</div>
-	<div slot="content">
-		<div class="p-6 border-t border-gray-300">
-			<SchemaEditor
-				on:change={() => {
-					$flowStore = $flowStore
-				}}
-				schema={$flowStore?.schema ?? emptySchema()}
-			/>
-		</div>
-	</div>
-</FlowBox>

package/components/flows/FlowInputs.svelte

@@ -1,65 +0,0 @@
-<script>import { RawScript } from '../../gen';
-import { faCode, faRepeat } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher } from 'svelte';
-import FlowScriptPicker from './pickers/FlowScriptPicker.svelte';
-import PickHubScript from './pickers/PickHubScript.svelte';
-import PickScript from './pickers/PickScript.svelte';
-export let shouldDisableLoopCreation = false;
-export let shouldDisableTriggerScripts = false;
-const dispatch = createEventDispatcher();
-</script>
-
-<div class="space-y-4">
-	{#if !shouldDisableTriggerScripts}
-		<div class="text-sm font-bold">Scripts</div>
-	{/if}
-
-	<div class="grid sm:grid-col-2 lg:grid-cols-3 gap-4">
-		<PickScript on:pick />
-		<PickHubScript on:pick />
-
-		<FlowScriptPicker
-			label={`Create a for-loop here`}
-			disabled={shouldDisableLoopCreation}
-			icon={faRepeat}
-			iconColor="text-blue-500"
-			on:click={() => dispatch('loop')}
-		/>
-
-		<FlowScriptPicker
-			label={`New PostgreSQL query`}
-			icon={faCode}
-			iconColor="text-blue-800"
-			on:click={() => dispatch('new', { language: RawScript.language.DENO, type: 'pgsql' })}
-		/>
-
-		<FlowScriptPicker
-			label="New Python script (3.10)"
-			icon={faCode}
-			iconColor="text-green-500"
-			on:click={() => dispatch('new', { language: RawScript.language.PYTHON3, type: 'flow' })}
-		/>
-
-		<FlowScriptPicker
-			label="New Typescript script (Deno)"
-			icon={faCode}
-			iconColor="text-blue-800"
-			on:click={() => dispatch('new', { language: RawScript.language.DENO, type: 'flow' })}
-		/>
-	</div>
-
-	{#if !shouldDisableTriggerScripts}
-		<div class="text-sm font-bold">Trigger scripts</div>
-
-		<div class="grid sm:grid-col-1 md:grid-col-2 lg:grid-cols-3 gap-4">
-			<PickScript isTrigger={true} on:pick />
-			<PickHubScript isTrigger={true} on:pick />
-			<FlowScriptPicker
-				label="New Typescript script (Deno)"
-				icon={faCode}
-				iconColor="text-blue-800"
-				on:click={() => dispatch('new', { language: RawScript.language.DENO, type: 'trigger' })}
-			/>
-		</div>
-	{/if}
-</div>

package/components/flows/FlowModuleHeader.svelte

@@ -1,109 +0,0 @@
-<script>import { getScriptByPath } from '../../utils';
-import { faArrowDown, faClose, faCode, faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'flowbite-svelte';
-import { createEventDispatcher } from 'svelte';
-import Icon from 'svelte-awesome';
-import { Highlight } from 'svelte-highlight';
-import python from 'svelte-highlight/languages/python';
-import typescript from 'svelte-highlight/languages/typescript';
-import IconedPath from '../IconedPath.svelte';
-import Modal from '../Modal.svelte';
-import { isEmptyFlowModule } from './flowStateUtils';
-import { stepOpened } from './stepOpenedStore';
-export let indexes;
-export let mod;
-$: shouldPick = isEmptyFlowModule(mod);
-let modalViewer;
-let modalViewerContent = '';
-let modalViewerLanguage = 'deno';
-async function viewCode() {
-    if (mod.value.type == 'script') {
-        const { content, language } = await getScriptByPath(mod.value.path);
-        modalViewerContent = content;
-        modalViewerLanguage = language;
-        modalViewer.openModal();
-    }
-    else {
-        throw Error('Not a script');
-    }
-}
-const dispatch = createEventDispatcher();
-$: opened = $stepOpened === String(indexes.join('-'));
-</script>
-
-<div>
-	<h3 class="text-sm font-bold text-gray-900 flex flex-col">
-		<span class="text-xs shrink">
-			{#if 'path' in mod.value && mod.value.path}
-				<IconedPath path={mod.value.path} />
-			{:else if 'language' in mod.value && mod.value.language}
-				Inline {mod.value.language}
-			{:else}
-				Select a script
-			{/if}
-		</span>
-		{#if ('path' in mod.value && mod.value.path) || ('language' in mod.value && mod.value.language)}
-			<input
-				on:click|stopPropagation={() => undefined}
-				class="overflow-x-auto"
-				type="text"
-				bind:value={mod.summary}
-				placeholder="Summary"
-			/>
-		{/if}
-	</h3>
-</div>
-
-<div class="flex flex-row space-x-2" on:click|stopPropagation={() => undefined}>
-	{#if mod.value.type === 'script' && !shouldPick}
-		<Button size="xs" color="alternative" on:click={() => dispatch('fork')}>
-			<Icon data={faCodeBranch} class="mr-2" />
-			Fork
-		</Button>
-		<Button size="xs" color="alternative" on:click={viewCode}>
-			<Icon data={faCode} class="mr-2" />
-			View code
-		</Button>
-	{/if}
-
-	{#if mod.value.type === 'rawscript' && !shouldPick}
-		<Button size="xs" color="alternative" on:click={() => dispatch('createScriptFromInlineScript')}>
-			<Icon data={faSave} class="mr-2" />
-			Save to workspace
-		</Button>
-	{/if}
-	<Button
-		size="xs"
-		color="alternative"
-		on:click={() => {
-			dispatch('delete')
-		}}
-	>
-		<Icon data={faTrashAlt} class="mr-2" />
-		Remove step
-	</Button>
-	{#if opened}
-		<Button size="xs" color="dark" on:click={() => stepOpened.update(() => undefined)}>
-			<Icon data={faClose} />
-		</Button>
-	{:else}
-		<Button
-			size="xs"
-			color="light"
-			on:click={() => stepOpened.update(() => String(indexes.join('-')))}
-		>
-			<Icon data={faArrowDown} />
-		</Button>
-	{/if}
-</div>
-
-<Modal bind:this={modalViewer}>
-	<div slot="title">Script {'path' in mod?.value ? mod?.value.path : ''}</div>
-	<div slot="content">
-		{#if modalViewerLanguage === 'python3'}
-			<Highlight language={python} code={modalViewerContent} />
-		{:else if modalViewerLanguage === 'deno'}
-			<Highlight language={typescript} code={modalViewerContent} />
-		{/if}
-	</div>
-</Modal>

package/components/flows/FlowSettings.svelte

@@ -1,165 +0,0 @@
-<script>import { sendUserToast } from '../../utils';
-import { faFileExport, faFileImport, faGlobe } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'flowbite-svelte';
-import Icon from 'svelte-awesome';
-import Menu from '../common/menu/Menu.svelte';
-import MenuItem from '../common/menu/MenuItem.svelte';
-import FlowViewer from '../FlowViewer.svelte';
-import Modal from '../Modal.svelte';
-import SimpleEditor from '../SimpleEditor.svelte';
-import CollapseLink from './../CollapseLink.svelte';
-import CronInput from './../CronInput.svelte';
-import FlowBox from './../flows/FlowBox.svelte';
-import { flowStore, initFlow } from './../flows/flowStore';
-import Path from './../Path.svelte';
-import Required from './../Required.svelte';
-import SchemaForm from './../SchemaForm.svelte';
-import Toggle from './../Toggle.svelte';
-import Tooltip from './../Tooltip.svelte';
-import { stepOpened } from './stepOpenedStore';
-import { cleanInputs } from './utils';
-export let pathError = '';
-export let initialPath = '';
-export let previewArgs = {};
-export let scheduleArgs = {};
-export let scheduleEnabled = false;
-export let scheduleCron = '0 */5 * * *';
-let jsonSetter;
-let jsonViewer;
-let jsonValue = '';
-</script>
-
-<Modal bind:this={jsonSetter}>
-	<div slot="title">Import JSON</div>
-	<div slot="content" class="h-full">
-		<SimpleEditor bind:code={jsonValue} lang="json" class="h-full" />
-	</div>
-	<div slot="submission">
-		<button
-			class="default-button px-4 py-2 font-semibold"
-			on:click={() => {
-				Object.assign($flowStore, JSON.parse(jsonValue))
-				initFlow($flowStore)
-				stepOpened.update(() => undefined)
-				sendUserToast('OpenFlow imported from JSON')
-				jsonSetter.closeModal()
-			}}
-		>
-			Import
-		</button>
-	</div>
-</Modal>
-
-<Modal bind:this={jsonViewer}>
-	<div slot="title">See JSON</div>
-	<div slot="content" class="h-full">
-		<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
-	</div>
-</Modal>
-
-<FlowBox title="Flow Settings">
-	<div slot="header">
-		<div class="flex flex-row-reverse">
-			<Menu placement="bottom-end">
-				<button slot="trigger" class="text-gray-900 bg-white dark:text-white dark:bg-gray-800">
-					...
-				</button>
-				<div class="divide-y divide-gray-200">
-					<MenuItem
-						on:click={() => {
-							jsonSetter.openModal()
-						}}
-					>
-						<Icon data={faFileImport} scale={0.6} class="inline mr-2" />
-						Import from a JSON OpenFlow
-					</MenuItem>
-					<MenuItem
-						on:click={() => {
-							jsonViewer.openModal()
-						}}
-					>
-						<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
-						Export to a JSON OpenFlow
-					</MenuItem>
-					<MenuItem
-						on:click={() => {
-							const url = new URL('https://hub.windmill.dev/flows/add')
-							const openFlow = {
-								value: $flowStore.value,
-								summary: $flowStore.summary,
-								description: $flowStore.description,
-								schema: $flowStore.schema
-							}
-							url.searchParams.append('flow', btoa(JSON.stringify(openFlow)))
-							window.open(url, '_blank')?.focus()
-						}}
-					>
-						<Icon data={faGlobe} scale={0.6} class="inline mr-2" />
-						Publish to Hub
-					</MenuItem>
-				</div>
-			</Menu>
-		</div>
-	</div>
-
-	<div slot="content">
-		<div class="p-6 border-t border-gray-300">
-			<Path
-				bind:error={pathError}
-				bind:path={$flowStore.path}
-				{initialPath}
-				namePlaceholder="my_flow"
-				kind="flow"
-			>
-				<div slot="ownerToolkit">
-					Flow permissions depend on their path. Select the group <span class="font-mono">all</span>
-					to share your flow, and <span class="font-mono">user</span> to keep it private.
-					<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
-				</div>
-			</Path>
-
-			<label class="block mt-4">
-				<span class="text-gray-700">Summary <Required required={false} /></span>
-				<textarea
-					bind:value={$flowStore.summary}
-					class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-					placeholder="A very short summary of the flow displayed when the flow is listed"
-					rows="1"
-				/>
-			</label>
-
-			<CollapseLink text="set primary schedule" open={true}>
-				<Tooltip>
-					The primary schedule of a flow is simply a schedule that has the same name as a flow. It
-					can be set and enabled directly within the flow editor. "Watching for new changes" flows
-					are meant to be watching regularly for new items in an external systems. The primary
-					schedule purpose is there to set the periodicity at which you want this watcher to
-					operate.
-				</Tooltip>
-				<Toggle
-					bind:checked={scheduleEnabled}
-					options={{
-						left: 'disabled',
-						right: 'enabled'
-					}}
-				/>
-				<div class="p-2 my-2 rounded" class:bg-gray-300={!scheduleEnabled}>
-					{#if !scheduleEnabled}
-						<span class="font-black">No next scheduled run when disabled</span>
-					{/if}
-					<CronInput bind:schedule={scheduleCron} />
-				</div>
-				<div class="flex flex-row-reverse">
-					<Button
-						color="alternative"
-						size="sm"
-						on:click={() => (scheduleArgs = JSON.parse(JSON.stringify(previewArgs)))}
-					>
-						Copy from preview arguments
-					</Button>
-				</div>
-				<SchemaForm schema={$flowStore.schema} bind:args={scheduleArgs} />
-			</CollapseLink>
-		</div>
-	</div>
-</FlowBox>

package/components/flows/FlowTimeline.svelte

@@ -1,169 +0,0 @@
-<script>import { faInfoCircle, faPen, faPlus, faSliders, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { Button, Toggle, Tooltip } from 'flowbite-svelte';
-import Icon from 'svelte-awesome';
-import ModuleStep from '../ModuleStep.svelte';
-import FlowInput from './FlowInput.svelte';
-import { emptyFlowModuleSchema } from './flowStateUtils';
-import { stepOpened } from './stepOpenedStore';
-export let args = {};
-export let flowModuleSchemas;
-export let parentIndex = undefined;
-const root = parentIndex === undefined;
-function insertAtIndex(index) {
-    flowModuleSchemas.splice(index, 0, emptyFlowModuleSchema());
-    flowModuleSchemas = flowModuleSchemas;
-    const indexes = getIndexes(parentIndex, index);
-    stepOpened.update(() => String(indexes.join('-')));
-}
-function removeAtIndex(index) {
-    flowModuleSchemas.splice(index, 1);
-    flowModuleSchemas = flowModuleSchemas;
-}
-function getIndexes(parentIndex, childIndex) {
-    const indexes = [];
-    if (parentIndex !== undefined) {
-        indexes.push(parentIndex);
-    }
-    indexes.push(childIndex);
-    return indexes;
-}
-const color = root ? 'blue' : 'orange';
-</script>
-
-<div class="w-full">
-	<ol class="relative ml-4 border-l border-gray-200 dark:border-gray-700 space-y-12 border-dashed">
-		{#if root}
-			<li class="ml-8">
-				<span class="relative">
-					<span
-						class={`flex absolute -left-12 justify-center items-center w-8 h-8 bg-${color}-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900`}
-					>
-						<Icon
-							class={`text-${color}-600 dark:text-${color}-400  text-font-bold text-center`}
-							data={faSliders}
-						/>
-					</span>
-				</span>
-				<slot name="settings" />
-			</li>
-			<li class="ml-8 ">
-				<span class="relative">
-					<span
-						class={`flex absolute top-4 -left-12 justify-center items-center w-8 h-8 bg-${color}-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900`}
-					>
-						<Icon
-							class={`text-${color}-600 dark:text-${color}-400 font-bold text-center`}
-							data={faPen}
-						/>
-					</span>
-				</span>
-				<FlowInput />
-			</li>
-		{/if}
-		{#each flowModuleSchemas as flowModuleSchema, index (index)}
-			{#if flowModuleSchema.flowModule.value.type === 'forloopflow'}
-				<li id="module-{index}" class="ml-4 relative">
-					<button
-						on:click={() => insertAtIndex(index)}
-						class="flex absolute -top-10 -left-8 justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
-					>
-						<Icon class="text-gray-400" data={faPlus} />
-					</button>
-					<div
-						class="py-2 px-6 ml-4 mb-16 flex justify-between text-sm font-bold border border-gray-300 rounded-md shadow-md"
-						role="alert"
-					>
-						<span class="flex items-center z-50">
-							For loop
-							<Tooltip
-								content="Inside a loop, the flow input has an 'iter' property. It contains the value and the index of the iteration"
-								placement="bottom"
-								arrow
-							>
-								<Icon data={faInfoCircle} class="ml-2" /></Tooltip
-							>
-						</span>
-						<span class="flex items-center space-x-2">
-							<Toggle size="small" bind:checked={flowModuleSchema.flowModule.value.skip_failures}>
-								Skip failures
-							</Toggle>
-							<Button size="xs" color="alternative" on:click={() => removeAtIndex(index)}>
-								<Icon data={faTrashAlt} class="mr-2" />
-								Remove loop
-							</Button>
-						</span>
-					</div>
-					<span
-						class="flex absolute top-3 -left-8 justify-center items-center w-8 h-8 bg-orange-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-orange-900"
-					>
-						<span class={`text-orange-600 dark:text-orange-400 font-bold text-center`}>
-							{index + 1}
-						</span>
-					</span>
-
-					<svelte:self
-						bind:args
-						bind:flowModuleSchemas={flowModuleSchema.childFlowModules}
-						parentIndex={index}
-					/>
-
-					<div
-						class="flex px-6 py-4 ml-4 mt-4 text-sm font-bold border border-gray-300 rounded-md shadow-md z-50"
-						role="alert"
-					>
-						End of For Loop
-						<Tooltip
-							content="The results of each iteration are collecting in an array and is the result of the step.	"
-							placement="bottom"
-							arrow
-						>
-							<Icon data={faInfoCircle} class="ml-2" /></Tooltip
-						>
-					</div>
-				</li>
-			{:else}
-				<li id="module-{String(getIndexes(parentIndex, index).join('-'))}" class="ml-8">
-					<span class="relative">
-						<button
-							on:click={() => insertAtIndex(index)}
-							class="flex absolute -top-10 -left-12 justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
-						>
-							<Icon class="text-gray-400" data={faPlus} />
-						</button>
-						<span
-							class={`flex absolute top-4 -left-12 justify-center items-center w-8 h-8 bg-${color}-200  rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900`}
-						>
-							<span class={`text-${color}-600 dark:text-${color}-400 font-bold text-center`}>
-								{index + 1}
-							</span>
-						</span>
-						<ModuleStep
-							indexes={getIndexes(parentIndex, index)}
-							bind:mod={flowModuleSchema.flowModule}
-							bind:args
-							bind:schema={flowModuleSchema.schema}
-							bind:childFlowModules={flowModuleSchema.childFlowModules}
-							on:delete={() => removeAtIndex(index)}
-						/>
-					</span>
-				</li>
-			{/if}
-			{#if flowModuleSchemas.length - 1 === index}
-				<button
-					on:click={() => insertAtIndex(flowModuleSchemas.length)}
-					class="-ml-4 -mt-4 flex justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
-				>
-					<Icon class="text-gray-400" data={faPlus} />
-				</button>
-			{/if}
-		{/each}
-		{#if flowModuleSchemas.length === 0}
-			<button
-				on:click={() => insertAtIndex(0)}
-				class="-ml-4 flex justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
-			>
-				<Icon class="text-gray-400" data={faPlus} />
-			</button>
-		{/if}
-	</ol>
-</div>

package/components/flows/FlowTimeline.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { FlowState } from './flowState';
-declare const __propDef: {
-    props: {
-        args?: Record<string, any> | undefined;
-        flowModuleSchemas: FlowState;
-        parentIndex?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        settings: {};
-    };
-};
-export declare type FlowTimelineProps = typeof __propDef.props;
-export declare type FlowTimelineEvents = typeof __propDef.events;
-export declare type FlowTimelineSlots = typeof __propDef.slots;
-export default class FlowTimeline extends SvelteComponentTyped<FlowTimelineProps, FlowTimelineEvents, FlowTimelineSlots> {
-}
-export {};

package/components/flows/stepOpenedStore.d.ts

@@ -1 +0,0 @@
-export declare const stepOpened: import("svelte/store").Writable<string | undefined>;

package/components/flows/stepOpenedStore.js

@@ -1,6 +0,0 @@
-import { writable } from 'svelte/store';
-import { scrollIntoView } from './utils';
-export const stepOpened = writable(undefined);
-stepOpened.subscribe((insertAt) => {
-    setTimeout(() => scrollIntoView(document.querySelector(`#module-${insertAt}`)), 100);
-});