From fcdd02dca63df37d6d85b464ef46ba106ebd8ac5 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 26 Jul 2023 01:29:22 +0200
Subject: [PATCH] generate slug from summary on creation

---
 frontend/src/lib/components/Path.svelte       |  7 +++
 .../src/lib/components/ScriptBuilder.svelte   | 33 ++++++++----
 .../apps/editor/AppEditorHeader.svelte        | 53 +++++++++++--------
 .../components/apps/editor/GridEditor.svelte  |  2 +-
 .../flows/content/FlowSettings.svelte         | 53 +++++++++++++------
 frontend/tailwind.config.cjs                  |  3 ++
 6 files changed, 104 insertions(+), 47 deletions(-)

diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 6b94790c75..acd937dd8d 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -76,6 +76,13 @@
 		}
 	}
 
+	export function setName(x: string) {
+		if (meta) {
+			meta.name = x
+			onMetaChange()
+		}
+	}
+
 	export async function reset() {
 		if (path == '' || path == 'u//') {
 			if ($lastMetaUsed == undefined || $lastMetaUsed.owner != $userStore?.username) {
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 18c211c39e..ab49dba7b3 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -257,6 +257,19 @@
 				break
 		}
 	}
+
+	let path: Path | undefined = undefined
+	$: {
+		if (initialPath == '' && script.summary?.length > 0) {
+			path?.setName(
+				script.summary
+					.toLowerCase()
+					.replace(/[^a-z0-9_]/g, '_')
+					.replace(/-+/g, '_')
+					.replace(/^-|-$/g, '')
+			)
+		}
+	}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -264,21 +277,23 @@
 {#if !$userStore?.operator}
 	<Drawer placement="right" bind:open={metadataOpen} size="800px">
 		<DrawerContent title="Metadata" on:close={() => (metadataOpen = false)}>
-			<h2 class="border-b pb-1 mb-4">Path</h2>
-			<Path
-				bind:error={pathError}
-				bind:path={script.path}
-				{initialPath}
-				namePlaceholder="script"
-				kind="script"
-			/>
-			<h2 class="border-b pb-1 mt-10 mb-4">Summary</h2>
+			<h2 class="border-b pb-1 mb-4">Summary</h2>
 
 			<input
 				type="text"
 				bind:value={script.summary}
 				placeholder="Short summary to be displayed when listed"
 			/>
+			<h2 class="border-b pb-1 mt-10 mb-4">Path</h2>
+			<Path
+				bind:this={path}
+				bind:error={pathError}
+				bind:path={script.path}
+				{initialPath}
+				namePlaceholder="script"
+				kind="script"
+			/>
+
 			<h2 class="border-b pb-1 mt-10 mb-4">Language</h2>
 
 			{#if lockedLanguage}
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index d2e5c32dbd..659a951e5a 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -386,6 +386,19 @@
 		}
 		lock = false
 	}
+
+	let path: Path | undefined = undefined
+	$: {
+		if (appPath == '' && $summary?.length > 0) {
+			path?.setName(
+				$summary
+					.toLowerCase()
+					.replace(/[^a-z0-9_]/g, '_')
+					.replace(/-+/g, '_')
+					.replace(/^-|-$/g, '')
+			)
+		}
+	}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -400,16 +413,6 @@
 			<Alert title="Require path" type="info">
 				Choose a path to save the initial draft of the app.
 			</Alert>
-			<div class="py-2" />
-			<Path
-				bind:error={pathError}
-				bind:path={newPath}
-				initialPath=""
-				namePlaceholder="app"
-				kind="app"
-			/>
-			<div class="py-4" />
-
 			<h3>Summary</h3>
 			<div class="w-full pt-2">
 				<input
@@ -420,6 +423,17 @@
 				/>
 			</div>
 
+			<div class="py-2" />
+			<Path
+				bind:this={path}
+				bind:error={pathError}
+				bind:path={newPath}
+				initialPath=""
+				namePlaceholder="app"
+				kind="app"
+			/>
+			<div class="py-4" />
+
 			<div slot="actions">
 				<Button
 					startIcon={{ icon: faSave }}
@@ -434,7 +448,14 @@
 {/if}
 <Drawer bind:open={saveDrawerOpen} size="800px">
 	<DrawerContent title="Deploy" on:close={() => closeSaveDrawer()}>
+		<span class="text-secondary text-sm font-bold">Summary</span>
+		<div class="w-full pt-2">
+			<input type="text" placeholder="App summary" class="text-sm w-full" bind:value={$summary} />
+		</div>
+		<div class="py-4" />
+		<span class="text-secondary text-sm font-bold">Path</span>
 		<Path
+			bind:this={path}
 			bind:error={pathError}
 			bind:path={newPath}
 			initialPath={appPath}
@@ -442,18 +463,6 @@
 			kind="app"
 		/>
 
-		<div class="py-4" />
-
-		<h3>Summary</h3>
-		<div class="w-full pt-2">
-			<input
-				type="text"
-				placeholder="App summary"
-				class="text-sm w-full font-semibold"
-				bind:value={$summary}
-			/>
-		</div>
-
 		<div slot="actions">
 			<Button
 				startIcon={{ icon: faSave }}
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 65c97dec59..d7bd5d9e37 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -50,7 +50,7 @@
 			: 'bg-surface'} px-4 py-1 items-center gap-4"
 		style="z-index: 1000;"
 	>
-		<h2 class="truncate">{$summary}</h2>
+		<h3 class="truncate">{$summary}</h3>
 		{#if !$connectingInput.opened}
 			<RecomputeAllComponents />
 		{/if}
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index f27b396ccc..070fb6089c 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -38,6 +38,19 @@
 		$workerTags = undefined
 		loadWorkerGroups()
 	}
+
+	let path: Path | undefined = undefined
+	$: {
+		if (initialPath == '' && $flowStore.summary?.length > 0) {
+			path?.setName(
+				$flowStore.summary
+					.toLowerCase()
+					.replace(/[^a-z0-9_]/g, '_')
+					.replace(/-+/g, '_')
+					.replace(/^-|-$/g, '')
+			)
+		}
+	}
 </script>
 
 <div class="h-full overflow-hidden">
@@ -52,10 +65,10 @@
 				<svelte:fragment slot="content">
 					<TabContent value="settings-metadata" class="p-4 h-full">
 						<div class="overflow-auto h-full">
-							<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="flow" kind="flow" />
-
-							<label class="block my-4">
-								<span class="text-secondary text-sm">Summary <Required required={false} /></span>
+							<label class="block mb-10 mt-2">
+								<span class="text-secondary text-sm font-bold"
+									>Summary <Required required={false} /></span
+								>
 								<input
 									type="text"
 									bind:value={$flowStore.summary}
@@ -64,20 +77,30 @@
 								/>
 							</label>
 
-							<label class="block my-4" for="inp">
-								<span class="text-secondary text-sm">
+							<span class="text-secondary text-sm font-bold"> Path </span>
+							<Path
+								bind:this={path}
+								bind:path={$flowStore.path}
+								{initialPath}
+								namePlaceholder="flow"
+								kind="flow"
+							/>
+
+							<label class="block mt-10 mb-6" for="inp">
+								<span class="text-secondary text-sm font-bold">
 									Description
 									<Required required={false} />
-									<textarea
-										use:autosize
-										type="text"
-										class="text-sm"
-										id="inp"
-										bind:value={$flowStore.description}
-										placeholder="What this flow does and how to use it."
-										rows="3"
-									/>
 								</span>
+
+								<textarea
+									use:autosize
+									type="text"
+									class="text-sm"
+									id="inp"
+									bind:value={$flowStore.description}
+									placeholder="What this flow does and how to use it."
+									rows="3"
+								/>
 							</label>
 							<Slider text="How to trigger flows?">
 								<div class="text-sm text-tertiary border p-4 mb-20">
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 333d548f85..847f10db14 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -598,6 +598,9 @@ const config = {
 				a: {
 					color: theme('colors.blue.500')
 				},
+				'.dark input::placeholder': {
+					color: theme('colors.gray.400')
+				},
 				'input:not(.windmillapp),input[type="text"]:not(.windmillapp),input[type="email"]:not(.windmillapp),input[type="url"]:not(.windmillapp),input[type="password"]:not(.windmillapp),input[type="number"]:not(.windmillapp),input[type="date"]:not(.windmillapp),input[type="datetime-local"]:not(.windmillapp),input[type="month"]:not(.windmillapp),input[type="search"]:not(.windmillapp),input[type="tel"]:not(.windmillapp),input[type="time"]:not(.windmillapp),input[type="week"]:not(.windmillapp),textarea:not(.windmillapp):not(.monaco-mouse-cursor-text),select:not(.windmillapp)':
 					{
 						display: 'block',