mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-10-29 08:12:56 +00:00
Ruben FiszelandClaude Opus 4.8
003a262a4e
* feat: column-level lineage for ducklake pipelines via // column annotation Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat: auto-derive column lineage from DuckDB SQL AST (annotation as override) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * docs: clarify column-lineage inference is server-side; drafts use annotations Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(frontend): surface inferred column lineage in live pipeline drafts Threads the DuckDB SQL-AST column lineage (from the WASM asset parser) through ScriptEditor -> details pane -> page -> resolveGraph, merged with // column annotations (annotation wins) so the live preview matches the deployed graph. Takes effect once windmill-parser-wasm-asset is republished with the inference. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * chore(frontend): bump windmill-parser-wasm-asset to 1.740.0 for SQL column-lineage inference Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * docs: column-lineage inference now runs live (WASM) too, merged with annotations Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(frontend): transitive column-lineage trace (impact analysis) Stitches every producer's column_lineage into a pipeline-wide column graph (columnLineageGraph.ts) and replaces the single-hop diagram with an interactive ColumnLineageTrace: select an asset to see its columns' full upstream/downstream lineage across scripts; click any column to highlight its complete transitive impact set (forward + backward) and dim the rest. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix: address CI review on column lineage (parse-fallback, node-id, perf, leak) - backend: DuckDB SQL parse failure now falls back to `// column` annotation lineage instead of dropping it (Codex P1) - columnLineageGraph: collision-proof JSON node ids; deterministic first-write output anchoring when a producer has multiple ducklake writes (cubic P2 ×2) - pipeline page: gate buildColumnGraph to a ducklake-asset selection so it doesn't rebuild on every editor keystroke (cubic P2) - ScriptEditor: clear inferredColumnLineage on parse error so it can't leak across a script switch (cubic P2) - AssetGraphEdge: widen badge stacking offset 12px->18px to fully clear (cubic P3) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix: resolve JOIN inputs + anchor column lineage to // materialize target Addresses the second Codex review pass (two P1s): - SQL inference now walks JOINed tables: build_from_maps maps every FROM entry AND its joins into the alias map, and single-table attribution requires no joins. `SELECT o.x, c.y FROM a o JOIN b c` now resolves c.y (was dropped). - The column graph anchors a producer's lineage to its declared // materialize target (surfaced on the runnable node) instead of guessing a ducklake write-edge, which is unordered for deployed graphs and ambiguous for multi-output scripts. Falls back to a write-edge when no materialize target. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix: gate column-lineage badge to the // materialize target write-edge The canvas badge keyed on `e.asset_kind === 'ducklake'`, so a multi-output producer showed the same column mapping on every ducklake write-edge. Use the same materialize-target anchor as buildColumnGraph: the badge lands only on the declared output's edge, falling back to the ducklake write-edge when there's no materialize annotation. (Codex P1) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix: build column trace from displayGraph so View hides draft lineage The transitive column trace was built from graphWithDraft regardless of mode, so in View with drafts hidden it could surface draft `// column` lineage the deployed canvas doesn't show. Build it from `displayGraph` (the graph the canvas actually renders) so the trace matches: draft overlays in edit / show-drafts, deployed-only in plain View. (Codex P2) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix: don't infer column lineage for local/temp staging CTAS A CTAS into a local/temp staging table isn't the materialized output, but its projection was inferred and (flat) column_lineage anchored to the script's // materialize target — so staging columns showed up as the final asset's. Gate inference to the actual output: a top-level managed-materialize SELECT, or a CTAS/CREATE VIEW whose target resolves to a real asset. (Codex P1) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix: scope inferred column lineage to one output asset Inference accumulated columns from every output-producing query into one flat list, all anchored (frontend) to the script's // materialize target — so an auxiliary CTAS into a different asset showed its columns on the materialized one. Tag each inferred entry with its output asset and, in parse_assets, scope the list to the // materialize target (keeping untagged top-level-SELECT entries); with no declared target, drop inference when entries span multiple output assets rather than attribute them to an arbitrary one. Parser-internal — no wire change. (Codex P1) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix: treat CREATE TEMP TABLE/VIEW as local even under an active USE A one-part temp name under `USE dl` resolved to an asset (ducklake://…/tmp) before being registered local, so a final SELECT reading it invented `final.total <- warehouse/tmp.amt` (a phantom DuckLake column) and recorded a phantom asset. track_table_definition now registers any temporary table/view as local up front, bypassing active-asset resolution; CreateTable/CreateView pass their `temporary` flag. (Codex P1) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2724 lines
86 KiB
Svelte
2724 lines
86 KiB
Svelte
<script lang="ts">
|
|
import { buildWsUrl } from '$lib/wsUrl'
|
|
import { paneMinPercent } from '$lib/utils/splitpaneSizing'
|
|
import { processSecretArgs } from './secretArgUtils'
|
|
import type { Schema, SupportedLanguage } from '$lib/common'
|
|
import {
|
|
type CompletedJob,
|
|
type Job,
|
|
JobService,
|
|
type Preview,
|
|
type ScriptLang,
|
|
type ScriptModule
|
|
} from '$lib/gen'
|
|
import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
|
|
import { copyToClipboard, emptySchema, sendUserToast } from '$lib/utils'
|
|
import Editor from './Editor.svelte'
|
|
import { inferArgs, inferAssets, inferAnsibleExecutionMode } from '$lib/infer'
|
|
import { parsePipelineAnnotations } from '$lib/components/assets/AssetGraph/parsePipelineAnnotations'
|
|
import { isWorkflowAsCode } from '$lib/components/graph/wacToFlow'
|
|
import WacDiagram from '$lib/components/graph/WacDiagram.svelte'
|
|
import { Pane, Splitpanes } from 'svelte-splitpanes'
|
|
import SchemaForm from './SchemaForm.svelte'
|
|
import PowerShellCommonParams from './PowerShellCommonParams.svelte'
|
|
import LogPanel from './scriptEditor/LogPanel.svelte'
|
|
import EditorBar, {
|
|
EDITOR_BAR_WIDTH_THRESHOLD,
|
|
EDITOR_BAR_HELPERS_COMPACT_THRESHOLD
|
|
} from './EditorBar.svelte'
|
|
import JobLoader from './JobLoader.svelte'
|
|
import JobProgressBar from '$lib/components/jobs/JobProgressBar.svelte'
|
|
import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from 'svelte'
|
|
import { Button } from './common'
|
|
import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte'
|
|
import WindmillIcon from './icons/WindmillIcon.svelte'
|
|
import * as Y from 'yjs'
|
|
import { scriptLangToEditorLang } from '$lib/scripts'
|
|
import { langToExt } from '$lib/editorLangUtils'
|
|
import { WebsocketProvider } from 'y-websocket'
|
|
import Modal from './common/modal/Modal.svelte'
|
|
import Popover from './meltComponents/Popover.svelte'
|
|
import DiffEditor from './DiffEditor.svelte'
|
|
import {
|
|
Bug,
|
|
ChevronDown,
|
|
Copy,
|
|
CornerDownLeft,
|
|
Disc,
|
|
Download,
|
|
ExternalLink,
|
|
Github,
|
|
GitBranch,
|
|
Play,
|
|
PlayIcon,
|
|
Plus,
|
|
Target,
|
|
Terminal,
|
|
Pencil,
|
|
WandSparkles,
|
|
X,
|
|
Zap
|
|
} from 'lucide-svelte'
|
|
import {
|
|
DebugToolbar,
|
|
DebugPanel,
|
|
DebugConsole,
|
|
getDAPClient,
|
|
debugState,
|
|
resetDAPClient,
|
|
getDebugServerUrl,
|
|
type DebugLanguage,
|
|
isDebuggable,
|
|
getDebugFileExtension,
|
|
fetchContextualVariables,
|
|
signDebugRequest,
|
|
signMultiplayerRequest,
|
|
getDebugErrorMessage
|
|
} from '$lib/components/debug'
|
|
import { SvelteSet } from 'svelte/reactivity'
|
|
import { setLicense } from '$lib/enterpriseUtils'
|
|
import type { ScriptEditorWhitelabelCustomUi } from './custom_ui'
|
|
import Tabs from './common/tabs/Tabs.svelte'
|
|
import Tab from './common/tabs/Tab.svelte'
|
|
import { slide } from 'svelte/transition'
|
|
import CaptureTable from '$lib/components/triggers/CaptureTable.svelte'
|
|
import CaptureButton from './triggers/CaptureButton.svelte'
|
|
import { setContext } from 'svelte'
|
|
import HideButton from './apps/editor/settingsPanel/HideButton.svelte'
|
|
import { base } from '$lib/base'
|
|
import DispatchEventsButton from '$lib/components/runs/DispatchEventsButton.svelte'
|
|
import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './copilot/chat/script/core'
|
|
import { getStringError } from './copilot/chat/utils'
|
|
import type { ScriptOptions } from './copilot/chat/ContextManager.svelte'
|
|
import { aiChatManager, AIMode } from './copilot/chat/AIChatManager.svelte'
|
|
|
|
// Forward-looking hook for the upcoming session-pane feature: that PR will
|
|
// `setContext('aiChatManager', ...)` from the session wrapper so this editor
|
|
// can detect it and hide its own AI/VS Code controls. On main today nothing
|
|
// sets the context, so `inSessionPane` is always false and these buttons
|
|
// render normally — keep the check anyway to avoid re-touching this file
|
|
// when the session-pane PR lands. Untyped getContext to avoid coupling to
|
|
// the AIChatManager class export (which lives on the chat-visuals PR).
|
|
const inSessionPane = !!getContext('aiChatManager')
|
|
import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
|
|
import AssetsDropdownButton from './assets/AssetsDropdownButton.svelte'
|
|
import { canHavePreprocessor } from '$lib/script_helpers'
|
|
import { assetEq, type AssetWithAltAccessType } from './assets/lib'
|
|
import type { ColumnLineage } from './assets/AssetGraph/parsePipelineAnnotations'
|
|
import { editor as meditor } from 'monaco-editor'
|
|
import type { ReviewChangesOpts } from './copilot/chat/monaco-adapter'
|
|
import GitRepoViewer from './GitRepoViewer.svelte'
|
|
import GitRepoResourcePicker from './GitRepoResourcePicker.svelte'
|
|
import { updateDelegateToGitRepoConfig, insertAdditionalInventories } from '$lib/ansibleUtils'
|
|
import { copilotInfo } from '$lib/aiStore'
|
|
import JsonInputs from '$lib/components/JsonInputs.svelte'
|
|
import Toggle from './Toggle.svelte'
|
|
import { deepEqual } from 'fast-equals'
|
|
import { usePreparedAssetSqlQueries } from '$lib/infer.svelte'
|
|
import { resource, watch } from 'runed'
|
|
import { createScriptRecording } from './recording/scriptRecording.svelte'
|
|
import { setActiveRecording } from './recording/flowRecording.svelte'
|
|
import type { ScriptRecording } from './recording/types'
|
|
import DropdownV2 from './DropdownV2.svelte'
|
|
|
|
interface Props {
|
|
// Exported
|
|
schema?: Schema | any
|
|
code: string
|
|
path: string | undefined
|
|
lang: Preview['language']
|
|
kind?: string | undefined
|
|
autoKind?: string | undefined
|
|
template?:
|
|
| 'pgsql'
|
|
| 'mysql'
|
|
| 'script'
|
|
| 'docker'
|
|
| 'powershell'
|
|
| 'bunnative'
|
|
| 'claudesandbox'
|
|
| 'wac_python'
|
|
| 'wac_typescript'
|
|
| 'ci_test_bun'
|
|
| 'ci_test_python'
|
|
tag: string | undefined
|
|
initialArgs?: Record<string, any>
|
|
fixedOverflowWidgets?: boolean
|
|
noSyncFromGithub?: boolean
|
|
editor?: Editor | undefined
|
|
diffEditor?: DiffEditor | undefined
|
|
collabMode?: boolean
|
|
edit?: boolean
|
|
noHistory?: boolean
|
|
saveToWorkspace?: boolean
|
|
watchChanges?: boolean
|
|
customUi?: ScriptEditorWhitelabelCustomUi | undefined
|
|
// Pipeline editor: an asset-parse failure should also turn the
|
|
// "parsable" badge red — asset lineage is load-bearing there, so a
|
|
// green badge must mean both the main function AND the asset parse
|
|
// succeeded.
|
|
requireValidAssets?: boolean
|
|
args: Record<string, any>
|
|
// Custom timeout (in seconds) from the script settings. Forwarded to the
|
|
// preview run so "Test" honors the same timeout a deployed run would,
|
|
// instead of silently falling back to the instance default.
|
|
timeout?: number
|
|
selectedTab?: 'main' | 'preprocessor' | 'diagram'
|
|
hasPreprocessor?: boolean
|
|
captureTable?: CaptureTable | undefined
|
|
showCaptures?: boolean
|
|
stablePathForCaptures?: string
|
|
lastSavedCode?: string | undefined
|
|
lastDeployedCode?: string | undefined
|
|
disableAi?: boolean
|
|
assets?: AssetWithAltAccessType[]
|
|
// Body-inferred column lineage (DuckDB SQL AST), surfaced alongside
|
|
// `assets` so the pipeline editor can render inferred column lineage on
|
|
// the live graph. Empty/undefined for non-DuckDB or when the parser
|
|
// build predates the inference.
|
|
inferredColumnLineage?: ColumnLineage[]
|
|
modules?: { [key: string]: ScriptModule } | null
|
|
editorBarRight?: import('svelte').Snippet
|
|
enablePreprocessorSnippet?: boolean
|
|
/**
|
|
* Layout for the test/preview panel relative to the code editor.
|
|
* `right` (default) splits horizontally with the test panel on the
|
|
* right; `bottom` splits vertically with the test panel below — same
|
|
* orientation the flow editor uses for module step editing.
|
|
*/
|
|
previewLayout?: 'right' | 'bottom'
|
|
/**
|
|
* Fires whenever the test/preview run state changes — used by the
|
|
* pipeline editor to mirror the running script onto the canvas
|
|
* (animate its incoming/outgoing edges) so Test feels equivalent
|
|
* to clicking a run button on the graph.
|
|
*/
|
|
onTestStateChange?: (running: boolean) => void
|
|
// Fired whenever a test run is started from this editor, with the
|
|
// preview job id. Used by whitelabel embedders to track test jobs.
|
|
onTestJob?: (e: { jobId: string }) => void
|
|
// When true the right-hand test/run pane mounts collapsed. The user
|
|
// can still expand it via `toggleTestPanel`. Defaults to false so the
|
|
// regular /scripts/edit route keeps its current open-by-default UX;
|
|
// the session preview opts in to save vertical real estate.
|
|
initialTestPanelCollapsed?: boolean
|
|
}
|
|
|
|
let {
|
|
schema = $bindable(),
|
|
code = $bindable(),
|
|
path,
|
|
lang,
|
|
kind = undefined,
|
|
autoKind = undefined,
|
|
template = 'script',
|
|
tag,
|
|
fixedOverflowWidgets = true,
|
|
noSyncFromGithub = false,
|
|
editor = $bindable(undefined),
|
|
diffEditor = $bindable(undefined),
|
|
collabMode = false,
|
|
edit = true,
|
|
noHistory = false,
|
|
saveToWorkspace = false,
|
|
watchChanges = false,
|
|
customUi = undefined,
|
|
requireValidAssets = false,
|
|
args = $bindable(),
|
|
timeout = undefined,
|
|
selectedTab = $bindable('main'),
|
|
hasPreprocessor = $bindable(false),
|
|
captureTable = $bindable(undefined),
|
|
showCaptures = true,
|
|
stablePathForCaptures = '',
|
|
lastSavedCode = undefined,
|
|
lastDeployedCode = undefined,
|
|
disableAi = false,
|
|
assets = $bindable(),
|
|
inferredColumnLineage = $bindable(),
|
|
modules = $bindable(undefined),
|
|
editorBarRight,
|
|
enablePreprocessorSnippet = false,
|
|
previewLayout = 'right',
|
|
onTestStateChange,
|
|
onTestJob,
|
|
initialTestPanelCollapsed = false
|
|
}: Props = $props()
|
|
|
|
$effect(() => {
|
|
onTestStateChange?.(testIsLoading)
|
|
})
|
|
|
|
let initialArgs = structuredClone($state.snapshot(args))
|
|
let jsonView = $state(false)
|
|
let schemaHeight = $state(0)
|
|
// Asset-trigger cascade choice for the Test button. Only meaningful when
|
|
// `customUi.previewPanel.downstreamSubscribers > 0`. Defaults to off so
|
|
// iteration on a pipeline script doesn't accidentally fan out runs to
|
|
// downstream subscribers. The user can flip it via the split-button
|
|
// caret next to Test, and the choice sticks for the rest of the session.
|
|
let cascadeDownstream = $state(false)
|
|
let cascadeMenuOpen = $state(false)
|
|
let psCommonParams: Record<string, any> = $state({})
|
|
let showPsCommonParams = $derived(lang === 'powershell' && /^\s*\[CmdletBinding/im.test(code))
|
|
|
|
// Module tab state
|
|
let activeModuleTab: string | null = $state(null)
|
|
// Per-module test panel state (args + schema), persisted across tab switches
|
|
let moduleTestState: Record<string, { args: Record<string, any>; schema: Schema }> = $state({})
|
|
let testPanelArgs: Record<string, any> = $state({})
|
|
let testPanelSchema: Schema = $state(emptySchema())
|
|
// editorCode is what the editor shows; code always holds the main script content
|
|
let editorCode: string = $state(code)
|
|
// Sync editorCode when code changes externally (template reset, copilot,
|
|
// new-script template init, etc.). We also re-run schema inference in that
|
|
// case — otherwise if the code prop is set after ScriptEditor's onMount (as
|
|
// happens on /scripts/add when initContent sets script.content after the
|
|
// editor has already mounted with an empty string), the schema would stay
|
|
// empty until the user typed into the editor.
|
|
let lastSyncedCode = code
|
|
$effect.pre(() => {
|
|
if (activeModuleTab === null && code !== lastSyncedCode) {
|
|
editorCode = code
|
|
lastSyncedCode = code
|
|
editor?.setCode(editorCode) // immediate sync, don't wait for the 800ms debounce
|
|
untrack(() => inferSchema(code))
|
|
}
|
|
})
|
|
|
|
function switchToModule(modulePath: string) {
|
|
if (activeModuleTab !== null && modules && activeModuleTab !== modulePath) {
|
|
// Switching from another module: save its content and test state
|
|
modules[activeModuleTab] = { ...modules[activeModuleTab], content: editorCode }
|
|
moduleTestState[activeModuleTab] = { args: testPanelArgs, schema: testPanelSchema }
|
|
}
|
|
if (modules && modules[modulePath]) {
|
|
activeModuleTab = modulePath
|
|
editorCode = modules[modulePath].content
|
|
editor?.setCode(editorCode)
|
|
// Restore or initialize test state for the new module
|
|
if (moduleTestState[modulePath]) {
|
|
testPanelArgs = moduleTestState[modulePath].args
|
|
testPanelSchema = moduleTestState[modulePath].schema
|
|
} else {
|
|
testPanelArgs = {}
|
|
testPanelSchema = emptySchema()
|
|
inferModuleSchema()
|
|
}
|
|
}
|
|
}
|
|
|
|
function switchToMain() {
|
|
if (activeModuleTab !== null && modules) {
|
|
// Save current module content and test state
|
|
modules[activeModuleTab] = { ...modules[activeModuleTab], content: editorCode }
|
|
moduleTestState[activeModuleTab] = { args: testPanelArgs, schema: testPanelSchema }
|
|
}
|
|
activeModuleTab = null
|
|
editorCode = code
|
|
lastSyncedCode = code
|
|
editor?.setCode(editorCode)
|
|
}
|
|
|
|
let effectiveLang = $derived(
|
|
activeModuleTab && modules?.[activeModuleTab]
|
|
? (modules[activeModuleTab].language as Preview['language'])
|
|
: lang
|
|
)
|
|
|
|
let isWacV2 = $derived.by(() => {
|
|
const mainCode = code
|
|
const isTsWac =
|
|
mainCode.includes('windmill-client') &&
|
|
mainCode.includes('workflow') &&
|
|
mainCode.includes('task')
|
|
const isPyWac =
|
|
(mainCode.includes('import wmill') || mainCode.includes('from wmill')) &&
|
|
mainCode.includes('workflow') &&
|
|
mainCode.includes('task')
|
|
return isTsWac || isPyWac
|
|
})
|
|
let supportsModules = $derived((lang === 'bun' || lang === 'python3') && isWacV2)
|
|
let mainFileName = $derived('script.' + langToExt(scriptLangToEditorLang(lang)))
|
|
|
|
let modulePathInput = $state('')
|
|
let showAddModulePopover = $state(false)
|
|
let modulePathInputEl: HTMLInputElement | undefined = $state(undefined)
|
|
let modulePathError = $state('')
|
|
|
|
let renameModuleInput = $state('')
|
|
let renameModuleError = $state('')
|
|
let renameModuleInputEl: HTMLInputElement | undefined = $state(undefined)
|
|
|
|
const ALL_MODULE_EXTENSIONS: Record<string, ScriptModule['language']> = {
|
|
'.ts': 'bun',
|
|
'.py': 'python3',
|
|
'.go': 'go',
|
|
'.sh': 'bash',
|
|
'.ps1': 'powershell',
|
|
'.sql': 'postgresql',
|
|
'.gql': 'graphql',
|
|
'.php': 'php',
|
|
'.rs': 'rust',
|
|
'.yml': 'ansible',
|
|
'.cs': 'csharp',
|
|
'.nu': 'nu',
|
|
'.java': 'java',
|
|
'.rb': 'ruby'
|
|
}
|
|
|
|
/** Map main script language to allowed module file extensions. */
|
|
const LANG_MODULE_EXTENSIONS: Partial<Record<Preview['language'] & string, string[]>> = {
|
|
python3: ['.py'],
|
|
bun: ['.ts'],
|
|
deno: ['.ts'],
|
|
nativets: ['.ts'],
|
|
go: ['.go'],
|
|
bash: ['.sh'],
|
|
powershell: ['.ps1'],
|
|
postgresql: ['.sql'],
|
|
mysql: ['.sql'],
|
|
bigquery: ['.sql'],
|
|
snowflake: ['.sql'],
|
|
mssql: ['.sql'],
|
|
oracledb: ['.sql'],
|
|
duckdb: ['.sql'],
|
|
graphql: ['.gql'],
|
|
php: ['.php'],
|
|
rust: ['.rs'],
|
|
ansible: ['.yml'],
|
|
csharp: ['.cs'],
|
|
nu: ['.nu'],
|
|
java: ['.java'],
|
|
ruby: ['.rb'],
|
|
bunnative: ['.ts']
|
|
}
|
|
|
|
let allowedModuleExtensions = $derived(
|
|
lang
|
|
? (LANG_MODULE_EXTENSIONS[lang] ?? Object.keys(ALL_MODULE_EXTENSIONS))
|
|
: Object.keys(ALL_MODULE_EXTENSIONS)
|
|
)
|
|
|
|
function inferModuleLang(filePath: string): ScriptModule['language'] | undefined {
|
|
for (const [ext, moduleLang] of Object.entries(ALL_MODULE_EXTENSIONS)) {
|
|
if (filePath.endsWith(ext)) return moduleLang
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
function getModuleDefaultContent(filePath: string): string {
|
|
if (filePath.endsWith('.py')) {
|
|
return `def hello() -> str:\n return "world"\n`
|
|
} else if (filePath.endsWith('.ts')) {
|
|
return `export function hello(): string {\n return "world"\n}\n`
|
|
} else if (filePath.endsWith('.go')) {
|
|
return `package inner\n\nfunc Hello() string {\n\treturn "world"\n}\n`
|
|
} else if (filePath.endsWith('.sh')) {
|
|
return `#!/bin/bash\necho "world"\n`
|
|
} else if (filePath.endsWith('.ps1')) {
|
|
return `function Hello {\n return "world"\n}\n`
|
|
} else if (filePath.endsWith('.sql')) {
|
|
return `SELECT 'world' as result;\n`
|
|
} else if (filePath.endsWith('.gql')) {
|
|
return `query Hello {\n hello\n}\n`
|
|
} else if (filePath.endsWith('.php')) {
|
|
return `<?php\nfunction hello(): string {\n return "world";\n}\n`
|
|
} else if (filePath.endsWith('.rs')) {
|
|
return `pub fn hello() -> String {\n "world".to_string()\n}\n`
|
|
} else if (filePath.endsWith('.yml')) {
|
|
return `---\n- name: Hello\n debug:\n msg: "world"\n`
|
|
} else if (filePath.endsWith('.cs')) {
|
|
return `public static string Hello() {\n return "world";\n}\n`
|
|
} else if (filePath.endsWith('.nu')) {
|
|
return `def hello [] {\n "world"\n}\n`
|
|
} else if (filePath.endsWith('.java')) {
|
|
return `public class Helper {\n public static String hello() {\n return "world";\n }\n}\n`
|
|
} else if (filePath.endsWith('.rb')) {
|
|
return `def hello\n "world"\nend\n`
|
|
}
|
|
return ''
|
|
}
|
|
|
|
function validateModulePath(path: string): string {
|
|
if (!path.trim()) return ''
|
|
const moduleLang = inferModuleLang(path)
|
|
if (!moduleLang) {
|
|
const exts = allowedModuleExtensions.join(', ')
|
|
return `File must end with a supported extension: ${exts}`
|
|
}
|
|
const matchedExt = allowedModuleExtensions.find((ext) => path.endsWith(ext))
|
|
if (!matchedExt) {
|
|
const exts = allowedModuleExtensions.join(', ')
|
|
return `File must end with a supported extension for this language: ${exts}`
|
|
}
|
|
if (modules?.[path.trim()]) {
|
|
return `Module ${path.trim()} already exists`
|
|
}
|
|
return ''
|
|
}
|
|
|
|
function addModule() {
|
|
const modulePath = modulePathInput.trim()
|
|
if (!modulePath) return
|
|
const error = validateModulePath(modulePath)
|
|
if (error) {
|
|
modulePathError = error
|
|
return
|
|
}
|
|
if (!modules) {
|
|
modules = {}
|
|
}
|
|
modules[modulePath] = {
|
|
content: getModuleDefaultContent(modulePath),
|
|
language: inferModuleLang(modulePath)!
|
|
}
|
|
modulePathInput = ''
|
|
modulePathError = ''
|
|
showAddModulePopover = false
|
|
switchToModule(modulePath)
|
|
}
|
|
|
|
function removeModule(modulePath: string) {
|
|
if (!modules) return
|
|
if (activeModuleTab === modulePath) {
|
|
switchToMain()
|
|
}
|
|
delete modules[modulePath]
|
|
delete moduleTestState[modulePath]
|
|
modules = { ...modules }
|
|
}
|
|
|
|
function validateRenameModulePath(newPath: string, oldPath: string): string {
|
|
if (!newPath.trim()) return ''
|
|
const moduleLang = inferModuleLang(newPath)
|
|
if (!moduleLang) {
|
|
const exts = allowedModuleExtensions.join(', ')
|
|
return `File must end with a supported extension: ${exts}`
|
|
}
|
|
const matchedExt = allowedModuleExtensions.find((ext) => newPath.endsWith(ext))
|
|
if (!matchedExt) {
|
|
const exts = allowedModuleExtensions.join(', ')
|
|
return `File must end with a supported extension for this language: ${exts}`
|
|
}
|
|
if (newPath.trim() !== oldPath && modules?.[newPath.trim()]) {
|
|
return `Module ${newPath.trim()} already exists`
|
|
}
|
|
return ''
|
|
}
|
|
|
|
function renameModule(oldPath: string) {
|
|
const newPath = renameModuleInput.trim()
|
|
if (!newPath || newPath === oldPath) {
|
|
return
|
|
}
|
|
const error = validateRenameModulePath(newPath, oldPath)
|
|
if (error) {
|
|
renameModuleError = error
|
|
return
|
|
}
|
|
if (!modules) return
|
|
const mod = modules[oldPath]
|
|
const newLang = inferModuleLang(newPath)
|
|
delete modules[oldPath]
|
|
modules[newPath] = { ...mod, language: newLang ?? mod.language }
|
|
modules = { ...modules }
|
|
if (moduleTestState[oldPath]) {
|
|
moduleTestState[newPath] = moduleTestState[oldPath]
|
|
delete moduleTestState[oldPath]
|
|
}
|
|
if (activeModuleTab === oldPath) {
|
|
activeModuleTab = newPath
|
|
}
|
|
renameModuleInput = ''
|
|
renameModuleError = ''
|
|
}
|
|
|
|
/** Save the active module tab's editor content back into the modules map (no UI side-effects). */
|
|
function flushModuleContent() {
|
|
if (activeModuleTab !== null && modules) {
|
|
modules[activeModuleTab] = { ...modules[activeModuleTab], content: editorCode }
|
|
}
|
|
}
|
|
|
|
/** Flush module content and reset the editor back to the main script tab. */
|
|
export function flushModuleState() {
|
|
if (activeModuleTab !== null && modules) {
|
|
flushModuleContent()
|
|
moduleTestState[activeModuleTab] = { args: testPanelArgs, schema: testPanelSchema }
|
|
activeModuleTab = null
|
|
editorCode = code
|
|
}
|
|
}
|
|
|
|
$effect.pre(() => {
|
|
if (schema == undefined) {
|
|
schema = emptySchema()
|
|
}
|
|
})
|
|
let showHistoryDrawer = $state(false)
|
|
|
|
let jobProgressBar: JobProgressBar | undefined = $state(undefined)
|
|
let diffMode = $state(false)
|
|
|
|
let websocketAlive = $state({
|
|
pyright: false,
|
|
deno: false,
|
|
go: false,
|
|
ruff: false,
|
|
shellcheck: false
|
|
})
|
|
|
|
let inferAssetsRes = resource([() => lang, () => code, () => code], () => inferAssets(lang, code))
|
|
let preparedSqlQueries = usePreparedAssetSqlQueries(
|
|
() => inferAssetsRes.current?.sql_queries,
|
|
() => $workspaceStore
|
|
)
|
|
// Asset-parse validity for the editor badge. `undefined` while loading (so
|
|
// the badge doesn't flicker red); only an explicit parser error counts as
|
|
// invalid. Surfaced only when `requireValidAssets` (pipeline editor).
|
|
let validAssets = $derived(
|
|
requireValidAssets ? inferAssetsRes.current?.status !== 'error' : undefined
|
|
)
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
$effect(() => {
|
|
watchChanges &&
|
|
(code != undefined || schema != undefined) &&
|
|
dispatch('change', { code, schema })
|
|
})
|
|
|
|
watch(
|
|
() => inferAssetsRes.current,
|
|
() => {
|
|
if (!inferAssetsRes.current || inferAssetsRes.current?.status === 'error') {
|
|
// Clear stale lineage on parse error / unset, so a script switch
|
|
// whose new body fails to parse can't leave the previous script's
|
|
// inferred column lineage bound to the new path.
|
|
if (inferredColumnLineage !== undefined) inferredColumnLineage = undefined
|
|
return
|
|
}
|
|
let newAssets = inferAssetsRes.current.assets as AssetWithAltAccessType[]
|
|
for (const asset of newAssets) {
|
|
const old = assets?.find((a) => assetEq(a, asset))
|
|
if (old?.alt_access_type) asset.alt_access_type = old.alt_access_type
|
|
}
|
|
const normalizedAssets = newAssets.length > 0 ? newAssets : undefined
|
|
if (!deepEqual(assets, normalizedAssets)) assets = normalizedAssets
|
|
|
|
const newLineage = inferAssetsRes.current.column_lineage
|
|
const normalizedLineage = newLineage && newLineage.length > 0 ? newLineage : undefined
|
|
if (!deepEqual(inferredColumnLineage, normalizedLineage))
|
|
inferredColumnLineage = normalizedLineage
|
|
}
|
|
)
|
|
|
|
watch([() => code, () => lang], () => {
|
|
if (lang !== 'ansible') return
|
|
inferAnsibleExecutionMode(code).then((v) => {
|
|
if (
|
|
v !== undefined &&
|
|
(v.delegate_to_git_repo_details === null ||
|
|
v.delegate_to_git_repo_details.resource !== ansibleAlternativeExecutionMode?.resource ||
|
|
v.delegate_to_git_repo_details.playbook !== ansibleAlternativeExecutionMode?.playbook ||
|
|
v.delegate_to_git_repo_details.inventories_location !==
|
|
ansibleAlternativeExecutionMode?.inventories_location ||
|
|
v.delegate_to_git_repo_details.commit !== ansibleAlternativeExecutionMode?.commit ||
|
|
v.git_ssh_identity !== ansibleGitSshIdentity)
|
|
) {
|
|
ansibleAlternativeExecutionMode = v.delegate_to_git_repo_details
|
|
ansibleGitSshIdentity = v.git_ssh_identity
|
|
}
|
|
})
|
|
})
|
|
|
|
let width = $state(1200)
|
|
|
|
let jobLoader: JobLoader | undefined = $state(undefined)
|
|
|
|
let isValid: boolean = $state(true)
|
|
let scriptProgress = $state(undefined)
|
|
|
|
let logPanel: LogPanel | undefined = $state(undefined)
|
|
// Test
|
|
let testIsLoading = $state(false)
|
|
let testJob: Job | undefined = $state()
|
|
let pastPreviews: CompletedJob[] = $state([])
|
|
let historyTabActive = false
|
|
let pastPreviewsRequest: ReturnType<typeof JobService.listCompletedJobs> | undefined
|
|
let validCode = $state(true)
|
|
|
|
// Recording
|
|
let scriptRecording = createScriptRecording()
|
|
let lastRecording: ScriptRecording | undefined = $state(undefined)
|
|
|
|
let wsProvider: WebsocketProvider | undefined = $state(undefined)
|
|
let yContent: Y.Text | undefined = $state(undefined)
|
|
let peers: { name: string }[] = $state([])
|
|
let showCollabPopup = $state(false)
|
|
|
|
let ansibleAlternativeExecutionMode = $state<
|
|
| { resource?: string; commit?: string; inventories_location?: string; playbook?: string }
|
|
| null
|
|
| undefined
|
|
>()
|
|
let ansibleGitSshIdentity = $state<string[]>([])
|
|
|
|
// Debug mode state
|
|
let debugMode = $state(false)
|
|
let debugBreakpoints = new SvelteSet<number>()
|
|
let breakpointDecorations: string[] = $state([])
|
|
let currentLineDecoration: string[] = $state([])
|
|
let hoverBreakpointDecoration: string[] = $state([])
|
|
// Line currently showing the ghost breakpoint, used to short-circuit redundant
|
|
// deltaDecorations calls on every mousemove event.
|
|
let hoverBreakpointLine: number | null = null
|
|
// Get the DAP server URL based on language
|
|
const dapServerUrl = $derived(getDebugServerUrl((lang || 'python3') as DebugLanguage))
|
|
const debugFilePath = $derived(`/tmp/script${getDebugFileExtension(lang || '')}`)
|
|
let dapClient = $state<ReturnType<typeof getDAPClient> | null>(null)
|
|
const isDebuggableScript = $derived(isDebuggable(lang || ''))
|
|
// Derived: show debug panel when connected and (running or stopped, but not terminated)
|
|
const showDebugPanel = $derived(
|
|
debugMode && $debugState.connected && ($debugState.running || $debugState.stopped)
|
|
)
|
|
// Derived: debug has a result (script completed)
|
|
const hasDebugResult = $derived(debugMode && $debugState.result !== undefined)
|
|
// Show debug console at bottom of editor when debugging is active
|
|
let showDebugConsole = $state(true)
|
|
const debugConsoleVisible = $derived(showDebugPanel && showDebugConsole)
|
|
// Selected stack frame ID - shared between DebugPanel and DebugConsole
|
|
let selectedDebugFrameId: number | null = $state(null)
|
|
// Use selected frame or first frame for console context
|
|
const currentDebugFrameId = $derived(selectedDebugFrameId ?? $debugState.stackFrames[0]?.id)
|
|
// Job ID of the current debug session (for expression signing/audit logging)
|
|
let debugSessionJobId: string | null = $state(null)
|
|
// Pane sizes for editor/console split (percentage)
|
|
let editorPaneSize = $state(75)
|
|
let consolePaneSize = $state(25)
|
|
|
|
// Breakpoint decoration options
|
|
// stickiness: 1 = NeverGrowsWhenTypingAtEdges - decorations track their position when code changes
|
|
const breakpointDecorationType: meditor.IModelDecorationOptions = {
|
|
glyphMarginClassName: 'debug-breakpoint-glyph',
|
|
glyphMarginHoverMessage: { value: 'Breakpoint (click to remove)' },
|
|
stickiness: 1
|
|
}
|
|
|
|
// Ghost breakpoint shown while hovering the gutter on a line without a breakpoint
|
|
const hoverBreakpointDecorationType: meditor.IModelDecorationOptions = {
|
|
glyphMarginClassName: 'debug-breakpoint-glyph-hover',
|
|
glyphMarginHoverMessage: { value: 'Click to add a breakpoint' },
|
|
stickiness: 1
|
|
}
|
|
|
|
const currentLineDecorationType = {
|
|
isWholeLine: true,
|
|
className: 'debug-current-line',
|
|
glyphMarginClassName: 'debug-current-line-glyph'
|
|
}
|
|
|
|
const url = new URL(window.location.toString())
|
|
let initialCollab = /true|1/i.test(url.searchParams.get('collab') ?? '0')
|
|
|
|
if (initialCollab) {
|
|
setCollaborationMode()
|
|
url.searchParams.delete('collab')
|
|
url.searchParams.delete('path')
|
|
history.replaceState(null, '', url)
|
|
}
|
|
|
|
function onKeyDown(event: KeyboardEvent) {
|
|
if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
|
|
event.preventDefault()
|
|
runTest()
|
|
} else if ((event.ctrlKey || event.metaKey) && event.key == 'u') {
|
|
event.preventDefault()
|
|
toggleTestPanel()
|
|
}
|
|
}
|
|
|
|
export function setArgs(nargs: Record<string, any>) {
|
|
args = nargs
|
|
}
|
|
|
|
export async function runTest(opts?: { cascade?: boolean }) {
|
|
// When the caller forces a cascade choice (e.g. the canvas runnable
|
|
// menu's "Run + trigger N downstream"), also flip the persistent
|
|
// `cascadeDownstream` state so the split button's label/icon reflect
|
|
// the active mode after the run kicks off — keeps "what mode am I in"
|
|
// visible instead of having a one-off run silently disagree with the
|
|
// UI. The caller is welcome to bump the signal repeatedly; we just
|
|
// keep the latest choice as the active mode.
|
|
if (opts?.cascade !== undefined) cascadeDownstream = opts.cascade
|
|
// Discard any previous recording when running a normal test
|
|
if (!scriptRecording.active) {
|
|
lastRecording = undefined
|
|
}
|
|
// Not defined if JobProgressBar not loaded
|
|
jobProgressBar?.reset()
|
|
// Flush module edits back to modules map before running preview
|
|
flushModuleContent()
|
|
|
|
const testCode = activeModuleTab !== null ? editorCode : code
|
|
const testLang = activeModuleTab !== null ? effectiveLang : lang
|
|
const rawTestArgs =
|
|
activeModuleTab !== null
|
|
? testPanelArgs
|
|
: selectedTab === 'preprocessor' || kind === 'preprocessor'
|
|
? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...(args ?? {}) }
|
|
: (args ?? {})
|
|
const testSchema = activeModuleTab !== null ? testPanelSchema : schema
|
|
const testArgs = await processSecretArgs(rawTestArgs, testSchema)
|
|
if (showPsCommonParams) {
|
|
for (const [k, v] of Object.entries(psCommonParams)) {
|
|
if (v !== undefined && v !== false && v !== '') {
|
|
testArgs[k] = v
|
|
}
|
|
}
|
|
}
|
|
// In pipeline-editor contexts (downstreamSubscribers prop set), default
|
|
// the test run to *just this step* by passing the backend opt-out arg.
|
|
// The user can run with cascade via the split button's caret option,
|
|
// which flips `cascadeDownstream` and lets dispatch fire normally.
|
|
if ((customUi?.previewPanel?.downstreamSubscribers ?? 0) > 0 && !cascadeDownstream) {
|
|
testArgs['_wmill_skip_asset_dispatch'] = true
|
|
}
|
|
|
|
//@ts-ignore
|
|
let job = await jobLoader.runPreview(
|
|
path,
|
|
testCode,
|
|
testLang,
|
|
testArgs,
|
|
tag,
|
|
undefined,
|
|
undefined,
|
|
{
|
|
done(_x) {
|
|
if (scriptRecording.active) {
|
|
lastRecording = scriptRecording.stop()
|
|
setActiveRecording(undefined)
|
|
}
|
|
if (historyTabActive) {
|
|
loadPastTests()
|
|
}
|
|
},
|
|
doneError({ error }) {
|
|
if (scriptRecording.active) {
|
|
lastRecording = scriptRecording.stop()
|
|
setActiveRecording(undefined)
|
|
}
|
|
console.error(error)
|
|
}
|
|
},
|
|
undefined,
|
|
activeModuleTab !== null ? undefined : modules,
|
|
undefined,
|
|
timeout
|
|
)
|
|
if (job) {
|
|
onTestJob?.({ jobId: job })
|
|
}
|
|
logPanel?.setFocusToLogs()
|
|
return job
|
|
}
|
|
|
|
async function recordAndTest() {
|
|
lastRecording = undefined
|
|
scriptRecording.start(path ?? '', code, lang ?? '', args ?? {}, schema)
|
|
setActiveRecording(scriptRecording)
|
|
await runTest()
|
|
}
|
|
|
|
function downloadRecording() {
|
|
if (lastRecording) {
|
|
scriptRecording.download(lastRecording)
|
|
}
|
|
}
|
|
|
|
async function loadPastTests(): Promise<void> {
|
|
pastPreviewsRequest?.cancel()
|
|
const req = JobService.listCompletedJobs({
|
|
workspace: $workspaceStore!,
|
|
jobKinds: 'preview',
|
|
createdBy: $userStore?.username,
|
|
scriptPathExact: path,
|
|
hasNullParent: true
|
|
})
|
|
pastPreviewsRequest = req
|
|
try {
|
|
const result = await req
|
|
if (pastPreviewsRequest === req) {
|
|
pastPreviews = result
|
|
}
|
|
} catch (err) {
|
|
if (!(err instanceof Error) || err.name !== 'CancelError') {
|
|
throw err
|
|
}
|
|
} finally {
|
|
if (pastPreviewsRequest === req) {
|
|
pastPreviewsRequest = undefined
|
|
}
|
|
}
|
|
}
|
|
|
|
export async function inferSchema(
|
|
code: string,
|
|
{
|
|
nlang,
|
|
resetArgs = false,
|
|
applyInitialArgs = false
|
|
}: {
|
|
nlang?: SupportedLanguage
|
|
resetArgs?: boolean
|
|
applyInitialArgs?: boolean
|
|
} = {}
|
|
) {
|
|
let nschema = schema ?? emptySchema()
|
|
|
|
try {
|
|
const result = await inferArgs(
|
|
nlang ?? lang,
|
|
code,
|
|
nschema,
|
|
selectedTab === 'preprocessor' || kind === 'preprocessor' ? 'preprocessor' : undefined
|
|
)
|
|
|
|
if (kind === 'preprocessor') {
|
|
hasPreprocessor = false
|
|
selectedTab = 'main'
|
|
} else {
|
|
hasPreprocessor =
|
|
(selectedTab === 'preprocessor' ? !result?.auto_kind : result?.has_preprocessor) ?? false
|
|
|
|
if (!hasPreprocessor && selectedTab === 'preprocessor') {
|
|
selectedTab = 'main'
|
|
}
|
|
}
|
|
|
|
validCode = true
|
|
if (resetArgs) {
|
|
args = {}
|
|
}
|
|
if (applyInitialArgs) {
|
|
// we reapply initial args as the schema form might have cleared them between mount and the schema inference
|
|
args = initialArgs
|
|
}
|
|
injectPartitionArg(nschema, args, nlang ?? lang, code)
|
|
schema = nschema
|
|
} catch (e) {
|
|
validCode = false
|
|
}
|
|
}
|
|
|
|
// A `// partitioned` pipeline script is materialized one slice at a time and
|
|
// receives the slice as a runtime `partition` arg (the cascade injects it in
|
|
// production). It isn't a code parameter, so schema inference doesn't see it —
|
|
// surface it in the test form so a partitioned script can be run manually.
|
|
function injectPartitionArg(
|
|
s: any,
|
|
a: Record<string, any> | undefined,
|
|
l: string | undefined,
|
|
c: string
|
|
) {
|
|
try {
|
|
if (l !== 'duckdb' || !s?.properties) return
|
|
const part = parsePipelineAnnotations(c).partition
|
|
if (!part) return
|
|
// Date-based partition kinds render a date / datetime picker; a dynamic
|
|
// key is a free-form string.
|
|
const format =
|
|
part.kind === 'hourly'
|
|
? 'date-time'
|
|
: part.kind === 'daily' || part.kind === 'weekly' || part.kind === 'monthly'
|
|
? 'date'
|
|
: undefined
|
|
if (!s.properties['partition']) {
|
|
s.properties['partition'] = {
|
|
type: 'string',
|
|
...(format ? { format } : {}),
|
|
// ISO output so partition keys sort lexicographically (the date
|
|
// picker defaults to dd-MM-yyyy otherwise).
|
|
...(format === 'date' ? { dateFormat: 'yyyy-MM-dd' } : {}),
|
|
description:
|
|
part.kind === 'dynamic'
|
|
? 'Partition key value to materialize.'
|
|
: `Partition (${part.kind}) to materialize.`
|
|
}
|
|
if (Array.isArray(s.order) && !s.order.includes('partition')) {
|
|
s.order = ['partition', ...s.order]
|
|
}
|
|
}
|
|
// Pre-fill the *test* arg with the current slice for date kinds — a
|
|
// convenience default, kept on the args (not baked into the schema,
|
|
// where it would persist to the deployed script and go stale).
|
|
if (format && a && (a['partition'] == null || a['partition'] === '')) {
|
|
const now = new Date()
|
|
a['partition'] =
|
|
format === 'date' ? now.toISOString().slice(0, 10) : now.toISOString().slice(0, 16)
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
|
|
async function inferModuleSchema() {
|
|
if (activeModuleTab === null) return
|
|
try {
|
|
await inferArgs(effectiveLang, editorCode, testPanelSchema)
|
|
injectPartitionArg(testPanelSchema, testPanelArgs, effectiveLang, editorCode)
|
|
moduleTestState[activeModuleTab] = { args: testPanelArgs, schema: testPanelSchema }
|
|
} catch (e) {
|
|
// Module code may be in-progress; silently ignore
|
|
}
|
|
}
|
|
|
|
let gitRepoResourcePickerOpen = $state(false)
|
|
let commitHashForGitRepo = $derived(ansibleAlternativeExecutionMode?.commit)
|
|
|
|
// Check if delegate_to_git_repo exists in the code
|
|
let hasDelegateToGitRepo = $derived(code && code.includes('delegate_to_git_repo:'))
|
|
|
|
function handleDelegateConfigUpdate(event: {
|
|
detail: { resourcePath: string; playbook?: string; inventoriesLocation?: string }
|
|
}) {
|
|
if (!editor) return
|
|
|
|
const currentCode = editor.getCode()
|
|
const newCode = updateDelegateToGitRepoConfig(currentCode, {
|
|
resource: event.detail.resourcePath,
|
|
playbook: event.detail.playbook,
|
|
inventories_location: event.detail.inventoriesLocation
|
|
})
|
|
editor.setCode(newCode)
|
|
|
|
// Trigger schema inference to update assets
|
|
inferSchema(newCode)
|
|
}
|
|
|
|
function handleAddInventories(event: { detail: { inventoryPaths: string[] } }) {
|
|
if (!editor) return
|
|
|
|
const currentCode = editor.getCode()
|
|
const newCode = insertAdditionalInventories(currentCode, event.detail.inventoryPaths)
|
|
editor.setCode(newCode)
|
|
|
|
// Trigger schema inference to update assets
|
|
inferSchema(newCode)
|
|
}
|
|
|
|
// Debug functions
|
|
function toggleBreakpoint(line: number): void {
|
|
if (debugBreakpoints.has(line)) {
|
|
debugBreakpoints.delete(line)
|
|
} else {
|
|
debugBreakpoints.add(line)
|
|
}
|
|
updateBreakpointDecorations()
|
|
clearHoverBreakpointDecoration()
|
|
}
|
|
|
|
function updateHoverBreakpointDecoration(line: number): void {
|
|
if (hoverBreakpointLine === line) return
|
|
const monacoEditor = editor?.getEditor?.()
|
|
if (!monacoEditor) return
|
|
|
|
const decorations = [
|
|
{
|
|
range: { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 },
|
|
options: hoverBreakpointDecorationType
|
|
}
|
|
]
|
|
|
|
const oldDecorations = untrack(() => hoverBreakpointDecoration)
|
|
hoverBreakpointDecoration = monacoEditor.deltaDecorations(oldDecorations, decorations)
|
|
hoverBreakpointLine = line
|
|
}
|
|
|
|
function clearHoverBreakpointDecoration(): void {
|
|
if (hoverBreakpointLine === null) return
|
|
const monacoEditor = editor?.getEditor?.()
|
|
if (!monacoEditor) return
|
|
const oldDecorations = untrack(() => hoverBreakpointDecoration)
|
|
if (oldDecorations.length > 0) {
|
|
hoverBreakpointDecoration = monacoEditor.deltaDecorations(oldDecorations, [])
|
|
}
|
|
hoverBreakpointLine = null
|
|
}
|
|
|
|
function updateBreakpointDecorations(): void {
|
|
const monacoEditor = editor?.getEditor?.()
|
|
if (!monacoEditor) return
|
|
|
|
const decorations = Array.from(debugBreakpoints).map((line) => ({
|
|
range: { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 },
|
|
options: breakpointDecorationType
|
|
}))
|
|
|
|
// Use untrack to prevent reactive loop when reading the old decorations
|
|
const oldDecorations = untrack(() => breakpointDecorations)
|
|
breakpointDecorations = monacoEditor.deltaDecorations(oldDecorations, decorations)
|
|
}
|
|
|
|
// Refresh breakpoint line numbers from decoration positions after code edits
|
|
function refreshBreakpointPositions(): void {
|
|
const monacoEditor = editor?.getEditor?.()
|
|
if (!monacoEditor || breakpointDecorations.length === 0) return
|
|
|
|
const model = monacoEditor.getModel()
|
|
if (!model) return
|
|
|
|
// Get current line numbers from decorations (Monaco tracks positions when code changes)
|
|
const newLines = new Set<number>()
|
|
for (const decorationId of breakpointDecorations) {
|
|
const range = model.getDecorationRange(decorationId)
|
|
if (range) {
|
|
newLines.add(range.startLineNumber)
|
|
}
|
|
}
|
|
|
|
// Check if positions changed
|
|
const oldLines = Array.from(debugBreakpoints).sort((a, b) => a - b)
|
|
const updatedLines = Array.from(newLines).sort((a, b) => a - b)
|
|
|
|
const positionsChanged =
|
|
oldLines.length !== updatedLines.length ||
|
|
oldLines.some((line, i) => line !== updatedLines[i])
|
|
|
|
if (positionsChanged) {
|
|
// Update breakpoints set with new positions
|
|
debugBreakpoints.clear()
|
|
for (const line of newLines) {
|
|
debugBreakpoints.add(line)
|
|
}
|
|
// Sync updated positions with server if connected
|
|
syncBreakpointsWithServer()
|
|
}
|
|
}
|
|
|
|
// Sync breakpoints with DAP server when connected
|
|
async function syncBreakpointsWithServer(): Promise<void> {
|
|
if (!dapClient || !dapClient.isConnected()) return
|
|
|
|
try {
|
|
await dapClient.setBreakpoints(debugFilePath, Array.from(debugBreakpoints))
|
|
} catch (error) {
|
|
console.error('Failed to sync breakpoints:', error)
|
|
}
|
|
}
|
|
|
|
function updateCurrentLineDecoration(line: number | undefined): void {
|
|
const monacoEditor = editor?.getEditor?.()
|
|
if (!monacoEditor) return
|
|
|
|
// Use untrack to prevent reactive loop when reading the old decorations
|
|
const oldDecorations = untrack(() => currentLineDecoration)
|
|
|
|
if (!line) {
|
|
currentLineDecoration = monacoEditor.deltaDecorations(oldDecorations, [])
|
|
return
|
|
}
|
|
|
|
const decorations = [
|
|
{
|
|
range: { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 },
|
|
options: currentLineDecorationType
|
|
}
|
|
]
|
|
|
|
currentLineDecoration = monacoEditor.deltaDecorations(oldDecorations, decorations)
|
|
monacoEditor.revealLineInCenter(line)
|
|
}
|
|
|
|
async function startDebugging(): Promise<void> {
|
|
try {
|
|
// Show console when starting a debug session
|
|
showDebugConsole = true
|
|
// Reset selected frame when starting new session
|
|
selectedDebugFrameId = null
|
|
|
|
// Always reset and create a fresh DAP client with the correct URL for the current language
|
|
// This ensures we connect to the correct endpoint even if language changed
|
|
resetDAPClient()
|
|
dapClient = getDAPClient(dapServerUrl)
|
|
|
|
// Fetch contextual variables (WM_WORKSPACE, WM_TOKEN, etc.) from backend
|
|
const env = await fetchContextualVariables($workspaceStore ?? '')
|
|
|
|
// Sign the debug request (creates audit log entry)
|
|
let signedPayload
|
|
try {
|
|
signedPayload = await signDebugRequest($workspaceStore ?? '', code ?? '', lang ?? 'python3')
|
|
debugSessionJobId = signedPayload.job_id
|
|
} catch (signError) {
|
|
sendUserToast(getDebugErrorMessage(signError), true)
|
|
return
|
|
}
|
|
|
|
await dapClient.connect()
|
|
await dapClient.initialize()
|
|
await dapClient.setBreakpoints(debugFilePath, Array.from(debugBreakpoints))
|
|
await dapClient.configurationDone()
|
|
// Pass the signed token along with other launch parameters
|
|
await dapClient.launch({
|
|
code,
|
|
cwd: '/tmp',
|
|
args: args ?? {},
|
|
callMain: true,
|
|
env,
|
|
// JWT token for verification by the debugger
|
|
token: signedPayload.token
|
|
})
|
|
} catch (error) {
|
|
console.error('Failed to start debugging:', error)
|
|
sendUserToast(getDebugErrorMessage(error), true)
|
|
}
|
|
}
|
|
|
|
async function stopDebugging(): Promise<void> {
|
|
if (!dapClient) return
|
|
try {
|
|
await dapClient.terminate()
|
|
dapClient.disconnect()
|
|
} catch (error) {
|
|
console.error('Failed to stop debugging:', error)
|
|
} finally {
|
|
// Clear the job ID when debug session ends
|
|
debugSessionJobId = null
|
|
}
|
|
}
|
|
|
|
async function continueExecution(): Promise<void> {
|
|
if (!dapClient) return
|
|
await dapClient.continue_()
|
|
}
|
|
|
|
async function stepOver(): Promise<void> {
|
|
if (!dapClient) return
|
|
await dapClient.stepOver()
|
|
}
|
|
|
|
async function stepIn(): Promise<void> {
|
|
if (!dapClient) return
|
|
await dapClient.stepIn()
|
|
}
|
|
|
|
async function stepOut(): Promise<void> {
|
|
if (!dapClient) return
|
|
await dapClient.stepOut()
|
|
}
|
|
|
|
function clearAllBreakpoints(): void {
|
|
debugBreakpoints.clear()
|
|
updateBreakpointDecorations()
|
|
}
|
|
|
|
function toggleDebugMode(): void {
|
|
if (debugMode) {
|
|
// Exiting debug mode - clean up
|
|
debugMode = false
|
|
stopDebugging()
|
|
clearAllBreakpoints()
|
|
updateCurrentLineDecoration(undefined)
|
|
} else {
|
|
debugMode = true
|
|
}
|
|
}
|
|
|
|
// Subscribe to debug state changes for current line highlighting
|
|
$effect(() => {
|
|
const currentLine = $debugState.currentLine
|
|
if (debugMode) {
|
|
untrack(() => updateCurrentLineDecoration(currentLine))
|
|
}
|
|
})
|
|
|
|
// Watch for language changes - exit debug mode and reset client when language changes
|
|
let lastDebugLang: typeof lang | undefined = undefined
|
|
$effect(() => {
|
|
const currentLang = lang
|
|
if (lastDebugLang !== undefined && lastDebugLang !== currentLang && debugMode) {
|
|
// Language changed while in debug mode - exit debug mode
|
|
untrack(() => {
|
|
// Stop any running debug session
|
|
if (dapClient) {
|
|
dapClient
|
|
.terminate()
|
|
.catch(() => {})
|
|
.finally(() => {
|
|
dapClient?.disconnect()
|
|
})
|
|
}
|
|
// Reset the singleton
|
|
resetDAPClient()
|
|
dapClient = null
|
|
// Exit debug mode
|
|
debugMode = false
|
|
// Clear decorations
|
|
clearAllBreakpoints()
|
|
updateCurrentLineDecoration(undefined)
|
|
})
|
|
}
|
|
lastDebugLang = currentLang
|
|
})
|
|
|
|
// Set up glyph margin click handler for breakpoints when debug mode is enabled
|
|
$effect(() => {
|
|
const monacoEditor = editor?.getEditor?.()
|
|
if (!monacoEditor) return
|
|
|
|
if (debugMode && isDebuggableScript) {
|
|
// Enable glyph margin for breakpoints
|
|
monacoEditor.updateOptions({ glyphMargin: true })
|
|
|
|
// Add click handler for glyph margin (breakpoint toggle)
|
|
const mouseDownDisposable = monacoEditor.onMouseDown((e) => {
|
|
if (e.target.type === meditor.MouseTargetType.GUTTER_GLYPH_MARGIN) {
|
|
const line = e.target.position?.lineNumber
|
|
if (line) {
|
|
toggleBreakpoint(line)
|
|
}
|
|
}
|
|
})
|
|
|
|
// Show a ghost breakpoint while hovering anywhere in the gutter on an empty line.
|
|
// Hover area is intentionally wider than the click target — clicks still only
|
|
// toggle when landing on the glyph margin itself, but the ghost helps users find it.
|
|
const mouseMoveDisposable = monacoEditor.onMouseMove((e) => {
|
|
const t = e.target.type
|
|
const isGutter =
|
|
t === meditor.MouseTargetType.GUTTER_GLYPH_MARGIN ||
|
|
t === meditor.MouseTargetType.GUTTER_LINE_NUMBERS ||
|
|
t === meditor.MouseTargetType.GUTTER_LINE_DECORATIONS
|
|
const line = e.target.position?.lineNumber
|
|
if (isGutter && line && !debugBreakpoints.has(line)) {
|
|
updateHoverBreakpointDecoration(line)
|
|
} else {
|
|
clearHoverBreakpointDecoration()
|
|
}
|
|
})
|
|
|
|
const mouseLeaveDisposable = monacoEditor.onMouseLeave(() => {
|
|
clearHoverBreakpointDecoration()
|
|
})
|
|
|
|
// Add F9 keyboard shortcut for toggling breakpoint at cursor
|
|
monacoEditor.addCommand(120, () => {
|
|
// KeyCode.F9 = 120
|
|
const position = monacoEditor.getPosition()
|
|
if (position) {
|
|
toggleBreakpoint(position.lineNumber)
|
|
}
|
|
})
|
|
|
|
// Debug stepping keyboard shortcuts (only active when stopped)
|
|
// F8 = Continue (KeyCode.F8 = 119)
|
|
monacoEditor.addCommand(119, () => {
|
|
if ($debugState.stopped) continueExecution()
|
|
})
|
|
|
|
// F6 = Step Over (KeyCode.F6 = 117)
|
|
monacoEditor.addCommand(117, () => {
|
|
if ($debugState.stopped) stepOver()
|
|
})
|
|
|
|
// F7 = Step Into (KeyCode.F7 = 118)
|
|
monacoEditor.addCommand(118, () => {
|
|
if ($debugState.stopped) stepIn()
|
|
})
|
|
|
|
// Shift+F8 = Step Out (KeyMod.Shift | KeyCode.F8 = 1024 | 119 = 1143)
|
|
monacoEditor.addCommand(1143, () => {
|
|
if ($debugState.stopped) stepOut()
|
|
})
|
|
|
|
return () => {
|
|
mouseDownDisposable.dispose()
|
|
mouseMoveDisposable.dispose()
|
|
mouseLeaveDisposable.dispose()
|
|
clearHoverBreakpointDecoration()
|
|
// Disable glyph margin when exiting debug mode
|
|
monacoEditor.updateOptions({ glyphMargin: false })
|
|
}
|
|
} else {
|
|
// Ensure glyph margin is disabled when not in debug mode
|
|
monacoEditor.updateOptions({ glyphMargin: false })
|
|
}
|
|
})
|
|
|
|
onMount(async () => {
|
|
await inferSchema(code, { applyInitialArgs: true })
|
|
// Retry once if the initial inference failed silently (e.g. transient WASM
|
|
// init race). Without this, users had to modify the code to trigger a
|
|
// second on:change-driven inference.
|
|
if (!validCode && code && lang) {
|
|
await inferSchema(code, { applyInitialArgs: true })
|
|
}
|
|
aiChatManager.saveAndClear()
|
|
aiChatManager.changeMode(AIMode.SCRIPT)
|
|
if (customUi?.previewPanel?.loadLastRunOnMount) {
|
|
void loadLastRunIntoTestPanel()
|
|
}
|
|
})
|
|
|
|
// Pull the most recent top-level completed job for this script path and
|
|
// feed it through the JobLoader so the preview pane renders its logs +
|
|
// result. Best-effort: any error (no job yet, network blip) leaves the
|
|
// panel empty rather than surfacing a toast — this is a passive "show
|
|
// what's there" affordance, not a user action. Skipped when a test is
|
|
// already running so a live job's stream is never clobbered.
|
|
async function loadLastRunIntoTestPanel(): Promise<void> {
|
|
if (!path || !$workspaceStore) return
|
|
if (testIsLoading || testJob !== undefined) return
|
|
try {
|
|
const jobs = await JobService.listCompletedJobs({
|
|
workspace: $workspaceStore,
|
|
scriptPathExact: path,
|
|
hasNullParent: true,
|
|
perPage: 1,
|
|
orderDesc: true
|
|
})
|
|
const lastId = jobs[0]?.id
|
|
if (lastId && !testIsLoading && testJob === undefined) {
|
|
await jobLoader?.watchJob(lastId)
|
|
}
|
|
} catch (e) {
|
|
// Silent: empty preview pane is the natural fallback.
|
|
}
|
|
}
|
|
|
|
setLicense()
|
|
export async function setCollaborationMode() {
|
|
await setLicense()
|
|
if (!$enterpriseLicense) {
|
|
sendUserToast(`Multiplayer is an enterprise feature`, true, [
|
|
{
|
|
label: 'Upgrade',
|
|
callback: () => {
|
|
window.open('https://www.windmill.dev/pricing', '_blank')
|
|
}
|
|
}
|
|
])
|
|
return
|
|
}
|
|
|
|
let token: string | undefined
|
|
try {
|
|
token = await signMultiplayerRequest($workspaceStore ?? '')
|
|
} catch (e) {
|
|
console.error('Failed to sign multiplayer request:', e)
|
|
sendUserToast('Failed to authorize multiplayer session', true)
|
|
return
|
|
}
|
|
|
|
const ydoc = new Y.Doc()
|
|
if (wsProvider) {
|
|
wsProvider.destroy()
|
|
}
|
|
let yContentInit = ydoc.getText('content')
|
|
|
|
wsProvider = new WebsocketProvider(
|
|
buildWsUrl('/ws_mp/'),
|
|
$workspaceStore + '/' + (path ?? 'no-room-name'),
|
|
ydoc,
|
|
{ connect: false, params: { token } }
|
|
)
|
|
|
|
wsProvider.on('sync', (isSynced: boolean) => {
|
|
if (isSynced && yContentInit?.toJSON() == '') {
|
|
showCollabPopup = true
|
|
yContentInit?.insert(0, code)
|
|
}
|
|
yContent = yContentInit
|
|
})
|
|
|
|
wsProvider.on('connection-error', (WSErrorEvent) => {
|
|
console.error(WSErrorEvent)
|
|
sendUserToast('Multiplayer server connection had an error', true)
|
|
})
|
|
wsProvider.connect()
|
|
const awareness = wsProvider.awareness
|
|
|
|
awareness.setLocalStateField('user', {
|
|
name: $userStore?.username
|
|
})
|
|
|
|
function setPeers() {
|
|
peers = Array.from(awareness.getStates().values()).map((x) => x?.['user'])
|
|
}
|
|
|
|
setPeers()
|
|
// You can observe when a user updates their awareness information
|
|
awareness.on('change', (changes) => {
|
|
setPeers()
|
|
})
|
|
}
|
|
|
|
export function disableCollaboration() {
|
|
if (!wsProvider?.shouldConnect) return
|
|
peers = []
|
|
wsProvider?.disconnect()
|
|
wsProvider.destroy()
|
|
wsProvider = undefined
|
|
}
|
|
|
|
onDestroy(() => {
|
|
pastPreviewsRequest?.cancel()
|
|
pastPreviewsRequest = undefined
|
|
disableCollaboration()
|
|
aiChatManager.scriptEditorApplyCode = undefined
|
|
aiChatManager.scriptEditorShowDiffMode = undefined
|
|
aiChatManager.scriptEditorGetLintErrors = undefined
|
|
aiChatManager.scriptEditorOptions = undefined
|
|
aiChatManager.saveAndClear()
|
|
aiChatManager.changeMode(AIMode.NAVIGATOR)
|
|
// Clean up debug mode
|
|
if (debugMode) {
|
|
stopDebugging()
|
|
resetDAPClient()
|
|
}
|
|
})
|
|
|
|
function asKind(str: string | undefined) {
|
|
return str as 'script' | 'approval' | 'trigger' | undefined
|
|
}
|
|
|
|
function collabUrl() {
|
|
let url = new URL(window.location.toString().split('#')[0])
|
|
url.search = ''
|
|
return (
|
|
`${url}?collab=1&workspace=${encodeURIComponent($workspaceStore ?? '')}&lang=${encodeURIComponent(lang ?? '')}` +
|
|
(edit ? '' : `&path=${path}`)
|
|
)
|
|
}
|
|
|
|
const WAC_CONTEXT_LANGUAGES = ['python3', 'bun']
|
|
let isWac = $derived(
|
|
template === 'wac_python' ||
|
|
template === 'wac_typescript' ||
|
|
autoKind === 'wac' ||
|
|
(code && lang ? isWorkflowAsCode(code, lang) : false)
|
|
)
|
|
let workflowAsCodeAiContext = $derived(
|
|
activeModuleTab === null && isWac && WAC_CONTEXT_LANGUAGES.includes(lang ?? '')
|
|
)
|
|
let showTabs = $derived(hasPreprocessor || isWac)
|
|
$effect(() => {
|
|
!hasPreprocessor && (selectedTab = 'main')
|
|
})
|
|
$effect(() => {
|
|
// Only depend on selectedTab (preprocessor ↔ main toggle).
|
|
// Code changes are handled by the editor on:change handler and
|
|
// explicit inferSchema calls (initContent, onMount), so we read
|
|
// `code` inside untrack to avoid a redundant double-inference race.
|
|
selectedTab && untrack(() => code && inferSchema(code))
|
|
})
|
|
|
|
let argsRender = $state(0)
|
|
export async function updateArgs(newArgs: Record<string, any>) {
|
|
if (Object.keys(newArgs).length > 0) {
|
|
args = { ...newArgs }
|
|
argsRender++
|
|
}
|
|
}
|
|
|
|
setContext('disableTooltips', untrack(() => customUi)?.disableTooltips === true)
|
|
|
|
// Pixel minimum size for the test pane while open. The pane's `minSize`
|
|
// is a percentage of the *split axis* (width for `right` layout, height
|
|
// for `bottom`), so we derive it from whichever container dimension the
|
|
// splitter actually distributes. Without this layout switch, the bottom
|
|
// layout would translate a 400px width-fraction into a height-fraction,
|
|
// which on wide screens is far too tall and on tall narrow screens far
|
|
// too short.
|
|
let splitContainerWidth = $state(0)
|
|
let splitContainerHeight = $state(0)
|
|
const testPaneMinPx = $derived(previewLayout === 'bottom' ? 220 : 400)
|
|
const splitAxisExtent = $derived(
|
|
previewLayout === 'bottom' ? splitContainerHeight : splitContainerWidth
|
|
)
|
|
const testPaneMinPercent = $derived(paneMinPercent(splitAxisExtent, testPaneMinPx))
|
|
|
|
// Raw user-controlled test size (what the splitter wrote, or what the
|
|
// toggle set). The size we actually pass to <Pane> is clamped to the
|
|
// dynamic minimum below — so when the editor shrinks, the displayed test
|
|
// pane grows to honor the new minimum without needing an effect. The code
|
|
// pane's size is purely derived from it (100 - test).
|
|
// `initialTestPanelCollapsed` seeds the raw value at 0 (collapsed) while
|
|
// keeping the "remembered" size at 30, so the user's first toggle expands
|
|
// the pane to a sensible width rather than 0.
|
|
let rawTestPanelSize = $state(untrack(() => (initialTestPanelCollapsed ? 0 : 30)))
|
|
let storedTestPanelSize = 30
|
|
const testPanelSize = $derived(
|
|
rawTestPanelSize === 0 ? 0 : Math.max(rawTestPanelSize, testPaneMinPercent)
|
|
)
|
|
const codePanelSize = $derived(100 - testPanelSize)
|
|
|
|
function toggleTestPanel() {
|
|
if (testPanelSize > 0) {
|
|
// Store the raw (unclamped) preference so reopening on a wider screen
|
|
// restores the user's intent, not the pixel-min that inflated the pane.
|
|
storedTestPanelSize = rawTestPanelSize
|
|
rawTestPanelSize = 0
|
|
} else {
|
|
rawTestPanelSize = Math.max(storedTestPanelSize, testPaneMinPercent)
|
|
}
|
|
}
|
|
|
|
// When the compact preview shows a SchemaForm above the logs
|
|
// (`argsAboveLogs`), give the preview pane extra height so the args
|
|
// form doesn't shrink the logs/result area. This is a deliberate
|
|
// $effect (not $derived): the schema loads async and the same
|
|
// code/test sizes are two-way bound to the splitpane drag handle, so
|
|
// the offset is folded into the user-resizable state once on the
|
|
// has-args transition — manual resizing still works afterwards.
|
|
let hasArgsAboveLogs = $derived(
|
|
customUi?.previewPanel?.argsAboveLogs === true &&
|
|
!!schema?.properties &&
|
|
Object.keys(schema.properties).length > 0
|
|
)
|
|
let argsHeightBonus = $state(0)
|
|
$effect(() => {
|
|
const want = hasArgsAboveLogs ? 18 : 0
|
|
untrack(() => {
|
|
const delta = want - argsHeightBonus
|
|
if (delta === 0) return
|
|
if (testPanelSize > 0) {
|
|
rawTestPanelSize += delta
|
|
} else {
|
|
// preview collapsed — bake the bonus into the size it
|
|
// restores to so it lands correctly on expand.
|
|
storedTestPanelSize += delta
|
|
}
|
|
argsHeightBonus = want
|
|
})
|
|
})
|
|
|
|
function getError(job: Job | undefined) {
|
|
if (job != undefined && job.type === 'CompletedJob' && !job.success) {
|
|
return getStringError(job.result)
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
function showDiffMode() {
|
|
const model = editor?.getModel()
|
|
if (model == undefined) return
|
|
diffMode = true
|
|
diffEditor?.showWithModelAndOriginal(lastDeployedCode ?? '', model)
|
|
editor?.hide()
|
|
}
|
|
|
|
function hideDiffMode() {
|
|
diffMode = false
|
|
diffEditor?.hide()
|
|
editor?.show()
|
|
}
|
|
|
|
let error = $derived(getError(testJob))
|
|
|
|
$effect(() => {
|
|
;[
|
|
editor,
|
|
lastSavedCode,
|
|
lastDeployedCode,
|
|
diffMode,
|
|
workflowAsCodeAiContext,
|
|
args,
|
|
error,
|
|
lang,
|
|
path
|
|
]
|
|
untrack(() => {
|
|
const options: ScriptOptions = {
|
|
getCode: () => code,
|
|
lang: lang as ScriptLang,
|
|
error,
|
|
args: args ?? {},
|
|
path,
|
|
lastSavedCode,
|
|
lastDeployedCode,
|
|
diffMode,
|
|
workflowAsCode: workflowAsCodeAiContext
|
|
}
|
|
aiChatManager.scriptEditorOptions = options
|
|
aiChatManager.scriptEditorApplyCode = async (code: string, opts?: ReviewChangesOpts) => {
|
|
hideDiffMode()
|
|
await editor?.reviewAndApplyCode(code, opts)
|
|
}
|
|
aiChatManager.scriptEditorShowDiffMode = showDiffMode
|
|
aiChatManager.scriptEditorGetLintErrors = () => {
|
|
return (
|
|
editor?.getLintErrors() ?? { errorCount: 0, warningCount: 0, errors: [], warnings: [] }
|
|
)
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<JobLoader
|
|
noCode={true}
|
|
bind:scriptProgress
|
|
bind:this={jobLoader}
|
|
bind:isLoading={testIsLoading}
|
|
bind:job={testJob}
|
|
/>
|
|
|
|
<svelte:window onkeydown={onKeyDown} />
|
|
|
|
<!-- Standalone triggerable registration for the script editor -->
|
|
<div
|
|
style="display: none"
|
|
use:triggerableByAI={{
|
|
id: 'script-editor',
|
|
description: 'Component to edit a script'
|
|
}}
|
|
></div>
|
|
|
|
<Modal title="Invite others" bind:open={showCollabPopup}>
|
|
<div>Have others join by sharing the following url:</div>
|
|
<div class="flex gap-2 pr-4">
|
|
<input type="text" disabled value={collabUrl()} />
|
|
|
|
<Button
|
|
color="light"
|
|
startIcon={{ icon: Copy }}
|
|
iconOnly
|
|
on:click={() => copyToClipboard(collabUrl())}
|
|
/>
|
|
</div>
|
|
</Modal>
|
|
|
|
<div class="border-b shadow-sm px-1 pr-4" bind:clientWidth={width}>
|
|
<div class="flex justify-between space-x-2">
|
|
{#if args}
|
|
<EditorBar
|
|
scriptPath={edit ? path : undefined}
|
|
on:toggleCollabMode={() => {
|
|
if (wsProvider?.shouldConnect) {
|
|
disableCollaboration()
|
|
} else {
|
|
setCollaborationMode()
|
|
}
|
|
}}
|
|
on:showDiffMode={showDiffMode}
|
|
on:hideDiffMode={hideDiffMode}
|
|
customUi={customUi?.editorBar}
|
|
collabLive={wsProvider?.shouldConnect}
|
|
{collabMode}
|
|
{validCode}
|
|
{validAssets}
|
|
iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
|
|
compactHelpers={width < EDITOR_BAR_HELPERS_COMPACT_THRESHOLD}
|
|
on:collabPopup={() => (showCollabPopup = true)}
|
|
{editor}
|
|
{lang}
|
|
on:createScriptFromInlineScript
|
|
{websocketAlive}
|
|
collabUsers={peers}
|
|
kind={asKind(kind)}
|
|
{template}
|
|
{args}
|
|
{noHistory}
|
|
{saveToWorkspace}
|
|
lastDeployedCode={lastDeployedCode && lastDeployedCode !== code
|
|
? lastDeployedCode
|
|
: undefined}
|
|
{diffMode}
|
|
bind:showHistoryDrawer
|
|
>
|
|
{#snippet right()}
|
|
{@render editorBarRight?.()}
|
|
{/snippet}
|
|
</EditorBar>
|
|
{/if}
|
|
{#if !noSyncFromGithub && customUi?.editorBar?.useVsCode != false && !inSessionPane}
|
|
<div class="py-1">
|
|
<Button
|
|
target="_blank"
|
|
href="https://www.windmill.dev/docs/cli_local_dev/vscode-extension"
|
|
variant="subtle"
|
|
unifiedSize="md"
|
|
iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
|
|
title="Use VS Code"
|
|
startIcon={{
|
|
icon: Github
|
|
}}
|
|
>
|
|
VScode
|
|
</Button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<SplitPanesWrapper>
|
|
<div
|
|
bind:clientWidth={splitContainerWidth}
|
|
bind:clientHeight={splitContainerHeight}
|
|
class="h-full"
|
|
>
|
|
<Splitpanes class="!overflow-visible" horizontal={previewLayout === 'bottom'}>
|
|
<Pane size={codePanelSize} minSize={0} class="!overflow-visible">
|
|
{#if lang === 'ansible' && ansibleAlternativeExecutionMode != null}
|
|
<!-- Vertical split for ansible with assets -->
|
|
<Splitpanes horizontal class="!overflow-visible h-full">
|
|
<Pane size={60} minSize={30} class="!overflow-visible">
|
|
{@render editorContent()}
|
|
</Pane>
|
|
<Pane size={40} minSize={20} class="!overflow-visible">
|
|
<div
|
|
class="h-full flex flex-col bg-surface border-l border-gray-200 dark:border-gray-700"
|
|
>
|
|
<div class="p-3 border-b border-gray-200 dark:border-gray-700">
|
|
<h4 class="text-sm font-semibold text-primary">File Browser</h4>
|
|
</div>
|
|
<GitRepoViewer
|
|
gitRepoResourcePath={ansibleAlternativeExecutionMode?.resource || ''}
|
|
gitSshIdentity={ansibleGitSshIdentity}
|
|
bind:commitHashInput={commitHashForGitRepo}
|
|
/>
|
|
</div>
|
|
</Pane>
|
|
</Splitpanes>
|
|
{:else}
|
|
<!-- Original single editor layout -->
|
|
{@render editorContent()}
|
|
{/if}
|
|
</Pane>
|
|
<Pane
|
|
bind:size={() => testPanelSize, (v) => (rawTestPanelSize = v)}
|
|
minSize={testPaneMinPercent}
|
|
class={customUi?.previewPanel?.hideArgs ? '!overflow-visible' : ''}
|
|
>
|
|
<div
|
|
data-test-panel
|
|
class={customUi?.previewPanel?.hideArgs
|
|
? 'flex flex-col h-full !overflow-visible'
|
|
: 'flex flex-col h-full'}
|
|
>
|
|
{#if showTabs}
|
|
<div transition:slide={{ duration: 200 }}>
|
|
<Tabs bind:selected={selectedTab}>
|
|
<Tab value="main" label="Main" />
|
|
{#if hasPreprocessor}
|
|
<div transition:slide={{ duration: 200, axis: 'x' }}>
|
|
<Tab value="preprocessor" label="Preprocessor" />
|
|
</div>
|
|
{/if}
|
|
{#if isWac}
|
|
<div transition:slide={{ duration: 200, axis: 'x' }}>
|
|
<Tab value="diagram" label="Diagram" />
|
|
</div>
|
|
{/if}
|
|
</Tabs>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if debugMode && isDebuggableScript}
|
|
<div transition:slide={{ duration: 200 }}>
|
|
<DebugToolbar
|
|
connected={$debugState.connected}
|
|
running={$debugState.running}
|
|
stopped={$debugState.stopped}
|
|
breakpointCount={debugBreakpoints.size}
|
|
onStart={startDebugging}
|
|
onStop={stopDebugging}
|
|
onContinue={continueExecution}
|
|
onStepOver={stepOver}
|
|
onStepIn={stepIn}
|
|
onStepOut={stepOut}
|
|
onClearBreakpoints={clearAllBreakpoints}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if selectedTab === 'diagram'}
|
|
<div class="flex-1 min-h-0">
|
|
<WacDiagram {code} language={lang ?? ''} />
|
|
</div>
|
|
{:else}
|
|
{#if previewLayout !== 'bottom'}
|
|
<div class="flex justify-center pt-1 relative">
|
|
<div class="absolute top-2 left-2">
|
|
<HideButton
|
|
hidden={false}
|
|
direction="right"
|
|
panelName="Test"
|
|
shortcut="U"
|
|
size="md"
|
|
on:click={() => {
|
|
toggleTestPanel()
|
|
}}
|
|
/>
|
|
</div>
|
|
{#if !(debugMode && isDebuggableScript)}
|
|
<div class="flex flex-row gap-2">
|
|
<div
|
|
class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch"
|
|
>
|
|
{#if testIsLoading}
|
|
{@render cancelTestButton('md', 'w-full')}
|
|
{:else}
|
|
{@const disableTriggerButton =
|
|
customUi?.previewPanel?.disableTriggerButton === true}
|
|
{@render runTestButton(
|
|
'md',
|
|
`w-full ${!disableTriggerButton ? 'rounded-r-none' : ''}`
|
|
)}
|
|
{#if !disableTriggerButton}
|
|
<CaptureButton on:openTriggers />
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
{#if lastRecording}
|
|
<Button
|
|
on:click={downloadRecording}
|
|
unifiedSize="md"
|
|
startIcon={{ icon: Download }}
|
|
iconOnly
|
|
title="Download recording"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
<div class="absolute top-2 right-2 flex items-center gap-2">
|
|
{#if customUi?.previewPanel?.disableJsonView !== true}
|
|
<Toggle size="2xs" bind:checked={jsonView} options={{ right: 'JSON' }} />
|
|
{/if}
|
|
<DropdownV2
|
|
size="xs"
|
|
items={[
|
|
{
|
|
displayName: 'Test & record',
|
|
icon: Disc,
|
|
action: () => recordAndTest()
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{#if customUi?.previewPanel?.hideArgs}
|
|
<!-- Compact preview layout used by the pipeline editor:
|
|
no args column (the script is known to take no
|
|
inputs), LogPanel takes the full width, with a
|
|
small Test/Cancel button at the top-left of the
|
|
preview band. The earlier `-translate-y-1/2`
|
|
"float onto the editor" version was clipped in
|
|
Firefox (transform + overflow: visible interaction
|
|
on the parent splitpane Pane), so the button is
|
|
now positioned inside the panel — `top-1` keeps
|
|
it visually pinned to the top edge without
|
|
relying on cross-browser overflow behaviour. -->
|
|
<div class="relative h-full pt-9 flex flex-col">
|
|
{#if testJob?.id && testJob.type === 'CompletedJob' && $workspaceStore}
|
|
<!-- Right-side affordances when we're displaying a *completed*
|
|
job (either the user just ran a test, or the on-mount
|
|
last-run loader populated the panel). The job-id link
|
|
opens the full run page in a new tab; the dispatch
|
|
button mounts a popover that shows what downstream
|
|
jobs this run triggered (rendered only when the run
|
|
actually dispatched anything). -->
|
|
<div class="absolute top-1 right-2 z-10 flex items-center gap-2">
|
|
<a
|
|
class="text-3xs text-blue-600 hover:underline font-mono"
|
|
href={`${base}/run/${testJob.id}?workspace=${$workspaceStore}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
title="Open this run"
|
|
>
|
|
{testJob.id.slice(0, 8)}… ↗
|
|
</a>
|
|
<DispatchEventsButton
|
|
workspace={testJob.workspace_id ?? $workspaceStore}
|
|
jobId={testJob.id}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
<div class="absolute top-1 left-2 z-10">
|
|
{#if testIsLoading}
|
|
{@render cancelTestButton('sm', 'shadow-md')}
|
|
{:else if (customUi?.previewPanel?.downstreamSubscribers ?? 0) > 0 || customUi?.previewPanel?.onBoundedRun}
|
|
<!-- Split button: primary "Test" runs just this step
|
|
(skips the asset-trigger cascade); the caret
|
|
opens a popover with the cascade option labelled
|
|
by the downstream count. The active mode is
|
|
reflected in both the button label and the
|
|
check-mark on the menu item so the user always
|
|
knows whether the next run will fan out. A
|
|
pure-reader-only root has no subscriber downstream
|
|
but still gets `onBoundedRun`, so the split button
|
|
also opens for it (with the cascade item hidden). -->
|
|
{@const downstream = customUi?.previewPanel?.downstreamSubscribers ?? 0}
|
|
<div class="flex items-stretch shadow-md rounded-md overflow-hidden">
|
|
<Button
|
|
on:click={() => runTest()}
|
|
unifiedSize="sm"
|
|
btnClasses="rounded-r-none"
|
|
variant="accent-secondary"
|
|
startIcon={{
|
|
icon: cascadeDownstream ? Zap : Play,
|
|
classes: 'animate-none'
|
|
}}
|
|
shortCut={{ Icon: CornerDownLeft }}
|
|
>
|
|
{cascadeDownstream ? `Test + trigger ${downstream}` : 'Test'}
|
|
</Button>
|
|
<Popover
|
|
placement="bottom-end"
|
|
bind:isOpen={cascadeMenuOpen}
|
|
usePointerDownOutside
|
|
contentClasses="p-0"
|
|
>
|
|
{#snippet trigger()}
|
|
<!-- min-h-7 matches Button's unifiedSize="sm" (28px);
|
|
the bg/text/hover classes mirror Button's
|
|
`variant="accent-secondary"` so the split reads as
|
|
one connected control instead of two mismatched
|
|
buttons. The left seam uses a translucent
|
|
foreground-tinted border so it stays visible
|
|
against both the base and hover bg without
|
|
fighting the variant's color. -->
|
|
<button
|
|
type="button"
|
|
class="self-stretch min-h-7 px-1.5 flex items-center justify-center bg-surface-accent-secondary hover:bg-surface-accent-secondary-hover focus-visible:bg-surface-accent-secondary-clicked text-white dark:text-deep-blue-900 border-l border-white/30 dark:border-deep-blue-900/30 transition-colors"
|
|
title="Run options"
|
|
aria-label="Run options"
|
|
>
|
|
<ChevronDown size={14} />
|
|
</button>
|
|
{/snippet}
|
|
{#snippet content({ close })}
|
|
<div class="w-72 py-1 text-xs">
|
|
<button
|
|
type="button"
|
|
class="w-full text-left px-3 py-2 hover:bg-surface-hover flex items-start gap-2"
|
|
onclick={() => {
|
|
cascadeDownstream = false
|
|
close()
|
|
void runTest()
|
|
}}
|
|
>
|
|
<Play
|
|
size={14}
|
|
class="mt-0.5 shrink-0 text-emerald-700 dark:text-emerald-400"
|
|
/>
|
|
<div class="flex flex-col min-w-0">
|
|
<span class="font-medium">
|
|
Test {!cascadeDownstream ? '(current)' : ''}
|
|
</span>
|
|
<span class="text-2xs text-secondary"
|
|
>Run just this step. Downstream subscribers are not triggered.</span
|
|
>
|
|
</div>
|
|
</button>
|
|
{#if downstream > 0}
|
|
<button
|
|
type="button"
|
|
class="w-full text-left px-3 py-2 hover:bg-surface-hover flex items-start gap-2"
|
|
onclick={() => {
|
|
cascadeDownstream = true
|
|
close()
|
|
void runTest()
|
|
}}
|
|
>
|
|
<Zap
|
|
size={14}
|
|
class="mt-0.5 shrink-0 text-amber-600 dark:text-amber-400"
|
|
/>
|
|
<div class="flex flex-col min-w-0">
|
|
<span class="font-medium">
|
|
Test + trigger {downstream} downstream {cascadeDownstream
|
|
? '(current)'
|
|
: ''}
|
|
</span>
|
|
<span class="text-2xs text-secondary">
|
|
Let the asset-trigger cascade fan out to the {downstream}
|
|
subscribed script{downstream === 1 ? '' : 's'} after this run succeeds.
|
|
</span>
|
|
</div>
|
|
</button>
|
|
{/if}
|
|
{#if customUi?.previewPanel?.onBoundedRun}
|
|
<button
|
|
type="button"
|
|
class="w-full text-left px-3 py-2 hover:bg-surface-hover flex items-start gap-2 border-t"
|
|
onclick={() => {
|
|
close()
|
|
customUi!.previewPanel!.onBoundedRun!()
|
|
}}
|
|
>
|
|
<Target
|
|
size={14}
|
|
class="mt-0.5 shrink-0 text-blue-600 dark:text-blue-400"
|
|
/>
|
|
<div class="flex flex-col min-w-0">
|
|
<span class="font-medium">Run downstream up to…</span>
|
|
<span class="text-2xs text-secondary">
|
|
Pick end node(s) on the graph, then run only the cascade between
|
|
this script and them.
|
|
</span>
|
|
</div>
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{/snippet}
|
|
</Popover>
|
|
</div>
|
|
{:else}
|
|
{@render runTestButton('sm', 'shadow-md')}
|
|
{/if}
|
|
</div>
|
|
{#if customUi?.previewPanel?.argsAboveLogs && schema?.properties && Object.keys(schema.properties).length > 0}
|
|
<div
|
|
class="shrink-0 overflow-auto max-h-[45%] border-b border-gray-200 dark:border-gray-700 px-4 py-3"
|
|
>
|
|
{#key argsRender}
|
|
<SchemaForm
|
|
helperScript={{
|
|
source: 'inline',
|
|
code,
|
|
//@ts-ignore
|
|
lang
|
|
}}
|
|
compact
|
|
{schema}
|
|
bind:args
|
|
bind:isValid
|
|
noVariablePicker={customUi?.previewPanel?.disableVariablePicker === true}
|
|
showSchemaExplorer
|
|
/>
|
|
{/key}
|
|
</div>
|
|
{/if}
|
|
<div class="grow min-h-0">
|
|
{@render testLogPanel()}
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
{#key previewLayout}
|
|
<Splitpanes
|
|
horizontal={previewLayout !== 'bottom'}
|
|
class="!max-h-[calc(100%-{debugMode && isDebuggableScript
|
|
? '83'
|
|
: previewLayout === 'bottom'
|
|
? '0'
|
|
: '43'}px)]"
|
|
>
|
|
<Pane size={previewLayout === 'bottom' ? 40 : 33}>
|
|
{#if previewLayout === 'bottom' && !(debugMode && isDebuggableScript)}
|
|
<div class="px-3 pt-2 pb-1 flex items-center gap-2">
|
|
{#if testIsLoading}
|
|
{@render cancelTestButton('sm', 'w-full')}
|
|
{:else}
|
|
{@render runTestButton('sm', 'w-full')}
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{#if jsonView}
|
|
<div
|
|
class="py-2"
|
|
style="height: {!schemaHeight || schemaHeight < 600 ? 600 : schemaHeight}px"
|
|
data-schema-picker
|
|
>
|
|
<JsonInputs
|
|
on:select={(e) => {
|
|
if (e.detail) {
|
|
if (activeModuleTab !== null) {
|
|
testPanelArgs = e.detail
|
|
} else {
|
|
args = e.detail
|
|
}
|
|
}
|
|
}}
|
|
updateOnBlur={false}
|
|
placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/> "foo": "12"<br/>}`}
|
|
/>
|
|
</div>
|
|
{:else}
|
|
<div class="px-4">
|
|
<div
|
|
class="break-words relative font-sans"
|
|
bind:clientHeight={schemaHeight}
|
|
>
|
|
{#key argsRender}
|
|
{#if activeModuleTab !== null}
|
|
<SchemaForm
|
|
helperScript={{
|
|
source: 'inline',
|
|
code: editorCode,
|
|
//@ts-ignore
|
|
lang: effectiveLang
|
|
}}
|
|
compact
|
|
schema={testPanelSchema}
|
|
bind:args={testPanelArgs}
|
|
bind:isValid
|
|
noVariablePicker={customUi?.previewPanel?.disableVariablePicker ===
|
|
true}
|
|
showSchemaExplorer
|
|
/>
|
|
{:else}
|
|
<SchemaForm
|
|
helperScript={{
|
|
source: 'inline',
|
|
code,
|
|
//@ts-ignore
|
|
lang
|
|
}}
|
|
compact
|
|
{schema}
|
|
bind:args
|
|
bind:isValid
|
|
noVariablePicker={customUi?.previewPanel?.disableVariablePicker ===
|
|
true}
|
|
showSchemaExplorer
|
|
/>
|
|
{/if}
|
|
{/key}
|
|
{#if showPsCommonParams}
|
|
<div class="mt-2">
|
|
<PowerShellCommonParams bind:args={psCommonParams} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</Pane>
|
|
<Pane size={previewLayout === 'bottom' ? 60 : 67} class="relative">
|
|
{@render testLogPanel()}
|
|
</Pane>
|
|
</Splitpanes>
|
|
{/key}
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</Pane>
|
|
</Splitpanes>
|
|
</div>
|
|
</SplitPanesWrapper>
|
|
|
|
{#snippet cancelTestButton(size: 'sm' | 'md', btnClasses: string)}
|
|
<Button on:click={() => jobLoader?.cancelJob()} unifiedSize={size} {btnClasses}>
|
|
<WindmillIcon
|
|
white={true}
|
|
class="mr-2 text-white"
|
|
height={size === 'md' ? '16px' : '14px'}
|
|
width={size === 'md' ? '20px' : '16px'}
|
|
spin="fast"
|
|
/>
|
|
Cancel
|
|
</Button>
|
|
{/snippet}
|
|
|
|
{#snippet runTestButton(size: 'sm' | 'md', btnClasses: string)}
|
|
<Button
|
|
on:click={() => runTest()}
|
|
unifiedSize={size}
|
|
{btnClasses}
|
|
variant="accent-secondary"
|
|
startIcon={{ icon: Play, classes: 'animate-none' }}
|
|
shortCut={{ Icon: CornerDownLeft }}
|
|
>
|
|
Test
|
|
</Button>
|
|
{/snippet}
|
|
|
|
<!-- Single source of truth for the preview LogPanel — rendered by both the
|
|
compact (hideArgs) layout and the splitpane layouts. One invocation
|
|
prevents prop drift between copies (the history tab's lazy-load via
|
|
onTabChange was lost in one copy when they diverged). -->
|
|
{#snippet testLogPanel()}
|
|
<LogPanel
|
|
bind:this={logPanel}
|
|
{lang}
|
|
previewJob={debugMode
|
|
? ({
|
|
id: 'debug',
|
|
logs: $debugState.logs,
|
|
result: $debugState.result,
|
|
success: !$debugState.error,
|
|
type: hasDebugResult ? 'CompletedJob' : 'QueuedJob'
|
|
} as any)
|
|
: testJob}
|
|
{pastPreviews}
|
|
onTabChange={(tab) => {
|
|
historyTabActive = tab === 'history'
|
|
if (historyTabActive) {
|
|
loadPastTests()
|
|
}
|
|
}}
|
|
previewIsLoading={debugMode ? $debugState.running && !$debugState.stopped : testIsLoading}
|
|
{editor}
|
|
{diffEditor}
|
|
args={activeModuleTab !== null ? testPanelArgs : args}
|
|
{showCaptures}
|
|
customUi={customUi?.previewPanel}
|
|
showCustomResultPanel={showDebugPanel}
|
|
>
|
|
{#if scriptProgress && !debugMode}
|
|
<!-- Put to the slot in logpanel -->
|
|
<JobProgressBar job={testJob} {scriptProgress} bind:this={jobProgressBar} compact={true} />
|
|
{/if}
|
|
{#snippet capturesTab()}
|
|
<div class="h-full p-2">
|
|
<CaptureTable
|
|
bind:this={captureTable}
|
|
{hasPreprocessor}
|
|
canHavePreprocessor={canHavePreprocessor(lang)}
|
|
isFlow={false}
|
|
path={stablePathForCaptures}
|
|
canEdit={true}
|
|
on:applyArgs
|
|
on:updateSchema
|
|
on:addPreprocessor
|
|
/>
|
|
</div>
|
|
{/snippet}
|
|
{#snippet customResultPanel()}
|
|
<DebugPanel
|
|
stackFrames={$debugState.stackFrames}
|
|
scopes={$debugState.scopes}
|
|
variables={$debugState.variables}
|
|
client={dapClient}
|
|
bind:selectedFrameId={selectedDebugFrameId}
|
|
/>
|
|
{/snippet}
|
|
</LogPanel>
|
|
{/snippet}
|
|
|
|
{#snippet addModuleForm(close: () => void)}
|
|
<div class="flex flex-col gap-2">
|
|
<label for="module-name-input" class="text-xs font-semibold text-emphasis">File name</label>
|
|
<input
|
|
id="module-name-input"
|
|
type="text"
|
|
class="border rounded px-2 py-1.5 text-sm bg-surface"
|
|
bind:this={modulePathInputEl}
|
|
bind:value={modulePathInput}
|
|
placeholder={'helper' + (allowedModuleExtensions[0] ?? '.ts')}
|
|
oninput={() => {
|
|
modulePathError = validateModulePath(modulePathInput)
|
|
}}
|
|
onkeydown={(e) => {
|
|
if (e.key === 'Enter') addModule()
|
|
if (e.key === 'Escape') close()
|
|
}}
|
|
/>
|
|
{#if modulePathError}
|
|
<p class="text-red-500 text-2xs">{modulePathError}</p>
|
|
{/if}
|
|
<p class="text-tertiary text-2xs"
|
|
>Supports subfolders, e.g. <code class="text-2xs"
|
|
>utils/math{allowedModuleExtensions[0] ?? '.ts'}</code
|
|
></p
|
|
>
|
|
<div class="flex justify-end gap-2">
|
|
<Button
|
|
variant="default"
|
|
size="xs"
|
|
onclick={() => {
|
|
modulePathInput = ''
|
|
modulePathError = ''
|
|
close()
|
|
}}>Cancel</Button
|
|
>
|
|
<Button
|
|
variant="accent"
|
|
size="xs"
|
|
onclick={addModule}
|
|
disabled={!modulePathInput.trim() || !!modulePathError}>Add</Button
|
|
>
|
|
</div>
|
|
</div>
|
|
{/snippet}
|
|
|
|
{#snippet renameModuleForm(oldPath: string, close: () => void)}
|
|
<div class="flex flex-col gap-2">
|
|
<label for="rename-module-input" class="text-xs font-semibold text-emphasis"
|
|
>Rename module</label
|
|
>
|
|
<input
|
|
id="rename-module-input"
|
|
type="text"
|
|
class="border rounded px-2 py-1.5 text-sm bg-surface"
|
|
bind:this={renameModuleInputEl}
|
|
bind:value={renameModuleInput}
|
|
oninput={() => {
|
|
renameModuleError = validateRenameModulePath(renameModuleInput, oldPath)
|
|
}}
|
|
onkeydown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
renameModule(oldPath)
|
|
close()
|
|
}
|
|
if (e.key === 'Escape') close()
|
|
}}
|
|
/>
|
|
{#if renameModuleError}
|
|
<p class="text-red-500 text-2xs">{renameModuleError}</p>
|
|
{/if}
|
|
<div class="flex justify-end gap-2">
|
|
<Button
|
|
variant="default"
|
|
size="xs"
|
|
onclick={() => {
|
|
renameModuleInput = ''
|
|
renameModuleError = ''
|
|
close()
|
|
}}>Cancel</Button
|
|
>
|
|
<Button
|
|
variant="accent"
|
|
size="xs"
|
|
onclick={() => {
|
|
renameModule(oldPath)
|
|
close()
|
|
}}
|
|
disabled={!renameModuleInput.trim() ||
|
|
renameModuleInput.trim() === oldPath ||
|
|
!!renameModuleError}>Rename</Button
|
|
>
|
|
</div>
|
|
</div>
|
|
{/snippet}
|
|
|
|
{#snippet editorContent()}
|
|
<div class="h-full !overflow-visible bg-surface dark:bg-[#272D38] relative flex flex-col">
|
|
{#if supportsModules}
|
|
<div
|
|
class="flex items-center border-b border-tertiary/30 bg-surface-secondary px-1 gap-0.5 text-xs overflow-x-auto shrink-0"
|
|
>
|
|
<button
|
|
class="px-2 py-1 rounded-t {activeModuleTab === null
|
|
? 'bg-surface font-semibold border-b-2 border-blue-500'
|
|
: 'hover:bg-surface-hover'}"
|
|
onclick={() => switchToMain()}
|
|
>
|
|
{mainFileName}
|
|
</button>
|
|
{#each Object.keys(modules ?? {}) as modulePath}
|
|
<div
|
|
class="group rounded-t flex items-center {activeModuleTab === modulePath
|
|
? 'bg-surface font-semibold border-b-2 border-blue-500'
|
|
: 'hover:bg-surface-hover'}"
|
|
>
|
|
<button class="pl-2 py-1 flex items-center" onclick={() => switchToModule(modulePath)}>
|
|
{modulePath}
|
|
</button>
|
|
<div class="flex items-center pr-1 w-[32px] justify-end">
|
|
<Popover
|
|
placement="bottom-start"
|
|
openFocus={renameModuleInputEl}
|
|
contentClasses="p-3 w-72"
|
|
>
|
|
{#snippet trigger()}
|
|
<span
|
|
class="opacity-0 group-hover:opacity-100 hover:text-blue-500 transition-opacity"
|
|
role="button"
|
|
tabindex="0"
|
|
onclick={(e) => {
|
|
e.stopPropagation()
|
|
renameModuleInput = modulePath
|
|
renameModuleError = ''
|
|
}}
|
|
onkeydown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.stopPropagation()
|
|
renameModuleInput = modulePath
|
|
renameModuleError = ''
|
|
}
|
|
}}
|
|
>
|
|
<Pencil size={12} />
|
|
</span>
|
|
{/snippet}
|
|
{#snippet content({ close })}
|
|
{@render renameModuleForm(modulePath, close)}
|
|
{/snippet}
|
|
</Popover>
|
|
<span
|
|
class="opacity-0 group-hover:opacity-100 hover:text-red-500 transition-opacity"
|
|
role="button"
|
|
tabindex="0"
|
|
onclick={(e) => {
|
|
e.stopPropagation()
|
|
removeModule(modulePath)
|
|
}}
|
|
onkeydown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.stopPropagation()
|
|
removeModule(modulePath)
|
|
}
|
|
}}
|
|
>
|
|
<X size={12} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
<Popover
|
|
placement="bottom-start"
|
|
bind:isOpen={showAddModulePopover}
|
|
openFocus={modulePathInputEl}
|
|
contentClasses="p-3 w-72"
|
|
>
|
|
{#snippet trigger()}
|
|
<span class="px-2 py-1 rounded-t hover:bg-surface-hover inline-flex items-center">
|
|
<Plus size={12} />
|
|
</span>
|
|
{/snippet}
|
|
{#snippet content({ close })}
|
|
{@render addModuleForm(close)}
|
|
{/snippet}
|
|
</Popover>
|
|
</div>
|
|
{/if}
|
|
<div class="relative flex-1 !overflow-visible">
|
|
<div class="absolute bg-surface top-2 right-4 z-10 flex flex-row gap-2">
|
|
{#if assets?.length}
|
|
<AssetsDropdownButton {assets} />
|
|
{/if}
|
|
|
|
{#if isDebuggableScript && customUi?.editorBar?.debug != false}
|
|
<Button
|
|
variant={debugMode ? 'accent' : 'default'}
|
|
unifiedSize="sm"
|
|
onclick={toggleDebugMode}
|
|
startIcon={{ icon: Bug }}
|
|
iconOnly
|
|
btnClasses={debugMode
|
|
? ''
|
|
: 'bg-surface hover:bg-surface-hover border border-tertiary/30'}
|
|
title={debugMode ? 'Exit Debug Mode' : 'Toggle Debug Mode'}
|
|
/>
|
|
{/if}
|
|
{#if showDebugPanel && !showDebugConsole}
|
|
<Button
|
|
variant="default"
|
|
unifiedSize="sm"
|
|
onclick={() => (showDebugConsole = true)}
|
|
startIcon={{ icon: Terminal }}
|
|
title="Show Debug Console"
|
|
>
|
|
Console
|
|
</Button>
|
|
{/if}
|
|
{#if lang === 'ansible' && hasDelegateToGitRepo}
|
|
<Button
|
|
variant="default"
|
|
unifiedSize="sm"
|
|
onclick={() => (gitRepoResourcePickerOpen = true)}
|
|
startIcon={{ icon: GitBranch }}
|
|
>
|
|
Delegating to git repo
|
|
</Button>
|
|
{/if}
|
|
{#if testPanelSize === 0}
|
|
<HideButton
|
|
hidden={true}
|
|
direction="right"
|
|
unifiedSize="sm"
|
|
variant="accent-secondary"
|
|
panelName="test"
|
|
shortcut="U"
|
|
customHiddenIcon={{
|
|
icon: PlayIcon
|
|
}}
|
|
on:click={() => {
|
|
toggleTestPanel()
|
|
}}
|
|
/>
|
|
{/if}
|
|
{#if !aiChatManager.open && !disableAi && !inSessionPane}
|
|
{#if customUi?.editorBar?.aiGen != false && SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(lang ?? '')}
|
|
<HideButton
|
|
hidden={true}
|
|
direction="right"
|
|
panelName="AI"
|
|
shortcut="L"
|
|
unifiedSize="sm"
|
|
usePopoverOverride={!$copilotInfo.enabled}
|
|
customHiddenIcon={{
|
|
icon: WandSparkles
|
|
}}
|
|
btnClasses="!text-ai"
|
|
variant="default"
|
|
on:click={() => {
|
|
if (!aiChatManager.open) {
|
|
aiChatManager.changeMode(AIMode.SCRIPT)
|
|
}
|
|
aiChatManager.toggleOpen()
|
|
}}
|
|
>
|
|
{#snippet popoverOverride()}
|
|
<div class="text-sm">
|
|
Enable Windmill AI in the <a
|
|
href="{base}/workspace_settings?tab=ai"
|
|
target="_blank"
|
|
class="inline-flex flex-row items-center gap-1"
|
|
>
|
|
workspace settings <ExternalLink size={16} />
|
|
</a>
|
|
</div>
|
|
{/snippet}
|
|
</HideButton>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
{#if debugConsoleVisible}
|
|
<!-- Use Splitpanes when debug console is visible for resizing -->
|
|
<Splitpanes horizontal class="h-full !overflow-visible">
|
|
<Pane bind:size={editorPaneSize} minSize={20} class="!overflow-visible">
|
|
{@render editorPane()}
|
|
</Pane>
|
|
<Pane bind:size={consolePaneSize} minSize={10}>
|
|
<DebugConsole
|
|
client={dapClient}
|
|
currentFrameId={currentDebugFrameId}
|
|
onClose={() => (showDebugConsole = false)}
|
|
workspace={$workspaceStore}
|
|
jobId={debugSessionJobId ?? undefined}
|
|
/>
|
|
</Pane>
|
|
</Splitpanes>
|
|
{:else}
|
|
<!-- Normal editor without console -->
|
|
<div class="h-full !overflow-visible">
|
|
{@render editorPane()}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/snippet}
|
|
|
|
{#snippet editorPane()}
|
|
{#key effectiveLang}
|
|
<Editor
|
|
lineNumbersMinChars={4}
|
|
folding
|
|
{path}
|
|
bind:code={editorCode}
|
|
bind:websocketAlive
|
|
bind:this={editor}
|
|
{yContent}
|
|
awareness={wsProvider?.awareness}
|
|
on:change={(e) => {
|
|
if (activeModuleTab === null) {
|
|
code = editorCode
|
|
lastSyncedCode = code
|
|
inferSchema(e.detail)
|
|
} else {
|
|
flushModuleContent()
|
|
inferModuleSchema()
|
|
}
|
|
// Refresh breakpoint positions when code changes (decorations track their lines)
|
|
if (debugMode && breakpointDecorations.length > 0) {
|
|
refreshBreakpointPositions()
|
|
}
|
|
}}
|
|
on:saveDraft
|
|
on:toggleTestPanel={toggleTestPanel}
|
|
cmdEnterAction={async () => {
|
|
if (activeModuleTab === null) {
|
|
await inferSchema(editorCode)
|
|
} else {
|
|
await inferModuleSchema()
|
|
}
|
|
runTest()
|
|
}}
|
|
formatAction={async () => {
|
|
if (activeModuleTab === null) {
|
|
await inferSchema(editorCode)
|
|
}
|
|
dispatch('format')
|
|
}}
|
|
class="flex flex-1 h-full !overflow-visible"
|
|
scriptLang={effectiveLang}
|
|
automaticLayout={true}
|
|
{fixedOverflowWidgets}
|
|
{args}
|
|
workflowAsCode={workflowAsCodeAiContext}
|
|
{enablePreprocessorSnippet}
|
|
preparedAssetsSqlQueries={preparedSqlQueries.current}
|
|
customTag={tag}
|
|
/>
|
|
<DiffEditor
|
|
className="h-full"
|
|
bind:this={diffEditor}
|
|
modifiedModel={editor?.getModel() as meditor.ITextModel}
|
|
automaticLayout
|
|
defaultLang={scriptLangToEditorLang(lang)}
|
|
{fixedOverflowWidgets}
|
|
buttons={diffMode
|
|
? [
|
|
{
|
|
text: 'See changes history',
|
|
onClick: () => {
|
|
showHistoryDrawer = true
|
|
}
|
|
},
|
|
{
|
|
text: 'Quit diff mode',
|
|
onClick: () => {
|
|
hideDiffMode()
|
|
},
|
|
color: 'red'
|
|
}
|
|
]
|
|
: []}
|
|
/>
|
|
{/key}
|
|
{/snippet}
|
|
|
|
<GitRepoResourcePicker
|
|
bind:open={gitRepoResourcePickerOpen}
|
|
currentResource={ansibleAlternativeExecutionMode?.resource}
|
|
currentCommit={commitHashForGitRepo || ansibleAlternativeExecutionMode?.commit}
|
|
currentInventories={ansibleAlternativeExecutionMode?.inventories_location}
|
|
currentPlaybook={ansibleAlternativeExecutionMode?.playbook}
|
|
gitSshIdentity={ansibleGitSshIdentity}
|
|
on:selected={handleDelegateConfigUpdate}
|
|
on:addInventories={handleAddInventories}
|
|
/>
|
|
|
|
<style global>
|
|
/* Debug breakpoint glyph - red circle in the glyph margin */
|
|
.debug-breakpoint-glyph {
|
|
background-color: #e51400;
|
|
border-radius: 50%;
|
|
width: 10px !important;
|
|
height: 10px !important;
|
|
margin-left: 5px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Ghost breakpoint shown on gutter hover before the user clicks */
|
|
.debug-breakpoint-glyph-hover {
|
|
background-color: #e51400;
|
|
opacity: 0.35;
|
|
border-radius: 50%;
|
|
width: 10px !important;
|
|
height: 10px !important;
|
|
margin-left: 5px;
|
|
margin-top: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Current execution line - yellow background */
|
|
.debug-current-line {
|
|
background-color: rgba(255, 238, 0, 0.2);
|
|
}
|
|
|
|
/* Current execution line glyph - yellow arrow in the glyph margin */
|
|
.debug-current-line-glyph {
|
|
background-color: #ffcc00;
|
|
clip-path: polygon(0 0, 100% 50%, 0 100%);
|
|
width: 10px !important;
|
|
height: 14px !important;
|
|
margin-left: 5px;
|
|
margin-top: 2px;
|
|
}
|
|
</style>
|