windmill-components 1.60.3 → 1.83.1

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';
@@ -17,15 +17,17 @@ 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, Smartphone } from 'lucide-svelte';
+import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, Pencil, SlidersHorizontal, Smartphone, 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';
 async function hash(message) {
     const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -35,22 +37,41 @@ async function hash(message) {
     return hashHex;
 }
 export let policy;
-const { app, summary, mode, breakpoint, appPath, jobs, staticExporter } = getContext('AppEditorContext');
+export let fromHub = false;
+const { app, summary, mode, breakpoint, appPath, jobs, staticExporter, errorByComponent, openDebugRun, focusedGrid, selectedComponent } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
 const loading = {
     publish: false,
     save: false
 };
+$: if ($openDebugRun == undefined) {
+    $openDebugRun = (componentId) => {
+        jobsDrawerOpen = true;
+        const job = $jobs.find((job) => job.component === componentId);
+        if (job) {
+            selectedJobId = job.job;
+        }
+    };
+}
 let newPath = '';
 let pathError = undefined;
 let appExport;
 let saveDrawerOpen = false;
 let jobsDrawerOpen = false;
 let publishDrawerOpen = false;
+let inputsDrawerOpen = fromHub;
 function closeSaveDrawer() {
     saveDrawerOpen = false;
 }
+function collectStaticFields(fields) {
+    return Object.fromEntries(Object.entries(fields ?? {})
+        .filter(([k, v]) => v.type == 'static')
+        .map(([k, v]) => {
+        return [k, v['value']];
+    }));
+}
 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];
@@ -61,11 +82,7 @@ async function computeTriggerables() {
     })
         .map(async (input) => {
         if (input?.type == 'runnable') {
-            const staticInputs = Object.fromEntries(Object.entries(input.fields ?? {})
-                .filter(([k, v]) => v.type == 'static')
-                .map(([k, v]) => {
-                return [k, v['value']];
-            }));
+            const staticInputs = collectStaticFields(input.fields);
             if (input.runnable?.type == 'runnableByName') {
                 let hex = await hash(input.runnable.inlineScript?.content);
                 return [`rawscript/${hex}`, staticInputs];
@@ -76,10 +93,13 @@ async function computeTriggerables() {
             }
         }
         return [];
-    }));
-    policy.triggerables = Object.fromEntries(allTriggers);
-    policy.on_behalf_of = `u/${$userStore?.username}`;
-    policy.on_behalf_of_email = $userStore?.email;
+    })
+        .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));
 }
 async function createApp(path) {
     await computeTriggerables();
@@ -128,26 +148,85 @@ 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;
 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;
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        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">
@@ -156,7 +235,7 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 			bind:error={pathError}
 			bind:path={newPath}
 			initialPath=""
-			namePlaceholder="my_app"
+			namePlaceholder="app"
 			kind="app"
 		/>
 
@@ -170,21 +249,30 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 	</DrawerContent>
 </Drawer>
 
+<Drawer bind:open={inputsDrawerOpen} size="600px">
+	<DrawerContent title="App inputs configuration" on:close={() => (inputsDrawerOpen = false)}>
+		<AppInputs />
+	</DrawerContent>
+</Drawer>
+
 <Drawer bind:open={jobsDrawerOpen} size="900px">
 	<DrawerContent noPadding title="Debug Runs" on:close={() => (jobsDrawerOpen = false)}>
 		<Splitpanes class="!overflow-visible">
 			<Pane size={25}>
-				<PanelSection title="Past Runs" smallPadding>
+				<PanelSection title="Past Runs">
 					<div class="flex flex-col gap-2 w-full">
 						{#if $jobs.length > 0}
 							<div class="flex gap-2 flex-col ">
 								{#each $jobs ?? [] as { job, component } (job)}
 									<!-- svelte-ignore a11y-click-events-have-key-events -->
 									<div
-										class="{classNames(
+										class={classNames(
 											'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-											selectedJobId == job ? 'bg-blue-100 text-blue-600' : ''
-										)},"
+											$errorByComponent[job] ? 'border border-red-500 bg-red-100' : '',
+											selectedJobId == job && !$errorByComponent[component]
+												? 'bg-blue-100 text-blue-600'
+												: ''
+										)}
 										on:click={() => (selectedJobId = job)}
 									>
 										<span class="text-xs truncate">{job}</span>
@@ -199,19 +287,21 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 				</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]]} />
 						{:else}
 							<div class="flex flex-col h-full w-full gap-4 mb-4">
 								{#if job?.['running']}
-									<div class="flex flex-row-reverse w-full"
-										><Button
+									<div class="flex flex-row-reverse w-full">
+										<Button
 											color="red"
 											variant="border"
-											on:click={() => testJobLoader?.cancelJob()}>Cancel</Button
+											on:click={() => testJobLoader?.cancelJob()}
 										>
+											Cancel
+										</Button>
 									</div>
 								{/if}
 								<div class="p-2">
@@ -316,23 +406,33 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 </Drawer>
 
 <div
-	class="border-b flex flex-row justify-between py-1 gap-4  gap-y-2 px-4 items-center overflow-y-visible"
+	class="border-b flex flex-row justify-between py-1 gap-4  gap-y-2 px-3 items-center overflow-y-visible"
 >
 	<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>
@@ -349,26 +449,46 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 		</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>
-	<div class="flex flex-row grow gap-2 justify-end items-center overflow-visible">
+	{#if $focusedGrid !== undefined}
+		<div class="hidden lg:block">
+			<Badge color="indigo">
+				<div class="flex flex-row gap-2 justify-center items-center">
+					<div>{`Subgrid: ${$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',
@@ -393,18 +513,24 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 					}
 				}
 			]}
-		>
-			<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">
+					<SlidersHorizontal size={14} />
+					App inputs
+				</span>
+			</Button>
+		</span>
 		<span class="hidden md:inline">
 			<Button
 				on:click={() => (jobsDrawerOpen = true)}
-				color="light"
+				color={hasErrors ? 'red' : 'light'}
 				size="xs"
 				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} />
@@ -415,16 +541,33 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 			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/AppEditorHeader.svelte.d.ts

@@ -3,6 +3,7 @@ import { Policy } from '../../../gen';
 declare const __propDef: {
     props: {
         policy: Policy;
+        fromHub?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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