windmill-components 1.46.3 → 1.52.0

package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -0,0 +1,184 @@
+<script>import { fade } from 'svelte/transition';
+import { Drawer } from '../../../common';
+import Badge from '../../../common/badge/Badge.svelte';
+import Button from '../../../common/button/Button.svelte';
+import DrawerContent from '../../../common/drawer/DrawerContent.svelte';
+import ScriptEditor from '../../../ScriptEditor.svelte';
+import { Preview } from '../../../../gen';
+import { DENO_INIT_CODE_CLEAR } from '../../../../script_helpers';
+import { classNames, emptySchema } from '../../../../utils';
+import { faEdit, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import PanelSection from '../settingsPanel/common/PanelSection.svelte';
+import ComponentOutputViewer from './ComponentOutputViewer.svelte';
+export let appPath;
+const { connectingInput, staticOutputs, app, worldStore, selectedComponent } = getContext('AppEditorContext');
+let newScriptPath;
+let ignorePathError = false;
+$: isTakenPath = Object.keys($app.inlineScripts).includes(newScriptPath);
+function connectInput(id, name) {
+    if ($connectingInput) {
+        $connectingInput = {
+            opened: false,
+            input: {
+                id,
+                name,
+                type: 'output',
+                defaultValue: undefined,
+                fieldType: 'any'
+            }
+        };
+    }
+}
+function createScript() {
+    // To prevent the error message flashing up just before the drawer is closed
+    ignorePathError = true;
+    const path = `${appPath}/inline-script/${newScriptPath}`;
+    const inlineScript = {
+        content: DENO_INIT_CODE_CLEAR,
+        language: Preview.language.DENO,
+        path,
+        schema: emptySchema()
+    };
+    if ($app.inlineScripts) {
+        $app.inlineScripts[newScriptPath] = inlineScript;
+    }
+    else {
+        $app.inlineScripts = {
+            [newScriptPath]: inlineScript
+        };
+    }
+    scriptCreationDrawer?.closeDrawer?.();
+    selectedScript = inlineScript;
+    scriptEditorDrawer.openDrawer?.();
+}
+function afterCreateScript() {
+    newScriptPath = '';
+    ignorePathError = false;
+}
+let selectedScript = undefined;
+let scriptEditorDrawer;
+let scriptCreationDrawer = undefined;
+</script>
+
+<Drawer bind:this={scriptCreationDrawer} size="600px" on:afterClose={afterCreateScript}>
+	<DrawerContent title="Script creation" on:close={scriptCreationDrawer.closeDrawer}>
+		<label for="pathInput" class="text-sm font-semibold"> Script name </label>
+		<div class="flex justify-between items-center gap-4">
+			<!-- svelte-ignore a11y-autofocus -->
+			<input
+				autofocus
+				id="pathInput"
+				class="grow min-w-[150px]"
+				bind:value={newScriptPath}
+				on:keypress={(e) => e.key === 'Enter' && createScript()}
+			/>
+			<Button on:click={createScript} size="sm" disabled={isTakenPath} startIcon={{ icon: faPlus }}>
+				Create
+			</Button>
+		</div>
+		{#if isTakenPath && !ignorePathError}
+			<div transition:fade={{ duration: 100 }} class="text-sm text-red-600 h-5 mt-1">
+				This name is already used.
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={scriptEditorDrawer} size="1200px">
+	<DrawerContent
+		title="Script Editor"
+		noPadding
+		forceOverflowVisible
+		on:close={scriptEditorDrawer.closeDrawer}
+	>
+		{#if selectedScript}
+			<ScriptEditor
+				lang={selectedScript.language}
+				bind:code={selectedScript.content}
+				path={selectedScript.path}
+				bind:schema={selectedScript.schema}
+				fixedOverflowWidgets={false}
+			/>
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<PanelSection title="Inline scripts">
+	<svelte:fragment slot="action">
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			on:click={scriptCreationDrawer?.openDrawer}
+			startIcon={{ icon: faPlus }}
+			iconOnly
+		/>
+	</svelte:fragment>
+
+	<div class="w-full border rounded-sm">
+		{#each $app.inlineScripts ? Object.entries($app.inlineScripts) : [] as [key, value], index}
+			<div
+				class={classNames(
+					'flex justify-between flex-row w-full items-center p-2',
+					index % 2 === 0 ? 'bg-gray-100' : 'bg-white'
+				)}
+			>
+				<span class="text-xs">{key}</span>
+				<div class="flex gap-2">
+					<Button
+						size="xs"
+						color="light"
+						variant="border"
+						iconOnly
+						startIcon={{ icon: faEdit }}
+						on:click={() => {
+							if (value) {
+								selectedScript = value
+								scriptEditorDrawer.openDrawer && scriptEditorDrawer.openDrawer()
+							}
+						}}
+					/>
+					<Button
+						size="xs"
+						color="red"
+						variant="border"
+						iconOnly
+						startIcon={{ icon: faTrash }}
+						on:click={() => {
+							if ($app.inlineScripts[key]) {
+								delete $app.inlineScripts[key]
+								$app = $app
+							}
+						}}
+					/>
+				</div>
+			</div>
+		{/each}
+	</div>
+</PanelSection>
+
+<PanelSection title="Outputs">
+	{#each Object.entries($staticOutputs) as [componentId, outputs], index}
+		{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
+			<Badge color="blue">Component: {componentId}</Badge>
+
+			<div
+				class={classNames(
+					'w-full p-2 rounded-xs border',
+					$selectedComponent === componentId
+						? 'outline-1 outline outline-offset-2 outline-blue-500'
+						: ''
+				)}
+			>
+				<ComponentOutputViewer
+					{outputs}
+					{componentId}
+					on:select={({ detail }) => {
+						connectInput(componentId, detail)
+					}}
+				/>
+			</div>
+		{/if}
+	{/each}
+</PanelSection>

package/components/apps/editor/contextPanel/ContextPanel.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        appPath: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContextPanelProps = typeof __propDef.props;
+export type ContextPanelEvents = typeof __propDef.events;
+export type ContextPanelSlots = typeof __propDef.slots;
+export default class ContextPanel extends SvelteComponentTyped<ContextPanelProps, ContextPanelEvents, ContextPanelSlots> {
+}
+export {};

package/components/apps/editor/contextPanel/InlineScriptCreationPanel.svelte

@@ -0,0 +1,29 @@
+<script>import { Button } from '../../../common';
+import { Preview } from '../../../../gen';
+import { DENO_INIT_CODE_CLEAR } from '../../../../script_helpers';
+import { emptySchema } from '../../../../utils';
+import { getContext } from 'svelte';
+const { app } = getContext('AppEditorContext');
+export let appPath;
+function createScript() {
+    const scriptPath = 'name';
+    const path = `${appPath}/inline-script/${scriptPath}`;
+    const inlineScript = {
+        content: DENO_INIT_CODE_CLEAR,
+        language: Preview.language.DENO,
+        path,
+        schema: emptySchema()
+    };
+    if ($app.inlineScripts) {
+        $app.inlineScripts[scriptPath] = inlineScript;
+    }
+    else {
+        $app.inlineScripts = {
+            [scriptPath]: inlineScript
+        };
+    }
+}
+</script>
+
+<input value="" />
+<Button on:click={createScript}>Create</Button>

package/components/apps/editor/contextPanel/InlineScriptCreationPanel.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        appPath: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineScriptCreationPanelProps = typeof __propDef.props;
+export type InlineScriptCreationPanelEvents = typeof __propDef.events;
+export type InlineScriptCreationPanelSlots = typeof __propDef.slots;
+export default class InlineScriptCreationPanel extends SvelteComponentTyped<InlineScriptCreationPanelProps, InlineScriptCreationPanelEvents, InlineScriptCreationPanelSlots> {
+}
+export {};

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

@@ -0,0 +1,196 @@
+<script>import { ToggleButton, ToggleButtonGroup } from '../../../common';
+import Button from '../../../common/button/Button.svelte';
+import PickScript from '../../../flows/pickers/PickScript.svelte';
+import { faAlignCenter, faAlignLeft, faAlignRight, faClose, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import PanelSection from './common/PanelSection.svelte';
+import InputsSpecsEditor from './InputsSpecsEditor.svelte';
+import PickFlow from './PickFlow.svelte';
+import gridHelp from 'svelte-grid/build/helper/index.mjs';
+import PickInlineScript from './PickInlineScript.svelte';
+import TableActions from './TableActions.svelte';
+import { capitalize } from '../../../../utils';
+import Badge from '../../../common/badge/Badge.svelte';
+import { gridColumns } from '../../gridUtils';
+import { Plus } from 'svelte-lucide';
+export let component;
+export let onDelete = undefined;
+const { app, staticOutputs } = getContext('AppEditorContext');
+function removeGridElement() {
+    if (onDelete && component) {
+        delete $staticOutputs[component.id];
+        $staticOutputs = $staticOutputs;
+        onDelete();
+        // Delete static inputs
+    }
+    else {
+        if (component) {
+            $app.grid = $app.grid.filter((gridComponent) => gridComponent.data.id !== component?.id);
+            gridColumns.forEach((colIndex) => {
+                $app.grid = gridHelp.adjust($app.grid, colIndex);
+            });
+            // Delete static inputs
+            delete $staticOutputs[component.id];
+            $staticOutputs = $staticOutputs;
+        }
+    }
+}
+</script>
+
+{#if component}
+	<div class="flex flex-col w-full divide-y">
+		{#if component.runnable}
+			<PanelSection title="Runnable">
+				{#if component.runnable && component['inlineScriptName']}
+					<div class="flex justify-between w-full items-center">
+						<span class="text-xs">{component['inlineScriptName']}</span>
+						<Button
+							size="xs"
+							color="red"
+							startIcon={{ icon: faClose }}
+							on:click={() => {
+								if (component) {
+									component['inlineScriptName'] = undefined
+								}
+							}}
+						>
+							Clear
+						</Button>
+					</div>
+				{/if}
+
+				{#if component.runnable && component['path']}
+					<div class="flex gap-2 items-center">
+						<div>
+							<Badge color="blue">{capitalize(component['runType'])}</Badge>
+							<span class="text-xs">{component['path']}</span>
+						</div>
+						<Button
+							size="xs"
+							color="red"
+							variant="border"
+							startIcon={{ icon: faClose }}
+							on:click={() => {
+								if (component) {
+									component['inlineScriptName'] = undefined
+								}
+							}}
+						>
+							Clear
+						</Button>
+					</div>
+				{/if}
+
+				{#if component.runnable && component['path'] === undefined && component['inlineScriptName'] === undefined}
+					<div class="text-sm">Inline scripts:</div>
+					<div class="flex gap-2">
+						<Button
+							btnClasses="w-24 truncate"
+							size="sm"
+							spacingSize="md"
+							variant="border"
+							color="light"
+						>
+							<div class="flex justify-center flex-col items-center gap-2">
+								<Plus size="18px" />
+
+								<span class="text-xs">Create</span>
+							</div>
+						</Button>
+
+						<PickInlineScript
+							scripts={(Object.keys($app.inlineScripts) || []).map((summary) => ({ summary }))}
+							on:pick={({ detail }) => {
+								if (component?.runnable) {
+									// @ts-ignore
+									component.inlineScriptName = detail.summary
+								}
+							}}
+						/>
+					</div>
+
+					<div class="text-sm">Pick from workspace:</div>
+					<div class="flex gap-2">
+						<PickScript
+							kind="script"
+							on:pick={({ detail }) => {
+								if (component?.runnable) {
+									component['path'] = detail.path
+									component['runType'] = 'script'
+								}
+							}}
+						/>
+						<PickFlow
+							on:pick={({ detail }) => {
+								if (component?.runnable) {
+									component['path'] = detail.path
+									component['runType'] = 'flow'
+								}
+							}}
+						/>
+					</div>
+				{/if}
+			</PanelSection>
+		{/if}
+		{#if Object.values(component.inputs).length > 0}
+			<PanelSection title="Runnable inputs">
+				<InputsSpecsEditor bind:inputSpecs={component.inputs} />
+			</PanelSection>
+		{/if}
+
+		{#if Object.values(component.componentInputs).length > 0}
+			<PanelSection
+				title={`Component parameters (${Object.values(component.componentInputs).length})`}
+			>
+				<InputsSpecsEditor bind:inputSpecs={component.componentInputs} userInputEnabled={false} />
+			</PanelSection>
+		{/if}
+
+		{#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}
+			<TableActions bind:components={component.actionButtons} />
+		{/if}
+
+		{#if component.verticalAlignment !== undefined}
+			<PanelSection title="Alignment">
+				<div class="w-full text-xs font-bold">Horizontal alignment</div>
+
+				<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
+					<ToggleButton position="left" value="left" size="xs">
+						<Icon data={faAlignLeft} />
+					</ToggleButton>
+					<ToggleButton position="center" value="center" size="xs">
+						<Icon data={faAlignCenter} />
+					</ToggleButton>
+					<ToggleButton position="right" value="right" size="xs">
+						<Icon data={faAlignRight} />
+					</ToggleButton>
+				</ToggleButtonGroup>
+				<div class="w-full text-xs font-bold">Vertical alignment</div>
+
+				<ToggleButtonGroup bind:selected={component.verticalAlignment}>
+					<ToggleButton position="left" value="top" size="xs">
+						<Icon data={faAlignLeft} />
+					</ToggleButton>
+					<ToggleButton position="center" value="center" size="xs">
+						<Icon data={faAlignCenter} />
+					</ToggleButton>
+					<ToggleButton position="right" value="bottom" size="xs">
+						<Icon data={faAlignRight} />
+					</ToggleButton>
+				</ToggleButtonGroup>
+			</PanelSection>
+		{/if}
+		<PanelSection title="Danger zone">
+			<Button
+				size="xs"
+				color="red"
+				variant="border"
+				startIcon={{ icon: faTrashAlt }}
+				on:click={removeGridElement}
+			>
+				Delete component: {component.id}
+			</Button>
+		</PanelSection>
+	</div>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../../types';
+declare const __propDef: {
+    props: {
+        component: AppComponent | undefined;
+        onDelete?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentPanelProps = typeof __propDef.props;
+export type ComponentPanelEvents = typeof __propDef.events;
+export type ComponentPanelSlots = typeof __propDef.slots;
+export default class ComponentPanel extends SvelteComponentTyped<ComponentPanelProps, ComponentPanelEvents, ComponentPanelSlots> {
+}
+export {};

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

@@ -0,0 +1,64 @@
+<script>import { Badge, Button } from '../../../common';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+export let input;
+const { connectingInput, selectedComponent } = getContext('AppEditorContext');
+function applyConnection() {
+    if (!$connectingInput.opened && $connectingInput.input !== undefined) {
+        input.id = $connectingInput.input.id;
+        input.name = $connectingInput.input.name;
+        // TODO: CHeck whether types are ok
+        // TODO: Check whether this is needed
+        $selectedComponent = $selectedComponent;
+        $connectingInput = {
+            opened: false,
+            input: undefined
+        };
+    }
+}
+$: $connectingInput && applyConnection();
+</script>
+
+{#if input.id && input.name}
+	<div class="flex justify-between w-full">
+		<span class="text-xs font-bold">Status</span>
+		<Badge color="green">Connected</Badge>
+	</div>
+	<div class="flex justify-between w-full">
+		<span class="text-xs font-bold">Component</span>
+		<Badge color="indigo">{input.id}</Badge>
+	</div>
+	<div class="flex justify-between w-full">
+		<span class="text-xs font-bold">Field name</span>
+		<Badge color="indigo">{input.name}</Badge>
+	</div>
+	<Button
+		size="xs"
+		startIcon={{ icon: faLink }}
+		color="red"
+		on:click={() => {
+			input.id = undefined
+			input.name = undefined
+		}}
+	>
+		Clear connection
+	</Button>
+{:else}
+	<div class="flex justify-between w-full">
+		<span class="text-xs font-bold">Status</span>
+		<Badge color="dark-yellow">Not connected</Badge>
+	</div>
+	<Button
+		size="xs"
+		startIcon={{ icon: faLink }}
+		color="dark"
+		on:click={() => {
+			$connectingInput = {
+				opened: true,
+				input: undefined
+			}
+		}}
+	>
+		Connect this input to an output
+	</Button>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { DynamicInput, InputType } from '../../types';
+declare const __propDef: {
+    props: {
+        input: DynamicInput<InputType, any>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DynamicInputEditorProps = typeof __propDef.props;
+export type DynamicInputEditorEvents = typeof __propDef.events;
+export type DynamicInputEditorSlots = typeof __propDef.slots;
+export default class DynamicInputEditor extends SvelteComponentTyped<DynamicInputEditorProps, DynamicInputEditorEvents, DynamicInputEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,11 @@
+<script>import DynamicInputEditor from './DynamicInputEditor.svelte';
+import StaticInputEditor from './StaticInputEditor.svelte';
+export let appInputTransform;
+export let canHide = false;
+</script>
+
+{#if appInputTransform.type === 'static'}
+	<StaticInputEditor bind:input={appInputTransform} {canHide} />
+{:else if appInputTransform.type === 'output'}
+	<DynamicInputEditor bind:input={appInputTransform} />
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInputTransform } from '../../types';
+declare const __propDef: {
+    props: {
+        appInputTransform: AppInputTransform;
+        canHide?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputsSpecEditorProps = typeof __propDef.props;
+export type InputsSpecEditorEvents = typeof __propDef.events;
+export type InputsSpecEditorSlots = typeof __propDef.slots;
+export default class InputsSpecEditor extends SvelteComponentTyped<InputsSpecEditorProps, InputsSpecEditorEvents, InputsSpecEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,99 @@
+<script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
+import { capitalize, classNames } from '../../../../utils';
+import { faBolt, faLink, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fieldTypeToTsType } from '../../utils';
+import InputsSpecEditor from './InputsSpecEditor.svelte';
+export let inputSpecs;
+export let userInputEnabled = true;
+let openedProp = Object.keys(inputSpecs)[0];
+const userTypeKeys = ['value'];
+const staticTypeKeys = ['value'];
+const dynamicTypeKeys = ['id', 'name'];
+function sanitizeInputSpec(type, inputSpecKey) {
+    const inputSpec = inputSpecs[inputSpecKey];
+    if (type === 'user') {
+        for (const key of staticTypeKeys) {
+            delete inputSpec[key];
+        }
+        for (const key of dynamicTypeKeys) {
+            delete inputSpec[key];
+        }
+    }
+    else if (type === 'static') {
+        for (const key of userTypeKeys) {
+            delete inputSpec[key];
+        }
+        for (const key of dynamicTypeKeys) {
+            delete inputSpec[key];
+        }
+    }
+    else if (type === 'output') {
+        for (const key of userTypeKeys) {
+            delete inputSpec[key];
+        }
+        for (const key of staticTypeKeys) {
+            delete inputSpec[key];
+        }
+    }
+    inputSpecs[inputSpecKey] = inputSpec;
+}
+</script>
+
+<div class="w-full flex flex-col gap-2">
+	{#each Object.keys(inputSpecs) as inputSpecKey, index (index)}
+		{@const input = inputSpecs[inputSpecKey]}
+		<div>
+			<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',
+					openedProp === inputSpecKey ? 'outline outline-gray-500 outline-offset-1' : ''
+				)}
+				on:keypress
+				on:click={() => {
+					if (openedProp === inputSpecKey) {
+						openedProp = undefined
+					} else {
+						openedProp = inputSpecKey
+					}
+				}}
+			>
+				{inputSpecKey}
+				{#if input?.fieldType}
+					<Badge color={openedProp === inputSpecKey ? 'dark-blue' : 'blue'}>
+						{capitalize(fieldTypeToTsType(input.fieldType))}
+					</Badge>
+				{/if}
+			</div>
+			{#if inputSpecKey === openedProp}
+				<div class="flex flex-col w-full gap-2 my-2">
+					<ToggleButtonGroup
+						bind:selected={inputSpecs[inputSpecKey].type}
+						on:selected={({ detail }) => sanitizeInputSpec(detail, inputSpecKey)}
+					>
+						<ToggleButton position="left" value="static" startIcon={{ icon: faBolt }} size="xs">
+							Static
+						</ToggleButton>
+						<ToggleButton
+							position={userInputEnabled ? 'center' : 'right'}
+							value="output"
+							startIcon={{ icon: faLink }}
+							size="xs"
+						>
+							Dynamic
+						</ToggleButton>
+						{#if userInputEnabled}
+							<ToggleButton position="right" value="user" startIcon={{ icon: faUser }} size="xs">
+								User
+							</ToggleButton>
+						{/if}
+					</ToggleButtonGroup>
+					<InputsSpecEditor
+						bind:appInputTransform={inputSpecs[inputSpecKey]}
+						canHide={userInputEnabled}
+					/>
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>