windmill-components 1.84.6 → 1.86.0

package/components/AppConnect.svelte

@@ -339,7 +339,7 @@ let filteredConnectsManual = [];
 			<h2 class="mt-8 mb-4">Non OAuth APIs & Resources</h2>
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#if filteredConnectsManual}
-					{#each filteredConnectsManual as [key, instructions]}
+					{#each filteredConnectsManual as [key, _]}
 						<Button
 							size="sm"
 							variant="border"
@@ -383,7 +383,7 @@ let filteredConnectsManual = [];
 				</div>
 				{#if apiTokenApps[resource_type].img}
 					<div class="mt-4 w-full overflow-hidden">
-						<img class="m-auto  max-h-60" alt="connect" src={apiTokenApps[resource_type].img} />
+						<img class="m-auto max-h-60" alt="connect" src={apiTokenApps[resource_type].img} />
 					</div>
 				{/if}
 			{/if}

package/components/ArgInfo.svelte

@@ -1,12 +1,10 @@
-<script>import { truncate } from '../utils';
-import Tooltip from './Tooltip.svelte';
-import json from 'svelte-highlight/languages/json';
-import { Highlight } from 'svelte-highlight';
-import { ResourceService } from '../gen';
+<script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import Drawer from './common/drawer/Drawer.svelte';
+import { truncate } from '../utils';
 import { DrawerContent } from './common';
+import Drawer from './common/drawer/Drawer.svelte';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import Tooltip from './Tooltip.svelte';
 export let value;
 let jsonViewer;
 let jsonViewerContent;

package/components/ArgInput.svelte

@@ -1,23 +1,23 @@
-<script>import { faChevronDown, faChevronUp, faDollarSign, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+<script>import { faChevronDown, faChevronUp, faDollarSign, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { setInputCat as computeInputCat } from '../utils';
-import { Badge, Button } from './common';
+import { X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
+import autosize from 'svelte-autosize';
 import Icon from 'svelte-awesome';
+import { fade } from 'svelte/transition';
+import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
+import { Badge, Button } from './common';
 import FieldHeader from './FieldHeader.svelte';
+import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
 import ObjectResourceInput from './ObjectResourceInput.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
+import Password from './Password.svelte';
+import Range from './Range.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
-import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
-import autosize from 'svelte-autosize';
+import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import Toggle from './Toggle.svelte';
-import Password from './Password.svelte';
-import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
-import Range from './Range.svelte';
-import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
-import { fade } from 'svelte/transition';
-import { X } from 'lucide-svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -28,7 +28,6 @@ export let type = undefined;
 export let required = false;
 export let pattern = undefined;
 export let valid = required ? false : true;
-export let maxRows = 10;
 export let enum_ = undefined;
 export let disabled = false;
 export let editableSchema = false;
@@ -45,7 +44,6 @@ export let noMargin = false;
 export let extra = {};
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
-$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
 $: validateInput(pattern, value);
 let error = '';
 let el = undefined;
@@ -143,6 +141,7 @@ let redraw = 0;
 let itemsLimit = 50;
 </script>
 
+<!-- svelte-ignore a11y-autofocus -->
 <div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
@@ -150,6 +149,7 @@ let itemsLimit = 50;
 		{/if}
 		{#if editableSchema}
 			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<span
 					class="underline"
 					on:click={() => {

package/components/ArgInput.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SchemaProperty } from '../common';
+import type ItemPicker from './ItemPicker.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
-import type ItemPicker from './ItemPicker.svelte';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -15,7 +15,6 @@ declare const __propDef: {
         required?: boolean | undefined;
         pattern?: undefined | string;
         valid?: boolean | undefined;
-        maxRows?: number | undefined;
         enum_?: string[] | undefined;
         disabled?: boolean | undefined;
         editableSchema?: boolean | undefined;

package/components/CenteredModal.svelte

@@ -10,9 +10,11 @@ onMount(async () => {
 });
 </script>
 
-<div class="center-center min-h-screen p-4 relative bg-[#3b4252]">
-	<div class="border rounded-md shadow-md bg-white w-full max-w-[640px] 
-	p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10">
+<div class="center-center min-h-screen p-4 relative bg-gray-50">
+	<div
+		class="border rounded-md shadow-md bg-white w-full max-w-[640px]
+	p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
+	>
 		<div class="mb-10">
 			<h1 class="text-center">
 				{title}
@@ -27,13 +29,13 @@ onMount(async () => {
 	</div>
 	{#if !disableLogo}
 		<div class="hidden lg:block absolute top-10 right-50">
-			<div class="animate-[spin_100s_linear_infinite] ">
-				<WindmillIcon white height="100px" width="100px" />
+			<div>
+				<WindmillIcon height="100px" width="100px" spin="slow" />
 			</div>
-			<h2 class="text-center pt-2 text-gray-100">Windmill</h2>
+			<h2 class="text-center pt-2 text-gray-800">Windmill</h2>
 		</div>
 	{/if}
-	<div class="absolute top-0 right-0 text-2xs text-gray-300 italic px-3 py-1">
+	<div class="absolute top-0 right-0 text-2xs text-gray-800 italic px-3 py-1">
 		<span class="font-mono">{version}</span>
 	</div>
 </div>

package/components/CronInput.svelte

@@ -1,28 +1,61 @@
-<script context="module">
-	export const OFFSET = new Date().getTimezoneOffset()
-</script>
-
 <script>import { ScheduleService } from '../gen';
-import { displayDate, emptyString, formatCron, sendUserToast } from '../utils';
+import { emptyString, formatCron } from '../utils';
+import Badge from './Badge.svelte';
+// @ts-ignore
+import Multiselect from 'svelte-multiselect';
+import TimezonePicker from 'svelte-timezone-picker';
 import CollapseLink from './CollapseLink.svelte';
+import { Button } from './common';
+export let schedule;
+// export let offset: number = -60 * Math.floor(new Date().getTimezoneOffset() / 60)
+export let timezone; // = Intl.DateTimeFormat().resolvedOptions().timeZone
+export let disabled = false;
 export let validCRON = true;
 let preview = [];
-let cronError = '';
-export let schedule = '0 0 12 * *';
-export let disabled = false;
-let limit = 3;
-$: !emptyString(schedule) && handleScheduleInput(schedule);
-async function handleScheduleInput(input) {
+// If the user has already entered a cron string, switching to the basic tab will override it.
+let executeEvery = 'minute';
+let seconds = 30;
+let minutes = 30;
+let hours = 1;
+const daysOfMonthOptions = Array.from(Array(31).keys()).map((i) => i + 1);
+let daysOfMonth = [];
+// let lastDayOfMonth = false
+const monthsOfYearOptions = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+];
+let monthsOfYear = [];
+const daysOfWeekOptions = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+];
+let daysOfWeek = [];
+let UTCTime = '';
+$: !emptyString(schedule) && handleScheduleInput(schedule, timezone);
+async function handleScheduleInput(input, timezone) {
     try {
         preview = await ScheduleService.previewSchedule({
-            requestBody: { schedule: formatCron(input), offset: OFFSET }
+            requestBody: { schedule: formatCron(input), timezone }
         });
-        cronError = '';
         validCRON = true;
     }
     catch (err) {
         if (err.status == 400 && err.body.includes('cron')) {
-            cronError = `Invalid cron expression`;
             validCRON = false;
         }
         else {
@@ -30,60 +63,264 @@ async function handleScheduleInput(input) {
         }
     }
 }
+let nschedule = '';
+$: {
+    // CRON string format
+    // sec  min   hour      day of month   month     day of week   year
+    // 0    30    9,12,15   1,15           May-Aug   Mon,Wed,Fri   2018/2
+    let s_daysOfMonth = '';
+    // if (lastDayOfMonth) {
+    // 	s_daysOfMonth = 'L'
+    // } else
+    if (daysOfMonth.length > 0) {
+        s_daysOfMonth = daysOfMonth.join(',');
+    }
+    else {
+        s_daysOfMonth = '*';
+    }
+    let s_months = '';
+    if (monthsOfYear.length > 0) {
+        s_months = monthsOfYear.map((m) => m.slice(0, 3).toLowerCase()).join(',');
+    }
+    else {
+        s_months = '*';
+    }
+    let s_daysOfWeek = '';
+    if (daysOfWeek.length > 0) {
+        s_daysOfWeek = daysOfWeek.map((d) => d.slice(0, 3).toLowerCase()).join(',');
+    }
+    else {
+        s_daysOfWeek = '*';
+    }
+    const s_AtUTCHours = parseInt(UTCTime.split(':')[0]) || '0';
+    const s_AtUTCMinutes = parseInt(UTCTime.split(':')[1]) || '0';
+    // If using the basic editor, set the cron string based on the selected options
+    if (executeEvery === 'second') {
+        if (seconds > 0) {
+            nschedule = `*/${seconds} * * * *`;
+        }
+        else {
+            nschedule = `* * * * *`;
+        }
+    }
+    else if (executeEvery === 'minute') {
+        if (minutes > 0) {
+            nschedule = `0 */${minutes} * * *`;
+        }
+        else {
+            nschedule = `* * * * *`;
+        }
+    }
+    else if (executeEvery === 'hour') {
+        if (hours > 0) {
+            nschedule = `0 0 */${hours} * *`;
+        }
+        else {
+            nschedule = `* * * * *`;
+        }
+    }
+    else if (executeEvery === 'day-month') {
+        nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} ${s_daysOfMonth} *`;
+    }
+    else if (executeEvery === 'month') {
+        nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} ${s_daysOfMonth} ${s_months}`;
+    }
+    else if (executeEvery === 'day-week') {
+        nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} * * ${s_daysOfWeek}`;
+    }
+}
+$: dateFormatter = new Intl.DateTimeFormat('en-GB', {
+    weekday: 'short',
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    timeZone: timezone,
+    timeZoneName: 'short'
+}).format;
 </script>
 
-<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 !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="w-full flex space-x-16 p-4">
+	<div class="w-full flex flex-col space-y-2">
+		<div class="w-full flex flex-col gap-1">
+			<small class="font-bold">Cron</small>
+			<input
+				class="inline-block"
+				type="text"
+				id="cron-schedule"
+				name="cron-schedule"
+				placeholder="*/30 * * * *"
+				bind:value={schedule}
+				{disabled}
+			/>
+			{#if !validCRON}
+				<small class="text-red-600"> Invalid cron syntax </small>
+			{/if}
 		</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>
+		<div class="w-full flex flex-col gap-1">
+			<small class="font-bold">Timezone</small>
+
+			{#if disabled}
+				<div>
+					<Badge>{timezone}</Badge>
+				</div>
+			{:else}
+				<TimezonePicker {timezone} on:update={(e) => (timezone = e.detail.timezone)} />
+			{/if}
+		</div>
+
+		{#if !disabled}
+			<div class="w-full">
+				<CollapseLink text="Use simplified builder">
+					<div class="w-full flex flex-col gap-4 mt-4">
+						<div class="w-full flex flex-col gap-1">
+							<small class="font-bold">Execute schedule every</small>
+
+							<div class="w-full flex gap-4">
+								<div class="w-full flex flex-col gap-1">
+									<select
+										{disabled}
+										name="execute_every"
+										id="execute_every"
+										bind:value={executeEvery}
+									>
+										<option value="second">Second(s)</option>
+										<option value="minute">Minute(s)</option>
+										<option value="hour">Hour(s)</option>
+										<option value="day-month">Day of the month</option>
+										<option value="month">Month(s)</option>
+										<option value="day-week">Day of the week</option>
+									</select>
+								</div>
+
+								<div class="w-full flex flex-col gap-1 justify-center">
+									{#if executeEvery == 'second'}
+										<input {disabled} type="number" min="0" max="59" bind:value={seconds} />
+										<small>Valid range 0-59</small>
+									{:else if executeEvery == 'minute'}
+										<input {disabled} type="number" min="0" max="59" bind:value={minutes} />
+										<small>Valid range 0-59</small>
+									{:else if executeEvery == 'hour'}
+										<input {disabled} type="number" min="0" max="23" bind:value={hours} />
+										<small>Valid range 0-23</small>
+									{:else if executeEvery == 'day-month'}
+										<!-- <div class="w-full flex">
+									<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
+										<div class="flex">
+											<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
+										</div>
+										<small> Last day of the month </small>
+									</label>
+								</div> -->
+									{/if}
+								</div>
+							</div>
+						</div>
+
+						<div class="w-full flex flex-col gap-4">
+							{#if executeEvery == 'month'}
+								<div class="w-full flex flex-col">
+									<Multiselect
+										{disabled}
+										bind:selected={monthsOfYear}
+										options={monthsOfYearOptions}
+										selectedOptionsDraggable={false}
+										placeholder="Every month"
+									/>
+								</div>
+							{/if}
+
+							{#if executeEvery == 'day-week'}
+								<div class="w-full flex flex-col">
+									<Multiselect
+										{disabled}
+										bind:selected={daysOfWeek}
+										options={daysOfWeekOptions}
+										selectedOptionsDraggable={false}
+										placeholder="Every day"
+									/>
+								</div>
+							{/if}
+
+							{#if executeEvery == 'day-month' || executeEvery == 'month'}
+								<div class="w-full flex flex-col gap-1">
+									{#if executeEvery == 'month'}
+										<small class="font-bold">On day of the month</small>
+									{/if}
+									<div class="w-full flex gap-4">
+										<div class="w-full flex">
+											<Multiselect
+												{disabled}
+												bind:selected={daysOfMonth}
+												options={daysOfMonthOptions}
+												selectedOptionsDraggable={false}
+												placeholder="Every day"
+											/>
+										</div>
+
+										<!-- {#if executeEvery == 'month'}
+									<div class="w-full flex">
+										<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
+											<div class="flex">
+												<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
+											</div>
+											<small> Last day of the month </small>
+										</label>
+									</div>
+								{/if} -->
+									</div>
+									<small>Schedule will only execute on valid calendar days</small>
+								</div>
+							{/if}
+
+							{#if executeEvery == 'day-month' || executeEvery == 'month' || executeEvery == 'day-week'}
+								<div class="w-full flex flex-col gap-1">
+									<small class="font-bold">At UTC Time</small>
+									<input
+										{disabled}
+										type="time"
+										name="atUTCTime"
+										id="atUTCTime"
+										bind:value={UTCTime}
+									/>
+								</div>
+							{/if}
+						</div>
+
+						<div class="w-full flex flex-col gap-1">
+							<small class="font-bold">Preview New Cron</small>
+
+							<div class="flex p-2 px-4 rounded-md bg-gray-100">
+								<span>{nschedule}</span>
+							</div>
+						</div>
+					</div>
+
+					<div class="mt-4">
+						<Button variant="border" color="dark" size="xs" on:click={() => (schedule = nschedule)}
+							>Set Schedule</Button
+						>
+					</div>
+				</CollapseLink>
 			</div>
 		{/if}
-	</CollapseLink>
+	</div>
+
+	<div class="w-full flex flex-col space-y-2">
+		<h3>Execution summary</h3>
+		<hr />
+		<div class="flex flex-col space-y-2">
+			<small>Estimated upcoming events ({timezone})</small>
+			<div class="flex flex-col rounded-md p-4 border text-gray-600">
+				{#each preview as date}
+					<div class="flex items-center space-x-2">
+						<span>{dateFormatter(new Date(date))}</span>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
 </div>

package/components/CronInput.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-export declare const OFFSET: number;
 declare const __propDef: {
     props: {
-        validCRON?: boolean | undefined;
-        schedule?: string | undefined;
+        schedule: string;
+        timezone: string;
         disabled?: boolean | undefined;
+        validCRON?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/DisplayResult.svelte

@@ -82,19 +82,17 @@ let jsonViewer;
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
 				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
-				class="mb-2 min-w-[360px] text-sm text-gray-700 relative"
+				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-0 right-2">
+				<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
-				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
+				class="grid grid-flow-col-dense border border-gray-200 rounded-md"
 			>
 				{#each Object.keys(result) as col}
 					<div class="flex flex-col max-h-40 min-w-full">
-						<div
-							class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md "
-						>
+						<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md">
 							{col}
 						</div>
 						{#if Array.isArray(result[col])}
@@ -108,7 +106,7 @@ let jsonViewer;
 				{/each}
 			</div>
 		{:else if !forceJson && resultKind == 'table-row'}<div
-				class="grid grid-flow-col-dense border border-gray-200 "
+				class="grid grid-flow-col-dense border border-gray-200"
 			>
 				<TableCustom>
 					<tbody slot="body">

package/components/Dropdown.svelte

@@ -39,8 +39,8 @@ const dispatch = createEventDispatcher();
 							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 
+					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-200' : ''}
 					 {item.separatorTop ? 'border-t' : ''} {item.separatorBottom ? 'border-b' : ''} {item.type ==
 					'delete'
@@ -64,7 +64,7 @@ const dispatch = createEventDispatcher();
 				<a
 					href={item.href}
 					on:click|stopPropagation|preventDefault={() => goto(item.href ?? '')}
-					class="block w-full px-4 font-semibold text-left  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 text-left py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"
 					tabindex="-1"
@@ -81,9 +81,10 @@ const dispatch = createEventDispatcher();
 					{item.displayName}
 				</a>
 			{: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="block text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"