windmill-components 1.430.5 → 1.433.0

package/package/components/apps/components/buttons/AppSchemaForm.svelte

@@ -118,7 +118,7 @@ function computeS3ForceViewerPolicies() {
 					bind:this={schemaForm}
 					displayType={Boolean(resolvedConfig.displayType)}
 					largeGap={Boolean(resolvedConfig.largeGap)}
-					appPath={defaultIfEmptyString(appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)}
+					appPath={defaultIfEmptyString($appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)}
 					{computeS3ForceViewerPolicies}
 					{workspace}
 					{css}

package/package/components/apps/components/display/AppNavbarItem.svelte

@@ -44,7 +44,7 @@ function initSelection() {
 }
 $: !initialized && resolvedPath && initSelection();
 function getButtonProps(resolvedPath) {
-    if (appPath && resolvedPath?.includes(appPath)) {
+    if ($appPath && resolvedPath?.includes($appPath)) {
         return {
             onClick: () => {
                 output.result.set({ currentPath: resolvedPath ?? '' });

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -300,7 +300,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
             }
             const uuid = await AppService.executeComponent({
                 workspace,
-                path: defaultIfEmptyString(appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`),
+                path: defaultIfEmptyString($appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`),
                 requestBody
             });
             if (isEditor) {
@@ -617,7 +617,7 @@ function computeS3ForceViewerPolicies() {
 			<div class="px-2 h-fit min-h-0">
 				<LightweightSchemaForm
 					schema={schemaStripped}
-					appPath={defaultIfEmptyString(appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)}
+					appPath={defaultIfEmptyString($appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)}
 					{computeS3ForceViewerPolicies}
 					{workspace}
 					bind:this={schemaForm}

package/package/components/apps/components/inputs/AppS3FileInput.svelte

@@ -126,7 +126,7 @@ function computeForceViewerPolicies() {
 			outputs.result.set(value)
 		}}
 		{forceDisplayUploads}
-		appPath={defaultIfEmptyString(appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)}
+		appPath={defaultIfEmptyString($appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)}
 		{computeForceViewerPolicies}
 	/>
 {/if}

package/package/components/apps/editor/AppEditor.svelte

@@ -14,7 +14,6 @@ import { classNames, encodeState, getModifierKey, sendUserToast } from '../../..
 import AppPreview from './AppPreview.svelte';
 import ComponentList from './componentsPanel/ComponentList.svelte';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
-import { page } from '$app/stores';
 import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
 import { VariableService } from '../../../gen';
@@ -31,7 +30,6 @@ import DarkModeObserver from '../../DarkModeObserver.svelte';
 import { getTheme } from './componentsPanel/themeUtils';
 import StylePanel from './settingsPanel/StylePanel.svelte';
 import RunnableJobPanel from './RunnableJobPanel.svelte';
-import { goto, replaceState } from '$app/navigation';
 import HideButton from './settingsPanel/HideButton.svelte';
 import AppEditorBottomPanel from './AppEditorBottomPanel.svelte';
 import panzoom from 'panzoom';
@@ -43,6 +41,10 @@ export let fromHub = false;
 export let diffDrawer = undefined;
 export let savedApp = undefined;
 export let version = undefined;
+export let newApp = false;
+export let newPath = undefined;
+export let replaceStateFn = (path) => window.history.replaceState(null, '', path);
+export let gotoFn = (path, opt) => window.history.pushState(null, '', path);
 migrateApp(app);
 const appStore = writable(app);
 const selectedComponent = writable(undefined);
@@ -69,8 +71,8 @@ let context = {
     email: $userStore?.email,
     groups: $userStore?.groups,
     username: $userStore?.username,
-    query: Object.fromEntries($page.url.searchParams.entries()),
-    hash: $page.url.hash.substring(1),
+    query: Object.fromEntries(new URL(window.location.href).searchParams.entries()),
+    hash: window.location.hash.substring(1),
     workspace: $workspaceStore,
     mode: 'editor',
     summary: $summaryStore,
@@ -83,6 +85,11 @@ const initialized = writable({ initialized: false, initializedComponents: [] });
 const panzoomActive = writable(false);
 $secondaryMenuRightStore.isOpen = false;
 $secondaryMenuLeftStore.isOpen = false;
+let writablePath = writable(path);
+$: path && onPathChange();
+function onPathChange() {
+    writablePath.set(path);
+}
 setContext('AppViewerContext', {
     worldStore,
     app: appStore,
@@ -94,7 +101,7 @@ setContext('AppViewerContext', {
     bgRuns: writable([]),
     breakpoint,
     runnableComponents: writable({}),
-    appPath: path,
+    appPath: writablePath,
     workspace: $workspaceStore ?? '',
     onchange: () => saveFrontendDraft(),
     isEditor: true,
@@ -115,7 +122,7 @@ setContext('AppViewerContext', {
     cssEditorOpen,
     previewTheme,
     debuggingComponents: writable({}),
-    replaceStateFn: (path) => replaceState(path, $page.state),
+    replaceStateFn: replaceStateFn,
     policy: policy,
     recomputeAllContext: writable({
         loading: false,
@@ -653,6 +660,8 @@ $: forceDeactivatePanzoom = isModifierKeyPressed && handMode;
 {#if !$userStore?.operator}
 	{#if $appStore}
 		<AppEditorHeader
+			{newPath}
+			{newApp}
 			on:restore
 			{policy}
 			{fromHub}
@@ -663,6 +672,7 @@ $: forceDeactivatePanzoom = isModifierKeyPressed && handMode;
 			leftPanelHidden={leftPanelSize === 0}
 			rightPanelHidden={rightPanelSize === 0}
 			bottomPanelHidden={runnablePanelSize === 0}
+			on:savedNewAppPath
 			on:showLeftPanel={() => showLeftPanel()}
 			on:showRightPanel={() => showRightPanel()}
 			on:hideLeftPanel={() => hideLeftPanel()}
@@ -690,8 +700,8 @@ $: forceDeactivatePanzoom = isModifierKeyPressed && handMode;
 						isEditor
 						{context}
 						noBackend={false}
-						replaceStateFn={(path) => replaceState(path, $page.state)}
-						gotoFn={(path, opt) => goto(path, opt)}
+						{replaceStateFn}
+						{gotoFn}
 					/>
 				</div>
 			</SplitPanesWrapper>

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

@@ -19,10 +19,15 @@ declare const __propDef: {
             draft_only?: boolean | undefined;
         } | undefined;
         version?: number | undefined;
+        newApp?: boolean | undefined;
+        newPath?: string | undefined;
+        replaceStateFn?: ((path: string) => void) | undefined;
+        gotoFn?: ((path: string, opt?: Record<string, any> | undefined) => void) | undefined;
         triggerTutorial?: (() => void) | undefined;
     };
     events: {
         restore: CustomEvent<any>;
+        savedNewAppPath: CustomEvent<any>;
         pointerdown: PointerEvent;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -1,6 +1,4 @@
-<script>import { goto } from '../../../navigation';
-import { page } from '$app/stores';
-import { Alert, Badge, Drawer, DrawerContent, Tab, Tabs, UndoRedo } from '../../common';
+<script>import { Alert, Badge, Drawer, DrawerContent, Tab, Tabs, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import DisplayResult from '../../DisplayResult.svelte';
 import FlowProgressBar from '../../flows/FlowProgressBar.svelte';
@@ -75,6 +73,9 @@ 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
@@ -92,7 +93,6 @@ $: if ($openDebugRun == undefined) {
         selectedJobId = jobId;
     };
 }
-let newPath = '';
 let pathError = undefined;
 let appExport;
 let draftDrawerOpen = false;
@@ -157,7 +157,6 @@ async function computeTriggerables() {
                         input: getCountInput(resourceValue, tableValue, dbType, columnDefs, whereClause),
                         id: x.id + '_count'
                     });
-                    console.log(x.id, getCountInput(resourceValue, tableValue, dbType, columnDefs, whereClause), columnDefs);
                     r.push({
                         input: getInsertInput(tableValue, columnDefs, resourceValue, dbType),
                         id: x.id + '_insert'
@@ -254,7 +253,7 @@ async function processRunnable(id, runnable, fields) {
 async function createApp(path) {
     await computeTriggerables();
     try {
-        const appId = await AppService.createApp({
+        await AppService.createApp({
             workspace: $workspaceStore,
             requestBody: {
                 value: $app,
@@ -278,7 +277,7 @@ async function createApp(path) {
         catch (e) {
             console.error('error interacting with local storage', e);
         }
-        goto(`/apps/edit/${appId}`);
+        dispatch('savedNewAppPath', path);
     }
     catch (e) {
         sendUserToast('Error creating app', e);
@@ -303,7 +302,7 @@ async function handleUpdateApp(npath) {
                 orderedJsonStringify(replaceFalseWithUndefined({
                     summary: $summary,
                     value: $app,
-                    path: newPath || savedApp.draft?.path || savedApp.path,
+                    path: newEditedPath || savedApp.draft?.path || savedApp.path,
                     policy
                 }))) {
             await updateApp(npath);
@@ -321,7 +320,7 @@ async function handleUpdateApp(npath) {
 async function syncWithDeployed() {
     const deployedApp = await AppService.getAppByPath({
         workspace: $workspaceStore,
-        path: appPath,
+        path: $appPath,
         withStarredInfo: true
     });
     deployedBy = deployedApp.created_by;
@@ -339,7 +338,7 @@ async function updateApp(npath) {
     await computeTriggerables();
     await AppService.updateApp({
         workspace: $workspaceStore,
-        path: appPath,
+        path: $appPath,
         requestBody: {
             value: $app,
             summary: $summary,
@@ -361,29 +360,29 @@ async function updateApp(npath) {
     version = appHistory[0]?.version;
     closeSaveDrawer();
     sendUserToast('App deployed successfully');
-    if (appPath !== npath) {
+    if ($appPath !== npath) {
         try {
             localStorage.removeItem(`app-${appPath}`);
         }
         catch (e) {
             console.error('error interacting with local storage', e);
         }
-        window.location.pathname = `/apps/edit/${npath}?nodraft=true`;
+        dispatch('savedNewAppPath', npath);
     }
 }
 let secretUrl = undefined;
-$: appPath != '' && secretUrl == undefined && getSecretUrl();
+$: $appPath && $appPath != '' && secretUrl == undefined && getSecretUrl();
 async function getSecretUrl() {
     secretUrl = await AppService.getPublicSecretOfApp({
         workspace: $workspaceStore,
-        path: appPath
+        path: $appPath
     });
 }
 async function setPublishState() {
     await computeTriggerables();
     await AppService.updateApp({
         workspace: $workspaceStore,
-        path: appPath,
+        path: $appPath,
         requestBody: { policy }
     });
     if (policy.execution_mode == 'anonymous') {
@@ -406,7 +405,7 @@ async function saveInitialDraft() {
             workspace: $workspaceStore,
             requestBody: {
                 value: $app,
-                path: newPath,
+                path: newEditedPath,
                 summary: $summary,
                 policy,
                 draft_only: true
@@ -415,11 +414,11 @@ async function saveInitialDraft() {
         await DraftService.createDraft({
             workspace: $workspaceStore,
             requestBody: {
-                path: newPath,
+                path: newEditedPath,
                 typ: 'app',
                 value: {
                     value: $app,
-                    path: newPath,
+                    path: newEditedPath,
                     summary: $summary,
                     policy
                 }
@@ -428,18 +427,18 @@ async function saveInitialDraft() {
         savedApp = {
             summary: $summary,
             value: structuredClone($app),
-            path: newPath,
+            path: newEditedPath,
             policy,
             draft_only: true,
             draft: {
                 summary: $summary,
                 value: structuredClone($app),
-                path: newPath,
+                path: newEditedPath,
                 policy
             }
         };
         draftDrawerOpen = false;
-        goto(`/apps/edit/${newPath}`);
+        dispatch('savedNewAppPath', newEditedPath);
     }
     catch (e) {
         sendUserToast('Error saving initial draft', e);
@@ -447,7 +446,7 @@ async function saveInitialDraft() {
     draftDrawerOpen = false;
 }
 async function saveDraft(forceSave = false) {
-    if ($page.params.path == undefined) {
+    if (newApp) {
         // initial draft
         draftDrawerOpen = true;
         return;
@@ -459,7 +458,7 @@ async function saveDraft(forceSave = false) {
     const current = cleanValueProperties({
         summary: $summary,
         value: $app,
-        path: newPath || savedApp.draft?.path || savedApp.path,
+        path: newEditedPath || savedApp.draft?.path || savedApp.path,
         policy
     });
     if (!forceSave && orderedJsonStringify(draftOrDeployed) === orderedJsonStringify(current)) {
@@ -476,7 +475,7 @@ async function saveDraft(forceSave = false) {
     loading.saveDraft = true;
     try {
         await computeTriggerables();
-        let path = $page.params.path;
+        let path = $appPath;
         if (savedApp.draft_only) {
             await AppService.deleteApp({
                 workspace: $workspaceStore,
@@ -488,7 +487,7 @@ async function saveDraft(forceSave = false) {
                     value: $app,
                     summary: $summary,
                     policy,
-                    path: newPath || path,
+                    path: newEditedPath || path,
                     draft_only: true
                 }
             });
@@ -496,13 +495,13 @@ async function saveDraft(forceSave = false) {
         await DraftService.createDraft({
             workspace: $workspaceStore,
             requestBody: {
-                path: savedApp.draft_only ? newPath || path : path,
+                path: savedApp.draft_only ? newEditedPath || path : path,
                 typ: 'app',
                 value: {
                     value: $app,
                     summary: $summary,
                     policy,
-                    path: newPath || path
+                    path: newEditedPath || path
                 }
             }
         });
@@ -511,14 +510,15 @@ async function saveDraft(forceSave = false) {
                 ? {
                     summary: $summary,
                     value: structuredClone($app),
-                    path: savedApp.draft_only ? newPath || path : path,
-                    policy
+                    path: savedApp.draft_only ? newEditedPath || path : path,
+                    policy,
+                    draft_only: true
                 }
                 : savedApp),
             draft: {
                 summary: $summary,
                 value: structuredClone($app),
-                path: newPath || path,
+                path: newEditedPath || path,
                 policy
             }
         };
@@ -530,8 +530,8 @@ async function saveDraft(forceSave = false) {
             console.error('error interacting with local storage', e);
         }
         loading.saveDraft = false;
-        if (newPath || path !== path) {
-            goto(`/apps/edit/${newPath || path}`);
+        if (newApp || savedApp.draft_only) {
+            dispatch('savedNewAppPath', newEditedPath || path);
         }
     }
     catch (e) {
@@ -547,9 +547,9 @@ async function compareVersions() {
     try {
         const appVersion = await AppService.getAppLatestVersion({
             workspace: $workspaceStore,
-            path: appPath
+            path: $appPath
         });
-        onLatest = version === appVersion?.version;
+        onLatest = appVersion?.version === undefined || version === appVersion?.version;
     }
     catch (e) {
         console.error('Error comparing versions', e);
@@ -681,7 +681,7 @@ let moreItems = [
                 current: {
                     summary: $summary,
                     value: $app,
-                    path: newPath || savedApp.draft?.path || savedApp.path,
+                    path: newEditedPath || savedApp.draft?.path || savedApp.path,
                     policy
                 }
             });
@@ -732,7 +732,7 @@ setTheme($app?.darkMode);
 	modifiedValue={{
 		summary: $summary,
 		value: $app,
-		path: newPath || savedApp?.draft?.path || savedApp?.path,
+		path: newEditedPath || savedApp?.draft?.path || savedApp?.path,
 		policy
 	}}
 	additionalExitAction={() => {
@@ -749,12 +749,12 @@ setTheme($app?.darkMode);
 	currentValue={{
 		summary: $summary,
 		value: $app,
-		path: newPath || savedApp?.draft?.path || savedApp?.path,
+		path: newEditedPath || savedApp?.draft?.path || savedApp?.path,
 		policy
 	}}
 />
 
-{#if appPath == ''}
+{#if $appPath == ''}
 	<Drawer bind:open={draftDrawerOpen} size="800px">
 		<DrawerContent title="Initial draft save" on:close={() => closeDraftDrawer()}>
 			<Alert title="Require path" type="info">
@@ -771,7 +771,7 @@ setTheme($app?.darkMode);
 					on:keydown|stopPropagation
 					bind:value={$summary}
 					on:keyup={() => {
-						if (appPath == '' && $summary?.length > 0 && !dirtyPath) {
+						if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
 							path?.setName(
 								$summary
 									.toLowerCase()
@@ -788,7 +788,7 @@ setTheme($app?.darkMode);
 				autofocus={false}
 				bind:this={path}
 				bind:error={pathError}
-				bind:path={newPath}
+				bind:path={newEditedPath}
 				bind:dirty={dirtyPath}
 				initialPath=""
 				namePlaceholder="app"
@@ -827,7 +827,7 @@ setTheme($app?.darkMode);
 				bind:value={$summary}
 				on:keydown|stopPropagation
 				on:keyup={() => {
-					if (appPath == '' && $summary?.length > 0 && !dirtyPath) {
+					if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
 						path?.setName(
 							$summary
 								.toLowerCase()
@@ -856,8 +856,8 @@ setTheme($app?.darkMode);
 			bind:this={path}
 			bind:dirty={dirtyPath}
 			bind:error={pathError}
-			bind:path={newPath}
-			initialPath={appPath}
+			bind:path={newEditedPath}
+			initialPath={newPath}
 			namePlaceholder="app"
 			kind="app"
 			autofocus={false}
@@ -884,16 +884,16 @@ setTheme($app?.darkMode);
 						current: {
 							summary: $summary,
 							value: $app,
-							path: newPath || savedApp.draft?.path || savedApp.path,
+							path: newEditedPath || savedApp.draft?.path || savedApp.path,
 							policy
 						},
 						button: {
 							text: 'Looks good, deploy',
 							onClick: () => {
-								if (appPath == '') {
-									createApp(newPath)
+								if ($appPath == '') {
+									createApp(newEditedPath)
 								} else {
-									handleUpdateApp(newPath)
+									handleUpdateApp(newEditedPath)
 								}
 							}
 						}
@@ -909,10 +909,10 @@ setTheme($app?.darkMode);
 				startIcon={{ icon: Save }}
 				disabled={pathError != ''}
 				on:click={() => {
-					if (appPath == '') {
-						createApp(newPath)
+					if ($appPath == '') {
+						createApp(newEditedPath)
 					} else {
-						handleUpdateApp(newPath)
+						handleUpdateApp(newEditedPath)
 					}
 				}}
 			>
@@ -920,7 +920,7 @@ setTheme($app?.darkMode);
 			</Button>
 		</div>
 		<div class="py-2" />
-		{#if appPath == ''}
+		{#if $appPath == ''}
 			<Alert title="Require saving" type="error">
 				Save this app once before you can publish it
 			</Alert>
@@ -959,8 +959,8 @@ setTheme($app?.darkMode);
 			<div class="my-6 box">
 				Public url:
 				{#if secretUrl}
-					{@const url = `${$page.url.hostname}/public/${$workspaceStore}/${secretUrl}`}
-					{@const href = $page.url.protocol + '//' + url}
+					{@const url = `${window.location.hostname}/public/${$workspaceStore}/${secretUrl}`}
+					{@const href = window.location.protocol + '//' + url}
 					<a
 						on:click={(e) => {
 							e.preventDefault()
@@ -1001,7 +1001,7 @@ setTheme($app?.darkMode);
 
 <Drawer bind:open={historyBrowserDrawerOpen} size="1200px">
 	<DrawerContent title="Deployment History" on:close={() => (historyBrowserDrawerOpen = false)}>
-		<DeploymentHistory on:restore {appPath} />
+		<DeploymentHistory on:restore appPath={$appPath} />
 	</DrawerContent>
 </Drawer>
 
@@ -1257,7 +1257,7 @@ setTheme($app?.darkMode);
 	</DrawerContent>
 </Drawer>
 
-<AppReportsDrawer bind:open={appReportingDrawerOpen} {appPath} />
+<AppReportsDrawer bind:open={appReportingDrawerOpen} appPath={$appPath ?? ''} />
 
 <div
 	class="border-b flex flex-row justify-between py-1 gap-2 gap-y-2 px-2 items-center overflow-y-visible overflow-x-auto"
@@ -1385,7 +1385,7 @@ setTheme($app?.darkMode);
 			/>
 		</div>
 	{/if}
-	{#if $enterpriseLicense && appPath != ''}
+	{#if $enterpriseLicense && $appPath != ''}
 		<Awareness />
 	{/if}
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
@@ -1465,7 +1465,7 @@ setTheme($app?.darkMode);
 			startIcon={{ icon: Save }}
 			on:click={() => saveDraft()}
 			size="xs"
-			disabled={$page.params.path !== undefined && !savedApp}
+			disabled={!newApp && !savedApp}
 			shortCut={{ key: 'S' }}
 		>
 			Draft
@@ -1475,7 +1475,7 @@ setTheme($app?.darkMode);
 			startIcon={{ icon: Save }}
 			on:click={save}
 			size="xs"
-			dropdownItems={appPath != ''
+			dropdownItems={$appPath != ''
 				? () => [
 						{
 							label: 'Fork',

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

@@ -19,6 +19,8 @@ declare const __propDef: {
         leftPanelHidden?: boolean | undefined;
         rightPanelHidden?: boolean | undefined;
         bottomPanelHidden?: boolean | undefined;
+        newApp: boolean;
+        newPath?: string | undefined;
         toggleTutorial?: (() => void) | undefined;
         openTroubleshootPanel?: (() => void) | undefined;
     };

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

@@ -86,6 +86,11 @@ function hashchange(e) {
         return x;
     });
 }
+let writablePath = writable(appPath);
+$: appPath && onPathChange();
+function onPathChange() {
+    writablePath.set(appPath);
+}
 setContext('AppViewerContext', {
     worldStore: worldStore,
     initialized: writable({ initialized: false, initializedComponents: [] }),
@@ -97,7 +102,7 @@ setContext('AppViewerContext', {
     connectingInput,
     breakpoint,
     runnableComponents: writable({}),
-    appPath,
+    appPath: writablePath,
     workspace,
     onchange: undefined,
     isEditor,