windmill-components 1.60.3 → 1.70.0

package/components/MoveDrawer.svelte

@@ -85,7 +85,7 @@ async function updatePath() {
 		<input
 			type="text"
 			bind:value={summary}
-			placeholder="A short summary displayed when it is listed"
+			placeholder="Short summary to be displayed when listed"
 			disabled={!own}
 		/>
 

package/components/Multiselect.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Multiselect extends SvelteComponentTyped<{
     value?: any[] | undefined;
     id?: string | undefined;
-    readonly?: boolean | undefined;
     placeholder?: string | undefined;
+    readonly?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,8 +20,8 @@ declare const __propDef: {
     props: {
         value?: any[] | undefined;
         id?: string | undefined;
-        readonly?: boolean | undefined;
         placeholder?: string | undefined;
+        readonly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ObjectResourceInput.svelte

@@ -24,7 +24,12 @@ async function loadSchema(format) {
     }
 }
 function resourceToValue() {
-    value = `$res:${path}`;
+    if (path) {
+        value = `$res:${path}`;
+    }
+    else {
+        value = undefined;
+    }
 }
 function isResource() {
     return isString(value) && value.length >= '$res:'.length;

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 {

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: {
@@ -55,7 +61,7 @@ function close() {
 		<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,7 +7,6 @@ import { Button } from './common';
 import Select from 'svelte-select';
 import AppConnect from './AppConnect.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
-import { truncate } from '../utils';
 const dispatch = createEventDispatcher();
 let resources = [];
 export let initialValue = undefined;

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,19 @@ export let autofocus = false;
 export let topButton = false;
 export let loading = false;
 export let noVariablePicker = false;
+export let viewCliRun = false;
 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 ${runnable?.kind} run ${runnable?.path} ${Object.entries(args)
+    .map(([k, v]) => `-i ${k}=${JSON.stringify(v)}`)
+    .join(' ')}`;
 </script>
 
 <div class="max-w-6xl">
@@ -138,7 +144,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 +173,22 @@ let invisible_to_owner;
 			{buttonText}
 		</Button>
 	{/if}
+
+	{#if viewCliRun}
+		<div class="my-10" />
+		<Button
+			color="light"
+			size="sm"
+			endIcon={{ icon: viewCliOptions ? faChevronUp : faChevronDown }}
+			on:click={() => (viewCliOptions = !viewCliOptions)}
+		>
+			Run it from the CLI
+		</Button>
+		{#if viewCliOptions}
+			<div transition:slide class="mt-2 px-4 pt-2">
+				<InlineCodeCopy content={cliCommand} />
+				<CliHelpBox />
+			</div>
+		{/if}
+	{/if}
 </div>

package/components/RunForm.svelte.d.ts

@@ -23,6 +23,7 @@ declare const __propDef: {
         topButton?: boolean | undefined;
         loading?: boolean | undefined;
         noVariablePicker?: boolean | undefined;
+        viewCliRun?: boolean | undefined;
         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>

package/components/SchemaForm.svelte

@@ -25,6 +25,7 @@ export let noVariablePicker = false;
 export let filter = undefined;
 export let noDynamicToggle = false;
 export let flexWrap = false;
+export let noDelete = false;
 let clazz = '';
 export { clazz as class };
 let inputCheck = {};
@@ -34,21 +35,30 @@ $: if (args == undefined || typeof args !== 'object') {
 }
 function removeExtraKey() {
     Object.keys(args ?? {}).forEach((key) => {
-        if (!Object.keys(schema?.properties ?? {}).includes(key)) {
+        if (!keys.includes(key)) {
             delete args[key];
             delete inputCheck[key];
         }
     });
 }
-$: schema?.properties && removeExtraKey();
 let pickForField;
 let itemPicker = undefined;
 let variableEditor = undefined;
+let keys = [];
+$: {
+    let lkeys = Object.keys(schema?.properties ?? {});
+    if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
+        keys = lkeys;
+        if (!noDelete) {
+            removeExtraKey();
+        }
+    }
+}
 </script>
 
 <div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 gap-y-2' : ''}">
-	{#if Object.keys(schema?.properties ?? {}).length > 0}
-		{#each Object.keys(schema?.properties ?? {}) as argName, i (argName)}
+	{#if keys.length > 0}
+		{#each keys as argName, i (argName)}
 			{#if !filter || filter.includes(argName)}
 				<div transition:slide|local>
 					{#if inputTransform}

package/components/SchemaForm.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
         filter?: string[] | undefined;
         noDynamicToggle?: boolean | undefined;
         flexWrap?: boolean | undefined;
+        noDelete?: boolean | undefined;
         class?: string | undefined;
     };
     events: {

package/components/ScriptBuilder.svelte

@@ -12,15 +12,15 @@ import ScriptSchema from './ScriptSchema.svelte';
 import CenteredPage from './CenteredPage.svelte';
 import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import { Button } from './common';
+import { Button, Kbd } from './common';
 import { faChevronDown, faChevronUp, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte';
-import Toggle from './Toggle.svelte';
 import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
 export let script;
 export let initialPath = '';
 export let template = 'script';
 export let initialArgs = {};
+export let lockedLanguage = false;
 const langs = [
     ['Typescript', Script.language.DENO],
     ['Python', Script.language.PYTHON3],
@@ -44,9 +44,12 @@ async function editScript() {
         $dirtyStore = false;
         localStorage.removeItem(script.path);
         script.schema = script.schema ?? emptySchema();
-        if (!script.schema) {
+        try {
             await inferArgs(script.language, script.content, script.schema);
         }
+        catch (error) {
+            sendUserToast(`Impossible to infer the schema. Assuming this is a script without main function`, true);
+        }
         const newHash = await ScriptService.createScript({
             workspace: $workspaceStore,
             requestBody: {
@@ -61,8 +64,9 @@ async function editScript() {
                 kind: script.kind
             }
         });
-        sendUserToast(`Success! New script version created with hash ${newHash}`);
-        goto(`/scripts/get/${newHash}`);
+        sendUserToast(`New script created at hash ${newHash}`);
+        history.replaceState(history.state, '', `/scripts/edit/${newHash}?step=2`);
+        goto(`/scripts/get/${newHash}?workspace_id=${$workspaceStore}`);
     }
     catch (error) {
         sendUserToast(`Impossible to save the script: ${error.body}`, true);
@@ -71,13 +75,25 @@ async function editScript() {
 async function changeStep(step) {
     if (step > 1) {
         script.schema = script.schema ?? emptySchema();
-        await inferArgs(script.language, script.content, script.schema);
+        try {
+            await inferArgs(script.language, script.content, script.schema);
+        }
+        catch (error) {
+            console.info('Impossible to infer the schema. Assuming this is a script without main function');
+        }
     }
     goto(`?step=${step}`);
 }
 $: kind = script.kind;
+function onKeyDown(event) {
+    if (event.key == 'Enter' && step == 1) {
+        changeStep(2);
+    }
+}
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
 {#if !$userStore?.operator}
 	<UnsavedConfirmationModal />
 	<div class="flex flex-col h-screen">
@@ -139,11 +155,11 @@ $: kind = script.kind;
 					<Button
 						size="sm"
 						variant={step == 1 ? 'contained' : 'border'}
-						btnClasses={step == 3 ? 'invisible' : ''}
+						btnClasses={step == 3 ? 'invisible' : 'inline-flex gap-2'}
 						disabled={step === 1 && pathError !== ''}
 						on:click={() => changeStep(step + 1)}
 					>
-						Next
+						Next {#if step == 1}<Kbd>Enter</Kbd>{/if}
 					</Button>
 					<Button
 						size="sm"
@@ -160,24 +176,30 @@ $: kind = script.kind;
 		<!-- metadata -->
 		{#if step === 1}
 			<CenteredPage>
-				<h2 class="border-b pb-1 mt-4 mb-2">Path</h2>
+				<h2 class="border-b pb-1 mt-8 mb-2">Path</h2>
 				<Path
 					bind:this={pathC}
 					bind:error={pathError}
 					bind:path={script.path}
 					{initialPath}
 					on:enter={() => changeStep(2)}
-					namePlaceholder="my_script"
+					namePlaceholder="script"
 					kind="script"
 				/>
-				<h2 class="border-b pb-1 mt-8 mb-4">Summary</h2>
+				<h2 class="border-b pb-1 mt-12 mb-4">Summary</h2>
 				<input
 					type="text"
 					bind:this={summaryC}
 					bind:value={script.summary}
-					placeholder="A short summary of the script displayed when the script is listed"
+					placeholder="Short summary to be displayed when listed"
 				/>
-				<h2 class="border-b pb-1 mt-8 mb-6">Language</h2>
+
+				<h2 class="border-b pb-1 mt-12 mb-6">Language</h2>
+				{#if lockedLanguage}
+					<div class="text-sm text-gray-600 italic mb-2">
+						As a forked script, the language '{script.language}' cannot be modified.
+					</div>
+				{/if}
 				<div class="flex flex-row gap-2 flex-wrap">
 					{#each langs as [label, lang]}
 						{@const isPicked = script.language == lang && template == 'script'}
@@ -191,8 +213,9 @@ $: kind = script.kind;
 								template = 'script'
 								initContent(lang, script.kind, template)
 							}}
+							disabled={lockedLanguage}
 						>
-							<LanguageIcon {lang} /><span class="ml-2">{label}</span>
+							<LanguageIcon {lang} /><span class="ml-2 py-4">{label}</span>
 						</Button>
 					{/each}
 					<Button
@@ -200,15 +223,16 @@ $: kind = script.kind;
 						variant="border"
 						color={template == 'pgsql' ? 'blue' : 'dark'}
 						btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+						disabled={lockedLanguage}
 						on:click={() => {
 							script.language = Script.language.DENO
 							template = 'pgsql'
 							initContent(script.language, script.kind, template)
 						}}
 					>
-						<LanguageIcon lang="pgsql" /><span class="ml-2">PostgreSQL</span>
+						<LanguageIcon lang="pgsql" /><span class="ml-2 py-4">PostgreSQL</span>
 					</Button>
-					<Button
+					<!-- <Button
 						size="sm"
 						variant="border"
 						color={template == 'mysql' ? 'blue' : 'dark'}
@@ -219,11 +243,10 @@ $: kind = script.kind;
 							initContent(script.language, script.kind, template)
 						}}
 					>
-						<LanguageIcon lang="mysql" /><span class="ml-2">MySQL</span>
-					</Button>
+						<LanguageIcon lang="mysql" /><span class="ml-2 py-4">MySQL</span>
+					</Button> -->
 				</div>
-				<h2 class="border-b pb-1 mt-8 mb-4">Advanced</h2>
-				<div class="mb-4">
+				<div class="mt-16 mb-4">
 					<Button
 						color="light"
 						size="sm"
@@ -273,12 +296,12 @@ $: kind = script.kind;
 						/>
 					</div>
 				{/if}
-				<div class="ml-3">
+				<!-- <div class="ml-3">
 					<Toggle
 						bind:checked={script.is_template}
 						options={{ right: 'Save as a workspace template' }}
 					/>
-				</div>
+				</div> -->
 			</CenteredPage>
 		{:else if step === 2}
 			<ScriptEditor

package/components/ScriptBuilder.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         initialPath?: string | undefined;
         template?: "script" | "pgsql" | "mysql" | undefined;
         initialArgs?: Record<string, any> | undefined;
+        lockedLanguage?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ScriptEditor.svelte

@@ -83,6 +83,7 @@ async function inferSchema(code) {
 }
 onMount(() => {
     inferSchema(code);
+    loadPastTests();
 });
 </script>
 

package/components/SharedBadge.svelte

@@ -1,6 +1,7 @@
 <script>import { userStore } from '../stores';
 import { Users } from 'lucide-svelte';
 import Badge from './common/badge/Badge.svelte';
+import Popover from './Popover.svelte';
 import Tooltip from './Tooltip.svelte';
 export let extraPerms = {};
 export let canWrite;
@@ -49,10 +50,9 @@ $: {
 
 {#if kind === 'read' || kind === 'write'}
 	<Badge capitalize color="blue" baseClass="border border-blue-200 flex gap-1 items-center">
-		<Users size={12} />
-		{kind}
-		{#if reason}
-			<Tooltip><span class="normal-case">{reason}</span></Tooltip>
-		{/if}
+		<Popover notClickable>
+			<Users size={12} />
+			<span slot="text">{kind == 'read' ? 'Shared & read-only' : 'Read & Write'} {reason}</span>
+		</Popover>
 	</Badge>
 {/if}

package/components/Slider.svelte

@@ -0,0 +1,14 @@
+<script>import { ChevronDown, ChevronUp } from 'lucide-svelte';
+import { slide } from 'svelte/transition';
+import Button from './common/button/Button.svelte';
+export let text;
+export let view = false;
+</script>
+
+<Button color="light" on:click={() => (view = !view)} variant="border"
+	>{text}
+	{#if !view}<ChevronDown />{:else}<ChevronUp />{/if}</Button
+>
+{#if view}
+	<div class="my-4 px-2" transition:slide><slot /></div>
+{/if}

package/components/Slider.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        text: string;
+        view?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SliderProps = typeof __propDef.props;
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+export default class Slider extends SvelteComponentTyped<SliderProps, SliderEvents, SliderSlots> {
+}
+export {};

package/components/StringTypeNarrowing.svelte

@@ -61,7 +61,6 @@ function computeKind() {
 		['None', 'none'],
 		['File (base64)', 'base64'],
 		['Enum', 'enum'],
-		['Resource Path', 'resource'],
 		['Format', 'format'],
 		['Pattern', 'pattern']
 	]}