windmill-components 1.394.7 → 1.405.0

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,6 +303,7 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 					{contentEncoding}
 					{format}
 					{extra}
+					{disabled}
 				/>
 			{:else}
 				<ArgInput
@@ -316,6 +318,7 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 					{contentEncoding}
 					{format}
 					{extra}
+					{disabled}
 					{nullable}
 					{variableEditor}
 					compact
@@ -352,6 +355,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

@@ -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 {};

package/package/components/triggers/RouteEditorInner.svelte

@@ -0,0 +1,327 @@
+<script>import { Alert, Badge, Button } from '../common';
+import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import Path from '../Path.svelte';
+import Required from '../Required.svelte';
+import ScriptPicker from '../ScriptPicker.svelte';
+import { HttpTriggerService } from '../../gen';
+import { usedTriggerKinds, userStore, workspaceStore } from '../../stores';
+import { canWrite, emptyString, sendUserToast } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import Section from '../Section.svelte';
+import { Loader2, Save } from 'lucide-svelte';
+import Label from '../Label.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import { page } from '$app/stores';
+import { isCloudHosted } from '../../cloud';
+import { base } from '../../base';
+let is_flow = false;
+let initialPath = '';
+let edit = true;
+let itemKind = 'script';
+$: is_flow = itemKind === 'flow';
+let script_path = '';
+let initialScriptPath = '';
+let fixedScriptPath = '';
+let drawerLoading = true;
+export async function openEdit(ePath, isFlow) {
+    drawerLoading = true;
+    try {
+        drawer?.openDrawer();
+        initialPath = ePath;
+        itemKind = isFlow ? 'flow' : 'script';
+        edit = true;
+        dirtyPath = false;
+        await loadTrigger();
+    }
+    catch (err) {
+        sendUserToast(`Could not load route: ${err}`, true);
+    }
+    finally {
+        drawerLoading = false;
+    }
+}
+export async function openNew(nis_flow, fixedScriptPath_) {
+    drawerLoading = true;
+    try {
+        drawer?.openDrawer();
+        is_flow = nis_flow;
+        edit = false;
+        itemKind = nis_flow ? 'flow' : 'script';
+        is_async = false;
+        requires_auth = false;
+        initialRoutePath = '';
+        route_path = '';
+        http_method = 'post';
+        initialScriptPath = '';
+        fixedScriptPath = fixedScriptPath_ ?? '';
+        script_path = fixedScriptPath;
+        path = '';
+        initialPath = '';
+        dirtyPath = false;
+    }
+    finally {
+        drawerLoading = false;
+    }
+}
+let path = '';
+let pathError = '';
+let routeError = '';
+let is_async = false;
+let requires_auth = false;
+let initialRoutePath = '';
+let route_path = '';
+let http_method = 'post';
+const dispatch = createEventDispatcher();
+let can_write = true;
+async function loadTrigger() {
+    const s = await HttpTriggerService.getHttpTrigger({
+        workspace: $workspaceStore,
+        path: initialPath
+    });
+    script_path = s.script_path;
+    initialScriptPath = s.script_path;
+    is_flow = s.is_flow;
+    path = s.path;
+    route_path = s.route_path;
+    initialRoutePath = s.route_path;
+    http_method = s.http_method ?? 'post';
+    is_async = s.is_async;
+    requires_auth = s.requires_auth;
+    can_write = canWrite(s.path, s.extra_perms, $userStore);
+}
+async function triggerScript() {
+    if (edit) {
+        await HttpTriggerService.updateHttpTrigger({
+            workspace: $workspaceStore,
+            path: initialPath,
+            requestBody: {
+                path,
+                script_path,
+                is_flow,
+                is_async,
+                requires_auth,
+                route_path: $userStore?.is_admin || $userStore?.is_super_admin ? route_path : undefined,
+                http_method
+            }
+        });
+        sendUserToast(`Route ${path} updated`);
+    }
+    else {
+        await HttpTriggerService.createHttpTrigger({
+            workspace: $workspaceStore,
+            requestBody: {
+                path,
+                script_path,
+                is_flow,
+                is_async,
+                requires_auth,
+                route_path,
+                http_method
+            }
+        });
+        sendUserToast(`Route ${path} created`);
+    }
+    if (!$usedTriggerKinds.includes('http')) {
+        $usedTriggerKinds = [...$usedTriggerKinds, 'http'];
+    }
+    dispatch('update');
+    drawer.closeDrawer();
+}
+let drawer;
+let dirtyPath = false;
+$: fullRoute = `${$page.url.origin}${base}/api/r/${isCloudHosted() ? $workspaceStore + '/' : ''}${route_path}`;
+async function routeExists(route_path, method) {
+    return await HttpTriggerService.existsRoute({
+        workspace: $workspaceStore,
+        requestBody: {
+            route_path,
+            http_method
+        }
+    });
+}
+let validateTimeout = undefined;
+async function validateRoute(path, method) {
+    routeError = '';
+    if (validateTimeout) {
+        clearTimeout(validateTimeout);
+    }
+    validateTimeout = setTimeout(async () => {
+        if (!/^[\w-:]+(\/[\w-:]+)*$/.test(path)) {
+            routeError = 'Endpoint not valid';
+        }
+        else if (initialRoutePath !== path && (await routeExists(path, method))) {
+            routeError = 'Endpoint already taken';
+        }
+        else {
+            routeError = '';
+        }
+        validateTimeout = undefined;
+    }, 500);
+}
+$: validateRoute(route_path, http_method);
+</script>
+
+<Drawer size="700px" bind:this={drawer}>
+	<DrawerContent
+		title={edit ? (can_write ? `Edit route ${initialPath}` : `Route ${initialPath}`) : 'New route'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading && can_write}
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' || routeError != '' || emptyString(script_path) || !can_write}
+					on:click={triggerScript}
+				>
+					Save
+				</Button>
+			{/if}
+		</svelte:fragment>
+		{#if drawerLoading}
+			<Loader2 class="animate-spin" />
+		{:else}
+			<div class="flex flex-col gap-12">
+				<div class="flex flex-col gap-4">
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="route"
+							kind="http_trigger"
+							hideUser
+							disabled={!can_write}
+						/>
+					</Label>
+				</div>
+
+				<Section label="HTTP">
+					{#if !($userStore?.is_admin || $userStore?.is_super_admin)}
+						<Alert type="info" title="Admin only" collapsible>
+							Route endpoints can only be edited by workspace admins
+						</Alert>
+						<div class="my-2" />
+					{/if}
+					<div class="flex flex-col w-full gap-4">
+						<label class="block grow w-full">
+							<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+								<div>
+									Path
+									<Required required={true} />
+								</div>
+								<div class="text-2xs text-tertiary"> ':myparam' for path params </div>
+							</div>
+							<!-- svelte-ignore a11y-autofocus -->
+							<input
+								type="text"
+								autocomplete="off"
+								bind:value={route_path}
+								disabled={!($userStore?.is_admin || $userStore?.is_super_admin) || !can_write}
+								class={routeError === ''
+									? ''
+									: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+							/>
+						</label>
+
+						<ToggleButtonGroup
+							class="w-auto"
+							bind:selected={http_method}
+							disabled={!($userStore?.is_admin || $userStore?.is_super_admin) || !can_write}
+						>
+							<ToggleButton label="GET" value="get" />
+							<ToggleButton label="POST" value="post" />
+							<ToggleButton label="PUT" value="put" />
+							<ToggleButton label="PATCH" value="patch" />
+							<ToggleButton label="DELETE" value="delete" />
+						</ToggleButtonGroup>
+						<div class="flex flex-col w-full mt-2">
+							<div class="flex justify-start w-full">
+								<Badge
+									color="gray"
+									class="center-center !bg-surface-secondary !text-tertiary !w-[90px] !h-[24px] rounded-r-none border"
+								>
+									Full endpoint
+								</Badge>
+								<input
+									type="text"
+									readonly
+									value={fullRoute}
+									size={fullRoute.length || 50}
+									class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+									on:focus={({ currentTarget }) => {
+										currentTarget.select()
+									}}
+								/>
+							</div>
+							<div class="text-red-600 dark:text-red-400 text-2xs">{routeError}</div>
+						</div>
+					</div>
+				</Section>
+
+				<Section label="Runnable">
+					<p class="text-xs mb-1 text-tertiary">
+						Pick a script or flow to be triggered<Required required={true} /><br />
+						To handle headers, query or path parameters, add a preprocessor to your runnable.
+					</p>
+					<div class="flex flex-row mb-2">
+						<ScriptPicker
+							disabled={fixedScriptPath != '' || !can_write}
+							initialPath={fixedScriptPath || initialScriptPath}
+							kinds={['script']}
+							allowFlow={true}
+							bind:itemKind
+							bind:scriptPath={script_path}
+							allowRefresh
+						/>
+
+						{#if script_path === undefined}
+							<Button
+								btnClasses="ml-4 mt-2"
+								color="dark"
+								size="xs"
+								href={itemKind === 'flow'
+									? '/flows/add?hub=55'
+									: '/scripts/add?hub=hub%2F9088%2Fwindmill%2FHTTP%20route%20script%20with%20preprocessor%20template'}
+								target="_blank">Create from template</Button
+							>
+						{/if}
+					</div>
+				</Section>
+				<Section label="Settings">
+					<div class="flex flex-col gap-4">
+						<div class="flex flex-row justify-between">
+							<div class="text-sm font-semibold flex flex-row items-center">Request type</div>
+							<ToggleButtonGroup class="w-auto" bind:selected={is_async} disabled={!can_write}>
+								<ToggleButton
+									label="Async"
+									value={true}
+									tooltip="The returning value is the uuid of the job assigned to execute the job."
+								/>
+								<ToggleButton
+									label="Sync"
+									value={false}
+									tooltip="Triggers the execution, wait for the job to complete and return it as a response."
+								/>
+							</ToggleButtonGroup>
+						</div>
+						<div class="flex flex-row justify-between">
+							<div class="text-sm font-semibold flex flex-row items-center">Authentication</div>
+							<ToggleButtonGroup class="w-auto" bind:selected={requires_auth} disabled={!can_write}>
+								<ToggleButton label="None" value={false} />
+								<ToggleButton
+									label="Required"
+									value={true}
+									tooltip="Requires authentication with read access on the route"
+								/>
+							</ToggleButtonGroup>
+						</div>
+					</div>
+				</Section>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>

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

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

package/package/components/triggers/RoutesPanel.svelte

@@ -0,0 +1,74 @@
+<script>import { Button } from '../common';
+import { userStore, workspaceStore } from '../../stores';
+import { HttpTriggerService } from '../../gen';
+import { RouteIcon } from 'lucide-svelte';
+import Skeleton from '../common/skeleton/Skeleton.svelte';
+import RouteEditor from './RouteEditor.svelte';
+import { canWrite } from '../../utils';
+export let isFlow;
+export let path;
+let routeEditor;
+let triggers = undefined;
+$: path && loadTriggers();
+async function loadTriggers() {
+    try {
+        triggers = (await HttpTriggerService.listHttpTriggers({
+            workspace: $workspaceStore ?? '',
+            path,
+            isFlow
+        })).map((x) => {
+            return { canWrite: canWrite(x.path, x.extra_perms, $userStore), ...x };
+        });
+    }
+    catch (e) {
+        console.error('impossible to load http routes');
+    }
+}
+</script>
+
+<RouteEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={routeEditor}
+/>
+
+<div class="p-2 flex flex-col">
+	{#if $userStore?.is_admin || $userStore?.is_super_admin}
+		<Button
+			on:click={() => routeEditor?.openNew(isFlow, path)}
+			variant="border"
+			color="light"
+			size="xs"
+			startIcon={{ icon: RouteIcon }}
+		>
+			New Route
+		</Button>
+	{/if}
+</div>
+
+{#if triggers}
+	{#if triggers.length == 0}
+		<div class="text-xs text-secondary px-2"> No http routes </div>
+	{:else}
+		<div class="flex flex-col divide-y px-2 pt-2">
+			{#each triggers as trigger (trigger.path)}
+				<div class="grid grid-cols-5 text-2xs items-center py-2">
+					<div class="col-span-2 truncate">{trigger.path}</div>
+					<div class="col-span-2 truncate">
+						{trigger.http_method.toUpperCase()} /{trigger.route_path}
+					</div>
+					<button on:click={() => routeEditor?.openEdit(trigger.path, isFlow)}>
+						{#if trigger.canWrite}
+							Edit
+						{:else}
+							View
+						{/if}
+					</button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+{:else}
+	<Skeleton layout={[[8]]} />
+{/if}