From 3fbd3ec4f914349767a20111157c96b62c9f43ce Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Mon, 7 Jul 2025 10:27:09 +0000 Subject: [PATCH] fix: tag select in script builder top bar (#6136) * all * update * react 18 * update * update * update --- frontend/package-lock.json | 6 +- frontend/package.json | 69 +++--- frontend/scripts/untar_ui_builder.js | 27 ++- frontend/src/lib/components/AppWrapper.svelte | 10 + frontend/src/lib/components/CliHelpBox.svelte | 3 +- .../src/lib/components/FirstStepInputs.svelte | 2 +- .../src/lib/components/FlowBuilder.svelte | 97 +++------ .../src/lib/components/FlowWrapper.svelte | 13 ++ .../src/lib/components/ResourceEditor.svelte | 10 +- .../src/lib/components/ScriptBuilder.svelte | 197 ++++++++++-------- .../src/lib/components/ScriptEditor.svelte | 4 +- .../src/lib/components/ScriptWrapper.svelte | 13 ++ .../src/lib/components/WorkerTagPicker.svelte | 24 ++- .../src/lib/components/WorkerTagSelect.svelte | 13 +- .../components/apps/editor/AppEditor.svelte | 49 ++--- .../apps/editor/AppEditorHeader.svelte | 48 +++-- frontend/src/lib/components/apps/types.ts | 41 +++- .../DeployOverrideConfirmationModal.svelte | 25 ++- .../copilot/chat/AiChatLayout.svelte | 98 +++++++++ .../components/copilot/chat/navigator/core.ts | 3 +- frontend/src/lib/components/custom_ui.ts | 5 +- frontend/src/lib/components/diff_drawer.ts | 24 +++ frontend/src/lib/components/flow_builder.ts | 52 +++++ .../components/flows/CreateActionsFlow.svelte | 2 +- .../lib/components/flows/FlowHistory.svelte | 22 +- .../components/flows/FlowHistoryInner.svelte | 48 +++-- .../flows/common/FlowCardHeader.svelte | 58 +++++- .../flows/content/FlowEditorPanel.svelte | 2 +- .../flows/content/FlowModuleComponent.svelte | 16 +- .../flows/content/FlowModuleHeader.svelte | 5 + .../flows/content/FlowModuleScript.svelte | 135 ++++++++---- .../content/FlowModuleWorkerTagSelect.svelte | 17 +- .../flows/content/FlowSettings.svelte | 5 +- .../lib/components/flows/flowStore.svelte.ts | 87 -------- .../src/lib/components/flows/flowStore.ts | 45 ++-- .../flows/map/FlowModuleSchemaItem.svelte | 2 +- .../flows/map/FlowModuleSchemaMap.svelte | 2 +- .../lib/components/graph/FlowGraphV2.svelte | 3 +- .../raw_apps/RawAppEditorHeader.svelte | 4 +- .../schema/EditableSchemaSdkWrapper.svelte | 13 ++ .../schema/EditableSchemaWrapper.svelte | 26 +-- .../schema/editable_schema_wrapper.ts | 10 + frontend/src/lib/components/script_builder.ts | 35 ++++ .../search/GlobalSearchModal.svelte | 2 +- .../src/lib/components/select/Select.svelte | 2 +- .../src/lib/components/select/utils.svelte.ts | 6 +- .../triggers/gcp/GcpTriggerEditorInner.svelte | 2 +- .../components/triggers/scheduled/utils.ts | 3 +- frontend/src/lib/logout.ts | 2 +- frontend/src/lib/stores.ts | 18 +- frontend/src/lib/utils.ts | 11 +- .../src/routes/(root)/(logged)/+layout.svelte | 92 +------- .../(root)/(logged)/flows/add/+page.svelte | 14 +- .../flows/edit/[...path]/+page.svelte | 86 ++++---- .../(logged)/flows/get/[...path]/+page.svelte | 2 +- .../(root)/(logged)/scripts/add/+page.svelte | 10 +- .../scripts/edit/[...path]/+page.svelte | 15 +- .../public_app_imports}/+page.svelte | 0 .../src/routes/test_dev/sdk_flow/+page.svelte | 51 +++++ .../routes/test_dev/sdk_script/+page.svelte | 41 ++++ .../src/routes/test_dev_page/+page.svelte | 105 ---------- 61 files changed, 1058 insertions(+), 774 deletions(-) create mode 100644 frontend/src/lib/components/AppWrapper.svelte create mode 100644 frontend/src/lib/components/FlowWrapper.svelte create mode 100644 frontend/src/lib/components/ScriptWrapper.svelte create mode 100644 frontend/src/lib/components/copilot/chat/AiChatLayout.svelte create mode 100644 frontend/src/lib/components/diff_drawer.ts create mode 100644 frontend/src/lib/components/flow_builder.ts delete mode 100644 frontend/src/lib/components/flows/flowStore.svelte.ts create mode 100644 frontend/src/lib/components/schema/EditableSchemaSdkWrapper.svelte create mode 100644 frontend/src/lib/components/schema/editable_schema_wrapper.ts create mode 100644 frontend/src/lib/components/script_builder.ts rename frontend/src/routes/{test_dev_page_2 => test_dev/public_app_imports}/+page.svelte (100%) create mode 100644 frontend/src/routes/test_dev/sdk_flow/+page.svelte create mode 100644 frontend/src/routes/test_dev/sdk_script/+page.svelte delete mode 100644 frontend/src/routes/test_dev_page/+page.svelte diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e33a53c091..efe3d64cbd 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1,12 +1,12 @@ { "name": "windmill-components", - "version": "1.502.2", + "version": "1.502.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "windmill-components", - "version": "1.502.2", + "version": "1.502.5", "hasInstallScript": true, "license": "AGPL-3.0", "dependencies": { @@ -151,7 +151,7 @@ "fsevents": "^2.3.3" }, "peerDependencies": { - "svelte": "^4.0.0" + "svelte": "^5.0.0" } }, "node_modules/@alloc/quick-lru": { diff --git a/frontend/package.json b/frontend/package.json index 12778fc663..cdd5241f4b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,7 +5,7 @@ "dev": "vite dev", "build": "vite build", "preview": "vite preview", - "postinstall": "node scripts/untar_ui_builder.js && node scripts/patch_files.js", + "postinstall": "if [ -f ./scripts/untar_ui_builder.js ]; then node ./scripts/untar_ui_builder.js && node ./scripts/patch_files.js; fi", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --threshold warning", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .", @@ -161,7 +161,7 @@ "zod-to-json-schema": "^3.24.5" }, "peerDependencies": { - "svelte": "^4.0.0" + "svelte": "^5.0.0" }, "exports": { "./package.json": "./package.json", @@ -169,7 +169,16 @@ "types": "./dist/index.d.ts", "svelte": "./dist/index.js" }, + "./scripts/untar_ui_builder.js": "./scripts/untar_ui_builder.js", "./assets/app.css": "./package/assets/app.css", + "./components/custom_ui": { + "types": "./package/components/custom_ui.d.ts", + "default": "./package/components/custom_ui.js" + }, + "./components/scriptBuilder": { + "types": "./package/components/scriptBuilder.d.ts", + "default": "./package/components/scriptBuilder.js" + }, "./components/TestJobLoader.svelte": { "types": "./package/components/TestJobLoader.svelte.d.ts", "svelte": "./package/components/TestJobLoader.svelte", @@ -255,20 +264,20 @@ "svelte": "./package/components/FlowStatusViewer.svelte", "default": "./package/components/FlowStatusViewer.svelte" }, - "./components/FlowBuilder.svelte": { - "types": "./package/components/FlowBuilder.svelte.d.ts", - "svelte": "./package/components/FlowBuilder.svelte", - "default": "./package/components/FlowBuilder.svelte" + "./components/FlowWrapper.svelte": { + "types": "./package/components/FlowWrapper.svelte.d.ts", + "svelte": "./package/components/FlowWrapper.svelte", + "default": "./package/components/FlowWrapper.svelte" }, - "./components/AppEditor.svelte": { - "types": "./package/components/apps/editor/AppEditor.svelte.d.ts", - "svelte": "./package/components/apps/editor/AppEditor.svelte", - "default": "./package/components/apps/editor/AppEditor.svelte" + "./components/AppWrapper.svelte": { + "types": "./package/components/AppWrapper.svelte.d.ts", + "svelte": "./package/components/AppWrapper.svelte", + "default": "./package/components/AppWrapper.svelte" }, - "./components/ScriptBuilder.svelte": { - "types": "./package/components/ScriptBuilder.svelte.d.ts", - "svelte": "./package/components/ScriptBuilder.svelte", - "default": "./package/components/ScriptBuilder.svelte" + "./components/ScriptWrapper.svelte": { + "types": "./package/components/ScriptWrapper.svelte.d.ts", + "svelte": "./package/components/ScriptWrapper.svelte", + "default": "./package/components/ScriptWrapper.svelte" }, "./components/FlowEditor.svelte": { "types": "./package/components/flows/FlowEditor.svelte.d.ts", @@ -285,10 +294,10 @@ "svelte": "./package/components/SchemaForm.svelte", "default": "./package/components/SchemaForm.svelte" }, - "./components/EditableSchemaWrapper.svelte": { - "types": "./package/components/schema/EditableSchemaWrapper.svelte.d.ts", - "svelte": "./package/components/schema/EditableSchemaWrapper.svelte", - "default": "./package/components/schema/EditableSchemaWrapper.svelte" + "./components/EditableSchemaSdkWrapper.svelte": { + "types": "./package/components/schema/EditableSchemaSdkWrapper.svelte.d.ts", + "svelte": "./package/components/schema/EditableSchemaSdkWrapper.svelte", + "default": "./package/components/schema/EditableSchemaSdkWrapper.svelte" }, "./components/ResourceEditor.svelte": { "types": "./package/components/ResourceEditor.svelte.d.ts", @@ -451,14 +460,14 @@ "components/FlowBuilder.svelte": [ "./package/components/FlowBuilder.svelte.d.ts" ], - "components/AppEditor.svelte": [ - "./package/components/apps/editor/AppEditor.svelte.d.ts" + "components/AppWrapper.svelte": [ + "./package/components/AppWrapper.svelte.d.ts" ], - "components/ScriptBuilder.svelte": [ - "./package/components/ScriptBuilder.svelte.d.ts" + "components/ScriptWrapper.svelte": [ + "./package/components/ScriptWrapper.svelte.d.ts" ], - "components/FlowEditor.svelte": [ - "./package/components/flows/FlowEditor.svelte.d.ts" + "components/FlowWrapper.svelte": [ + "./package/components/FlowWrapper.svelte.d.ts" ], "components/SchemaViewer.svelte": [ "./package/components/SchemaViewer.svelte.d.ts" @@ -466,8 +475,8 @@ "components/SchemaEditor.svelte": [ "./package/components/SchemaEditor.svelte.d.ts" ], - "components/EditableSchemaWrapper.svelte": [ - "./package/components/schema/EditableSchemaWrapper.svelte.d.ts" + "components/EditableSchemaSdkWrapper.svelte": [ + "./package/components/schema/EditableSchemaSdkWrapper.svelte.d.ts" ], "components/flows/FlowHistoryInner.svelte": [ "./package/components/flows/FlowHistoryInner.svelte.d.ts" @@ -519,6 +528,12 @@ ], "tailwindUtils": [ "./package/components/apps/editor/componentsPanel/tailwindUtils.d.ts" + ], + "components/scriptBuilder": [ + "./package/components/scriptBuilder.d.ts" + ], + "components/custom_ui": [ + "./package/components/custom_ui.d.ts" ] } }, @@ -526,4 +541,4 @@ "@rollup/rollup-linux-x64-gnu": "^4.35.0", "fsevents": "^2.3.3" } -} +} \ No newline at end of file diff --git a/frontend/scripts/untar_ui_builder.js b/frontend/scripts/untar_ui_builder.js index c64b1b1484..f0ebbd8c87 100644 --- a/frontend/scripts/untar_ui_builder.js +++ b/frontend/scripts/untar_ui_builder.js @@ -1,6 +1,23 @@ import path from 'path' import fs from 'fs' + +// Check if we're in node_modules (installed as dependency) +if (process.cwd().includes('node_modules')) { + console.log('Skipping postinstall - running as dependency'); + process.exit(0); +} + +// Check if we're in the root project +if (process.env.INIT_CWD && process.env.INIT_CWD !== process.cwd()) { + console.log('Skipping postinstall - not root project'); + process.exit(0); +} + +// Your actual postinstall logic here +console.log('Running postinstall for root project'); + + import { x } from 'tar' const tarUrl = 'https://pub-06154ed168a24e73a86ab84db6bf15d8.r2.dev/ui_builder-d44b577.tar.gz' @@ -18,16 +35,6 @@ const response = await fetch(tarUrl) const buffer = await response.arrayBuffer() await fs.promises.writeFile(outputTarPath, Buffer.from(buffer)) -// Check if this script is being run from the package root -const isRootInstall = process.cwd() + '/scripts' === __dirname - -if (isRootInstall) { - console.log('Running postinstall: direct install') - // Your postinstall logic here -} else { - console.log('Skipping postinstall: installed as dependency') - process.exit(0) -} // Create extract directory if it doesn't exist try { diff --git a/frontend/src/lib/components/AppWrapper.svelte b/frontend/src/lib/components/AppWrapper.svelte new file mode 100644 index 0000000000..37e5bdfc2e --- /dev/null +++ b/frontend/src/lib/components/AppWrapper.svelte @@ -0,0 +1,10 @@ + + + diff --git a/frontend/src/lib/components/CliHelpBox.svelte b/frontend/src/lib/components/CliHelpBox.svelte index e05ba0f763..7c992d9154 100644 --- a/frontend/src/lib/components/CliHelpBox.svelte +++ b/frontend/src/lib/components/CliHelpBox.svelte @@ -1,9 +1,8 @@
diff --git a/frontend/src/lib/components/FirstStepInputs.svelte b/frontend/src/lib/components/FirstStepInputs.svelte index ef7856828b..bd71e6a4b3 100644 --- a/frontend/src/lib/components/FirstStepInputs.svelte +++ b/frontend/src/lib/components/FirstStepInputs.svelte @@ -1,6 +1,6 @@ + + + + diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte index 7b71759eb8..9030c0ea2e 100644 --- a/frontend/src/lib/components/ResourceEditor.svelte +++ b/frontend/src/lib/components/ResourceEditor.svelte @@ -20,7 +20,6 @@ import autosize from '$lib/autosize' import GfmMarkdown from './GfmMarkdown.svelte' import TestTriggerConnection from './triggers/TestTriggerConnection.svelte' - import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted' import GitHubAppIntegration from './GitHubAppIntegration.svelte' interface Props { @@ -29,7 +28,7 @@ path?: string newResource?: boolean hidePath?: boolean - watchChanges?: boolean + onChange?: (args: { path: string; args: Record; description: string }) => void defaultValues?: Record | undefined } @@ -39,7 +38,7 @@ path = $bindable(''), newResource = false, hidePath = false, - watchChanges = false, + onChange, defaultValues = undefined }: Props = $props() @@ -62,7 +61,6 @@ let viewJsonSchema = $state(false) const dispatch = createEventDispatcher() - const dispatchIfMounted = createDispatcherIfMounted(dispatch) let rawCode: string | undefined = $state(undefined) @@ -181,8 +179,8 @@ run(() => { canSave = can_write && isValid && jsonError == '' }) - run(() => { - watchChanges && dispatchIfMounted('change', { path, args, description }) + $effect(() => { + onChange && onChange({ path, args, description }) }) run(() => { rawCode && untrack(() => parseJson()) diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte index 480cb03e18..31ece0aab1 100644 --- a/frontend/src/lib/components/ScriptBuilder.svelte +++ b/frontend/src/lib/components/ScriptBuilder.svelte @@ -11,7 +11,8 @@ type TriggersCount, PostgresTriggerService, CaptureService, - type ScriptLang + type ScriptLang, + WorkerService } from '$lib/gen' import { inferArgs } from '$lib/infer' import { initialCode } from '$lib/script_helpers' @@ -21,6 +22,7 @@ enterpriseLicense, usedTriggerKinds, userStore, + workerTags, workspaceStore } from '$lib/stores' import { @@ -65,16 +67,15 @@ import ScriptSchema from './ScriptSchema.svelte' import Section from './Section.svelte' import Label from './Label.svelte' - import type DiffDrawer from './DiffDrawer.svelte' import type Editor from './Editor.svelte' import WorkerTagPicker from './WorkerTagPicker.svelte' import MetadataGen from './copilot/MetadataGen.svelte' import { writable } from 'svelte/store' import { defaultScriptLanguages, processLangs } from '$lib/scripts' import DefaultScripts from './DefaultScripts.svelte' - import { createEventDispatcher, onMount, setContext, untrack } from 'svelte' + import { onMount, setContext, untrack } from 'svelte' import Summary from './Summary.svelte' - import type { ScriptBuilderWhitelabelCustomUi } from './custom_ui' + import DeployOverrideConfirmationModal from '$lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte' import TriggersEditor from './triggers/TriggersEditor.svelte' import type { ScheduleTrigger, TriggerContext } from './triggers' @@ -86,7 +87,6 @@ } from '$lib/script_helpers' import CaptureTable from './triggers/CaptureTable.svelte' import type { SavedAndModifiedValue } from './common/confirmationModal/unsavedTypes' - import type { ScriptBuilderFunctionExports } from './scriptBuilder' import DeployButton from './DeployButton.svelte' import { type NewScriptWithDraftAndDraftTriggers, @@ -97,29 +97,12 @@ } from './triggers/utils' import DraftTriggersConfirmationModal from './common/confirmationModal/DraftTriggersConfirmationModal.svelte' import { Triggers } from './triggers/triggers.svelte' - - interface Props { - script: NewScript & { draft_triggers?: Trigger[] } - fullyLoaded?: boolean - initialPath?: string - template?: 'docker' | 'bunnative' | 'script' - initialArgs?: Record - lockedLanguage?: boolean - showMeta?: boolean - neverShowMeta?: boolean - diffDrawer?: DiffDrawer | undefined - savedScript?: NewScriptWithDraftAndDraftTriggers | undefined - searchParams?: URLSearchParams - disableHistoryChange?: boolean - replaceStateFn?: (url: string) => void - customUi?: ScriptBuilderWhitelabelCustomUi - savedPrimarySchedule?: ScheduleTrigger | undefined - functionExports?: ((exports: ScriptBuilderFunctionExports) => void) | undefined - children?: import('svelte').Snippet - } + import type { ScriptBuilderProps } from './script_builder' + import type { DiffDrawerI } from './diff_drawer' + import WorkerTagSelect from './WorkerTagSelect.svelte' let { - script = $bindable(), + script, fullyLoaded = true, initialPath = $bindable(''), template = $bindable('script'), @@ -135,8 +118,15 @@ customUi = {}, savedPrimarySchedule = undefined, functionExports = undefined, - children - }: Props = $props() + children, + onDeploy, + onDeployError, + onSaveInitial, + onSeeDetails, + onSaveDraftError, + onSaveDraft, + disableAi + }: ScriptBuilderProps = $props() export function getInitialAndModifiedValues(): SavedAndModifiedValue { return { @@ -153,7 +143,7 @@ 'u/' + ($userStore?.username?.includes('@') ? $userStore?.username.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '') - : $userStore?.username!) + + : $userStore?.username) + '/' + generateRandomString(12) @@ -210,8 +200,6 @@ loadTriggers() } - const dispatch = createEventDispatcher() - onMount(() => { if (functionExports) { console.log('functionExports set') @@ -573,10 +561,10 @@ script.parent_hash = newHash sendUserToast('Deployed') } else { - dispatch('deploy', newHash) + onDeploy?.({ path: script.path, hash: newHash }) } } catch (error) { - dispatch('deployError', error) + onDeployError?.({ path: script.path, error }) sendUserToast(`Error while saving the script: ${error.body || error.message}`, true) } loadingSave = false @@ -629,7 +617,7 @@ } catch (error) { sendUserToast(`Could not parse code, are you sure it is valid?`, true) } - + let newHash = '' if (initialPath == '' || savedScript?.draft_only) { if (savedScript?.draft_only) { await ScriptService.deleteScriptByPath({ @@ -649,7 +637,7 @@ runnableKind: 'script' }) } - await ScriptService.createScript({ + newHash = await ScriptService.createScript({ workspace: $workspaceStore!, requestBody: { path: script.path, @@ -709,9 +697,9 @@ if (initialPath == '' || (savedScript?.draft_only && script.path !== initialPath)) { savedAtNewPath = true initialPath = script.path - dispatch('saveInitial', script.path) + onSaveInitial?.({ path: script.path, hash: newHash }) } - dispatch('saveDraft', { path: script.path, savedAtNewPath, script }) + onSaveDraft?.({ path: script.path, savedAtNewPath, script }) sendUserToast('Saved as draft') } catch (error) { @@ -719,7 +707,7 @@ `Error while saving the script as a draft: ${error.body || error.message}`, true ) - dispatch('saveDraftError', error) + onSaveDraftError?.({ path: script.path, error }) } loadingDraft = false } @@ -727,7 +715,7 @@ function computeDropdownItems( initialPath: string, savedScript: NewScriptWithDraftAndDraftTriggers | undefined, - diffDrawer: DiffDrawer | undefined + diffDrawer: DiffDrawerI | undefined ) { let dropdownItems: { label: string; onClick: () => void }[] = initialPath != '' && customUi?.topBar?.extraDeployOptions != false @@ -777,7 +765,7 @@ { label: 'Exit & See details', onClick: () => { - dispatch('seeDetails', initialPath) + onSeeDetails?.({ path: initialPath }) } } ] @@ -945,14 +933,21 @@ $effect(() => { !disableHistoryChange && untrack(() => encodeScriptState(script)) }) + + loadWorkerTags() + async function loadWorkerTags() { + if (!$workerTags) { + $workerTags = await WorkerService.getCustomTags({ workspace: $workspaceStore }) + } + } {@render children?.()} - {#if script.schema} + {#if script.schema && !disableAi && !customUi?.settingsPanel?.metadata?.disableAiFilling}
- -
- {#snippet action()} - - {/snippet} - {#if lockedLanguage} -
- As a forked script, the language '{script.language}' cannot be modified. -
- {/if} -
- {#each langs as [label, lang] (lang)} - {@const isPicked = - (lang == script.language && template == 'script') || - (template == 'bunnative' && lang == 'bunnative') || - (template == 'docker' && lang == 'docker')} - - - {#snippet text()} - {label} is only available with an enterprise license - {/snippet} - - {/each} -
-
- + + {#snippet text()} + {label} is only available with an enterprise license + {/snippet} + + {/each} +
+ + {/if} {#if customUi?.settingsPanel?.metadata?.disableScriptKind !== true}
{#snippet header()} @@ -1172,6 +1167,14 @@
{/if} + {#if customUi?.settingsPanel?.disableRuntime} +
+ +
+ {/if}
@@ -1239,7 +1242,10 @@ group tag (queue). For instance, you could setup an "highmem", or "gpu" tag. {/snippet} - +
{#snippet header()} @@ -1693,6 +1699,18 @@ {/if}
+ {#if $workerTags} + {#if $workerTags?.length ?? 0 > 0} +
+ +
+ {/if} + {/if} {#if customUi?.topBar?.settings != false}