windmill-components 1.46.3 → 1.55.0

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/SectionPanel.svelte

@@ -0,0 +1,70 @@
+<script>import { Alert } from '../../../common';
+import Badge from '../../../common/badge/Badge.svelte';
+import Button from '../../../common/button/Button.svelte';
+import ConfirmationModal from '../../../common/confirmationModal/ConfirmationModal.svelte';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import PanelSection from './common/PanelSection.svelte';
+export let section;
+const dispatch = createEventDispatcher();
+let deleteConfirmedCallback = undefined;
+$: open = Boolean(deleteConfirmedCallback);
+function deleteSection(event) {
+    if (section &&
+        Array.isArray(section.components) &&
+        section?.components.length > 0 &&
+        !event.detail.shiftKey) {
+        deleteConfirmedCallback = () => {
+            dispatch('remove');
+            deleteConfirmedCallback = undefined;
+        };
+    }
+    else {
+        dispatch('remove');
+    }
+}
+</script>
+
+{#if section}
+	<div class="flex flex-col w-full divide-y">
+		<span class="text-sm border-y w-full py-1 px-2 bg-gray-800 text-white">Section editor</span>
+
+		<PanelSection title="Danger zone">
+			<Button
+				size="xs"
+				variant="border"
+				color="red"
+				startIcon={{ icon: faTrashAlt }}
+				on:click={deleteSection}
+			>
+				Delete section
+			</Button>
+		</PanelSection>
+	</div>
+{/if}
+
+<ConfirmationModal
+	{open}
+	title="Remove section"
+	confirmationText="Remove"
+	on:canceled={() => {
+		deleteConfirmedCallback = undefined
+	}}
+	on:confirmed={() => {
+		if (deleteConfirmedCallback) {
+			deleteConfirmedCallback()
+		}
+		deleteConfirmedCallback = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to remove this section?</span>
+		<Alert type="info" title="Bypass confirmation">
+			<div>
+				You can press
+				<Badge color="dark-gray">SHIFT</Badge>
+				while removing a resource to bypass confirmation.
+			</div>
+		</Alert>
+	</div>
+</ConfirmationModal>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppSection } from '../../types';
+declare const __propDef: {
+    props: {
+        section: AppSection | undefined;
+    };
+    events: {
+        remove: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SectionPanelProps = typeof __propDef.props;
+export type SectionPanelEvents = typeof __propDef.events;
+export type SectionPanelSlots = typeof __propDef.slots;
+export default class SectionPanel extends SvelteComponentTyped<SectionPanelProps, SectionPanelEvents, SectionPanelSlots> {
+}
+export {};

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

@@ -0,0 +1,46 @@
+<script>import Toggle from '../../../Toggle.svelte';
+import { staticValues } from '../componentsPanel/componentStaticValues';
+import SimpleEditor from '../../../SimpleEditor.svelte';
+import ArrayStaticInputEditor from './ArrayStaticInputEditor.svelte';
+export let componentInput;
+export let canHide = false;
+</script>
+
+{#if componentInput?.type === 'static'}
+	{#if canHide}
+		<Toggle bind:checked={componentInput.visible} options={{ right: 'Visible' }} />
+	{/if}
+
+	{#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={componentInput.value} />
+	{/if}
+{/if}

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

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

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

@@ -0,0 +1,111 @@
+<script>import { Badge } from '../../../common';
+import Alert from '../../../common/alert/Alert.svelte';
+import Button from '../../../common/button/Button.svelte';
+import { getNextId } from '../../../flows/flowStateUtils';
+import { classNames } from '../../../../utils';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+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 = {
+        id,
+        type: 'buttoncomponent',
+        configuration: {
+            label: {
+                type: 'static',
+                visible: true,
+                value: 'Action',
+                fieldType: 'textarea',
+                defaultValue: 'Action'
+            },
+            color: {
+                fieldType: 'select',
+                type: 'static',
+                visible: true,
+                value: 'dark',
+                optionValuesKey: 'buttonColorOptions',
+                defaultValue: 'dark'
+            },
+            size: {
+                fieldType: 'select',
+                type: 'static',
+                visible: true,
+                value: 'xs',
+                optionValuesKey: 'buttonSizeOptions',
+                defaultValue: 'xs'
+            }
+        },
+        componentInput: {
+            type: 'static',
+            fieldType: 'textarea',
+            defaultValue: '',
+            value: ''
+        },
+        recomputeIds: undefined,
+        card: false
+    };
+    components = [...components, newComponent];
+}
+let openedComponentId = components[0]?.id;
+</script>
+
+<PanelSection title={`Table actions ${components.length > 0 ? `(${components.length})` : ''}`}>
+	<svelte:fragment slot="action">
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addComponent}
+			iconOnly
+		/>
+	</svelte:fragment>
+	{#if components.length > 0}
+		<div class="w-full">
+			<Alert title="Special argument" size="xs">
+				The row is passed as an argument to the runnable.
+			</Alert>
+		</div>
+	{/if}
+	{#each components as component}
+		<div
+			class={classNames(
+				'w-full text-xs font-bold py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
+				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
+				openedComponentId === component.id ? 'outline outline-gray-500 outline-offset-1' : ''
+			)}
+			on:click={() => {
+				if (openedComponentId === component.id) {
+					openedComponentId = undefined
+				} else {
+					openedComponentId = component.id
+				}
+			}}
+			on:keypress
+		>
+			<div>
+				<TableActionLabel componentInput={component.configuration.label} />
+			</div>
+			<Badge color="dark-blue">
+				Component: {component.id}
+			</Badge>
+		</div>
+
+		{#if openedComponentId === component.id}
+			<div class="w-full border">
+				<ComponentPanel
+					bind:component
+					onDelete={() => {
+						components = components.filter((c) => c.id !== component.id)
+					}}
+				/>
+			</div>
+		{/if}
+	{/each}
+</PanelSection>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ButtonComponent, BaseAppComponent } from '../../types';
+declare const __propDef: {
+    props: {
+        components: (BaseAppComponent & ButtonComponent)[];
+    };
+    events: {
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableActionsProps = typeof __propDef.props;
+export type TableActionsEvents = typeof __propDef.events;
+export type TableActionsSlots = typeof __propDef.slots;
+export default class TableActions extends SvelteComponentTyped<TableActionsProps, TableActionsEvents, TableActionsSlots> {
+}
+export {};

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

@@ -0,0 +1,2 @@
+<script>"use strict";
+</script>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UserInputEditorProps = typeof __propDef.props;
+export type UserInputEditorEvents = typeof __propDef.events;
+export type UserInputEditorSlots = typeof __propDef.slots;
+export default class UserInputEditor extends SvelteComponentTyped<UserInputEditorProps, UserInputEditorEvents, UserInputEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,12 @@
+<script>import { classNames } from '../../../../../utils';
+export let title;
+export let smallPadding = false;
+</script>
+
+<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-sm font-extrabold">{title}</div>
+		<slot name="action" />
+	</div>
+	<slot />
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        smallPadding?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        action: {};
+        default: {};
+    };
+};
+export type PanelSectionProps = typeof __propDef.props;
+export type PanelSectionEvents = typeof __propDef.events;
+export type PanelSectionSlots = typeof __propDef.slots;
+export default class PanelSection extends SvelteComponentTyped<PanelSectionProps, PanelSectionEvents, PanelSectionSlots> {
+}
+export {};

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 {};