windmill-components 1.89.1 → 1.103.0

package/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, UndoRedo } from '../../common';
+import { Alert, Badge, Drawer, DrawerContent, Kbd, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import { dirtyStore } from '../../common/confirmationModal/dirtyStore';
 import Skeleton from '../../common/skeleton/Skeleton.svelte';
@@ -13,7 +13,7 @@ import LogViewer from '../../LogViewer.svelte';
 import Path from '../../Path.svelte';
 import TestJobLoader from '../../TestJobLoader.svelte';
 import Toggle from '../../Toggle.svelte';
-import { AppService, Job, Policy } from '../../../gen';
+import { AppService, DraftService, Job, Policy } from '../../../gen';
 import { redo, undo } from '../../../history';
 import { workspaceStore } from '../../../stores';
 import { faClipboard, faFileExport, faSave, faSlidersH } from '@fortawesome/free-solid-svg-icons';
@@ -21,20 +21,34 @@ import { AlignHorizontalSpaceAround, Bug, Expand, Laptop2, Loader2, Smartphone }
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { classNames, copyToClipboard, sendUserToast } from '../../../utils';
-import { allItems, toStatic } from '../utils';
+import { classNames, copyToClipboard } from '../../../utils';
+import { BG_PREFIX, allItems, toStatic } from '../utils';
 import AppExportButton from './AppExportButton.svelte';
 import AppInputs from './AppInputs.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import PreviewToggle from './PreviewToggle.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import UnsavedConfirmationModal from '../../common/confirmationModal/UnsavedConfirmationModal.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { Sha256 } from '@aws-crypto/sha256-js';
+import { sendUserToast } from '../../../toast';
 async function hash(message) {
-    const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
-    const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8); // hash the message
-    const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
-    const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
-    return hashHex;
+    try {
+        const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
+        const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8); // hash the message
+        const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
+        const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+        return hashHex;
+    }
+    catch {
+        //subtle not available, trying pure js
+        const hash = new Sha256();
+        hash.update(message);
+        const result = Array.from(await hash.digest());
+        const hex = result.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+        return hex;
+    }
 }
 export let policy;
 export let fromHub = false;
@@ -42,7 +56,8 @@ const { app, summary, breakpoint, appPath, jobs, staticExporter, errorByComponen
 const { history } = getContext('AppEditorContext');
 const loading = {
     publish: false,
-    save: false
+    save: false,
+    saveDraft: false
 };
 $: if ($openDebugRun == undefined) {
     $openDebugRun = (componentId) => {
@@ -56,13 +71,16 @@ $: if ($openDebugRun == undefined) {
 let newPath = '';
 let pathError = undefined;
 let appExport;
+let draftDrawerOpen = false;
 let saveDrawerOpen = false;
 let jobsDrawerOpen = false;
-let publishDrawerOpen = false;
 let inputsDrawerOpen = fromHub;
 function closeSaveDrawer() {
     saveDrawerOpen = false;
 }
+function closeDraftDrawer() {
+    draftDrawerOpen = false;
+}
 function collectStaticFields(fields) {
     return Object.fromEntries(Object.entries(fields ?? {})
         .filter(([k, v]) => v.type == 'static')
@@ -71,35 +89,36 @@ function collectStaticFields(fields) {
     }));
 }
 async function computeTriggerables() {
-    const allTriggers = await Promise.all(allItems($app.grid, $app.subgrids)
+    const allTriggers = (await Promise.all(allItems($app.grid, $app.subgrids)
         .flatMap((x) => {
         let c = x.data;
         let r = [c.componentInput];
         if (c.type === 'tablecomponent') {
             r.push(...c.actionButtons.map((x) => x.componentInput));
         }
-        return r.filter((x) => x);
-    })
-        .map(async (input) => {
-        if (input?.type == 'runnable') {
-            const staticInputs = collectStaticFields(input.fields);
-            if (input.runnable?.type == 'runnableByName') {
-                let hex = await hash(input.runnable.inlineScript?.content);
-                return [`rawscript/${hex}`, staticInputs];
+        return r
+            .filter((x) => x)
+            .map(async (input) => {
+            if (input?.type == 'runnable') {
+                return await processRunnable(x.id, input.runnable, input.fields);
             }
-            else if (input.runnable?.type == 'runnableByPath') {
-                let prefix = input.runnable.runType !== 'hubscript' ? input.runnable.runType : 'script';
-                return [`${prefix}/${input.runnable.path}`, staticInputs];
-            }
-        }
-        return [];
+        });
     })
-        .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));
+        .concat(Object.values($app.hiddenInlineScripts ?? {}).map(async (v, i) => {
+        return await processRunnable(BG_PREFIX + i, v, v.fields);
+    }))));
+    policy.triggerables = Object.fromEntries(allTriggers.filter(Boolean));
+}
+async function processRunnable(id, runnable, fields) {
+    const staticInputs = collectStaticFields(fields);
+    if (runnable?.type == 'runnableByName') {
+        let hex = await hash(runnable.inlineScript?.content);
+        return [`${id}:rawscript/${hex}`, staticInputs];
+    }
+    else if (runnable?.type == 'runnableByPath') {
+        let prefix = runnable.runType !== 'hubscript' ? runnable.runType : 'script';
+        return [`${id}:${prefix}/${runnable.path}`, staticInputs];
+    }
 }
 async function createApp(path) {
     await computeTriggerables();
@@ -113,13 +132,30 @@ async function createApp(path) {
                 policy
             }
         });
+        $dirtyStore = false;
         closeSaveDrawer();
+        sendUserToast('App deployed successfully');
         goto(`/apps/edit/${appId}`);
     }
     catch (e) {
         sendUserToast('Error creating app', e);
     }
 }
+async function updateApp(path) {
+    await computeTriggerables();
+    await AppService.updateApp({
+        workspace: $workspaceStore,
+        path: $page.params.path,
+        requestBody: {
+            value: $app,
+            summary: $summary,
+            policy
+        }
+    });
+    $dirtyStore = false;
+    closeSaveDrawer();
+    sendUserToast('App deployed successfully');
+}
 let secretUrl = undefined;
 $: secretUrl == undefined && policy.execution_mode == 'anonymous' && getSecretUrl();
 async function getSecretUrl() {
@@ -142,28 +178,63 @@ async function setPublishState() {
     }
 }
 async function save() {
+    $dirtyStore = false;
+    saveDrawerOpen = true;
+    return;
+}
+async function saveInitialDraft() {
+    await computeTriggerables();
+    try {
+        await AppService.createApp({
+            workspace: $workspaceStore,
+            requestBody: {
+                value: $app,
+                path: newPath,
+                summary: $summary,
+                policy,
+                draft_only: true
+            }
+        });
+        await DraftService.createDraft({
+            workspace: $workspaceStore,
+            requestBody: {
+                path: newPath,
+                typ: 'app',
+                value: $app
+            }
+        });
+        draftDrawerOpen = false;
+        $dirtyStore = false;
+        goto(`/apps/edit/${newPath}`);
+    }
+    catch (e) {
+        sendUserToast('Error saving initial draft', e);
+    }
+    draftDrawerOpen = false;
+}
+async function saveDraft() {
     $dirtyStore = false;
     if ($page.params.path == undefined) {
-        saveDrawerOpen = true;
+        draftDrawerOpen = true;
         return;
     }
-    loading.save = true;
+    loading.saveDraft = true;
     try {
         await computeTriggerables();
-        await AppService.updateApp({
+        $dirtyStore = false;
+        await DraftService.createDraft({
             workspace: $workspaceStore,
-            path: $page.params.path,
             requestBody: {
-                value: $app,
-                summary: $summary,
-                policy
+                path: $page.params.path,
+                typ: 'app',
+                value: $app
             }
         });
-        sendUserToast('App saved');
-        loading.save = false;
+        sendUserToast('Draft saved');
+        loading.saveDraft = false;
     }
     catch (e) {
-        loading.save = false;
+        loading.saveDraft = false;
         throw e;
     }
 }
@@ -201,7 +272,7 @@ function onKeyDown(event) {
             break;
         case 's':
             if (event.ctrlKey || event.metaKey) {
-                save();
+                saveDraft();
                 event.preventDefault();
             }
             break;
@@ -232,25 +303,141 @@ function onKeyDown(event) {
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
 
+<UnsavedConfirmationModal />
+
+{#if appPath == ''}
+	<Drawer bind:open={draftDrawerOpen} size="800px">
+		<DrawerContent title="Initial draft save" on:close={() => closeDraftDrawer()}>
+			<Alert title="Require path" type="info">
+				Choose a path to save the initial draft of the app.
+			</Alert>
+			<div class="py-2" />
+			<Path
+				bind:error={pathError}
+				bind:path={newPath}
+				initialPath=""
+				namePlaceholder="app"
+				kind="app"
+			/>
+			<div class="py-4" />
+
+			<h3>Summary</h3>
+			<div class="w-full pt-2">
+				<input
+					type="text"
+					placeholder="App summary"
+					class="text-sm w-full font-semibold"
+					bind:value={$summary}
+				/>
+			</div>
+
+			<div slot="actions">
+				<Button
+					startIcon={{ icon: faSave }}
+					disabled={pathError != ''}
+					on:click={() => saveInitialDraft()}
+				>
+					Save initial draft
+				</Button>
+			</div>
+		</DrawerContent>
+	</Drawer>
+{/if}
 <Drawer bind:open={saveDrawerOpen} size="800px">
-	<DrawerContent title="Create an App" on:close={() => closeSaveDrawer()}>
+	<DrawerContent title="Deploy" on:close={() => closeSaveDrawer()}>
 		<Path
 			bind:error={pathError}
 			bind:path={newPath}
-			initialPath=""
+			initialPath={appPath}
 			namePlaceholder="app"
 			kind="app"
 		/>
 
+		<div class="py-4" />
+
+		<h3>Summary</h3>
+		<div class="w-full pt-2">
+			<input
+				type="text"
+				placeholder="App summary"
+				class="text-sm w-full font-semibold"
+				bind:value={$summary}
+			/>
+		</div>
+
 		<div slot="actions">
 			<Button
 				startIcon={{ icon: faSave }}
 				disabled={pathError != ''}
-				on:click={() => createApp(newPath)}
+				on:click={() => {
+					if (appPath == '') {
+						createApp(newPath)
+					} else {
+						updateApp(newPath)
+					}
+				}}
 			>
-				Create app
+				Deploy
 			</Button>
 		</div>
+		<div class="py-2" />
+		{#if appPath == ''}
+			<Alert title="Require saving" type="error">
+				Save this app once before you can publish it
+			</Alert>
+		{:else}
+			<Alert title="App executed on behalf of you">
+				A viewer of the app will execute the runnables of the app on behalf of the publisher (you).
+				<Tooltip>
+					This is to ensure that all resources/runnable available at time of creating the app would
+					prevent the good execution of the app. To guarantee tight security, a policy is computed
+					at time of deployment of the app which only allow the scripts/flows referred to in the app
+					to be called on behalf of, and the resources are passed by reference so that their actual
+					value is . Furthermore, static parameters are not overridable. Hence, users will only be
+					able to use the app as intended by the publisher without risk for leaking resources not
+					used in the app.
+				</Tooltip>
+			</Alert>
+			<div class="mt-4" />
+			<Toggle
+				options={{
+					left: `Require read-access`,
+					right: `Publish publicly for anyone knowing the secret url`
+				}}
+				checked={policy.execution_mode == 'anonymous'}
+				on:change={(e) => {
+					policy.execution_mode = e.detail
+						? Policy.execution_mode.ANONYMOUS
+						: Policy.execution_mode.PUBLISHER
+					setPublishState()
+				}}
+			/>
+
+			{#if policy.execution_mode == 'anonymous' && secretUrl}
+				{@const url = `${$page.url.hostname}/public/${$workspaceStore}/${secretUrl}`}
+				{@const href = $page.url.protocol + '//' + url}
+				<div class="my-6 box">
+					Public url:
+					<a
+						on:click={(e) => {
+							e.preventDefault()
+							copyToClipboard(href)
+						}}
+						{href}
+						class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+					>
+						{url}
+						<span class="text-gray-700 ml-2">
+							<Icon data={faClipboard} />
+						</span>
+					</a>
+				</div>
+
+				<Alert type="info" title="Only latest saved app is publicly available">
+					Once made public, you will still need to deploy the app to make visible the latest changes
+				</Alert>
+			{/if}
+		{/if}
 	</DrawerContent>
 </Drawer>
 
@@ -261,7 +448,13 @@ function onKeyDown(event) {
 </Drawer>
 
 <Drawer bind:open={jobsDrawerOpen} size="900px">
-	<DrawerContent noPadding title="Debug Runs" on:close={() => (jobsDrawerOpen = false)}>
+	<DrawerContent
+		noPadding
+		title="Debug Runs"
+		on:close={() => (jobsDrawerOpen = false)}
+		tooltip="Look at latests runs to spot potential bugs."
+		documentationLink="https://docs.windmill.dev/docs/apps/app_toolbar#debug-runs"
+	>
 		<Splitpanes class="!overflow-visible">
 			<Pane size={25}>
 				<PanelSection title="Past Runs">
@@ -281,7 +474,7 @@ function onKeyDown(event) {
 										on:click={() => (selectedJobId = job)}
 									>
 										<span class="text-xs truncate">{job}</span>
-										<Badge color="dark-indigo">{component}</Badge>
+										<Badge color="indigo">{component}</Badge>
 									</div>
 								{/each}
 							</div>
@@ -384,66 +577,6 @@ function onKeyDown(event) {
 	</DrawerContent>
 </Drawer>
 
-<Drawer bind:open={publishDrawerOpen} size="800px">
-	<DrawerContent title="Publish an App" on:close={() => (publishDrawerOpen = false)}>
-		{#if appPath == ''}
-			<Alert title="Require saving" type="error">
-				Save this app once before you can publish it
-			</Alert>
-		{:else}
-			<Alert title="App executed on behalf of publisher">
-				A viewer of the app will execute the runnables of the app on behalf of the publisher
-				avoiding the risk that a resource or script would not be available to the viewer. To
-				guarantee tight security, a policy is computed at time of saving of the app which only allow
-				the scripts/flows referred to in the app to be called on behalf of. Furthermore, static
-				parameters are not overridable. Hence, users will only be able to use the app as intended by
-				the publisher without risk for leaking resources not used in the app.
-			</Alert>
-			<div class="mt-4" />
-			<Toggle
-				options={{
-					left: `Require read-access`,
-					right: `Publish publicly for anyone knowing the secret url`
-				}}
-				checked={policy.execution_mode == 'anonymous'}
-				on:change={(e) => {
-					policy.execution_mode = e.detail
-						? Policy.execution_mode.ANONYMOUS
-						: Policy.execution_mode.PUBLISHER
-					setPublishState()
-				}}
-			/>
-
-			{#if policy.execution_mode == 'anonymous' && secretUrl}
-				{@const url = `${$page.url.hostname}/public/${$workspaceStore}/${secretUrl}`}
-				{@const href = $page.url.protocol + '//' + url}
-				<div class="my-6 box">
-					Public url:
-					<a
-						on:click={(e) => {
-							e.preventDefault()
-							copyToClipboard(href)
-						}}
-						{href}
-						class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
-					>
-						{url}
-						<span class="text-gray-700 ml-2">
-							<Icon data={faClipboard} />
-						</span>
-					</a>
-				</div>
-
-				<Alert type="info" title="Only show latest saved app">
-					Once made public, you will still need to save the app to make visible the latest changes
-				</Alert>
-			{/if}
-		{/if}
-
-		<div />
-	</DrawerContent>
-</Drawer>
-
 <div
 	class="border-b flex flex-row justify-between py-1 gap-2 gap-y-2 px-2 items-center overflow-y-visible"
 >
@@ -549,42 +682,27 @@ function onKeyDown(event) {
 			</Button>
 		</div>
 		<AppExportButton bind:this={appExport} />
-
 		<PreviewToggle loading={loading.save} />
-		{#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}
-			<Button
-				loading={loading.save}
-				startIcon={{ icon: faSave }}
-				on:click={save}
-				color="dark"
-				size="xs"
-				dropdownItems={[
-					{
-						label: 'Fork',
-						onClick: () => {
-							window.open(`/apps/add?template=${appPath}`)
+		<Button loading={loading.save} startIcon={{ icon: faSave }} on:click={saveDraft} size="xs">
+			Save draft&nbsp;<Kbd small>Ctrl</Kbd><Kbd small>S</Kbd>
+		</Button>
+		<Button
+			loading={loading.save}
+			startIcon={{ icon: faSave }}
+			on:click={save}
+			size="xs"
+			dropdownItems={appPath != ''
+				? () => [
+						{
+							label: 'Fork',
+							onClick: () => {
+								window.open(`/apps/add?template=${appPath}`)
+							}
 						}
-					},
-					{
-						label: 'Publish',
-						onClick: () => {
-							publishDrawerOpen = true
-						}
-					}
-				]}
-			>
-				Save
-			</Button>
-		{/if}
+				  ]
+				: undefined}
+		>
+			Deploy
+		</Button>
 	</div>
 </div>

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

@@ -1,7 +1,7 @@
 <script>import { Alert } from '../../common';
 import Toggle from '../../Toggle.svelte';
 import { getContext } from 'svelte';
-import { allItems } from '../utils';
+import { BG_PREFIX, allItems } from '../utils';
 import AppComponentInput from './AppComponentInput.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
 const { app } = getContext('AppViewerContext');
@@ -32,7 +32,7 @@ let resourceOnly = true;
 </div>
 
 {#if $app?.hiddenInlineScripts?.length > 0}
-	<div class="font-bold text-lg">Background script inputs</div>
+	<div class="font-bold text-lg">Background runnable inputs</div>
 	<div class="gap-4 flex flex-col pt-4">
 		{#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
 			<div class="border p-2">
@@ -46,7 +46,7 @@ let resourceOnly = true;
 					<span class="text-sm text-gray-600">No resource input</span>
 				{:else}
 					<InputsSpecsEditor
-						id={`bg_${index}`}
+						id={BG_PREFIX + index}
 						shouldCapitalize={false}
 						bind:inputSpecs={script.fields}
 						userInputEnabled={false}

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

@@ -12,6 +12,7 @@ import { columnConfiguration } from '../gridUtils';
 import { HiddenComponent } from '../components';
 import { deepEqual } from 'fast-equals';
 import { dfs } from './appUtils';
+import { BG_PREFIX, migrateApp } from '../utils';
 export let app;
 export let appPath;
 export let breakpoint;
@@ -22,6 +23,7 @@ export let isEditor;
 export let context;
 export let noBackend = false;
 export let isLocked = false;
+migrateApp(app);
 const appStore = writable(app);
 const selectedComponent = writable(undefined);
 const mode = writable('preview');
@@ -31,9 +33,18 @@ const connectingInput = writable({
     hoveredComponent: undefined
 });
 const allIdsInPath = writable([]);
+let ncontext = { ...context, workspace, mode: 'viewer' };
+function hashchange(e) {
+    ncontext.hash = e.newURL.split('#')[1];
+    ncontext = ncontext;
+}
+function resizeWindow() {
+    !isEditor && ($breakpoint = window.innerWidth < 769 ? 'sm' : 'lg');
+}
+resizeWindow();
 const parentWidth = writable(0);
 setContext('AppViewerContext', {
-    worldStore: buildWorld(context),
+    worldStore: buildWorld(ncontext),
     initialized: writable({ initialized: false, initializedComponents: [] }),
     app: appStore,
     summary: writable(summary),
@@ -59,11 +70,6 @@ setContext('AppViewerContext', {
     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;
@@ -71,11 +77,11 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
         .flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
         .filter((x) => x != undefined);
 }
-$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full min-w-[710px]';
+$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full min-w-[768px]';
 $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
 </script>
 
-<svelte:window on:hashchange={hashchange} />
+<svelte:window on:hashchange={hashchange} on:resize={resizeWindow} />
 
 <div id="app-editor-top-level-drawer" />
 
@@ -93,7 +99,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 				)}
 			>
 				<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"
+					class="w-full sticky top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
 				>
 					<h2 class="truncate">{summary}</h2>
 					<RecomputeAllComponents />
@@ -145,17 +151,9 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 </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}
-			/>
+	{#each app.hiddenInlineScripts as runnable, index}
+		{#if runnable}
+			<HiddenComponent id={BG_PREFIX + index} {runnable} />
 		{/if}
 	{/each}
 {/if}