windmill-components 1.55.0 → 1.55.2

package/components/flows/content/FlowModuleComponent.svelte

@@ -174,7 +174,7 @@ afterUpdate(() => {
 						<Tabs bind:selected>
 							<Tab value="inputs"><span class="font-semibold">Step Input</span></Tab>
 							<Tab value="test"><span class="font-semibold text-md">Test this step</span></Tab>
-							<Tab value="advanced">Advanced</Tab>
+							<Tab value="advanced-retries">Advanced</Tab>
 						</Tabs>
 						<div class="h-[calc(100%-32px)]">
 							{#if selected === 'inputs'}

package/components/flows/content/FlowModuleWrapper.svelte

@@ -11,7 +11,7 @@ import { Alert } from '../../common';
 import FlowInputsFlow from './FlowInputsFlow.svelte';
 import FlowBranchesAllWrapper from './FlowBranchesAllWrapper.svelte';
 import FlowBranchesOneWrapper from './FlowBranchesOneWrapper.svelte';
-const { selectedId } = getContext('FlowEditorContext');
+const { selectedId, schedule } = getContext('FlowEditorContext');
 export let flowModule;
 // These pointers are used to easily access previewArgs of parent module, and previous module
 // Pointer to parent module, only defined within Branches or Loops.
@@ -52,6 +52,7 @@ export let previousModule = undefined;
 			/>
 		{:else}
 			<FlowInputs
+				summary={flowModule.summary}
 				shouldDisableTriggerScripts={parentModule !== undefined ||
 					previousModule !== undefined ||
 					$selectedId == 'failure'}
@@ -63,6 +64,18 @@ export let previousModule = undefined;
 						module.suspend = { required_events: 1, timeout: 1800 }
 					}
 
+					if (kind == Script.kind.TRIGGER) {
+						if (!$schedule.cron) {
+							$schedule.cron = '0 */15 * * *'
+						}
+						$schedule.enabled = true
+
+						module.stop_after_if = {
+							expr: 'result == undefined || Array.isArray(result) && result.length == 0',
+							skip_if_stopped: true
+						}
+					}
+
 					flowModule = module
 					$flowStateStore[module.id] = state
 				}}
@@ -76,6 +89,18 @@ export let previousModule = undefined;
 						flowModule.id
 					)
 
+					if (kind == Script.kind.TRIGGER) {
+						if (!$schedule.cron) {
+							$schedule.cron = '0 */15 * * *'
+						}
+						$schedule.enabled = true
+
+						module.stop_after_if = {
+							expr: 'result == undefined || Array.isArray(result) && result.length == 0',
+							skip_if_stopped: true
+						}
+					}
+
 					if (kind == Script.kind.APPROVAL) {
 						module.suspend = { required_events: 1, timeout: 1800 }
 					}

package/components/flows/content/FlowSchedules.svelte

@@ -1,6 +1,7 @@
 <script>import CronInput from '../../CronInput.svelte';
 import SchemaForm from '../../SchemaForm.svelte';
 import Toggle from '../../Toggle.svelte';
+import { emptyString } from '../../../utils';
 import { getContext } from 'svelte';
 import { flowStore } from '../flowStore';
 const { schedule } = getContext('FlowEditorContext');
@@ -8,7 +9,11 @@ const { schedule } = getContext('FlowEditorContext');
 
 <CronInput bind:schedule={$schedule.cron} />
 <SchemaForm schema={$flowStore.schema} bind:args={$schedule.args} />
+{#if emptyString($schedule.cron)}
+	<p class="text-xs text-gray-600 mt-10">Define a schedule frequency first</p>
+{/if}
 <Toggle
+	disabled={emptyString($schedule.cron)}
 	bind:checked={$schedule.enabled}
 	options={{
 		right: 'Schedule enabled'

package/components/flows/content/FlowSettings.svelte

@@ -10,23 +10,23 @@ import Toggle from '../../Toggle.svelte';
 import { Alert } from '../../common';
 import { FlowGraph } from '../../graph';
 import { getContext } from 'svelte';
+import autosize from 'svelte-autosize';
 const { selectedId } = getContext('FlowEditorContext');
 export let initialPath;
-export let defaultTab = 'metadata';
 let topHeight = 0;
 </script>
 
 <div class="h-full overflow-hidden">
 	<FlowCard title="Settings">
 		<div class="h-full flex-1">
-			<Tabs selected={defaultTab}>
-				<Tab value="metadata">Metadata</Tab>
-				<Tab value="schedule">Schedule</Tab>
-				<Tab value="same-worker">Shared Directory</Tab>
-				<Tab value="graph">Graph</Tab>
+			<Tabs bind:selected={$selectedId}>
+				<Tab value="settings-metadata">Metadata</Tab>
+				<Tab value="settings-schedule">Schedule</Tab>
+				<Tab value="settings-same-worker">Shared Directory</Tab>
+				<Tab value="settings-graph">Graph</Tab>
 
 				<svelte:fragment slot="content">
-					<TabContent value="metadata" class="p-4">
+					<TabContent value="settings-metadata" class="p-4">
 						<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="my_flow" kind="flow" />
 
 						<label class="block my-4">
@@ -43,30 +43,20 @@ let topHeight = 0;
 						<label class="block my-4" for="inp">
 							<span class="text-gray-700 text-sm">
 								Description
-								<Required required={false} detail="markdown" />
+								<Required required={false} />
 								<textarea
+									use:autosize
 									type="text"
 									class="text-sm"
 									id="inp"
 									bind:value={$flowStore.description}
-									placeholder="A description to help users understand what this flow does and how to use it. Markdown accepted."
+									placeholder="A description to help users understand what this flow does and how to use it."
 									rows="3"
 								/>
 							</span>
 						</label>
-
-						<div>
-							<div class="font-bold pb-1 mt-4">Description preview</div>
-							{#if $flowStore.description}
-								<div class="prose max-h-48 mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto">
-									{$flowStore.description}
-								</div>
-							{:else}
-								<div class="text-sm text-gray-500"> Enter a description to see the preview </div>
-							{/if}
-						</div>
 					</TabContent>
-					<TabContent value="schedule" class="p-4">
+					<TabContent value="settings-schedule" class="p-4">
 						<Alert type="info" title="Primary Schedule">
 							Flows can be triggered by any schedules, their webhooks or their UI but they only have
 							only one primary schedules with which they share the same path. The primary schedule
@@ -76,7 +66,7 @@ let topHeight = 0;
 						<FlowSchedules />
 					</TabContent>
 
-					<TabContent value="same-worker" class="p-4 flex flex-col">
+					<TabContent value="settings-same-worker" class="p-4 flex flex-col">
 						<Alert type="info" title="Shared Directory">
 							Steps will share a folder at `./shared` in which they can store heavier data and pass
 							them to the next step. <br /><br />Beware that the `./shared` folder is not preserved
@@ -90,7 +80,7 @@ let topHeight = 0;
 							}}
 						/>
 					</TabContent>
-					<TabContent value="graph">
+					<TabContent value="settings-graph">
 						<div
 							bind:clientHeight={topHeight}
 							class="max-w-full w-full overflow-hidden h-screen bg-gray-50"
@@ -98,7 +88,9 @@ let topHeight = 0;
 							{#if $flowStore.value.modules}
 								<FlowGraph
 									on:click={(e) => {
-										$selectedId = e.detail.id
+										if (e.detail.id) {
+											$selectedId = e.detail.id
+										}
 									}}
 									minHeight={topHeight}
 									modules={$flowStore.value.modules}

package/components/flows/content/FlowSettings.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         initialPath: string;
-        defaultTab?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/header/FlowPreviewButtons.svelte

@@ -10,16 +10,19 @@ let previewMode = 'whole';
 let jobId = undefined;
 let job = undefined;
 $: upToDisabled =
-    [
-        'settings',
-        'settings-schedule',
-        'settings-retries',
-        'settings-same-worker',
-        'settings-graph',
-        'inputs',
-        'schedules',
-        'failure'
-    ].includes($selectedId) || $selectedId?.includes('branch');
+    $selectedId == undefined ||
+        [
+            'settings',
+            'settings-metadata',
+            'settings-schedule',
+            'settings-retries',
+            'settings-same-worker',
+            'settings-graph',
+            'inputs',
+            'schedules',
+            'failure'
+        ].includes($selectedId) ||
+        $selectedId?.includes('branch');
 </script>
 
 <div class="flex flex-row-reverse justify-between items-center gap-x-2">

package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -11,7 +11,7 @@ function onToggle() {
     if ($flowStore?.value?.failure_module) {
         $flowStore.value.failure_module = undefined;
         // By default, we return to settings when disabling the failure module
-        select('settings');
+        select('settings-metadata');
     }
     else {
         const failureModule = {

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -35,11 +35,17 @@ async function insertNewModuleAtIndex(index, kind) {
         modules.splice(index, 0, flowModule);
         modules = modules;
         $flowStateStore[flowModule.id] = state;
+        if (kind == 'trigger') {
+            flowModule.summary = 'Trigger';
+        }
+        else if (kind == 'approval') {
+            flowModule.summary = 'Approval';
+        }
         select(flowModule.id);
     });
 }
 function removeAtIndex(index) {
-    select('settings');
+    select('settings-graph');
     if (!modules)
         return;
     const [removedModule] = modules.splice(index, 1);
@@ -95,6 +101,7 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 			{#each modules as mod, index (mod.id ?? index)}
 				<div transition:slide|local>
 					<MapItem
+						{index}
 						bind:mod
 						on:delete={(event) => {
 							if (event.detail.detail.shiftKey || mod.value.type === 'identity') {
@@ -110,8 +117,10 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 				</div>
 			{/each}
 		{/if}
-
-		<InsertModuleButton on:new={(e) => insertNewModuleAtIndex(modules?.length ?? 0, e.detail)} />
+		<InsertModuleButton
+			trigger={modules?.length == 0}
+			on:new={(e) => insertNewModuleAtIndex(modules?.length ?? 0, e.detail)}
+		/>
 	</ul>
 	{#if root}
 		<div class="sticky bottom-0 bg-gray-50 flex-none px-4 py-1 pb-2 border-t">

package/components/flows/map/FlowSettingsItem.svelte

@@ -5,26 +5,19 @@ import { classNames } from '../../../utils';
 import { Badge } from '../../common';
 import { flowStore } from '../flowStore';
 const { select, selectedId, schedule } = getContext('FlowEditorContext');
-$: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId === 'settings' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId?.startsWith('settings')
+    ? 'outline outline-offset-1 outline-2  outline-slate-900'
+    : '');
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div on:click={() => select('settings')} class={settingsClass}>
+<div on:click={() => select('settings-metadata')} class={settingsClass}>
 	<Icon data={faSliders} class="mr-2" />
 	<span class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate">
 		Settings
-		<span
-			class={classNames('badge', $schedule?.enabled ? 'badge-on' : 'badge-off')}
-			on:click|stopPropagation={() => select('settings-schedule')}
-		>
-			{#if $schedule?.enabled}
-				<Badge color="gray" baseClass="truncate">
-					<Icon data={faCalendarAlt} scale={0.8} />
-				</Badge>
-			{/if}
-			{#if $flowStore.value.same_worker}
-				<Badge color="blue" baseClass="truncate">./shared</Badge>
-			{/if}
-		</span>
+
+		{#if $flowStore.value.same_worker}
+			<Badge color="blue" baseClass="truncate">./shared</Badge>
+		{/if}
 	</span>
 </div>

package/components/flows/map/InsertModuleButton.svelte

@@ -1,9 +1,10 @@
 <script>import { Menu } from '../../common';
-import { faCode, faCodeBranch, faPlus, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faCodeBranch, faPlus, faBarsStaggered, faBolt, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import { Repeat } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
+export let trigger = false;
 </script>
 
 <Menu noMinW placement="bottom-start" let:close>
@@ -25,7 +26,33 @@ const dispatch = createEventDispatcher();
 			tabindex="-1"
 		>
 			<Icon data={faCode} scale={0.8} class="mr-1" />
-			Script
+			Action (Script)
+		</button>
+		{#if trigger}
+			<button
+				class="w-full text-left p-2 hover:bg-gray-100"
+				on:click={() => {
+					close()
+					dispatch('new', 'trigger')
+				}}
+				role="menuitem"
+				tabindex="-1"
+			>
+				<Icon data={faBolt} scale={0.8} class="mr-1" />
+				Trigger (Script)
+			</button>
+		{/if}
+		<button
+			class="w-full text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'approval')
+			}}
+			role="menuitem"
+			tabindex="-1"
+		>
+			<Icon data={faCheck} scale={0.8} class="mr-1" />
+			Approval (Script)
 		</button>
 		<button
 			class="w-full inline-flex gap-1 text-left p-2 hover:bg-gray-100"

package/components/flows/map/InsertModuleButton.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        trigger?: boolean | undefined;
+    };
     events: {
         new: CustomEvent<any>;
     } & {

package/components/flows/map/MapItem.svelte

@@ -10,6 +10,7 @@ import IconedResourceType from '../../IconedResourceType.svelte';
 import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
 import { Building, Repeat } from 'lucide-svelte';
 export let mod;
+export let index;
 const { select, selectedId } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 $: itemProps = {
@@ -25,7 +26,7 @@ function onDelete(event) {
 </script>
 
 {#if mod}
-	<InsertModuleButton on:new={(e) => dispatch('insert', e.detail)} />
+	<InsertModuleButton trigger={index == 0} on:new={(e) => dispatch('insert', e.detail)} />
 	{#if mod.value.type === 'forloopflow'}
 		<li class="w-full">
 			<FlowModuleSchemaItem

package/components/flows/map/MapItem.svelte.d.ts

@@ -3,6 +3,7 @@ import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
         mod: FlowModule;
+        index: number;
     };
     events: {
         delete: CustomEvent<CustomEvent<MouseEvent>>;

package/components/flows/pickers/WorkspaceScriptPicker.svelte

@@ -19,6 +19,9 @@ async function loadItems() {
     items = await ScriptService.listScripts({ workspace: $workspaceStore, kind, isTemplate });
 }
 let ownerFilter = undefined;
+$: if ($workspaceStore) {
+    ownerFilter = undefined;
+}
 $: prefilteredItems = ownerFilter ? items?.filter((x) => x.path.startsWith(ownerFilter)) : items;
 $: owners = Array.from(new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])).sort();
 const dispatch = createEventDispatcher();

package/components/flows/previousResults.js

@@ -91,7 +91,7 @@ export function buildExtraLib(flowInput, results) {
     return `
 /**
 * get variable (including secret) at path
-* @param {string} path - path of the variable (e.g: g/all/pretty_secret)
+* @param {string} path - path of the variable (e.g: f/examples/secret)
 */
 declare function variable(path: string): string;
 

package/components/graph/FlowGraph.svelte

@@ -1,4 +1,4 @@
-<script>import Svelvet, {} from 'svelvet';
+<script>import Svelvet from '@windmill-labs/svelvet';
 import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag';
 import { FlowStatusModule, RawScript } from '../../gen';
 import { NODE, createIdGenerator, isNode, isLoop, isBranch } from '.';
@@ -57,32 +57,32 @@ async function createGraph() {
     height = layered.height;
     edges = createEdges(nodes);
 }
-function getConvertedFlowModule(module, parent = undefined, edgeLabel = undefined) {
+function getConvertedFlowModule(module, parent = undefined, edgeLabel = undefined, insideLoop = false) {
     const type = module.value.type;
     const parentIds = getParentIds(parent);
     if (type === 'rawscript') {
         const lang = module.value.language;
-        return flowModuleToNode(parentIds, module.id, module.summary || 'Inline script', 'inline', module, lang, edgeLabel);
+        return flowModuleToNode(parentIds, module.id, module.summary || 'Inline script', 'inline', module, lang, edgeLabel, undefined, insideLoop);
     }
     else if (type === 'script') {
         const isHub = module.value.path.startsWith('hub/');
-        return flowModuleToNode(parentIds, module.id, module.summary || module.value.path, isHub ? 'hub' : 'workspace', module, undefined, edgeLabel);
+        return flowModuleToNode(parentIds, module.id, module.summary || module.value.path, isHub ? 'hub' : 'workspace', module, undefined, edgeLabel, undefined, insideLoop);
     }
     else if (type === 'forloopflow') {
         return flowModuleToLoop(module.value.modules, module, parent);
     }
     else if (type === 'branchone') {
         const branches = [module.value.default, ...module.value.branches.map((b) => b.modules)];
-        return flowModuleToBranch(module, branches, ['Default', ...module.value.branches.map((x) => `If ${truncateRev(x.expr, 20)}`)], parent);
+        return flowModuleToBranch(module, branches, ['Default', ...module.value.branches.map((x) => `If ${truncateRev(x.expr, 20)}`)], parent, insideLoop);
     }
     else if (type === 'branchall') {
         const branches = module.value.branches.map((b) => b.modules);
-        return flowModuleToBranch(module, branches, [], parent);
+        return flowModuleToBranch(module, branches, [], parent, insideLoop);
     }
     else if (type === 'flow') {
-        return flowModuleToNode(parentIds, module.id, module.summary || 'Flow ' + module.value.path, 'inline', module, undefined, edgeLabel);
+        return flowModuleToNode(parentIds, module.id, module.summary || 'Flow ' + module.value.path, 'inline', module, undefined, edgeLabel, undefined, insideLoop);
     }
-    return flowModuleToNode(parentIds, module.id, module.summary || 'Identity step', 'inline', module, undefined, edgeLabel);
+    return flowModuleToNode(parentIds, module.id, module.summary || 'Identity step', 'inline', module, undefined, edgeLabel, undefined, insideLoop);
 }
 function getParentIds(items = undefined) {
     if (typeof items == 'string') {
@@ -119,7 +119,7 @@ function getStateColor(state) {
             return '#fff';
     }
 }
-function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeLabel, header) {
+function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeLabel, header, insideLoop = false) {
     const langImg = {
         deno: '/icons/ts-lang.svg',
         go: '/icons/go-lang.svg',
@@ -154,7 +154,7 @@ function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeL
 			`
         },
         host,
-        width: NODE.width,
+        width: insideLoop ? NODE.width * 0.8 : NODE.width,
         height: NODE.height,
         borderColor: selectedNode == nodeId ? 'black' : '#999',
         bgColor: selectedNode == nodeId ? '#f5f5f5' : getStateColor(flowModuleStates?.[nodeId]?.type),
@@ -183,18 +183,18 @@ function flowModuleToLoop(modules, module, parent = undefined) {
         ]
     };
     modules.forEach((module) => {
-        const item = getConvertedFlowModule(module, loop.items);
+        const item = getConvertedFlowModule(module, loop.items, undefined, true);
         item && loop.items.push(item);
     });
-    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect iterations' results of For Loop ${module.id}`, undefined, 1000));
+    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect iterations' results of For Loop ${module.id ?? ''}`, undefined, 1000));
     return loop;
 }
-function flowModuleToBranch(module, branches, edgesLabel, parent = undefined) {
+function flowModuleToBranch(module, branches, edgesLabel, parent = undefined, insideLoop = false) {
     const branch = {
         type: 'branch',
         node: flowModuleToNode(getParentIds(parent), module.id, module.summary || module.value.type == 'branchall'
             ? 'Run all branches'
-            : 'Run one branch given predicate', 'inline', module, undefined),
+            : 'Run one branch given predicate', 'inline', module, undefined, undefined, undefined, insideLoop),
         items: []
     };
     const branchParent = [numberToChars(branch.node.id)];
@@ -208,7 +208,7 @@ function flowModuleToBranch(module, branches, edgesLabel, parent = undefined) {
         }
         else {
             modules.forEach((module) => {
-                const item = getConvertedFlowModule(module, items.length ? items : numberToChars(branch.node.id), edgesLabel[i]);
+                const item = getConvertedFlowModule(module, items.length ? items : numberToChars(branch.node.id), edgesLabel[i], insideLoop);
                 item && items.push(item);
             });
         }

package/components/graph/model.d.ts

@@ -1,5 +1,39 @@
 import type { FlowStatusModule } from "../../gen";
-import type { Node as SvelvetNode } from "svelvet";
+export interface SvelvetNode<T = any> {
+    id: number;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: T;
+    width: number;
+    height: number;
+    bgColor?: string;
+    fontSize?: number;
+    borderColor?: string;
+    parentNode?: number;
+    childNodes?: number[];
+    borderRadius?: number;
+    textColor?: string;
+    clickCallback?: Function;
+    image?: boolean;
+    src?: string;
+    sourcePosition?: 'left' | 'right' | 'top' | 'bottom';
+    targetPosition?: 'left' | 'right' | 'top' | 'bottom';
+}
+export interface Edge {
+    id: string;
+    source: number;
+    target: number;
+    label?: string;
+    labelBgColor?: string;
+    labelTextColor?: string;
+    edgeColor?: string;
+    type?: string;
+    animate?: boolean;
+    noHandle?: boolean;
+    arrow?: boolean;
+}
 export type ModuleHost = 'workspace' | 'inline' | 'hub';
 export type Node = SvelvetNode & {
     parentIds: string[];

package/components/home/ItemsList.svelte

@@ -1,6 +1,6 @@
 <script>import CenteredPage from '../CenteredPage.svelte';
 import { AppService, FlowService, ListableApp, Script, ScriptService } from '../../gen';
-import { superadmin, userStore, workspaceStore } from '../../stores';
+import { userStore, workspaceStore } from '../../stores';
 import { Skeleton, ToggleButton, ToggleButtonGroup } from '../common';
 import { canWrite } from '../../utils';
 import ShareModal from '../ShareModal.svelte';
@@ -14,13 +14,14 @@ import ListFilters from './ListFilters.svelte';
 import SearchItems from '../SearchItems.svelte';
 import { Icon } from 'svelte-awesome';
 import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import MoveDrawer from '../MoveDrawer.svelte';
 let scripts;
 let flows;
 let apps;
 let filteredItems = [];
 let itemKind = 'all';
-let shareModalScripts;
-let shareModalFlows;
+let shareModal;
+let moveDrawer;
 let loading = true;
 async function loadScripts() {
     const loadedScripts = await ScriptService.listScripts({
@@ -86,8 +87,11 @@ $: preFilteredItems =
         ? 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 || $superadmin) && $workspaceStore) {
+    if ($userStore && $workspaceStore) {
         loadScripts();
         loadFlows();
         loadApps();
@@ -145,17 +149,19 @@ $: items && resetScroll();
 />
 
 <ShareModal
-	bind:this={shareModalScripts}
-	kind="script"
+	bind:this={shareModal}
 	on:change={() => {
 		loadScripts()
+		loadApps()
+		loadFlows()
 	}}
 />
 
-<ShareModal
-	bind:this={shareModalFlows}
-	kind="flow"
-	on:change={() => {
+<MoveDrawer
+	bind:this={moveDrawer}
+	on:update={() => {
+		loadScripts()
+		loadApps()
 		loadFlows()
 	}}
 />
@@ -237,7 +243,8 @@ $: items && resetScroll();
 							marked={item.marked}
 							on:change={loadScripts}
 							script={item}
-							shareModal={shareModalScripts}
+							{shareModal}
+							{moveDrawer}
 						/>
 					{:else if item.type == 'flow'}
 						<FlowRow
@@ -245,7 +252,8 @@ $: items && resetScroll();
 							marked={item.marked}
 							on:change={loadFlows}
 							flow={item}
-							shareModal={shareModalFlows}
+							{shareModal}
+							{moveDrawer}
 						/>
 					{:else if item.type == 'app'}
 						<AppRow

package/components/jobs/JobDetail.svelte

@@ -5,10 +5,14 @@ import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot,
 import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
 import { Badge } from '../common';
+import ScheduleEditor from '../ScheduleEditor.svelte';
 const SMALL_ICON_SCALE = 0.7;
 export let job;
+let scheduleEditor;
 </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-3 w-full gap-4">
 		<div class="flex-col">
@@ -137,9 +141,11 @@ export let job;
 					{:else if job && job.schedule_path}
 						<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
 						<span class="mx-2"
-							>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}