From cdbab5c807d5482523fcc0fd13ceb85d85449ec0 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 2 Apr 2023 13:52:15 +0200
Subject: [PATCH] remove all frontend warnings

---
 frontend/package.json                         |  1 -
 frontend/src/lib/components/ArgInput.svelte   |  2 +
 frontend/src/lib/components/Dropdown.svelte   |  9 +-
 frontend/src/lib/components/Editor.svelte     |  2 +-
 frontend/src/lib/components/EditorBar.svelte  | 88 +++++++++++++------
 .../src/lib/components/InlineCodeCopy.svelte  |  3 +-
 frontend/src/lib/components/Modal.svelte      |  6 +-
 .../src/lib/components/Multiselect.svelte     |  1 +
 frontend/src/lib/components/Path.svelte       |  2 +
 frontend/src/lib/components/Range.svelte      |  1 +
 .../src/lib/components/SchemaModal.svelte     |  3 +-
 .../src/lib/components/SimpleEditor.svelte    |  2 +-
 .../inputs/currency/CurrencyInput.svelte      |  2 +-
 .../lib/components/apps/editor/appUtils.ts    |  2 +-
 .../InlineScriptsPanelList.svelte             |  8 +-
 .../editor/settingsPanel/TableActions.svelte  |  2 +-
 .../flows/content/DynamicInputHelpBox.svelte  |  1 +
 .../flows/content/FlowInputsFlow.svelte       |  2 +-
 .../flows/content/FlowModuleWrapper.svelte    |  1 -
 .../lib/components/flows/flowStateUtils.ts    | 28 +-----
 frontend/src/lib/components/flows/idUtils.ts  | 58 ++++++++++++
 .../lib/components/flows/map/MapItem.svelte   |  5 +-
 frontend/src/lib/components/flows/utils.ts    | 45 ----------
 .../src/lib/components/graph/FlowGraph.svelte |  2 +-
 .../svelvet/container/views/GraphView.svelte  |  6 +-
 .../graph/svelvet/nodes/views/Node.svelte     |  1 -
 .../propertyPicker/ObjectViewer.svelte        |  7 +-
 .../(root)/(logged)/audit_logs/+page.svelte   |  2 +-
 .../(logged)/flows/get/[...path]/+page.svelte |  3 +-
 .../(root)/(logged)/schedules/+page.svelte    |  2 +-
 .../scripts/get/[...hash]/+page.svelte        |  3 +-
 31 files changed, 162 insertions(+), 138 deletions(-)
 create mode 100644 frontend/src/lib/components/flows/idUtils.ts

diff --git a/frontend/package.json b/frontend/package.json
index ca57d83157..510680cfa5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -73,7 +73,6 @@
 		"@redocly/json-to-json-schema": "^0.0.1",
 		"@tanstack/svelte-table": "^8.7.6",
 		"ag-grid-svelte": "^0.1.4",
-		"async-mutex": "^0.4.0",
 		"chart.js": "^3.9.1",
 		"chartjs-adapter-date-fns": "^3.0.0",
 		"chartjs-plugin-zoom": "^2.0.0",
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 11bb3569f9..97b5a59c86 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -168,6 +168,7 @@
 	let itemsLimit = 50
 </script>
 
+<!-- svelte-ignore a11y-autofocus -->
 <div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
@@ -175,6 +176,7 @@
 		{/if}
 		{#if editableSchema}
 			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<span
 					class="underline"
 					on:click={() => {
diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index 2ca0e28b5a..785aa34ce7 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/frontend/src/lib/components/Dropdown.svelte
@@ -47,8 +47,8 @@
 							dispatch('click', { item: item?.eventName })
 						}
 					}}
-					class="block w-full  whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
-					 px-4 py-2 text-sm text-gray-700 text-left 
+					class="block w-full whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
+					 px-4 py-2 text-sm text-gray-700 text-left
 					 {item.disabled ? 'bg-gray-200' : ''}
 					 {item.separatorTop ? 'border-t' : ''} {item.separatorBottom ? 'border-b' : ''} {item.type ==
 					'delete'
@@ -72,7 +72,7 @@
 				<a
 					href={item.href}
 					on:click|stopPropagation|preventDefault={() => goto(item.href ?? '')}
-					class="block w-full px-4 font-semibold text-left  py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
+					class="block w-full px-4 font-semibold text-left py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"
 					tabindex="-1"
@@ -89,9 +89,10 @@
 					{item.displayName}
 				</a>
 			{:else}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<span
 					class:bg-gray-50={item.disabled}
-					class="block  text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
+					class="block text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index beb25f0949..4c6e39a1d3 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -485,7 +485,7 @@
 
 <div bind:this={divEl} class="{$$props.class} editor" />
 
-<style>
+<style lang="postcss">
 	.editor {
 		@apply p-0 border rounded-md border-gray-50;
 	}
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index cdbd6b162e..d6fcea03e0 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -79,6 +79,8 @@
 		codeViewer?.openDrawer?.()
 		codeObj = await getScriptByPath(e.detail.path ?? '')
 	}
+
+	let version = __pkg__.version
 </script>
 
 <Drawer bind:this={scriptPicker} size="900px">
@@ -136,7 +138,7 @@
 		if (lang == 'deno') {
 			if (!editor.getCode().includes('import * as wmill from')) {
 				editor.insertAtBeginning(
-					`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/mod.ts'\n`
+					`import * as wmill from 'https://deno.land/x/windmill@v${version}/mod.ts'\n`
 				)
 			}
 			editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
@@ -183,7 +185,7 @@
 		if (lang == 'deno') {
 			if (!editor.getCode().includes('import * as wmill from')) {
 				editor.insertAtBeginning(
-					`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/mod.ts'\n`
+					`import * as wmill from 'https://deno.land/x/windmill@v${version}/mod.ts'\n`
 				)
 			}
 			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
@@ -233,7 +235,13 @@
 			{validCode ? 'Valid' : 'Invalid'}
 		</Badge>
 		<div class="flex items-center divide-x">
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="pr-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="pr-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					color="light"
 					btnClasses="!font-medium !h-full"
@@ -245,11 +253,15 @@
 				>
 					+Context Var
 				</Button>
-				<svelte:fragment slot="text">
-					Add context variable
-				</svelte:fragment>
+				<svelte:fragment slot="text">Add context variable</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					color="light"
 					btnClasses="!font-medium !h-full"
@@ -261,11 +273,15 @@
 				>
 					+Variable
 				</Button>
-				<svelte:fragment slot="text">
-					Add variable
-				</svelte:fragment>
+				<svelte:fragment slot="text">Add variable</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium !h-full"
 					size="xs"
@@ -277,11 +293,15 @@
 				>
 					+Resource
 				</Button>
-				<svelte:fragment slot="text">
-					Add resource
-				</svelte:fragment>
+				<svelte:fragment slot="text">Add resource</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium !h-full"
 					size="xs"
@@ -293,11 +313,15 @@
 				>
 					Reset
 				</Button>
-				<svelte:fragment slot="text">
-					Reset
-				</svelte:fragment>
+				<svelte:fragment slot="text">Reset</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium !h-full"
 					size="xs"
@@ -320,11 +344,15 @@
 						{/if}
 					</span>
 				</Button>
-				<svelte:fragment slot="text">
-					Reload assistant
-				</svelte:fragment>
+				<svelte:fragment slot="text">Reload assistant</svelte:fragment>
 			</Popover>
-			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+			<Popover
+				notClickable
+				placement="bottom"
+				disapperTimoout={0}
+				class="px-1"
+				disablePopup={!iconOnly}
+			>
 				<Button
 					btnClasses="!font-medium"
 					size="xs"
@@ -342,7 +370,13 @@
 			</Popover>
 		</div>
 	</div>
-	<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+	<Popover
+		notClickable
+		placement="bottom"
+		disapperTimoout={0}
+		class="px-1"
+		disablePopup={!iconOnly}
+	>
 		<Button
 			btnClasses="!font-medium"
 			size="xs"
@@ -354,13 +388,11 @@
 		>
 			Script
 		</Button>
-		<svelte:fragment slot="text">
-			Script
-		</svelte:fragment>
+		<svelte:fragment slot="text">Script</svelte:fragment>
 	</Popover>
 </div>
 
-<style>
+<style lang="postcss">
 	span.green {
 		@apply text-green-600 animate-[pulse_5s_ease-in-out_infinite];
 	}
diff --git a/frontend/src/lib/components/InlineCodeCopy.svelte b/frontend/src/lib/components/InlineCodeCopy.svelte
index c52768e96d..8d4c239660 100644
--- a/frontend/src/lib/components/InlineCodeCopy.svelte
+++ b/frontend/src/lib/components/InlineCodeCopy.svelte
@@ -6,7 +6,8 @@
 	export let content: string
 </script>
 
-<pre class="bg-gray-700 text-gray-100 p-2  font-mono text-sm whitespace-pre-wrap"
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap"
 	>{content} <span on:click={() => copyToClipboard(content)} class="cursor-pointer ml-2"
 		><Icon data={faClipboard} /></span
 	></pre
diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index 504ae4449f..f7154e61f9 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -65,11 +65,11 @@
 					<p class="font-semibold text-gray-800"><slot name="title" /></p>
 					<div />
 				</div>
-				<div class="flex flex-col  bg-gray-50 pt-3 px-6 grow overflow-y-auto">
+				<div class="flex flex-col bg-gray-50 pt-3 px-6 grow overflow-y-auto">
 					<slot name="content" />
 				</div>
 				<div class="flex flex-col bg-white border-gray-200 p-2">
-					<div class="flex flex-row justify-between p-2 ">
+					<div class="flex flex-row justify-between p-2">
 						<button
 							on:click={() => {
 								closeDrawer()
@@ -98,7 +98,7 @@
 	</div>
 {/if}
 
-<style>
+<style lang="postcss">
 	.blurred-background {
 		/* @apply absolute sm:top-6 lg:top-8 left-28 sm:left-40 md:left-48; */ /* If we wanted to make the navbars visible */
 		@apply fixed  top-0 left-0;
diff --git a/frontend/src/lib/components/Multiselect.svelte b/frontend/src/lib/components/Multiselect.svelte
index c3a86c8b3f..61283f152f 100644
--- a/frontend/src/lib/components/Multiselect.svelte
+++ b/frontend/src/lib/components/Multiselect.svelte
@@ -110,6 +110,7 @@
 </script>
 
 <div class="multiselect" class:readonly>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div class="tokens" class:showOptions on:click={handleTokenClick}>
 		{#each Object.values(selected) as s}
 			<div class="token" data-id={s.value}>
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 1ca168f6e2..2b37de5e43 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -288,6 +288,7 @@
 	<div class="flex flex-col sm:flex-row items-center gap-2 sm:gap-4 pb-0 mb-1">
 		{#if meta != undefined}
 			<div class="flex gap-4 shrink">
+				<!-- svelte-ignore a11y-label-has-associated-control -->
 				<label class="block">
 					<span class="text-gray-700 text-sm whitespace-nowrap">Owner</span>
 
@@ -353,6 +354,7 @@
 					Name
 					<Required required={true} />
 				</span>
+				<!-- svelte-ignore a11y-autofocus -->
 				<input
 					{disabled}
 					type="text"
diff --git a/frontend/src/lib/components/Range.svelte b/frontend/src/lib/components/Range.svelte
index e1095331a9..79c9a587c7 100644
--- a/frontend/src/lib/components/Range.svelte
+++ b/frontend/src/lib/components/Range.svelte
@@ -182,6 +182,7 @@
 	>
 		<div class="range__track" bind:this={container}>
 			<div class="range__track--highlighted" bind:this={progressBar} />
+			<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 			<div
 				class="range__thumb"
 				class:range__thumb--holding={holding}
diff --git a/frontend/src/lib/components/SchemaModal.svelte b/frontend/src/lib/components/SchemaModal.svelte
index 0e8607ce3a..8e7622a102 100644
--- a/frontend/src/lib/components/SchemaModal.svelte
+++ b/frontend/src/lib/components/SchemaModal.svelte
@@ -2,7 +2,7 @@
 	import type { SchemaProperty } from '$lib/common'
 
 	export const ARG_TYPES = ['integer', 'number', 'string', 'boolean', 'object', 'array'] as const
-	export type ArgType = typeof ARG_TYPES[number]
+	export type ArgType = (typeof ARG_TYPES)[number]
 
 	export interface ModalSchemaProperty {
 		selectedType?: string
@@ -115,6 +115,7 @@
 						Name
 						<Required required={true} />
 					</div>
+					<!-- svelte-ignore a11y-autofocus -->
 					<input
 						autofocus
 						autocomplete="off"
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index c4cbe9cb63..0bb0947a44 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -181,7 +181,7 @@
 
 <div bind:this={divEl} class="{$$props.class ?? ''} editor" bind:clientWidth={width} />
 
-<style>
+<style lang="postcss">
 	.editor {
 		@apply rounded-lg p-0;
 	}
diff --git a/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte b/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
index a67bfb9a15..a63957e763 100644
--- a/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
@@ -190,7 +190,7 @@
 	/>
 </div>
 
-<style>
+<style lang="postcss">
 	input.currencyInput__formatted {
 		border: 1px solid #e2e2e2;
 		padding: 10px;
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 981cf571e7..6e1e0550de 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -1,4 +1,3 @@
-import { getNextId } from '$lib/components/flows/flowStateUtils'
 import type {
 	App,
 	BaseAppComponent,
@@ -23,6 +22,7 @@ import type { FilledItem } from '../svelte-grid/types'
 import type { EvalAppInput, StaticAppInput } from '../inputType'
 import { get, type Writable } from 'svelte/store'
 import { sendUserToast } from '$lib/utils'
+import { getNextId } from '$lib/components/flows/idUtils'
 
 export function dfs(
 	grid: GridItem[],
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
index 6b0808fe2a..90f0f28e36 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
@@ -63,11 +63,11 @@
 			<div class="text-sm font-semibold truncate mb-1"> Inline scripts </div>
 			<div class="flex flex-col gap-2 w-full">
 				{#if runnables.inline.length > 0}
-					<div class="flex gap-1 flex-col ">
+					<div class="flex gap-1 flex-col">
 						{#each runnables.inline as { name, id, transformer }, index (index)}
 							<button
 								id={PREFIX + id}
-								class="panel-item 
+								class="panel-item
 				{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id)}
 							>
@@ -94,7 +94,7 @@
 					</div>
 				{/if}
 				{#if $app.unusedInlineScripts?.length > 0}
-					<div class="flex gap-1 flex-col ">
+					<div class="flex gap-1 flex-col">
 						{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 							{@const id = `unused-${index}`}
 							<button
@@ -193,7 +193,7 @@
 	</div>
 </PanelSection>
 
-<style>
+<style lang="postcss">
 	.panel-item {
 		@apply border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200;
 	}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
index 0c64a5701d..e629585043 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Badge } from '$lib/components/common'
 	import Button from '$lib/components/common/button/Button.svelte'
-	import { getNextId } from '$lib/components/flows/flowStateUtils'
+	import { getNextId } from '$lib/components/flows/idUtils'
 	import { classNames } from '$lib/utils'
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
diff --git a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
index f5cfe90c83..7923713cce 100644
--- a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
+++ b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
@@ -7,6 +7,7 @@
 </script>
 
 <div class="text-xs flex flex-row-reverse">
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<span
 		class="underline mr-4"
 		on:click={() => {
diff --git a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
index 314bf504e6..6f7aa1efe3 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
@@ -10,7 +10,7 @@
 	import { flip } from 'svelte/animate'
 	import { fade } from 'svelte/transition'
 
-	export let failureModule: boolean
+	// export let failureModule: boolean
 	const dispatch = createEventDispatcher()
 
 	let items: Flow[] | undefined = undefined
diff --git a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
index ae5a0c3f66..1cb21b4101 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
@@ -46,7 +46,6 @@
 
 		{#if flowModule.value.flow}
 			<FlowInputsFlow
-				failureModule={$selectedId === 'failure'}
 				on:pick={async ({ detail }) => {
 					const { path, summary } = detail
 					const [module, state] = await pickFlow(path, summary, flowModule.id)
diff --git a/frontend/src/lib/components/flows/flowStateUtils.ts b/frontend/src/lib/components/flows/flowStateUtils.ts
index 1ae3aeedc3..c0c5c0e669 100644
--- a/frontend/src/lib/components/flows/flowStateUtils.ts
+++ b/frontend/src/lib/components/flows/flowStateUtils.ts
@@ -14,14 +14,12 @@ import { getScriptByPath } from '$lib/utils'
 import { get, type Writable } from 'svelte/store'
 import type { FlowModuleState, FlowState } from './flowState'
 import {
-	charsToNumber,
 	emptyFlowModuleState,
 	findNextAvailablePath,
 	loadSchemaFromModule,
-	NEVER_TESTED_THIS_FAR,
-	numberToChars
+	NEVER_TESTED_THIS_FAR
 } from './utils'
-import { Mutex } from 'async-mutex'
+import { charsToNumber, numberToChars } from './idUtils'
 
 export async function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState> {
 	try {
@@ -41,28 +39,6 @@ export async function loadFlowModuleState(flowModule: FlowModule): Promise<FlowM
 	}
 }
 
-export const idMutex = new Mutex()
-
-const forbiddenIds: string[] = ['do']
-
-export function getNextId(currentKeys: string[]): string {
-	const max = currentKeys.reduce((acc, key) => {
-		if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
-			return acc
-		} else {
-			const num = charsToNumber(key)
-			return Math.max(acc, num + 1)
-		}
-	}, 0)
-	const char = numberToChars(max)
-
-	if (forbiddenIds.includes(char)) {
-		return getNextId(currentKeys.concat(char))
-	} else {
-		return char
-	}
-}
-
 // Computes the next available id
 export function nextId(flowState: FlowState): string {
 	const max = Object.keys(flowState).reduce((acc, key) => {
diff --git a/frontend/src/lib/components/flows/idUtils.ts b/frontend/src/lib/components/flows/idUtils.ts
new file mode 100644
index 0000000000..7a18e83214
--- /dev/null
+++ b/frontend/src/lib/components/flows/idUtils.ts
@@ -0,0 +1,58 @@
+const aCharCode = 'a'.charCodeAt(0)
+
+const forbiddenIds: string[] = ['do']
+
+export function numberToChars(n: number) {
+	if (n < 0) {
+		return '-' + numberToChars(-n)
+	}
+	var b = [n],
+		sp,
+		out,
+		i,
+		div
+
+	sp = 0
+	while (sp < b.length) {
+		if (b[sp] > 25) {
+			div = Math.floor(b[sp] / 26)
+			b[sp + 1] = div - 1
+			b[sp] %= 26
+		}
+		sp += 1
+	}
+
+	out = ''
+	for (i = 0; i < b.length; i += 1) {
+		let charCode = aCharCode + b[i]
+		out = String.fromCharCode(charCode) + out
+	}
+
+	return out
+}
+
+export function getNextId(currentKeys: string[]): string {
+	const takenKeys = [...currentKeys, ...forbiddenIds].map(charsToNumber)
+	let i = charsToNumber('a')
+	while (true) {
+		if (!takenKeys.includes(i)) {
+			break
+		}
+		i++
+	}
+	return numberToChars(i)
+}
+
+export function charsToNumber(n: string): number {
+	if (n.charAt(0) == '-') {
+		return charsToNumber(n.slice(1)) * -1
+	}
+	let b = Math.pow(26, n.length - 1)
+	let res = 0
+	for (let c of n) {
+		let charCode = c == '-' || c == '_' ? aCharCode + 25 : c.charCodeAt(0)
+		res += (charCode - aCharCode + 1) * b
+		b = b / 26
+	}
+	return res - 1
+}
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index 27727b96be..a180518b60 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { FlowEditorContext } from '../types'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte'
 	import type { FlowModule } from '$lib/gen'
@@ -16,7 +15,7 @@
 	export let trigger: boolean
 	export let insertable: boolean
 	export let insertableEnd = false
-	export let annotation: string | undefined = undefined
+	// export let annotation: string | undefined = undefined
 	export let branchable: boolean = false
 	export let bgColor: string = ''
 	export let modules: FlowModule[]
@@ -187,7 +186,7 @@
 						dispatch('insert', { modules, index: idx + 1, detail: 'move' })
 					}}
 					type="button"
-					class=" text-gray-900 bg-white border mx-0.5  border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+					class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 				>
 					<ClipboardCopy size={12} />
 				</button>
diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
index c851e0306d..d8c23c04a7 100644
--- a/frontend/src/lib/components/flows/utils.ts
+++ b/frontend/src/lib/components/flows/utils.ts
@@ -169,51 +169,6 @@ export function emptyFlowModuleState(): FlowModuleState {
 	}
 }
 
-const aCharCode = 'a'.charCodeAt(0)
-
-export function numberToChars(n: number) {
-	if (n < 0) {
-		return '-' + numberToChars(-n)
-	}
-	var b = [n],
-		sp,
-		out,
-		i,
-		div
-
-	sp = 0
-	while (sp < b.length) {
-		if (b[sp] > 25) {
-			div = Math.floor(b[sp] / 26)
-			b[sp + 1] = div - 1
-			b[sp] %= 26
-		}
-		sp += 1
-	}
-
-	out = ''
-	for (i = 0; i < b.length; i += 1) {
-		let charCode = aCharCode + b[i]
-		out = String.fromCharCode(charCode) + out
-	}
-
-	return out
-}
-
-export function charsToNumber(n: string): number {
-	if (n.charAt(0) == '-') {
-		return charsToNumber(n.slice(1)) * -1
-	}
-	let b = Math.pow(26, n.length - 1)
-	let res = 0
-	for (let c of n) {
-		let charCode = c == '-' || c == '_' ? aCharCode + 25 : c.charCodeAt(0)
-		res += (charCode - aCharCode + 1) * b
-		b = b / 26
-	}
-	return res - 1
-}
-
 export async function findNextAvailablePath(path: string): Promise<string> {
 	try {
 		await ScriptService.getScriptByPath({
diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index 90af4a951a..117121a126 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -247,7 +247,7 @@
 						insertableEnd,
 						branchable,
 						bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
-						annotation,
+						// annotation,
 						modules,
 						moving
 					},
diff --git a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
index 20a83f0725..3efab49eee 100644
--- a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
+++ b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
@@ -164,9 +164,9 @@
 			<div class={`Node Node-${canvasId}`}>
 				{#each nodes as node}
 					{#if node.data.html}
-						<Node {node} {canvasId} nodeId={node.id}>{@html node.data.html}</Node>
+						<Node {node} {canvasId}>{@html node.data.html}</Node>
 					{:else if node.data.custom}
-						<Node isCustom {node} {canvasId} nodeId={node.id}>
+						<Node isCustom {node} {canvasId}>
 							<svelte:component
 								this={node.data.custom.component}
 								on:new={(e) => node?.data?.custom?.cb?.('new', e.detail)}
@@ -180,7 +180,7 @@
 							/>
 						</Node>
 					{:else}
-						<Node {node} {canvasId} nodeId={node.id}>{node.data.label}</Node>
+						<Node {node} {canvasId}>{node.data.label}</Node>
 					{/if}
 				{/each}
 			</div>
diff --git a/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte b/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte
index 93b707fc0d..510e7b1def 100644
--- a/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte
+++ b/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte
@@ -9,7 +9,6 @@
 	export let node: NodeType
 	export let canvasId: string
 
-	export let nodeId: string
 	export let isCustom = false
 
 	const store = findStore(canvasId)
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index bb42e4b8f8..a81ae588d8 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -10,7 +10,6 @@
 
 	export let json: Object
 	export let level = 0
-	export let isLast = true
 	export let currentPath: string = ''
 	export let pureViewer = false
 	export let collapsed = level == 3 || Array.isArray(json)
@@ -85,7 +84,6 @@
 						<svelte:self
 							json={json[key]}
 							level={level + 1}
-							isLast={index === keys.length - 1}
 							currentPath={computeKey(key, isArray, currentPath)}
 							{pureViewer}
 							on:select
@@ -141,15 +139,12 @@
 	<span class="text-gray-600 text-xs ml-2">No items</span>
 {/if}
 
-<style>
+<style lang="postcss">
 	ul {
 		list-style: none;
 		@apply text-sm;
 	}
 
-	.val {
-		/* @apply font-black; */
-	}
 	.val.undefined {
 		@apply text-red-500;
 	}
diff --git a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
index c03bf01c41..8d382ea067 100644
--- a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
@@ -169,7 +169,7 @@
 	{/if}
 </CenteredPage>
 
-<style>
+<style lang="postcss">
 	/* Hide scrollbar for Chrome, Safari and Opera */
 	.no-scrollbar::-webkit-scrollbar {
 		display: none;
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index 390d0d0711..1bfcaef53c 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -379,7 +379,8 @@
 					</div>
 					{#if viewWebhookCommand}
 						<div transition:slide|local class="px-4">
-							<pre class="bg-gray-700 text-gray-100 p-2  font-mono text-sm whitespace-pre-wrap"
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap"
 								>{curlCommand} <span
 									on:click={() => copyToClipboard(curlCommand)}
 									class="cursor-pointer ml-2"><Icon data={faClipboard} /></span
diff --git a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
index ed08ce03d9..7fd2d4e566 100644
--- a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
@@ -228,7 +228,7 @@
 	}}
 />
 
-<style>
+<style lang="postcss">
 	td {
 		@apply px-2;
 	}
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index fb3a7b1205..ec1e67fccb 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -507,7 +507,8 @@
 						</Button>
 						{#if viewWebhookCommand}
 							<div transition:slide|local class="px-4">
-								<pre class="bg-gray-700 text-gray-100 p-2  font-mono text-sm whitespace-pre-wrap"
+								<!-- svelte-ignore a11y-click-events-have-key-events -->
+								<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap"
 									>{curlCommand} <span
 										on:click={() => copyToClipboard(curlCommand)}
 										class="cursor-pointer ml-2"><Icon data={faClipboard} /></span