From 6cb2d20b423cfd9a4af072a561bf8583a54d153b Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 27 Mar 2024 19:03:17 +0100
Subject: [PATCH] feat: support gh markdown for script, flows, resource
 descriptions

---
 .../src/lib/components/GfmMarkdown.svelte     | 11 +++++-
 .../src/lib/components/ResourceEditor.svelte  | 39 ++++++++++++++-----
 .../lib/components/copilot/MetadataGen.svelte | 25 ++++++------
 .../(logged)/flows/get/[...path]/+page.svelte |  5 +--
 4 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/frontend/src/lib/components/GfmMarkdown.svelte b/frontend/src/lib/components/GfmMarkdown.svelte
index 380798c1e4..59ed387166 100644
--- a/frontend/src/lib/components/GfmMarkdown.svelte
+++ b/frontend/src/lib/components/GfmMarkdown.svelte
@@ -5,4 +5,13 @@
 	export let md: string
 </script>
 
-<Markdown {md} plugins={[gfmPlugin()]} />
+<div class="!prose-xs pgap">
+	<Markdown {md} plugins={[gfmPlugin()]} />
+</div>
+
+<style global>
+	.pgap > p {
+		margin-top: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+</style>
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index 9634505759..9d31853348 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -14,9 +14,10 @@
 	import Toggle from './Toggle.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import TestConnection from './TestConnection.svelte'
-	import { Save } from 'lucide-svelte'
+	import { Pen, Save } from 'lucide-svelte'
 	import Markdown from 'svelte-exmarkdown'
 	import autosize from '$lib/autosize'
+	import GfmMarkdown from './GfmMarkdown.svelte'
 
 	let path = ''
 	let initialPath = ''
@@ -33,6 +34,7 @@
 	let linkedVars: string[] = []
 	let drawer: Drawer
 	let resourceTypeInfo: ResourceType | undefined = undefined
+	let renderDescription = true
 
 	let rawCode: string | undefined = undefined
 
@@ -57,6 +59,7 @@
 		linkedVars = Object.entries(args)
 			.filter(([_, v]) => typeof v == 'string' && v == `$var:${initialPath}`)
 			.map(([k, _]) => k)
+		renderDescription = false
 	}
 
 	async function editResource(): Promise<void> {
@@ -154,11 +157,36 @@
 					/>
 				</div>
 				{#if !emptyString(resourceTypeInfo?.description)}
-					<h3 class="mt-4 mb-2">{resourceTypeInfo?.name} description</h3>
+					<h4 class="mt-4 mb-2">{resourceTypeInfo?.name} description</h4>
 					<div class="text-sm">
 						<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
 					</div>
 				{/if}
+				<h4 class="mt-4 inline-flex items-center gap-4"
+					>Resource description <Required required={false} />
+					{#if can_write}
+						<div class="flex gap-1 items-center">
+							<Toggle size="xs" bind:checked={renderDescription} />
+							<Pen size={14} />
+						</div>
+					{/if}</h4
+				>
+
+				{#if can_write && renderDescription}
+					<div>
+						<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
+						<textarea
+							disabled={!can_write}
+							use:autosize
+							bind:value={description}
+							placeholder={DESCRIPTION_PLACEHOLDER}
+						/>
+					</div>
+				{:else if description == undefined || description == ''}
+					<div class="text-sm text-tertiary">No description provided</div>
+				{:else}
+					<GfmMarkdown md={description} />
+				{/if}
 				<div class="flex w-full justify-between max-w-lg items-center mt-4">
 					<Toggle
 						on:change={(e) => switchTab(e.detail)}
@@ -204,13 +232,6 @@
 						</div>
 					{/if}
 				</div>
-				<h3 class="mt-4">Description <Required required={false} /> </h3>
-				<textarea
-					disabled={!can_write}
-					use:autosize
-					bind:value={description}
-					placeholder={DESCRIPTION_PLACEHOLDER}
-				/>
 			</div>
 		</div>
 		<svelte:fragment slot="actions">
diff --git a/frontend/src/lib/components/copilot/MetadataGen.svelte b/frontend/src/lib/components/copilot/MetadataGen.svelte
index d9ab29c0fe..a925aa15d7 100644
--- a/frontend/src/lib/components/copilot/MetadataGen.svelte
+++ b/frontend/src/lib/components/copilot/MetadataGen.svelte
@@ -223,7 +223,7 @@ Generate a description for the flow below:
 	}}
 >
 	<div
-		class={'absolute left-[0.5rem] top-[0.3rem] flex flex-row  gap-2 items-start  pointer-events-none'}
+		class={'absolute left-[0.5rem] top-[1.4rem] flex flex-row  gap-2 items-start  pointer-events-none'}
 	>
 		{#if active}
 			<span
@@ -262,16 +262,19 @@ Generate a description for the flow below:
 		{/if}
 	</div>
 	{#if elementType === 'textarea'}
-		<textarea
-			bind:this={el}
-			bind:value={content}
-			use:autosize
-			{...elementProps}
-			placeholder={!active ? elementProps.placeholder : ''}
-			class={active ? '!indent-[3.5rem]' : ''}
-			on:focus={() => (focused = true)}
-			on:blur={() => (focused = false)}
-		/>
+		<div>
+			<div class="flex flex-row-reverse text-2xs text-tertiary -mt-4">GH Markdown</div>
+			<textarea
+				bind:this={el}
+				bind:value={content}
+				use:autosize
+				{...elementProps}
+				placeholder={!active ? elementProps.placeholder : ''}
+				class={active ? '!indent-[3.5rem]' : ''}
+				on:focus={() => (focused = true)}
+				on:blur={() => (focused = false)}
+			/>
+		</div>
 	{:else}
 		<input
 			bind:this={el}
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 b29af0b83a..d78b08b69c 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -44,6 +44,7 @@
 	import ClipboardPanel from '$lib/components/details/ClipboardPanel.svelte'
 	import FlowGraphViewerStep from '$lib/components/FlowGraphViewerStep.svelte'
 	import { loadFlowSchedule, type Schedule } from '$lib/components/flows/scheduleUtils'
+	import GfmMarkdown from '$lib/components/GfmMarkdown.svelte'
 
 	let flow: Flow | undefined
 	let can_write = false
@@ -340,9 +341,7 @@
 						<div class="p-8 w-full max-w-3xl mx-auto gap-2 bg-surface">
 							<div class="flex flex-col gap-2 mb-8">
 								{#if !emptyString(flow?.description)}
-									<div class=" break-words whitespace-pre-wrap text-sm mb-4 !text-secondary">
-										<Urlize text={defaultIfEmptyString(flow?.description, 'No description')} />
-									</div>
+									<GfmMarkdown md={defaultIfEmptyString(flow?.description, 'No description')} />
 								{/if}
 							</div>