windmill-components 1.394.8 → 1.405.5

package/package/components/runs/PreprocessedArgsDisplay.svelte

@@ -0,0 +1,71 @@
+<script>import Badge from '../common/badge/Badge.svelte';
+// import { ClipboardCopy, Download } from 'lucide-svelte'
+// import Drawer from '../common/drawer/Drawer.svelte'
+// import DrawerContent from '../common/drawer/DrawerContent.svelte'
+// import { Highlight } from 'svelte-highlight'
+// import Button from '../common/button/Button.svelte'
+// import { json } from 'svelte-highlight/languages'
+// import { copyToClipboard } from '../../utils'
+// import { deepEqual } from 'fast-equals'
+export let flowStatus;
+// $: args =
+// 	'_metadata' in flowStatus && 'original_args' in flowStatus['_metadata']
+// 		? flowStatus['_metadata']['original_args']
+// 		: undefined
+$: hasPreprocessedArgs =
+    '_metadata' in flowStatus && !!flowStatus['_metadata']['preprocessed_args'];
+// $: argsStr = args !== undefined ? JSON.stringify(args, null, 4) : undefined
+// let jsonViewer: Drawer | undefined = undefined
+</script>
+
+{#if hasPreprocessedArgs}
+	<div>
+		<Badge color="yellow">preprocessed args</Badge>
+	</div>
+{/if}
+
+<!-- 
+{#if args !== undefined && argsStr !== undefined}
+	<Drawer bind:this={jsonViewer} size="900px">
+		<DrawerContent title="Original args" on:close={jsonViewer.closeDrawer}>
+			<svelte:fragment slot="actions">
+				<Button
+					download="windmill-args.json"
+					href={`data:text/json;charset=utf-8,${encodeURIComponent(argsStr)}`}
+					startIcon={{ icon: Download }}
+					size="xs"
+					color="light"
+				>
+					Download
+				</Button>
+				<Button
+					on:click={() => copyToClipboard(argsStr)}
+					color="light"
+					size="xs"
+					startIcon={{ icon: ClipboardCopy }}
+				>
+					Copy to clipboard
+				</Button>
+			</svelte:fragment>
+			{#if args.length > 100000 || (args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG')}
+				<div class="text-sm mb-2 text-tertiary">
+					<a
+						download="windmill-args.json"
+						href={`data:text/json;charset=utf-8,${encodeURIComponent(args)}`}
+					>
+						JSON is too large to be displayed in full.
+					</a></div
+				>
+			{:else}
+				<Highlight language={json} code={argsStr.replace(/\\n/g, '\n')} />
+			{/if}
+		</DrawerContent>
+	</Drawer>
+	<button
+		on:click={() => {
+			jsonViewer?.openDrawer()
+		}}
+	>
+		<Badge color="yellow">preprocessed args</Badge>
+	</button>
+{/if} -->

package/package/components/runs/PreprocessedArgsDisplay.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        flowStatus: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PreprocessedArgsDisplayProps = typeof __propDef.props;
+export type PreprocessedArgsDisplayEvents = typeof __propDef.events;
+export type PreprocessedArgsDisplaySlots = typeof __propDef.slots;
+export default class PreprocessedArgsDisplay extends SvelteComponent<PreprocessedArgsDisplayProps, PreprocessedArgsDisplayEvents, PreprocessedArgsDisplaySlots> {
+}
+export {};

package/package/components/runs/RunRow.svelte

@@ -25,7 +25,7 @@ function isJobCancelable(j) {
 }
 </script>
 
-<Portal>
+<Portal name="run-row">
 	<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 </Portal>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -86,7 +86,7 @@ function isJobCancelable(j) {
 		<div class="flex flex-row items-center gap-1 text-gray-500 dark:text-gray-300 text-2xs">
 			{#if job}
 				{#if 'started_at' in job && job.started_at}
-					Started <TimeAgo withDate agoOnlyIfRecent date={job.started_at ?? ''} />
+					Started <TimeAgo agoOnlyIfRecent date={job.started_at ?? ''} />
 					{#if job && 'duration_ms' in job && job.duration_ms != undefined}
 						(Ran in {msToReadableTime(
 							job.duration_ms
@@ -102,11 +102,7 @@ function isJobCancelable(j) {
 				{:else if `scheduled_for` in job && job.scheduled_for && forLater(job.scheduled_for)}
 					Scheduled for {displayDate(job.scheduled_for)}
 				{:else}
-					Waiting for executor (created <TimeAgo
-						withDate
-						agoOnlyIfRecent
-						date={job.created_at || ''}
-					/>)
+					Waiting for executor (created <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
 				{/if}
 			{/if}
 		</div>

package/package/components/schema/AddProperty.svelte

@@ -94,6 +94,7 @@ function handleAddOrEditArgument(modalProperty) {
     if (argError !== '') {
         sendUserToast(argError, true);
     }
+    console.log(schema);
     dispatch('change', schema);
 }
 export function handleDeleteArgument(argPath) {

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -2,33 +2,156 @@
 import EditableSchemaForm from '../EditableSchemaForm.svelte';
 import AddProperty from './AddProperty.svelte';
 import { createEventDispatcher } from 'svelte';
+import Toggle from '../Toggle.svelte';
+import { emptySchema, validateFileExtension } from '../../utils';
+import AutoComplete from 'simple-svelte-autocomplete';
+import { Alert } from '../common';
 export let schema;
 export let offset = 0;
 export let uiOnly = false;
 export let noPreview = false;
 export let fullHeight = true;
 export let lightweightMode = false;
+export let formatExtension = undefined;
+let resourceIsTextFile = false;
 let addProperty = undefined;
 const dispatch = createEventDispatcher();
+$: !resourceIsTextFile && (formatExtension = undefined);
+$: invalidExtension =
+    formatExtension && formatExtension != ''
+        ? !validateFileExtension(formatExtension ?? 'txt')
+        : false;
+function switchResourceIsFile() {
+    if (!resourceIsTextFile) {
+        schema = emptySchema();
+        formatExtension = undefined;
+    }
+    else {
+        formatExtension = "";
+        schema = emptySchema();
+        schema.order = ['content'];
+        schema.properties = {
+            content: {
+                type: 'string',
+                description: 'Text contents of the file'
+            }
+        };
+    }
+    dispatch('change', schema);
+}
+function numberOfMatches(listItem, searchWords) {
+    if (!listItem) {
+        return 0;
+    }
+    let matches = 0;
+    searchWords.forEach((searchWord) => {
+        const searchLetters = searchWord.split('');
+        if (searchLetters.every((l) => listItem.includes(l))) {
+            matches++;
+        }
+    });
+    return matches;
+}
+let suggestedFileExtensions = ['json', 'yaml', 'jinja', 'j2', 'ini', 'cfg', 'toml', 'html', 'xml', 'yml'];
+let autocompleteExtension = true;
 </script>
 
-<div class={twMerge(fullHeight ? 'h-full' : 'h-80', 'border overflow-y-auto rounded-md')}>
-	<div class="p-4 border-b">
-		<AddProperty on:change={() => dispatch('change', schema)} bind:schema bind:this={addProperty} />
+{#if !resourceIsTextFile}
+	<div class={twMerge(fullHeight ? 'h-full' : 'h-80', 'border overflow-y-auto rounded-md')}>
+		<div class="p-4 border-b">
+			<AddProperty
+				on:change={() => dispatch('change', schema)}
+				bind:schema
+				bind:this={addProperty}
+			/>
+		</div>
+		<EditableSchemaForm
+			bind:schema
+			on:change={() => dispatch('change', schema)}
+			isFlowInput
+			on:edit={(e) => {
+				addProperty?.openDrawer(e.detail)
+			}}
+			on:delete={(e) => {
+				addProperty?.handleDeleteArgument([e.detail])
+			}}
+			{offset}
+			{uiOnly}
+			{noPreview}
+			{lightweightMode}
+		/>
 	</div>
-	<EditableSchemaForm
-		bind:schema
-		on:change={() => dispatch('change', schema)}
-		isFlowInput
-		on:edit={(e) => {
-			addProperty?.openDrawer(e.detail)
-		}}
-		on:delete={(e) => {
-			addProperty?.handleDeleteArgument([e.detail])
-		}}
-		{offset}
-		{uiOnly}
-		{noPreview}
-		{lightweightMode}
-	/>
-</div>
+{/if}
+{#if resourceIsTextFile}
+	<div class="flex items-center space-x-2 w-5/12">
+		<label for="format-extension" class="text-base font-medium whitespace-nowrap">
+			File extension{autocompleteExtension ? "" : " (free text)"}:
+		</label>
+		{#if autocompleteExtension}
+			<AutoComplete
+				inputId="format-extension"
+				autofocus={true}
+				items={[...suggestedFileExtensions, 'Choose another extension']}
+				onChange={(a) => {
+					if (a == 'Choose another extension') {
+						formatExtension = ''
+						autocompleteExtension = false
+					}
+				}}
+				itemFilterFunction={(listItem, searchWords) => {
+					if (searchWords.length == 0 || listItem === 'Choose another extension') {
+						return true
+					}
+					return numberOfMatches(listItem, searchWords) > 0
+				}}
+				noResultsText="No matches, try the 'Choose another extension' option"
+				bind:selectedItem={formatExtension}
+				inputClassName="!h-[32px] py-1 !text-xs !w-64"
+				hideArrow
+				className={'!font-bold'}
+				dropdownClassName="!font-normal !w-64 !max-w-64"
+				maxItemsToShowInList={8}
+				moreItemsText={null}
+				lock={true}
+			/>
+		{:else}
+			<input
+				autofocus={true}
+				bind:value={formatExtension}
+				class="!h-[32px] py-1 !text-xs !w-64"
+				placeholder="Enter your extension"
+				on:keydown={(event) => {
+					if (event.key === 'Enter') {
+						if (formatExtension && !suggestedFileExtensions.includes(formatExtension))
+							suggestedFileExtensions.push(formatExtension)
+
+						autocompleteExtension = true
+					}
+				}}
+			/>
+		{/if}
+	</div>
+
+	{#if invalidExtension}
+		<Alert title="Invalid file extension" type="error">
+			The provided extension (<span class="font-bold font-mono">.{formatExtension}</span>) contains
+			invalid characters. Note that you shouldn't add the leading dot, (i.e. enter `json` instead of `.json`)
+		</Alert>
+	{:else if formatExtension && formatExtension !== ''}
+		<Alert title={`Example: my_file.${formatExtension}`} type="info">
+			The <span class="font-bold font-mono"> .{formatExtension} </span> extension will be used to infer
+			the format when displaying the content and this is also how the resource will appear when pulling
+			via the CLI.
+		</Alert>
+		<div />
+	{/if}
+{/if}
+<Toggle
+	bind:checked={resourceIsTextFile}
+	options={{
+		right: 'This resource type represents a plain text file (clears current schema)',
+		rightTooltip:
+			'A text file such as a config file, template, or any other file format that contains plain text'
+	}}
+	on:change={() => switchResourceIsFile()}
+/>

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         noPreview?: boolean | undefined;
         fullHeight?: boolean | undefined;
         lightweightMode?: boolean | undefined;
+        formatExtension?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/schema/FlowPropertyEditor.svelte

@@ -25,6 +25,7 @@ export let password = false;
 export let variableEditor = undefined;
 export let itemPicker = undefined;
 export let nullable = false;
+export let disabled = false;
 export let defaultValue = undefined;
 export let propsNames = [];
 export let showExpr = undefined;
@@ -302,9 +303,11 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 					{contentEncoding}
 					{format}
 					{extra}
+					{disabled}
 				/>
 			{:else}
 				<ArgInput
+					noDefaultOnSelectFirst
 					{itemPicker}
 					resourceTypes={getResourceTypesFromFormat(format)}
 					bind:value={defaultValue}
@@ -316,6 +319,7 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 					{contentEncoding}
 					{format}
 					{extra}
+					{disabled}
 					{nullable}
 					{variableEditor}
 					compact
@@ -352,6 +356,15 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 				disabled={required}
 			/>
 		{/if}
+		<Toggle
+			options={{
+				right: 'Disabled',
+				rightTooltip: 'Do not let user modify this field'
+			}}
+			lightMode
+			size="xs"
+			bind:checked={disabled}
+		/>
 	</div>
 
 	{#if displayWebhookWarning && !(type === 'object' && oneOf && oneOf.length >= 2)}

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

@@ -14,6 +14,7 @@ declare const __propDef: {
         variableEditor?: VariableEditor | undefined;
         itemPicker?: ItemPicker | undefined;
         nullable?: boolean | undefined;
+        disabled?: boolean | undefined;
         defaultValue?: any;
         propsNames?: any;
         showExpr?: string | undefined;

package/package/components/scriptEditor/LogPanel.svelte

@@ -95,6 +95,7 @@ let forceJson = false;
 						/>
 					</Pane>
 					<Pane>
+						<slot></slot>
 						{#if previewJob != undefined && 'result' in previewJob}
 							<div class="relative w-full h-full p-2">
 								<div class="relative">

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

@@ -17,7 +17,9 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type LogPanelProps = typeof __propDef.props;
 export type LogPanelEvents = typeof __propDef.events;

package/package/components/search/GlobalSearchModal.svelte

@@ -399,7 +399,7 @@ function maxModalHeight(tab) {
 </script>
 
 {#if open}
-	<Portal>
+	<Portal name="global-search">
 		<div
 			class={twMerge(
 				`fixed top-0 bottom-0 left-0 right-0 transition-all duration-50 flex items-start justify-center`,
@@ -421,8 +421,9 @@ function maxModalHeight(tab) {
 							id="quickSearchInput"
 							bind:this={textInput}
 							type="text"
-							class="quick-search-input"
+							class="quick-search-input !bg-surface"
 							bind:value={searchTerm}
+							autocomplete="off"
 						/>
 						<label
 							for="quickSearchInput"

package/package/components/sidebar/SidebarContent.svelte

@@ -1,7 +1,7 @@
 <script>import MenuLink from './MenuLink.svelte';
-import { superadmin, userStore, workspaceStore } from '../../stores';
+import { superadmin, usedTriggerKinds, userStore, workspaceStore } from '../../stores';
 import { SIDEBAR_SHOW_SCHEDULES } from '../../consts';
-import { BookOpen, Bot, Boxes, Calendar, DollarSign, Eye, FolderCog, FolderOpen, Github, HelpCircle, Home, LogOut, Newspaper, Play, ServerCog, Settings, UserCog } from 'lucide-svelte';
+import { BookOpen, Bot, Boxes, Calendar, DollarSign, Eye, FolderCog, FolderOpen, Github, HelpCircle, Home, LogOut, Newspaper, Play, Route, ServerCog, Settings, UserCog, Plus } from 'lucide-svelte';
 import Menu from '../common/menu/MenuV2.svelte';
 import MenuButton from './MenuButton.svelte';
 import { MenuItem } from '@rgossiaux/svelte-headlessui';
@@ -16,6 +16,7 @@ import { twMerge } from 'tailwind-merge';
 import { onMount } from 'svelte';
 import { base } from '../../base';
 import { changelogs } from './changelogs';
+import { page } from '$app/stores';
 $: mainMenuLinks = [
     { label: 'Home', href: `${base}/`, icon: Home },
     { label: 'Runs', href: `${base}/runs`, icon: Play },
@@ -25,13 +26,16 @@ $: mainMenuLinks = [
         icon: DollarSign,
         disabled: $userStore?.operator
     },
-    { label: 'Resources', href: `${base}/resources`, icon: Boxes, disabled: $userStore?.operator },
+    { label: 'Resources', href: `${base}/resources`, icon: Boxes, disabled: $userStore?.operator }
+];
+$: triggerMenuLinks = [
     {
         label: 'Schedules',
         href: `${base}/schedules`,
         icon: Calendar,
         disabled: !SIDEBAR_SHOW_SCHEDULES || $userStore?.operator
-    }
+    },
+    ...defaultExtraTriggerLinks.filter((link) => $usedTriggerKinds.includes(link.kind) || $page.url.pathname.includes(link.href))
 ];
 async function leaveWorkspace() {
     await WorkspaceService.leaveWorkspace({ workspace: $workspaceStore ?? '' });
@@ -39,6 +43,18 @@ async function leaveWorkspace() {
     clearStores();
     goto('/user/workspaces');
 }
+const defaultExtraTriggerLinks = [
+    {
+        label: 'HTTP',
+        href: '/routes',
+        icon: Route,
+        disabled: $userStore?.operator,
+        kind: 'http'
+    }
+];
+$: extraTriggerLinks = defaultExtraTriggerLinks.filter((link) => {
+    return !$page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind);
+});
 $: secondaryMenuLinks = [
     // {
     // 	label: 'Workspace',
@@ -170,10 +186,55 @@ let leaveWorkspaceModal = false;
 		noGap ? 'gap-0' : 'gap-16'
 	)}
 >
-	<div class={twMerge('space-y-1 pt-4 ', noGap ? 'md:mb-0 mb-0' : 'mb-6 md:mb-10')}>
-		{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-			<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
-		{/each}
+	<div class={twMerge('pt-4 ', noGap ? 'md:mb-0 mb-0' : 'mb-6 md:mb-10')}>
+		<div class="space-y-1">
+			{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+				<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
+			{/each}
+		</div>
+		<div class="pt-4">
+			<div
+				class="text-gray-400 text-[0.5rem] uppercase transition-opacity"
+				class:opacity-0={isCollapsed}>Triggers</div
+			>
+			<div class="space-y-1">
+				{#each triggerMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+					<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
+				{/each}
+				{#if extraTriggerLinks.length > 0 && !$userStore?.operator}
+					<Menu>
+						<div
+							slot="trigger"
+							class="w-full text-gray-400 text-2xs flex flex-row gap-1 py-1 items-center px-2 hover:bg-[#2A3648] dark:hover:bg-[#30404e] rounded"
+						>
+							<Plus size={14} />
+						</div>
+						{#each extraTriggerLinks as subItem (subItem.href ?? subItem.label)}
+							<MenuItem>
+								<div class="py-1" role="none">
+									<a
+										href={subItem.href}
+										class={twMerge(
+											'text-secondary block px-4 py-2 text-2xs hover:bg-surface-hover hover:text-primary'
+										)}
+										role="menuitem"
+										tabindex="-1"
+									>
+										<div class="flex flex-row items-center gap-2">
+											{#if subItem.icon}
+												<svelte:component this={subItem.icon} size={16} />
+											{/if}
+
+											{subItem.label}
+										</div>
+									</a>
+								</div>
+							</MenuItem>
+						{/each}
+					</Menu>
+				{/if}
+			</div>
+		</div>
 	</div>
 	<div class="flex flex-col h-full justify-end">
 		<div class={twMerge('space-y-0.5 mb-6 md:mb-10', noGap ? 'md:mb-0 mb-0' : 'mb-6 md:mb-10')}>

package/package/components/sidebar/changelogs.js

@@ -1,4 +1,14 @@
 const changelogs = [
+    {
+        label: 'Custom HTTP routes',
+        href: 'https://www.windmill.dev/changelog/http-routing',
+        date: '2024-09-23'
+    },
+    {
+        label: 'Set/Get progress from code',
+        href: 'https://www.windmill.dev/changelog/explicit-progress',
+        date: '2024-09-18'
+    },
     {
         label: 'Directly edit flow YAML',
         href: 'https://www.windmill.dev/changelog/flow-yaml-editor',

package/package/components/triggers/RouteEditor.svelte

@@ -0,0 +1,19 @@
+<script>import { tick } from 'svelte';
+import RouteEditorInner from './RouteEditorInner.svelte';
+let open = false;
+export async function openEdit(ePath, isFlow) {
+    open = true;
+    await tick();
+    drawer?.openEdit(ePath, isFlow);
+}
+export async function openNew(is_flow, initial_script_path) {
+    open = true;
+    await tick();
+    drawer?.openNew(is_flow, initial_script_path);
+}
+let drawer;
+</script>
+
+{#if open}
+	<RouteEditorInner on:update bind:this={drawer} />
+{/if}

package/package/components/triggers/RouteEditor.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        openEdit?: ((ePath: string, isFlow: boolean) => Promise<void>) | undefined;
+        openNew?: ((is_flow: boolean, initial_script_path?: string) => Promise<void>) | undefined;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RouteEditorProps = typeof __propDef.props;
+export type RouteEditorEvents = typeof __propDef.events;
+export type RouteEditorSlots = typeof __propDef.slots;
+export default class RouteEditor extends SvelteComponent<RouteEditorProps, RouteEditorEvents, RouteEditorSlots> {
+    get openEdit(): (ePath: string, isFlow: boolean) => Promise<void>;
+    get openNew(): (is_flow: boolean, initial_script_path?: string | undefined) => Promise<void>;
+}
+export {};