kalugin66/windmill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Add a shared propPicker context"

Browse Source 
This reverts commit c3f1569238.
This commit is contained in:
Guilhem
2024-10-29 21:47:44 +01:00
parent c3f1569238
commit 60878f24d8
9 changed files with 53 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/lib/components/InputTransformForm.svelte
View File

@@ -6,7 +6,7 @@
import ArgInput from './ArgInput.svelte'
import FieldHeader from './FieldHeader.svelte'
import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte'
import type { FlowEditorContext } from './flows/types'
import type { PropPickerWrapperContext } from './flows/propPicker/PropPickerWrapper.svelte'
import { codeToStaticTemplate, getDefaultExpr } from './flows/utils'
import SimpleEditor from './SimpleEditor.svelte'
import { Button } from '$lib/components/common'
@@ -39,7 +39,6 @@
export let argExtra: Record<string, any> = {}
export let pickableProperties: PickableProperties | undefined = undefined
export let enableAi = false
export let id: string
let monaco: SimpleEditor | undefined = undefined
let monacoTemplate: TemplateEditor | undefined = undefined
@@ -147,8 +146,6 @@
function onFocus() {
focused = true
if (!focusProp) return
if (isStaticTemplate(inputCat)) {
focusProp(argName, 'append', (path) => {
const toAppend = `\$\{${path}}`
@@ -169,7 +166,7 @@
}
}
const { flowInputsStore } = getContext<FlowEditorContext>('FlowEditorContext')
const { focusProp, propPickerConfig } = getContext<PropPickerWrapperContext>('PropPickerWrapper')
$: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg?.value)
@@ -192,14 +189,11 @@
loadResourceTypes()
$: propPickerConfig = $flowInputsStore[id]?.connectingInputs?.propPickerConfig
$: focusProp = $flowInputsStore[id]?.connectingInputs?.focusProp
$: connecting =
$propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'
</script>
{#if arg != undefined && focusProp}
{#if arg != undefined}
<div
class={twMerge(
'pl-2 pt-2 pb-2 ml-2 relative hover:bg-surface hover:shadow-md transition-all duration-200',
@@ -482,7 +476,7 @@
{/if}
</div>
{#if $propPickerConfig?.propName == argName && ($propPickerConfig?.insertionMode == 'insert' || $propPickerConfig?.insertionMode == 'append')}
{#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'insert'}
<div class="text-blue-500 mt-2" in:fade={{ duration: 200 }}>
<svg
xmlns="http://www.w3.org/2000/svg"

7
frontend/src/lib/components/InputTransformSchemaForm.svelte
View File

@@ -23,7 +23,7 @@
export let noDynamicToggle = false
export let pickableProperties: PickableProperties | undefined = undefined
export let enableAi = false
export let id: string
let clazz: string = ''
export { clazz as class }
@@ -102,11 +102,6 @@
const { argName } = e.detail
dispatch('changeArg', { argName })
}}
on:connect={(e) => {
dispatch('connect', e.detail)
console.log('dbg connect 2', e.detail)
}}
{id}
/>
</div>
{/if}

2
frontend/src/lib/components/common/button/AnimatedButton.svelte
View File

@@ -4,7 +4,7 @@
export let marginWidth = '2px'
export let animationDuration = '2s'
export let baseRadius = '4px'
export let animate: boolean = true
export let animate = true
export let wrapperClasses = ''
export let ringColor = 'transparent'

11
frontend/src/lib/components/flows/content/FlowConstants.svelte
View File

@@ -3,7 +3,9 @@
import FlowCard from '../common/FlowCard.svelte'
import { Alert, Badge } from '$lib/components/common'
import type { FlowModule, FlowModuleValue, InputTransform, PathScript, RawScript } from '$lib/gen'
import { getContext } from 'svelte'
import { getContext, setContext } from 'svelte'
import type { PropPickerWrapperContext } from '../propPicker/PropPickerWrapper.svelte'
import { writable } from 'svelte/store'
import Toggle from '../../Toggle.svelte'
import InputTransformSchemaForm from '$lib/components/InputTransformSchemaForm.svelte'
import type { FlowEditorContext } from '../types'
@@ -73,6 +75,12 @@
] as [Record<string, InputTransform>, string[], FlowModule]
)
.filter(([i, f, m]) => f.length > 0)
setContext<PropPickerWrapperContext>('PropPickerWrapper', {
focusProp: () => {},
propPickerConfig: writable(undefined),
clearFocus: () => {}
})
</script>
<div class="min-h-full">
@@ -127,7 +135,6 @@
class="mt-2"
schema={$flowStateStore[m.id]?.schema ?? {}}
bind:args
id={m.id}
/>
</div>
{/if}

40
frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
View File

@@ -13,7 +13,7 @@
import FlowModuleHeader from './FlowModuleHeader.svelte'
import { getLatestHashForScript, scriptLangToEditorLang } from '$lib/scripts'
import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte'
import { afterUpdate, getContext, tick, createEventDispatcher } from 'svelte'
import { afterUpdate, getContext, tick } from 'svelte'
import type { FlowEditorContext } from '../types'
import FlowModuleScript from './FlowModuleScript.svelte'
import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
@@ -48,8 +48,6 @@
import { debounce } from '$lib/utils'
import { dfs } from '../dfs'
import FlowModuleSkip from './FlowModuleSkip.svelte'
import { writable } from 'svelte/store'
import type { PropPickerConfig } from '../types'
const {
selectedId,
@@ -215,33 +213,6 @@
}
debouncedWarning(argName)
}
function setConnect() {
const dispatch = createEventDispatcher()
if ($flowInputsStore && flowModule.id && $flowInputsStore?.[flowModule.id] === undefined) {
$flowInputsStore[flowModule.id] = {}
}
const propPickerConfig = writable<PropPickerConfig | undefined>(undefined)
$flowInputsStore[flowModule.id] = {
connectingInputs: {
propPickerConfig,
focusProp: (propName, insertionMode, onSelect) => {
propPickerConfig.set({
propName,
insertionMode,
onSelect
})
},
clearFocus: () => {
propPickerConfig.set(undefined)
dispatch('connect', false)
}
}
}
}
setConnect()
</script>
<svelte:window on:keydown={onKeyDown} />
@@ -408,10 +379,6 @@
pickableProperties={stepPropPicker.pickableProperties}
error={failureModule}
noPadding
on:connect={(e) => {
console.log('dbg connect', e.detail)
}}
id={flowModule.id}
>
<InputTransformSchemaForm
bind:this={inputTransformSchemaForm}
@@ -424,12 +391,7 @@
on:changeArg={(e) => {
const { argName } = e.detail
setFlowInput(argName)
console.log('dbg changeArg', argName)
}}
on:connect={(e) => {
console.log('dbg connect 3', e.detail)
}}
id={flowModule.id}
/>
</PropPickerWrapper>
</div>

23
frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
View File

@@ -15,8 +15,7 @@
Square,
SkipForward,
Voicemail,
X,
Plug
X
} from 'lucide-svelte'
import { createEventDispatcher, getContext } from 'svelte'
import { fade } from 'svelte/transition'
@@ -29,7 +28,6 @@
import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
import { getDependeeAndDependentComponents } from '../flowExplorer'
import { replaceId } from '../flowStore'
import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
export let selected: boolean = false
export let deletable: boolean = false
@@ -292,25 +290,6 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
</button>
{/if}
{#if hover || selected}
<AnimatedButton
wrapperClasses="absolute -top-[10px] right-[85px] w-fit h-fit"
animate={!!id && false}
animationDuration="1s"
baseRadius="9999px"
marginWidth="3px"
>
<button
class="rounded-full h-[20px] w-[20px] trash center-center text-secondary-inverse
bg-surface-inverse duration-150 hover:bg-blue-400 hover:text-white"
on:click|preventDefault|stopPropagation={(event) => dispatch('connect')}
title="Connect"
>
<Plug class="mx-[3px]" size={12} strokeWidth={2} />
</button>
</AnimatedButton>
{/if}
{#if (id && Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}).length > 0) || Boolean(warningMessage)}
<div class="absolute -top-[10px] -left-[10px]">
<Popover>

80
frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
View File

@@ -1,15 +1,31 @@
<script context="module" lang="ts">
type InsertionMode = 'append' | 'connect' | 'insert'
type SelectCallback = (path: string) => boolean
type PropPickerConfig = {
insertionMode: InsertionMode
propName: string
onSelect: SelectCallback
}
export type PropPickerWrapperContext = {
propPickerConfig: Writable<PropPickerConfig | undefined>
focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => void
clearFocus: () => void
}
</script>
<script lang="ts">
import PropPicker from '$lib/components/propertyPicker/PropPicker.svelte'
import PropPickerResult from '$lib/components/propertyPicker/PropPickerResult.svelte'
import { clickOutside } from '$lib/utils'
import { getContext, createEventDispatcher } from 'svelte'
import { createEventDispatcher, setContext } from 'svelte'
import { Pane, Splitpanes } from 'svelte-splitpanes'
import { writable, type Writable } from 'svelte/store'
import type { PickableProperties } from '../previousResults'
import { twMerge } from 'tailwind-merge'
import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
import type { FlowEditorContext } from '../types'
import { writable } from 'svelte/store'
import type { PropPickerConfig, InsertionMode, SelectCallback } from '../types'
export let pickableProperties: PickableProperties | undefined
export let result: any = undefined
@@ -19,47 +35,23 @@
export let displayContext = true
export let notSelectable = false
export let noPadding: boolean = false
export let id: string
const propPickerConfig = writable<PropPickerConfig | undefined>(undefined)
const { flowInputsStore } = getContext<FlowEditorContext>('FlowEditorContext')
const dispatch = createEventDispatcher()
function setPropPickerConfig() {
if ($flowInputsStore && id && $flowInputsStore?.[id] === undefined) {
$flowInputsStore[id] = {
connectingInputs: {
propPickerConfig,
focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => {
propPickerConfig.set({
propName,
insertionMode,
onSelect
})
},
clearFocus: () => {
propPickerConfig.set(undefined)
}
}
}
} else if ($flowInputsStore && id) {
$flowInputsStore[id].connectingInputs = {
propPickerConfig,
focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => {
propPickerConfig.set({
propName,
insertionMode,
onSelect
})
},
clearFocus: () => {
propPickerConfig.set(undefined)
}
}
setContext<PropPickerWrapperContext>('PropPickerWrapper', {
propPickerConfig,
focusProp: (propName, insertionMode, onSelect) => {
propPickerConfig.set({
propName,
insertionMode,
onSelect
})
},
clearFocus: () => {
propPickerConfig.set(undefined)
}
}
$: $flowInputsStore && setPropPickerConfig()
})
</script>
<div
@@ -77,10 +69,7 @@
baseRadius="4px"
wrapperClasses="h-full w-full pt-2"
marginWidth="4px"
ringColor={$propPickerConfig?.insertionMode == 'insert' ||
$propPickerConfig?.insertionMode == 'append'
? '#3b82f6'
: 'transparent'}
ringColor={$propPickerConfig?.insertionMode == 'insert' ? '#3b82f6' : 'transparent'}
animationDuration="1s"
>
{#if result}
@@ -104,12 +93,11 @@
{notSelectable}
allowCopy={!notSelectable && !$propPickerConfig}
on:select={({ detail }) => {
//dispatch('select', detail)
dispatch('select', detail)
if ($propPickerConfig?.onSelect(detail)) {
propPickerConfig.set(undefined)
}
}}
{id}
/>
{/if}
</AnimatedButton>

16
frontend/src/lib/components/flows/types.ts
View File

@@ -5,25 +5,9 @@ import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte'
import type { FlowState } from './flowState'
import type { FlowBuilderWhitelabelCustomUi } from '../custom_ui'
export type InsertionMode = 'connect' | 'insert' | 'append'
export type SelectCallback = (detail: any) => boolean
export type PropPickerConfig = {
propName: string
insertionMode: InsertionMode
onSelect: SelectCallback
}
export type PropPickerWrapper = {
propPickerConfig: Writable<PropPickerConfig | undefined>
focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => void
clearFocus: () => void
}
export type FlowInput = Record<
string,
{
connectingInputs?: PropPickerWrapper
flowStepWarnings?: Record<
string,
{

7
frontend/src/lib/components/propertyPicker/PropPicker.svelte
View File

@@ -3,7 +3,7 @@
import { workspaceStore } from '$lib/stores'
import { getContext } from 'svelte'
import { Badge, Button } from '../common'
import type { FlowEditorContext } from '../flows/types'
import type { PropPickerWrapperContext } from '../flows/propPicker/PropPickerWrapper.svelte'
import ObjectViewer from './ObjectViewer.svelte'
import { keepByKey } from './utils'
@@ -15,7 +15,6 @@
export let notSelectable: boolean
export let error: boolean = false
export let allowCopy = false
export let id: string
$: previousId = pickableProperties?.previousId
let variables: Record<string, string> = {}
@@ -27,9 +26,7 @@
const EMPTY_STRING = ''
let search = ''
const { flowInputsStore } = getContext<FlowEditorContext>('FlowEditorContext')
$: propPickerConfig = flowInputsStore[id]?.connectingInputs?.propPickerConfig
const { propPickerConfig } = getContext<PropPickerWrapperContext>('PropPickerWrapper')
$: flowInputsFiltered =
search === EMPTY_STRING