windmill-components 1.70.0 → 1.77.0

package/components/apps/editor/AppEditorHeader.svelte

@@ -1,6 +1,6 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import { Alert, Badge, Drawer, DrawerContent } from '../../common';
+import { Alert, Badge, ButtonPopup, ButtonPopupItem, Drawer, DrawerContent, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import { dirtyStore } from '../../common/confirmationModal/dirtyStore';
 import Skeleton from '../../common/skeleton/Skeleton.svelte';
@@ -9,6 +9,7 @@ import ToggleButtonGroup from '../../common/toggleButton/ToggleButtonGroup.svelt
 import DisplayResult from '../../DisplayResult.svelte';
 import Dropdown from '../../Dropdown.svelte';
 import FlowProgressBar from '../../flows/FlowProgressBar.svelte';
+import { idMutex } from '../../flows/flowStateUtils';
 import FlowStatusViewer from '../../FlowStatusViewer.svelte';
 import JobArgs from '../../JobArgs.svelte';
 import LogViewer from '../../LogViewer.svelte';
@@ -17,14 +18,15 @@ import TestJobLoader from '../../TestJobLoader.svelte';
 import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { AppService, Job, Policy } from '../../../gen';
-import { userStore, workspaceStore } from '../../../stores';
+import { redo, undo } from '../../../history';
+import { workspaceStore } from '../../../stores';
 import { faBug, faClipboard, faExternalLink, faFileExport, faGlobe, faSave } from '@fortawesome/free-solid-svg-icons';
-import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, MoreVertical, Pencil, SlidersHorizontal, Smartphone, X } from 'lucide-svelte';
+import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, MoreVertical, Pencil, Redo, SlidersHorizontal, Smartphone, Undo, X } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { appToHubUrl, classNames, copyToClipboard, sendUserToast } from '../../../utils';
-import { toStatic } from '../utils';
+import { allItems, toStatic } from '../utils';
 import AppExportButton from './AppExportButton.svelte';
 import AppInputs from './AppInputs.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
@@ -37,7 +39,8 @@ async function hash(message) {
 }
 export let policy;
 export let fromHub = false;
-const { app, summary, mode, breakpoint, appPath, jobs, staticExporter, errorByComponent, openDebugRun, focusedGrid, selectedComponent } = getContext('AppEditorContext');
+const { app, summary, mode, breakpoint, appPath, jobs, staticExporter, errorByComponent, openDebugRun, focusedGrid, selectedComponent } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
 const loading = {
     publish: false,
     save: false
@@ -69,7 +72,7 @@ function collectStaticFields(fields) {
     }));
 }
 async function computeTriggerables() {
-    const allTriggers = await Promise.all($app.grid
+    const allTriggers = await Promise.all(allItems($app.grid, $app.subgrids)
         .flatMap((x) => {
         let c = x.data;
         let r = [c.componentInput];
@@ -92,14 +95,12 @@ async function computeTriggerables() {
         }
         return [];
     })
-        .concat(Object.values($app.hiddenInlineScripts).map(async (v) => {
+        .concat(Object.values($app.hiddenInlineScripts ?? {}).map(async (v) => {
         let hex = await hash(v.inlineScript?.content);
         const staticInputs = collectStaticFields(v.fields);
         return [`rawscript/${hex}`, staticInputs];
     })));
     policy.triggerables = Object.fromEntries(allTriggers.filter((x) => x.length > 0));
-    policy.on_behalf_of = `u/${$userStore?.username}`;
-    policy.on_behalf_of_email = $userStore?.email;
 }
 async function createApp(path) {
     await computeTriggerables();
@@ -148,18 +149,24 @@ async function save() {
         return;
     }
     loading.save = true;
-    await computeTriggerables();
-    await AppService.updateApp({
-        workspace: $workspaceStore,
-        path: $page.params.path,
-        requestBody: {
-            value: $app,
-            summary: $summary,
-            policy
-        }
-    });
-    loading.save = false;
-    sendUserToast('App saved');
+    try {
+        await computeTriggerables();
+        await AppService.updateApp({
+            workspace: $workspaceStore,
+            path: $page.params.path,
+            requestBody: {
+                value: $app,
+                summary: $summary,
+                policy
+            }
+        });
+        sendUserToast('App saved');
+        loading.save = false;
+    }
+    catch (e) {
+        loading.save = false;
+        throw e;
+    }
 }
 let selectedJobId = undefined;
 let testJobLoader;
@@ -167,8 +174,55 @@ let job = undefined;
 let testIsLoading = false;
 $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 $: hasErrors = Object.keys($errorByComponent).length > 0;
+let lock = false;
+function onKeyDown(event) {
+    if (lock)
+        return;
+    lock = true;
+    switch (event.key) {
+        case 'Z':
+            if (event.ctrlKey) {
+                $app = redo(history);
+                event.preventDefault();
+            }
+            break;
+        case 'z':
+            if (event.ctrlKey) {
+                $app = undo(history, $app);
+                event.preventDefault();
+            }
+            break;
+        case 's':
+            if (event.ctrlKey) {
+                save();
+                event.preventDefault();
+            }
+            break;
+        // case 'ArrowDown': {
+        // 	let ids = generateIds()
+        // 	let idx = ids.indexOf($selectedIdStore)
+        // 	if (idx > -1 && idx < ids.length - 1) {
+        // 		$selectedIdStore = ids[idx + 1]
+        // 		event.preventDefault()
+        // 	}
+        // 	break
+        // }
+        // case 'ArrowUp': {
+        // 	let ids = generateIds()
+        // 	let idx = ids.indexOf($selectedIdStore)
+        // 	if (idx > 0 && idx < ids.length) {
+        // 		$selectedIdStore = ids[idx - 1]
+        // 		event.preventDefault()
+        // 	}
+        // 	break
+        // }
+    }
+    lock = false;
+}
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
 
 <Drawer bind:open={saveDrawerOpen} size="800px">
@@ -229,7 +283,7 @@ $: hasErrors = Object.keys($errorByComponent).length > 0;
 				</PanelSection>
 			</Pane>
 			<Pane size={75}>
-				<div class="h-full w-full overflow-hidden">
+				<div class="h-full w-full overflow-auto">
 					{#if selectedJobId}
 						{#if !job}
 							<Skeleton layout={[[40]]} />
@@ -353,18 +407,28 @@ $: hasErrors = Object.keys($errorByComponent).length > 0;
 	<div class="min-w-64 w-64">
 		<input type="text" placeholder="App summary" class="text-sm w-full" bind:value={$summary} />
 	</div>
+	<UndoRedo
+		undoProps={{ disabled: $history?.index === 0 }}
+		redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
+		on:undo={() => {
+			$app = undo(history, $app)
+		}}
+		on:redo={() => {
+			$app = redo(history)
+		}}
+	/>
 	<div class="flex gap-4 items-center grow justify-center">
 		<div>
 			<ToggleButtonGroup bind:selected={$mode}>
 				<ToggleButton position="left" value="dnd" size="xs">
 					<div class="inline-flex gap-1 items-center">
 						<Pencil size={14} />
-						<span class="hidden md:inline">Editor</span>
+						<span class="hidden lg:inline">Editor</span>
 					</div>
 				</ToggleButton>
 				<ToggleButton position="right" value="preview" size="xs">
 					<div class="inline-flex gap-1 items-center">
-						<Eye size={14} /> <span class="hidden md:inline">Preview</span>
+						<Eye size={14} /> <span class="hidden lg:inline">Preview</span>
 					</div>
 				</ToggleButton>
 			</ToggleButtonGroup>
@@ -381,42 +445,46 @@ $: hasErrors = Object.keys($errorByComponent).length > 0;
 		</div>
 
 		<div class="hidden lg:block">
-			<ToggleButtonGroup bind:selected={$app.fullscreen}>
-				<ToggleButton position="left" value={false} size="xs">
-					<div class="flex gap-1 justify-start items-center">
-						<AlignHorizontalSpaceAround size={14} />
-						<Tooltip light>
-							The max width is 1168px and the content stay centered instead of taking the full page
-							width
-						</Tooltip>
-					</div>
-				</ToggleButton>
-				<ToggleButton position="right" value={true} size="xs">
-					<Expand size={14} />
-				</ToggleButton>
-			</ToggleButtonGroup>
+			{#if $app}
+				<ToggleButtonGroup bind:selected={$app.fullscreen}>
+					<ToggleButton position="left" value={false} size="xs">
+						<div class="flex gap-1 justify-start items-center">
+							<AlignHorizontalSpaceAround size={14} />
+							<Tooltip light class="mb-0.5">
+								The max width is 1168px and the content stay centered instead of taking the full
+								page width
+							</Tooltip>
+						</div>
+					</ToggleButton>
+					<ToggleButton position="right" value={true} size="xs">
+						<Expand size={14} />
+					</ToggleButton>
+				</ToggleButtonGroup>
+			{/if}
 		</div>
 	</div>
 	{#if $focusedGrid !== undefined}
-		<Badge color="indigo">
-			<div class="flex flex-row gap-2 justify-center items-center">
-				<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
-				<button
-					on:click={() => {
-						$selectedComponent = undefined
-						$focusedGrid = undefined
-					}}
-				>
-					<X size={14} />
-				</button>
-			</div>
-		</Badge>
+		<div class="hidden lg:block">
+			<Badge color="indigo">
+				<div class="flex flex-row gap-2 justify-center items-center">
+					<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
+					<button
+						on:click={() => {
+							$selectedComponent = undefined
+							$focusedGrid = undefined
+						}}
+					>
+						<X size={14} />
+					</button>
+				</div>
+			</Badge>
+		</div>
 	{/if}
 
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px] hidden lg:block"
+			btnClasses="hidden lg:block"
 			dropdownItems={[
 				{
 					displayName: 'JSON',
@@ -441,9 +509,7 @@ $: hasErrors = Object.keys($errorByComponent).length > 0;
 					}
 				}
 			]}
-		>
-			<MoreVertical size={20} />
-		</Dropdown>
+		/>
 		<span class="hidden md:inline">
 			<Button on:click={() => (inputsDrawerOpen = true)} color="light" size="xs" variant="border">
 				<span class="flex gap-2">
@@ -460,7 +526,7 @@ $: hasErrors = Object.keys($errorByComponent).length > 0;
 				variant="border"
 				startIcon={{ icon: faBug }}
 			>
-				<span class="hidden md:inline">Debug Runs</span>
+				<span class="hidden xl:inline">Debug Runs</span>
 			</Button>
 		</span>
 		<AppExportButton bind:this={appExport} />
@@ -471,16 +537,33 @@ $: hasErrors = Object.keys($errorByComponent).length > 0;
 			variant="border"
 			startIcon={{ icon: faExternalLink }}
 		>
-			<span class="hidden md:inline">Publish</span>
-		</Button>
-		<Button
-			loading={loading.save}
-			startIcon={{ icon: faSave }}
-			on:click={save}
-			color="dark"
-			size="xs"
-		>
-			<span class="hidden md:inline">Save</span>
+			<span class="hidden xl:inline">Publish</span>
 		</Button>
+		{#if appPath == ''}
+			<Button
+				loading={loading.save}
+				startIcon={{ icon: faSave }}
+				on:click={save}
+				color="dark"
+				size="xs"
+			>
+				<span class="hidden md:inline">Save</span>
+			</Button>
+		{:else}
+			<ButtonPopup
+				loading={loading.save}
+				startIcon={{ icon: faSave }}
+				on:click={save}
+				color="dark"
+				size="xs"
+			>
+				<svelte:fragment slot="main">Save</svelte:fragment>
+				<ButtonPopupItem
+					on:click={() => {
+						window.open(`/apps/add?template=${appPath}`)
+					}}>Fork</ButtonPopupItem
+				>
+			</ButtonPopup>
+		{/if}
 	</div>
 </div>

package/components/apps/editor/AppInputs.svelte

@@ -3,7 +3,7 @@ import Toggle from '../../Toggle.svelte';
 import { getContext } from 'svelte';
 import AppComponentInput from './AppComponentInput.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
-const { app, lazyGrid } = getContext('AppEditorContext');
+const { app } = getContext('AppViewerContext');
 let resourceOnly = true;
 </script>
 
@@ -14,9 +14,9 @@ let resourceOnly = true;
 	<Toggle bind:checked={resourceOnly} options={{ right: 'Resource only' }} />
 </div>
 <div class="gap-4 flex flex-col pt-4">
-	{#each $lazyGrid as gridItem (gridItem.data.id)}
+	{#each $app.grid as gridItem (gridItem.data.id)}
 		<div>
-			{#if gridItem.data.type === 'tablecomponent'}
+			{#if gridItem?.data?.type === 'tablecomponent'}
 				<div>
 					<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
 					<div class="ml-4 mt-4">

package/components/apps/editor/AppPreview.svelte

@@ -1,6 +1,4 @@
 <script>import { onMount, setContext } from 'svelte';
-import { fade } from 'svelte/transition';
-import { cubicOut } from 'svelte/easing';
 import { writable } from 'svelte/store';
 import { buildWorld } from '../rx';
 import GridEditor from './GridEditor.svelte';
@@ -28,10 +26,9 @@ const connectingInput = writable({
     hoveredComponent: undefined
 });
 const runnableComponents = writable({});
-setContext('AppEditorContext', {
+setContext('AppViewerContext', {
     worldStore,
     staticOutputs,
-    lazyGrid: writable(app.grid),
     app: appStore,
     summary: writable(summary),
     selectedComponent,
@@ -48,17 +45,34 @@ setContext('AppEditorContext', {
     noBackend,
     errorByComponent: writable({}),
     openDebugRun: writable(undefined),
-    focusedGrid: writable(undefined)
+    focusedGrid: writable(undefined),
+    stateId: writable(0),
+    parentWidth: writable(0),
+    state: writable({}),
+    componentControl: writable({})
+});
+setContext('AppEditorContext', {
+    history: undefined,
+    pickVariableCallback: writable(undefined)
 });
 let mounted = false;
 onMount(() => {
     mounted = true;
 });
-$: mounted && ($worldStore = buildWorld($staticOutputs, undefined, context));
+let ncontext = context;
+function hashchange(e) {
+    ncontext.hash = e.newURL.split('#')[1];
+    ncontext = ncontext;
+}
+$: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, ncontext));
 $: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
 $: 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} h-full 
@@ -70,10 +84,10 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 			</div>
 		{/if}
 	</div>
+
 	{#if isLocked}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div
-			transition:fade|local={{ duration: 200, easing: cubicOut }}
 			on:click={() => (isLocked = false)}
 			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
 		>

package/components/apps/editor/ComponentHeader.svelte

@@ -1,5 +1,5 @@
 <script>import { classNames } from '../../../utils';
-import { Anchor, Bug, Move } from 'lucide-svelte';
+import { Anchor, Bug, Expand, Move } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import Popover from '../../Popover.svelte';
 import { Alert, Button } from '../../common';
@@ -9,7 +9,7 @@ export let locked = false;
 export let pointerdown = false;
 export let hover = false;
 const dispatch = createEventDispatcher();
-const { errorByComponent, openDebugRun, focusedGrid, worldStore } = getContext('AppEditorContext');
+const { errorByComponent, openDebugRun } = getContext('AppViewerContext');
 $: error = Object.values($errorByComponent).find((e) => e.componentId === component.id);
 function openDebugRuns() {
     if ($openDebugRun) {
@@ -33,13 +33,14 @@ function openDebugRuns() {
 
 {#if pointerdown || selected || hover}
 	<button
-		title="Position locking"
+		title="Lock Position"
 		class={classNames(
 			'text-gray-800 px-1 text-2xs py-0.5 font-bold w-fit shadow border border-gray-300 absolute  -top-1  right-[2.5rem] z-50 cursor-pointer',
 			' hover:bg-gray-300',
 			selected ? 'bg-gray-200/80' : 'bg-gray-200/80'
 		)}
 		on:click={() => dispatch('lock')}
+		on:pointerdown|stopPropagation
 	>
 		{#if locked}
 			<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
@@ -47,6 +48,18 @@ function openDebugRuns() {
 			<Anchor aria-label="Lock position" size={14} />
 		{/if}
 	</button>
+	<button
+		title="Expand"
+		class={classNames(
+			'text-gray-800 px-1 text-2xs py-0.5 font-bold w-fit shadow border border-gray-300 absolute  -top-1  right-[4.5rem] z-50 cursor-pointer',
+			' hover:bg-gray-300',
+			selected ? 'bg-gray-200/80' : 'bg-gray-200/80'
+		)}
+		on:click={() => dispatch('expand')}
+		on:pointerdown|stopPropagation
+	>
+		<Expand aria-label="Expand position" size={14} />
+	</button>
 {/if}
 
 {#if selected || hover}
@@ -54,7 +67,7 @@ function openDebugRuns() {
 		title="Move"
 		on:mousedown|stopPropagation|capture
 		class={classNames(
-			'text-gray-600 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute border border-gray-300 -top-1 shadow right-[4.5rem] z-50 cursor-move',
+			'text-gray-600 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute border border-gray-300 -top-1 shadow right-[0.5rem] z-50 cursor-move',
 			'bg-gray-200/80'
 		)}
 	>

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

@@ -9,8 +9,10 @@ declare const __propDef: {
         hover?: boolean | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
         mousedown: MouseEvent;
         lock: CustomEvent<any>;
+        expand: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };