windmill-components 1.665.0 → 1.677.0

package/package/components/ScriptEditor.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">import { buildWsUrl } from '../wsUrl';
+import { processSecretArgs } from './secretArgUtils';
 import { JobService } from '../gen';
 import { enterpriseLicense, userStore, workspaceStore } from '../stores';
 import { copyToClipboard, emptySchema, getLocalSetting, sendUserToast, storeLocalSetting } from '../utils';
 import Editor from './Editor.svelte';
 import { inferArgs, inferAssets, inferAnsibleExecutionMode } from '../infer';
+import { isWorkflowAsCode } from './graph/wacToFlow';
+import WacDiagram from './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 } from './EditorBar.svelte';
 import JobLoader from './JobLoader.svelte';
@@ -57,6 +61,8 @@ let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, te
 let initialArgs = structuredClone($state.snapshot(args));
 let jsonView = $state(false);
 let schemaHeight = $state(0);
+let psCommonParams = $state({});
+let showPsCommonParams = $derived(lang === 'powershell' && /^\s*\[CmdletBinding/im.test(code));
 // Module tab state
 let activeModuleTab = $state(null);
 // Per-module test panel state (args + schema), persisted across tab switches
@@ -477,11 +483,20 @@ export async function runTest() {
     flushModuleContent();
     const testCode = activeModuleTab !== null ? editorCode : code;
     const testLang = activeModuleTab !== null ? effectiveLang : lang;
-    const testArgs = activeModuleTab !== null
+    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;
+            }
+        }
+    }
     //@ts-ignore
     let job = await jobLoader.runPreview(path, testCode, testLang, testArgs, tag, undefined, undefined, {
         done(_x) {
@@ -958,7 +973,8 @@ function collabUrl() {
     return (`${url}?collab=1&workspace=${encodeURIComponent($workspaceStore ?? '')}&lang=${encodeURIComponent(lang ?? '')}` +
         (edit ? '' : `&path=${path}`));
 }
-let showTabs = $derived(hasPreprocessor);
+let isWac = $derived(code && lang ? isWorkflowAsCode(code, lang) : false);
+let showTabs = $derived(hasPreprocessor || isWac);
 $effect(() => {
     !hasPreprocessor && (selectedTab = 'main');
 });
@@ -1190,6 +1206,11 @@ $effect(() => {
 									<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}
@@ -1212,203 +1233,216 @@ $effect(() => {
 					</div>
 				{/if}
 
-				<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()
-							}}
-						/>
+				{#if selectedTab === 'diagram'}
+					<div class="flex-1 min-h-0">
+						<WacDiagram {code} language={lang ?? ''} />
 					</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}
-									<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" unifiedSize="md">
-										<WindmillIcon
-											white={true}
-											class="mr-2 text-white"
-											height="16px"
-											width="20px"
-											spin="fast"
-										/>
-										Cancel
-									</Button>
-								{:else}
-									{@const disableTriggerButton =
-										customUi?.previewPanel?.disableTriggerButton === true}
+				{:else}
+					<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}
+										<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" unifiedSize="md">
+											<WindmillIcon
+												white={true}
+												class="mr-2 text-white"
+												height="16px"
+												width="20px"
+												spin="fast"
+											/>
+											Cancel
+										</Button>
+									{:else}
+										{@const disableTriggerButton =
+											customUi?.previewPanel?.disableTriggerButton === true}
+										<Button
+											on:click={() => runTest()}
+											unifiedSize="md"
+											btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
+											variant="accent-secondary"
+											startIcon={{ icon: Play, classes: 'animate-none' }}
+											shortCut={{ Icon: CornerDownLeft }}
+										>
+											Test
+										</Button>
+										{#if !disableTriggerButton}
+											<CaptureButton on:openTriggers />
+										{/if}
+									{/if}
+								</div>
+								{#if lastRecording}
 									<Button
-										on:click={() => runTest()}
+										on:click={downloadRecording}
 										unifiedSize="md"
-										btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
-										variant="accent-secondary"
-										startIcon={{ icon: Play, classes: 'animate-none' }}
-										shortCut={{ Icon: CornerDownLeft }}
-									>
-										Test
-									</Button>
-									{#if !disableTriggerButton}
-										<CaptureButton on:openTriggers />
-									{/if}
+										startIcon={{ icon: Download }}
+										iconOnly
+										title="Download recording"
+									/>
 								{/if}
 							</div>
-							{#if lastRecording}
-								<Button
-									on:click={downloadRecording}
-									unifiedSize="md"
-									startIcon={{ icon: Download }}
-									iconOnly
-									title="Download recording"
-								/>
-							{/if}
+						{/if}
+						<div class="absolute top-2 right-2 flex items-center gap-2">
+							<Toggle size="2xs" bind:checked={jsonView} options={{ right: 'JSON' }} />
+							<DropdownV2
+								size="xs"
+								items={[
+									{
+										displayName: 'Test & record',
+										icon: Disc,
+										action: () => recordAndTest()
+									}
+								]}
+							/>
 						</div>
-					{/if}
-					<div class="absolute top-2 right-2 flex items-center gap-2">
-						<Toggle size="2xs" bind:checked={jsonView} options={{ right: 'JSON' }} />
-						<DropdownV2
-							size="xs"
-							items={[
-								{
-									displayName: 'Test & record',
-									icon: Disc,
-									action: () => recordAndTest()
-								}
-							]}
-						/>
 					</div>
-				</div>
-				<Splitpanes
-					horizontal
-					class="!max-h-[calc(100%-{debugMode && isDebuggableScript ? '83' : '43'}px)]"
-				>
-					<Pane size={33}>
-						{#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
+					<Splitpanes
+						horizontal
+						class="!max-h-[calc(100%-{debugMode && isDebuggableScript ? '83' : '43'}px)]"
+					>
+						<Pane size={33}>
+							{#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/>&nbsp;&nbsp;"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
-											/>
+										}}
+										updateOnBlur={false}
+										placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"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}
-									{/key}
+									</div>
 								</div>
-							</div>
-						{/if}
-					</Pane>
-					<Pane size={67} class="relative">
-						<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}
-							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
+						</Pane>
+						<Pane size={67} class="relative">
+							<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}
+								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}
 									/>
-								</div>
-							{/snippet}
-							{#snippet customResultPanel()}
-								<DebugPanel
-									stackFrames={$debugState.stackFrames}
-									scopes={$debugState.scopes}
-									variables={$debugState.variables}
-									client={dapClient}
-									bind:selectedFrameId={selectedDebugFrameId}
-								/>
-							{/snippet}
-						</LogPanel>
-					</Pane>
-				</Splitpanes>
+								{/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>
+						</Pane>
+					</Splitpanes>
+				{/if}
 			</div>
 		</Pane>
 	</Splitpanes>

package/package/components/ScriptEditor.svelte.d.ts

@@ -25,7 +25,7 @@ interface Props {
     watchChanges?: boolean;
     customUi?: ScriptEditorWhitelabelCustomUi | undefined;
     args: Record<string, any>;
-    selectedTab?: 'main' | 'preprocessor';
+    selectedTab?: 'main' | 'preprocessor' | 'diagram';
     hasPreprocessor?: boolean;
     captureTable?: CaptureTable | undefined;
     showCaptures?: boolean;

package/package/components/ScriptSchema.svelte

@@ -2,4 +2,4 @@
 let { schema = $bindable(), customUi = undefined } = $props();
 </script>
 
-<EditableSchemaForm bind:schema uiOnly {customUi} editTab="inputEditor" />
+<EditableSchemaForm bind:schema uiOnly {customUi} editTab="inputEditor" showSensitiveToggle />

package/package/components/StringTypeNarrowing.svelte

@@ -334,7 +334,7 @@ function onEnumKeyChange(oldKey, newKey) {
 			options={{
 				right: 'Is Password/Sensitive',
 				rightTooltip:
-					'The value will be stored as an ephemeral secret variable in the user space of the caller of the job, only viewable by him.'
+					'The value will be stored as an ephemeral secret variable in the user space of the caller of the job, only viewable by that user.'
 			}}
 			checked={password}
 			on:change={(e) => {

package/package/components/StringTypeNarrowing.svelte.d.ts

@@ -15,6 +15,6 @@ interface Props {
     overrideAllowKindChange?: boolean;
     originalType?: string | undefined;
 }
-declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "pattern" | "format" | "disableCreate" | "contentEncoding" | "enum_" | "enumLabels" | "dateFormat" | "customErrorMessage" | "minRows" | "disableVariablePicker">;
+declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "pattern" | "format" | "disableCreate" | "contentEncoding" | "enum_" | "enumLabels" | "dateFormat" | "minRows" | "customErrorMessage" | "disableVariablePicker">;
 type StringTypeNarrowing = ReturnType<typeof StringTypeNarrowing>;
 export default StringTypeNarrowing;

package/package/components/SummaryPathDisplay.svelte

@@ -7,7 +7,9 @@ import { userStore, workspaceStore } from '../stores';
 import { sendUserToast } from '../toast';
 import { updateItemPathAndSummary, checkFlowOnBehalfOf } from './moveRenameManager';
 import Label from './Label.svelte';
-let { summary = $bindable(''), path = $bindable(''), editable = false, onSaved, kind = 'flow' } = $props();
+import LabelsInput from './LabelsInput.svelte';
+import Badge from './common/badge/Badge.svelte';
+let { summary = $bindable(''), path = $bindable(''), labels = $bindable(), editable = false, onSaved, kind = 'flow' } = $props();
 let editSummary = $state('');
 let editPath = $state('');
 let dirtyPath = $state(false);
@@ -15,11 +17,13 @@ let popoverOpen = $state(false);
 let own = $state(false);
 let onBehalfOfEmail = $state(undefined);
 let summaryInput = $state();
-let hasChanges = $derived(editSummary !== (summary ?? '') || (own && dirtyPath));
+let labelsDirty = $state(false);
+let hasChanges = $derived(editSummary !== (summary ?? '') || (own && dirtyPath) || labelsDirty);
 $effect(() => {
     if (popoverOpen && onSaved) {
         editSummary = summary ?? '';
         editPath = path ?? '';
+        labelsDirty = false;
         own = isOwner(path ?? '', $userStore, $workspaceStore);
         onBehalfOfEmail = undefined;
         if (kind === 'flow' && $workspaceStore && path) {
@@ -38,9 +42,11 @@ async function save(close) {
             kind,
             initialPath,
             newPath,
-            newSummary: editSummary
+            newSummary: editSummary,
+            labels
         });
         sendUserToast(`${kind === 'flow' ? 'Flow' : 'Script'} updated`);
+        labelsDirty = false;
         close();
         onSaved?.(newPath);
     }
@@ -71,13 +77,22 @@ async function save(close) {
 				<span class="text-2xs leading-tight text-tertiary font-mono font-normal truncate max-w-full"
 					>{path}</span
 				>
-				<span
-					class="text-sm font-semibold truncate max-w-full {emptyString(summary)
-						? 'text-tertiary italic font-normal'
-						: 'text-emphasis'}"
-				>
-					{emptyString(summary) ? 'Add a summary...' : summary}
-				</span>
+				<div class="flex items-center gap-3 max-w-full">
+					<span
+						class="text-sm font-semibold truncate {emptyString(summary)
+							? 'text-tertiary italic font-normal'
+							: 'text-emphasis'}"
+					>
+						{emptyString(summary) ? 'Add a summary...' : summary}
+					</span>
+					{#if labels?.length}
+						<div class="flex items-center gap-0.5">
+							{#each labels as label}
+								<Badge color="blue" verySmall class="px-1" title="Label: {label}">{label}</Badge>
+							{/each}
+						</div>
+					{/if}
+				</div>
 			</div>
 		{/snippet}
 		{#snippet content({ close })}
@@ -98,6 +113,13 @@ async function save(close) {
 							bind:value={editSummary}
 						/>
 					</Label>
+					<LabelsInput
+						bind:labels
+						class="-mt-4"
+						onchange={() => {
+							labelsDirty = true
+						}}
+					/>
 					<Label label="Path">
 						{#if own}
 							<Path

package/package/components/SummaryPathDisplay.svelte.d.ts

@@ -1,10 +1,11 @@
 interface Props {
     summary?: string;
     path?: string;
+    labels?: string[] | undefined;
     editable?: boolean;
     onSaved?: (newPath: string) => void;
     kind?: 'flow' | 'script';
 }
-declare const SummaryPathDisplay: import("svelte").Component<Props, {}, "summary" | "path">;
+declare const SummaryPathDisplay: import("svelte").Component<Props, {}, "summary" | "path" | "labels">;
 type SummaryPathDisplay = ReturnType<typeof SummaryPathDisplay>;
 export default SummaryPathDisplay;

package/package/components/VariableEditor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { VariableService } from '../gen';
 import Path from './Path.svelte';
+import LabelsInput from './LabelsInput.svelte';
 import { createEventDispatcher } from 'svelte';
 import { userStore, workspaceStore } from '../stores';
 import Tooltip from './Tooltip.svelte';
@@ -22,6 +23,7 @@ let variable = $state({
     description: ''
 });
 let valid = $state(true);
+let labels = $state(undefined);
 let drawer = $state();
 let edit = $state(false);
 let initialPath = $state('');
@@ -36,6 +38,7 @@ export function initNew() {
     edit = false;
     initialPath = '';
     path = '';
+    labels = undefined;
     can_write = true;
     drawer?.openDrawer();
 }
@@ -54,6 +57,7 @@ export async function editVariable(edit_path) {
         is_secret: getV.is_secret,
         description: getV.description ?? ''
     };
+    labels = getV.labels ?? undefined;
     initialPath = edit_path;
     path = edit_path;
     drawer?.openDrawer();
@@ -78,7 +82,8 @@ async function createVariable() {
             path,
             value: variable.value,
             is_secret: variable.is_secret,
-            description: variable.description
+            description: variable.description,
+            labels
         }
     });
     sendUserToast(`Created variable ${path}`);
@@ -99,7 +104,8 @@ async function updateVariable() {
                 path: getV.path != path ? path : undefined,
                 value: variable.value == '' ? undefined : variable.value,
                 is_secret: getV.is_secret != variable.is_secret ? variable.is_secret : undefined,
-                description: getV.description != variable.description ? variable.description : undefined
+                description: getV.description != variable.description ? variable.description : undefined,
+                labels
             }
         });
         sendUserToast(`Updated variable ${initialPath}`);
@@ -136,6 +142,7 @@ let editor = $state(undefined);
 					namePlaceholder="variable"
 					kind="variable"
 				/>
+				<LabelsInput bind:labels />
 			</div>
 			<label class="flex flex-col gap-1">
 				<span class="text-xs font-semibold text-emphasis">Secret</span>