windmill-components 1.60.4 → 1.75.0

package/components/Path.svelte

@@ -11,6 +11,7 @@ import { Icon } from 'svelte-awesome';
 import Tooltip from './Tooltip.svelte';
 import FolderEditor from './FolderEditor.svelte';
 import GroupEditor from './GroupEditor.svelte';
+import { random_adj } from './random_positive_adjetive';
 let meta = undefined;
 export let namePlaceholder = '';
 export let initialPath;
@@ -45,13 +46,21 @@ function handleKeyUp(event) {
 }
 export async function reset() {
     if (path == '' || path == 'u//') {
-        meta = { ownerKind: 'user', name: namePlaceholder, owner: '' };
+        meta = {
+            ownerKind: 'user',
+            name: random_adj() + '_' + namePlaceholder,
+            owner: ''
+        };
         meta.owner = $userStore.username.split('@')[0];
-        let i = 1;
-        while (await pathExists(metaToPath(meta), kind)) {
-            meta.name = `${namePlaceholder}_${i}`;
-            i += 1;
+        let newMeta = { ...meta };
+        while (await pathExists(metaToPath(newMeta), kind)) {
+            disabled = true;
+            error = 'finding an available name...';
+            newMeta.name = random_adj() + '_' + namePlaceholder;
         }
+        error = '';
+        disabled = false;
+        meta = newMeta;
         path = metaToPath(meta);
     }
     else {
@@ -234,15 +243,19 @@ async function addGroup() {
 			folderCreated = undefined
 		}}
 	>
-		<div class="flex flex-row">
-			<input class="mr-2" placeholder="New folder name" bind:value={newFolderName} />
-			<Button size="md" startIcon={{ icon: faPlus }} disabled={!newFolderName} on:click={addFolder}>
-				New&nbsp;folder
-			</Button>
-		</div>
-
-		{#if folderCreated}
-			<div class="mt-8" />
+		{#if !folderCreated}
+			<div class="flex flex-row">
+				<input class="mr-2" placeholder="New folder name" bind:value={newFolderName} />
+				<Button
+					size="md"
+					startIcon={{ icon: faPlus }}
+					disabled={!newFolderName}
+					on:click={addFolder}
+				>
+					New&nbsp;folder
+				</Button>
+			</div>
+		{:else}
 			<FolderEditor name={folderCreated} />
 		{/if}
 	</DrawerContent>
@@ -362,8 +375,8 @@ async function addGroup() {
 		{/if}
 	</div>
 
-	<div class="flex-row flex justify-between">
-		<div><span class="font-mono text-sm">{path}</span></div>
+	<div class="flex-row flex justify-between w-full">
+		<div><span class="font-mono text-sm break-all">{path}</span></div>
 		<div class="text-red-600 text-2xs">{error}</div>
 	</div>
 </div>

package/components/Popover.svelte

@@ -2,6 +2,7 @@
 export let placement = 'auto';
 export let notClickable = false;
 export let popupClass = '';
+export let disablePopup = false;
 export let disapperTimoout = 100;
 const [popperRef, popperContent] = createPopperActions({ placement });
 const betterPreventOverflow = (options) => ({
@@ -15,7 +16,12 @@ const betterPreventOverflow = (options) => ({
 const extraOpts = {
     modifiers: [
         betterPreventOverflow({ padding: 10 }),
-        { name: 'offset', options: { offset: [8, 8] } },
+        {
+            name: 'offset',
+            options: {
+                offset: [8, 8]
+            }
+        },
         {
             name: 'arrow',
             options: {
@@ -36,26 +42,15 @@ function close() {
 </script>
 
 {#if notClickable}
-	<span
-		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		class={$$props.class}
-	>
+	<span use:popperRef on:mouseenter={open} on:mouseleave={close} class={$$props.class}>
 		<slot />
 	</span>
 {:else}
-	<button
-		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		on:click
-		class={$$props.class}
-	>
+	<button use:popperRef on:mouseenter={open} on:mouseleave={close} on:click class={$$props.class}>
 		<slot />
 	</button>
 {/if}
-{#if showTooltip}
+{#if showTooltip && !disablePopup}
 	<div
 		use:popperContent={extraOpts}
 		on:mouseenter={open}

package/components/Popover.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         placement?: PopoverPlacement | undefined;
         notClickable?: boolean | undefined;
         popupClass?: string | undefined;
+        disablePopup?: boolean | undefined;
         disapperTimoout?: number | undefined;
     };
     events: {

package/components/Range.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Range extends SvelteComponentTyped<{
     value?: number | undefined;
     id?: null | undefined;
-    min?: number | undefined;
     max?: number | undefined;
+    min?: number | undefined;
     initialValue?: number | undefined;
 }, {
     pointerdown: PointerEvent;
@@ -22,8 +22,8 @@ declare const __propDef: {
     props: {
         value?: number | undefined;
         id?: null | undefined;
-        min?: number | undefined;
         max?: number | undefined;
+        min?: number | undefined;
         initialValue?: number | undefined;
     };
     events: {

package/components/ResourceEditor.svelte

@@ -10,6 +10,7 @@ import autosize from 'svelte-autosize';
 import SimpleEditor from './SimpleEditor.svelte';
 import { faSave } from '@fortawesome/free-solid-svg-icons';
 import SchemaForm from './SchemaForm.svelte';
+import Toggle from './Toggle.svelte';
 let path = '';
 let initialPath = '';
 let resourceToEdit;
@@ -29,6 +30,7 @@ export async function initEdit(p) {
     path = p;
     resourceToEdit = undefined;
     resourceSchema = undefined;
+    viewJsonSchema = false;
     loadingSchema = true;
     drawer.openDrawer?.();
     resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore, path: p });
@@ -98,6 +100,16 @@ function updateArgsFromLinkedVars() {
         args[k] = `$var:${path}`;
     });
 }
+let viewJsonSchema = false;
+function switchTab(asJson) {
+    viewJsonSchema = asJson;
+    if (asJson) {
+        rawCode = JSON.stringify(args, null, 2);
+    }
+    else {
+        parseJson();
+    }
+}
 </script>
 
 <Drawer bind:this={drawer} size="800px">
@@ -119,25 +131,25 @@ function updateArgsFromLinkedVars() {
 						disabled={!can_write}
 						bind:path
 						{initialPath}
-						namePlaceholder="my_resource"
+						namePlaceholder="resource"
 						kind="resource"
 					/>
 				</div>
-				<h3>Description <Required required={false} /> </h3>
-				<textarea
-					type="text"
-					disabled={!can_write}
-					use:autosize
-					bind:value={description}
-					placeholder={DESCRIPTION_PLACEHOLDER}
-				/>
-
-				<h3 class="mt-4">Value</h3>
+				<div class="flex w-full justify-between max-w-lg items-center mt-4">
+					<h3>Value</h3>
+					<Toggle
+						on:change={(e) => switchTab(e.detail)}
+						options={{
+							right: 'As JSON'
+						}}
+					/>
+				</div>
 				<div class="text-sm">
 					{#if loadingSchema}
 						<Skeleton layout={[[4]]} />
-					{:else if resourceSchema && resourceSchema?.properties}
+					{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
 						<SchemaForm
+							noDelete
 							disabled={!can_write}
 							compact
 							schema={resourceSchema}
@@ -147,10 +159,13 @@ function updateArgsFromLinkedVars() {
 					{:else if !can_write}
 						<input type="text" disabled value={rawCode} />
 					{:else}
-						<p class="italic text-gray-500 text-xs mb-4"
-							>No corresponding resource type found in your workspace for {selectedResourceType}.
-							Define the value in JSON directly</p
-						>
+						{#if !viewJsonSchema}
+							<p class="italic text-gray-500 text-xs mb-4"
+								>No corresponding resource type found in your workspace for {selectedResourceType}.
+								Define the value in JSON directly</p
+							>
+						{/if}
+
 						{#if !emptyString(jsonError)}<span
 								class="text-red-400 text-xs mb-1 flex flex-row-reverse">{jsonError}</span
 							>{:else}<div class="py-2" />{/if}
@@ -165,6 +180,14 @@ function updateArgsFromLinkedVars() {
 						</div>
 					{/if}
 				</div>
+				<h3 class="mt-4">Description <Required required={false} /> </h3>
+				<textarea
+					type="text"
+					disabled={!can_write}
+					use:autosize
+					bind:value={description}
+					placeholder={DESCRIPTION_PLACEHOLDER}
+				/>
 			</div>
 		</div>
 		<svelte:fragment slot="actions">

package/components/ResourcePicker.svelte

@@ -7,16 +7,30 @@ import { Button } from './common';
 import Select from 'svelte-select';
 import AppConnect from './AppConnect.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
-import { truncate } from '../utils';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 const dispatch = createEventDispatcher();
-let resources = [];
 export let initialValue = undefined;
 export let value = initialValue;
 export let resourceType = undefined;
+let valueSelect = initialValue || value
+    ? {
+        value: value ?? initialValue,
+        label: value ?? initialValue
+    }
+    : undefined;
+let collection = [valueSelect];
 async function loadResources(resourceType) {
-    const v = value;
-    resources = await ResourceService.listResource({ workspace: $workspaceStore, resourceType });
-    value = v;
+    const nc = (await ResourceService.listResource({
+        workspace: $workspaceStore,
+        resourceType
+    })).map((x) => ({
+        value: x.path,
+        label: x.path
+    }));
+    if (!nc.find((x) => x.value == value) && (initialValue || value)) {
+        nc.push({ value: value ?? initialValue, label: value ?? initialValue });
+    }
+    collection = nc;
 }
 $: {
     if ($workspaceStore) {
@@ -24,10 +38,6 @@ $: {
     }
 }
 $: dispatch('change', value);
-$: collection = resources.map((x) => ({
-    value: x.path,
-    label: x.path
-}));
 let appConnect;
 let resourceEditor;
 </script>
@@ -36,6 +46,7 @@ let resourceEditor;
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
 		value = e.detail
+		valueSelect = { value: e.detail, label: e.detail }
 	}}
 	newPageOAuth
 	bind:this={appConnect}
@@ -45,22 +56,29 @@ let resourceEditor;
 	bind:this={resourceEditor}
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
-		console.log(e)
 		if (e.detail) {
 			value = e.detail
+			valueSelect = { value: e.detail, label: e.detail }
 		}
 	}}
 />
 
 <div class="flex flex-row gap-x-1 w-full">
 	<Select
-		listAutoWidth={false}
-		--height="34px"
-		value={collection.find((x) => x.value == value)}
-		bind:justValue={value}
+		value={valueSelect}
+		on:change={(e) => {
+			value = e.detail.value
+			valueSelect = e.detail
+		}}
+		on:clear={() => {
+			value = undefined
+			valueSelect = undefined
+		}}
 		items={collection}
 		class="text-clip grow min-w-0"
-		placeholder="{resourceType} resource"
+		placeholder="{resourceType ?? 'any'} resource"
+		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+		containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 	/>
 	{#if value && value != ''}
 		<Button variant="border" size="xs" on:click={() => resourceEditor?.initEdit?.(value ?? '')}>

package/components/RunChart.svelte

@@ -16,7 +16,7 @@ $: data = {
             backgroundColor: '#f87171',
             label: 'Failed',
             data: failed?.map((job) => ({
-                x: job.created_at,
+                x: job.started_at,
                 y: job.duration_ms,
                 id: job.id,
                 path: job.script_path
@@ -27,7 +27,7 @@ $: data = {
             backgroundColor: '#4ade80',
             label: 'Successful',
             data: success?.map((job) => ({
-                x: job.created_at,
+                x: job.started_at,
                 y: job.duration_ms,
                 id: job.id,
                 path: job.script_path
@@ -40,7 +40,10 @@ const zoomOptions = {
         enabled: true,
         modifierKey: 'ctrl',
         onPanComplete: ({ chart }) => {
-            dispatch('zoom', { min: new Date(chart.scales.x.min), max: new Date(chart.scales.x.max) });
+            dispatch('zoom', {
+                min: addSeconds(new Date(chart.scales.x.min), -1),
+                max: addSeconds(new Date(chart.scales.x.max), 1)
+            });
         }
     },
     zoom: {
@@ -49,13 +52,28 @@ const zoomOptions = {
         },
         mode: 'x',
         onZoom: ({ chart }) => {
-            dispatch('zoom', { min: new Date(chart.scales.x.min), max: new Date(chart.scales.x.max) });
+            dispatch('zoom', {
+                min: addSeconds(new Date(chart.scales.x.min), -1),
+                max: addSeconds(new Date(chart.scales.x.max), 1)
+            });
         }
     }
 };
 function getPath(x) {
     return x.path;
 }
+$: minTime = getMinTime(jobs);
+function addSeconds(date, seconds) {
+    date.setTime(date.getTime() + seconds * 1000);
+    return date;
+}
+function getMinTime(jobs) {
+    return addSeconds(new Date(jobs?.[jobs?.length - 1]?.started_at ?? new Date().toString()), -15);
+}
+$: maxTime = getMaxTime(jobs);
+function getMaxTime(jobs) {
+    return addSeconds(new Date(jobs?.[0]?.started_at ?? new Date().toString()), 15);
+}
 </script>
 
 <Scatter
@@ -83,7 +101,8 @@ function getPath(x) {
 					display: false
 				},
 				type: 'time',
-				min: jobs?.[jobs?.length - 1]?.created_at ?? new Date().toString()
+				min: minTime,
+				max: maxTime
 			},
 			y: {
 				grid: {

package/components/RunForm.svelte

@@ -8,6 +8,8 @@ import SharedBadge from './SharedBadge.svelte';
 import Toggle from './Toggle.svelte';
 import { userStore } from '../stores';
 import Tooltip from './Tooltip.svelte';
+import CliHelpBox from './CliHelpBox.svelte';
+import InlineCodeCopy from './InlineCodeCopy.svelte';
 export let runnable;
 export let runAction;
 export let buttonText = 'Run';
@@ -17,15 +19,18 @@ export let autofocus = false;
 export let topButton = false;
 export let loading = false;
 export let noVariablePicker = false;
+export let viewCliRun = false;
+export let isFlow;
 export let args = decodeArgs($page.url.searchParams.get('args') ?? undefined);
 export function run() {
     runAction(scheduledForStr, args, invisible_to_owner);
 }
 export let isValid = true;
-// Run later
 let viewOptions = false;
+let viewCliOptions = false;
 let scheduledForStr;
 let invisible_to_owner;
+$: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '${JSON.stringify(args)}'`;
 </script>
 
 <div class="max-w-6xl">
@@ -104,7 +109,7 @@ let invisible_to_owner;
 					</Button>
 				</div>
 				{#if viewOptions}
-					<div transition:slide class="mt-6">
+					<div transition:slide|local class="mt-6">
 						<div class="border rounded-md p-3 pt-4">
 							<div class="flex flex-row items-end">
 								<div class="w-max md:w-2/3 mt-2 mb-1">
@@ -138,7 +143,7 @@ let invisible_to_owner;
 				<div class="flex items-center gap-1">
 					<Toggle
 						options={{
-							right: `run only visible to you`
+							right: `make run invisible to others`
 						}}
 						bind:checked={invisible_to_owner}
 					/>
@@ -167,4 +172,22 @@ let invisible_to_owner;
 			{buttonText}
 		</Button>
 	{/if}
+
+	{#if viewCliRun}
+		<div class="my-10" />
+		<Button
+			color="light"
+			size="xs"
+			endIcon={{ icon: viewCliOptions ? faChevronUp : faChevronDown }}
+			on:click={() => (viewCliOptions = !viewCliOptions)}
+		>
+			Run it from the CLI
+		</Button>
+		{#if viewCliOptions}
+			<div transition:slide|local class="mt-2 px-4 pt-2">
+				<InlineCodeCopy content={cliCommand} />
+				<CliHelpBox />
+			</div>
+		{/if}
+	{/if}
 </div>

package/components/RunForm.svelte.d.ts

@@ -23,6 +23,8 @@ declare const __propDef: {
         topButton?: boolean | undefined;
         loading?: boolean | undefined;
         noVariablePicker?: boolean | undefined;
+        viewCliRun?: boolean | undefined;
+        isFlow: boolean;
         args?: Record<string, any> | undefined;
         run?: (() => void) | undefined;
         isValid?: boolean | undefined;

package/components/ScheduleEditor.svelte

@@ -165,7 +165,7 @@ let drawer;
 					bind:error={pathError}
 					bind:path
 					{initialPath}
-					namePlaceholder={'my_schedule'}
+					namePlaceholder="schedule"
 					kind="schedule"
 				/>
 				<div class="mb-8" />

package/components/SchemaEditor.svelte

@@ -166,8 +166,8 @@ let error = '';
 			/>
 			<div class="ml-2">
 				<Tooltip>
-					Arguments can be edited either using the wizard, or by editing their json-schema
-					<a href="https://docs.windmill.dev/docs/reference/script_arguments_reference">docs</a>
+					Arguments can be edited either using the wizard, or by editing their JSON Schema, 
+					<a href="https://docs.windmill.dev/docs/reference/#script-parameters-to-json-schema">see docs</a>
 				</Tooltip>
 			</div>
 		</div>