From 1daccdbdb104f4d6e619ed0bdf28ef9ecc15bebb Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 14 Nov 2023 10:20:50 +0100
Subject: [PATCH] fix(frontend): Fix Step viewer (#2627)

* fix(frontend): Fix Step viewer

* fix(frontend): Fix build
---
 .../src/lib/components/FlowBuilder.svelte     |   2 +-
 .../lib/components/FlowGraphViewerStep.svelte | 202 ++++++++++++++++++
 .../(logged)/flows/get/[...path]/+page.svelte |   3 +-
 frontend/tailwind.config.cjs                  |   2 +-
 4 files changed, 206 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/lib/components/FlowGraphViewerStep.svelte

diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index a98ba51f4e..fe0f326768 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -423,7 +423,7 @@
 		onClick: () => void
 	}> = []
 
-	if (savedFlow?.draft_only === false) {
+	if (savedFlow?.draft_only === false || savedFlow?.draft_only === undefined) {
 		dropdownItems.push({
 			label: 'Exit & see details',
 			onClick: () => dispatch('details', $pathStore)
diff --git a/frontend/src/lib/components/FlowGraphViewerStep.svelte b/frontend/src/lib/components/FlowGraphViewerStep.svelte
new file mode 100644
index 0000000000..13119e45d3
--- /dev/null
+++ b/frontend/src/lib/components/FlowGraphViewerStep.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+	import HighlightCode from './HighlightCode.svelte'
+	import InputTransformsViewer from './InputTransformsViewer.svelte'
+	import IconedPath from './IconedPath.svelte'
+	import type { FlowModule, FlowValue } from '$lib/gen'
+	import { Badge, Button, Drawer, DrawerContent } from './common'
+	import { Highlight } from 'svelte-highlight'
+	import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
+	import typescript from 'svelte-highlight/languages/typescript'
+	import FlowPathViewer from './flows/content/FlowPathViewer.svelte'
+	import SchemaViewer from './SchemaViewer.svelte'
+	import { scriptPathToHref } from '$lib/scripts'
+	import { cleanExpr } from '$lib/utils'
+
+	import { twMerge } from 'tailwind-merge'
+	import FlowModuleScript from './flows/content/FlowModuleScript.svelte'
+
+	export let flow: {
+		summary: string
+		description?: string
+		value: FlowValue
+		schema?: any
+	}
+
+	export let stepDetail: FlowModule | string | undefined = undefined
+	let codeViewer: Drawer
+</script>
+
+<Drawer bind:this={codeViewer} size="900px">
+	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
+		{#if stepDetail && typeof stepDetail != 'string'}
+			{#if stepDetail.value.type == 'script'}
+				<div class="mb-4">
+					<a
+						rel="noreferrer"
+						target="_blank"
+						href={scriptPathToHref(stepDetail?.value?.path ?? '')}
+						class=""
+					>
+						<IconedPath path={stepDetail?.value?.path ?? ''} />
+					</a>
+				</div>
+				<div class="text-2xs mb-4">
+					<h3 class="mb-2">Step Inputs</h3>
+
+					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+				</div>
+				{#if stepDetail.value.path.startsWith('hub/')}
+					<div class="mt-6">
+						<h3 class="mb-2">Code</h3>
+						<iframe
+							class="w-full h-full text-sm"
+							title="embedded script from hub"
+							frameborder="0"
+							src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
+						/>
+					</div>
+				{/if}
+			{:else if stepDetail.value.type == 'rawscript'}
+				<div class="text-2xs mb-4">
+					<h3 class="mb-2">Step Inputs</h3>
+					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+				</div>
+
+				<h3 class="mb-2">Code</h3>
+				<span class="!text-xs">
+					<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
+				</span>
+			{/if}
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<div class={twMerge('p-2 overflow-y-scroll')}>
+	{#if stepDetail == undefined}
+		<div>
+			<p class="font-medium text-secondary text-center pt-4 pb-8">
+				Click on a step to see its details
+			</p>
+			<h3 class="mb-2 font-semibold">Flow Inputs</h3>
+			<SchemaViewer schema={flow?.schema} />
+		</div>
+	{:else if stepDetail == 'Input'}
+		<SchemaViewer schema={flow?.schema} />
+	{:else if stepDetail == 'Result'}
+		<p class="font-medium text-secondary text-center pt-4 pb-8"> End of the flow </p>
+	{:else if typeof stepDetail != 'string' && stepDetail.value}
+		<div class="">
+			<div class="sticky top-0 bg-surface w-full flex items-center py-2">
+				{#if stepDetail.id}
+					<Badge color="indigo">
+						{stepDetail.id}
+					</Badge>
+				{/if}
+				<span class="ml-2 font-medium text-lg">
+					{#if stepDetail.summary}
+						{stepDetail.summary}
+					{:else if stepDetail.value.type == 'identity'}
+						Identity
+					{:else if stepDetail.value.type == 'forloopflow'}
+						For loop {#if stepDetail.value.parallel}(parallel){/if}
+						{#if stepDetail.value.skip_failures}(skip failures){/if}
+					{:else if stepDetail.value.type == 'branchall'}
+						Run all branches {#if stepDetail.value.parallel}(parallel){/if}
+					{:else if stepDetail.value.type == 'branchone'}
+						Run one branch
+					{:else if stepDetail.value.type == 'flow'}
+						Inner flow
+					{:else}
+						Anonymous step
+					{/if}
+				</span>
+			</div>
+			{#if stepDetail.value.type == 'script'}
+				<div class="pb-2">
+					<a
+						rel="noreferrer"
+						target="_blank"
+						href={scriptPathToHref(stepDetail?.value?.path ?? '')}
+						class=""
+					>
+						<IconedPath path={stepDetail?.value?.path ?? ''} />
+					</a>
+				</div>
+			{/if}
+		</div>
+		{#if stepDetail.value.type == 'identity'}
+			<p class="font-medium text-secondary text-center pt-4 pb-8">
+				An identity step returns its inputs as outputs
+			</p>
+		{:else if stepDetail.value.type == 'rawscript'}
+			<div class="text-xs">
+				<h3 class="mb-2 font-semibold">Step Inputs</h3>
+				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+			</div>
+
+			<div>
+				<div class="mb-2 flex justify-between items-center">
+					<h3 class="font-semibold">Code</h3>
+					<Button size="xs2" color="light" variant="contained" on:click={codeViewer.openDrawer}>
+						Expand
+					</Button>
+				</div>
+				<div class="border p-2 rounded-md">
+					<HighlightCode
+						language={stepDetail.value.language}
+						code={stepDetail.value.content}
+						class="whitespace-pre-wrap"
+					/>
+				</div>
+			</div>
+		{:else if stepDetail.value.type == 'script'}
+			<div class="text-2xs">
+				<h3 class="mb-2 font-semibold">Step Inputs</h3>
+				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+			</div>
+			{#if stepDetail.value.path.startsWith('hub/')}
+				<div class="flex flex-col grow">
+					<div class="mb-2 flex justify-between items-center">
+						<h3 class="font-semibold">Code</h3>
+						<Button size="xs2" color="light" variant="contained" on:click={codeViewer.openDrawer}>
+							Expand
+						</Button>
+					</div>
+					<iframe
+						class="w-full grow text-sm"
+						title="embedded script from hub"
+						frameborder="0"
+						src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
+					/>
+				</div>
+			{:else}
+				<FlowModuleScript path={stepDetail.value.path} />
+			{/if}
+		{:else if stepDetail.value.type == 'forloopflow'}
+			<div>
+				<p class="font-medium text-secondary pb-2"> Iterator expression: </p>
+				{#if stepDetail.value.iterator.type == 'static'}
+					<ObjectViewer json={stepDetail.value.iterator.value} />
+				{:else}
+					<span class="text-xs">
+						<Highlight language={typescript} code={cleanExpr(stepDetail.value.iterator.expr)} />
+					</span>
+				{/if}
+			</div>
+		{:else if stepDetail.value.type == 'branchall'}
+			<p class="font-medium text-secondary text-center pt-4 pb-8">
+				All branches will run, regardless of the inputs
+			</p>
+		{:else if stepDetail.value.type == 'branchone'}
+			<p class="font-medium text-secondary text-center pt-4 pb-8">
+				Only one branch will run based on a predicate
+			</p>
+		{:else if stepDetail.value.type == 'flow'}
+			<FlowPathViewer noSide path={stepDetail.value.path} />
+		{/if}
+	{:else}
+		<p class="font-medium text-secondary text-center pt-4 pb-8">
+			Step {stepDetail} selected
+		</p>
+	{/if}
+</div>
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index 4a06e00586..843377984c 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -40,6 +40,7 @@
 	import { importStore } from '$lib/components/apps/store'
 	import TimeAgo from '$lib/components/TimeAgo.svelte'
 	import ClipboardPanel from '$lib/components/details/ClipboardPanel.svelte'
+	import FlowGraphViewerStep from '$lib/components/FlowGraphViewerStep.svelte'
 
 	let flow: Flow | undefined
 	let can_write = false
@@ -399,7 +400,7 @@
 
 		<svelte:fragment slot="flow_step">
 			{#if stepDetail}
-				<FlowGraphViewer download {flow} overflowAuto noSide={false} noGraph={true} {stepDetail} />
+				<FlowGraphViewerStep {flow} {stepDetail} />
 			{/if}
 		</svelte:fragment>
 	</DetailPageLayout>
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index a738261d39..97ee24b9d8 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -663,7 +663,7 @@ const config = {
 				'pre code.hljs': {
 					padding: '0px !important',
 					fontFamily: theme('fontFamily.mono'),
-					fontSize: theme('fontSize.sm') + ' !important',
+					fontSize: theme('fontSize.xs') + ' !important',
 					lineHeight: theme('lineHeight.4') + ' !important'
 				},
 				'.h1-textarea': {