windmill-components 1.493.9 → 1.501.4

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -1,12 +1,14 @@
-<script lang="ts">import { Alert, Drawer, DrawerContent, UndoRedo } from '../../common';
+<script lang="ts">import { createBubbler, stopPropagation } from 'svelte/legacy';
+const bubble = createBubbler();
+import { Alert, Drawer, DrawerContent, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import Path from '../../Path.svelte';
 import Toggle from '../../Toggle.svelte';
 import { AppService, DraftService } from '../../../gen';
 import { redo, undo } from '../../../history';
 import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
-import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, Save, Smartphone, FileClock, Sun, Moon, SunMoon, Zap } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, Save, Smartphone, FileClock, Sun, Moon, SunMoon, Zap, Globe, AlertTriangle } from 'lucide-svelte';
+import { createEventDispatcher, getContext, untrack } from 'svelte';
 import { cleanValueProperties, orderedJsonStringify, replaceFalseWithUndefined } from '../../../utils';
 import { BG_PREFIX, allItems, toStatic } from '../utils';
 import AppExportButton from './AppExportButton.svelte';
@@ -58,44 +60,29 @@ async function hash(message) {
         return hex;
     }
 }
-export let policy;
-export let fromHub = false;
-export let diffDrawer = undefined;
-export let savedApp = undefined;
-export let version = undefined;
-export let leftPanelHidden = false;
-export let rightPanelHidden = false;
-export let bottomPanelHidden = false;
-export let newApp;
-export let newPath = '';
-let newEditedPath = '';
-let deployedValue = undefined; // Value to diff against
-let deployedBy = undefined; // Author
-let confirmCallback = () => { }; // What happens when user clicks `override` in warning
-let open = false; // Is confirmation modal open
+let { policy = $bindable(), fromHub = false, diffDrawer = undefined, savedApp = $bindable(undefined), version = $bindable(undefined), leftPanelHidden = false, rightPanelHidden = false, bottomPanelHidden = false, newApp, newPath = '', unsavedConfirmationModal } = $props();
+let newEditedPath = $state('');
+let deployedValue = $state(undefined); // Value to diff against
+let deployedBy = $state(undefined); // Author
+let confirmCallback = $state(() => { }); // What happens when user clicks `override` in warning
+let open = $state(false); // Is confirmation modal open
 const { app, summary, breakpoint, appPath, jobs, jobsById, staticExporter, errorByComponent, openDebugRun, mode, darkMode } = getContext('AppViewerContext');
 const { history, jobsDrawerOpen, refreshComponents } = getContext('AppEditorContext');
-const loading = {
+const loading = $state({
     publish: false,
     save: false,
     saveDraft: false
-};
-$: if ($openDebugRun == undefined) {
-    $openDebugRun = (jobId) => {
-        $jobsDrawerOpen = true;
-        selectedJobId = jobId;
-    };
-}
-let selectedJobId = undefined;
-let pathError = undefined;
-let appExport;
-let draftDrawerOpen = false;
-let saveDrawerOpen = false;
-let inputsDrawerOpen = fromHub;
-let historyBrowserDrawerOpen = false;
-let debugAppDrawerOpen = false;
-let lazyDrawerOpen = false;
-let deploymentMsg = undefined;
+});
+let selectedJobId = $state(undefined);
+let pathError = $state(undefined);
+let appExport = $state();
+let draftDrawerOpen = $state(false);
+let saveDrawerOpen = $state(false);
+let inputsDrawerOpen = $state(fromHub);
+let historyBrowserDrawerOpen = $state(false);
+let debugAppDrawerOpen = $state(false);
+let lazyDrawerOpen = $state(false);
+let deploymentMsg = $state(undefined);
 function closeSaveDrawer() {
     saveDrawerOpen = false;
 }
@@ -263,7 +250,7 @@ async function createApp(path) {
         });
         savedApp = {
             summary: $summary,
-            value: structuredClone($app),
+            value: structuredClone($state.snapshot($app)),
             path: path,
             policy: policy,
             custom_path: customPath
@@ -352,7 +339,7 @@ async function updateApp(npath) {
     });
     savedApp = {
         summary: $summary,
-        value: structuredClone($app),
+        value: structuredClone($state.snapshot($app)),
         path: npath,
         policy,
         custom_path: customPath
@@ -374,8 +361,7 @@ async function updateApp(npath) {
         dispatch('savedNewAppPath', npath);
     }
 }
-let secretUrl = undefined;
-$: $appPath && $appPath != '' && secretUrl == undefined && getSecretUrl();
+let secretUrl = $state(undefined);
 async function getSecretUrl() {
     secretUrl = await AppService.getPublicSecretOfApp({
         workspace: $workspaceStore,
@@ -432,13 +418,13 @@ async function saveInitialDraft() {
         });
         savedApp = {
             summary: $summary,
-            value: structuredClone($app),
+            value: structuredClone($state.snapshot($app)),
             path: newEditedPath,
             policy,
             draft_only: true,
             draft: {
                 summary: $summary,
-                value: structuredClone($app),
+                value: structuredClone($state.snapshot($app)),
                 path: newEditedPath,
                 policy,
                 custom_path: customPath
@@ -518,7 +504,7 @@ async function saveDraft(forceSave = false) {
             ...(savedApp?.draft_only
                 ? {
                     summary: $summary,
-                    value: structuredClone($app),
+                    value: structuredClone($state.snapshot($app)),
                     path: savedApp.draft_only ? newEditedPath || path : path,
                     policy,
                     draft_only: true,
@@ -527,7 +513,7 @@ async function saveDraft(forceSave = false) {
                 : savedApp),
             draft: {
                 summary: $summary,
-                value: structuredClone($app),
+                value: structuredClone($state.snapshot($app)),
                 path: newEditedPath || path,
                 policy,
                 custom_path: customPath
@@ -550,7 +536,7 @@ async function saveDraft(forceSave = false) {
         throw e;
     }
 }
-let onLatest = true;
+let onLatest = $state(true);
 async function compareVersions() {
     if (version === undefined) {
         return;
@@ -567,8 +553,6 @@ async function compareVersions() {
         onLatest = true;
     }
 }
-$: saveDrawerOpen && compareVersions();
-$: hasErrors = Object.keys($errorByComponent).length > 0;
 let lock = false;
 function onKeyDown(event) {
     if (lock)
@@ -582,13 +566,19 @@ function onKeyDown(event) {
     switch (event.key) {
         case 'Z':
             if (event.ctrlKey || event.metaKey) {
-                $app = redo(history);
+                const napp = redo(history);
+                for (const key in napp) {
+                    $app[key] = napp[key];
+                }
                 event.preventDefault();
             }
             break;
         case 'z':
             if (event.ctrlKey || event.metaKey) {
-                $app = undo(history, $app);
+                const napp = undo(history, $app);
+                for (const key in napp) {
+                    $app[key] = napp[key];
+                }
                 event.preventDefault();
             }
             break;
@@ -619,9 +609,12 @@ function onKeyDown(event) {
     }
     lock = false;
 }
-let dirtyPath = false;
-let path = undefined;
-let moreItems = [
+let dirtyPath = $state(false);
+let path = $state(undefined);
+let secretUrlHref = $derived(secretUrl
+    ? `${window.location.origin}${base}/public/${$workspaceStore}/${secretUrl}`
+    : undefined);
+let moreItems = $derived([
     {
         displayName: 'Deployment history',
         icon: History,
@@ -634,9 +627,16 @@ let moreItems = [
         displayName: 'Export',
         icon: FileJson,
         action: () => {
-            appExport.open($app);
+            appExport?.open($app);
         }
     },
+    {
+        displayName: 'Public URL',
+        icon: Globe,
+        disabled: !secretUrlHref,
+        href: secretUrlHref,
+        hrefTarget: '_blank'
+    },
     // {
     // 	displayName: 'Publish to Hub',
     // 	icon: faGlobe,
@@ -645,13 +645,6 @@ let moreItems = [
     // 		window.open(url.toString(), '_blank')
     // 	}
     // },
-    {
-        displayName: 'Hub compatible JSON',
-        icon: FileUp,
-        action: () => {
-            appExport.open(toStatic($app, $staticExporter, $summary).app);
-        }
-    },
     {
         displayName: 'App inputs',
         icon: FormInput,
@@ -706,13 +699,20 @@ let moreItems = [
         action: () => {
             lazyDrawerOpen = true;
         }
+    },
+    {
+        displayName: 'Hub export',
+        icon: FileUp,
+        action: () => {
+            appExport?.open(toStatic($app, $staticExporter, $summary).app);
+        }
     }
-];
-let appEditorTutorial = undefined;
+]);
+let appEditorTutorial = $state(undefined);
 export function toggleTutorial() {
     appEditorTutorial?.toggleTutorial();
 }
-let appReportingDrawerOpen = false;
+let appReportingDrawerOpen = $state(false);
 export function openTroubleshootPanel() {
     debugAppDrawerOpen = true;
 }
@@ -731,10 +731,9 @@ function setTheme(newDarkMode) {
 }
 let priorDarkMode = document.documentElement.classList.contains('dark');
 setTheme($app?.darkMode);
-let customPath = savedApp?.custom_path;
-let dirtyCustomPath = false;
-let customPathError = '';
-$: fullCustomUrl = `${window.location.origin}${base}/a/${isCloudHosted() ? $workspaceStore + '/' : ''}${customPath}`;
+let customPath = $state(savedApp?.custom_path);
+let dirtyCustomPath = $state(false);
+let customPathError = $state('');
 async function appExists(customPath) {
     return await AppService.customPathExists({
         workspace: $workspaceStore,
@@ -760,19 +759,38 @@ async function validateCustomPath(customPath) {
         validateTimeout = undefined;
     }, 500);
 }
-$: customPath !== undefined && validateCustomPath(customPath);
+$effect(() => {
+    if ($openDebugRun == undefined) {
+        $openDebugRun = (jobId) => {
+            $jobsDrawerOpen = true;
+            selectedJobId = jobId;
+        };
+    }
+});
+$effect(() => {
+    $appPath && $appPath != '' && secretUrl == undefined && untrack(() => getSecretUrl());
+});
+$effect(() => {
+    saveDrawerOpen && untrack(() => compareVersions());
+});
+let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
+let fullCustomUrl = $derived(`${window.location.origin}${base}/a/${isCloudHosted() ? $workspaceStore + '/' : ''}${customPath}`);
+$effect(() => {
+    ;
+    [customPath];
+    untrack(() => customPath !== undefined && validateCustomPath(customPath));
+});
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
-{#if $$slots.unsavedConfirmationModal}
-	<slot
-		name="unsavedConfirmationModal"
-		{diffDrawer}
-		additionalExitAction={() => {
+{#if unsavedConfirmationModal}
+	{@render unsavedConfirmationModal?.({
+		diffDrawer,
+		additionalExitAction: () => {
 			setTheme(priorDarkMode)
-		}}
-		getInitialAndModifiedValues={() => ({
+		},
+		getInitialAndModifiedValues: () => ({
 			savedValue: savedApp,
 			modifiedValue: {
 				summary: $summary,
@@ -781,8 +799,8 @@ $: customPath !== undefined && validateCustomPath(customPath);
 				policy,
 				custom_path: customPath
 			}
-		})}
-	/>
+		})
+	})}
 {/if}
 <DeployOverrideConfirmationModal
 	bind:deployedBy
@@ -807,15 +825,15 @@ $: customPath !== undefined && validateCustomPath(customPath);
 			</Alert>
 			<h3>Summary</h3>
 			<div class="w-full pt-2">
-				<!-- svelte-ignore a11y-autofocus -->
+				<!-- svelte-ignore a11y_autofocus -->
 				<input
 					autofocus
 					type="text"
 					placeholder="App summary"
 					class="text-sm w-full font-semibold"
-					on:keydown|stopPropagation
+					onkeydown={stopPropagation(bubble('keydown'))}
 					bind:value={$summary}
-					on:keyup={() => {
+					onkeyup={() => {
 						if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
 							path?.setName(
 								$summary
@@ -841,15 +859,17 @@ $: customPath !== undefined && validateCustomPath(customPath);
 			/>
 			<div class="py-4"></div>
 
-			<div slot="actions">
-				<Button
-					startIcon={{ icon: Save }}
-					disabled={pathError != ''}
-					on:click={() => saveInitialDraft()}
-				>
-					Save initial draft
-				</Button>
-			</div>
+			{#snippet actions()}
+				<div>
+					<Button
+						startIcon={{ icon: Save }}
+						disabled={pathError != ''}
+						on:click={() => saveInitialDraft()}
+					>
+						Save initial draft
+					</Button>
+				</div>
+			{/snippet}
 		</DrawerContent>
 	</Drawer>
 {/if}
@@ -880,15 +900,15 @@ $: customPath !== undefined && validateCustomPath(customPath);
 		{/if}
 		<span class="text-secondary text-sm font-bold">Summary</span>
 		<div class="w-full pt-2">
-			<!-- svelte-ignore a11y-autofocus -->
+			<!-- svelte-ignore a11y_autofocus -->
 			<input
 				autofocus
 				type="text"
 				placeholder="App summary"
 				class="text-sm w-full"
 				bind:value={$summary}
-				on:keydown|stopPropagation
-				on:keyup={() => {
+				onkeydown={stopPropagation(bubble('keydown'))}
+				onkeyup={() => {
 					if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
 						path?.setName(
 							$summary
@@ -904,7 +924,7 @@ $: customPath !== undefined && validateCustomPath(customPath);
 		<div class="py-4"></div>
 		<span class="text-secondary text-sm font-bold">Deployment message</span>
 		<div class="w-full pt-2">
-			<!-- svelte-ignore a11y-autofocus -->
+			<!-- svelte-ignore a11y_autofocus -->
 			<input
 				type="text"
 				placeholder="Optional deployment message"
@@ -925,87 +945,84 @@ $: customPath !== undefined && validateCustomPath(customPath);
 			autofocus={false}
 		/>
 
-		<div slot="actions" class="flex flex-row gap-4">
-			<Button
-				variant="border"
-				color="light"
-				disabled={!savedApp || savedApp.draft_only}
-				on:click={async () => {
-					if (!savedApp) {
-						return
-					}
-					// deployedValue should be syncronized when we open Diff
-					await syncWithDeployed()
+		{#snippet actions()}
+			<div class="flex flex-row gap-4">
+				<Button
+					variant="border"
+					color="light"
+					disabled={!savedApp || savedApp.draft_only}
+					on:click={async () => {
+						if (!savedApp) {
+							return
+						}
+						// deployedValue should be syncronized when we open Diff
+						await syncWithDeployed()
 
-					saveDrawerOpen = false
-					diffDrawer?.openDrawer()
-					diffDrawer?.setDiff({
-						mode: 'normal',
-						deployed: deployedValue ?? savedApp,
-						draft: savedApp.draft,
-						current: {
-							summary: $summary,
-							value: $app,
-							path: newEditedPath || savedApp.draft?.path || savedApp.path,
-							policy,
-							custom_path: customPath
-						},
-						button: {
-							text: 'Looks good, deploy',
-							onClick: () => {
-								if ($appPath == '') {
-									createApp(newEditedPath)
-								} else {
-									handleUpdateApp(newEditedPath)
+						saveDrawerOpen = false
+						diffDrawer?.openDrawer()
+						diffDrawer?.setDiff({
+							mode: 'normal',
+							deployed: deployedValue ?? savedApp,
+							draft: savedApp.draft,
+							current: {
+								summary: $summary,
+								value: $app,
+								path: newEditedPath || savedApp.draft?.path || savedApp.path,
+								policy,
+								custom_path: customPath
+							},
+							button: {
+								text: 'Looks good, deploy',
+								onClick: () => {
+									if ($appPath == '') {
+										createApp(newEditedPath)
+									} else {
+										handleUpdateApp(newEditedPath)
+									}
 								}
 							}
+						})
+					}}
+				>
+					<div class="flex flex-row gap-2 items-center">
+						<DiffIcon size={14} />
+						Diff
+					</div>
+				</Button>
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' || customPathError != ''}
+					on:click={() => {
+						if ($appPath == '') {
+							createApp(newEditedPath)
+						} else {
+							handleUpdateApp(newEditedPath)
 						}
-					})
-				}}
-			>
-				<div class="flex flex-row gap-2 items-center">
-					<DiffIcon size={14} />
-					Diff
-				</div>
-			</Button>
-			<Button
-				startIcon={{ icon: Save }}
-				disabled={pathError != '' || customPathError != ''}
-				on:click={() => {
-					if ($appPath == '') {
-						createApp(newEditedPath)
-					} else {
-						handleUpdateApp(newEditedPath)
-					}
-				}}
-			>
-				Deploy
-			</Button>
-		</div>
+					}}
+				>
+					Deploy
+				</Button>
+			</div>
+		{/snippet}
 		<div class="py-2"></div>
-		{#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>
-					It ensures that all required resources/runnable visible for publisher but not for viewer
-					at time of creating the app would prevent the 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. 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>
+		<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>
+				It ensures that all required resources/runnable visible for publisher but not for viewer at
+				time of creating the app would prevent the 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. 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-10"></div>
+		<div class="mt-10"></div>
 
-			<h2>Public URL</h2>
-			<div class="mt-4"></div>
+		<h2>Public URL</h2>
 
-			<div class="flex gap-2 items-center">
+		<div class="my-6">
+			<div class="flex gap-2 items-center mb-2">
 				<Toggle
 					options={{
 						left: `Require login and read-access`,
@@ -1016,85 +1033,82 @@ $: customPath !== undefined && validateCustomPath(customPath);
 						policy.execution_mode = e.detail ? 'anonymous' : 'publisher'
 						setPublishState()
 					}}
+					disabled={$appPath == ''}
 				/>
 			</div>
+			{#if $appPath == ''}
+				<ClipboardPanel content={`Save this app once to get the public secret URL`} size="md" />
+			{:else if secretUrlHref}
+				<ClipboardPanel content={secretUrlHref} size="md" />
+			{:else}<Loader2 class="animate-spin" />
+			{/if}
+			<div class="text-xs text-secondary mt-1">
+				Share this url directly or embed it using an iframe (if requiring login, top-level domain of
+				embedding app must be the same as the one of Windmill)
+			</div>
 
-			<div class="my-6 box">
-				<div class="text-secondary">
-					<div>Public URL</div>
-				</div>
-				{#if secretUrl}
-					{@const href = `${window.location.origin}${base}/public/${$workspaceStore}/${secretUrl}`}
-					<ClipboardPanel content={href} size="md" />
-				{:else}<Loader2 class="animate-spin" />
+			<div class="mt-4">
+				{#if !($userStore?.is_admin || $userStore?.is_super_admin)}
+					<Alert type="warning" title="Admin only" size="xs">
+						Custom path can only be set by workspace admins
+					</Alert>
+					<div class="mb-2"></div>
 				{/if}
-				<div class="text-xs text-secondary mt-1">
-					Share this url directly or embed it using an iframe (if requiring login, top-level domain
-					of embedding app must be the same as the one of Windmill)
-				</div>
+				{#if !$enterpriseLicense}
+					<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap mb-2">
+						<AlertTriangle size={16} />
+						EE only <Tooltip>Enterprise Edition only feature</Tooltip>
+					</div>
+				{/if}
+				<Toggle
+					on:change={({ detail }) => {
+						customPath = detail ? '' : undefined
+						if (customPath === undefined) {
+							customPathError = ''
+						}
+					}}
+					checked={customPath !== undefined}
+					options={{
+						right: 'Use a custom URL'
+					}}
+					disabled={!$enterpriseLicense || !($userStore?.is_admin || $userStore?.is_super_admin)}
+				/>
 
-				<div class="mt-4">
-					{#if !$enterpriseLicense}
-						<Alert title="EE Only" type="warning" size="xs">
-							Custom path is an enterprise only feature.
-						</Alert>
-						<div class="mb-2"></div>
-					{:else if !($userStore?.is_admin || $userStore?.is_super_admin)}
-						<Alert type="warning" title="Admin only" size="xs">
-							Custom path can only be set by workspace admins
-						</Alert>
-						<div class="mb-2"></div>
-					{/if}
-					<Toggle
-						on:change={({ detail }) => {
-							customPath = detail ? '' : undefined
-							if (customPath === undefined) {
-								customPathError = ''
-							}
-						}}
-						checked={customPath !== undefined}
-						options={{
-							right: 'Use a custom URL'
+				{#if customPath !== undefined}
+					<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+						<div>Custom path</div>
+					</div>
+					<input
+						disabled={!($userStore?.is_admin || $userStore?.is_super_admin)}
+						type="text"
+						autocomplete="off"
+						bind:value={customPath}
+						class={customPathError === ''
+							? ''
+							: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+						oninput={() => {
+							dirtyCustomPath = true
 						}}
-						disabled={!$enterpriseLicense || !($userStore?.is_admin || $userStore?.is_super_admin)}
 					/>
+					<div class="text-secondary text-sm flex items-center gap-1 mt-2 w-full justify-between">
+						<div>Custom public URL</div>
+					</div>
+					<ClipboardPanel content={fullCustomUrl} size="md" />
 
-					{#if customPath !== undefined}
-						<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
-							<div>Custom path</div>
-						</div>
-						<input
-							disabled={!($userStore?.is_admin || $userStore?.is_super_admin)}
-							type="text"
-							autocomplete="off"
-							bind:value={customPath}
-							class={customPathError === ''
-								? ''
-								: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
-							on:input={() => {
-								dirtyCustomPath = true
-							}}
-						/>
-						<div class="text-secondary text-sm flex items-center gap-1 mt-2 w-full justify-between">
-							<div>Custom public URL</div>
-						</div>
-						<ClipboardPanel content={fullCustomUrl} size="md" />
-
-						<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5"
-							>{dirtyCustomPath ? customPathError : ''}
-						</div>
-					{/if}
-				</div>
+					<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5"
+						>{dirtyCustomPath ? customPathError : ''}
+					</div>
+				{/if}
 			</div>
-			<Alert type="info" title="Only latest deployed app is publicly available">
-				You will still need to deploy the app to make visible the latest changes
-			</Alert>
+		</div>
+		<Alert type="info" title="Only latest deployed app is publicly available">
+			You will still need to deploy the app to make visible the latest changes
+		</Alert>
 
-			<a
-				href="https://www.windmill.dev/docs/advanced/external_auth_with_jwt#embed-public-apps-using-your-own-authentification"
-				class="mt-4 text-2xs">Embed this app in your own product to be used by your own users</a
-			>
-		{/if}
+		<a
+			href="https://www.windmill.dev/docs/advanced/external_auth_with_jwt#embed-public-apps-using-your-own-authentification"
+			class="mt-4 text-2xs">Embed this app in your own product to be used by your own users</a
+		>
 	</DrawerContent>
 </Drawer>
 
@@ -1134,10 +1148,16 @@ $: customPath !== undefined && validateCustomPath(customPath);
 				undoProps={{ disabled: $history?.index === 0 }}
 				redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
 				on:undo={() => {
-					$app = undo(history, $app)
+					const napp = undo(history, $app)
+					for (const key in napp) {
+						$app[key] = napp[key]
+					}
 				}}
 				on:redo={() => {
-					$app = redo(history)
+					const napp = redo(history)
+					for (const key in napp) {
+						$app[key] = napp[key]
+					}
 				}}
 			/>
 
@@ -1148,22 +1168,23 @@ $: customPath !== undefined && validateCustomPath(customPath);
 					on:selected={({ detail }) => {
 						$app.fullscreen = detail === 'true'
 					}}
-					let:item
 				>
-					<ToggleButton
-						icon={AlignHorizontalSpaceAround}
-						value={'false'}
-						tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
-						iconProps={{ size: 16 }}
-						{item}
-					/>
-					<ToggleButton
-						tooltip="The width is of the app if the full width of its container"
-						icon={Expand}
-						value={'true'}
-						iconProps={{ size: 16 }}
-						{item}
-					/>
+					{#snippet children({ item })}
+						<ToggleButton
+							icon={AlignHorizontalSpaceAround}
+							value={'false'}
+							tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+						<ToggleButton
+							tooltip="The width is of the app if the full width of its container"
+							icon={Expand}
+							value={'true'}
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+					{/snippet}
 				</ToggleButtonGroup>
 			{/if}
 			{#if $app}
@@ -1174,60 +1195,63 @@ $: customPath !== undefined && validateCustomPath(customPath);
 						setTheme(theme)
 					}}
 					selected={$app.darkMode === undefined ? 'auto' : $app.darkMode ? 'dark' : 'sun'}
-					let:item
 				>
-					<ToggleButton
-						icon={SunMoon}
-						value={'auto'}
-						tooltip="The app mode between dark/light is automatic"
-						iconProps={{ size: 16 }}
-						{item}
-					/>
-					<ToggleButton
-						icon={Sun}
-						value={'sun'}
-						tooltip="Force light mode"
-						iconProps={{ size: 16 }}
-						{item}
-					/>
-					<ToggleButton
-						tooltip="Force dark mode"
-						icon={Moon}
-						value={'dark'}
-						iconProps={{ size: 16 }}
-						{item}
-					/>
+					{#snippet children({ item })}
+						<ToggleButton
+							icon={SunMoon}
+							value={'auto'}
+							tooltip="The app mode between dark/light is automatic"
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+						<ToggleButton
+							icon={Sun}
+							value={'sun'}
+							tooltip="Force light mode"
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+						<ToggleButton
+							tooltip="Force dark mode"
+							icon={Moon}
+							value={'dark'}
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+					{/snippet}
 				</ToggleButtonGroup>
 			{/if}
 			<div class="flex flex-row gap-2">
-				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint} let:item>
-					<ToggleButton
-						tooltip="Computer View"
-						icon={Laptop2}
-						value={'lg'}
-						iconProps={{ size: 16 }}
-						{item}
-					/>
-					<ToggleButton
-						tooltip="Mobile View"
-						icon={Smartphone}
-						value={'sm'}
-						iconProps={{ size: 16 }}
-						{item}
-					/>
-					{#if $breakpoint === 'sm'}
-						<Toggle
-							size="xs"
-							options={{
-								right: 'Enable mobile view for smaller screens',
-								rightTooltip:
-									'Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view'
-							}}
-							textClass="text-2xs whitespace-nowrap white !w-full"
-							bind:checked={$app.mobileViewOnSmallerScreens}
-							class="flex flex-row px-2 items-center"
+				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
+					{#snippet children({ item })}
+						<ToggleButton
+							tooltip="Computer View"
+							icon={Laptop2}
+							value={'lg'}
+							iconProps={{ size: 16 }}
+							{item}
 						/>
-					{/if}
+						<ToggleButton
+							tooltip="Mobile View"
+							icon={Smartphone}
+							value={'sm'}
+							iconProps={{ size: 16 }}
+							{item}
+						/>
+						{#if $breakpoint === 'sm'}
+							<Toggle
+								size="xs"
+								options={{
+									right: 'Enable mobile view for smaller screens',
+									rightTooltip:
+										'Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view'
+								}}
+								textClass="text-2xs whitespace-nowrap white !w-full"
+								bind:checked={$app.mobileViewOnSmallerScreens}
+								class="flex flex-row px-2 items-center"
+							/>
+						{/if}
+					{/snippet}
 				</ToggleButtonGroup>
 			</div>
 		</div>