windmill-components 1.86.0 → 1.87.0

package/README.md

@@ -0,0 +1,5 @@
+# Windmill frontend
+
+The windmill frontend written in Svelte + Tailwind CSS
+
+The frontend is under AGPL, see the LICENSE file at the root of this repo

package/{components → dist/components}/AppConnect.svelte

@@ -2,7 +2,12 @@
 const apiTokenApps = {
     airtable: {
         img: '/airtable_connect.png',
-        instructions: ['Click on the top-right avatar', 'Click on Account', 'Find "Api"']
+        instructions: [
+            'Click to <a href="https://airtable.com/create/tokens" target="_blank" rel=”noopener noreferrer”>https://airtable.com/create/tokens</a>',
+            'Click on "Create new token"',
+            'Set a name, specify the scopes or the access level and click on "Create token"',
+            'Copy the token'
+        ]
     },
     discord_webhook: {
         img: '/discord_webhook.png',
@@ -425,7 +430,7 @@ let filteredConnectsManual = [];
 				>
 			{/if}
 		{/if}
-		<div slot="actions">
+		<div slot="actions" class="flex gap-1">
 			{#if step > 1 && !no_back}
 				<Button variant="border" on:click={back}>Back</Button>
 			{/if}

package/{components → dist/components}/ArgInput.svelte

@@ -288,21 +288,23 @@ let itemsLimit = 50;
 							{/if}
 						{/key}
 					</div>
-					<Button
-						variant="border"
-						color="dark"
-						size="xs"
-						btnClasses="mt-1"
-						on:click={() => {
-							if (value == undefined || !Array.isArray(value)) {
-								value = []
-							}
-							value = value.concat('')
-						}}
-					>
-						<Icon data={faPlus} class="mr-2" />
-						Add item
-					</Button>
+					<div class="flex mt-2">
+						<Button
+							variant="border"
+							color="dark"
+							size="xs"
+							btnClasses="mt-1"
+							on:click={() => {
+								if (value == undefined || !Array.isArray(value)) {
+									value = []
+								}
+								value = value.concat('')
+							}}
+						>
+							<Icon data={faPlus} class="mr-2" />
+							Add item
+						</Button>
+					</div>
 				</div>
 			{:else if inputCat == 'resource-object'}
 				<ObjectResourceInput {format} bind:value />

package/{components → dist/components}/DisplayResult.svelte

@@ -9,6 +9,7 @@ import Portal from 'svelte-portal';
 export let result;
 export let requireHtmlApproval = false;
 export let filename = undefined;
+export let disableExpand = false;
 let resultKind;
 $: resultKind = inferResultKind(result);
 let forceJson = false;
@@ -84,10 +85,12 @@ let jsonViewer;
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
 				class="mb-2 w-full text-sm text-gray-700 relative"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
-				<div class="text-gray-500 text-sm absolute top-6 right-0">
-					<button on:click={jsonViewer.openDrawer}>Expand JSON</button>
-				</div></div
-			>{/if}{#if !forceJson && resultKind == 'table-col'}<div
+				{#if !disableExpand}
+					<div class="text-gray-500 text-xs absolute top-5 right-0">
+						<button on:click={jsonViewer.openDrawer}>Expand</button>
+					</div>
+				{/if}
+			</div>{/if}{#if !forceJson && resultKind == 'table-col'}<div
 				class="grid grid-flow-col-dense border border-gray-200 rounded-md"
 			>
 				{#each Object.keys(result) as col}
@@ -228,19 +231,21 @@ let jsonViewer;
 	{/if}
 </div>
 
-<Portal>
-	<Drawer bind:this={jsonViewer} size="900px">
-		<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
-			<svelte:fragment slot="actions">
-				<Button
-					on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
-					color="light"
-					size="xs"
-				>
-					<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
-				</Button>
-			</svelte:fragment>
-			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
-		</DrawerContent>
-	</Drawer>
-</Portal>
+{#if !disableExpand}
+	<Portal>
+		<Drawer bind:this={jsonViewer} size="900px">
+			<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
+				<svelte:fragment slot="actions">
+					<Button
+						on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
+						color="light"
+						size="xs"
+					>
+						<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+					</Button>
+				</svelte:fragment>
+				<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+			</DrawerContent>
+		</Drawer>
+	</Portal>
+{/if}

package/{components → dist/components}/DisplayResult.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         result: any;
         requireHtmlApproval?: boolean | undefined;
         filename?: string | undefined;
+        disableExpand?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/{components → dist/components}/Dropdown.svelte

@@ -4,12 +4,20 @@ import { MoreVertical } from 'lucide-svelte';
 import { Button, Menu } from './common';
 import { goto } from '$app/navigation';
 import { twMerge } from 'tailwind-merge';
-export let dropdownItems;
+export let dropdownItems = [];
 export let name = undefined;
 export let placement = 'bottom-start';
 export let btnClasses = '';
 $: buttonClass = twMerge('!border-0 bg-transparent !p-[6px]', btnClasses);
 const dispatch = createEventDispatcher();
+function computeDropdowns() {
+    if (typeof dropdownItems === 'function') {
+        return dropdownItems();
+    }
+    else {
+        return dropdownItems;
+    }
+}
 </script>
 
 <Menu {placement} let:close>
@@ -29,7 +37,7 @@ const dispatch = createEventDispatcher();
 		{/if}
 	</Button>
 	{#if dropdownItems}
-		{#each dropdownItems as item, i}
+		{#each computeDropdowns() as item, i}
 			{#if item.action}
 				<button
 					on:click|preventDefault|stopPropagation={(event) => {
@@ -83,8 +91,8 @@ const dispatch = createEventDispatcher();
 			{:else}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<span
-					class:bg-gray-50={item.disabled}
-					class="block text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
+					class:bg-gray-200={item.disabled}
+					class="block font-semibold text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"

package/{components → dist/components}/Dropdown.svelte.d.ts

@@ -3,7 +3,7 @@ import type { DropdownItem } from '../utils';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        dropdownItems: DropdownItem[];
+        dropdownItems?: DropdownItem[] | (() => DropdownItem[]) | undefined;
         name?: string | undefined;
         placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
         btnClasses?: string | undefined;

package/{components → dist/components}/Editor.svelte

@@ -416,7 +416,7 @@ async function closeWebsockets() {
 let widgets = document.getElementById('monaco-widgets-root') ?? undefined;
 async function loadMonaco() {
     const model = meditor.createModel(code, lang, mUri.parse(uri));
-    model.updateOptions(updateOptions);
+    model.updateOptions(lang == 'python' ? { tabSize: 4, insertSpaces: true } : updateOptions);
     editor = meditor.create(divEl, {
         ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
         overflowWidgetsDomNode: widgets,
@@ -462,7 +462,7 @@ async function loadMonaco() {
     };
 }
 export function addAction(id, label, callback, keybindings = []) {
-    editor.addAction({
+    editor?.addAction({
         id,
         label,
         keybindings,

package/{components → dist/components}/FlowBuilder.svelte

@@ -113,11 +113,11 @@ async function saveFlow(leave) {
         }
         loadingSave = false;
         if (leave) {
-            goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`);
+            goto(`/flows/get/${$flowStore.path}?workspace=${$workspaceStore}`);
         }
         else if (initialPath !== $flowStore.path) {
             initialPath = $flowStore.path;
-            goto(`/flows/edit/${$flowStore.path}?workspace_id=${$workspaceStore}`);
+            goto(`/flows/edit/${$flowStore.path}?workspace=${$workspaceStore}`);
         }
     }
     catch (err) {
@@ -335,6 +335,7 @@ if (initialPath != '') {
 				<FlowPreviewButtons />
 				<div class="center-center">
 					<Button
+						title="Ctrl/Cmd + S"
 						loading={loadingSave}
 						size="xs"
 						startIcon={{ icon: faSave }}

package/{components → dist/components}/FlowStatusViewer.svelte

@@ -124,8 +124,8 @@ $: isListJob = flowJobIds && Array.isArray(flowJobIds?.flowJobs);
 onDestroy(() => {
     timeout && clearTimeout(timeout);
 });
-async function loadOwner(path) {
-    is_owner = await isOwner(path, $userStore, workspaceId ?? $workspaceStore);
+function loadOwner(path) {
+    is_owner = isOwner(path, $userStore, workspaceId ?? $workspaceStore);
 }
 let selected = 'graph';
 let payload = '"a test payload in json"';

package/{components → dist/components}/JobArgs.svelte

@@ -2,9 +2,10 @@
 import { Skeleton } from './common';
 import TableCustom from './TableCustom.svelte';
 export let args;
+export let tableClass = '';
 </script>
 
-<TableCustom class="py-2">
+<TableCustom class="py-2 {tableClass}">
 	<tr slot="header-row">
 		<th>Argument</th>
 		<th>Value</th>

package/{components → dist/components}/JobArgs.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         args: any;
+        tableClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/{components → dist/components}/LightweightArgInput.svelte

@@ -204,21 +204,23 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							</div>
 						{/each}
 					</div>
-					<Button
-						variant="border"
-						color="blue"
-						size="sm"
-						btnClasses="mt-1"
-						on:click={() => {
-							if (value == undefined || !Array.isArray(value)) {
-								value = []
-							}
-							value = value.concat('')
-						}}
-					>
-						<Icon data={faPlus} class="mr-2" />
-						Add item
-					</Button>
+					<div class="flex">
+						<Button
+							variant="border"
+							color="blue"
+							size="sm"
+							btnClasses="mt-1"
+							on:click={() => {
+								if (value == undefined || !Array.isArray(value)) {
+									value = []
+								}
+								value = value.concat('')
+							}}
+						>
+							<Icon data={faPlus} class="mr-2" />
+							Add item
+						</Button>
+					</div>
 					<span class="ml-2">
 						{(value ?? []).length} item{(value ?? []).length > 1 ? 's' : ''}
 					</span>

package/{components → dist/components}/LogViewer.svelte

@@ -4,6 +4,7 @@ export let content;
 export let isLoading;
 export let duration = undefined;
 export let mem = undefined;
+export let wrapperClass = '';
 let scroll = true;
 let div = null;
 $: if (content != undefined) {
@@ -26,7 +27,7 @@ let logViewer;
 	</DrawerContent>
 </Drawer>
 
-<div class="relative w-full h-full">
+<div class="relative w-full h-full {wrapperClass}">
 	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
 		<div
 			class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-gray-500 text-sm bg-gray-50/20"

package/{components → dist/components}/LogViewer.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         isLoading: boolean;
         duration?: number | undefined;
         mem?: number | undefined;
+        wrapperClass?: string | undefined;
         scrollToBottom?: (() => void) | undefined;
     };
     events: {

package/{components → dist/components}/MoveDrawer.svelte

@@ -16,11 +16,11 @@ export async function openDrawer(initialPath_l, summary_l, kind_l) {
     kind = kind_l;
     initialPath = initialPath_l;
     summary = summary_l;
-    await loadOwner();
+    loadOwner();
     drawer.openDrawer();
 }
-async function loadOwner() {
-    own = await isOwner(initialPath, $userStore, $workspaceStore);
+function loadOwner() {
+    own = isOwner(initialPath, $userStore, $workspaceStore);
 }
 async function updatePath() {
     if (kind == 'flow') {
@@ -74,14 +74,12 @@ async function updatePath() {
 
 <Drawer bind:this={drawer}>
 	<DrawerContent title="Move/Rename {initialPath}" on:close={drawer.closeDrawer}>
-		<h1 class="mb-2">Move/Rename {initialPath}</h1>
-
 		{#if !own}
 			<Alert type="warning" title="Not owner"
 				>Since you do not own this item, you cannot move this item (you can however fork it)</Alert
 			>
 		{/if}
-		<h2 class="border-b pb-1 mt-8 mb-4">Summary</h2>
+		<h2 class="border-b pb-1 mt-2 mb-4">Summary</h2>
 		<input
 			type="text"
 			bind:value={summary}
@@ -89,9 +87,10 @@ async function updatePath() {
 			disabled={!own}
 		/>
 
-		<h2 class="border-b pb-1 mt-8 mb-4">Path</h2>
+		<h2 class="border-b pb-1 mt-10 mb-4">Path</h2>
 		<div class="flex flex-col mb-2 gap-6">
 			<Path disabled={!own} {kind} {initialPath} bind:path />
+			<div class="mt-4" />
 			<Button disabled={!own} on:click={updatePath}>Move/Rename</Button>
 			<div />
 		</div>

package/{components → dist/components}/Path.svelte

@@ -310,6 +310,7 @@ async function addFolder() {
 								btnClasses="!p-1.5"
 								variant="border"
 								size="xs"
+								{disabled}
 								on:click={newFolder.openDrawer}
 							>
 								<Icon scale={0.8} data={faPlus} /></Button

package/{components → dist/components}/Range.svelte.d.ts

@@ -32,6 +32,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
+    /** @typedef {typeof __propDef.props}  RangeProps */
+    /** @typedef {typeof __propDef.events}  RangeEvents */
+    /** @typedef {typeof __propDef.slots}  RangeSlots */
     slots: {};
 };
 export {};

package/{components → dist/components}/ResourceEditor.svelte

@@ -1,5 +1,5 @@
 <script>import { ResourceService } from '../gen';
-import { canWrite, emptyString, sendUserToast } from '../utils';
+import { canWrite, emptyString, isOwner, sendUserToast } from '../utils';
 import { createEventDispatcher } from 'svelte';
 import { Alert, Button, Drawer, Skeleton } from './common';
 import Path from './Path.svelte';
@@ -128,7 +128,7 @@ function switchTab(asJson) {
 						</div>
 					{/if}
 					<Path
-						disabled={!can_write}
+						disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
 						bind:path
 						{initialPath}
 						namePlaceholder="resource"

package/{components → dist/components}/RunForm.svelte

@@ -9,6 +9,7 @@ import SchemaForm from './SchemaForm.svelte';
 import SharedBadge from './SharedBadge.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
+import CollapseLink from './CollapseLink.svelte';
 export let runnable;
 export let runAction;
 export let buttonText = 'Run';
@@ -99,62 +100,67 @@ $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '$
 		<div class="text-xs text-gray-600">No schema</div>
 	{/if}
 	{#if schedulable}
-		<div class="flex gap-2 items-start flex-wrap justify-between mt-2 md:mt-6 mb-6">
-			<div class="flex flex-col">
-				<div>
-					<Button
-						color="light"
-						size="sm"
-						endIcon={{ icon: viewOptions ? faChevronUp : faChevronDown }}
-						on:click={() => (viewOptions = !viewOptions)}
-					>
-						Schedule to run later
-					</Button>
-				</div>
-				{#if viewOptions}
-					<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">
-									<label for="run-time" />
-									<input
-										class="inline-block"
-										type="datetime-local"
-										id="run-time"
-										name="run-scheduled-time"
-										bind:value={scheduledForStr}
-										min={getToday().toISOString().slice(0, 16)}
-									/>
+		<div class="mt-10" />
+		<CollapseLink text="Advanced">
+			<div class="flex flex-col gap-4 mt-2 border p-2">
+				<div class="flex flex-col gap-2">
+					<div class="flex">
+						<Button
+							color="light"
+							size="sm"
+							endIcon={{ icon: viewOptions ? faChevronUp : faChevronDown }}
+							on:click={() => (viewOptions = !viewOptions)}
+						>
+							Schedule to run later
+						</Button>
+					</div>
+					{#if viewOptions}
+						<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">
+										<label for="run-time" />
+										<input
+											class="inline-block"
+											type="datetime-local"
+											id="run-time"
+											name="run-scheduled-time"
+											bind:value={scheduledForStr}
+											min={getToday().toISOString().slice(0, 16)}
+										/>
+									</div>
+									<Button
+										variant="border"
+										color="blue"
+										size="sm"
+										btnClasses="mx-2 mb-1"
+										on:click={() => {
+											scheduledForStr = undefined
+										}}
+									>
+										Clear
+									</Button>
 								</div>
-								<Button
-									variant="border"
-									color="blue"
-									size="sm"
-									btnClasses="mx-2 mb-1"
-									on:click={() => {
-										scheduledForStr = undefined
-									}}
-								>
-									Clear
-								</Button>
 							</div>
 						</div>
+					{/if}
+				</div>
+				{#if runnable?.path?.startsWith(`u/${$userStore?.username}`) != true && (runnable?.path?.split('/')?.length ?? 0) > 2}
+					<div class="flex items-center gap-1">
+						<Toggle
+							options={{
+								right: `make run invisible to others`
+							}}
+							bind:checked={invisible_to_owner}
+						/>
+						<Tooltip
+							>By default, runs are visible to the owner(s) of the script or flow being triggered</Tooltip
+						>
 					</div>
 				{/if}
 			</div>
-			{#if runnable?.path?.startsWith(`u/${$userStore?.username}`) != true && (runnable?.path?.split('/')?.length ?? 0) > 2}
-				<div class="flex items-center gap-1">
-					<Toggle
-						options={{
-							right: `make run invisible to others`
-						}}
-						bind:checked={invisible_to_owner}
-					/>
-					<Tooltip
-						>By default, runs are visible to the owner(s) of the script or flow being triggered</Tooltip
-					>
-				</div>
-			{/if}
+		</CollapseLink>
+		<div class="flex gap-2 items-start flex-wrap justify-between mt-2 md:mt-6 mb-6">
 			<div class="flex-row-reverse flex grow">
 				<Button
 					{loading}
@@ -177,20 +183,24 @@ $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '$
 	{/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>
+			<div class="my-20" />
+			<div class="flex">
+				<Button
+					color="light"
+					size="xs"
+					endIcon={{ icon: viewCliOptions ? faChevronUp : faChevronDown }}
+					on:click={() => (viewCliOptions = !viewCliOptions)}
+				>
+					Run it from the CLI
+				</Button>
 			</div>
-		{/if}
+			{#if viewCliOptions}
+				<div transition:slide|local class="mt-2 px-4 pt-2">
+					<InlineCodeCopy content={cliCommand} />
+					<CliHelpBox />
+				</div>
+			{/if}
+		</div>
 	{/if}
 </div>