windmill-components 1.35.42 → 1.36.0

package/components/propertyPicker/ObjectViewer.svelte

@@ -1,5 +1,6 @@
 <script>import { truncate } from '../../utils';
 import { createEventDispatcher } from 'svelte';
+import { NEVER_TESTED_THIS_FAR } from '../flows/flowStateUtils';
 import { getTypeAsString } from '../flows/utils';
 import { computeKey } from './utils';
 import WarningMessage from './WarningMessage.svelte';
@@ -9,6 +10,7 @@ export let isLast = true;
 export let currentPath = '';
 export let pureViewer = false;
 export let collapsed = level == 3 || Array.isArray(json);
+export let rawKey = false;
 const collapsedSymbol = '...';
 let keys;
 let isArray;
@@ -25,21 +27,21 @@ function collapse() {
 }
 const dispatch = createEventDispatcher();
 function selectProp(key) {
-    dispatch('select', computeKey(key, isArray, currentPath));
+    dispatch('select', rawKey ? key : computeKey(key, isArray, currentPath));
 }
 </script>
 
 {#if keys.length > 0}
 	<span class:hidden={collapsed}>
-		{#if level != 0}<span class="cursor-pointer hover:bg-slate-200 px-1 rounded" on:click={collapse}
-				>(-)</span
-			>{/if}
+		{#if level != 0}
+			<span class="cursor-pointer hover:bg-gray-200 px-1 rounded" on:click={collapse}> (-) </span>
+		{/if}
 		<ul class="w-full">
 			{#each keys as key, index}
 				<li class="pt-1">
-					<button on:click={() => selectProp(key)} class="key rounded px-1 hover:bg-sky-100"
-						>{!isArray ? key : index}:</button
-					>
+					<button on:click={() => selectProp(key)} class="key rounded px-1 hover:bg-blue-100">
+						{!isArray ? key : index}:
+					</button>
 
 					{#if getTypeAsString(json[key]) === 'object'}
 						<svelte:self
@@ -52,11 +54,13 @@ function selectProp(key) {
 						/>
 					{:else}
 						<button
-							class="val rounded px-1 hover:bg-sky-100 {getTypeAsString(json[key])}"
+							class="val rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
 							on:click={() => selectProp(key)}
 						>
-							{#if json[key] === undefined}
+							{#if json[key] === NEVER_TESTED_THIS_FAR}
 								<WarningMessage />
+							{:else if json[key] == undefined}
+								<span>undefined</span>
 							{:else}
 								<span>{truncate(JSON.stringify(json[key]), 40)}</span>
 							{/if}
@@ -66,7 +70,7 @@ function selectProp(key) {
 			{/each}
 		</ul>
 	</span>
-	<span class="cursor-pointer hover:bg-slate-200" class:hidden={!collapsed} on:click={collapse}>
+	<span class="cursor-pointer hover:bg-gray-200" class:hidden={!collapsed} on:click={collapse}>
 		{openBracket}{collapsedSymbol}{closeBracket}
 	</span>
 	{#if !isLast && collapsed}
@@ -83,6 +87,8 @@ function selectProp(key) {
 		border-left: 1px dotted lightgray;
 		--tw-text-opacity: 1;
 		color: rgb(0 0 0 / var(--tw-text-opacity));
+		font-size: 0.875rem;
+		line-height: 1.25rem;
 	}
 
 	.val {
@@ -99,7 +105,7 @@ function selectProp(key) {
 }
 	.val.string {
 		--tw-text-opacity: 1;
-		color: rgb(101 163 13 / var(--tw-text-opacity));
+		color: rgb(5 122 85 / var(--tw-text-opacity));
 }
 	.val.number {
 		--tw-text-opacity: 1;
@@ -107,5 +113,5 @@ function selectProp(key) {
 }
 	.val.boolean {
 		--tw-text-opacity: 1;
-		color: rgb(8 145 178 / var(--tw-text-opacity));
+		color: rgb(28 100 242 / var(--tw-text-opacity));
 }</style>

package/components/propertyPicker/ObjectViewer.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         currentPath?: string | undefined;
         pureViewer?: boolean | undefined;
         collapsed?: boolean | undefined;
+        rawKey?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/components/propertyPicker/PropPicker.svelte

@@ -1,22 +1,119 @@
-<script>import ObjectViewer from './ObjectViewer.svelte';
+<script>import { ResourceService, VariableService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import { Button } from '../common';
+import { createEventDispatcher } from 'svelte';
+import ObjectViewer from './ObjectViewer.svelte';
 import { keepByKey } from './utils';
 export let pickableProperties = {};
+let variables = {};
+let resources = {};
+let displayVariable = false;
+let displayResources = false;
+const dispatch = createEventDispatcher();
 const EMPTY_STRING = '';
 let search = '';
+const { propPickerConfig, clearFocus } = getContext('PropPickerWrapper');
 $: propsFiltered =
     search === EMPTY_STRING ? pickableProperties : keepByKey(pickableProperties, search);
+async function loadVariables() {
+    variables = Object.fromEntries((await VariableService.listVariable({
+        workspace: $workspaceStore ?? ''
+    })).map((variable) => [variable.path, variable.is_secret ? '***' : variable.value ?? '']));
+}
+async function loadResources() {
+    resources = Object.fromEntries((await ResourceService.listResource({
+        workspace: $workspaceStore ?? ''
+    })).map((resource) => [resource.path, resource.description ?? '']));
+}
 </script>
 
-<div
-	class="relative p-3  bg-white rounded-lg border border-gray-200 shadow-md max-h-max overflow-y-scroll"
->
-	<div class="overflow-y-auto max-h-96">
-		<input
-			type="text"
-			bind:value={search}
-			class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block p-2 mb-2"
-			placeholder="Search prop..."
-		/>
+<div class="px-2 pt-2">
+	<input
+		type="text"
+		bind:value={search}
+		class="bg-gray-50 mt-1 border border-gray-300 text-gray-900 text-sm rounded-lg block px-2 mb-2 w-full"
+		placeholder="Search prop..."
+	/>
+	<div class="flex justify-between items-center space-x-1">
+		<span class="font-bold text-sm">Step Context</span>
+		<div class="flex space-x-2 items-center">
+			{#if $propPickerConfig}
+				<span
+					class="flex items-center bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded dark:bg-green-200 dark:text-green-900"
+				>
+					{`Selected: ${$propPickerConfig?.propName}`}
+				</span>
+				<span
+					class="flex items-center bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded dark:bg-green-200 dark:text-green-900"
+				>
+					{`Mode: ${$propPickerConfig?.insertionMode}`}
+				</span>
+				<button
+					class="border px-2 py-1 text-xs rounded-md flex items-center hover:bg-gray-50 hover:text-gray-900"
+					on:click={() => clearFocus()}
+				>
+					<Icon data={faClose} class="mr-2" scale={0.8} />
+					Deselect
+				</button>
+			{/if}
+		</div>
+	</div>
+	<div class="overflow-y-auto mb-2">
 		<ObjectViewer json={propsFiltered} on:select />
 	</div>
+	<span class="font-bold text-sm">Variables </span>
+	<div class="overflow-y-auto mb-2">
+		{#if displayVariable}
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					displayVariable = false
+				}}>(-)</Button
+			>
+			<ObjectViewer
+				rawKey={true}
+				json={variables}
+				on:select={(e) => dispatch('select', `variable('${e.detail}')`)}
+			/>
+		{:else}
+			<Button
+				color="light"
+				size="xs"
+				on:click={async () => {
+					await loadVariables()
+					displayVariable = true
+				}}>{'{...}'}</Button
+			>
+		{/if}
+	</div>
+	<span class="font-bold text-sm">Resources</span>
+	<div class="overflow-y-auto mb-2">
+		{#if displayResources}
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					displayResources = false
+				}}>(-)</Button
+			>
+			<ObjectViewer
+				rawKey={true}
+				json={resources}
+				on:select={(e) => dispatch('select', `resource('${e.detail}')`)}
+			/>
+		{:else}
+			<Button
+				color="light"
+				size="xs"
+				on:click={async () => {
+					await loadResources()
+					displayResources = true
+				}}>{'{...}'}</Button
+			>
+		{/if}
+	</div>
 </div>

package/components/propertyPicker/WarningMessage.svelte

@@ -1,16 +1,3 @@
-<div class="flex px-4 pt-1 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
-	<svg
-		class="flex-shrink-0 w-5 h-5 text-yellow-700 dark:text-yellow-800"
-		fill="currentColor"
-		viewBox="0 0 20 20"
-		xmlns="http://www.w3.org/2000/svg"
-		><path
-			fill-rule="evenodd"
-			d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-			clip-rule="evenodd"
-		/></svg
-	>
-	<div class="ml-3 text-sm font-medium text-yellow-700 dark:text-yellow-800">
-		Previous results are not available unless a preview is run on the previous step.
-	</div>
+<div class="flex px-2 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
+	<div class="text-sm font-medium text-yellow-700 dark:text-yellow-800">Require testing flow</div>
 </div>

package/components/script_editor/LogPanel.svelte

@@ -11,8 +11,11 @@ import DisplayResult from '../DisplayResult.svelte';
 import TableCustom from '../TableCustom.svelte';
 import Drawer from '../common/drawer/Drawer.svelte';
 import { Highlight } from 'svelte-highlight';
-import { json, python, typescript } from 'svelte-highlight/languages';
+import { json } from 'svelte-highlight/languages';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import HighlightCode from '../HighlightCode.svelte';
+import { VSplitPane } from 'svelte-split-pane';
+import LogViewer from '../LogViewer.svelte';
 export let path;
 export let lang;
 export let previewIsLoading = false;
@@ -22,6 +25,9 @@ export let lastSave;
 let selectedTab = 'logs';
 let drawerOpen = false;
 let drawerContent = undefined;
+export function setFocusToLogs() {
+    selectedTab = 'logs';
+}
 function openDrawer(newContent) {
     drawerContent = newContent;
     drawerOpen = true;
@@ -39,134 +45,117 @@ function closeDrawer() {
 			<pre class="overflow-x-auto break-all relative h-full m-2 text-xs bg-white shadow-inner p-2">
 				{drawerContent?.content}
 			</pre>
-		{:else if drawerContent?.mode === 'deno'}
-			<Highlight language={typescript} code={drawerContent?.content} />
-		{:else if drawerContent?.mode === 'python3'}
-			<Highlight language={python} code={drawerContent?.content} />
+		{:else if drawerContent?.mode === 'deno' || drawerContent?.mode === 'python3' || drawerContent?.mode === 'go'}
+			<HighlightCode language={drawerContent?.mode} code={drawerContent?.content} />
 		{/if}
 	</DrawerContent>
 </Drawer>
 
 <Tabs bind:selected={selectedTab}>
-	<Tab value="logs"><span class="text-xs">Logs</span></Tab>
-	<Tab value="results"><span class="text-xs">Results</span></Tab>
+	<Tab value="logs"><span class="text-xs">Logs/Result</span></Tab>
 	<Tab value="history"><span class="text-xs">History</span></Tab>
 	<Tab value="last_save"><span class="text-xs">Last save</span></Tab>
 
 	<svelte:fragment slot="content">
-		<div class="px-4">
-			<TabContent value="logs">
-				<pre class="whitespace-pre-wrap break-all relative h-full bg-gray-50 text-xs p-2">
-          {#if previewJob && previewJob.logs}
-						{previewJob.logs}
-					{:else if previewIsLoading}
-						Starting preview ...
-					{:else}
-						No preview is available yet
-					{/if}
-        </pre>
-			</TabContent>
-			<TabContent value="results">
-				<pre class="overflow-x-auto break-all relative h-full">
-          {#if previewJob && 'result' in previewJob && previewJob.result}
-						<DisplayResult result={previewJob.result} />
-					{:else if previewIsLoading}
-						Running...
-					{:else}
-						No output is available yet
-					{/if}
+		<TabContent value="logs" class="h-full w-full relative">
+			<VSplitPane topPanelSize="50%" downPanelSize="50%">
+				<top slot="top">
+					<LogViewer content={previewJob?.logs} isLoading={previewIsLoading} />
+				</top>
+				<down slot="down">
+					<pre
+						class="overflow-x-auto break-all relative h-full p-2 text-sm">{#if previewJob && 'result' in previewJob && previewJob.result}<DisplayResult
+								result={previewJob.result}
+							/>
+						{:else if previewIsLoading}Waiting for Result...
+						{:else}Test to see the result here
+						{/if}
         </pre>
-			</TabContent>
-			<TabContent value="history">
-				<TableCustom>
-					<tr slot="header-row">
-						<th class="text-xs">Id</th>
-						<th class="text-xs">Created at</th>
-						<th class="text-xs">Success</th>
-						<th class="text-xs">Result</th>
-						<th class="text-xs">Code</th>
-						<th class="text-xs">Logs</th>
-					</tr>
-					<tbody slot="body">
-						{#each pastPreviews as { id, created_at, success, result }}
-							<tr class="">
-								<td class="text-xs">
-									<a class="pr-3" href="/run/{id}" target="_blank">{id.substring(30)}</a>
-								</td>
-								<td class="text-xs">{displayDate(created_at)}</td>
-								<td class="text-xs">
-									{#if success}
-										<Icon class="text-green-600" data={check} scale={0.6} />
-									{:else}
-										<Icon class="text-red-700" data={faTimes} scale={0.6} />
-									{/if}
-								</td>
-								<td class="text-xs">
-									<a
-										href="#result"
-										class="text-xs"
-										on:click={() => {
-											openDrawer({ mode: 'json', content: result, title: 'Result' })
-										}}
-									>
-										{JSON.stringify(result).substring(0, 30)}...
-									</a>
-								</td>
-								<td class="text-xs">
-									<a
-										href="#code"
-										class="text-xs"
-										on:click={async () => {
-											const code = (
-												await JobService.getCompletedJob({
-													workspace: $workspaceStore ?? 'NO_W',
-													id
-												})
-											).raw_code
+				</down>
+			</VSplitPane>
+		</TabContent>
+		<TabContent value="history" class="p-2">
+			<TableCustom>
+				<tr slot="header-row">
+					<th class="text-xs">Id</th>
+					<th class="text-xs">Created at</th>
+					<th class="text-xs">Success</th>
+					<th class="text-xs">Result</th>
+					<th class="text-xs">Code</th>
+					<th class="text-xs">Logs</th>
+				</tr>
+				<tbody slot="body">
+					{#each pastPreviews as { id, created_at, success, result }}
+						<tr class="">
+							<td class="text-xs">
+								<a class="pr-3" href="/run/{id}" target="_blank">{id.substring(30)}</a>
+							</td>
+							<td class="text-xs">{displayDate(created_at)}</td>
+							<td class="text-xs">
+								{#if success}
+									<Icon class="text-green-600" data={check} scale={0.6} />
+								{:else}
+									<Icon class="text-red-700" data={faTimes} scale={0.6} />
+								{/if}
+							</td>
+							<td class="text-xs">
+								<a
+									href="#result"
+									class="text-xs"
+									on:click={() => {
+										openDrawer({ mode: 'json', content: result, title: 'Result' })
+									}}
+								>
+									{JSON.stringify(result).substring(0, 30)}...
+								</a>
+							</td>
+							<td class="text-xs">
+								<a
+									href="#code"
+									class="text-xs"
+									on:click={async () => {
+										const code = (
+											await JobService.getCompletedJob({
+												workspace: $workspaceStore ?? 'NO_W',
+												id
+											})
+										).raw_code
 
-											openDrawer({ mode: lang, content: String(code), title: `Code ${lang}` })
-										}}
-									>
-										View code
-									</a>
-								</td>
-								<td>
-									<a
-										href="#logs"
-										class="text-xs"
-										on:click={async () => {
-											const logs = (
-												await JobService.getCompletedJob({
-													workspace: $workspaceStore ?? 'NO_W',
-													id
-												})
-											).logs
-											openDrawer({ mode: 'plain', content: String(logs), title: `Code ${lang}` })
-										}}
-									>
-										View logs
-									</a>
-								</td>
-							</tr>
-						{/each}
-					</tbody>
-				</TableCustom>
-			</TabContent>
-			<TabContent value="last_save">
-				{#if lastSave}
-					<a
-						href="#last_save"
-						class="text-xs"
-						on:click={() => {
-							openDrawer({ mode: lang, content: String(lastSave), title: `Code ${lang}` })
-						}}
-					>
-						View last local save for path {path}
-					</a>
-				{:else}
-					No local save
-				{/if}
-			</TabContent>
-		</div>
+										openDrawer({ mode: lang, content: String(code), title: `Code ${lang}` })
+									}}
+								>
+									View code
+								</a>
+							</td>
+							<td>
+								<a
+									href="#logs"
+									class="text-xs"
+									on:click={async () => {
+										const logs = (
+											await JobService.getCompletedJob({
+												workspace: $workspaceStore ?? 'NO_W',
+												id
+											})
+										).logs
+										openDrawer({ mode: 'plain', content: String(logs), title: `Code ${lang}` })
+									}}
+								>
+									View logs
+								</a>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</TableCustom>
+		</TabContent>
+		<TabContent value="last_save" class="p-2">
+			{#if lastSave}
+				<h2>last local save for path {path}</h2>
+				<HighlightCode language={lang} code={lastSave} />
+			{:else}
+				No local save
+			{/if}
+		</TabContent>
 	</svelte:fragment>
 </Tabs>

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         previewJob: Job | undefined;
         pastPreviews?: CompletedJob[] | undefined;
         lastSave: string | null;
+        setFocusToLogs?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,5 +19,6 @@ export declare type LogPanelProps = typeof __propDef.props;
 export declare type LogPanelEvents = typeof __propDef.events;
 export declare type LogPanelSlots = typeof __propDef.slots;
 export default class LogPanel extends SvelteComponentTyped<LogPanelProps, LogPanelEvents, LogPanelSlots> {
+    get setFocusToLogs(): () => void;
 }
 export {};

package/components/sidebar/SidebarContent.svelte

@@ -12,7 +12,6 @@ const mainMenuLinks = [
     { label: 'Resources', href: '/resources', icon: faCubes }
 ];
 $: secondaryMenuLinks = [
-    { label: 'Workers', href: '/workers', icon: faRobot },
     { label: 'Groups', href: '/groups', icon: faUsersCog },
     { label: 'Audit Logs', href: '/audit_logs', icon: faEye },
     {
@@ -20,7 +19,8 @@ $: secondaryMenuLinks = [
         href: '/workspace_settings',
         icon: faCog,
         disabled: !$userStore?.is_admin
-    }
+    },
+    { label: 'Workers', href: '/workers', icon: faRobot }
 ];
 const thirdMenuLinks = [
     { label: 'Documentation', href: 'https://docs.windmill.dev/docs/intro/', icon: faBookOpen },

package/editorUtils.d.ts

@@ -7,6 +7,9 @@ export declare function editorConfig(model: any, code: string, lang: string, aut
     fixedOverflowWidgets: boolean;
     autoDetectHighContrast: boolean;
     lineNumbersMinChars: number;
+    scrollbar: {
+        alwaysConsumeMouseWheel: boolean;
+    };
     lineNumbers: (ln: any) => string;
     folding: boolean;
     scrollBeyondLastLine: boolean;

package/editorUtils.js

@@ -10,6 +10,7 @@ export function editorConfig(model, code, lang, automaticLayout) {
         //lineNumbers: 'off',
         //lineDecorationsWidth: 0,
         lineNumbersMinChars: 4,
+        scrollbar: { alwaysConsumeMouseWheel: false },
         lineNumbers: (ln) => '<span class="pr-4 text-gray-400">' + ln + '</span>',
         folding: false,
         scrollBeyondLastLine: false,

package/gen/core/OpenAPI.js

@@ -1,6 +1,6 @@
 export const OpenAPI = {
     BASE: '/api',
-    VERSION: '1.35.0',
+    VERSION: '1.36.0',
     WITH_CREDENTIALS: false,
     CREDENTIALS: 'include',
     TOKEN: undefined,

package/gen/index.d.ts

@@ -42,6 +42,7 @@ export { QueuedJob } from './models/QueuedJob';
 export { RawScript } from './models/RawScript';
 export type { Resource } from './models/Resource';
 export type { ResourceType } from './models/ResourceType';
+export type { Retry } from './models/Retry';
 export type { Schedule } from './models/Schedule';
 export { Script } from './models/Script';
 export type { ScriptArgs } from './models/ScriptArgs';

package/gen/models/CompletedJob.d.ts

@@ -45,6 +45,7 @@ export declare namespace CompletedJob {
     }
     enum language {
         PYTHON3 = "python3",
-        DENO = "deno"
+        DENO = "deno",
+        GO = "go"
     }
 }

package/gen/models/CompletedJob.js

@@ -16,5 +16,6 @@ export var CompletedJob;
     (function (language) {
         language["PYTHON3"] = "python3";
         language["DENO"] = "deno";
+        language["GO"] = "go";
     })(language = CompletedJob.language || (CompletedJob.language = {}));
 })(CompletedJob || (CompletedJob = {}));

package/gen/models/FlowModule.d.ts

@@ -1,5 +1,6 @@
 import type { FlowModuleValue } from './FlowModuleValue';
 import type { InputTransform } from './InputTransform';
+import type { Retry } from './Retry';
 export declare type FlowModule = {
     input_transforms: Record<string, InputTransform>;
     value: FlowModuleValue;
@@ -8,4 +9,6 @@ export declare type FlowModule = {
         expr: string;
     };
     summary?: string;
+    suspend?: number;
+    retry?: Retry;
 };

package/gen/models/FlowStatus.d.ts

@@ -3,4 +3,7 @@ export declare type FlowStatus = {
     step: number;
     modules: Array<FlowStatusModule>;
     failure_module: FlowStatusModule;
+    retry?: {
+        fail_count?: number;
+    };
 };

package/gen/models/FlowStatusModule.d.ts

@@ -1,7 +1,7 @@
 export declare type FlowStatusModule = {
     type: FlowStatusModule.type;
     job?: string;
-    event?: string;
+    count?: number;
     iterator?: {
         index?: number;
         itered?: Array<any>;

package/gen/models/Preview.d.ts

@@ -8,6 +8,7 @@ export declare type Preview = {
 export declare namespace Preview {
     enum language {
         PYTHON3 = "python3",
-        DENO = "deno"
+        DENO = "deno",
+        GO = "go"
     }
 }

package/gen/models/Preview.js

@@ -7,5 +7,6 @@ export var Preview;
     (function (language) {
         language["PYTHON3"] = "python3";
         language["DENO"] = "deno";
+        language["GO"] = "go";
     })(language = Preview.language || (Preview.language = {}));
 })(Preview || (Preview = {}));