fix(frontend): improve loading of big args in job details

frontend/src/lib/components/RunForm.svelte

@@ -16,7 +16,7 @@
 	import { Badge, Button } from './common'
 	import SharedBadge from './SharedBadge.svelte'
 	import Toggle from './Toggle.svelte'
-	import { userStore } from '$lib/stores'
+	import { runFormStore, userStore } from '$lib/stores'
 	import Tooltip from './Tooltip.svelte'
 	import CliHelpBox from './CliHelpBox.svelte'
 	import InlineCodeCopy from './InlineCodeCopy.svelte'
@@ -51,7 +51,12 @@
 	export let viewCliRun = false
 	export let isFlow: boolean
 
-	export let args: Record<string, any> = decodeArgs($page.url.searchParams.get('args') ?? undefined)
+	export let args: Record<string, any> = {}
+
+	if ($runFormStore) {
+		args = $runFormStore
+		$runFormStore = undefined
+	}
 
 	export function run() {
 		runAction(scheduledForStr, args, invisible_to_owner)

frontend/src/lib/stores.ts

@@ -1,100 +1,99 @@
-import { browser } from "$app/environment";
-import { derived, type Readable, writable } from "svelte/store";
-import type { UserWorkspaceList } from "$lib/gen/models/UserWorkspaceList.js";
-import { getUserExt } from "./user";
-import { WorkspaceService, type TokenResponse } from "./gen";
-import { isCloudHosted } from "./utils";
+import { browser } from '$app/environment'
+import { derived, type Readable, writable } from 'svelte/store'
+import type { UserWorkspaceList } from '$lib/gen/models/UserWorkspaceList.js'
+import { getUserExt } from './user'
+import { WorkspaceService, type TokenResponse } from './gen'
+import { isCloudHosted } from './utils'
 
 export interface UserExt {
-  email: string;
-  username: string;
-  is_admin: boolean;
-  is_super_admin: boolean;
-  operator: boolean;
-  created_at: string;
-  groups: string[];
-  pgroups: string[];
-  folders: string[]
+	email: string
+	username: string
+	is_admin: boolean
+	is_super_admin: boolean
+	operator: boolean
+	created_at: string
+	groups: string[]
+	pgroups: string[]
+	folders: string[]
 }
 
-let persistedWorkspace = browser && localStorage.getItem("workspace");
+let persistedWorkspace = browser && localStorage.getItem('workspace')
 
-export const usageStore = writable<number>(0);
-export const oauthStore = writable<TokenResponse | undefined>(undefined);
-export const userStore = writable<UserExt | undefined>(undefined);
+export const usageStore = writable<number>(0)
+export const runFormStore = writable<any>()
+export const oauthStore = writable<TokenResponse | undefined>(undefined)
+export const userStore = writable<UserExt | undefined>(undefined)
 export const workspaceStore = writable<string | undefined>(
-  persistedWorkspace ? String(persistedWorkspace) : undefined,
-);
-export const premiumStore = writable<{ premium: boolean, usage?: number }>({ premium: false });
-export const starStore = writable(1);
-export const usersWorkspaceStore = writable<UserWorkspaceList | undefined>(
-  undefined,
-);
-export const superadmin = writable<String | false | undefined>(undefined);
+	persistedWorkspace ? String(persistedWorkspace) : undefined
+)
+export const premiumStore = writable<{ premium: boolean; usage?: number }>({ premium: false })
+export const starStore = writable(1)
+export const usersWorkspaceStore = writable<UserWorkspaceList | undefined>(undefined)
+export const superadmin = writable<String | false | undefined>(undefined)
 export const userWorkspaces: Readable<
-  Array<{
-    id: string;
-    name: string;
-    username: string;
-  }>
-> = derived(
-  [usersWorkspaceStore, superadmin],
-  ([store, superadmin]) => {
-    const originalWorkspaces = (store?.workspaces ?? []);
-    if (superadmin) {
-      return [...originalWorkspaces.filter((x) => x.id != 'starter' && x.id != 'admins'), {
-        id: "admins",
-        name: "Admins",
-        username: "superadmin",
-      }];
-    } else {
-      return originalWorkspaces;
-    }
-  },
-);
+	Array<{
+		id: string
+		name: string
+		username: string
+	}>
+> = derived([usersWorkspaceStore, superadmin], ([store, superadmin]) => {
+	const originalWorkspaces = store?.workspaces ?? []
+	if (superadmin) {
+		return [
+			...originalWorkspaces.filter((x) => x.id != 'starter' && x.id != 'admins'),
+			{
+				id: 'admins',
+				name: 'Admins',
+				username: 'superadmin'
+			}
+		]
+	} else {
+		return originalWorkspaces
+	}
+})
 export const hubScripts = writable<
-  | Array<{
-    path: string;
-    summary: string;
-    approved: boolean;
-    kind: string;
-    app: string;
-    ask_id: number;
-  }>
-  | undefined
->(undefined);
+	| Array<{
+			path: string
+			summary: string
+			approved: boolean
+			kind: string
+			app: string
+			ask_id: number
+	  }>
+	| undefined
+>(undefined)
 
 if (browser) {
-  workspaceStore.subscribe(async (workspace) => {
-    if (workspace) {
-      try {
-        localStorage.setItem("workspace", String(workspace));
-      } catch (e) {
-        console.error('Could not persist workspace to local storage', e)
-      }
-      const user = await getUserExt(workspace)
-      userStore.set(user);
-      if (isCloudHosted() && user?.is_admin) {
-        premiumStore.set((await WorkspaceService.getPremiumInfo({ workspace })));
-      }
-    } else {
-      userStore.set(undefined);
-    }
-  });
+	workspaceStore.subscribe(async (workspace) => {
+		if (workspace) {
+			try {
+				localStorage.setItem('workspace', String(workspace))
+			} catch (e) {
+				console.error('Could not persist workspace to local storage', e)
+			}
+			const user = await getUserExt(workspace)
+			userStore.set(user)
+			if (isCloudHosted() && user?.is_admin) {
+				premiumStore.set(await WorkspaceService.getPremiumInfo({ workspace }))
+			}
+		} else {
+			userStore.set(undefined)
+		}
+	})
 }
 
 export function switchWorkspace(workspace: string | undefined) {
-  localStorage.removeItem("flow")
-  localStorage.removeItem("app")
-  workspaceStore.set(workspace);
+	localStorage.removeItem('flow')
+	localStorage.removeItem('app')
+	workspaceStore.set(workspace)
 }
 
 export function clearStores(): void {
-  localStorage.removeItem("flow")
-  localStorage.removeItem("app")
-  localStorage.removeItem("workspace");
-  userStore.set(undefined);
-  workspaceStore.set(undefined);
-  usersWorkspaceStore.set(undefined);
-  superadmin.set(undefined);
+	localStorage.removeItem('flow')
+	localStorage.removeItem('app')
+	localStorage.removeItem('workspace')
+	userStore.set(undefined)
+	workspaceStore.set(undefined)
+	usersWorkspaceStore.set(undefined)
+	superadmin.set(undefined)
 }

frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte

@@ -25,7 +25,7 @@
 		faFastForward
 	} from '@fortawesome/free-solid-svg-icons'
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
-	import { superadmin, userStore, userWorkspaces, workspaceStore } from '$lib/stores'
+	import { runFormStore, superadmin, userStore, userWorkspaces, workspaceStore } from '$lib/stores'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
@@ -39,6 +39,7 @@
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import Dropdown from '$lib/components/Dropdown.svelte'
+	import { goto } from '$app/navigation'
 
 	$: workspace_id = $page.url.searchParams.get('workspace') ?? $workspaceStore
 	$: not_same_workspace = workspace_id !== $workspaceStore
@@ -170,18 +171,6 @@
 				{@const stem = `/${job?.job_kind}s`}
 				{@const isScript = job?.job_kind === 'script'}
 				{@const route = isScript ? job?.script_hash : job?.script_path}
-				{@const runHref = `${stem}/run/${route}${
-					job?.args ? '?args=' + encodeURIComponent(encodeState(job?.args)) : ''
-				}`}
-				{@const editHref = `${stem}/edit/${route}${
-					isScript
-						? `?step=2${job?.args ? `&args=${encodeURIComponent(encodeState(job?.args))}` : ''}`
-						: `${
-								job?.args
-									? `?args=${encodeURIComponent(encodeState(job?.args))}&nodraft=true`
-									: '?nodraft=true'
-						  }`
-				}`}
 				{@const isRunning = job && 'running' in job && job.running}
 				{@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
 				{#if isRunning}
@@ -224,7 +213,10 @@
 					>
 				{/if}
 				<Button
-					href={runHref}
+					on:click|once={() => {
+						$runFormStore = job?.args
+						goto(`${stem}/run/${route}`)
+					}}
 					disabled={not_same_workspace}
 					color="blue"
 					size="md"
@@ -234,7 +226,10 @@
 					{#if canWrite(job?.script_path ?? '', {}, $userStore)}
 						<Button
 							disabled={not_same_workspace}
-							href={editHref}
+							on:click|once={() => {
+								$runFormStore = job?.args
+								goto(`${stem}/edit/${route}${isScript ? `?step=2` : `?nodraft=true`}`)
+							}}
 							color="blue"
 							size="md"
 							startIcon={{ icon: faEdit }}>Edit</Button

frontend/src/routes/(root)/(logged)/scripts/edit/[...hash]/+page.svelte

@@ -2,13 +2,17 @@
 	import { ScriptService, type Script } from '$lib/gen'
 
 	import { page } from '$app/stores'
-	import { workspaceStore } from '$lib/stores'
+	import { runFormStore, workspaceStore } from '$lib/stores'
 	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
-	import { decodeArgs, decodeState } from '$lib/utils'
+	import { decodeState } from '$lib/utils'
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
 
 	const initialState = $page.url.searchParams.get('state')
-	const initialArgs = decodeArgs($page.url.searchParams.get('args') ?? undefined)
+	let initialArgs = {}
+	if ($runFormStore) {
+		initialArgs = $runFormStore
+		$runFormStore = undefined
+	}
 	let topHash = $page.url.searchParams.get('topHash') ?? undefined
 
 	let scriptLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined