windmill-components 1.695.1 → 1.698.0

package/package/components/ResourceForm.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">import { emptyString, isOwner, urlize } from '../utils';
+import { Alert, Skeleton } from './common';
+import Path from './Path.svelte';
+import LabelsInput from './LabelsInput.svelte';
+import Required from './Required.svelte';
+import { userStore, workspaceStore } from '../stores';
+import SchemaForm from './SchemaForm.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
+import FilesetEditor from './FilesetEditor.svelte';
+import Toggle from './Toggle.svelte';
+import TestConnection from './TestConnection.svelte';
+import { Pen } from 'lucide-svelte';
+import Markdown from 'svelte-exmarkdown';
+import autosize from '../autosize';
+import GfmMarkdown from './GfmMarkdown.svelte';
+import TestTriggerConnection from './triggers/TestTriggerConnection.svelte';
+import GitHubAppIntegration from './GitHubAppIntegration.svelte';
+import Button from './common/button/Button.svelte';
+import ResourceGen from './copilot/ResourceGen.svelte';
+import SyncResourceTypes from './SyncResourceTypes.svelte';
+import Label from './Label.svelte';
+let { path = $bindable(), initialPath, hidePath = false, labels = $bindable(), description = $bindable(), args = $bindable(), wsSpecific = $bindable(), isValid = $bindable(), viewJsonSchema = $bindable(), jsonError = $bindable(), deployTo, can_write, resource_type, resourceTypeInfo, resourceSchema, loadingSchema, resourceToEdit, onLoadResourceType } = $props();
+let editDescription = $state(false);
+let rawCode = $state(undefined);
+let textFileContent = $state('');
+function parseJson() {
+    try {
+        args = JSON.parse(rawCode ?? '');
+        jsonError = '';
+    }
+    catch (e) {
+        jsonError = e.message;
+    }
+}
+function parseTextFileContent() {
+    args = { content: textFileContent };
+}
+$effect(() => {
+    if (rawCode !== undefined)
+        parseJson();
+});
+$effect(() => {
+    if (viewJsonSchema && rawCode === undefined) {
+        rawCode = JSON.stringify(args, null, 2);
+    }
+});
+$effect(() => {
+    if (textFileContent)
+        parseTextFileContent();
+});
+$effect(() => {
+    if (resourceTypeInfo?.format_extension && !resourceTypeInfo?.is_fileset && !viewJsonSchema) {
+        textFileContent = args?.content ?? '';
+    }
+});
+</script>
+
+{#if !hidePath}
+	<div>
+		{#if !can_write}
+			<div class="my-2">
+				<Alert type="warning" title="Only read access">
+					You only have read access to this resource and cannot edit it
+				</Alert>
+			</div>
+		{/if}
+		<Label label="Path">
+			<Path
+				disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
+				bind:path
+				{initialPath}
+				namePlaceholder="resource"
+				kind="resource"
+			/>
+		</Label>
+	</div>
+{/if}
+<LabelsInput bind:labels class="-mt-4" />
+
+{#if deployTo}
+	<Label
+		label="Workspace specific"
+		tooltip="Prevents this resource from being deployed to prod/staging. When enabled, any variable referenced via $var: inside the resource value is also automatically marked workspace-specific. Disabling this toggle does not un-mark those variables — they may be referenced by other resources."
+	>
+		<Toggle bind:checked={wsSpecific} />
+	</Label>
+{/if}
+
+{#if !emptyString(resourceTypeInfo?.description)}
+	<div class="flex flex-col gap-1">
+		<h4 class="text-xs text-emphasis font-semibold">{resourceTypeInfo?.name} description</h4>
+		<div class="text-xs text-primary font-normal">
+			<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
+		</div>
+	</div>
+{/if}
+
+<div class="flex flex-col gap-1">
+	<h4 class="inline-flex items-center gap-2 text-xs text-emphasis font-semibold"
+		>Resource description <Required required={false} />
+		{#if can_write}
+			<Button
+				variant="subtle"
+				unifiedSize="xs"
+				btnClasses={editDescription ? 'bg-surface-hover' : ''}
+				startIcon={{ icon: Pen }}
+				on:click={() => (editDescription = !editDescription)}
+			/>
+		{/if}
+	</h4>
+	{#if can_write && editDescription}
+		<div class="relative">
+			<div class="text-2xs text-primary absolute -top-4 right-0">GH Markdown</div>
+			<textarea
+				class="text-xs text-primary font-normal"
+				disabled={!can_write}
+				use:autosize
+				bind:value={description}
+				placeholder="Describe what this resource is for"
+			></textarea>
+		</div>
+	{:else if description == undefined || description == ''}
+		<div class="text-xs text-secondary font-normal">No description provided</div>
+	{:else}
+		<div class="text-xs text-primary font-normal">
+			<GfmMarkdown md={description} noPadding />
+		</div>
+	{/if}
+</div>
+
+<div class="flex flex-col gap-1">
+	<div class="w-full flex gap-4 flex-row-reverse items-center">
+		<Toggle
+			bind:checked={viewJsonSchema}
+			on:change={(e) => {
+				if (e.detail) {
+					rawCode = JSON.stringify(args, null, 2)
+				} else if (resourceTypeInfo?.format_extension && !resourceTypeInfo?.is_fileset) {
+					textFileContent = args?.content ?? ''
+				}
+			}}
+			options={{
+				right: 'As JSON'
+			}}
+		/>
+		<ResourceGen
+			bind:args
+			resourceType={resource_type}
+			resourceName={path}
+			resourceDescription={description}
+			{resourceSchema}
+		/>
+		{#if resourceToEdit?.resource_type === 'nats' || resourceToEdit?.resource_type === 'kafka'}
+			<TestTriggerConnection kind={resourceToEdit?.resource_type} args={{ connection: args }} />
+		{:else}
+			<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
+		{/if}
+		{#if resource_type === 'git_repository' && $workspaceStore && ($userStore?.is_admin || $userStore?.is_super_admin)}
+			<GitHubAppIntegration
+				resourceType={resource_type}
+				{args}
+				{description}
+				onArgsUpdate={(newArgs) => {
+					args = newArgs
+					if (viewJsonSchema) {
+						rawCode = JSON.stringify(args, null, 2)
+					}
+				}}
+				onDescriptionUpdate={(newDescription) => (description = newDescription)}
+			/>
+		{/if}
+	</div>
+
+	<div>
+		{#if loadingSchema}
+			<Skeleton layout={[[4]]} />
+		{:else if !viewJsonSchema && resourceTypeInfo?.is_fileset}
+			<div class="mt-1 flex items-center gap-2">
+				<h5 class="inline-flex items-center gap-4">Fileset</h5>
+				<ResourceGen
+					bind:args
+					resourceType={resource_type}
+					resourceName={path}
+					resourceDescription={description}
+					{resourceSchema}
+					isFileset
+				/>
+			</div>
+			<FilesetEditor bind:args />
+		{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
+			{#if resourceTypeInfo?.format_extension}
+				<h5 class="mt-1 inline-flex items-center gap-4">
+					File content ({resourceTypeInfo.format_extension})
+				</h5>
+				<div class="">
+					<SimpleEditor
+						autoHeight
+						lang={resourceTypeInfo.format_extension}
+						bind:code={textFileContent}
+						fixedOverflowWidgets={false}
+					/>
+				</div>
+			{:else}
+				<SchemaForm
+					onlyMaskPassword
+					noDelete
+					disabled={!can_write}
+					compact
+					schema={resourceSchema}
+					bind:args
+					bind:isValid
+				/>
+			{/if}
+		{:else if !can_write}
+			<input type="text" disabled value={rawCode} />
+		{:else}
+			{#if !viewJsonSchema}
+				<div class="flex flex-col gap-2 mb-4">
+					<p class="text-red-500 dark:text-red-400 text-xs">
+						Resource type '{resource_type}' not found in your workspace
+					</p>
+					<SyncResourceTypes onSynced={() => onLoadResourceType?.()} />
+					<p class="italic text-secondary text-xs"> Define the value in JSON directly </p>
+				</div>
+			{/if}
+
+			{#if !emptyString(jsonError)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
+					>{jsonError}</span
+				>{:else}<div class="py-2"></div>{/if}
+			<div class="bg-surface-tertiary rounded-md border py-2.5">
+				<SimpleEditor autoHeight lang="json" bind:code={rawCode} />
+			</div>
+		{/if}
+	</div>
+</div>

package/package/components/ResourceForm.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Schema } from '../common';
+import type { Resource, ResourceType } from '../gen';
+interface Props {
+    path: string;
+    initialPath: string;
+    hidePath?: boolean;
+    labels: string[] | undefined;
+    description: string;
+    args: Record<string, any>;
+    wsSpecific: boolean;
+    isValid: boolean;
+    viewJsonSchema: boolean;
+    jsonError: string;
+    deployTo: string | undefined;
+    can_write: boolean;
+    resource_type: string | undefined;
+    resourceTypeInfo: ResourceType | undefined;
+    resourceSchema: Schema | undefined;
+    loadingSchema: boolean;
+    resourceToEdit: Resource | undefined;
+    onLoadResourceType?: () => void;
+}
+declare const ResourceForm: import("svelte").Component<Props, {}, "path" | "description" | "args" | "labels" | "wsSpecific" | "isValid" | "viewJsonSchema" | "jsonError">;
+type ResourceForm = ReturnType<typeof ResourceForm>;
+export default ResourceForm;

package/package/components/RunsPage.svelte

@@ -644,6 +644,7 @@ let manualSelectionMode = $state();
 				})}
 				bind:value={filters.val}
 				placeholder="Filter runs..."
+				autofocus
 			/>
 		</div>
 

package/package/components/ScriptBuilder.svelte

@@ -1874,6 +1874,7 @@ async function loadWorkerTags() {
 			bind:code={script.content}
 			lang={script.language}
 			kind={script.kind}
+			autoKind={script.auto_kind}
 			{template}
 			tag={script.tag}
 			lastSavedCode={savedScript?.draft?.content}

package/package/components/ScriptEditor.svelte

@@ -57,7 +57,7 @@ import { resource, watch } from 'runed';
 import { createScriptRecording } from './recording/scriptRecording.svelte';
 import { setActiveRecording } from './recording/flowRecording.svelte';
 import DropdownV2 from './DropdownV2.svelte';
-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(), modules = $bindable(undefined), editorBarRight, enablePreprocessorSnippet = false } = $props();
+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, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), modules = $bindable(undefined), editorBarRight, enablePreprocessorSnippet = false } = $props();
 let initialArgs = structuredClone($state.snapshot(args));
 let jsonView = $state(false);
 let schemaHeight = $state(0);
@@ -986,7 +986,12 @@ function collabUrl() {
     return (`${url}?collab=1&workspace=${encodeURIComponent($workspaceStore ?? '')}&lang=${encodeURIComponent(lang ?? '')}` +
         (edit ? '' : `&path=${path}`));
 }
-let isWac = $derived(code && lang ? isWorkflowAsCode(code, lang) : false);
+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');
@@ -1049,7 +1054,8 @@ $effect(() => {
         path,
         lastSavedCode,
         lastDeployedCode,
-        diffMode
+        diffMode,
+        workflowAsCode: workflowAsCodeAiContext
     };
     untrack(() => {
         aiChatManager.scriptEditorOptions = options;
@@ -1818,6 +1824,7 @@ $effect(() => {
 			automaticLayout={true}
 			{fixedOverflowWidgets}
 			{args}
+			workflowAsCode={workflowAsCodeAiContext}
 			{enablePreprocessorSnippet}
 			preparedAssetsSqlQueries={preparedSqlQueries.current}
 			customTag={tag}

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

@@ -11,6 +11,7 @@ interface Props {
     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>;

package/package/components/TaggedTextInput.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">let { tags, value = $bindable(''), placeholder = '', highlights, onCurrentTagChange, onTextSegmentAtCursorChange, class: className = '' } = $props();
+<script lang="ts">let { tags, value = $bindable(''), placeholder = '', highlights, onCurrentTagChange, onTextSegmentAtCursorChange, onKeyDown, autofocus, class: className = '' } = $props();
 let contentEditableDiv;
 let isUpdating = false;
 $effect(() => {
@@ -270,6 +270,7 @@ function handleKeyup(e) {
     updateCurrentTag(cursorPos);
 }
 function handleKeyDown(e) {
+    onKeyDown?.(e);
     if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter')
         return;
     const cursorPos = getCursorPosition();
@@ -427,6 +428,7 @@ export function focusAtEnd() {
 }
 </script>
 
+<!-- svelte-ignore a11y_autofocus -->
 <div
 	bind:this={contentEditableDiv}
 	contenteditable="true"
@@ -441,6 +443,7 @@ export function focusAtEnd() {
 	role="textbox"
 	tabindex="0"
 	spellcheck="false"
+	{autofocus}
 ></div>
 
 <style>

package/package/components/TaggedTextInput.svelte.d.ts

@@ -18,6 +18,8 @@ type $$ComponentProps = {
         start: number;
         end: number;
     }) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    autofocus?: boolean;
     class?: string;
 };
 declare const TaggedTextInput: import("svelte").Component<$$ComponentProps, {