windmill-components 1.408.2 → 1.430.3

package/package/components/RunPageSchedules.svelte

@@ -1,171 +1,221 @@
 <script>import ScheduleEditor from './ScheduleEditor.svelte';
-import { Badge, Button } from './common';
+import { Button } from './common';
 import { workspaceStore } from '../stores';
 import { ScheduleService } from '../gen';
-import { sendUserToast } from '../toast';
-import { base } from '../base';
-import Toggle from './Toggle.svelte';
-import { ListOrdered, Calendar, PenBox } from 'lucide-svelte';
-import JobArgs from './JobArgs.svelte';
+import { Calendar, Trash, Save } from 'lucide-svelte';
 import Skeleton from './common/skeleton/Skeleton.svelte';
-import Tooltip from './Tooltip.svelte';
+import Label from './Label.svelte';
+import { getContext } from 'svelte';
+import CronInput from './CronInput.svelte';
+import SchemaForm from './SchemaForm.svelte';
+import { emptyString, sendUserToast } from '../utils';
+import Toggle from './Toggle.svelte';
+import { loadSchedules, saveSchedule } from './flows/scheduleUtils';
+import { writable } from 'svelte/store';
+export let schema;
 export let isFlow;
 export let path;
 export let can_write;
+export let newItem = false;
+const { primarySchedule, triggersCount } = getContext('TriggerContext');
 let scheduleEditor;
-let schedule = undefined;
-let schedules = undefined;
-$: path && loadSchedule();
-$: path && loadSchedules();
-async function loadSchedule() {
-    try {
-        let exists = await ScheduleService.existsSchedule({
-            workspace: $workspaceStore ?? '',
-            path
-        });
-        if (exists) {
-            schedule = await ScheduleService.getSchedule({
-                workspace: $workspaceStore ?? '',
-                path
-            });
-        }
-        else {
-            schedule = false;
-        }
-    }
-    catch (e) {
-        console.log('no primary schedule');
-    }
-}
-async function loadSchedules() {
-    try {
-        schedules = (await ScheduleService.listSchedules({
-            workspace: $workspaceStore ?? '',
-            path,
-            isFlow
-        })).filter((s) => s.path != path);
-    }
-    catch (e) {
-        console.error('impossible to load schedules');
-    }
+let schedules = writable(undefined);
+let initialPrimarySchedule = writable(undefined);
+async function updateSchedules(forceRefresh) {
+    loadSchedules(forceRefresh, path, isFlow, schedules, primarySchedule, initialPrimarySchedule, $workspaceStore ?? '', triggersCount);
 }
-async function setScheduleEnabled(path, enabled) {
-    try {
-        await ScheduleService.setScheduleEnabled({
-            path,
-            workspace: $workspaceStore,
-            requestBody: { enabled }
-        });
-        loadSchedule();
-        sendUserToast(`Schedule ${enabled ? 'enabled' : 'disabled'}`);
-    }
-    catch (err) {
-        sendUserToast(`Cannot ` + (enabled ? 'disable' : 'enable') + ` schedule: ${err}`, true);
-        loadSchedule();
-    }
+$: updateSchedules(false) || path;
+async function save() {
+    await saveSchedule(path, newItem, $workspaceStore ?? '', primarySchedule, isFlow);
+    updateSchedules(true);
 }
 </script>
 
 <ScheduleEditor
 	on:update={() => {
-		loadSchedule()
-		loadSchedules()
+		updateSchedules(true)
 	}}
 	bind:this={scheduleEditor}
 />
 
-<div class="p-2 flex flex-col">
-	<Button
-		on:click={() => scheduleEditor?.openNew(isFlow, path)}
-		variant="border"
-		color="light"
-		size="xs"
-		startIcon={{ icon: Calendar }}
-	>
-		New Schedule
-	</Button>
-</div>
+<div class="flex flex-col gap-4 w-full">
+	{#if $primarySchedule == undefined}
+		<Skeleton layout={[[12]]} />
+	{:else if $primarySchedule}
+		<div class="w-full flex flex-col mb-4">
+			{#if can_write}
+				<div class="w-full flex-row-reverse flex mb-2">
+					<div class="flex flex-row gap-4">
+						<Button
+							on:click={() => {
+								$primarySchedule = false
+								$triggersCount = {
+									...($triggersCount ?? {}),
+									schedule_count: ($triggersCount?.schedule_count ?? 1) - 1,
+									primary_schedule: undefined
+								}
+							}}
+							variant="border"
+							color="light"
+							size="xs"
+							startIcon={{ icon: Trash }}
+						/>
+						{#if initialPrimarySchedule && !newItem}
+							<Toggle
+								disabled={emptyString($primarySchedule.cron)}
+								bind:checked={$primarySchedule.enabled}
+								options={{
+									right: 'Enabled'
+								}}
+								on:change={async (e) => {
+									if (!newItem) {
+										await ScheduleService.setScheduleEnabled({
+											path: path,
+											workspace: $workspaceStore ?? '',
+											requestBody: { enabled: e.detail }
+										})
+
+										sendUserToast(`${e.detail ? 'enabled' : 'disabled'} schedule ${path}`)
+									}
+								}}
+							/>
+						{/if}
 
-{#if schedule}
-	<div class="p-2 flex flex-col gap-2">
-		<div class="flex flex-row justify-between h-8">
-			<div class="flex flex-row gap-2 items-center">
-				<input
-					class="inline-block !w-32"
-					type="text"
-					id="cron-schedule"
-					name="cron-schedule"
-					placeholder="*/30 * * * *"
-					value={schedule.schedule}
-					disabled={true}
-				/>
-				<div>
-					<Badge color="indigo" small
-						>Primary&nbsp;<Tooltip light
-							>Share the same path as the script or flow it is attached to and its path get renamed
-							whenever the source path is renamed</Tooltip
-						></Badge
-					>
+						{#if !newItem}
+							<Button
+								on:click={save}
+								color="dark"
+								size="sm"
+								startIcon={{ icon: Save }}
+								disabled={JSON.stringify({ ...$primarySchedule, enabled: true }) ==
+									JSON.stringify({ ...initialPrimarySchedule, enabled: true })}
+								>Apply changes now</Button
+							>
+						{:else}
+							<div class="text-sm text-secondary mt-1 text-center"
+								>Deployed automatically with {isFlow ? 'flow' : 'script'}</div
+							>
+						{/if}
+					</div>
 				</div>
+			{/if}
+
+			<!-- svelte-ignore a11y-autofocus -->
+			<div class="mt-5">
+				<Label label="Summary" class="font-semibold" primary>
+					<input
+						autofocus
+						type="text"
+						placeholder="Short summary to be displayed when listed"
+						class="text-sm w-full"
+						bind:value={$primarySchedule.summary}
+					/>
+				</Label>
 			</div>
-			<div class="flex flex-row gap-2 items-center">
-				<Toggle
-					checked={schedule.enabled}
-					on:change={(e) => {
-						if (can_write) {
-							setScheduleEnabled(path, e.detail)
-						} else {
-							sendUserToast('not enough permission', true)
+		</div>
+		<CronInput bind:schedule={$primarySchedule.cron} bind:timezone={$primarySchedule.timezone} />
+		<SchemaForm {schema} bind:args={$primarySchedule.args} />
+		{#if emptyString($primarySchedule.cron)}
+			<p class="text-xs text-tertiary mt-10">Define a schedule frequency first</p>
+		{/if}
+
+		{#if $initialPrimarySchedule != false}
+			<div class="flex">
+				<Button size="xs" color="light" on:click={() => scheduleEditor?.openEdit(path, isFlow)}
+					>Advanced</Button
+				>
+			</div>
+		{/if}
+	{:else}
+		<div class="flex flex-row gap-4 mt-2">
+			<div class="flex items-center">
+				<Button
+					on:click={() => {
+						$primarySchedule = {
+							summary: '',
+							args: {},
+							cron: '0 0 */1 * * *',
+							timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+							enabled: true
+						}
+						$triggersCount = {
+							...($triggersCount ?? {}),
+							schedule_count: ($triggersCount?.schedule_count ?? 0) + 1,
+							primary_schedule: { schedule: $primarySchedule.cron }
 						}
 					}}
-					options={{
-						right: 'On'
-					}}
-					size="xs"
-				/>
-				<Button size="xs" variant="border" color="light" href={`${base}/runs/${path}`}>
-					<div class="flex flex-row gap-2">
-						<ListOrdered size={14} />
-						Runs
-					</div>
-				</Button>
-				<Button
-					size="xs"
+					variant="contained"
 					color="dark"
-					on:click={() => scheduleEditor?.openEdit(path ?? '', isFlow)}
+					size="md"
+					startIcon={{ icon: Calendar }}
 				>
-					<PenBox size={14} />
+					Set Primary Schedule
 				</Button>
 			</div>
+			{#if $initialPrimarySchedule != undefined && $initialPrimarySchedule != false && !newItem}
+				<Button on:click={save} color="dark" size="md" startIcon={{ icon: Save }}>
+					Apply changes now
+				</Button>
+			{:else}
+				<div class="text-sm text-center text-secondary mt-2"
+					>Deployed automatically with {isFlow ? 'flow' : 'script'}</div
+				>
+			{/if}
 		</div>
-		{#if Object.keys(schedule?.args ?? {}).length > 0}
-			<div class="">
-				<JobArgs args={schedule.args ?? {}} />
-			</div>
-		{:else}
-			<div class="text-xs texg-gray-700"> No arguments </div>
-		{/if}
-	</div>
-{:else if schedule == undefined}
-	<Skeleton layout={[[6]]} />
-{/if}
 
-<h3 class="px-2 pt-4">Other schedules</h3>
+		<Label label="Summary" class="font-semibold" primary>
+			<input
+				type="text"
+				disabled
+				placeholder="Short summary to be displayed when listed"
+				class="text-sm w-full"
+			/>
+		</Label>
+		<CronInput schedule={''} disabled timezone={Intl.DateTimeFormat().resolvedOptions().timeZone} />
 
-{#if schedules}
-	{#if schedules.length == 0}
-		<div class="text-xs text-secondary px-2"> No other schedules </div>
-	{:else}
-		<div class="flex flex-col divide-y px-2 pt-2">
-			{#each schedules as schedule (schedule.path)}
-				<div class="grid grid-cols-6 text-2xs items-center py-2"
-					><div class="col-span-3 truncate">{schedule.path}</div><div>{schedule.schedule}</div>
-					<div>{schedule.enabled ? 'on' : 'off'}</div>
-					<button on:click={() => scheduleEditor?.openEdit(schedule.path, isFlow)}>Edit</button>
-				</div>
-			{/each}
-		</div>
+		<SchemaForm disabled {schema} />
+	{/if}
+
+	{#if !newItem}
+		<div class="mt-10" />
+		{#if $primarySchedule}
+			<Button
+				on:click={() => scheduleEditor?.openNew(isFlow, path)}
+				variant="border"
+				color="light"
+				size="xs"
+				startIcon={{ icon: Calendar }}
+			>
+				New Schedule
+			</Button>
+		{/if}
+
+		<Label label="Other schedules">
+			{#if $schedules}
+				{#if $schedules.length == 0 || $schedules == undefined}
+					<div class="text-xs text-tertiary"> No other schedules </div>
+				{:else}
+					<div class="flex flex-col divide-y">
+						{#each $schedules as schedule (schedule.path)}
+							<div class="grid grid-cols-6 text-xs items-center py-2">
+								<div class="col-span-3 truncate">{schedule.path}</div>
+								<div class="col-span-2 flex flex-row gap-4 flex-nowrap">
+									<div>{schedule.schedule}</div>
+									<div>{schedule.enabled ? 'on' : 'off'}</div>
+								</div>
+								<div class="flex justify-end">
+									<button
+										on:click={() => scheduleEditor?.openEdit(schedule.path, isFlow)}
+										class="px-2">Edit</button
+									>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			{:else}
+				<Skeleton layout={[[8]]} />
+			{/if}
+		</Label>
 	{/if}
-{:else}
-	<Skeleton layout={[[8]]} />
-{/if}
+</div>

package/package/components/RunPageSchedules.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        schema: any;
         isFlow: boolean;
         path: string;
         can_write: boolean;
+        newItem?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/S3FilePicker.svelte

@@ -11,6 +11,7 @@ import VirtualList from 'svelte-tiny-virtual-list';
 import TableSimple from './TableSimple.svelte';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import FileUploadModal from './common/fileUpload/FileUploadModal.svelte';
+import PdfViewer from './display/PdfViewer.svelte';
 let deletionModalOpen = false;
 let fileDeletionInProgress = false;
 let fileListUnavailable = undefined;
@@ -179,6 +180,16 @@ async function loadFilePreview(fileKey, fileSizeInBytes, fileMimeType) {
             contentPreview: filePreviewContent,
             contentType: filePreviewRaw.content_type
         };
+        if (fileMetadata) {
+            fileMetadata.mimeType =
+                ((fileKey.endsWith('.png') ||
+                    fileKey.endsWith('.jpg') ||
+                    fileKey.endsWith('.jpeg') ||
+                    fileKey.endsWith('.webp')) &&
+                    'Image') ||
+                    (fileKey.endsWith('.pdf') && 'PDF') ||
+                    filePreview.contentType;
+        }
     }
     filePreviewLoading = false;
     fileInfoLoading = false;
@@ -548,6 +559,13 @@ function selectItem(index, toggleCollapsed = true) {
 									alt="S3 preview"
 								/>
 							</div>
+						{:else if fileMetadata?.fileKey.endsWith('.pdf')}
+							<div class="w-full h-[950px] border">
+								<PdfViewer
+									source={`/api/w/${$workspaceStore}/job_helpers/load_image_preview?file_key=${fileMetadata.fileKey}` +
+										(storage ? `&storage=${storage}` : '')}
+								/>
+							</div>
 						{:else if filePreviewLoading}
 							<div class="flex h-6 items-center text-tertiary mb-4">
 								<Loader2 size={12} class="animate-spin mr-1" /> File preview loading

package/package/components/S3FilePicker.svelte.d.ts

@@ -11,7 +11,7 @@ declare const __propDef: {
         } | undefined;
         open?: ((preSelectedFileKey?: {
             s3: string;
-            storage: string | undefined;
+            storage?: string | undefined;
         } | undefined) => Promise<void>) | undefined;
     };
     events: {
@@ -29,7 +29,7 @@ export type S3FilePickerSlots = typeof __propDef.slots;
 export default class S3FilePicker extends SvelteComponent<S3FilePickerProps, S3FilePickerEvents, S3FilePickerSlots> {
     get open(): (preSelectedFileKey?: {
         s3: string;
-        storage: string | undefined;
+        storage?: string | undefined;
     } | undefined) => Promise<void>;
 }
 export {};

package/package/components/ScheduleEditorInner.svelte

@@ -11,11 +11,11 @@ import Tooltip from './Tooltip.svelte';
 import Dropdown from './DropdownV2.svelte';
 import { FlowService, ScheduleService, ScriptService, SettingService } from '../gen';
 import { enterpriseLicense, userStore, workspaceStore } from '../stores';
-import { canWrite, emptyString, formatCron, sendUserToast } from '../utils';
+import { canWrite, emptyString, formatCron, sendUserToast, cronV1toV2 } from '../utils';
 import { base } from '../base';
 import { createEventDispatcher } from 'svelte';
 import Section from './Section.svelte';
-import { List, Loader2, Save } from 'lucide-svelte';
+import { List, Loader2, Save, AlertTriangle } from 'lucide-svelte';
 import FlowRetries from './flows/content/FlowRetries.svelte';
 import WorkerTagPicker from './WorkerTagPicker.svelte';
 import Label from './Label.svelte';
@@ -25,6 +25,10 @@ let is_flow = false;
 let initialPath = '';
 let edit = true;
 let schedule = '0 0 12 * *';
+let cronVersion = 'v2';
+let isLatestCron = true;
+let initialCronVersion = 'v2';
+let initialSchedule;
 let timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 let paused_until = undefined;
 let itemKind = 'script';
@@ -291,8 +295,12 @@ async function loadSchedule() {
             workspace: $workspaceStore,
             path: initialPath
         });
+        cronVersion = s.cron_version ?? 'v2';
+        initialCronVersion = cronVersion;
+        isLatestCron = cronVersion == 'v2';
         enabled = s.enabled;
         schedule = s.schedule;
+        initialSchedule = schedule;
         timezone = s.timezone;
         paused_until = s.paused_until;
         showPauseUntil = paused_until !== undefined;
@@ -401,7 +409,8 @@ async function scheduleScript() {
                 summary: summary != '' ? summary : undefined,
                 no_flow_overlap: no_flow_overlap,
                 tag: tag,
-                paused_until: paused_until
+                paused_until: paused_until,
+                cron_version: cronVersion
             }
         });
         sendUserToast(`Schedule ${path} updated`);
@@ -435,7 +444,8 @@ async function scheduleScript() {
                 summary: summary != '' ? summary : undefined,
                 no_flow_overlap: no_flow_overlap,
                 tag: tag,
-                paused_until: paused_until
+                paused_until: paused_until,
+                cron_version: cronVersion
             }
         });
         sendUserToast(`Schedule ${path} created`);
@@ -467,6 +477,19 @@ let pathC;
 let dirtyPath = false;
 let showPauseUntil = false;
 $: !showPauseUntil && (paused_until = undefined);
+function onVersionChange() {
+    cronVersion = isLatestCron ? 'v2' : 'v1';
+    if (cronVersion === 'v2' && initialCronVersion === 'v1') {
+        // switches day-of-week from v1 -> v2
+        schedule = cronV1toV2(schedule);
+    }
+    else if (cronVersion === 'v1' &&
+        initialCronVersion === 'v1' &&
+        schedule !== initialSchedule) {
+        // revert back to original
+        schedule = initialSchedule;
+    }
+}
 </script>
 
 <Drawer size="900px" bind:this={drawer}>
@@ -492,13 +515,14 @@ $: !showPauseUntil && (paused_until = undefined);
 						<Toggle
 							disabled={!can_write}
 							checked={enabled}
-							options={{ right: 'enable', left: 'disable' }}
+							options={{ right: 'Enabled' }}
 							on:change={async (e) => {
 								await ScheduleService.setScheduleEnabled({
 									path: initialPath,
 									workspace: $workspaceStore ?? '',
 									requestBody: { enabled: e.detail }
 								})
+								dispatch('update')
 								sendUserToast(`${e.detail ? 'enabled' : 'disabled'} schedule ${initialPath}`)
 							}}
 						/>
@@ -585,9 +609,41 @@ $: !showPauseUntil && (paused_until = undefined);
 
 				<Section label="Schedule">
 					<svelte:fragment slot="header">
-						<Tooltip>Schedules use CRON syntax. Seconds are mandatory.</Tooltip>
+						{#if cronVersion === 'v1'}
+							<Tooltip>Schedules use CRON syntax. Seconds are mandatory.</Tooltip>
+						{:else}
+							<Tooltip
+								>Schedules use <a
+									href="https://www.windmill.dev/docs/core_concepts/scheduling#cron-syntax"
+									>extended CRON syntax</a
+								>.</Tooltip
+							>
+						{/if}
 					</svelte:fragment>
-					<CronInput disabled={!can_write} bind:schedule bind:timezone bind:validCRON />
+					{#if initialCronVersion !== 'v2'}
+						<div class="flex flex-row">
+							<AlertTriangle color="orange" class="mr-2" size={16} />
+							<Toggle
+								options={{
+									right: 'enable latest Cron syntax',
+									rightTooltip:
+										'The latest Cron syntax is more flexible and allows for more complex schedules. See the documentation for more information.',
+									rightDocumentationLink:
+										'https://www.windmill.dev/docs/core_concepts/scheduling#cron-syntax'
+								}}
+								size="xs"
+								bind:checked={isLatestCron}
+								on:change={onVersionChange}
+							/>
+						</div>
+					{/if}
+					<CronInput
+						disabled={!can_write}
+						bind:schedule
+						bind:timezone
+						bind:validCRON
+						bind:cronVersion
+					/>
 					<Toggle
 						options={{
 							right: 'Pause schedule until...',

package/package/components/SchemaViewer.svelte

@@ -1,4 +1,4 @@
-<script>import { emptySchema } from '../utils';
+<script>import { copyToClipboard, emptySchema } from '../utils';
 import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
 import TableCustom from './TableCustom.svelte';
@@ -7,6 +7,8 @@ import TabContent from './common/tabs/TabContent.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import { Badge } from './common';
 import HighlightTheme from './HighlightTheme.svelte';
+import Button from './common/button/Button.svelte';
+import { ClipboardCopy } from 'lucide-svelte';
 export let schema = emptySchema();
 function getProperties(schema) {
     if (schema.properties) {
@@ -74,7 +76,19 @@ function getProperties(schema) {
 					{/if}
 				</TabContent>
 				<TabContent value="advanced">
-					<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
+					<div class="h-full relative">
+						<Button
+							wrapperClasses="absolute top-2 right-2 z-20"
+							on:click={() => copyToClipboard(JSON.stringify(schema, null, 4))}
+							color="light"
+							size="xs2"
+							startIcon={{
+								icon: ClipboardCopy
+							}}
+							iconOnly
+						/>
+						<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
+					</div>
 				</TabContent>
 			</div>
 		</svelte:fragment>