From 42c8eec5cf2bfefb939d519b16dd6556513b11a4 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 31 Dec 2024 16:51:28 +0100
Subject: [PATCH] clean code

---
 .../lib/components/SavedInputsPicker.svelte   | 322 ++++++------------
 .../lib/components/SavedInputsPickerV2.svelte | 206 -----------
 .../src/lib/components/ScriptEditor.svelte    |   1 -
 .../components/flows/content/FlowInput.svelte |   4 +-
 .../components/triggers/CaptureButton.svelte  |   4 +-
 .../components/triggers/CaptureTable.svelte   |  17 +-
 6 files changed, 114 insertions(+), 440 deletions(-)
 delete mode 100644 frontend/src/lib/components/SavedInputsPickerV2.svelte

diff --git a/frontend/src/lib/components/SavedInputsPicker.svelte b/frontend/src/lib/components/SavedInputsPicker.svelte
index 8f6df925dcd66..e0a470b7c11af 100644
--- a/frontend/src/lib/components/SavedInputsPicker.svelte
+++ b/frontend/src/lib/components/SavedInputsPicker.svelte
@@ -1,35 +1,24 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
-	import { InputService, type Input, type RunnableType, type CreateInput } from '$lib/gen/index.js'
+	import { InputService, type Input, type RunnableType } from '$lib/gen/index.js'
 	import { userStore, workspaceStore } from '$lib/stores.js'
-
-	import { classNames, displayDate, sendUserToast } from '$lib/utils.js'
-	import { createEventDispatcher } from 'svelte'
-	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
-	import { ArrowLeftIcon, Edit, Save, X } from 'lucide-svelte'
+	import { classNames, sendUserToast } from '$lib/utils.js'
+	import { createEventDispatcher, onDestroy } from 'svelte'
+	import { Edit, X } from 'lucide-svelte'
 	import Toggle from './Toggle.svelte'
-	import Tooltip from './Tooltip.svelte'
 	import Skeleton from './common/skeleton/Skeleton.svelte'
 
 	export let scriptHash: string | null = null
 	export let scriptPath: string | null = null
 	export let flowPath: string | null = null
-	export let canSaveInputs: boolean = true
-
-	// Are the current Inputs valid and able to be saved?
-	export let isValid: boolean
-	export let args: object
 
 	interface EditableInput extends Input {
 		isEditing?: boolean
 		isSaving?: boolean
 	}
 
-	let previousInputs: Input[] | undefined = undefined
 	let savedInputs: EditableInput[] | undefined = undefined
-	let selectedInput: Input | null
-	let savingInputs = false
+	let selectedInput: EditableInput | null
 	const dispatch = createEventDispatcher()
 
 	$: runnableId = scriptHash || scriptPath || flowPath || undefined
@@ -43,23 +32,6 @@
 		? 'FlowPath'
 		: undefined
 
-	let hasAlreadyFailed = false
-	async function loadInputHistory() {
-		try {
-			previousInputs = await InputService.getInputHistory({
-				workspace: $workspaceStore!,
-				runnableId,
-				runnableType,
-				perPage: 10
-			})
-		} catch (e) {
-			console.error(e)
-			if (hasAlreadyFailed) return
-			hasAlreadyFailed = true
-			sendUserToast(`Failed to load input history: ${e}`, true)
-		}
-	}
-
 	async function loadSavedInputs() {
 		savedInputs = await InputService.listInputs({
 			workspace: $workspaceStore!,
@@ -69,38 +41,6 @@
 		})
 	}
 
-	async function saveInput(args: object) {
-		savingInputs = true
-
-		const requestBody: CreateInput = {
-			name: 'Saved ' + displayDate(new Date()),
-			args: args as any
-		}
-
-		try {
-			let id = await InputService.createInput({
-				workspace: $workspaceStore!,
-				runnableId,
-				runnableType,
-				requestBody
-			})
-
-			const input = {
-				id,
-				created_by: '',
-				created_at: new Date().toISOString(),
-				is_public: false,
-				...requestBody
-			}
-			savedInputs = [input, ...(savedInputs ?? [])]
-		} catch (err) {
-			console.error(err)
-			sendUserToast(`Failed to save Input: ${err}`, true)
-		}
-
-		savingInputs = false
-	}
-
 	async function updateInput(input: EditableInput) {
 		input.isSaving = true
 
@@ -139,17 +79,10 @@
 
 	$: {
 		if ($workspaceStore && (scriptHash || scriptPath || flowPath)) {
-			loadInputHistory()
 			loadSavedInputs()
 		}
 	}
 
-	let previewArgs: any = undefined
-
-	function selectArgs(selected_args: any) {
-		previewArgs = selected_args
-	}
-
 	async function loadLargeArgs(
 		id: string | undefined,
 		input: boolean | undefined,
@@ -163,164 +96,111 @@
 			allowLarge
 		})
 	}
+
+	let selectedArgs: any = undefined
+	async function handleSelect(input: EditableInput) {
+		if (input.isEditing) return
+
+		if (selectedInput === input) {
+			selectedInput = null
+			selectedArgs = undefined
+			dispatch('select', undefined)
+		} else {
+			selectedInput = input
+			selectedArgs = await loadLargeArgs(input.id, true, false)
+			dispatch('select', selectedArgs)
+		}
+	}
+
+	onDestroy(() => {
+		selectedInput = null
+		selectedArgs = undefined
+		dispatch('select', undefined)
+	})
 </script>
 
-<div class="min-w-[300px] h-full">
-	<Splitpanes horizontal={true}>
-		<Pane>
-			<div class="w-full flex flex-col gap-4 p-2">
-				<div class="w-full flex justify-between items-center gap-4 flex-wrap">
-					<span class="text-sm font-semibold flex-shrink-0"
-						>Saved Inputs test<Tooltip
-							>Shared inputs are available to anyone with access to the script</Tooltip
-						></span
-					>
-					{#if canSaveInputs}
-						<Button
-							on:click={() => saveInput(args)}
-							disabled={!isValid}
-							loading={savingInputs}
-							startIcon={{ icon: Save }}
-							color="light"
-							size="xs"
+<div class="w-full flex flex-col gap-1 h-full overflow-y-auto p">
+	{#if savedInputs === undefined}
+		<Skeleton layout={[[8]]} />
+	{:else if savedInputs?.length > 0}
+		{#each savedInputs as i}
+			<button
+				class={classNames(
+					`w-full flex items-center text-sm group justify-between gap-4 py-1.5 px-4 text-left border rounded-sm transition-all`,
+					selectedInput === i ? 'bg-surface-selected' : 'hover:bg-surface-hover'
+				)}
+				on:click={async () => {
+					await handleSelect(i)
+				}}
+			>
+				<div class="w-full h-full items-center justify-between flex gap-1 min-w-0">
+					{#if i.isEditing}
+						<form
+							on:submit={() => {
+								updateInput(i)
+								i.isEditing = false
+								i.isSaving = false
+							}}
+							class="w-full"
 						>
-							<span>Save Current Input</span>
-						</Button>
+							<input type="text" bind:value={i.name} class="text-secondary" />
+						</form>
+					{:else}
+						<small class="whitespace-nowrap overflow-hidden text-ellipsis flex-shrink text-left">
+							{i.name}
+						</small>
 					{/if}
-				</div>
-
-				<div class="w-full flex flex-col gap-1 h-full overflow-y-auto p">
-					{#if savedInputs === undefined}
-						<Skeleton layout={[[8]]} />
-					{:else if savedInputs?.length > 0}
-						{#each savedInputs as i}
-							<button
-								class={classNames(
-									`w-full flex items-center text-sm group justify-between gap-4 py-1.5 px-4 text-left border rounded-sm hover:bg-surface-hover transition-all`,
-									selectedInput === i ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : ''
-								)}
-								on:click={async () => {
+					{#if i.created_by == $userStore?.username || $userStore?.is_admin || $userStore?.is_super_admin}
+						<div class="items-center flex gap-2">
+							{#if !i.isEditing}
+								<div class="group-hover:block hidden -my-2">
+									<Toggle
+										size="xs"
+										options={{ right: 'shared' }}
+										bind:checked={i.is_public}
+										on:change={() => {
+											updateInput(i)
+										}}
+									/>
+								</div>
+							{/if}
+
+							<Button
+								loading={i.isSaving}
+								color="light"
+								size="xs"
+								variant="border"
+								spacingSize="xs2"
+								btnClasses={'group-hover:block hidden -my-2'}
+								on:click={(e) => {
+									e.stopPropagation()
+									i.isEditing = !i.isEditing
 									if (!i.isEditing) {
-										if (selectedInput === i) {
-											selectedInput = null
-										} else {
-											selectedInput = i
-										}
+										updateInput(i)
+										i.isSaving = false
 									}
-									selectArgs(await loadLargeArgs(i.id, true, false))
 								}}
 							>
-								<div class="w-full h-full items-center justify-between flex gap-1 min-w-0">
-									{#if i.isEditing}
-										<form
-											on:submit={() => {
-												updateInput(i)
-												i.isEditing = false
-												i.isSaving = false
-											}}
-											class="w-full"
-										>
-											<input type="text" bind:value={i.name} class="text-secondary" />
-										</form>
-									{:else}
-										<small
-											class="whitespace-nowrap overflow-hidden text-ellipsis flex-shrink text-left"
-										>
-											{i.name}
-										</small>
-									{/if}
-									{#if i.created_by == $userStore?.username || $userStore?.is_admin || $userStore?.is_super_admin}
-										<div class="items-center flex gap-2">
-											{#if !i.isEditing}
-												<div class="group-hover:block hidden -my-2">
-													<Toggle
-														size="xs"
-														options={{ right: 'shared' }}
-														bind:checked={i.is_public}
-														on:change={() => {
-															updateInput(i)
-														}}
-													/>
-												</div>
-											{/if}
-
-											<Button
-												loading={i.isSaving}
-												color="light"
-												size="xs"
-												variant="border"
-												spacingSize="xs2"
-												btnClasses={'group-hover:block hidden -my-2'}
-												on:click={(e) => {
-													e.stopPropagation()
-													i.isEditing = !i.isEditing
-													if (!i.isEditing) {
-														updateInput(i)
-														i.isSaving = false
-													}
-												}}
-											>
-												<Edit class="w-4 h-4" />
-											</Button>
-											<Button
-												color="red"
-												size="xs"
-												spacingSize="xs2"
-												variant="border"
-												btnClasses={i.isEditing ? 'block' : 'group-hover:block hidden -my-2'}
-												on:click={() => deleteInput(i)}
-											>
-												<X class="w-4 h-4" />
-											</Button>
-										</div>
-									{:else}
-										<span class="text-xs text-tertiary">By {i.created_by}</span>
-									{/if}
-								</div>
-							</button>
-						{/each}
+								<Edit class="w-4 h-4" />
+							</Button>
+							<Button
+								color="red"
+								size="xs"
+								spacingSize="xs2"
+								variant="border"
+								btnClasses={i.isEditing ? 'block' : 'group-hover:block hidden -my-2'}
+								on:click={() => deleteInput(i)}
+							>
+								<X class="w-4 h-4" />
+							</Button>
+						</div>
 					{:else}
-						<div class="text-center text-tertiary">No saved Inputs</div>
+						<span class="text-xs text-tertiary">By {i.created_by}</span>
 					{/if}
 				</div>
-			</div>
-		</Pane>
-
-		<Pane>
-			<div class="h-full overflow-hidden min-h-0 flex flex-col justify-between">
-				<div class="w-full flex flex-col min-h-0 gap-2 px-2 py-2 grow">
-					<div class="w-full flex flex-col">
-						<Button
-							color="blue"
-							btnClasses="w-full"
-							size="sm"
-							spacingSize="xl"
-							on:click={async () => {
-								dispatch('selected_args', await loadLargeArgs(selectedInput?.id, undefined, false))
-							}}
-							disabled={!selectedInput}
-						>
-							<ArrowLeftIcon class="w-4 h-4 mr-2" />
-							Use Input
-						</Button>
-					</div>
-					<div class="w-full min-h-0 grow overflow-auto">
-						{#if typeof previewArgs == 'string' && previewArgs == 'WINDMILL_TOO_BIG'}
-							<div class="text-secondary mt-2">
-								Payload too big to preview but can still be loaded</div
-							>
-						{:else if Object.keys(previewArgs || {}).length > 0}
-							<div class=" overflow-auto h-full p-2">
-								<ObjectViewer json={previewArgs} />
-							</div>
-						{:else}
-							<div class="text-center text-tertiary">
-								Select an Input to preview scripts arguments
-							</div>
-						{/if}
-					</div>
-				</div>
-			</div></Pane
-		>
-	</Splitpanes>
+			</button>
+		{/each}
+	{:else}
+		<div class="text-center text-tertiary">No saved Inputs</div>
+	{/if}
 </div>
diff --git a/frontend/src/lib/components/SavedInputsPickerV2.svelte b/frontend/src/lib/components/SavedInputsPickerV2.svelte
deleted file mode 100644
index e0a470b7c11af..0000000000000
--- a/frontend/src/lib/components/SavedInputsPickerV2.svelte
+++ /dev/null
@@ -1,206 +0,0 @@
-<script lang="ts">
-	import { Button } from '$lib/components/common'
-	import { InputService, type Input, type RunnableType } from '$lib/gen/index.js'
-	import { userStore, workspaceStore } from '$lib/stores.js'
-	import { classNames, sendUserToast } from '$lib/utils.js'
-	import { createEventDispatcher, onDestroy } from 'svelte'
-	import { Edit, X } from 'lucide-svelte'
-	import Toggle from './Toggle.svelte'
-	import Skeleton from './common/skeleton/Skeleton.svelte'
-
-	export let scriptHash: string | null = null
-	export let scriptPath: string | null = null
-	export let flowPath: string | null = null
-
-	interface EditableInput extends Input {
-		isEditing?: boolean
-		isSaving?: boolean
-	}
-
-	let savedInputs: EditableInput[] | undefined = undefined
-	let selectedInput: EditableInput | null
-	const dispatch = createEventDispatcher()
-
-	$: runnableId = scriptHash || scriptPath || flowPath || undefined
-
-	let runnableType: RunnableType | undefined = undefined
-	$: runnableType = scriptHash
-		? 'ScriptHash'
-		: scriptPath
-		? 'ScriptPath'
-		: flowPath
-		? 'FlowPath'
-		: undefined
-
-	async function loadSavedInputs() {
-		savedInputs = await InputService.listInputs({
-			workspace: $workspaceStore!,
-			runnableId,
-			runnableType,
-			perPage: 10
-		})
-	}
-
-	async function updateInput(input: EditableInput) {
-		input.isSaving = true
-
-		try {
-			await InputService.updateInput({
-				workspace: $workspaceStore!,
-				requestBody: {
-					id: input.id,
-					name: input.name,
-					is_public: input.is_public
-				}
-			})
-		} catch (err) {
-			console.error(err)
-			sendUserToast(`Failed to update Input: ${err}`, true)
-		}
-
-		input.isSaving = false
-	}
-
-	async function deleteInput(input: Input) {
-		try {
-			await InputService.deleteInput({
-				workspace: $workspaceStore!,
-				input: input.id
-			})
-			savedInputs = (savedInputs ?? []).filter((i) => i.id !== input.id)
-			if (selectedInput === input) {
-				selectedInput = null
-			}
-		} catch (err) {
-			console.error(err)
-			sendUserToast(`Failed to delete Input: ${err}`, true)
-		}
-	}
-
-	$: {
-		if ($workspaceStore && (scriptHash || scriptPath || flowPath)) {
-			loadSavedInputs()
-		}
-	}
-
-	async function loadLargeArgs(
-		id: string | undefined,
-		input: boolean | undefined,
-		allowLarge: boolean
-	): Promise<any> {
-		if (!id) return
-		return await InputService.getArgsFromHistoryOrSavedInput({
-			jobOrInputId: id,
-			workspace: $workspaceStore!,
-			input,
-			allowLarge
-		})
-	}
-
-	let selectedArgs: any = undefined
-	async function handleSelect(input: EditableInput) {
-		if (input.isEditing) return
-
-		if (selectedInput === input) {
-			selectedInput = null
-			selectedArgs = undefined
-			dispatch('select', undefined)
-		} else {
-			selectedInput = input
-			selectedArgs = await loadLargeArgs(input.id, true, false)
-			dispatch('select', selectedArgs)
-		}
-	}
-
-	onDestroy(() => {
-		selectedInput = null
-		selectedArgs = undefined
-		dispatch('select', undefined)
-	})
-</script>
-
-<div class="w-full flex flex-col gap-1 h-full overflow-y-auto p">
-	{#if savedInputs === undefined}
-		<Skeleton layout={[[8]]} />
-	{:else if savedInputs?.length > 0}
-		{#each savedInputs as i}
-			<button
-				class={classNames(
-					`w-full flex items-center text-sm group justify-between gap-4 py-1.5 px-4 text-left border rounded-sm transition-all`,
-					selectedInput === i ? 'bg-surface-selected' : 'hover:bg-surface-hover'
-				)}
-				on:click={async () => {
-					await handleSelect(i)
-				}}
-			>
-				<div class="w-full h-full items-center justify-between flex gap-1 min-w-0">
-					{#if i.isEditing}
-						<form
-							on:submit={() => {
-								updateInput(i)
-								i.isEditing = false
-								i.isSaving = false
-							}}
-							class="w-full"
-						>
-							<input type="text" bind:value={i.name} class="text-secondary" />
-						</form>
-					{:else}
-						<small class="whitespace-nowrap overflow-hidden text-ellipsis flex-shrink text-left">
-							{i.name}
-						</small>
-					{/if}
-					{#if i.created_by == $userStore?.username || $userStore?.is_admin || $userStore?.is_super_admin}
-						<div class="items-center flex gap-2">
-							{#if !i.isEditing}
-								<div class="group-hover:block hidden -my-2">
-									<Toggle
-										size="xs"
-										options={{ right: 'shared' }}
-										bind:checked={i.is_public}
-										on:change={() => {
-											updateInput(i)
-										}}
-									/>
-								</div>
-							{/if}
-
-							<Button
-								loading={i.isSaving}
-								color="light"
-								size="xs"
-								variant="border"
-								spacingSize="xs2"
-								btnClasses={'group-hover:block hidden -my-2'}
-								on:click={(e) => {
-									e.stopPropagation()
-									i.isEditing = !i.isEditing
-									if (!i.isEditing) {
-										updateInput(i)
-										i.isSaving = false
-									}
-								}}
-							>
-								<Edit class="w-4 h-4" />
-							</Button>
-							<Button
-								color="red"
-								size="xs"
-								spacingSize="xs2"
-								variant="border"
-								btnClasses={i.isEditing ? 'block' : 'group-hover:block hidden -my-2'}
-								on:click={() => deleteInput(i)}
-							>
-								<X class="w-4 h-4" />
-							</Button>
-						</div>
-					{:else}
-						<span class="text-xs text-tertiary">By {i.created_by}</span>
-					{/if}
-				</div>
-			</button>
-		{/each}
-	{:else}
-		<div class="text-center text-tertiary">No saved Inputs</div>
-	{/if}
-</div>
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 07ab772ff912e..262380e7f1abf 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -473,7 +473,6 @@
 								<div class="h-full p-2">
 									<CaptureTable
 										bind:this={captureTable}
-										captureType="all"
 										{hasPreprocessor}
 										canHavePreprocessor={lang === 'bun' || lang === 'deno' || lang === 'python3'}
 										isFlow={false}
diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index 448c0c7f86e7f..b55a5fe466acf 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -13,7 +13,7 @@
 	import AddPropertyV2 from '$lib/components/schema/AddPropertyV2.svelte'
 	import FlowInputViewer from '$lib/components/FlowInputViewer.svelte'
 	import HistoricInpts from '$lib/components/HistoricInpts.svelte'
-	import SavedInputsPickerV2 from '$lib/components/SavedInputsPickerV2.svelte'
+	import SavedInputsPicker from '$lib/components/SavedInputsPicker.svelte'
 	import { CornerDownLeft, Pen, X, ChevronDown, Plus } from 'lucide-svelte'
 	import FlowPreviewContent from '$lib/components/FlowPreviewContent.svelte'
 	import FlowInputEditor from './FlowInputEditor.svelte'
@@ -377,7 +377,7 @@
 							<svelete:fragment slot="header">
 								<Tooltip>Shared inputs are available to anyone with access to the script</Tooltip>
 							</svelete:fragment>
-							<SavedInputsPickerV2
+							<SavedInputsPicker
 								flowPath={initialPath}
 								on:select={(e) => {
 									payloadData = e.detail
diff --git a/frontend/src/lib/components/triggers/CaptureButton.svelte b/frontend/src/lib/components/triggers/CaptureButton.svelte
index d0afe115c6186..3c582a8115c74 100644
--- a/frontend/src/lib/components/triggers/CaptureButton.svelte
+++ b/frontend/src/lib/components/triggers/CaptureButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import { Button } from '$lib/components/common'
-	import { Webhook, Route, Unplug, Mail, Plus } from 'lucide-svelte'
+	import { Webhook, Route, Unplug, Mail } from 'lucide-svelte'
 	import KafkaIcon from '$lib/components/icons/KafkaIcon.svelte'
 	import { enterpriseLicense } from '$lib/stores'
 	import { type CaptureTriggerKind } from '$lib/gen'
@@ -29,7 +29,7 @@
 	<svelte:fragment slot="trigger">
 		{#if small}
 			<RoundIconButton>
-				<CaptureIcon size={14} />
+				<CaptureIcon />
 			</RoundIconButton>
 		{:else}
 			<Button
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index 6a589ac5b2318..0c4bc4b28e65d 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -23,7 +23,7 @@
 	export let hasPreprocessor = false
 	export let canHavePreprocessor = false
 	export let isFlow = false
-	export let captureType: CaptureTriggerKind | 'all' = 'webhook'
+	export let captureType: CaptureTriggerKind | undefined = 'webhook'
 	export let headless = false
 	export let addButton = false
 	export let hideCapturesWhenEmpty = false
@@ -70,7 +70,7 @@
 			workspace: $workspaceStore!,
 			runnableKind: isFlow ? 'flow' : 'script',
 			path,
-			triggerKind: captureType !== 'all' ? captureType : undefined
+			triggerKind: captureType
 		})
 	}
 	refreshCaptures()
@@ -86,7 +86,7 @@
 		)}
 	>
 		<svelte:fragment slot="header">
-			{#if addButton && captureType !== 'all'}
+			{#if addButton && captureType !== undefined}
 				<Button
 					size="xs2"
 					color="light"
@@ -94,10 +94,11 @@
 					iconOnly
 					startIcon={{ icon: Plus }}
 					on:click={() => {
-						dispatch('openTriggers', {
-							kind: captureTriggerKindToTriggerKind(captureType),
-							config: {}
-						})
+						captureType &&
+							dispatch('openTriggers', {
+								kind: captureTriggerKindToTriggerKind(captureType),
+								config: {}
+							})
 					}}
 				/>
 			{/if}
@@ -120,7 +121,7 @@
 		<div class="flex flex-col gap-1 pt-2 grow overflow-y-auto">
 			{#if captures.length === 0}
 				<div class="text-xs text-secondary">
-					{captureType === 'all' ? 'No captures yet' : `No ${captureType} captures yet`}
+					{!captureType ? 'No captures yet' : `No ${captureType} captures yet`}
 				</div>
 			{:else}
 				{#each captures as capture}