fix: encoding state now supports unicode including emojis

frontend/src/lib/components/FlowBuilder.svelte

@@ -3,7 +3,13 @@
 	import { page } from '$app/stores'
 	import { FlowService, ScheduleService, type Flow } from '$lib/gen'
 	import { clearPreviewResults, workspaceStore } from '$lib/stores'
-	import { formatCron, loadHubScripts, sendUserToast, setQueryWithoutLoad } from '$lib/utils'
+	import {
+		encodeState,
+		formatCron,
+		loadHubScripts,
+		sendUserToast,
+		setQueryWithoutLoad
+	} from '$lib/utils'
 	import { onMount } from 'svelte'
 	import { OFFSET } from './CronInput.svelte'
 	import FlowEditor from './FlowEditor.svelte'
@@ -109,7 +115,7 @@
 	}
 
 	flowStore.subscribe((flow: Flow) => {
-		setQueryWithoutLoad($page.url, 'state', btoa(JSON.stringify(flowToMode(flow, $mode))))
+		setQueryWithoutLoad($page.url, 'state', encodeState(flowToMode(flow, $mode)))
 	})
 
 	onMount(() => {

frontend/src/lib/components/RunForm.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores'
 	import type { Script, Flow } from '$lib/gen'
-	import { getToday } from '$lib/utils'
+	import { decodeState, getToday } from '$lib/utils'
 	import { slide } from 'svelte/transition'
 
 	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
@@ -22,7 +22,7 @@
 
 	let queryArgs = $page.url.searchParams.get('args')
 	if (queryArgs) {
-		const parsed = JSON.parse(atob(queryArgs))
+		const parsed = decodeState(queryArgs)
 		Object.entries(parsed).forEach(([k, v]) => {
 			if (v == '<function call>') {
 				parsed[k] = undefined

frontend/src/lib/components/ScriptBuilder.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ScriptService, type Script } from '$lib/gen'
 
-	import { emptySchema, sendUserToast, setQueryWithoutLoad } from '$lib/utils'
+	import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '$lib/utils'
 	import { onDestroy } from 'svelte'
 	import ScriptEditor from './ScriptEditor.svelte'
 	import { page } from '$app/stores'
@@ -24,9 +24,7 @@
 
 	let pathError = ''
 
-	$: {
-		setQueryWithoutLoad($page.url, 'state', btoa(JSON.stringify(script)))
-	}
+	$: setQueryWithoutLoad($page.url, 'state', encodeState(script))
 
 	$: {
 		if (script.language == 'python3') {

frontend/src/lib/utils.ts

@@ -205,12 +205,20 @@ export function pathIsEmpty(path: string): boolean {
 	return path == undefined || path.split('/')[2] == ''
 }
 
+export function encodeState(state: any): string {
+	return btoa(encodeURIComponent(JSON.stringify(state)))
+}
+
+export function decodeState(query: string): any {
+	return JSON.parse(decodeURIComponent(atob(query)))
+}
+
 export async function setQuery(url: URL, key: string, value: string): Promise<void> {
 	url.searchParams.set(key, value)
 	await goto(`?${url.searchParams.toString()}`)
 }
 
-export async function setQueryWithoutLoad(url: URL, key: string, value: string): Promise<void> {
+export function setQueryWithoutLoad(url: URL, key: string, value: string): void {
 	const nurl = new URL(url.toString())
 	nurl.searchParams.set(key, value)
 	history.replaceState(null, '', nurl.toString())
@@ -487,7 +495,7 @@ export function flowToHubUrl(flow: Flow): URL {
 	}
 	url.searchParams.append(
 		'flow',
-		btoa(JSON.stringify(openFlow))
+		encodeState(openFlow)
 	)
 	return url
 }

frontend/src/routes/flows/add.svelte

@@ -12,14 +12,14 @@
 	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import { initFlow, mode } from '$lib/components/flows/flowStore'
 	import { FlowService, type Flow } from '$lib/gen'
-	import { emptySchema, sendUserToast } from '$lib/utils'
+	import { decodeState, emptySchema, sendUserToast } from '$lib/utils'
 
 	const initialState = $page.url.searchParams.get('state')
 	const hubId = $page.url.searchParams.get('hub')
 
 	let flow: Flow =
 		initialState != undefined
-			? JSON.parse(atob(initialState))
+			? decodeState(initialState)
 			: {
 					path: '',
 					summary: '',

frontend/src/routes/flows/edit/[...path].svelte

@@ -12,11 +12,11 @@
 	import { page } from '$app/stores'
 	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import { workspaceStore } from '$lib/stores'
-	import { emptySchema } from '$lib/utils'
+	import { decodeState, emptySchema } from '$lib/utils'
 	import { initFlow } from '$lib/components/flows/flowStore'
 
 	const initialState = $page.url.searchParams.get('state')
-	let flowLoadedFromUrl = initialState != undefined ? JSON.parse(atob(initialState)) : undefined
+	let flowLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
 
 	let flow: Flow = {
 		path: $page.params.path,

frontend/src/routes/run/[...run].svelte

@@ -10,7 +10,14 @@
 	import { page } from '$app/stores'
 	import { JobService, Job } from '$lib/gen'
 	import { onDestroy } from 'svelte'
-	import { canWrite, displayDaysAgo, forLater, sendUserToast, truncateHash } from '$lib/utils'
+	import {
+		canWrite,
+		displayDaysAgo,
+		encodeState,
+		forLater,
+		sendUserToast,
+		truncateHash
+	} from '$lib/utils'
 	import Icon from 'svelte-awesome'
 	import { check } from 'svelte-awesome/icons'
 	import {
@@ -255,7 +262,7 @@
 				>
 				<a
 					href="/scripts/run/{job?.script_hash}{job?.args
-						? `?args=${encodeURIComponent(btoa(JSON.stringify(job?.args)))}`
+						? `?args=${encodeURIComponent(encodeState(job?.args))}`
 						: ''}"
 					class="default-button-secondary py-1 text-sm px-2"
 					><Icon class="text-yellow-400" data={faBolt} scale={0.6} label="Run again" /><span
@@ -280,7 +287,7 @@
 				>
 				<a
 					href="/flows/run/{job?.script_path}{job?.args
-						? `?args=${encodeURIComponent(btoa(JSON.stringify(job?.args)))}`
+						? `?args=${encodeURIComponent(encodeState(job?.args))}`
 						: ''}"
 					class="default-button-secondary py-1 text-sm px-2"
 					><Icon class="text-yellow-400" data={faBolt} scale={0.6} label="Run again" /><span

frontend/src/routes/scripts/add.svelte

@@ -13,7 +13,7 @@
 	import { workspaceStore } from '$lib/stores'
 	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
 	import type { Schema } from '$lib/common'
-	import { emptySchema, getScriptByPath, sendUserToast } from '$lib/utils'
+	import { decodeState, emptySchema, getScriptByPath, sendUserToast } from '$lib/utils'
 
 	// Default
 	let schema: Schema = emptySchema()
@@ -25,7 +25,7 @@
 
 	let script: Script =
 		initialState != undefined
-			? JSON.parse(atob(initialState))
+			? decodeState(initialState)
 			: {
 					hash: '',
 					path: '',

frontend/src/routes/scripts/edit/[...hash].svelte

@@ -12,9 +12,10 @@
 	import { page } from '$app/stores'
 	import { workspaceStore } from '$lib/stores'
 	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
+	import { decodeState } from '$lib/utils'
 
 	const initialState = $page.url.searchParams.get('state')
-	let scriptLoadedFromUrl = initialState != undefined ? JSON.parse(atob(initialState)) : undefined
+	let scriptLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
 
 	let script: Script | undefined