Skip to content

Commit b217e43

Browse files
Guilhem-lmGuilhem-lm
committed
feat(frontend): use new saved inputs picker
1 parent 41ea843 commit b217e43

File tree

9 files changed

+184
-84
lines changed

9 files changed

+184
-84
lines changed

‎frontend/src/lib/components/HistoricInputs.svelte

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@
1010
import { clickOutside } from '$lib/utils'
1111
import InfiniteList from './InfiniteList.svelte'
1212
13-
export let scriptHash: string | null = null
14-
export let scriptPath: string | null = null
15-
export let flowPath: string | null = null
13+
export let runnableId: string | undefined = undefined
14+
export let runnableType: RunnableType | undefined = undefined
1615
1716
const dispatch = createEventDispatcher()
1817
@@ -23,19 +22,7 @@
2322
let infiniteList: InfiniteList | undefined = undefined
2423
let loadInputsPageFn: ((page: number, perPage: number) => Promise<any>) | undefined = undefined
2524
26-
let runnableType: RunnableType | undefined = undefined
27-
$: runnableType = scriptHash
28-
? 'ScriptHash'
29-
: scriptPath
30-
? 'ScriptPath'
31-
: flowPath
32-
? 'FlowPath'
33-
: undefined
34-
35-
let runnableId: string | undefined = undefined
3625
function initLoadInputs() {
37-
runnableId = scriptHash || scriptPath || flowPath || undefined
38-
3926
loadInputsPageFn = async (page: number, perPage: number) => {
4027
const inputs = await InputService.getInputHistory({
4128
workspace: $workspaceStore!,
@@ -122,7 +109,7 @@
122109
}
123110
124111
$: !loading && refresh()
125-
$: $workspaceStore && (scriptHash || scriptPath || flowPath) && infiniteList && initLoadInputs()
112+
$: $workspaceStore && runnableId && runnableType && infiniteList && initLoadInputs()
126113
</script>
127114

128115
<svelte:window on:keydown={handleKeydown} />

‎frontend/src/lib/components/JsonInputs.svelte

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script lang="ts">
2+
import SimpleEditor from '$lib/components/SimpleEditor.svelte'
3+
import { createEventDispatcher } from 'svelte'
4+
5+
const dispatch = createEventDispatcher()
6+
7+
let pendingJson: string
8+
9+
function updatePayloadFromJson(jsonInput: string) {
10+
if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
11+
dispatch('select', undefined)
12+
return
13+
}
14+
try {
15+
const parsed = JSON.parse(jsonInput)
16+
dispatch('select', parsed)
17+
} catch (error) {
18+
dispatch('select', undefined)
19+
}
20+
}
21+
</script>
22+
23+
<SimpleEditor
24+
on:focus={() => {
25+
dispatch('focus')
26+
updatePayloadFromJson(pendingJson)
27+
}}
28+
on:blur={async () => {
29+
dispatch('blur')
30+
setTimeout(() => {
31+
updatePayloadFromJson('')
32+
}, 100)
33+
}}
34+
on:change={(e) => {
35+
updatePayloadFromJson(e.detail.code)
36+
}}
37+
bind:code={pendingJson}
38+
lang="json"
39+
class="h-full"
40+
placeholder={'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}'}
41+
/>

‎frontend/src/lib/components/SavedInputsPicker.svelte

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,11 @@
1313
import InfiniteList from './InfiniteList.svelte'
1414
import { twMerge } from 'tailwind-merge'
1515
16-
export let flowPath: string | null = null
1716
export let previewArgs: any = undefined
17+
export let runnableId: string | undefined = undefined
18+
export let runnableType: RunnableType | undefined = undefined
19+
export let isValid: boolean = false
20+
export let noButton: boolean = false
1821
1922
interface EditableInput extends Input {
2023
isEditing?: boolean
@@ -30,10 +33,6 @@
3033
3134
const dispatch = createEventDispatcher()
3235
33-
$: runnableId = flowPath || undefined
34-
let runnableType: RunnableType | undefined = undefined
35-
$: runnableType = flowPath ? 'FlowPath' : undefined
36-
3736
async function updateInput(input: EditableInput | null) {
3837
if (!input) return
3938
input.isSaving = true
@@ -151,41 +150,50 @@
151150
}
152151
}
153152
154-
$: $workspaceStore && flowPath && (infiniteList && initLoadInputs(), (draft = false))
153+
export function refresh() {
154+
infiniteList?.loadData('refresh')
155+
}
156+
157+
$: $workspaceStore &&
158+
runnableId &&
159+
runnableType &&
160+
(infiniteList && initLoadInputs(), (draft = false))
155161
</script>
156162

157163
<svelte:window on:keydown={handleKeydown} />
158164

159165
<div
160-
class="w-full flex flex-col gap-1 h-full overflow-y-auto p"
166+
class="w-full flex flex-col gap-1 h-full overflow-y-auto"
161167
use:clickOutside={{ capture: false, exclude: getPropPickerElements }}
162168
on:click_outside={() => {
163169
selectedInput = null
164170
selectedArgs = undefined
165171
dispatch('select', undefined)
166172
}}
167173
>
168-
<div>
169-
<Popover class="w-full" placement="bottom" disablePopup={flowPath && previewArgs}>
170-
<svelte:fragment slot="text">
171-
{#if !flowPath}
172-
Save draft first before you can save inputs
173-
{:else if !previewArgs}
174-
Add inputs before saving
175-
{/if}
176-
</svelte:fragment>
177-
<SaveInputsButton
178-
{runnableId}
179-
{runnableType}
180-
args={previewArgs ?? {}}
181-
disabled={!previewArgs || !flowPath}
182-
on:update={() => {
183-
infiniteList?.loadData('refresh')
184-
}}
185-
showTooltip={true}
186-
/>
187-
</Popover>
188-
</div>
174+
{#if !noButton}
175+
<div>
176+
<Popover class="w-full" placement="bottom" disablePopup={runnableId && previewArgs}>
177+
<svelte:fragment slot="text">
178+
{#if !runnableId}
179+
Save draft first before you can save inputs
180+
{:else if !previewArgs}
181+
Add inputs before saving
182+
{/if}
183+
</svelte:fragment>
184+
<SaveInputsButton
185+
{runnableId}
186+
{runnableType}
187+
args={previewArgs ?? {}}
188+
disabled={!previewArgs || !runnableId || !isValid}
189+
on:update={() => {
190+
refresh()
191+
}}
192+
showTooltip={true}
193+
/>
194+
</Popover>
195+
</div>
196+
{/if}
189197
<div class="grow min-h-0">
190198
{#if !draft}
191199
<InfiniteList

‎frontend/src/lib/components/SavedInputsV2.svelte

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script lang="ts">
2+
import SavedInputsPicker from '$lib/components/SavedInputsPicker.svelte'
3+
import { createEventDispatcher } from 'svelte'
4+
import HistoricInputs from '$lib/components/HistoricInputs.svelte'
5+
import { type RunnableType } from '$lib/gen/types.gen.js'
6+
import { Pane, Splitpanes } from 'svelte-splitpanes'
7+
import Section from '$lib/components/Section.svelte'
8+
import SaveInputsButton from '$lib/components/SaveInputsButton.svelte'
9+
const dispatch = createEventDispatcher()
10+
11+
export let scriptHash: string | null = null
12+
export let scriptPath: string | null = null
13+
export let flowPath: string | null = null
14+
15+
// Are the current Inputs valid and able to be saved?
16+
export let isValid: boolean
17+
export let args: object
18+
19+
let savedArgs: any = undefined
20+
let runnableType: RunnableType | undefined = undefined
21+
let savedInputsPicker: SavedInputsPicker | undefined = undefined
22+
23+
$: runnableId = scriptHash || scriptPath || flowPath || undefined
24+
$: runnableType = scriptHash
25+
? 'ScriptHash'
26+
: scriptPath
27+
? 'ScriptPath'
28+
: flowPath
29+
? 'FlowPath'
30+
: undefined
31+
32+
function selectArgs(selected_args: any) {
33+
if (selected_args) {
34+
savedArgs = args
35+
dispatch('selected_args', selected_args)
36+
} else if (savedArgs) {
37+
dispatch('selected_args', savedArgs)
38+
}
39+
}
40+
</script>
41+
42+
<div class="min-w-[300px] h-full flex flex-col">
43+
<Splitpanes horizontal={true}>
44+
<Pane class="px-4 py-2 h-full">
45+
<Section
46+
label="Saved Inputs"
47+
tooltip="Shared inputs are available to anyone with access to the script"
48+
wrapperClass="h-full"
49+
small={true}
50+
>
51+
<svelte:fragment slot="action">
52+
<SaveInputsButton
53+
{args}
54+
disabled={!isValid}
55+
{runnableId}
56+
{runnableType}
57+
on:update={() => {
58+
savedInputsPicker?.refresh()
59+
}}
60+
/>
61+
</svelte:fragment>
62+
63+
<SavedInputsPicker
64+
bind:this={savedInputsPicker}
65+
previewArgs={args}
66+
{runnableId}
67+
{runnableType}
68+
{isValid}
69+
on:select={(e) => {
70+
selectArgs(e.detail)
71+
}}
72+
noButton={true}
73+
/>
74+
</Section>
75+
</Pane>
76+
77+
<Pane class="px-4 py-2 h-full">
78+
<Section label="History" wrapperClass="h-full" small={true}>
79+
<HistoricInputs
80+
{runnableId}
81+
{runnableType}
82+
on:select={(e) => {
83+
selectArgs(e.detail)
84+
}}
85+
/>
86+
</Section>
87+
</Pane>
88+
</Splitpanes>
89+
</div>

‎frontend/src/lib/components/Section.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@
88
export let tooltip: string | undefined = undefined
99
export let eeOnly = false
1010
export let small: boolean = false
11+
export let wrapperClass: string = ''
1112
1213
export let collapsable: boolean = false
1314
export let collapsed: boolean = true
1415
export let headless: boolean = false
1516
</script>
1617

17-
<div class="w-full flex flex-col">
18+
<div class={twMerge('w-full flex flex-col', wrapperClass)}>
1819
{#if !headless}
1920
<div class="flex flex-row justify-between items-center mb-2">
2021
<h2

‎frontend/src/lib/components/details/DetailPageDetailPanel.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
<div class="flex flex-col h-full">
2929
<Tabs bind:selected wrapperClass="flex-none w-full">
30-
<Tab value="saved_inputs">Saved Inputs</Tab>
30+
<Tab value="saved_inputs">Saved inputs</Tab>
3131
{#if !isOperator}
3232
<Tab value="triggers">Triggers</Tab>
3333
{/if}

‎frontend/src/lib/components/flows/content/FlowInput.svelte

Lines changed: 8 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import FlowCard from '../common/FlowCard.svelte'
66
import type { FlowEditorContext } from '../types'
77
import Drawer from '$lib/components/common/drawer/Drawer.svelte'
8-
import SimpleEditor from '$lib/components/SimpleEditor.svelte'
8+
import JsonInputs from '$lib/components/JsonInputs.svelte'
99
import { convert } from '@redocly/json-to-json-schema'
1010
import { sendUserToast } from '$lib/toast'
1111
import EditableSchemaForm from '$lib/components/EditableSchemaForm.svelte'
@@ -49,7 +49,6 @@
4949
const { flowStore, previewArgs, pathStore, initialPath, flowInputEditorState } =
5050
getContext<FlowEditorContext>('FlowEditorContext')
5151
52-
let pendingJson: string
5352
let addProperty: AddPropertyV2 | undefined = undefined
5453
let previewSchema: Record<string, any> | undefined = undefined
5554
let payloadData: Record<string, any> | undefined = undefined
@@ -244,19 +243,6 @@
244243
previewArguments = structuredClone(payloadData)
245244
}
246245
247-
function updatePayloadFromJson(jsonInput: string) {
248-
if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
249-
updatePreviewSchemaAndArgs(undefined)
250-
return
251-
}
252-
try {
253-
const parsed = JSON.parse(jsonInput)
254-
updatePreviewSchemaAndArgs(parsed)
255-
} catch (error) {
256-
updatePreviewSchemaAndArgs(undefined)
257-
}
258-
}
259-
260246
let tabButtonWidth = 0
261247
262248
let connectFirstNode: () => void = () => {}
@@ -470,9 +456,8 @@
470456
}}
471457
>
472458
<HistoricInputs
473-
scriptHash={null}
474-
scriptPath={null}
475-
flowPath={$pathStore}
459+
runnableId={initialPath ?? undefined}
460+
runnableType={$pathStore ? 'FlowPath' : undefined}
476461
on:select={(e) => {
477462
updatePreviewSchemaAndArgs(e.detail ?? undefined)
478463
}}
@@ -505,7 +490,8 @@
505490
title="Saved inputs"
506491
>
507492
<SavedInputsPicker
508-
flowPath={initialPath}
493+
runnableId={initialPath ?? undefined}
494+
runnableType={$pathStore ? 'FlowPath' : undefined}
509495
on:select={(e) => {
510496
updatePreviewSchemaAndArgs(e.detail ?? undefined)
511497
}}
@@ -522,26 +508,16 @@
522508
}}
523509
title="Json payload"
524510
>
525-
<SimpleEditor
511+
<JsonInputs
526512
on:focus={() => {
527513
preventEnter = true
528-
updatePayloadFromJson(pendingJson)
529514
}}
530515
on:blur={async () => {
531516
preventEnter = false
532-
setTimeout(() => {
533-
if (payloadData) {
534-
updatePayloadFromJson('')
535-
}
536-
}, 100)
537517
}}
538-
on:change={(e) => {
539-
updatePayloadFromJson(e.detail.code)
518+
on:select={(e) => {
519+
updatePreviewSchemaAndArgs(e.detail ?? undefined)
540520
}}
541-
bind:code={pendingJson}
542-
lang="json"
543-
class="h-full"
544-
placeholder={'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}'}
545521
/>
546522
</FlowInputEditor>
547523
{:else if $flowInputEditorState?.selectedTab === 'firstStepInputs'}

0 commit comments

Comments
 (0)