windmill-components 1.85.0 → 1.87.0

package/dist/components/home/ItemsList.svelte

@@ -0,0 +1,332 @@
+<script>import CenteredPage from '../CenteredPage.svelte';
+import { Alert, Badge, Skeleton, ToggleButton, ToggleButtonGroup } from '../common';
+import ShareModal from '../ShareModal.svelte';
+import Toggle from '../Toggle.svelte';
+import { AppService, FlowService, ListableApp, Script, ScriptService } from '../../gen';
+import { userStore, workspaceStore } from '../../stores';
+import { canWrite } from '../../utils';
+import { Code2, LayoutDashboard } from 'lucide-svelte';
+export let filter = '';
+import AppRow from '../common/table/AppRow.svelte';
+import FlowRow from '../common/table/FlowRow.svelte';
+import ScriptRow from '../common/table/ScriptRow.svelte';
+import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from 'svelte-awesome';
+import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte';
+import MoveDrawer from '../MoveDrawer.svelte';
+import SearchItems from '../SearchItems.svelte';
+import ListFilters from './ListFilters.svelte';
+import NoItemFound from './NoItemFound.svelte';
+let scripts;
+let flows;
+let apps;
+let filteredItems = [];
+let itemKind = 'all';
+let shareModal;
+let moveDrawer;
+let loading = true;
+let nbDisplayed = 30;
+export let deleteConfirmedCallback = undefined;
+async function loadScripts() {
+    const loadedScripts = await ScriptService.listScripts({
+        workspace: $workspaceStore,
+        showArchived: archived ? true : undefined,
+        perPage: 300
+    });
+    scripts = loadedScripts.map((script) => {
+        return {
+            canWrite: canWrite(script.path, script.extra_perms, $userStore) &&
+                script.workspace_id == $workspaceStore &&
+                !$userStore?.operator,
+            ...script
+        };
+    });
+    loading = false;
+}
+async function loadFlows() {
+    flows = (await FlowService.listFlows({
+        workspace: $workspaceStore,
+        showArchived: archived ? true : undefined
+    })).map((x) => {
+        return {
+            canWrite: canWrite(x.path, x.extra_perms, $userStore) &&
+                x.workspace_id == $workspaceStore &&
+                !$userStore?.operator,
+            ...x
+        };
+    });
+    loading = false;
+}
+async function loadApps() {
+    apps = (await AppService.listApps({ workspace: $workspaceStore })).map((app) => {
+        return {
+            canWrite: canWrite(app.path, app.extra_perms, $userStore) &&
+                app.workspace_id == $workspaceStore &&
+                !$userStore?.operator,
+            ...app
+        };
+    });
+    loading = false;
+}
+$: owners = Array.from(new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])).sort();
+let combinedItems = undefined;
+$: combinedItems =
+    flows == undefined || scripts == undefined || apps == undefined
+        ? undefined
+        : [
+            ...flows.map((x) => ({
+                ...x,
+                type: 'flow',
+                time: new Date(x.edited_at).getTime()
+            })),
+            ...scripts.map((x) => ({
+                ...x,
+                type: 'script',
+                time: new Date(x.created_at).getTime()
+            })),
+            ...apps.map((x) => ({
+                ...x,
+                type: 'app',
+                time: new Date(x.edited_at).getTime()
+            }))
+        ].sort((a, b) => a.starred != b.starred ? (a.starred ? -1 : 1) : a.time - b.time > 0 ? -1 : 1);
+$: preFilteredItems =
+    ownerFilter != undefined
+        ? combinedItems?.filter((x) => x.path.startsWith(ownerFilter ?? '') && (x.type == itemKind || itemKind == 'all'))
+        : combinedItems?.filter((x) => x.type == itemKind || itemKind == 'all');
+let ownerFilter = undefined;
+$: if ($workspaceStore) {
+    ownerFilter = undefined;
+}
+$: {
+    if ($userStore && $workspaceStore) {
+        loadScripts();
+        loadFlows();
+        if (!archived) {
+            loadApps();
+        }
+        else {
+            apps = [];
+        }
+    }
+}
+const cmp = new Intl.Collator('en').compare;
+const opts = {
+    sort: (info, haystack, needle) => {
+        let { idx, chars, terms, interLft2, interLft1, 
+        //	interRgt2,
+        //	interRgt1,
+        start, intraIns, interIns } = info;
+        const sortResult = idx
+            .map((v, i) => i)
+            .sort((ia, ib) => 
+        // most contig chars matched
+        chars[ib] - chars[ia] ||
+            // least char intra-fuzz (most contiguous)
+            intraIns[ia] - intraIns[ib] ||
+            // most prefix bounds, boosted by full term matches
+            terms[ib] +
+                interLft2[ib] +
+                0.5 * interLft1[ib] -
+                (terms[ia] + interLft2[ia] + 0.5 * interLft1[ia]) ||
+            // highest density of match (least span)
+            //	span[ia] - span[ib] ||
+            // highest density of match (least term inter-fuzz)
+            interIns[ia] - interIns[ib] ||
+            // earliest start of match
+            start[ia] - start[ib] ||
+            // alphabetic
+            cmp(haystack[idx[ia]], haystack[idx[ib]]) +
+                (preFilteredItems?.[idx[ib]]?.starred ? 100 : 0) -
+                (preFilteredItems?.[idx[ia]]?.starred ? 100 : 0));
+        return sortResult;
+    }
+};
+$: items = filter !== '' ? filteredItems : preFilteredItems;
+function resetScroll() {
+    const element = document.getElementsByTagName('svelte-virtual-list-viewport');
+    const firstElement = element.item(0);
+    if (firstElement) {
+        firstElement.scrollTop = 0;
+    }
+}
+$: items && resetScroll();
+let archived = false;
+</script>
+
+<SearchItems
+	{filter}
+	items={preFilteredItems}
+	bind:filteredItems
+	f={(x) => (x.summary ? x.summary + ' (' + x.path + ')' : x.path)}
+	{opts}
+/>
+
+<ShareModal
+	bind:this={shareModal}
+	on:change={() => {
+		loadScripts()
+		loadApps()
+		loadFlows()
+	}}
+/>
+
+<MoveDrawer
+	bind:this={moveDrawer}
+	on:update={() => {
+		loadScripts()
+		loadApps()
+		loadFlows()
+	}}
+/>
+
+<CenteredPage>
+	<div class="flex flex-wrap gap-2 items-center justify-between w-full">
+		<div class="flex justify-start">
+			<ToggleButtonGroup bind:selected={itemKind}>
+				<ToggleButton light position="left" value="all" size="sm">All</ToggleButton>
+				<ToggleButton light position="center" value="script" size="sm">
+					<div class="flex gap-1 items-center">
+						<Code2 size={16} />
+						Scripts
+					</div>
+				</ToggleButton>
+				<ToggleButton light position="center" value="flow" size="sm">
+					<div class="flex gap-1 items-center">
+						<Icon data={faBarsStaggered} scale={0.8} class="mr-1" />
+						Flows
+					</div>
+				</ToggleButton>
+				<ToggleButton light position="right" value="app" size="sm">
+					<div class="flex gap-1 items-center">
+						<LayoutDashboard size={16} />
+						Apps
+					</div>
+				</ToggleButton>
+			</ToggleButtonGroup>
+		</div>
+
+		<div class="relative text-gray-600 grow min-w-[100px]">
+			<!-- svelte-ignore a11y-autofocus -->
+			<input
+				autofocus
+				placeholder="Search Scripts, Flows & Apps"
+				bind:value={filter}
+				class="bg-white !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
+			/>
+			<button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
+				<svg
+					class="h-4 w-4 fill-current"
+					xmlns="http://www.w3.org/2000/svg"
+					xmlns:xlink="http://www.w3.org/1999/xlink"
+					version="1.1"
+					id="Capa_1"
+					x="0px"
+					y="0px"
+					viewBox="0 0 56.966 56.966"
+					style="enable-background:new 0 0 56.966 56.966;"
+					xml:space="preserve"
+					width="512px"
+					height="512px"
+				>
+					<path
+						d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
+					/>
+				</svg>
+			</button>
+		</div>
+	</div>
+	<div class="relative">
+		<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
+		{#if filteredItems?.length == 0}
+			<div class="mt-10" />
+		{/if}
+		{#if !loading}
+			<div class="absolute -bottom-2 right-0 bg-white/90">
+				<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} /></div
+			>
+		{/if}
+	</div>
+	<div>
+		{#if filteredItems == undefined}
+			<div class="mt-4" />
+			<Skeleton layout={[[2], 1]} />
+			{#each new Array(6) as _}
+				<Skeleton layout={[[4], 0.5]} />
+			{/each}
+		{:else if filteredItems.length === 0}
+			<NoItemFound />
+		{:else}
+			<div class="border rounded-md divide-y divide-gray-200">
+				<!-- <VirtualList {items} let:item bind:start bind:end> -->
+				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path)}
+					{#if item.type == 'script'}
+						<ScriptRow
+							bind:deleteConfirmedCallback
+							starred={item.starred ?? false}
+							marked={item.marked}
+							on:change={loadScripts}
+							script={item}
+							{shareModal}
+							{moveDrawer}
+						/>
+					{:else if item.type == 'flow'}
+						<FlowRow
+							bind:deleteConfirmedCallback
+							starred={item.starred ?? false}
+							marked={item.marked}
+							on:change={loadFlows}
+							flow={item}
+							{shareModal}
+							{moveDrawer}
+						/>
+					{:else if item.type == 'app'}
+						<AppRow
+							bind:deleteConfirmedCallback
+							starred={item.starred ?? false}
+							marked={item.marked}
+							on:change={loadApps}
+							app={item}
+							{moveDrawer}
+							{shareModal}
+						/>
+					{/if}
+				{/each}
+				<!-- </VirtualList> -->
+			</div>
+			{#if items && items?.length > 30}
+				<span class="text-xs"
+					>{nbDisplayed} items out of {items.length}
+					<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+				>
+			{/if}
+			<div class="pb-80" />
+		{/if}
+	</div>
+</CenteredPage>
+
+<ConfirmationModal
+	open={Boolean(deleteConfirmedCallback)}
+	title="Remove"
+	confirmationText="Remove"
+	on:canceled={() => {
+		deleteConfirmedCallback = undefined
+	}}
+	on:confirmed={() => {
+		if (deleteConfirmedCallback) {
+			deleteConfirmedCallback()
+		}
+		deleteConfirmedCallback = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to remove it?</span>
+		<Alert type="info" title="Bypass confirmation">
+			<div>
+				You can press
+				<Badge color="dark-gray">SHIFT</Badge>
+				while removing to bypass confirmation.
+			</div>
+		</Alert>
+	</div>
+</ConfirmationModal>

package/dist/components/icons/WindmillIcon.svelte

@@ -0,0 +1,105 @@
+<script>export let height = '24px';
+export let width = '24px';
+export let white = false;
+export let spin = undefined;
+</script>
+
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg
+	class={$$props.class}
+	class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
+	class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
+	class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
+	version="1.1"
+	id="Calque_1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 256 256"
+	style="enable-background:new 0 0 256 256;"
+	xml:space="preserve"
+>
+	<style>
+		.st0 {
+			fill: #ffffff;
+		}
+		.st1 {
+			opacity: 0.4;
+			fill: #ffffff;
+		}
+		.st2 {
+			fill: #bcd4fc;
+		}
+		.st3 {
+			fill: #3b82f6;
+		}
+		.st4 {
+			fill: #b3b3b3;
+		}
+		.st5 {
+			fill: url(#SVGID_1_);
+		}
+		.st6 {
+			fill: url(#SVGID_00000021089067129159788970000008246765442136188072_);
+		}
+		.st7 {
+			fill: url(#SVGID_00000117639240116366130650000015074833605515028638_);
+		}
+		.st8 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000101781798616409025840000016567063639337360777_);
+		}
+		.st9 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000052086836598721292040000002033117744178971046_);
+		}
+		.st10 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000159460939004760751800000002448009281983951536_);
+		}
+		.st11 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000013177830667419993080000017721442101626521532_);
+		}
+		.st12 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000152235521444854938490000006526001119318383285_);
+		}
+		.st13 {
+			opacity: 0.4;
+			fill: url(#SVGID_00000119823135212293698520000012774889010992664993_);
+		}</style>
+	<g>
+		<polygon
+			class="st2"
+			points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22 	"
+		/>
+		<polygon
+			class:st3={!white}
+			class:st0={white}
+			points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02 	"
+		/>
+		<polygon
+			class:st3={!white}
+			class:st0={white}
+			points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46 	
+		"
+		/>
+		<polygon
+			class:st3={!white}
+			class:st0={white}
+			points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22 	"
+		/>
+		<polygon
+			class="st2"
+			points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21 	"
+		/>
+		<polygon
+			class="st2"
+			points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46 	"
+		/>
+	</g>
+</svg>

package/dist/components/icons/WindmillIcon.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        height?: string | undefined;
+        width?: string | undefined;
+        white?: boolean | undefined;
+        spin?: 'slow' | 'medium' | 'fast' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WindmillIconProps = typeof __propDef.props;
+export type WindmillIconEvents = typeof __propDef.events;
+export type WindmillIconSlots = typeof __propDef.slots;
+export default class WindmillIcon extends SvelteComponentTyped<WindmillIconProps, WindmillIconEvents, WindmillIconSlots> {
+}
+export {};

package/dist/components/jobs/JobDetail.svelte

@@ -0,0 +1,225 @@
+<script>import { goto } from '$app/navigation';
+import { page } from '$app/stores';
+import { displayDate, displayDaysAgo, forLater, msToSec, truncateHash, truncateRev } from '../../utils';
+import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faSearch, faTimes, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import { CalendarClock } from 'lucide-svelte';
+import { onDestroy, onMount } from 'svelte';
+import Icon from 'svelte-awesome';
+import { check } from 'svelte-awesome/icons';
+import { Badge } from '../common';
+import ScheduleEditor from '../ScheduleEditor.svelte';
+import JobPreview from './JobPreview.svelte';
+const SMALL_ICON_SCALE = 0.7;
+export let job;
+let scheduleEditor;
+let time = Date.now();
+let interval;
+onMount(() => {
+    interval = setInterval(() => {
+        time = Date.now();
+    }, 1000);
+});
+onDestroy(() => {
+    interval && clearInterval(interval);
+});
+function displayIfRecent(date) {
+    const d = new Date(date);
+    const now = new Date();
+    const diff = now.getTime() - d.getTime();
+    if (diff < 1000 * 600) {
+        return `(${displayDaysAgo(d.toString())})`;
+    }
+    else {
+        return '';
+    }
+}
+function endedDate(started_at, duration_ms) {
+    const started = new Date(started_at);
+    started.setMilliseconds(started.getMilliseconds() + duration_ms);
+    return `${displayDate(started)} ${displayIfRecent(started)}`;
+}
+</script>
+
+<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
+
+<div class="border border-gray-400 rounded py-4">
+	<div class="grid grid-cols-1 lg:grid-cols-4 w-full gap-4">
+		<div class="flex-col col-span-2">
+			<div class="flex flex-row text-sm">
+				{#if job === undefined}
+					No job found
+				{:else}
+					<div class="block text-center align-middle px-6">
+						{#if 'success' in job && job.success}
+							{#if job.is_skipped}
+								<Icon
+									class="text-green-600"
+									data={faFastForward}
+									scale={SMALL_ICON_SCALE}
+									label="Job completed successfully but was skipped"
+								/>
+							{:else}
+								<Icon
+									class="text-green-600"
+									data={check}
+									scale={SMALL_ICON_SCALE}
+									label="Job completed successfully"
+								/>
+							{/if}
+						{:else if 'success' in job}
+							<Icon
+								class="text-red-700"
+								data={faTimes}
+								scale={SMALL_ICON_SCALE}
+								label="Job completed with an error"
+							/>
+						{:else if 'running' in job && job.running}
+							<Icon
+								class="text-yellow-500"
+								data={faCircle}
+								scale={SMALL_ICON_SCALE}
+								label="Job is running"
+							/>
+						{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
+							<Icon
+								class="text-gray-700"
+								data={faCalendar}
+								scale={SMALL_ICON_SCALE}
+								label="Job is scheduled to run at a later time"
+							/>
+						{:else}
+							<Icon
+								class="text-gray-500"
+								data={faHourglassHalf}
+								scale={SMALL_ICON_SCALE}
+								label="Job is waiting for an executor"
+							/>
+						{/if}
+					</div>
+
+					<div class="flex flex-row space-x-2">
+						<JobPreview {job}>
+							<div class="whitespace-nowrap">
+								{#if job.script_path}
+									<a href="/run/{job.id}?workspace={job.workspace_id}">{job.script_path} </a>
+								{:else if 'job_kind' in job && job.job_kind == 'preview'}
+									<a href="/run/{job.id}?workspace={job.workspace_id}">Preview without path </a>
+								{:else if 'job_kind' in job && job.job_kind == 'dependencies'}
+									<a href="/run/{job.id}?workspace={job.workspace_id}"
+										>lock deps of {truncateHash(job.script_hash ?? '')}</a
+									>
+								{:else if 'job_kind' in job && job.job_kind == 'identity'}
+									<a href="/run/{job.id}?workspace={job.workspace_id}">no op</a>
+								{/if}
+								<button
+									class="ml-1"
+									on:click={() => {
+										goto(`/runs/${job.script_path}?${$page.url.searchParams.toString()}`)
+									}}><Badge><Icon scale={0.7} data={faSearch} /></Badge></button
+								>
+							</div>
+						</JobPreview>
+						<div class="whitespace-nowrap">
+							{#if 'job_kind' in job}<a href="/run/{job.id}"
+									><Badge color="blue">{job.job_kind}</Badge></a
+								>
+							{/if}
+							{#if job.is_flow_step && (job.job_kind == 'script' || job.job_kind == 'preview')}
+								<a href="/run/{job.parent_job}?workspace={job.workspace_id}"
+									><Badge color="gray">flow step</Badge></a
+								>
+							{/if}
+						</div>
+					</div>
+				{/if}
+			</div>
+			<div class="pl-14 italic text-gray-500 text-2xs whitespace-nowrap overflow-hidden"
+				>{truncateRev(job.id, 8, '')}</div
+			>
+		</div>
+		<div class="bg-white grid grid-cols-2 gap-x-2 col-span-2">
+			<div class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden">
+				<div>
+					<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+						By {job.created_by}</span
+					>
+				</div>
+				{#if job && 'duration_ms' in job && job.duration_ms != undefined}
+					<div>
+						<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span
+							class="mx-2"
+						>
+							Ran in {msToSec(job.duration_ms)}s</span
+						>
+					</div>
+				{/if}
+			</div>
+			<div class="text-gray-500 text-xs text-left place-self-start flex flex-col gap-1">
+				{#if 'started_at' in job && job.started_at}
+					<div>
+						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+							class="mx-1.5"
+						>
+							<span>
+								{#if job?.['duration_ms']}
+									Ended {#key time}
+										{endedDate(job.started_at, job?.['duration_ms'])}{/key}
+								{:else}
+									Started {#key time}
+										{displayDaysAgo(job.started_at ?? '')}{/key}
+								{/if}</span
+							>
+						</span></div
+					>
+				{/if}
+				{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
+					<div class="inline-flex gap-1">
+						<CalendarClock size={13} class="-ml-0.5" />
+						<span>
+							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1">Scheduled</span>
+							for {displayDate(job.scheduled_for ?? '')}
+						</span>
+					</div>
+				{:else if 'scheduled_for' in job && !job.running}
+					<div>
+						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+							class="mx-2"
+						>
+							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1"
+								>Waiting for an executor</span
+							>
+						</span>
+					</div>
+				{/if}
+				<div>
+					{#if job && job.parent_job}
+						{#if job.is_flow_step}
+							<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
+								class="mx-1"
+							>
+								Step of flow <a href={`/run/${job.parent_job}`}>{truncateRev(job.parent_job, 6)}</a
+								></span
+							>
+						{:else}
+							<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
+								class="mx-1"
+							>
+								Parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
+							>
+						{/if}
+					{:else if job && job.schedule_path}
+						<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
+						<span class="mx-1"
+							>Schedule <button
+								class="break-words text-blue-400 font-normal truncate text-xs"
+								on:click={() =>
+									scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
+								>{job.schedule_path}</button
+							></span
+						>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>