From 72f258a96d8e6481b028318ce1464fbf0cefee5f Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Wed, 12 Apr 2023 14:38:13 +0200 Subject: [PATCH] frontend apps rename improvements --- .../helpers/RunnableComponent.svelte | 5 +- .../apps/editor/AppEditorHeader.svelte | 19 +-- .../lib/components/apps/editor/appUtils.ts | 18 +- .../components/BackgroundScriptOutput.svelte | 2 +- .../components/OutputHeader.svelte | 155 +++++++++++------- .../components/TableActionOutput.svelte | 2 +- .../settingsPanel/ComponentPanel.svelte | 2 +- .../triggerLists/TriggerBadgesList.svelte | 4 +- .../(logged)/flows/get/[...path]/+page.svelte | 6 +- 9 files changed, 127 insertions(+), 86 deletions(-) diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index 4558137c5e..f899bdb351 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -190,7 +190,7 @@ $state = $state } catch (e) { - sendUserToast('Error running frontend script: ' + e.message, true) + sendUserToast(`Error running frontend script ${id}: ` + e.message, true) // Manually add a fake job to the job list to show the error @@ -206,8 +206,7 @@ } loading = false return - } - if (noBackend) { + } else if (noBackend) { if (!noToast) { sendUserToast('This app is not connected to a windmill backend, it is a static preview') } diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte index 82962fdcef..ff2b779d24 100644 --- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte @@ -25,7 +25,6 @@ faClipboard, faExternalLink, faFileExport, - faGlobe, faSave } from '@fortawesome/free-solid-svg-icons' import { @@ -42,7 +41,7 @@ import { getContext } from 'svelte' import { Icon } from 'svelte-awesome' import { Pane, Splitpanes } from 'svelte-splitpanes' - import { appToHubUrl, classNames, copyToClipboard, sendUserToast } from '../../../utils' + import { classNames, copyToClipboard, sendUserToast } from '../../../utils' import type { AppInput, ConnectedAppInput, @@ -607,14 +606,14 @@ appExport.open($app) } }, - { - displayName: 'Publish to Hub', - icon: faGlobe, - action: () => { - const url = appToHubUrl(toStatic($app, $staticExporter, $summary)) - window.open(url.toString(), '_blank') - } - }, + // { + // displayName: 'Publish to Hub', + // icon: faGlobe, + // action: () => { + // const url = appToHubUrl(toStatic($app, $staticExporter, $summary)) + // window.open(url.toString(), '_blank') + // } + // }, { displayName: 'Hub compatible JSON', icon: faFileExport, diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts index 59b5686414..f4dcc3f354 100644 --- a/frontend/src/lib/components/apps/editor/appUtils.ts +++ b/frontend/src/lib/components/apps/editor/appUtils.ts @@ -32,7 +32,10 @@ export function dfs( for (const item of grid) { if (item.id === id) { return [id] - } else if (item.data.type == 'tablecomponent' && item.data.actionButtons.find((x) => x.id)) { + } else if ( + item.data.type == 'tablecomponent' && + item.data.actionButtons.find((x) => id == x.id) + ) { return [item.id, id] } else { for (let i = 0; i < (item.data.numberOfSubgrids ?? 0); i++) { @@ -133,11 +136,14 @@ export function findGridItem(app: App, id: string): GridItem | undefined { } export function getNextGridItemId(app: App): string { - const subgridsKeys = allItems(app.grid, app.subgrids).map((x) => x.id) - const withoutDash = subgridsKeys.map((element) => element.split('-')[0]) - const id = getNextId([...new Set(withoutDash)]) - - return id + const allIds = allItems(app.grid, app.subgrids).flatMap((x) => { + if (x.data.type === 'tablecomponent') { + return [x.id, ...x.data.actionButtons.map((x) => x.id)] + } else { + return [x.id] + } + }) + return getNextId(allIds) } export function getAllRecomputeIdsForComponent(app: App, id: string | undefined) { diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte index e871a09e4c..3bcd0d70aa 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte @@ -12,7 +12,7 @@ export let first: boolean = false - + { diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte index 6001c20c01..b120dfc807 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte @@ -6,6 +6,8 @@ import { getContext } from 'svelte' import { allsubIds, findGridItem } from '../../appUtils' import IdEditor from './IdEditor.svelte' + import type { AppComponent } from '../../component' + import type { Runnable } from '$lib/components/apps/inputType' export let id: string export let name: string @@ -13,6 +15,7 @@ export let nested: boolean = false export let color: 'blue' | 'indigo' = 'indigo' export let selectable: boolean = true + export let renamable: boolean = true const { manuallyOpened, search, hasResult } = getContext('ContextPanel') @@ -47,66 +50,102 @@ } function renameId(newId: string): void { - { - const item = findGridItem($app, id) - if (item) { - item.data.id = newId - item.id = newId - } - const oldSubgrids = Object.keys($app.subgrids ?? {}).filter((subgrid) => - subgrid.startsWith(id + '-') - ) - oldSubgrids.forEach((subgrid) => { - if ($app.subgrids) { - $app.subgrids[subgrid.replace(id, newId)] = $app.subgrids[subgrid] - delete $app.subgrids[subgrid] - } - }) - allItems($app.grid, $app.subgrids).forEach((item) => { - if (item.data.componentInput?.type == 'connected') { - if (item.data.componentInput.connection?.componentId === id) { - item.data.componentInput.connection.componentId = newId - } - } else if (item.data.componentInput?.type == 'runnable') { - if ( - item.data.componentInput?.runnable?.type === 'runnableByName' && - item.data.componentInput?.runnable?.inlineScript?.refreshOn - ?.map((x) => x.id) - ?.includes(id) - ) { - item.data.componentInput.runnable.inlineScript.refreshOn = - item.data.componentInput.runnable.inlineScript.refreshOn.map((x) => { - if (x.id === id) { - return { - id: newId, - key: x.key - } - } - return x - }) - } - } + const item = findGridItem($app, id) - Object.values(item.data.configuration ?? {}).forEach((config) => { - if (config.type === 'connected') { - if (config.connection?.componentId === id) { - config.connection.componentId = newId - } - } else if (config.type == 'oneOf') { - Object.values(config.configuration ?? {}).forEach((choices) => { - Object.values(choices).forEach((c) => { - if (c.type === 'connected') { - if (c.connection?.componentId === id) { - c.connection.componentId = newId - } - } - }) - }) - } + if (!item) { + return + } + item.data.id = newId + item.id = newId + + const oldSubgrids = Object.keys($app.subgrids ?? {}).filter((subgrid) => + subgrid.startsWith(id + '-') + ) + + oldSubgrids.forEach((subgrid) => { + if ($app.subgrids) { + $app.subgrids[subgrid.replace(id, newId)] = $app.subgrids[subgrid] + delete $app.subgrids[subgrid] + } + }) + + function propagateRename(from: string, to: string) { + allItems($app.grid, $app.subgrids).forEach((item) => { + renameComponent(from, to, item.data) + }) + + $app.hiddenInlineScripts.forEach((x) => { + console.log('process', x.name, id) + processRunnable(from, to, { + name: x.name, + inlineScript: x.inlineScript, + type: 'runnableByName' }) }) - $app = $app - $selectedComponent = [newId] + } + propagateRename(id, newId) + if (item?.data.type == 'tablecomponent') { + for (let c of item.data.actionButtons) { + let old = c.id + c.id = c.id.replace(id + '_', newId + '_') + propagateRename(old, c.id) + } + } + + $app = $app + $selectedComponent = [newId] + } + + function renameComponent(from: string, to: string, data: AppComponent) { + if (data.type == 'tablecomponent') { + for (let c of data.actionButtons) { + renameComponent(from, to, c) + } + } + let componentInput = data.componentInput + if (componentInput?.type == 'connected') { + if (componentInput.connection?.componentId === from) { + componentInput.connection.componentId = to + } + } else if (componentInput?.type == 'runnable') { + processRunnable(from, to, componentInput.runnable) + } + + Object.values(data.configuration ?? {}).forEach((config) => { + if (config.type === 'connected') { + if (config.connection?.componentId === from) { + config.connection.componentId = to + } + } else if (config.type == 'oneOf') { + Object.values(config.configuration ?? {}).forEach((choices) => { + Object.values(choices).forEach((c) => { + if (c.type === 'connected') { + if (c.connection?.componentId === id) { + c.connection.componentId = to + } + } + }) + }) + } + }) + } + + function processRunnable(from: string, to: string, runnable: Runnable) { + if ( + runnable?.type === 'runnableByName' && + runnable?.inlineScript?.refreshOn?.find((x) => x.id === from) + ) { + console.log('processss') + runnable.inlineScript.refreshOn = runnable.inlineScript.refreshOn.map((x) => { + console.log('renaming', x) + if (x.id === from) { + return { + id: to, + key: x.key + } + } + return x + }) } } @@ -161,7 +200,7 @@ {/if} - {#if selectable && ($selectedComponent?.includes(id) || $hoverStore === id)} + {#if selectable && renamable && ($selectedComponent?.includes(id) || $hoverStore === id)} ($selectedComponent = [id])} diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionOutput.svelte index e8b3724ae3..7189614898 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionOutput.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/TableActionOutput.svelte @@ -11,7 +11,7 @@ export let first: boolean = false - + { diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index ed959e35a0..4e48a63f76 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -236,7 +236,6 @@ {/if} - {#if componentSettings.item.data.type === 'buttoncomponent' || componentSettings.item.data.type === 'formcomponent' || componentSettings.item.data.type === 'formbuttoncomponent'} + {#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte index e5051713f9..a897ac745f 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte @@ -156,13 +156,13 @@ {/if} -
+
{#each frontendDependencies as label, index} {label} diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte index de44af21ae..17545f90ab 100644 --- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte @@ -8,7 +8,6 @@ displayDaysAgo, emptyString, encodeState, - flowToHubUrl, sendUserToast } from '$lib/utils' import { @@ -19,7 +18,6 @@ faClipboard, faCodeFork, faEdit, - faGlobe, faList, faPlay, faShare, @@ -249,7 +247,7 @@ {/if}
- + -->