windmill-components 1.558.4 → 1.596.0

package/package/components/ScriptEditor.svelte

@@ -3,7 +3,7 @@ import { JobService } from '../gen';
 import { enterpriseLicense, userStore, workspaceStore } from '../stores';
 import { copyToClipboard, emptySchema, sendUserToast } from '../utils';
 import Editor from './Editor.svelte';
-import { inferArgs, inferAssets } from '../infer';
+import { inferArgs, inferAssets, inferAnsibleExecutionMode } from '../infer';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import SchemaForm from './SchemaForm.svelte';
 import LogPanel from './scriptEditor/LogPanel.svelte';
@@ -19,7 +19,7 @@ import { scriptLangToEditorLang } from '../scripts';
 import { WebsocketProvider } from 'y-websocket';
 import Modal from './common/modal/Modal.svelte';
 import DiffEditor from './DiffEditor.svelte';
-import { Clipboard, CornerDownLeft, ExternalLink, Github, Play, PlayIcon, WandSparkles } from 'lucide-svelte';
+import { Copy, CornerDownLeft, ExternalLink, Github, GitBranch, Play, PlayIcon, WandSparkles } from 'lucide-svelte';
 import { setLicense } from '../enterpriseUtils';
 import Tabs from './common/tabs/Tabs.svelte';
 import Tab from './common/tabs/Tab.svelte';
@@ -34,10 +34,22 @@ import { getStringError } from './copilot/chat/utils';
 import { aiChatManager, AIMode } from './copilot/chat/AIChatManager.svelte';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import AssetsDropdownButton from './assets/AssetsDropdownButton.svelte';
+import { canHavePreprocessor } from '../script_helpers';
 import { assetEq } from './assets/lib';
 import { editor as meditor } from 'monaco-editor';
+import GitRepoViewer from './GitRepoViewer.svelte';
+import GitRepoResourcePicker from './GitRepoResourcePicker.svelte';
+import { updateDelegateToGitRepoConfig, insertAdditionalInventories } from '../ansibleUtils';
 import { copilotInfo } from '../aiStore';
+import JsonInputs from './JsonInputs.svelte';
+import Toggle from './Toggle.svelte';
+import { deepEqual } from 'fast-equals';
+import { usePreparedAssetSqlQueries } from '../infer.svelte';
+import { resource, watch } from 'runed';
 let { schema = $bindable(), code = $bindable(), path, lang, kind = 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, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editor_bar_right, enablePreprocessorSnippet = false } = $props();
+let initialArgs = structuredClone($state.snapshot(args));
+let jsonView = $state(false);
+let schemaHeight = $state(0);
 $effect.pre(() => {
     if (schema == undefined) {
         schema = emptySchema();
@@ -53,24 +65,41 @@ let websocketAlive = $state({
     ruff: false,
     shellcheck: false
 });
+let inferAssetsRes = resource([() => lang, () => code, () => code], () => inferAssets(lang, code));
+let preparedSqlQueries = usePreparedAssetSqlQueries(() => inferAssetsRes.current?.sql_queries, () => $workspaceStore);
 const dispatch = createEventDispatcher();
 $effect(() => {
     watchChanges &&
         (code != undefined || schema != undefined) &&
         dispatch('change', { code, schema });
 });
-$effect(() => {
-    ;
-    [lang, code];
-    untrack(() => {
-        inferAssets(lang, code).then((newAssets) => {
-            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;
-            }
-            assets = newAssets;
-        });
+watch(() => inferAssetsRes.current, () => {
+    if (!inferAssetsRes.current || inferAssetsRes.current?.status === 'error')
+        return;
+    let newAssets = inferAssetsRes.current.assets;
+    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;
+    }
+    if (!deepEqual(assets, newAssets))
+        assets = newAssets;
+});
+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);
@@ -87,6 +116,8 @@ let wsProvider = $state(undefined);
 let yContent = $state(undefined);
 let peers = $state([]);
 let showCollabPopup = $state(false);
+let ansibleAlternativeExecutionMode = $state();
+let ansibleGitSshIdentity = $state([]);
 const url = new URL(window.location.toString());
 let initialCollab = /true|1/i.test(url.searchParams.get('collab') ?? '0');
 if (initialCollab) {
@@ -134,7 +165,7 @@ async function loadPastTests() {
         scriptPathExact: path
     });
 }
-export async function inferSchema(code, nlang, resetArgs = false) {
+export async function inferSchema(code, { nlang, resetArgs = false, applyInitialArgs = false } = {}) {
     let nschema = schema ?? emptySchema();
     try {
         const result = await inferArgs(nlang ?? lang, code, nschema, selectedTab === 'preprocessor' || kind === 'preprocessor' ? 'preprocessor' : undefined);
@@ -154,14 +185,44 @@ export async function inferSchema(code, nlang, resetArgs = false) {
         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;
+        }
         schema = nschema;
     }
     catch (e) {
         validCode = false;
     }
 }
+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) {
+    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) {
+    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);
+}
 onMount(() => {
-    inferSchema(code);
+    inferSchema(code, { applyInitialArgs: true });
     loadPastTests();
     aiChatManager.saveAndClear();
     aiChatManager.changeMode(AIMode.SCRIPT);
@@ -226,6 +287,7 @@ onDestroy(() => {
     aiChatManager.scriptEditorApplyCode = undefined;
     aiChatManager.scriptEditorShowDiffMode = undefined;
     aiChatManager.scriptEditorOptions = undefined;
+    aiChatManager.saveAndClear();
     aiChatManager.changeMode(AIMode.NAVIGATOR);
 });
 function asKind(str) {
@@ -272,10 +334,11 @@ function getError(job) {
     return undefined;
 }
 function showDiffMode() {
+    const model = editor?.getModel();
+    if (model == undefined)
+        return;
     diffMode = true;
-    diffEditor?.setOriginal(lastDeployedCode ?? '');
-    diffEditor?.setModifiedModel(editor?.getModel());
-    diffEditor?.show();
+    diffEditor?.showWithModelAndOriginal(lastDeployedCode ?? '', model);
     editor?.hide();
 }
 function hideDiffMode() {
@@ -332,7 +395,7 @@ $effect(() => {
 
 		<Button
 			color="light"
-			startIcon={{ icon: Clipboard }}
+			startIcon={{ icon: Copy }}
 			iconOnly
 			on:click={() => copyToClipboard(collabUrl())}
 		/>
@@ -352,7 +415,7 @@ $effect(() => {
 				}}
 				on:showDiffMode={showDiffMode}
 				on:hideDiffMode={hideDiffMode}
-				customUi={{ ...customUi?.editorBar, aiGen: false }}
+				customUi={customUi?.editorBar}
 				collabLive={wsProvider?.shouldConnect}
 				{collabMode}
 				{validCode}
@@ -365,7 +428,6 @@ $effect(() => {
 				collabUsers={peers}
 				kind={asKind(kind)}
 				{template}
-				{diffEditor}
 				{args}
 				{noHistory}
 				{saveToWorkspace}
@@ -385,8 +447,8 @@ $effect(() => {
 				<Button
 					target="_blank"
 					href="https://www.windmill.dev/docs/cli_local_dev/vscode-extension"
-					color="light"
-					size="xs"
+					variant="subtle"
+					unifiedSize="md"
 					btnClasses="hidden lg:flex"
 					startIcon={{
 						icon: Github
@@ -401,136 +463,41 @@ $effect(() => {
 <SplitPanesWrapper>
 	<Splitpanes class="!overflow-visible">
 		<Pane bind:size={codePanelSize} minSize={10} class="!overflow-visible">
-			<div class="h-full !overflow-visible bg-surface dark:bg-[#272D38] relative">
-				<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
-					{#if assets?.length}
-						<AssetsDropdownButton {assets} />
-					{/if}
-					{#if testPanelSize === 0}
-						<HideButton
-							hidden={true}
-							direction="right"
-							size="md"
-							panelName="Test"
-							shortcut="U"
-							customHiddenIcon={{
-								icon: PlayIcon
-							}}
-							on:click={() => {
-								toggleTestPanel()
-							}}
-							btnClasses="bg-marine-400 hover:bg-marine-200 !text-primary-inverse hover:!text-primary-inverse hover:dark:!text-primary-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70"
-							color="marine"
-						/>
-					{/if}
-					{#if !aiChatManager.open && !disableAi}
-						{#if customUi?.editorBar?.aiGen != false && SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(lang ?? '')}
-							<HideButton
-								hidden={true}
-								direction="right"
-								panelName="AI"
-								shortcut="L"
-								size="md"
-								usePopoverOverride={!$copilotInfo.enabled}
-								customHiddenIcon={{
-									icon: WandSparkles
-								}}
-								btnClasses="!text-violet-800 dark:!text-violet-400 border border-gray-200 dark:border-gray-600 bg-surface"
-								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>
-
-				{#key lang}
-					<Editor
-						lineNumbersMinChars={4}
-						folding
-						{path}
-						bind:code
-						bind:websocketAlive
-						bind:this={editor}
-						{yContent}
-						awareness={wsProvider?.awareness}
-						on:change={(e) => {
-							inferSchema(e.detail)
-						}}
-						on:saveDraft
-						on:toggleTestPanel={toggleTestPanel}
-						cmdEnterAction={async () => {
-							await inferSchema(code)
-							runTest()
-						}}
-						formatAction={async () => {
-							await inferSchema(code)
-							try {
-								localStorage.setItem(path ?? 'last_save', code)
-							} catch (e) {
-								console.error('Could not save last_save to local storage', e)
-							}
-							dispatch('format')
-						}}
-						class="flex flex-1 h-full !overflow-visible"
-						scriptLang={lang}
-						automaticLayout={true}
-						{fixedOverflowWidgets}
-						{args}
-						{enablePreprocessorSnippet}
-					/>
-					<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}
-			</div>
+			{#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} minSize={0}>
 			<div class="flex flex-col h-full">
 				{#if showTabs}
 					<div transition:slide={{ duration: 200 }}>
 						<Tabs bind:selected={selectedTab}>
-							<Tab value="main">Main</Tab>
+							<Tab value="main" label="Main" />
 							{#if hasPreprocessor}
 								<div transition:slide={{ duration: 200, axis: 'x' }}>
-									<Tab value="preprocessor">Preprocessor</Tab>
+									<Tab value="preprocessor" label="Preprocessor" />
 								</div>
 							{/if}
 						</Tabs>
@@ -561,42 +528,15 @@ $effect(() => {
 							/>
 							Cancel
 						</Button>
-					{:else if customUi?.previewPanel?.disableTriggerButton !== true}
-						<div class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch">
-							<Button
-								color="dark"
-								on:click={() => {
-									runTest()
-								}}
-								btnClasses="w-full rounded-r-none"
-								size="xs"
-								startIcon={{
-									icon: Play,
-									classes: 'animate-none'
-								}}
-								shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
-							>
-								{#if testIsLoading}
-									Running
-								{:else}
-									Test
-								{/if}
-							</Button>
-							<CaptureButton on:openTriggers />
-						</div>
 					{:else}
+						{@const disableTriggerButton = customUi?.previewPanel?.disableTriggerButton === true}
 						<div class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch">
 							<Button
-								color="dark"
-								on:click={() => {
-									runTest()
-								}}
-								btnClasses="w-full"
+								on:click={() => runTest()}
+								btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
 								size="xs"
-								startIcon={{
-									icon: Play,
-									classes: 'animate-none'
-								}}
+								variant="accent-secondary"
+								startIcon={{ icon: Play, classes: 'animate-none' }}
 								shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
 							>
 								{#if testIsLoading}
@@ -605,31 +545,55 @@ $effect(() => {
 									Test
 								{/if}
 							</Button>
+							{#if !disableTriggerButton}
+								<CaptureButton on:openTriggers />
+							{/if}
 						</div>
 					{/if}
+					<div class="absolute top-2 right-2"
+						><Toggle size="2xs" bind:checked={jsonView} options={{ right: 'JSON' }} /></div
+					>
 				</div>
 				<Splitpanes horizontal class="!max-h-[calc(100%-43px)]">
 					<Pane size={33}>
-						<div class="px-4">
-							<div class="break-words relative font-sans">
-								{#key argsRender}
-									<SchemaForm
-										helperScript={{
-											source: 'inline',
-											code,
-											//@ts-ignore
-											lang
-										}}
-										compact
-										{schema}
-										bind:args
-										bind:isValid
-										noVariablePicker={customUi?.previewPanel?.disableVariablePicker === true}
-										showSchemaExplorer
-									/>
-								{/key}
+						{#if jsonView}
+							<div
+								class="py-2"
+								style="height: {!schemaHeight || schemaHeight < 600 ? 600 : schemaHeight}px"
+								data-schema-picker
+							>
+								<JsonInputs
+									on:select={(e) => {
+										if (e.detail) {
+											args = e.detail
+										}
+									}}
+									updateOnBlur={false}
+									placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
+								/>
 							</div>
-						</div>
+						{:else}
+							<div class="px-4">
+								<div class="break-words relative font-sans" bind:clientHeight={schemaHeight}>
+									{#key argsRender}
+										<SchemaForm
+											helperScript={{
+												source: 'inline',
+												code,
+												//@ts-ignore
+												lang
+											}}
+											compact
+											{schema}
+											bind:args
+											bind:isValid
+											noVariablePicker={customUi?.previewPanel?.disableVariablePicker === true}
+											showSchemaExplorer
+										/>
+									{/key}
+								</div>
+							</div>
+						{/if}
 					</Pane>
 					<Pane size={67} class="relative">
 						<LogPanel
@@ -658,7 +622,7 @@ $effect(() => {
 									<CaptureTable
 										bind:this={captureTable}
 										{hasPreprocessor}
-										canHavePreprocessor={lang === 'bun' || lang === 'deno' || lang === 'python3'}
+										canHavePreprocessor={canHavePreprocessor(lang)}
 										isFlow={false}
 										path={stablePathForCaptures}
 										canEdit={true}
@@ -675,3 +639,149 @@ $effect(() => {
 		</Pane>
 	</Splitpanes>
 </SplitPanesWrapper>
+
+{#snippet editorContent()}
+	<div class="h-full !overflow-visible bg-surface dark:bg-[#272D38] relative">
+		<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
+			{#if assets?.length}
+				<AssetsDropdownButton {assets} />
+			{/if}
+			{#if lang === 'ansible' && hasDelegateToGitRepo}
+				<Button
+					variant="default"
+					size="xs"
+					on:click={() => (gitRepoResourcePickerOpen = true)}
+					startIcon={{ icon: GitBranch }}
+					btnClasses="bg-surface hover:bg-surface-hover border border-tertiary/30"
+				>
+					Delegating to git repo
+				</Button>
+			{/if}
+			{#if testPanelSize === 0}
+				<HideButton
+					hidden={true}
+					direction="right"
+					size="md"
+					panelName="Test"
+					shortcut="U"
+					customHiddenIcon={{
+						icon: PlayIcon
+					}}
+					on:click={() => {
+						toggleTestPanel()
+					}}
+					btnClasses="bg-marine-400 hover:bg-marine-200 !text-primary-inverse hover:!text-primary-inverse hover:dark:!text-primary-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70"
+					color="marine"
+				/>
+			{/if}
+			{#if !aiChatManager.open && !disableAi}
+				{#if customUi?.editorBar?.aiGen != false && SUPPORTED_CHAT_SCRIPT_LANGUAGES.includes(lang ?? '')}
+					<HideButton
+						hidden={true}
+						direction="right"
+						panelName="AI"
+						shortcut="L"
+						size="md"
+						usePopoverOverride={!$copilotInfo.enabled}
+						customHiddenIcon={{
+							icon: WandSparkles
+						}}
+						btnClasses="!text-ai border border-gray-200 dark:border-gray-600 bg-surface"
+						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>
+
+		{#key lang}
+			<Editor
+				lineNumbersMinChars={4}
+				folding
+				{path}
+				bind:code
+				bind:websocketAlive
+				bind:this={editor}
+				{yContent}
+				awareness={wsProvider?.awareness}
+				on:change={(e) => {
+					inferSchema(e.detail)
+				}}
+				on:saveDraft
+				on:toggleTestPanel={toggleTestPanel}
+				cmdEnterAction={async () => {
+					await inferSchema(code)
+					runTest()
+				}}
+				formatAction={async () => {
+					await inferSchema(code)
+					try {
+						localStorage.setItem(path ?? 'last_save', code)
+					} catch (e) {
+						console.error('Could not save last_save to local storage', e)
+					}
+					dispatch('format')
+				}}
+				class="flex flex-1 h-full !overflow-visible"
+				scriptLang={lang}
+				automaticLayout={true}
+				{fixedOverflowWidgets}
+				{args}
+				{enablePreprocessorSnippet}
+				preparedAssetsSqlQueries={preparedSqlQueries.current}
+			/>
+			<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}
+	</div>
+{/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}
+/>