From adc84f06d97275b17bf77cb6c8d264ad28b0f6ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Thu, 29 Dec 2022 18:44:56 +0100
Subject: [PATCH] fix(frontend): Minor fixes in editor (#1054)

* fix(frontend): Script arguments window overflow

* fix(frontend): Consistent input editor font size

* fix(frontend): Fix script settings inconsistencies
---
 .../lib/components/InputTransformForm.svelte  | 135 +++++++++---------
 frontend/src/lib/components/Popover.svelte    |   2 +
 frontend/src/lib/components/SchemaForm.svelte |   2 +-
 .../src/lib/components/ScriptEditor.svelte    |   9 +-
 .../src/lib/components/TemplateEditor.svelte  |  16 +--
 .../flows/content/FlowModuleHeader.svelte     |  67 ++++-----
 .../flows/map/FlowModuleSchemaItem.svelte     |  65 +++++----
 7 files changed, 150 insertions(+), 146 deletions(-)

diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index cc0c1c90f8..c236372d9a 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -141,77 +141,73 @@
 				</span>
 			{/if}
 		</div>
-		<div class="flex flex-row-reverse gap-x-4 gap-y-1 flex-wrap">
-			<div>
-				<Button
-					variant="contained"
-					color="blue"
-					size="xs"
-					on:click={() => {
-						focusProp(argName, 'connect', (path) => {
-							connectProperty(path)
-							return true
-						})
-					}}>Connect &rightarrow;</Button
-				>
-			</div>
-			<div>
-				<ToggleButtonGroup
-					bind:selected={propertyType}
-					on:selected={(e) => {
-						const staticTemplate = isStaticTemplate(inputCat)
-						if (e.detail === 'javascript') {
-							if (arg.expr == undefined) {
-								arg.expr = getDefaultExpr(
-									argName,
-									previousModuleId,
-									staticTemplate
-										? `\`${arg.value ?? ''}\``
-										: arg.value
-										? JSON.stringify(arg.value, null, 4)
-										: ''
-								)
-							}
-
-							arg.value = undefined
-							propertyType = 'javascript'
-							arg.type = 'javascript'
-						} else {
-							if (staticTemplate) {
-								arg.value = codeToStaticTemplate(arg.expr)
-								setPropertyType(arg.value)
-							} else {
-								arg.type = 'static'
-								arg.value = undefined
-								arg.expr = undefined
-							}
-							propertyType = 'static'
+		<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap">
+			<ToggleButtonGroup
+				bind:selected={propertyType}
+				on:selected={(e) => {
+					const staticTemplate = isStaticTemplate(inputCat)
+					if (e.detail === 'javascript') {
+						if (arg.expr == undefined) {
+							arg.expr = getDefaultExpr(
+								argName,
+								previousModuleId,
+								staticTemplate
+									? `\`${arg.value ?? ''}\``
+									: arg.value
+									? JSON.stringify(arg.value, null, 4)
+									: ''
+							)
 						}
-					}}
-				>
-					{#if isStaticTemplate(inputCat)}
-						<ToggleButton light position="left" value="static" size="xs">
-							{'${} '}Templatable &nbsp; <Tooltip
-								>Write javascript expressions between "{openBracket}" and "{closeBracket}". You may
-								refer to contextual objects like 'flow_input', or 'result' or functions like
-								'resource' and 'variable'
-							</Tooltip></ToggleButton
-						>
-					{:else}
-						<ToggleButton light position="left" value="static" size="xs">Static</ToggleButton>
-					{/if}
 
-					<ToggleButton
-						light
-						position="right"
-						value="javascript"
-						startIcon={{ icon: faCode }}
-						size="xs"
+						arg.value = undefined
+						propertyType = 'javascript'
+						arg.type = 'javascript'
+					} else {
+						if (staticTemplate) {
+							arg.value = codeToStaticTemplate(arg.expr)
+							setPropertyType(arg.value)
+						} else {
+							arg.type = 'static'
+							arg.value = undefined
+							arg.expr = undefined
+						}
+						propertyType = 'static'
+					}
+				}}
+			>
+				{#if isStaticTemplate(inputCat)}
+					<ToggleButton light position="left" value="static" size="xs">
+						{'${} '}Templatable &nbsp; <Tooltip
+							>Write javascript expressions between "{openBracket}" and "{closeBracket}". You may
+							refer to contextual objects like 'flow_input', or 'result' or functions like
+							'resource' and 'variable'
+						</Tooltip></ToggleButton
 					>
-						Dynamic (JS)
-					</ToggleButton>
-				</ToggleButtonGroup>
-			</div>
+				{:else}
+					<ToggleButton light position="left" value="static" size="xs">Static</ToggleButton>
+				{/if}
+
+				<ToggleButton
+					light
+					position="right"
+					value="javascript"
+					startIcon={{ icon: faCode }}
+					size="xs"
+				>
+					Dynamic (JS)
+				</ToggleButton>
+			</ToggleButtonGroup>
+			<Button
+				variant="contained"
+				color="blue"
+				size="xs"
+				on:click={() => {
+					focusProp(argName, 'connect', (path) => {
+						connectProperty(path)
+						return true
+					})
+				}}>Connect &rightarrow;</Button
+			>
 		</div>
 	</div>
 	<div class="max-w-xs" />
@@ -235,6 +231,7 @@
 					{extraLib}
 					on:focus={onFocus}
 					bind:code={arg.value}
+					fontSize={12}
 				/>
 			</div>
 		{:else if propertyType === undefined || propertyType == 'static'}
@@ -288,5 +285,5 @@
 	</div>
 	<div class="mb-6" />
 {:else}
-	<p class="text-sm text-gray-700">Arg at {argName} is undefined</p>
+	<p class="text-sm text-gray-700">Argument at {argName} is undefined</p>
 {/if}
diff --git a/frontend/src/lib/components/Popover.svelte b/frontend/src/lib/components/Popover.svelte
index 047887493e..d18a838809 100644
--- a/frontend/src/lib/components/Popover.svelte
+++ b/frontend/src/lib/components/Popover.svelte
@@ -45,6 +45,8 @@
 	use:popperRef
 	on:mouseenter={open}
 	on:mouseleave={close}
+	on:click
+	class={$$props.class}
 >
 	<slot />
 </button>
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index 18950c3e13..7d11e26a1b 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -95,7 +95,7 @@
 						bind:pickForField
 					/>
 				{:else}
-					Expected args to be an object, got {JSON.stringify(args)} instead
+					Expected argument to be an object, got {JSON.stringify(args)} instead
 				{/if}
 			</div>
 		{/each}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 0b4bc9665f..346276cb9f 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -192,12 +192,15 @@
 							classes: 'animate-none'
 						}}
 					>
-						{#if testIsLoading}Running{:else}Test <Kbd class="ml-4 text-5xs -my-0.5">Ctrl+Enter</Kbd
-							>{/if}
+						{#if testIsLoading}
+							Running
+						{:else}
+							Test <Kbd class="ml-4 text-5xs -my-0.5">Ctrl+Enter</Kbd>
+						{/if}
 					</Button>
 				{/if}
 			</div>
-			<Splitpanes horizontal>
+			<Splitpanes horizontal class="!max-h-[calc(100%-43px)]">
 				<Pane size={33}>
 					<div class="px-2">
 						<div class="break-words relative font-sans">
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index 527226a528..1e25091ed8 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { browser, dev } from '$app/environment'
-
 	import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
-
 	import { buildWorkerDefinition } from 'monaco-editor-workers'
-
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 	import {
 		convertKind,
@@ -14,9 +11,7 @@
 		editorConfig,
 		updateOptions
 	} from '$lib/editorUtils'
-
 	import { languages, editor as meditor, Uri as mUri, Range } from 'monaco-editor'
-
 	import libStdContent from '$lib/es5.d.ts.txt?raw'
 
 	languages.typescript.javascriptDefaults.setCompilerOptions({
@@ -373,6 +368,7 @@
 	export let extraLib: string = ''
 	export let autoHeight = true
 	export let fixedOverflowWidgets = true
+	export let fontSize = 16
 
 	const lang = 'template'
 	const dispatch = createEventDispatcher()
@@ -425,7 +421,7 @@
 		editor = meditor.create(divEl as HTMLDivElement, {
 			...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
 			lineNumbers: 'off',
-			fontSize: 16,
+			fontSize,
 			suggestOnTriggerCharacters: true,
 			lineDecorationsWidth: 20
 		})
@@ -577,10 +573,4 @@
 	})
 </script>
 
-<div bind:this={divEl} class="{$$props.class} editor templatable-editor" bind:clientWidth={width} />
-
-<style>
-	.editor {
-		@apply rounded-lg mx-0.5;
-	}
-</style>
+<div bind:this={divEl} class="{$$props.class} rounded-lg mx-0.5" bind:clientWidth={width} />
diff --git a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
index 2352a392f0..f43eb9e4c7 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
@@ -5,7 +5,8 @@
 	import { faBed, faCodeBranch, faSave, faStop } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
-	import { PhoneIncoming, Repeat } from 'lucide-svelte'
+	import { Bed, PhoneIncoming, Repeat, Square } from 'lucide-svelte'
+	import Popover from '../../Popover.svelte'
 
 	export let module: FlowModule
 
@@ -18,30 +19,46 @@
 
 <div class="flex flex-row space-x-2" bind:clientWidth={width}>
 	{#if module.value.type === 'script' || module.value.type === 'rawscript'}
-		<button
-			class={classNames('badge', module.stop_after_if ? 'badge-on' : 'badge-off')}
-			on:click={() => dispatch('toggleStopAfterIf')}
-		>
-			<Icon data={faStop} scale={0.8} />
-		</button>
-		<button
-			class={classNames('badge', moduleRetry ? 'badge-on' : 'badge-off', 'center-center')}
+		<Popover
+			class="center-center rounded border p-2 duration-200
+			{moduleRetry
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
 			on:click={() => dispatch('toggleRetry')}
 		>
 			<Repeat size={14} />
-		</button>
-		<button
-			class={classNames('badge', Boolean(module.sleep) ? 'badge-on' : 'badge-off')}
-			on:click={() => dispatch('toggleSleep')}
+			<svelte:fragment slot="text">Retries</svelte:fragment>
+		</Popover>
+		<Popover
+			class="center-center rounded border p-2 duration-200
+			{module.stop_after_if
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+			on:click={() => dispatch('toggleStopAfterIf')}
 		>
-			<Icon data={faBed} scale={0.8} />
-		</button>
-		<button
-			class={classNames('badge', Boolean(module.suspend) ? 'badge-on' : 'badge-off')}
+			<Square size={14} />
+			<svelte:fragment slot="text">Early stop/break</svelte:fragment>
+		</Popover>
+		<Popover
+			class="center-center rounded border p-2 duration-200
+			{module.suspend
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
 			on:click={() => dispatch('toggleSuspend')}
 		>
 			<PhoneIncoming size={14} />
-		</button>
+			<svelte:fragment slot="text">Suspend</svelte:fragment>
+		</Popover>
+		<Popover
+			class="center-center rounded border p-2 duration-200
+			{module.sleep
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+			on:click={() => dispatch('toggleSleep')}
+		>
+			<Bed size={14} />
+			<svelte:fragment slot="text">Sleep</svelte:fragment>
+		</Popover>
 	{/if}
 	{#if module.value.type === 'script'}
 		<div class="w-2" />
@@ -70,17 +87,3 @@
 		</Button>
 	{/if}
 </div>
-
-<style>
-	.badge {
-		@apply whitespace-nowrap text-sm font-medium border px-2.5 py-0.5 rounded cursor-pointer flex items-center;
-	}
-
-	.badge-on {
-		@apply bg-blue-100 text-blue-800 hover:bg-blue-200;
-	}
-
-	.badge-off {
-		@apply bg-gray-100 text-gray-800 hover:bg-gray-200;
-	}
-</style>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 83d2527260..3844e86d36 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -2,10 +2,9 @@
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import { classNames } from '$lib/utils'
-	import { faBed, faRepeat, faStop, faTimesCircle } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
-	import Icon from 'svelte-awesome'
-	import { PhoneIncoming, Repeat } from 'lucide-svelte'
+	import { fade } from 'svelte/transition'
+	import { Bed, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte'
 
 	export let isFirst: boolean = false
 	export let isLast: boolean = false
@@ -43,39 +42,52 @@
 		<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-20">
 			{#if retry}
 				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1 center-center">
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
 						<Repeat size={14} />
 					</div>
-					<span slot="text">Retries</span>
+					<svelte:fragment slot="text">Retries</svelte:fragment>
 				</Popover>
 			{/if}
 			{#if earlyStop}
 				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1">
-						<Icon scale={0.8} data={faStop} />
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
+						<Square size={14} />
 					</div>
-					<span slot="text">Early Stop/Break</span>
-				</Popover>
-			{/if}
-			{#if sleep}
-				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1">
-						<Icon scale={0.8} data={faBed} />
-					</div>
-					<span slot="text">Sleep</span>
+					<svelte:fragment slot="text">Early stop/break</svelte:fragment>
 				</Popover>
 			{/if}
 			{#if suspend}
 				<Popover notClickable>
-					<div class="bg-white rounded border text-gray-700 px-1 center-center">
-						<PhoneIncoming size={12} />
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
+						<PhoneIncoming size={14} />
 					</div>
-					<span slot="text">Suspend</span>
+					<svelte:fragment slot="text">Suspend</svelte:fragment>
+				</Popover>
+			{/if}
+			{#if sleep}
+				<Popover notClickable>
+					<div
+						transition:fade={{duration: 200}}
+						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					>
+						<Bed size={14} />
+					</div>
+					<svelte:fragment slot="text">Sleep</svelte:fragment>
 				</Popover>
 			{/if}
 		</div>
 		<div
-			class="flex justify-between items-center w-full overflow-hidden rounded-sm border border-gray-400 p-2 bg-white text-2xs module"
+			class="flex justify-between items-center w-full overflow-hidden rounded-sm 
+			border border-gray-400 p-2 bg-white text-2xs module"
 		>
 			{#if $$slots.icon}
 				<slot name="icon" />
@@ -88,16 +100,13 @@
 				{/if}
 				{#if deletable}
 					<button
-						class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center bg-white {selected
-							? ''
-							: '!hidden'}"
+						class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center 
+						border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white 
+						hover:border-red-700 {selected ? '' : '!hidden'}"
 						on:click={(event) => dispatch('delete', event)}
-						><Icon
-							data={faTimesCircle}
-							class="text-gray-600 hover:text-red-600"
-							scale={0.9}
-						/></button
 					>
+						<X size={12} strokeWidth={2} />
+					</button>
 				{/if}
 			</div>
 		</div>