windmill-components 1.309.7 → 1.352.0

package/package/components/schema/SchemaFormDND.svelte

@@ -0,0 +1,75 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { dragHandle } from '@windmill-labs/svelte-dnd-action';
+import SchemaForm from '../SchemaForm.svelte';
+import { GripVertical } from 'lucide-svelte';
+import { deepEqual } from 'fast-equals';
+export let dndType = undefined;
+export let schema;
+export let args = {};
+export let prettifyHeader = false;
+export let lightweightMode = false;
+export let onlyMaskPassword = false;
+export let disablePortal = false;
+export let disabled = false;
+const dispatch = createEventDispatcher();
+const flipDurationMs = 200;
+let items = computeItems();
+let dragDisabled = true;
+$: schema && dragDisabled && updateItems();
+function computeItems() {
+    return ((schema?.order ?? Object.keys(schema?.properties ?? {}) ?? []).map((key) => ({
+        id: key,
+        value: key
+    })) ?? []);
+}
+function updateItems() {
+    const newItems = computeItems();
+    if (!deepEqual(newItems, items)) {
+        items = newItems;
+    }
+}
+function handleConsider(e) {
+    dragDisabled = false;
+    const { items: newItems } = e.detail;
+    items = newItems;
+}
+function handleFinalize(e) {
+    const { items: newItems } = e.detail;
+    dragDisabled = true;
+    items = newItems;
+    dispatch('reorder', items.map((item) => item.value));
+}
+</script>
+
+<!-- {JSON.stringify(schema)}
+{dragDisabled} -->
+<!-- {JSON.stringify(items)} -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<SchemaForm
+	on:click
+	on:change
+	on:reorder
+	on:consider={handleConsider}
+	on:finalize={handleFinalize}
+	{lightweightMode}
+	{args}
+	{prettifyHeader}
+	{onlyMaskPassword}
+	{disablePortal}
+	{disabled}
+	bind:schema
+	dndConfig={{
+		items,
+		flipDurationMs,
+		dropTargetStyle: {},
+		type: dndType ?? 'top-level'
+	}}
+	{items}
+>
+	<svelte:fragment slot="actions">
+		<div class="w-4 h-8 cursor-move ml-2 handle" aria-label="drag-handle" use:dragHandle>
+			<GripVertical size={16} />
+		</div>
+	</svelte:fragment>
+</SchemaForm>

package/package/components/schema/SchemaFormDND.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { Schema } from '../../common';
+declare const __propDef: {
+    props: {
+        dndType?: string | undefined;
+        schema: Schema;
+        args?: Record<string, any> | undefined;
+        prettifyHeader?: boolean | undefined;
+        lightweightMode?: boolean | undefined;
+        onlyMaskPassword?: boolean | undefined;
+        disablePortal?: boolean | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+        change: CustomEvent<any>;
+        reorder: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SchemaFormDndProps = typeof __propDef.props;
+export type SchemaFormDndEvents = typeof __propDef.events;
+export type SchemaFormDndSlots = typeof __propDef.slots;
+export default class SchemaFormDnd extends SvelteComponent<SchemaFormDndProps, SchemaFormDndEvents, SchemaFormDndSlots> {
+}
+export {};

package/package/components/scriptEditor/LogPanel.svelte

@@ -16,6 +16,7 @@ import Cell from '../table/Cell.svelte';
 import DataTable from '../table/DataTable.svelte';
 import Head from '../table/Head.svelte';
 import WorkflowTimeline from '../WorkflowTimeline.svelte';
+import Tooltip from '../Tooltip.svelte';
 export let lang;
 export let previewIsLoading = false;
 export let previewJob;
@@ -23,6 +24,7 @@ export let pastPreviews = [];
 export let editor = undefined;
 export let diffEditor = undefined;
 export let args = undefined;
+export let workspace = undefined;
 let selectedTab = 'logs';
 let drawerOpen = false;
 let drawerContent = undefined;
@@ -43,9 +45,7 @@ function asWorkflowStatus(x) {
 
 <Drawer bind:open={drawerOpen} size="800px">
 	<DrawerContent title={drawerContent?.title} on:close={() => closeDrawer()}>
-		{#if drawerContent?.content == undefined}
-			<div class="p-2"> <Loader2 class="animate-spin" /> </div>
-		{:else if drawerContent?.mode === 'json'}
+		{#if drawerContent?.mode === 'json'}
 			<DisplayResult
 				workspaceId={previewJob?.workspace_id}
 				jobId={previewJob?.id}
@@ -56,7 +56,7 @@ function asWorkflowStatus(x) {
 				class="overflow-x-auto break-words relative h-full m-2 text-xs bg-surface shadow-inner p-2"
 				>{drawerContent?.content}
 			</pre>
-		{:else if drawerContent?.mode === 'deno' || drawerContent?.mode === 'python3' || drawerContent?.mode === 'go' || drawerContent?.mode === 'bash' || drawerContent?.mode === 'nativets'}
+		{:else if drawerContent?.mode}
 			<HighlightCode language={drawerContent?.mode} code={drawerContent?.content} />
 		{/if}
 	</DrawerContent>
@@ -95,31 +95,41 @@ function asWorkflowStatus(x) {
 					<Pane>
 						{#if previewJob != undefined && 'result' in previewJob}
 							<div class="relative w-full h-full p-2">
-								<DisplayResult
-									workspaceId={previewJob?.workspace_id}
-									jobId={previewJob?.id}
-									result={previewJob.result}
-								>
-									<svelte:fragment slot="copilot-fix">
-										{#if lang && editor && diffEditor && args && previewJob?.result && typeof previewJob?.result == 'object' && `error` in previewJob?.result && previewJob?.result.error}
-											<ScriptFix
-												error={JSON.stringify(previewJob.result.error)}
-												{lang}
-												{editor}
-												{diffEditor}
-												{args}
-											/>
-										{/if}
-									</svelte:fragment>
-								</DisplayResult>
+								<div class="relative">
+									<DisplayResult
+										workspaceId={previewJob?.workspace_id}
+										jobId={previewJob?.id}
+										result={previewJob.result}
+									>
+										<svelte:fragment slot="copilot-fix">
+											{#if lang && editor && diffEditor && args && previewJob?.result && typeof previewJob?.result == 'object' && `error` in previewJob?.result && previewJob?.result.error}
+												<ScriptFix
+													error={JSON.stringify(previewJob.result.error)}
+													{lang}
+													{editor}
+													{diffEditor}
+													{args}
+												/>
+											{/if}
+										</svelte:fragment>
+									</DisplayResult>
+								</div>
 							</div>
 						{:else}
-							<div class="text-sm text-tertiary p-2">
-								{#if previewIsLoading}
-									<Loader2 class="animate-spin" />
-								{:else}
-									Test to see the result here
-								{/if}
+							<div class="text-sm text-tertiary p-2 flex justify-between items-center">
+								<span>
+									{#if previewIsLoading}
+										<Loader2 class="animate-spin" />
+									{:else}
+										Test to see the result here
+									{/if}
+								</span>
+								<Tooltip
+									documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering"
+								>
+									The result renderer in Windmill supports rich display rendering, allowing you to
+									customize the display format of your results.
+								</Tooltip>
 							</div>
 						{/if}
 					</Pane>
@@ -143,8 +153,10 @@ function asWorkflowStatus(x) {
 						{#each pastPreviews as { id, created_at, success }}
 							<tr>
 								<Cell first>
-									<a class="pr-3" href="/run/{id}?workspace={$workspaceStore}" target="_blank"
-										>{id.substring(30)}</a
+									<a
+										class="pr-3"
+										href="/run/{id}?workspace={workspace ?? $workspaceStore}"
+										target="_blank">{id.substring(30)}</a
 									>
 								</Cell>
 								<Cell>{displayDate(created_at)}</Cell>
@@ -161,7 +173,7 @@ function asWorkflowStatus(x) {
 										on:click|preventDefault={() => {
 											openDrawer({ mode: 'json', content: undefined, title: 'Result' })
 											JobService.getCompletedJobResult({
-												workspace: $workspaceStore ?? 'NO_W',
+												workspace: workspace ?? $workspaceStore ?? 'NO_W',
 												id
 											}).then((res) => {
 												drawerContent && (drawerContent.content = res)
@@ -177,11 +189,10 @@ function asWorkflowStatus(x) {
 										on:click|preventDefault={async () => {
 											const code = (
 												await JobService.getCompletedJob({
-													workspace: $workspaceStore ?? 'NO_W',
+													workspace: workspace ?? $workspaceStore ?? 'NO_W',
 													id
 												})
 											).raw_code
-
 											openDrawer({
 												mode: lang ?? 'plain',
 												content: String(code),
@@ -197,7 +208,9 @@ function asWorkflowStatus(x) {
 										class="text-xs"
 										on:click|preventDefault={async () => {
 											const logs = await (
-												await fetch(OpenAPI.BASE + `/w/${$workspaceStore}/jobs_u/get_logs/${id}`)
+												await fetch(
+													OpenAPI.BASE + `/w/${workspace ?? $workspaceStore}/jobs_u/get_logs/${id}`
+												)
 											).text()
 											console.log(logs)
 											openDrawer({ mode: 'plain', content: String(logs), title: `Logs for ${id}` })

package/package/components/scriptEditor/LogPanel.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         editor?: Editor | undefined;
         diffEditor?: DiffEditor | undefined;
         args?: Record<string, any> | undefined;
+        workspace?: string | undefined;
         setFocusToLogs?: (() => void) | undefined;
     };
     events: {

package/package/components/scripts/CreateActionsScript.svelte

@@ -4,7 +4,7 @@ import Button from '../common/button/Button.svelte';
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
-	<Button size="sm" spacingSize="xl" startIcon={{ icon: Plus }} href="/scripts/add">
+	<Button size="sm" spacingSize="xl" color="marine" startIcon={{ icon: Plus }} href="/scripts/add">
 		Script <Code2 class="ml-1.5" size={18} />
 	</Button>
 </div>