windmill-components 1.55.0 → 1.55.2

package/common.d.ts

@@ -1,5 +1,5 @@
 import type { Script } from "./gen";
-export type OwnerKind = 'group' | 'user';
+export type OwnerKind = 'group' | 'user' | 'folder';
 export type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute';
 export type SupportedLanguage = Script.language;
 export interface SchemaProperty {

package/common.js

@@ -4,6 +4,9 @@ export function pathToMeta(path) {
     if (splitted[0] == 'g') {
         ownerKind = 'group';
     }
+    else if (splitted[0] == 'f') {
+        ownerKind = 'folder';
+    }
     else if (splitted[0] == 'u') {
         ownerKind = 'user';
     }

package/components/AppConnect.svelte

@@ -369,8 +369,8 @@ let filteredConnectsManual = [];
 					</ol>
 				</div>
 				{#if apiTokenApps[resource_type].img}
-					<div class="mt-4">
-						<img alt="connect" src={apiTokenApps[resource_type].img} />
+					<div class="mt-4 w-full">
+						<img class="max-h-96 m-auto" alt="connect" src={apiTokenApps[resource_type].img} />
 					</div>
 				{/if}
 			{/if}

package/components/ArgInput.svelte

@@ -11,7 +11,6 @@ import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import autosize from 'svelte-autosize';
-import * as autosizeLib from 'autosize';
 import Toggle from './Toggle.svelte';
 import Password from './Password.svelte';
 export let label = '';
@@ -270,6 +269,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				{#if properties && Object.keys(properties).length > 0}
 					<div class="p-4 pl-8 border rounded w-full">
 						<SchemaForm
+							{disabled}
 							schema={{ properties, $schema: '', required: [], type: 'object' }}
 							bind:args={value}
 						/>

package/components/CronInput.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script>import { ScheduleService } from '../gen';
-import { displayDate, formatCron, sendUserToast } from '../utils';
+import { displayDate, emptyString, formatCron, sendUserToast } from '../utils';
 import CollapseLink from './CollapseLink.svelte';
 export let validCRON = true;
 let preview = [];
@@ -11,7 +11,7 @@ let cronError = '';
 export let schedule = '0 0 12 * *';
 export let disabled = false;
 let limit = 3;
-$: handleScheduleInput(schedule);
+$: !emptyString(schedule) && handleScheduleInput(schedule);
 async function handleScheduleInput(input) {
     try {
         preview = await ScheduleService.previewSchedule({
@@ -26,63 +26,64 @@ async function handleScheduleInput(input) {
             validCRON = false;
         }
         else {
-            sendUserToast(`Cannot preview: ${err}`, true);
             validCRON = false;
         }
     }
 }
 </script>
 
-<div class="text-red-600 text-2xs grow">{cronError}</div>
-<div class="flex flex-row items-end max-w-5xl">
-	<label class="text-xs min-w-max mr-2 self-center" for="cron-schedule">CRON expression</label>
-	<input
-		class="inline-block"
-		type="text"
-		id="cron-schedule"
-		name="cron-schedule"
-		bind:value={schedule}
-		{disabled}
-	/>
-</div>
-{#if !disabled}
-	<div class="flex flex-row text-xs text-blue-500 gap-3 pl-28 mb-2">
-		<button
-			on:click={() => {
-				schedule = '0 */15 * * *'
-				cronError = ''
-			}}>every 15 min</button
-		>
-		<button
-			on:click={() => {
-				schedule = '0 0 * * * *'
-				cronError = ''
-			}}>every hour</button
-		>
-		<button
-			on:click={() => {
-				schedule = '0 0 8 * * *'
-				cronError = ''
-			}}>once a day at 8AM</button
-		>
+<div class="max-w-xl">
+	<div class="w-full text-right text-red-600 text-2xs grow">{cronError}</div>
+	<div class="flex flex-row items-end max-w-5xl">
+		<label class="text-xs min-w-max mr-2 self-center" for="cron-schedule">CRON expression</label>
+		<input
+			class="inline-block"
+			type="text"
+			id="cron-schedule"
+			name="cron-schedule"
+			bind:value={schedule}
+			{disabled}
+		/>
 	</div>
-{/if}
-
-<CollapseLink text="preview next runs" open={true}>
-	{#if preview && preview.length > 0}
-		<div class="text-sm text-gray-700 border p-2 rounded-md">
-			<div class="flex flex-row justify-between">The next runs will be scheduled at:</div>
-			<ul class="list-disc mx-12">
-				{#each preview.slice(0, limit) as p}
-					<li class="mx-2 text-gray-700 text-sm">{displayDate(p, true)}</li>
-				{/each}
-				<li class="text-sm mx-2">...</li>
-				{#if limit != 10}
-					<button class="underline text-gray-400" on:click={() => (limit = 10)}>Load more</button>
-				{:else}
-					<button class="underline text-gray-400" on:click={() => (limit = 3)}>Load less</button>
-				{/if}
-			</ul>
+	{#if !disabled}
+		<div class="flex flex-row text-xs text-blue-500 gap-3 pl-28 mb-2">
+			<button
+				on:click={() => {
+					schedule = '0 */15 * * *'
+					cronError = ''
+				}}>every 15 min</button
+			>
+			<button
+				on:click={() => {
+					schedule = '0 0 * * * *'
+					cronError = ''
+				}}>every hour</button
+			>
+			<button
+				on:click={() => {
+					schedule = '0 0 8 * * *'
+					cronError = ''
+				}}>once a day at 8AM</button
+			>
 		</div>
 	{/if}
-</CollapseLink>
+
+	<CollapseLink text="preview next runs" open={true}>
+		{#if preview && preview.length > 0}
+			<div class="text-sm text-gray-700 border p-2 rounded-md">
+				<div class="flex flex-row justify-between">The next runs will be scheduled at:</div>
+				<ul class="list-disc mx-12">
+					{#each preview.slice(0, limit) as p}
+						<li class="mx-2 text-gray-700 text-sm">{displayDate(p, true)}</li>
+					{/each}
+					<li class="text-sm mx-2">...</li>
+					{#if limit != 10}
+						<button class="underline text-gray-400" on:click={() => (limit = 10)}>Load more</button>
+					{:else}
+						<button class="underline text-gray-400" on:click={() => (limit = 3)}>Load less</button>
+					{/if}
+				</ul>
+			</div>
+		{/if}
+	</CollapseLink>
+</div>

package/components/Dropdown.svelte

@@ -21,23 +21,24 @@ const dispatch = createEventDispatcher();
 			{#if item.action}
 				<button
 					on:click={(event) => {
+						event.preventDefault()
 						if (!item.disabled) {
-							event.preventDefault()
 							close()
 							item.action && item.action(event)
 							dispatch('click', { item: item?.eventName })
 						}
 					}}
-					class="block w-full whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30 px-4 py-2 text-sm text-gray-700 text-left {item.separatorTop
-						? 'border-t'
-						: ''} {item.separatorBottom ? 'border-b' : ''} {item.type == 'delete'
+					class="block w-full  whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
+					 px-4 py-2 text-sm text-gray-700 text-left 
+					 {item.disabled ? 'bg-gray-100' : ''}
+					 {item.separatorTop ? 'border-t' : ''} {item.separatorBottom ? 'border-b' : ''} {item.type ==
+					'delete'
 						? 'text-red-500'
 						: ''}"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
 					disabled={item.disabled}
-					class:disabled={item.disabled}
 				>
 					{#if item.icon}
 						<Icon
@@ -48,15 +49,17 @@ const dispatch = createEventDispatcher();
 					{/if}
 					{item.displayName}
 				</button>
-			{:else if item.href}
+			{:else if item.href && !item.disabled}
 				<a
 					href={item.href}
-					on:click={() => {
+					on:click={(e) => {
 						if (!item.disabled) {
 							close()
+						} else {
+							e.preventDefault()
 						}
 					}}
-					class="block w-full px-4 py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
+					class="block w-full px-4 font-semibold  py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
@@ -73,11 +76,20 @@ const dispatch = createEventDispatcher();
 				</a>
 			{:else}
 				<span
-					class="block  px-4 py-2 text-sm text-gray-700"
+					class:bg-gray-50={item.disabled}
+					class="block  px-4 py-2 text-sm text-gray-700 cursor-auto"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
+					on:click|preventDefault
 				>
+					{#if item.icon}
+						<Icon
+							data={item.icon}
+							scale={0.6}
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+						/>
+					{/if}
 					{item.displayName}
 				</span>
 			{/if}

package/components/Editor.svelte

@@ -19,6 +19,14 @@ monaco.editor.defineTheme('myTheme', {
     }
 });
 monaco.editor.setTheme('myTheme');
+try {
+    StandaloneServices.initialize({
+        ...getMessageServiceOverride(document.body)
+    });
+}
+catch (e) {
+    console.error(e);
+}
 </script>
 
 <script>import { browser, dev } from '$app/env';
@@ -27,20 +35,12 @@ import { sendUserToast } from '../utils';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import getMessageServiceOverride from 'vscode/service-override/messages';
-import { StandaloneServices } from 'vscode/services';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import { BASH_INIT_CODE, DENO_INIT_CODE_CLEAR, GO_INIT_CODE, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
 import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-try {
-    StandaloneServices.initialize({
-        ...getMessageServiceOverride(document.body)
-    });
-}
-catch (e) {
-    console.error(e);
-}
+import { StandaloneServices } from 'vscode/services';
 let divEl = null;
 let editor;
 export let lang;

package/components/EditorBar.svelte

@@ -127,7 +127,7 @@ async function onScriptPick(e) {
 			editor.insertAtCursor(`v, _ := wmill.GetVariable("${path}")`)
 		} else if (lang == 'bash') {
 			editor.insertAtCursor(`curl -s -H "Authorization: Bearer $WM_TOKEN" \\
-  "$WM_BASE_URL/api/w/$WM_WORKSPACE/variables/get/${path}" \\
+  "$BASE_INTERNAL_URL/api/w/$WM_WORKSPACE/variables/get/${path}" \\
   | jq -r .value`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
@@ -173,7 +173,7 @@ async function onScriptPick(e) {
 			editor.insertAtCursor(`r, _ := wmill.GetResource("${path}")`)
 		} else if (lang == 'bash') {
 			editor.insertAtCursor(`curl -s -H "Authorization: Bearer $WM_TOKEN" \\
-  "$WM_BASE_URL/api/w/$WM_WORKSPACE/resources/get/${path}" \\
+  "$BASE_INTERNAL_URL/api/w/$WM_WORKSPACE/resources/get/${path}" \\
   | jq -r .value`)
 		}
 		sendUserToast(`${path} inserted at cursor`)

package/components/FlowBuilder.svelte

@@ -3,11 +3,12 @@ import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, sendUserToast, setQueryWithoutLoad } from '../utils';
-import { faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
+import { faCalendarAlt, faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import { setContext } from 'svelte';
+import { Icon } from 'svelte-awesome';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
-import { Button, Drawer, DrawerContent } from './common';
+import { Badge, Button, Drawer, DrawerContent } from './common';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { OFFSET } from './CronInput.svelte';
@@ -26,18 +27,23 @@ export let loading = false;
 let pathError = '';
 async function createSchedule(path) {
     const { cron, args, enabled } = $scheduleStore;
-    await ScheduleService.createSchedule({
-        workspace: $workspaceStore,
-        requestBody: {
-            path: path,
-            schedule: formatCron(cron),
-            offset: OFFSET,
-            script_path: path,
-            is_flow: true,
-            args,
-            enabled
-        }
-    });
+    try {
+        await ScheduleService.createSchedule({
+            workspace: $workspaceStore,
+            requestBody: {
+                path: path,
+                schedule: formatCron(cron),
+                offset: OFFSET,
+                script_path: path,
+                is_flow: true,
+                args,
+                enabled
+            }
+        });
+    }
+    catch (err) {
+        sendUserToast(`The primary schedule could not be created: ${err}`, true);
+    }
 }
 async function saveFlow() {
     const flow = cleanInputs($flowStore);
@@ -72,23 +78,19 @@ async function saveFlow() {
         });
         const scheduleExists = await ScheduleService.existsSchedule({
             workspace: $workspaceStore ?? '',
-            path: initialPath
+            path: flow.path
         });
         if (scheduleExists) {
             const schedule = await ScheduleService.getSchedule({
                 workspace: $workspaceStore ?? '',
-                path: initialPath
+                path: flow.path
             });
-            if (schedule.path != flow.path ||
-                JSON.stringify(schedule.args) != JSON.stringify(args) ||
-                schedule.schedule != cron) {
+            if (JSON.stringify(schedule.args) != JSON.stringify(args) || schedule.schedule != cron) {
                 await ScheduleService.updateSchedule({
                     workspace: $workspaceStore ?? '',
-                    path: initialPath,
+                    path: flow.path,
                     requestBody: {
                         schedule: formatCron(cron),
-                        script_path: flow.path,
-                        is_flow: true,
                         args
                     }
                 });
@@ -178,10 +180,24 @@ let flowViewer;
 					size="sm"
 					on:click={flowViewer.openDrawer}
 				>
-					View Graph
+					Graph
 				</Button>
 			</div>
 			<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
+				{#if $scheduleStore.enabled}
+					<Button
+						btnClasses="hidden lg:inline-flex"
+						startIcon={{ icon: faCalendarAlt }}
+						variant="contained"
+						color="light"
+						size="xs"
+						on:click={async () => {
+							select('settings-schedule')
+						}}
+					>
+						{$scheduleStore.cron ?? ''}
+					</Button>
+				{/if}
 				<Button
 					btnClasses="hidden lg:inline-flex"
 					startIcon={{ icon: faPen }}
@@ -189,7 +205,7 @@ let flowViewer;
 					color="light"
 					size="xs"
 					on:click={async () => {
-						select('settings')
+						select('settings-metadata')
 						document.getElementById('path')?.focus()
 					}}
 				>
@@ -201,7 +217,7 @@ let flowViewer;
 					color="light"
 					size="xs"
 					on:click={async () => {
-						select('settings')
+						select('settings-metadata')
 						document.getElementById('flow-summary')?.focus()
 					}}
 				>

package/components/FlowGraphViewer.svelte

@@ -72,7 +72,9 @@ let topHeight = 0;
 <div class="grid grid-cols-3 w-full">
 	<div
 		bind:clientHeight={topHeight}
-		class="{noSide ? 'col-span-3' : 'col-span-2'} w-full border border-gray-400 h-screen"
+		class="{noSide
+			? 'col-span-3'
+			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 h-screen"
 		class:overflow-auto={overflowAuto}
 	>
 		<FlowGraph
@@ -83,7 +85,9 @@ let topHeight = 0;
 		/>
 	</div>
 	{#if !noSide}
-		<div class="w-full border-r border-b border-t border-gray-400 min-h-[150px] p-2 overflow-auto">
+		<div
+			class="w-full border-r border-b border-t border-gray-400 min-h-[150px] p-2 overflow-auto hidden sm:block"
+		>
 			{#if stepDetail == undefined}
 				<span class="font-black text-lg w-full my-4">
 					<span>Click on a step to see its details</span>

package/components/FlowMetadata.svelte

@@ -2,10 +2,14 @@
 import Icon from 'svelte-awesome';
 import { displayDaysAgo } from '../utils';
 import { faCalendar, faClock, faRobot, faScroll, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import ScheduleEditor from './ScheduleEditor.svelte';
 export let job;
 const SMALL_ICON_SCALE = 0.7;
+let scheduleEditor;
 </script>
 
+<ScheduleEditor bind:this={scheduleEditor} />
+
 <div class="rounded-md p-3 bg-gray-50 shadow-sm sm:text-sm md:text-base" style="min-height: 150px;">
 	<JobStatus {job} />
 	<div>
@@ -36,9 +40,10 @@ const SMALL_ICON_SCALE = 0.7;
 		{:else if job && job.schedule_path}
 			<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
 			<span
-				>Triggered by the schedule: <a
-					href={`/schedule/add?edit=${job.schedule_path}&isFlow=${job.job_kind == 'flow'}`}
-					>{job.schedule_path}</a
+				>Triggered by the schedule: <button
+					class="break-words text-sm text-blue-600 font-normal"
+					on:click={() => scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
+					>{job.schedule_path}</button
 				></span
 			>
 		{/if}

package/components/FlowViewer.svelte

@@ -27,9 +27,9 @@ function toAny(x) {
 </script>
 
 <Tabs bind:selected={tab}>
-	<Tab value="ui">Flow rendered</Tab>
+	<Tab value="ui">Graph</Tab>
 	<Tab value="json">Json</Tab>
-	<Tab value="schema">Input schema of the flow</Tab>
+	<Tab value="schema">Input Schema</Tab>
 
 	<svelte:fragment slot="content">
 		<TabContent value="ui">