feat(frontend): improve approval form edition + add a delete button t… (#3946)

* feat(frontend): improve approval form edition + add a delete button to the EditableSchema

* feat(frontend): only show a few lines of code for Hub/workflow scripts by default

* feat(frontend): fix spacing

* feat(frontend): improve

* feat(frontend): fix toggle

* feat(frontend): add missing space

frontend/src/lib/components/flows/content/FlowModuleComponent.svelte

@@ -341,7 +341,11 @@
 							{#if !noEditor}
 								<div class="border-t">
 									{#key forceReload}
-										<FlowModuleScript path={flowModule.value.path} hash={flowModule.value.hash} />
+										<FlowModuleScript
+											showAllCode={false}
+											path={flowModule.value.path}
+											hash={flowModule.value.hash}
+										/>
 									{/key}
 								</div>
 							{/if}

frontend/src/lib/components/flows/content/FlowModuleScript.svelte

@@ -8,14 +8,15 @@
 
 	export let path: string
 	export let hash: string | undefined = undefined
-
 	export let showDate = false
+	export let showAllCode: boolean = true
+
 	let code: string
 	let language: SupportedLanguage
 	let lock: string | undefined = undefined
 	let date: string | undefined = undefined
-
 	let notFound = false
+
 	async function loadCode(path: string, hash: string | undefined) {
 		try {
 			notFound = false
@@ -33,6 +34,10 @@
 	}
 
 	$: path && loadCode(path, hash)
+
+	function toggleShowAll() {
+		showAllCode = !showAllCode
+	}
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
@@ -41,8 +46,13 @@
 	{/if}
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
-	{:else}
+	{:else if showAllCode}
 		<HighlightCode {language} {code} />
+	{:else}
+		<div class="code-container h-full">
+			<HighlightCode {language} code={code?.split('\n').slice(0, 10).join('\n')} />
+		</div>
+		<button on:click={toggleShowAll}>Show all</button>
 	{/if}
 
 	{#if lock}
@@ -50,3 +60,20 @@
 		<pre class="bg-surface-secondary text-xs p-2 overflow-auto w-full">{lock}</pre>
 	{/if}
 </div>
+
+<style>
+	.code-container {
+		position: relative;
+		overflow: hidden;
+	}
+	.code-container::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 100px;
+		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #2e3440);
+		pointer-events: none;
+	}
+</style>

frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte

@@ -3,7 +3,7 @@
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import InputTransformForm from '$lib/components/InputTransformForm.svelte'
 	import type SimpleEditor from '$lib/components/SimpleEditor.svelte'
-	import { getContext } from 'svelte'
+	import { getContext, tick } from 'svelte'
 
 	import { Alert, Tab, Tabs } from '$lib/components/common'
 	import { GroupService, type FlowModule } from '$lib/gen'
@@ -16,6 +16,7 @@
 	import Label from '$lib/components/Label.svelte'
 	import SuspendDrawer from './SuspendDrawer.svelte'
 	import EditableSchemaDrawer from '$lib/components/schema/EditableSchemaDrawer.svelte'
+	import AddProperty from '$lib/components/schema/AddProperty.svelte'
 
 	const { selectedId, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
 	const result = $flowStateStore[$selectedId]?.previewResult ?? {}
@@ -47,6 +48,8 @@
 			loadGroups()
 		}
 	}
+
+	let jsonView: boolean = false
 </script>
 
 <Section label="Suspend/Approval/Prompt" class="w-full">
@@ -190,33 +193,68 @@
 			{/if}
 		</div>
 	{:else}
-		<div class="grid grid-cols-4 mt-4 gap-2">
-			<div class="col-span-2 flex flex-col gap-2">
+		<div class="grid grid-cols-4 mt-4 gap-8">
+			<div class="col-span-2">
+				{#if flowModule?.suspend?.resume_form}
+					<EditableSchemaDrawer
+						bind:schema={flowModule.suspend.resume_form.schema}
+						on:change={(e) => {
+							const schema = e.detail
+
+							// If the schema is empty, remove the form
+							if (Object.keys(schema?.properties ?? {}).length === 0) {
+								tick().then(() => {
+									if (!flowModule.suspend) return
+									flowModule.suspend.resume_form = undefined
+								})
+							}
+						}}
+						{jsonView}
+					/>
+				{:else if emptyString($enterpriseLicense)}
+					<Alert type="warning" title="Adding a form to the approval page is an EE feature" />
+				{:else}
+					<div class="flex flex-col items-end mb-2 w-full">
+						<Toggle
+							checked={false}
+							label="JSON View"
+							size="xs"
+							options={{
+								right: 'JSON Editor',
+								rightTooltip:
+									'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
+							}}
+							lightMode
+							on:change={() => {
+								if (flowModule.suspend) {
+									flowModule.suspend.resume_form = {
+										schema: emptySchema()
+									}
+								}
+								jsonView = true
+							}}
+						/>
+					</div>
+					<AddProperty
+						on:change={(e) => {
+							jsonView = false
+							if (flowModule.suspend) {
+								flowModule.suspend.resume_form = {
+									schema: e.detail
+								}
+							}
+						}}
+						schema={{}}
+					/>
+				{/if}
+			</div>
+			<div class="col-span-2 flex flex-col gap-4">
 				{#if flowModule.suspend}
 					{#if emptyString($enterpriseLicense)}
 						<Alert type="warning" title="Adding a form to the approval page is an EE feature" />
 					{/if}
 
 					<div class="flex flex-col gap-2">
-						<Toggle
-							checked={Boolean(flowModule.suspend.resume_form)}
-							size="xs"
-							options={{
-								right: 'Add a form to the approval page'
-							}}
-							disabled={emptyString($enterpriseLicense)}
-							on:change={(e) => {
-								if (flowModule.suspend) {
-									if (e.detail) {
-										flowModule.suspend.resume_form = {
-											schema: emptySchema()
-										}
-									} else {
-										flowModule.suspend.resume_form = undefined
-									}
-								}
-							}}
-						/>
 						<div class="flex">
 							<SuspendDrawer text="Default args & Dynamic enums help" />
 						</div>
@@ -233,17 +271,6 @@
 					/>
 				{/if}
 			</div>
-			<div class="col-span-2">
-				{#if flowModule?.suspend?.resume_form}
-					<EditableSchemaDrawer bind:schema={flowModule.suspend.resume_form.schema} />
-				{:else}
-					<div
-						class="bg-gray-50 border-gray-200 border dark:bg-gray-900/40 dark:border-gray-700/40 rounded-md p-2 text-xs"
-					>
-						No form
-					</div>
-				{/if}
-			</div>
 		</div>
 	{/if}
 </Section>

frontend/src/lib/components/schema/AddProperty.svelte

@@ -149,6 +149,7 @@
 				throw Error('Argument not found!')
 			}
 			syncOrders()
+			dispatch('change', schema)
 		} catch (err) {
 			sendUserToast(`Could not delete argument: ${err}`, true)
 		}

frontend/src/lib/components/schema/EditableSchemaDrawer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Schema } from '$lib/common'
-	import { GripVertical, Pen } from 'lucide-svelte'
+	import { GripVertical, Pen, Trash } from 'lucide-svelte'
 	import EditableSchemaForm from '../EditableSchemaForm.svelte'
 	import { Drawer, DrawerContent } from '../common'
 	import AddProperty from './AddProperty.svelte'
@@ -56,7 +56,7 @@
 	}
 
 	const yOffset = 49
-	let jsonView: boolean = false
+	export let jsonView: boolean = false
 	let schemaString: string = JSON.stringify(schema, null, '\t')
 	let editor: SimpleEditor | undefined = undefined
 	let error: string | undefined = undefined
@@ -80,7 +80,17 @@
 	/>
 </div>
 
-<AddProperty on:change bind:schema bind:this={addProperty} />
+<AddProperty
+	on:change={() => {
+		if (jsonView) {
+			schemaString = JSON.stringify(schema, null, '\t')
+			editor?.setCode(schemaString)
+		}
+		dispatch('change', schema)
+	}}
+	bind:schema
+	bind:this={addProperty}
+/>
 
 {#if !jsonView}
 	<div
@@ -111,6 +121,15 @@
 							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 							<!-- svelte-ignore a11y-no-static-element-interactions -->
 							<div class="flex flex-row gap-1 item-center h-full justify-center">
+								<Button
+									iconOnly
+									size="xs2"
+									color="light"
+									startIcon={{ icon: Trash }}
+									on:click={() => {
+										addProperty?.handleDeleteArgument([item.value])
+									}}
+								/>
 								<Button
 									iconOnly
 									size="xs2"
@@ -172,6 +191,7 @@
 		</DrawerContent>
 	</Drawer>
 {:else}
+	<div class="mt-2" />
 	<SimpleEditor
 		bind:this={editor}
 		small