windmill-components 1.52.0 → 1.55.0

package/components/apps/editor/settingsPanel/PickFlow.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         pick: CustomEvent<any>;
     } & {

package/components/apps/editor/settingsPanel/PickInlineScript.svelte

@@ -1,7 +1,7 @@
 <script>import ItemPicker from '../../../ItemPicker.svelte';
 import { createEventDispatcher } from 'svelte';
 import Button from '../../../common/button/Button.svelte';
-import { MousePointerClick } from 'svelte-lucide';
+import { MousePointerClick } from 'lucide-svelte';
 export let scripts;
 let itemPicker;
 const dispatch = createEventDispatcher();
@@ -23,7 +23,7 @@ async function loadItems() {
 />
 
 <Button
-	on:click={() => itemPicker.openDrawer()}
+	on:click={() => itemPicker?.openDrawer()}
 	btnClasses="w-24 truncate"
 	size="sm"
 	spacingSize="md"
@@ -31,7 +31,7 @@ async function loadItems() {
 	color="light"
 >
 	<div class="flex justify-center flex-col items-center gap-2">
-		<MousePointerClick size="18px" />
+		<MousePointerClick size={18} />
 
 		<span class="text-xs">Pick</span>
 	</div>

package/components/apps/editor/settingsPanel/Recompute.svelte

@@ -0,0 +1,46 @@
+<script>import Badge from '../../../common/badge/Badge.svelte';
+import { getContext } from 'svelte';
+import PanelSection from './common/PanelSection.svelte';
+export let recomputeIds = undefined;
+export let ownId;
+const { runnableComponents } = getContext('AppEditorContext');
+function onChange(event, id) {
+    if (event.currentTarget.checked) {
+        recomputeIds = [...(recomputeIds ?? []), id];
+    }
+    else {
+        recomputeIds = recomputeIds?.filter((id) => id !== id);
+    }
+}
+</script>
+
+<PanelSection title="Recompute">
+	{#if Object.keys($runnableComponents ?? {}).length > 0}
+		<table class="divide-y divide-gray-300 border w-full">
+			<thead class="bg-gray-50">
+				<tr>
+					<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500">
+						Component
+					</th>
+					<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500">
+						Recompute
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId) as id}
+					<tr>
+						<td class="whitespace-nowrap px-4 py-2 text-xs">
+							<Badge color="blue">{id}</Badge>
+						</td>
+						<td class="relative whitespace-nowrap px-4 py-2 ">
+							<input type="checkbox" on:change={(event) => onChange(event, id)} />
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{:else}
+		<div class="text-xs">No components to recompute</div>
+	{/if}
+</PanelSection>

package/components/apps/editor/settingsPanel/Recompute.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        recomputeIds?: string[] | undefined;
+        ownId: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RecomputeProps = typeof __propDef.props;
+export type RecomputeEvents = typeof __propDef.events;
+export type RecomputeSlots = typeof __propDef.slots;
+export default class Recompute extends SvelteComponentTyped<RecomputeProps, RecomputeEvents, RecomputeSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/StaticInputEditor.svelte

@@ -1,29 +1,46 @@
 <script>import Toggle from '../../../Toggle.svelte';
 import { staticValues } from '../componentsPanel/componentStaticValues';
-export let input;
-export let canHide;
+import SimpleEditor from '../../../SimpleEditor.svelte';
+import ArrayStaticInputEditor from './ArrayStaticInputEditor.svelte';
+export let componentInput;
+export let canHide = false;
 </script>
 
-{#if input.type === 'static'}
+{#if componentInput?.type === 'static'}
 	{#if canHide}
-		<Toggle bind:checked={input.visible} options={{ right: 'Visible' }} />
+		<Toggle bind:checked={componentInput.visible} options={{ right: 'Visible' }} />
 	{/if}
 
-	{#if input.fieldType === 'number'}
-		<input type="number" bind:value={input.value} />
-	{:else if input.fieldType === 'textarea'}
-		<textarea bind:value={input.value} />
-	{:else if input.fieldType === 'boolean'}
-		<Toggle bind:checked={input.value} />
-	{:else if input.fieldType === 'select'}
-		<select bind:value={input.value}>
-			{#each staticValues[input.optionValuesKey] || [] as option}
+	{#if componentInput.fieldType === 'number'}
+		<input type="number" bind:value={componentInput.value} />
+	{:else if componentInput.fieldType === 'textarea'}
+		<textarea bind:value={componentInput.value} />
+	{:else if componentInput.fieldType === 'boolean'}
+		<Toggle bind:checked={componentInput.value} />
+	{:else if componentInput.fieldType === 'select'}
+		<select bind:value={componentInput.value}>
+			{#each staticValues[componentInput.optionValuesKey] || [] as option}
 				<option value={option}>
 					{option}
 				</option>
 			{/each}
 		</select>
+	{:else if componentInput.fieldType === 'object'}
+		<div class="border rounded-sm w-full">
+			<SimpleEditor
+				lang="json"
+				code={JSON.stringify(componentInput.value, null, 2)}
+				class="few-lines-editor"
+				on:change={(e) => {
+					if (componentInput?.type === 'static' && componentInput.value) {
+						componentInput.value = JSON.parse(e.detail.code)
+					}
+				}}
+			/>
+		</div>
+	{:else if componentInput.fieldType === 'array'}
+		<ArrayStaticInputEditor bind:componentInput {canHide} />
 	{:else}
-		<input bind:value={input.value} />
+		<input bind:value={componentInput.value} />
 	{/if}
 {/if}

package/components/apps/editor/settingsPanel/StaticInputEditor.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInputTransform } from '../../types';
+import type { StaticAppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        input: AppInputTransform;
-        canHide: boolean;
+        componentInput: StaticAppInput | undefined;
+        canHide?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/SubTypeEditor.svelte

@@ -0,0 +1,17 @@
+<script>import StaticInputEditor from './StaticInputEditor.svelte';
+export let value;
+export let canHide = false;
+export let componentInput;
+let fakeComponentInput = {
+    ...componentInput,
+    value,
+    visible: componentInput.visible,
+    // We don't support array of arrays
+    // @ts-ignore
+    fieldType: componentInput.subFieldType
+};
+// Bubble up changes to the real componentInput
+$: fakeComponentInput && (value = fakeComponentInput.value);
+</script>
+
+<StaticInputEditor bind:componentInput={fakeComponentInput} {canHide} />

package/components/apps/editor/settingsPanel/SubTypeEditor.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { StaticAppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        value: any;
+        canHide?: boolean | undefined;
+        componentInput: StaticAppInput;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SubTypeEditorProps = typeof __propDef.props;
+export type SubTypeEditorEvents = typeof __propDef.events;
+export type SubTypeEditorSlots = typeof __propDef.slots;
+export default class SubTypeEditor extends SvelteComponentTyped<SubTypeEditorProps, SubTypeEditorEvents, SubTypeEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/TableActionLabel.svelte

@@ -0,0 +1,10 @@
+<script>import InputValue from '../../components/helpers/InputValue.svelte';
+export let componentInput;
+let label = '';
+</script>
+
+{#if componentInput !== undefined}
+	<InputValue input={componentInput} bind:value={label} />
+{/if}
+
+{label}

package/components/apps/editor/settingsPanel/TableActionLabel.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: AppInput | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableActionLabelProps = typeof __propDef.props;
+export type TableActionLabelEvents = typeof __propDef.events;
+export type TableActionLabelSlots = typeof __propDef.slots;
+export default class TableActionLabel extends SvelteComponentTyped<TableActionLabelProps, TableActionLabelEvents, TableActionLabelSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -5,19 +5,18 @@ import { getNextId } from '../../../flows/flowStateUtils';
 import { classNames } from '../../../../utils';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
-import { defaultProps } from '../componentsPanel/componentDefaultProps';
 import PanelSection from './common/PanelSection.svelte';
 import ComponentPanel from './ComponentPanel.svelte';
+import TableActionLabel from './TableActionLabel.svelte';
 export let components;
 const { app } = getContext('AppEditorContext');
 function addComponent() {
     const grid = $app.grid ?? [];
     const id = getNextId(grid.map((gridItem) => gridItem.data.id));
     const newComponent = {
-        ...defaultProps,
         id,
         type: 'buttoncomponent',
-        componentInputs: {
+        configuration: {
             label: {
                 type: 'static',
                 visible: true,
@@ -42,7 +41,14 @@ function addComponent() {
                 defaultValue: 'xs'
             }
         },
-        runnable: true
+        componentInput: {
+            type: 'static',
+            fieldType: 'textarea',
+            defaultValue: '',
+            value: ''
+        },
+        recomputeIds: undefined,
+        card: false
     };
     components = [...components, newComponent];
 }
@@ -63,7 +69,7 @@ let openedComponentId = components[0]?.id;
 	{#if components.length > 0}
 		<div class="w-full">
 			<Alert title="Special argument" size="xs">
-				A "row" argument is automatically added to the script. It contains the row data.
+				The row is passed as an argument to the runnable.
 			</Alert>
 		</div>
 	{/if}
@@ -83,10 +89,8 @@ let openedComponentId = components[0]?.id;
 			}}
 			on:keypress
 		>
-			<div
-				>{component.componentInputs.label.type === 'static'
-					? component.componentInputs.label.value
-					: ''}
+			<div>
+				<TableActionLabel componentInput={component.configuration.label} />
 			</div>
 			<Badge color="dark-blue">
 				Component: {component.id}

package/components/apps/editor/settingsPanel/UserInputEditor.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -1,10 +1,11 @@
 <script>import { classNames } from '../../../../../utils';
 export let title;
+export let smallPadding = false;
 </script>
 
-<div class={classNames('flex flex-col gap-2 items-start p-4')}>
+<div class={classNames('flex flex-col gap-2 items-start', smallPadding ? 'p-2' : 'p-4')}>
 	<div class="flex justify-between items-center w-full">
-		<div class="text-xs font-bold">{title}</div>
+		<div class="text-sm font-extrabold">{title}</div>
 		<slot name="action" />
 	</div>
 	<slot />

package/components/apps/editor/settingsPanel/common/PanelSection.svelte.d.ts

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

package/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte

@@ -0,0 +1,53 @@
+<script>import { createEventDispatcher } from 'svelte';
+import SearchItems from '../../../../SearchItems.svelte';
+import NoItemFound from '../../../../home/NoItemFound.svelte';
+import RowIcon from '../../../../common/table/RowIcon.svelte';
+export let filter = '';
+export let inlineScripts = [];
+let filteredItems = [];
+$: items = inlineScripts.map((x) => ({ title: x }));
+$: prefilteredItems = items ?? [];
+const dispatch = createEventDispatcher();
+</script>
+
+<SearchItems {filter} items={prefilteredItems} bind:filteredItems f={(x) => x.summary} />
+<div class="w-full flex mt-1 items-center gap-2">
+	<slot />
+	<input
+		type="text"
+		placeholder="Search inline scripts"
+		bind:value={filter}
+		class="text-2xl grow mb-4"
+	/>
+</div>
+
+{#if inlineScripts.length == 0}
+	Should create
+{:else if filteredItems.length == 0}
+	<NoItemFound />
+{:else}
+	<ul class="divide-y divide-gray-200 border rounded-md">
+		{#each filteredItems as item (item)}
+			<li class="flex flex-row w-full">
+				<button
+					class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+					on:click={() => dispatch('pick', item.title)}
+				>
+					<div class="flex items-center gap-4">
+						<RowIcon kind="script" />
+
+						<div class="w-full text-left font-normal ">
+							<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+								{#if item.marked}
+									{@html item.marked ?? ''}
+								{:else}
+									{item.title ?? ''}
+								{/if}
+							</div>
+						</div>
+					</div>
+				</button>
+			</li>
+		{/each}
+	</ul>
+{/if}

package/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        filter?: string | undefined;
+        inlineScripts?: string[] | undefined;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type InlineScriptListProps = typeof __propDef.props;
+export type InlineScriptListEvents = typeof __propDef.events;
+export type InlineScriptListSlots = typeof __propDef.slots;
+export default class InlineScriptList extends SvelteComponentTyped<InlineScriptListProps, InlineScriptListEvents, InlineScriptListSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -0,0 +1,98 @@
+<script>import { faMousePointer } from '@fortawesome/free-solid-svg-icons';
+import { Button, Drawer, DrawerContent, Tab, Tabs } from '../../../../common';
+import PickHubScript from '../../../../flows/pickers/PickHubScript.svelte';
+import { Building, Globe2 } from 'lucide-svelte';
+import InlineScriptList from './InlineScriptList.svelte';
+import WorkspaceScriptList from './WorkspaceScriptList.svelte';
+import WorkspaceFlowList from './WorkspaceFlowList.svelte';
+export let inlineScripts;
+export let componentInput;
+let tab = 'workspacescripts';
+let filter = '';
+let picker;
+function pickScript(path) {
+    if (componentInput.type === 'runnable') {
+        componentInput.runnable = {
+            type: 'runnableByPath',
+            path,
+            runType: 'script'
+        };
+    }
+}
+function pickFlow(path) {
+    if (componentInput.type === 'runnable') {
+        componentInput.runnable = {
+            type: 'runnableByPath',
+            path,
+            runType: 'flow'
+        };
+    }
+}
+function pickInlineScript(inlineScriptName) {
+    if (componentInput.type === 'runnable') {
+        componentInput.runnable = {
+            type: 'runnableByName',
+            inlineScriptName
+        };
+    }
+}
+</script>
+
+<Drawer bind:this={picker} size="1000px">
+	<DrawerContent title="Picker" on:close={picker.closeDrawer}>
+		<div>
+			<div class="max-w-6xl">
+				<Tabs bind:selected={tab}>
+					<Tab size="sm" value="inlinescripts">
+						<div class="flex gap-2 items-center my-1">
+							<Building size={18} />
+							Inline Scripts
+						</div>
+					</Tab>
+					<Tab size="sm" value="workspacescripts">
+						<div class="flex gap-2 items-center my-1">
+							<Building size={18} />
+							Workspace Scripts
+						</div>
+					</Tab>
+					<Tab size="sm" value="workspaceflows">
+						<div class="flex gap-2 items-center my-1">
+							<Building size={18} />
+							Workspace Flows
+						</div>
+					</Tab>
+					<Tab size="sm" value="hubscripts">
+						<div class="flex gap-2 items-center my-1">
+							<Globe2 size={18} />
+							Hub Scripts
+						</div>
+					</Tab>
+				</Tabs>
+				<div class="my-2" />
+				<div class="flex flex-col gap-y-16">
+					<div class="flex flex-col">
+						{#if tab == 'inlinescripts'}
+							<InlineScriptList {inlineScripts} on:pick={(e) => pickInlineScript(e.detail)} />
+						{:else if tab == 'workspacescripts'}
+							<WorkspaceScriptList on:pick={(e) => pickScript(e.detail)} />
+						{:else if tab == 'workspaceflows'}
+							<WorkspaceFlowList on:pick={(e) => pickFlow(e.detail)} />
+						{:else if tab == 'hubscripts'}
+							<PickHubScript bind:filter on:pick={(e) => pickScript(e.detail.path)} />
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>
+
+<Button
+	on:click={() => picker?.openDrawer()}
+	size="sm"
+	spacingSize="md"
+	color="blue"
+	startIcon={{ icon: faMousePointer }}
+>
+	Pick
+</Button>

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        inlineScripts: string[];
+        componentInput: AppInput;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RunnableSelectorProps = typeof __propDef.props;
+export type RunnableSelectorEvents = typeof __propDef.events;
+export type RunnableSelectorSlots = typeof __propDef.slots;
+export default class RunnableSelector extends SvelteComponentTyped<RunnableSelectorProps, RunnableSelectorEvents, RunnableSelectorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte

@@ -0,0 +1,81 @@
+<script>import { createEventDispatcher, onMount } from 'svelte';
+import SearchItems from '../../../../SearchItems.svelte';
+import NoItemFound from '../../../../home/NoItemFound.svelte';
+import RowIcon from '../../../../common/table/RowIcon.svelte';
+import { FlowService, Script, ScriptService } from '../../../../../gen';
+import { workspaceStore } from '../../../../../stores';
+import { emptyString } from '../../../../../utils';
+import { Skeleton } from '../../../../common';
+export let filter = '';
+let flows = undefined;
+let loading = false;
+let filteredItems = [];
+$: prefilteredItems = flows ?? [];
+const dispatch = createEventDispatcher();
+async function loadFlow() {
+    const loadedFlows = await FlowService.listFlows({
+        workspace: $workspaceStore,
+        perPage: 300
+    });
+    flows = loadedFlows;
+    loading = false;
+}
+onMount(() => {
+    loading = true;
+    loadFlow();
+});
+</script>
+
+<SearchItems
+	{filter}
+	items={prefilteredItems}
+	bind:filteredItems
+	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
+/>
+<div class="w-full flex mt-1 items-center gap-2">
+	<slot />
+	<input
+		type="text"
+		placeholder="Search workspace scripts"
+		bind:value={filter}
+		class="text-2xl grow mb-4"
+	/>
+</div>
+
+{#if flows}
+	{#if filteredItems.length == 0}
+		<NoItemFound />
+	{:else}
+		<ul class="divide-y divide-gray-200 border rounded-md">
+			{#each filteredItems as item (item)}
+				<li class="flex flex-row w-full">
+					<button
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						on:click={() => dispatch('pick', item.path)}
+					>
+						<div class="flex items-center gap-4">
+							<RowIcon kind="flow" />
+
+							<div class="w-full text-left font-normal ">
+								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+									{#if item.marked}
+										{@html item.marked ?? ''}
+									{:else}
+										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
+									{/if}
+								</div>
+								<div class="text-gray-600 text-xs ">
+									{item.path}
+								</div>
+							</div>
+						</div>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+{:else}
+	{#each Array(10).fill(0) as _}
+		<Skeleton layout={[[4], 0.5]} />
+	{/each}
+{/if}

package/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        filter?: string | undefined;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type WorkspaceFlowListProps = typeof __propDef.props;
+export type WorkspaceFlowListEvents = typeof __propDef.events;
+export type WorkspaceFlowListSlots = typeof __propDef.slots;
+export default class WorkspaceFlowList extends SvelteComponentTyped<WorkspaceFlowListProps, WorkspaceFlowListEvents, WorkspaceFlowListSlots> {
+}
+export {};