feat(frontend): improve UX

frontend/src/lib/components/FlowGraphViewer.svelte

@@ -12,6 +12,7 @@
 		description?: string
 		value: FlowValue
 		schema?: any
+		path?: string
 	}
 	export let overflowAuto = false
 	export let noSide = false
@@ -30,6 +31,7 @@
 			class:overflow-auto={overflowAuto}
 		>
 			<FlowGraphV2
+				path={flow?.path}
 				{download}
 				minHeight={400}
 				modules={flow?.value?.modules}
@@ -38,6 +40,7 @@
 					stepDetail = e.detail
 					dispatch('select', stepDetail)
 				}}
+				on:triggerDetail
 			/>
 		</div>
 	{/if}

frontend/src/lib/components/details/DetailPageLayout.svelte

@@ -8,7 +8,7 @@
 	export let flow_json: any | undefined = undefined
 	export let hasStepDetails: boolean = false
 	export let selected: string
-	export let triggerSelected: 'webhooks' | 'schedule' | 'cli' = 'webhooks'
+	export let triggerSelected: 'webhooks' | 'schedule' | 'cli' | 'email' = 'webhooks'
 
 	let mobileTab: 'form' | 'detail' = 'form'
 

frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte

@@ -254,6 +254,7 @@
 	<div class="z-10 flex-auto grow" bind:clientHeight={minHeight}>
 		<FlowGraphV2
 			path={$pathStore}
+			isEditor={true}
 			{disableAi}
 			insertable
 			scroll
@@ -345,6 +346,9 @@
 					$moving = undefined
 				}
 			}}
+			on:openSchedules={() => {
+				$selectedId = 'settings-schedule'
+			}}
 		/>
 	</div>
 	<div

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -45,6 +45,7 @@
 
 	export let selectedId: Writable<string | undefined> = writable<string | undefined>(undefined)
 	export let path: string | undefined = undefined
+	export let isEditor: boolean = false
 
 	export let insertable = false
 	export let moving: string | undefined = undefined
@@ -168,7 +169,17 @@
 		success,
 		$useDataflow,
 		$selectedId,
-		moving
+		moving,
+		{
+			openSchedules: () => {
+				dispatch('openSchedules')
+			},
+			triggerDetail: (e) => {
+				dispatch('triggerDetail', e)
+			},
+			isEditor: isEditor,
+			path
+		}
 	)
 
 	const nodes = writable<Node[]>([])

frontend/src/lib/components/graph/graphBuilder.ts

@@ -22,7 +22,13 @@ export default function graphBuilder(
 	success: boolean | undefined,
 	useDataflow: boolean | undefined,
 	selectedId: string | undefined,
-	moving: string | undefined
+	moving: string | undefined,
+	triggerProps?: {
+		path?: string
+		openSchedules?: () => void
+		triggerDetail?: (e) => void
+		isEditor?: boolean
+	}
 ): {
 	nodes: Node[]
 	edges: Edge[]
@@ -113,7 +119,10 @@ export default function graphBuilder(
 			position: { x: -1, y: -1 },
 			type: 'trigger',
 			data: {
-				path: extra.path
+				path: triggerProps?.path,
+				openSchedules: triggerProps?.openSchedules,
+				triggerDetail: triggerProps?.triggerDetail,
+				isEditor: triggerProps?.isEditor
 			}
 		}
 

frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte

@@ -4,9 +4,19 @@
 
 	export let data: {
 		path: string
+		openSchedules: () => void
+		triggerDetail: (e: { detail: 'webhook' | 'mail' | 'schedule' }) => void
+		isEditor: boolean
 	}
 </script>
 
 <NodeWrapper wrapperClass="shadow-none">
-	<TriggersWrapper path={data.path} />
+	<TriggersWrapper
+		path={data.path}
+		on:openSchedules={() => data.openSchedules()}
+		on:triggerDetail={(e) => {
+			data.triggerDetail(e.detail)
+		}}
+		isEditor={data.isEditor}
+	/>
 </NodeWrapper>

frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte

@@ -12,11 +12,14 @@
 	import EmailTriggerPanel from '$lib/components/details/EmailTriggerPanel.svelte'
 	import TriggerCount from './TriggerCount.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import RunPageSchedules from '$lib/components/RunPageSchedules.svelte'
+	import { createEventDispatcher } from 'svelte'
 
 	let schedules: Schedule[] | undefined = undefined
 
 	export let path: string
+	export let isEditor: boolean
+
+	const dispatch = createEventDispatcher()
 
 	async function loadSchedules() {
 		if (!path) return
@@ -37,28 +40,25 @@
 	let selectedTab: 'webhooks' | 'mail' | 'schedules' = 'webhooks'
 </script>
 
-<Drawer bind:this={drawer} size="600px">
-	<DrawerContent title="Triggers" noPadding on:close={drawer.closeDrawer}>
-		<Tabs bind:selected={selectedTab}>
-			<Tab value="webhooks">Webhooks</Tab>
-			<Tab value="mail">Mail</Tab>
-			<Tab value="schedules">Schedules</Tab>
-			<svelte:fragment slot="content">
-				{#if selectedTab === 'webhooks'}
-					<WebhooksPanel scopes={[`run:flow/${path}`]} {path} isFlow={true} args={{}} token="" />
-				{/if}
+{#if isEditor}
+	<Drawer bind:this={drawer} size="600px">
+		<DrawerContent title="Triggers" noPadding on:close={drawer.closeDrawer}>
+			<Tabs bind:selected={selectedTab}>
+				<Tab value="webhooks">Webhooks</Tab>
+				<Tab value="mail">Mail</Tab>
+				<svelte:fragment slot="content">
+					{#if selectedTab === 'webhooks'}
+						<WebhooksPanel scopes={[`run:flow/${path}`]} {path} isFlow={true} args={{}} token="" />
+					{/if}
 
-				{#if selectedTab === 'mail'}
-					<EmailTriggerPanel token="" scopes={[`run:flow/${path}`]} {path} isFlow={true} />
-				{/if}
-
-				{#if selectedTab === 'schedules'}
-					<RunPageSchedules isFlow={true} path={path ?? ''} can_write={false} />
-				{/if}
-			</svelte:fragment>
-		</Tabs>
-	</DrawerContent>
-</Drawer>
+					{#if selectedTab === 'mail'}
+						<EmailTriggerPanel token="" scopes={[`run:flow/${path}`]} {path} isFlow={true} />
+					{/if}
+				</svelte:fragment>
+			</Tabs>
+		</DrawerContent>
+	</Drawer>
+{/if}
 
 <div style={`width: ${NODE.width}px;`}>
 	<div class="flex flex-col mx-auto w-min">
@@ -79,8 +79,12 @@
 				<svelte:fragment slot="text">See default webhooks triggers</svelte:fragment>
 				<TriggerButton
 					on:click={() => {
-						selectedTab = 'webhooks'
-						drawer?.openDrawer()
+						if (isEditor) {
+							selectedTab = 'webhooks'
+							drawer?.openDrawer()
+						} else {
+							dispatch('triggerDetail', 'webhooks')
+						}
 					}}
 				>
 					<Webhook size={12} />
@@ -90,8 +94,12 @@
 				<svelte:fragment slot="text">See default mail trigger</svelte:fragment>
 				<TriggerButton
 					on:click={() => {
-						selectedTab = 'mail'
-						drawer?.openDrawer()
+						if (isEditor) {
+							selectedTab = 'mail'
+							drawer?.openDrawer()
+						} else {
+							dispatch('triggerDetail', 'mail')
+						}
 					}}
 				>
 					<Mail size={12} />
@@ -101,8 +109,11 @@
 				<svelte:fragment slot="text">See all schedules</svelte:fragment>
 				<TriggerButton
 					on:click={() => {
-						selectedTab = 'schedules'
-						drawer?.openDrawer()
+						if (isEditor) {
+							dispatch('openSchedules')
+						} else {
+							dispatch('triggerDetail', 'schedule')
+						}
 					}}
 				>
 					<TriggerCount count={schedules?.length} />

frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte

@@ -304,7 +304,7 @@
 	let token = 'TOKEN_TO_CREATE'
 	let detailSelected = 'saved_inputs'
 
-	let triggerSelected: 'webhooks' | 'schedule' | 'cli' = 'webhooks'
+	let triggerSelected: 'webhooks' | 'schedule' | 'cli' | 'email' = 'webhooks'
 
 	let flowHistory: FlowHistory | undefined = undefined
 </script>
@@ -443,6 +443,10 @@
 								stepDetail = undefined
 							}
 						}}
+						on:triggerDetail={(e) => {
+							detailSelected = 'details'
+							triggerSelected = e.detail === 'mail' ? 'email' : e.detail
+						}}
 					/>
 				</div>
 			</div>