From 05003abdf350aaed66966ea0287773ab6b98ebf3 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Mon, 12 Dec 2022 14:35:17 +0100 Subject: [PATCH] feat(frontend): Fix UI (#1009) * feat(frontend): Fix UI * feat(frontend): Set correct default value when adding a new element to a typed array * feat(frontend): add refresh all * feat(frontend): add inline delete button * feat(frontend): fix alignment * feat(frontend): clean up * feat(frontend): rework editor * feat(frontend): Fix component dimensions * feat(frontend): Fix default min dimensions * feat(frontend): add missing alert * feat(frontend): Fix default data * feat(frontend): Support frontend/backend search * feat(frontend): finish picker --- .../apps/components/buttons/AppButton.svelte | 13 +- .../components/dataDisplay/AppPieChart.svelte | 3 +- .../components/dataDisplay/AppTable.svelte | 28 ++- .../components/helpers/AlignWrapper.svelte | 2 +- .../helpers/RunnableComponent.svelte | 17 +- .../components/textInputs/AppTextInput.svelte | 7 +- .../components/apps/editor/AppEditor.svelte | 20 +- .../apps/editor/AppEditorHeader.svelte | 4 +- .../components/apps/editor/AppPreview.svelte | 5 +- .../apps/editor/ComponentEditor.svelte | 2 +- .../apps/editor/ComponentHeader.svelte | 15 ++ .../components/apps/editor/GridEditor.svelte | 30 ++- .../apps/editor/RecomputeAllComponents.svelte | 35 +++ .../componentsPanel/ComponentList.svelte | 64 +++-- .../apps/editor/componentsPanel/data.ts | 112 ++++----- .../ArrayStaticInputEditor.svelte | 72 ++++++ .../settingsPanel/ComponentPanel.svelte | 223 +++++++++--------- .../settingsPanel/ConnectedInputEditor.svelte | 23 +- .../settingsPanel/InputsSpecEditor.svelte | 4 +- .../settingsPanel/InputsSpecsEditor.svelte | 93 ++++---- .../editor/settingsPanel/Recompute.svelte | 55 +++++ .../settingsPanel/StaticInputEditor.svelte | 55 ++--- .../editor/settingsPanel/SubTypeEditor.svelte | 22 ++ .../editor/settingsPanel/TableActions.svelte | 2 +- .../settingsPanel/common/PanelSection.svelte | 5 +- .../mainInput/InlineScriptList.svelte | 58 +++++ .../mainInput/RunnableSelector.svelte | 108 +++++++++ .../mainInput/WorkspaceFlowList.svelte | 88 +++++++ .../mainInput/WorkspaceScriptList.svelte | 89 +++++++ frontend/src/lib/components/apps/inputType.ts | 34 ++- frontend/src/lib/components/apps/types.ts | 13 +- frontend/src/lib/components/apps/utils.ts | 75 ++---- .../lib/components/common/table/Row.svelte | 30 ++- .../flows/content/FlowInputsFlow.svelte | 8 +- .../flows/pickers}/PickHubFlow.svelte | 2 +- .../flows/pickers/PickHubScript.svelte | 2 +- frontend/src/routes/index.svelte | 4 +- 37 files changed, 980 insertions(+), 442 deletions(-) create mode 100644 frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte create mode 100644 frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte create mode 100644 frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte create mode 100644 frontend/src/lib/components/apps/editor/settingsPanel/SubTypeEditor.svelte create mode 100644 frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte create mode 100644 frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte create mode 100644 frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte create mode 100644 frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte rename frontend/src/{routes => lib/components/flows/pickers}/PickHubFlow.svelte (97%) diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte index 35569b7c14..e5800676a3 100644 --- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte +++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte @@ -1,6 +1,8 @@ - +
{#if search !== 'Disabled'}
@@ -89,7 +93,7 @@ {/if} - {#each result as row, rowIndex (rowIndex)} + {#each filteredResult as row, rowIndex (rowIndex)} ('AppEditorContext') + const { app, worldStore, runnableComponents } = getContext('AppEditorContext') + + onMount(() => { + $runnableComponents[id] = async () => { + await executeComponent() + } + }) let pagePath = $page.params.path let args: Record = {} @@ -78,7 +84,7 @@ async function loadSchemaFromTriggerable( workspace: string, path: string, - runType: 'script' | 'flow' + runType: 'script' | 'flow' | 'hubscript' ) { schema = await loadSchema(workspace, path, runType) } @@ -87,6 +93,7 @@ $: if ($workspaceStore && runnable?.type === 'runnableByPath' && !schema) { // Remote schema needs to be loaded const { path, runType } = runnable + loadSchemaFromTriggerable($workspaceStore, path, runType) } else if (runnable?.type === 'runnableByName' && !schema) { const { inlineScriptName } = runnable @@ -179,8 +186,8 @@ }) } - export function runComponent() { - executeComponent() + export async function runComponent() { + await executeComponent() } diff --git a/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte index 94b052fa3b..bab7b2079d 100644 --- a/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte +++ b/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte @@ -3,7 +3,6 @@ import type { AppInput } from '../../inputType' import type { Output } from '../../rx' import type { AppEditorContext } from '../../types' - import DebouncedInput from '../helpers/DebouncedInput.svelte' import InputValue from '../helpers/InputValue.svelte' export let id: string @@ -17,9 +16,7 @@ $: outputs = $worldStore?.outputsById[id] as { result: Output } - $: if(value || !value) { - outputs?.result.set(value || '') - } + $: (value || !value) && outputs?.result.set(value || '') @@ -29,5 +26,5 @@
{labelValue}
- + diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte index 5a106ebf64..cddd714b8e 100644 --- a/frontend/src/lib/components/apps/editor/AppEditor.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte @@ -42,6 +42,8 @@ input: undefined }) + const runnableComponents = writable void>>({}) + setContext('AppEditorContext', { worldStore, staticOutputs, @@ -49,22 +51,16 @@ selectedComponent, mode, connectingInput, - breakpoint + breakpoint, + runnableComponents }) - function clearSelectionOnPreview() { - if ($mode === 'preview') { - $selectedComponent = undefined - } - } - let mounted = false onMount(() => { mounted = true }) $: mounted && ($worldStore = buildWorld($staticOutputs)) - $: $mode && $selectedComponent && clearSelectionOnPreview() $: selectedTab = $selectedComponent ? 'settings' : 'insert' $: previewing = $mode === 'preview' @@ -79,11 +75,11 @@ {:else} - + - -
+ +
{#if $appStore.grid}
@@ -96,7 +92,7 @@ {/if}
- +
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte index 68c11d9459..d6a022237d 100644 --- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte @@ -54,7 +54,7 @@
-
+
@@ -76,7 +76,7 @@
-
+
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte index baa6fd4483..8741890f02 100644 --- a/frontend/src/lib/components/apps/editor/AppPreview.svelte +++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte @@ -28,6 +28,8 @@ input: undefined }) + const runnableComponents = writable void>>({}) + setContext('AppEditorContext', { worldStore, staticOutputs, @@ -35,7 +37,8 @@ selectedComponent, mode, connectingInput, - breakpoint + breakpoint, + runnableComponents }) let mounted = false diff --git a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte b/frontend/src/lib/components/apps/editor/ComponentEditor.svelte index a77d2b4df0..953a833537 100644 --- a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte +++ b/frontend/src/lib/components/apps/editor/ComponentEditor.svelte @@ -22,7 +22,7 @@
{#if shouldDisplayOverlay} - + {/if}
{displayData[component.type].name} - {component.id} + diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte index 52f1c6e8f5..f4cfaccc2a 100644 --- a/frontend/src/lib/components/apps/editor/GridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte @@ -4,13 +4,15 @@ import Grid from 'svelte-grid' import ComponentEditor from './ComponentEditor.svelte' import { classNames } from '$lib/utils' - import { columnConfiguration, disableDrag, enableDrag } from '../gridUtils' + import { columnConfiguration, disableDrag, enableDrag, gridColumns } from '../gridUtils' import { Alert } from '$lib/components/common' import { fly } from 'svelte/transition' + import gridHelp from 'svelte-grid/build/helper/index.mjs' import Button from '$lib/components/common/button/Button.svelte' + import RecomputeAllComponents from './RecomputeAllComponents.svelte' - const { selectedComponent, app, mode, connectingInput } = + const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents } = getContext('AppEditorContext') // The drag is disabled when the user is connecting an input @@ -19,6 +21,23 @@ } else { $app.grid.map((gridItem) => enableDrag(gridItem)) } + + function deleteComponent(component) { + if (component) { + $app.grid = $app.grid.filter((gridComponent) => gridComponent.data.id !== component?.id) + + gridColumns.forEach((colIndex) => { + $app.grid = gridHelp.adjust($app.grid, colIndex) + }) + + // Delete static inputs + delete $staticOutputs[component.id] + $staticOutputs = $staticOutputs + + delete $runnableComponents[component.id] + $runnableComponents = $runnableComponents + } + } @@ -26,6 +45,8 @@ class="bg-white h-full relative" on:click|preventDefault={() => ($selectedComponent = undefined)} > + + {#each $app.grid as gridComponent (gridComponent.id)} {#if gridComponent.data.id === dataItem.data.id} @@ -45,6 +66,7 @@ deleteComponent(gridComponent.data)} />
{/if} @@ -68,8 +90,8 @@ $connectingInput.input = undefined }} > - Stop connecting + Stop connecting +
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte new file mode 100644 index 0000000000..ce37ec40e9 --- /dev/null +++ b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte @@ -0,0 +1,35 @@ + + + diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte index d05b0ca970..1158ea3495 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte @@ -14,14 +14,31 @@ import { gridColumns } from '../../gridUtils' const { app } = getContext('AppEditorContext') - const COLS = 6 - function addComponent( - appComponent: AppComponent, - defaultDimensions: Size, - minDimensions: Size = { w: 2, h: 1 }, - maxDimensions: Size = { w: 12, h: 12 } - ) { + function getMinDimensionsByComponent(componentType: string, column: number): Size { + console.log(componentType, column) + if (componentType === 'buttoncomponent') { + return column === 3 ? { w: 1, h: 1 } : { w: 3, h: 1 } + } else if (componentType === 'textcomponent') { + return column === 3 ? { w: 1, h: 1 } : { w: 3, h: 1 } + } else if (componentType === 'textinputcomponent') { + return column === 3 ? { w: 1, h: 2 } : { w: 3, h: 2 } + } else if (componentType === 'barchartcomponent') { + return column === 3 ? { w: 2, h: 4 } : { w: 6, h: 4 } + } else if (componentType === 'piechartcomponent') { + return column === 3 ? { w: 2, h: 4 } : { w: 6, h: 4 } + } else if (componentType === 'tablecomponent') { + return column === 3 ? { w: 3, h: 4 } : { w: 12, h: 4 } + } else if (componentType === 'displaycomponent') { + return column === 3 ? { w: 2, h: 2 } : { w: 6, h: 4 } + } else if (componentType === 'checkboxcomponent') { + return column === 3 ? { w: 1, h: 1 } : { w: 3, h: 1 } + } else { + return { w: 2, h: 1 } + } + } + + function addComponent(appComponent: AppComponent) { const grid = $app.grid ?? [] const id = getNextId(grid.map((gridItem) => gridItem.data.id)) @@ -34,8 +51,7 @@ customDragger: false, customResizer: false, x: 0, - y: 0, - ...defaultDimensions + y: 0 } const newItem: GridItem = { @@ -43,28 +59,24 @@ id: id } - function getMinMaxDimensions(column) { - if (column === 3) { - return { - min: { w: 1, h: 1 }, - max: { w: 3, h: 12 } - } - } else { - return { - min: minDimensions, - max: maxDimensions - } - } - } - gridColumns.forEach((column) => { newItem[column] = newComponent const position = gridHelp.findSpace(newItem, grid, column) - const dimensions = getMinMaxDimensions(column) - newItem[column] = { ...newItem[column], ...position, ...dimensions } + const min = getMinDimensionsByComponent(appComponent.type, column) + + const max = { w: 12, h: 12 } + + newItem[column].w = min.w + newItem[column].h = min.h + + newItem[column] = { ...newItem[column], ...position, min, max } }) $app.grid = [...grid, newItem] + + gridColumns.forEach((colIndex) => { + $app.grid = gridHelp.adjust($app.grid, colIndex) + }) } onMount(() => { @@ -89,7 +101,7 @@
{#each components as item}
+
+ {/each} + + {/if} +
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index 8e12e9d3fc..bba290bfe0 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -1,12 +1,12 @@ diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte index 02d47fbf45..b94cba9b8b 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte @@ -1,79 +1,68 @@ {#if inputSpecs} -
+
{#each Object.keys(inputSpecs) as inputSpecKey, index (index)} {@const input = inputSpecs[inputSpecKey]} -
-
{ - if (openedProp === inputSpecKey) { - openedProp = undefined - } else { - openedProp = inputSpecKey - } - }} - > - {inputSpecKey} - {#if input?.fieldType} - - {capitalize(fieldTypeToTsType(input.fieldType))} - - {/if} -
- {#if inputSpecKey === openedProp} -
- {#if staticOnly} + {#if true} +
+
+ {capitalize(inputSpecKey)} + +
+ + {input.fieldType === 'array' && input.subFieldType + ? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]` + : capitalize(fieldTypeToTsType(input.fieldType))} + + - - Static - + - Connect - + iconOnly + disabled={staticOnly} + /> {#if userInputEnabled} - User - + iconOnly + disabled={staticOnly && !userInputEnabled} + /> {/if} - {/if} - +
- {/if} -
+ + +
+ {/if} {/each}
{:else} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte new file mode 100644 index 0000000000..0826613b4c --- /dev/null +++ b/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte @@ -0,0 +1,55 @@ + + + + {#if Object.keys($runnableComponents ?? {}).length > 0} + + + + + + + + + {#each Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId) as id} + + + + + {/each} + +
+ Component + + Recompute +
+ {id} + + onChange(event, id)} /> +
+ {:else} +
No components to recompute
+ {/if} + diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/StaticInputEditor.svelte index 30224a75c8..5fcf21b791 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/StaticInputEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/StaticInputEditor.svelte @@ -1,12 +1,11 @@ @@ -29,41 +28,21 @@ {/each} - {:else if componentInput.fieldType === 'array'} -
- {#if componentInput.value} - {#each componentInput.value as value, index} -
- { - if (componentInput?.type === 'static' && componentInput.value) { - componentInput.value[index] = JSON.parse(e.detail.code) - } - }} - /> -
- {/each} - - {/if} + {:else if componentInput.fieldType === 'object'} +
+ { + if (componentInput?.type === 'static' && componentInput.value) { + componentInput.value = JSON.parse(e.detail.code) + } + }} + />
+ {:else if componentInput.fieldType === 'array'} + {:else} {/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/SubTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/SubTypeEditor.svelte new file mode 100644 index 0000000000..c21f5077c3 --- /dev/null +++ b/frontend/src/lib/components/apps/editor/settingsPanel/SubTypeEditor.svelte @@ -0,0 +1,22 @@ + + + diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte index f0236e8527..e94bf2cbd0 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte @@ -53,7 +53,7 @@ defaultValue: '', value: '' }, - recompute: undefined, + recomputeIds: undefined, card: false } diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte index e8bd8762f3..ce7674bf31 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte @@ -2,11 +2,12 @@ import { classNames } from '$lib/utils' export let title: string + export let smallPadding: boolean = false -
+
-
{title}
+
{title}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte new file mode 100644 index 0000000000..a2eacd035b --- /dev/null +++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte @@ -0,0 +1,58 @@ + + + x.summary} /> +
+ + +
+ +{#if inlineScripts.length == 0} + Should create +{:else if filteredItems.length == 0} + +{:else} +
    + {#each filteredItems as item (item)} +
  • + +
    • + {/each} +
+{/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte new file mode 100644 index 0000000000..2f3024b6b5 --- /dev/null +++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte @@ -0,0 +1,108 @@ + + + + +
+
+ + +
+ + Inline Scripts +
+ + +
+ + Workspace Scripts +
+ + +
+ + Workspace Flows +
+ + +
+ + Hub Scripts +
+ + +
+
+
+ {#if tab == 'inlinescripts'} + pickInlineScript(e.detail)} /> + {:else if tab == 'workspacescripts'} + pickScript(e.detail)} /> + {:else if tab == 'workspaceflows'} + pickFlow(e.detail)} /> + {:else if tab == 'hubscripts'} + pickScript(e.detail.path)} /> + {/if} +
+
+
+
+ + + + diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte new file mode 100644 index 0000000000..b623549b6d --- /dev/null +++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte @@ -0,0 +1,88 @@ + + + (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')} +/> +
+ + +
+ +{#if flows} + {#if filteredItems.length == 0} + + {:else} +
    + {#each filteredItems as item (item)} +
  • + +
    • + {/each} +
+ {/if} +{:else} + {#each Array(10).fill(0) as _} + + {/each} +{/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte new file mode 100644 index 0000000000..58ae5e2d43 --- /dev/null +++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte @@ -0,0 +1,89 @@ + + + (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')} +/> +
+ + +
+ +{#if scripts} + {#if filteredItems.length == 0} + + {:else} +
    + {#each filteredItems as item (item)} +
  • + +
    • + {/each} +
+ {/if} +{:else} + {#each Array(10).fill(0) as _} + + {/each} +{/if} diff --git a/frontend/src/lib/components/apps/inputType.ts b/frontend/src/lib/components/apps/inputType.ts index 4ceef727c2..b136ca7ee8 100644 --- a/frontend/src/lib/components/apps/inputType.ts +++ b/frontend/src/lib/components/apps/inputType.ts @@ -10,6 +10,7 @@ export type InputType = | 'time' | 'datetime' | 'object' + | 'array' // Connection to an output of another component // defined by the id of the component and the path of the output @@ -39,7 +40,7 @@ export type StaticInput = { type RunnableByPath = { path: string - runType: 'script' | 'flow' + runType: 'script' | 'flow' | 'hubscript' type: 'runnableByPath' } @@ -53,16 +54,22 @@ export type Runnable = RunnableByPath | RunnableByName | undefined // Runnable input, set by the developer in the component panel export type ResultInput = { runnable: Runnable - fields: AppInputs + fields: Record type: 'runnable' } -type AppInputSpec = (StaticInput | ConnectedInput | UserInput | ResultInput) & - InputConfiguration +type AppInputSpec = ( + | StaticInput + | ConnectedInput + | UserInput + | ResultInput +) & + InputConfiguration -type InputConfiguration = { +type InputConfiguration = { fieldType: T defaultValue: U + subFieldType?: V } export type AppInput = @@ -74,12 +81,27 @@ export type AppInput = | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'object', Record> - | AppInputSpec<'array', any[]> | (AppInputSpec<'select', string> & { /** * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues` */ optionValuesKey: keyof typeof staticValues }) + | AppInputSpec<'array', string[], 'text'> + | AppInputSpec<'array', string[], 'textarea'> + | AppInputSpec<'array', number[], 'number'> + | AppInputSpec<'array', boolean[], 'boolean'> + | AppInputSpec<'array', string[], 'date'> + | AppInputSpec<'array', string[], 'time'> + | AppInputSpec<'array', string[], 'datetime'> + | AppInputSpec<'array', object[], 'object'> + | (AppInputSpec<'array', string[], 'select'> & { + optionValuesKey: keyof typeof staticValues + }) + +export type StaticAppInput = Extract +export type ConnectedAppInput = Extract +export type UserAppInput = Extract +export type ResultAppInput = Extract export type AppInputs = Record diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index aa265eede6..e7334fdd81 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -2,7 +2,13 @@ import type { Schema } from '$lib/common' import type { Preview } from '$lib/gen' import type { FilledItem } from 'svelte-grid' import type { Writable } from 'svelte/store' -import type { AppInput, ConnectedInput } from './inputType' +import type { + AppInput, + ConnectedAppInput, + ConnectedInput, + StaticAppInput, + UserAppInput +} from './inputType' import type { World } from './rx' type BaseComponent = { @@ -12,7 +18,7 @@ type BaseComponent = { export type TextComponent = BaseComponent<'textcomponent'> export type TextInputComponent = BaseComponent<'textinputcomponent'> export type ButtonComponent = BaseComponent<'buttoncomponent'> & { - recompute: string[] | undefined + recomputeIds: string[] | undefined } export type RunFormComponent = BaseComponent<'runformcomponent'> @@ -40,7 +46,7 @@ export type Aligned = { export interface BaseAppComponent extends Partial { id: ComponentID componentInput: AppInput | undefined - configuration: Record + configuration: Record card: boolean | undefined // TODO: add min/max width/height } @@ -107,6 +113,7 @@ export type AppEditorContext = { mode: Writable connectingInput: Writable breakpoint: Writable + runnableComponents: Writable void>> } export type EditorMode = 'dnd' | 'preview' diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts index df15c87344..8a85130c19 100644 --- a/frontend/src/lib/components/apps/utils.ts +++ b/frontend/src/lib/components/apps/utils.ts @@ -15,13 +15,13 @@ import { Type } from 'lucide-svelte' import type { InputType } from 'zlib' -import type { AppInput, AppInputs } from './inputType' +import type { AppInputs } from './inputType' import type { AppComponent } from './types' export async function loadSchema( workspace: string, path: string, - runType: 'script' | 'flow' + runType: 'script' | 'flow' | 'hubscript' ): Promise { if (runType === 'script') { const script = await ScriptService.getScriptByPath({ @@ -30,13 +30,21 @@ export async function loadSchema( }) return script.schema - } else { + } else if (runType === 'flow') { const flow = await FlowService.getFlowByPath({ workspace, path }) return flow.schema + } else { + const script = await ScriptService.getHubScriptByPath({ + path + }) + + debugger + + return script.schema } } @@ -55,7 +63,7 @@ export function schemaToInputsSpec(schema: Schema): AppInputs { }, {}) } -export const displayData: Record = { +export const displayData: Record = { displaycomponent: { name: 'Result', icon: Monitor @@ -130,68 +138,17 @@ export function accessPropertyByPath(object: T, path: string): T | undefined return object } -export function fieldTypeToTsType(InputType: InputType): string { - switch (InputType) { +export function fieldTypeToTsType(inputType: InputType): string { + switch (inputType) { case 'number': return 'number' case 'boolean': return 'boolean' case 'object': return 'object' + case 'array': + return 'array' default: return 'string' } } - -const userTypeKeys = ['value'] -const staticTypeKeys = ['value'] -const dynamicTypeKeys = ['connection'] -const runnableTypeKeys = ['runnable', 'fields'] - -export function sanitizeInputSpec(componentInput: AppInput): AppInput { - if (componentInput.type === 'user') { - for (const key of staticTypeKeys) { - delete componentInput[key] - } - for (const key of dynamicTypeKeys) { - delete componentInput[key] - } - for (const key of runnableTypeKeys) { - delete componentInput[key] - } - } else if (componentInput.type === 'static') { - for (const key of userTypeKeys) { - delete componentInput[key] - } - for (const key of dynamicTypeKeys) { - delete componentInput[key] - } - for (const key of runnableTypeKeys) { - delete componentInput[key] - } - } else if (componentInput.type === 'connected') { - for (const key of userTypeKeys) { - delete componentInput[key] - } - for (const key of staticTypeKeys) { - delete componentInput[key] - } - for (const key of runnableTypeKeys) { - delete componentInput[key] - } - } else if (componentInput.type === 'runnable') { - for (const key of userTypeKeys) { - delete componentInput[key] - } - - for (const key of staticTypeKeys) { - delete componentInput[key] - } - - for (const key of dynamicTypeKeys) { - delete componentInput[key] - } - } - - return componentInput -} diff --git a/frontend/src/lib/components/common/table/Row.svelte b/frontend/src/lib/components/common/table/Row.svelte index db25809f10..0d04ad0a48 100644 --- a/frontend/src/lib/components/common/table/Row.svelte +++ b/frontend/src/lib/components/common/table/Row.svelte @@ -7,6 +7,7 @@ export let marked: string | undefined export let starred: boolean + export let canFavorite: boolean = true const dispatch = createEventDispatcher() @@ -22,7 +23,10 @@ }[kind] - +
@@ -44,15 +48,17 @@
-
- { - dispatch('change') - }} - /> -
+ {#if canFavorite} +
+ { + dispatch('change') + }} + /> +
+ {/if} diff --git a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte index 4777a49c43..314bf504e6 100644 --- a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte +++ b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte @@ -88,11 +88,11 @@ {@html marked} {:else} {!summary || summary.length == 0 ? path : summary} - {/if} + {/if} + {path ?? ''} + >{path ?? ''} +
{description ?? ''}
diff --git a/frontend/src/routes/PickHubFlow.svelte b/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte similarity index 97% rename from frontend/src/routes/PickHubFlow.svelte rename to frontend/src/lib/components/flows/pickers/PickHubFlow.svelte index 7bb15fddb8..6912fda729 100644 --- a/frontend/src/routes/PickHubFlow.svelte +++ b/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte @@ -47,7 +47,7 @@ {#each filteredItems as item (item)}