windmill-components 1.87.0 → 1.89.0

package/package/components/apps/editor/AppInputs.svelte

@@ -0,0 +1,59 @@
+<script>import { Alert } from '../../common';
+import Toggle from '../../Toggle.svelte';
+import { getContext } from 'svelte';
+import { allItems } from '../utils';
+import AppComponentInput from './AppComponentInput.svelte';
+import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+const { app } = getContext('AppViewerContext');
+let resourceOnly = true;
+</script>
+
+<Alert type="info" title="Configurations">
+	In order to properly configure the app, you need to fill in the inputs below.
+</Alert>
+<div class="mt-2 flex flex-row-reverse">
+	<Toggle bind:checked={resourceOnly} options={{ right: 'Resource only' }} />
+</div>
+<div class="gap-4 flex flex-col pt-4">
+	{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
+		{#if gridItem?.data?.type === 'tablecomponent'}
+			<div>
+				<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
+				<div class="ml-4 mt-4">
+					{#each gridItem.data.actionButtons as actionButton (actionButton.id)}
+						<AppComponentInput bind:component={actionButton.data} {resourceOnly} />
+					{/each}
+				</div>
+			</div>
+		{:else}
+			<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
+		{/if}
+	{/each}
+</div>
+
+{#if $app?.hiddenInlineScripts?.length > 0}
+	<div class="font-bold text-lg">Background script inputs</div>
+	<div class="gap-4 flex flex-col pt-4">
+		{#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
+			<div class="border p-2">
+				<div class="text-sm font-bold">{script.name}</div>
+
+				{#if resourceOnly && Object.keys(script.fields).filter((fieldKey) => {
+						const fields = script.fields
+						const field = fields[fieldKey]
+						return field.fieldType === 'object' && field.format?.startsWith('resource-')
+					}).length === 0}
+					<span class="text-sm text-gray-600">No resource input</span>
+				{:else}
+					<InputsSpecsEditor
+						id={`bg_${index}`}
+						shouldCapitalize={false}
+						bind:inputSpecs={script.fields}
+						userInputEnabled={false}
+						{resourceOnly}
+					/>
+				{/if}
+			</div>
+		{/each}
+	</div>
+{/if}

package/package/components/apps/editor/AppInputs.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 AppInputsProps = typeof __propDef.props;
+export type AppInputsEvents = typeof __propDef.events;
+export type AppInputsSlots = typeof __propDef.slots;
+export default class AppInputs extends SvelteComponentTyped<AppInputsProps, AppInputsEvents, AppInputsSlots> {
+}
+export {};

package/package/components/apps/editor/AppPreview.svelte

@@ -0,0 +1,161 @@
+<script>import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { buildWorld } from '../rx';
+import { classNames } from '../../../utils';
+import Button from '../../common/button/Button.svelte';
+import { Unlock } from 'lucide-svelte';
+import RecomputeAllComponents from './RecomputeAllComponents.svelte';
+import GridViewer from './GridViewer.svelte';
+import { Component } from './component';
+import { twMerge } from 'tailwind-merge';
+import { columnConfiguration } from '../gridUtils';
+import { HiddenComponent } from '../components';
+import { deepEqual } from 'fast-equals';
+import { dfs } from './appUtils';
+export let app;
+export let appPath;
+export let breakpoint;
+export let policy;
+export let summary;
+export let workspace;
+export let isEditor;
+export let context;
+export let noBackend = false;
+export let isLocked = false;
+const appStore = writable(app);
+const selectedComponent = writable(undefined);
+const mode = writable('preview');
+const connectingInput = writable({
+    opened: false,
+    input: undefined,
+    hoveredComponent: undefined
+});
+const allIdsInPath = writable([]);
+const parentWidth = writable(0);
+setContext('AppViewerContext', {
+    worldStore: buildWorld(context),
+    initialized: writable({ initialized: false, initializedComponents: [] }),
+    app: appStore,
+    summary: writable(summary),
+    selectedComponent,
+    mode,
+    connectingInput,
+    breakpoint,
+    runnableComponents: writable({}),
+    appPath,
+    workspace,
+    onchange: undefined,
+    isEditor,
+    jobs: writable([]),
+    staticExporter: writable({}),
+    noBackend,
+    errorByComponent: writable({}),
+    openDebugRun: writable(undefined),
+    focusedGrid: writable(undefined),
+    stateId: writable(0),
+    parentWidth,
+    state: writable({}),
+    componentControl: writable({}),
+    hoverStore: writable(undefined),
+    allIdsInPath
+});
+let ncontext = { ...context, workspace };
+function hashchange(e) {
+    ncontext.hash = e.newURL.split('#')[1];
+    ncontext = ncontext;
+}
+let previousSelectedIds = undefined;
+$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
+    previousSelectedIds = $selectedComponent;
+    $allIdsInPath = ($selectedComponent ?? [])
+        .flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
+        .filter((x) => x != undefined);
+}
+$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full min-w-[710px]';
+$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
+</script>
+
+<svelte:window on:hashchange={hashchange} />
+
+<div id="app-editor-top-level-drawer" />
+
+<div class="relative">
+	<div
+		class="{$$props.class} {lockedClasses} {width} h-full {app.fullscreen
+			? ''
+			: 'max-w-6xl'} mx-auto"
+	>
+		{#if $appStore.grid}
+			<div
+				class={classNames(
+					'mx-auto',
+					$appStore?.norefreshbar ? 'invisible h-0 overflow-hidden' : ''
+				)}
+			>
+				<div
+					class="w-full sticky z-[1001] top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
+				>
+					<h2 class="truncate">{summary}</h2>
+					<RecomputeAllComponents />
+					<div class="text-2xs text-gray-600">
+						{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<div
+			style={app.css?.['app']?.['grid']?.style}
+			class={twMerge('px-4 pt-4 pb-2 overflow-visible', app.css?.['app']?.['grid']?.class ?? '')}
+			bind:clientWidth={$parentWidth}
+		>
+			<div>
+				<GridViewer
+					allIdsInPath={$allIdsInPath}
+					items={app.grid}
+					let:dataItem
+					rowHeight={36}
+					cols={columnConfiguration}
+					gap={[4, 2]}
+				>
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						class={'h-full w-full center-center'}
+						on:pointerdown={() => ($selectedComponent = [dataItem.id])}
+					>
+						<Component render={true} component={dataItem.data} selected={false} locked={true} />
+					</div>
+				</GridViewer>
+			</div>
+		</div>
+	</div>
+
+	{#if isLocked}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			on:click={() => (isLocked = false)}
+			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
+		>
+			<Button on:click={() => (isLocked = false)}>
+				Unlock preview
+				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
+			</Button>
+		</div>
+	{/if}
+</div>
+
+{#if app.hiddenInlineScripts}
+	{#each app.hiddenInlineScripts as script, index}
+		{#if script}
+			<HiddenComponent
+				id={`bg_${index}`}
+				inlineScript={script.inlineScript}
+				name={script.name}
+				fields={script.fields}
+				recomputeOnInputChanged={script.recomputeOnInputChanged ?? true}
+				recomputableByRefreshButton={script.autoRefresh ?? false}
+				noBackendValue={script.noBackendValue}
+			/>
+		{/if}
+	{/each}
+{/if}

package/package/components/apps/editor/AppPreview.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Writable } from 'svelte/store';
+import type { App, EditorBreakpoint } from '../types';
+import type { Policy } from '../../../gen';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        app: App;
+        appPath: string;
+        breakpoint: Writable<EditorBreakpoint>;
+        policy: Policy;
+        summary: string;
+        workspace: string;
+        isEditor: boolean;
+        context: Record<string, any>;
+        noBackend?: boolean | undefined;
+        isLocked?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppPreviewProps = typeof __propDef.props;
+export type AppPreviewEvents = typeof __propDef.events;
+export type AppPreviewSlots = typeof __propDef.slots;
+export default class AppPreview extends SvelteComponentTyped<AppPreviewProps, AppPreviewEvents, AppPreviewSlots> {
+}
+export {};

package/package/components/apps/editor/ComponentHeader.svelte

@@ -0,0 +1,129 @@
+<script>import { classNames } from '../../../utils';
+import { Anchor, Bug, Expand, Move, Pen } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import Popover from '../../Popover.svelte';
+import { Alert, Button } from '../../common';
+import { twMerge } from 'tailwind-merge';
+import { getErrorFromLatestResult } from './appUtils';
+export let component;
+export let selected;
+export let locked = false;
+export let hover = false;
+export let shouldHideActions = false;
+export let hasInlineEditor = false;
+export let inlineEditorOpened = false;
+const dispatch = createEventDispatcher();
+const { errorByComponent, openDebugRun, jobs, connectingInput } = getContext('AppViewerContext');
+$: error = getErrorFromLatestResult(component.id, $errorByComponent, $jobs);
+function openDebugRuns() {
+    if ($openDebugRun) {
+        $openDebugRun(component.id);
+    }
+}
+</script>
+
+{#if selected || hover}
+	<span
+		on:mousedown|stopPropagation|capture
+		draggable="false"
+		title={`Id: ${component.id}`}
+		class={twMerge(
+			'px-2 text-2xs font-semibold w-fit absolute shadow -top-[9px] -left-[8px] border rounded-sm z-50 cursor-move',
+			selected
+				? 'bg-indigo-500/90 border-indigo-600 text-white'
+				: $connectingInput.opened
+				? 'bg-red-500/90 border-red-600 text-white'
+				: 'bg-blue-500/90 border-blue-600 text-white'
+		)}
+	>
+		{component.id}
+	</span>
+{/if}
+
+{#if selected && !shouldHideActions}
+	<div class="top-[-9px] -right-[8px] flex flex-row absolute gap-1.5 z-50">
+		{#if hasInlineEditor}
+			<button
+				title="Expand"
+				class={classNames(
+					'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+					'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+				)}
+				on:click={() => dispatch('triggerInlineEditor')}
+				on:pointerdown|stopPropagation
+			>
+				{#if inlineEditorOpened}
+					<Pen aria-label="Unlock position" size={14} class="text-orange-500" />
+				{:else}
+					<Pen aria-label="Lock position" size={14} />
+				{/if}
+			</button>
+		{/if}
+		<button
+			title="Expand"
+			class={classNames(
+				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+			)}
+			on:click={() => dispatch('expand')}
+			on:pointerdown|stopPropagation
+		>
+			<Expand aria-label="Expand position" size={14} />
+		</button>
+		<button
+			title="Lock Position"
+			class={classNames(
+				'px-1 text-2xs py-0.5 font-bold w-fit border  rounded-sm cursor-pointer',
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+			)}
+			on:click={() => dispatch('lock')}
+			on:pointerdown|stopPropagation
+		>
+			{#if locked}
+				<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
+			{:else}
+				<Anchor aria-label="Lock position" size={14} />
+			{/if}
+		</button>
+		<span
+			draggable="false"
+			title="Move"
+			on:mousedown|stopPropagation|capture
+			class={classNames(
+				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-move rounded-sm',
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+			)}
+		>
+			<Move size={14} />
+		</span>
+	</div>
+{/if}
+
+{#if error}
+	{@const json = JSON.parse(JSON.stringify(error))}
+	<span
+		title="Error"
+		class={classNames(
+			'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-1  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
+			'bg-red-100/80'
+		)}
+	>
+		<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+			<Bug size={14} />
+			<span slot="text">
+				<div class="bg-white">
+					<Alert type="error" title={`${json?.name}: ${json?.message}`}>
+						<div class="flex flex-col gap-2">
+							<div>
+								<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs">
+									{json?.stack ?? ''}	
+								</pre>
+							</div>
+							<Button color="red" variant="border" on:click={openDebugRuns}>Open Debug Runs</Button>
+						</div>
+					</Alert>
+				</div>
+			</span>
+		</Popover>
+	</span>
+{/if}

package/package/components/apps/editor/ComponentHeader.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from './component';
+declare const __propDef: {
+    props: {
+        component: AppComponent;
+        selected: boolean;
+        locked?: boolean | undefined;
+        hover?: boolean | undefined;
+        shouldHideActions?: boolean | undefined;
+        hasInlineEditor?: boolean | undefined;
+        inlineEditorOpened?: boolean | undefined;
+    };
+    events: {
+        mousedown: MouseEvent;
+        pointerdown: PointerEvent;
+        triggerInlineEditor: CustomEvent<any>;
+        expand: CustomEvent<any>;
+        lock: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentHeaderProps = typeof __propDef.props;
+export type ComponentHeaderEvents = typeof __propDef.events;
+export type ComponentHeaderSlots = typeof __propDef.slots;
+export default class ComponentHeader extends SvelteComponentTyped<ComponentHeaderProps, ComponentHeaderEvents, ComponentHeaderSlots> {
+}
+export {};

package/package/components/apps/editor/ConnectionInstructions.svelte

@@ -0,0 +1,31 @@
+<script>import { Alert, Button } from '../../common';
+import { getContext } from 'svelte';
+import { secondaryMenu } from './settingsPanel/secondaryMenu';
+const { connectingInput } = getContext('AppViewerContext');
+function stopConnecting() {
+    $connectingInput.opened = false;
+    $connectingInput.input = undefined;
+    secondaryMenu.close();
+}
+</script>
+
+<div class="m-2">
+	<Alert title="Connecting" type="info">
+		<div class="flex gap-2 flex-col">
+			Click on the output of the component you want to connect to on the left panel.
+			<div class="my-2">
+				<ol class="list-disc flex gap-2 flex-col">
+					<li>
+						You can also navigate your app in a viewer mode: You won't be able to fire any events.
+					</li>
+					<li> Clicking on a component will open the component's output on the left. </li>
+				</ol>
+			</div>
+			<div>
+				<Button color="blue" variant="border" size="xs" on:click={stopConnecting}>
+					Stop connecting
+				</Button>
+			</div>
+		</div>
+	</Alert>
+</div>

package/package/components/apps/editor/ConnectionInstructions.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 ConnectionInstructionsProps = typeof __propDef.props;
+export type ConnectionInstructionsEvents = typeof __propDef.events;
+export type ConnectionInstructionsSlots = typeof __propDef.slots;
+export default class ConnectionInstructions extends SvelteComponentTyped<ConnectionInstructionsProps, ConnectionInstructionsEvents, ConnectionInstructionsSlots> {
+}
+export {};

package/package/components/apps/editor/GridEditor.svelte

@@ -0,0 +1,127 @@
+<script>import { getContext } from 'svelte';
+import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
+import { twMerge } from 'tailwind-merge';
+import RecomputeAllComponents from './RecomputeAllComponents.svelte';
+import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
+import Component from './component/Component.svelte';
+import { push } from '../../../history';
+import { dfs, expandGriditem, findGridItem } from './appUtils';
+import Grid from '../svelte-grid/Grid.svelte';
+import { deepEqual } from 'fast-equals';
+import ComponentWrapper from './component/ComponentWrapper.svelte';
+import { classNames } from '../../../utils';
+export let policy;
+const { selectedComponent, app, mode, connectingInput, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
+let previousSelectedIds = undefined;
+$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
+    previousSelectedIds = $selectedComponent;
+    $allIdsInPath = ($selectedComponent ?? [])
+        .flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
+        .filter((x) => x != undefined);
+}
+</script>
+
+<div class="relative w-full z-20 overflow-visible">
+	<div
+		class="w-full sticky top-0 flex justify-between border-b {$connectingInput?.opened
+			? ''
+			: 'bg-gray-50 '} px-4 py-1 items-center gap-4"
+		style="z-index: 1000;"
+	>
+		<h2 class="truncate">{$summary}</h2>
+		{#if !$connectingInput.opened}
+			<RecomputeAllComponents />
+		{/if}
+		<div class="flex text-2xs text-gray-600 gap-1 items-center">
+			<div class="py-2 pr-2 text-gray-600 flex gap-2 items-center">
+				Hide bar on view
+				<input class="windmillapp" type="checkbox" bind:checked={$app.norefreshbar} />
+			</div>
+			<div>
+				{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
+			</div>
+		</div>
+	</div>
+
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div
+		style={$app.css?.['app']?.['grid']?.style}
+		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
+		on:pointerdown={() => {
+			$selectedComponent = undefined
+			$focusedGrid = undefined
+		}}
+		bind:clientWidth={$parentWidth}
+	>
+		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
+			<Grid
+				allIdsInPath={$allIdsInPath}
+				selectedIds={$selectedComponent}
+				items={$app.grid}
+				on:redraw={(e) => {
+					push(history, $app)
+					$app.grid = e.detail
+				}}
+				let:dataItem
+				rowHeight={36}
+				cols={columnConfiguration}
+				fastStart={true}
+				gap={[4, 2]}
+			>
+				<ComponentWrapper
+					id={dataItem.id}
+					type={dataItem.data.type}
+					class={classNames(
+						'h-full w-full center-center',
+						Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
+					)}
+				>
+					<Component
+						render={true}
+						component={dataItem.data}
+						selected={Boolean($selectedComponent?.includes(dataItem.id))}
+						locked={isFixed(dataItem)}
+						on:lock={() => {
+							const gridItem = findGridItem($app, dataItem.id)
+							if (gridItem) {
+								toggleFixed(gridItem)
+							}
+							$app = $app
+						}}
+						on:expand={() => {
+							push(history, $app)
+							$selectedComponent = [dataItem.id]
+							expandGriditem($app.grid, dataItem.id, $breakpoint)
+							$app = $app
+						}}
+					/>
+				</ComponentWrapper>
+			</Grid>
+		</div>
+	</div>
+</div>
+
+{#if $app.hiddenInlineScripts}
+	{#each $app.hiddenInlineScripts as script, index}
+		{#if script}
+			<HiddenComponent
+				id={`bg_${index}`}
+				inlineScript={script.inlineScript}
+				name={script.name}
+				fields={script.fields}
+				recomputeOnInputChanged={script.recomputeOnInputChanged ?? true}
+				recomputableByRefreshButton={script.autoRefresh ?? false}
+			/>
+		{/if}
+	{/each}
+{/if}
+
+<style global>
+	:global(.svlt-grid-shadow) {
+		/* Back shadow */
+		background: #93c4fdd0 !important;
+	}
+	:global(.svlt-grid-active) {
+		opacity: 1 !important;
+	}</style>

package/package/components/apps/editor/GridEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Policy } from '../../../gen';
+declare const __propDef: {
+    props: {
+        policy: Policy;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridEditorProps = typeof __propDef.props;
+export type GridEditorEvents = typeof __propDef.events;
+export type GridEditorSlots = typeof __propDef.slots;
+export default class GridEditor extends SvelteComponentTyped<GridEditorProps, GridEditorEvents, GridEditorSlots> {
+}
+export {};