minor UI fixes

frontend/src/lib/components/FolderEditor.svelte

@@ -137,7 +137,7 @@
 	{#if perms}
 		<TableCustom>
 			<tr slot="header-row">
-				<th>user</th>
+				<th>user/group</th>
 				<th />
 				<th />
 			</tr>

frontend/src/lib/components/UserSettings.svelte

@@ -15,7 +15,7 @@
 	let tokens: TruncatedToken[]
 	let newToken: string | undefined
 	let newTokenLabel: string | undefined
-	let newTokenExpiration: string | undefined
+	let newTokenExpiration: number | undefined
 	let displayCreateToken = false
 	let login_type = 'none'
 
@@ -57,12 +57,13 @@
 
 	async function createToken(): Promise<void> {
 		newToken = undefined
-		let expirationISO: Date | undefined
+		let date: Date | undefined
 		if (newTokenExpiration) {
-			expirationISO = new Date(newTokenExpiration)
+			date = new Date()
+			date.setDate(date.getDate() + newTokenExpiration)
 		}
 		newToken = await UserService.createToken({
-			requestBody: { label: newTokenLabel, expiration: expirationISO?.toISOString() } as NewToken
+			requestBody: { label: newTokenLabel, expiration: date?.toISOString() } as NewToken
 		})
 		listTokens()
 		displayCreateToken = false
@@ -87,7 +88,7 @@
 					Windmill {version}
 				</div>
 
-				<h2 class="border-b">User info</h2>
+				<h2 class="border-b mt-4">User info</h2>
 				<div class="">
 					{#if passwordError}
 						<div class="text-red-600 text-2xs grow">{passwordError}</div>
@@ -164,7 +165,7 @@
 								>{truncate(newToken ?? '', 10, '****')} <Icon data={faClipboard} />
 							</button>
 						</div>
-						<div class="pt-1 text-xs text-right">
+						<div class="pt-1 text-xs ml-2">
 							Make sure to copy your personal access token now. You won’t be able to see it again!
 						</div>
 					</div>
@@ -185,29 +186,17 @@
 							</div>
 							<div class="flex flex-col ">
 								<label for="expires"
-									>Expires on <span class="text-xs text-gray-500">(optional)</span>
+									>Expires In<span class="text-xs text-gray-500">(optional)</span>
 								</label>
-								<input
-									class="block md:w-1/2"
-									type="date"
-									id="expires"
-									name="expiration-date"
-									bind:value={newTokenExpiration}
-									min={getToday().getFullYear() +
-										'/' +
-										getToday().getMonth() +
-										'/' +
-										getToday().getDate()}
-									max={getToday().getFullYear() +
-										1 +
-										'/' +
-										getToday().getMonth() +
-										'/' +
-										getToday().getDate()}
-								/>
+								<select bind:value={newTokenExpiration}>
+									<option value={undefined}>No expiration</option>
+									<option value={7}>7d</option>
+									<option value={30}>30d</option>
+									<option value={90}>90d</option>
+								</select>
 							</div>
 							<div class="flex items-end">
-								<Button btnClasses="!mt-2" on:click={createToken}>Submit</Button>
+								<Button btnClasses="!mt-2" on:click={createToken}>New Token</Button>
 							</div>
 						</div>
 					</div>

frontend/src/lib/components/flows/content/CapturePayload.svelte

@@ -115,11 +115,11 @@
 				Copy as flow inputs and test args
 			</Button>
 		</svelte:fragment>
-		<h3 class="my-2">Derived schema</h3>
+		<h3 class="my-2 mt-8">Derived schema</h3>
 		<div class="box p-2">
 			<SchemaViewer schema={jsonSchema} />
 		</div>
-		<h3 class="mt-2">Test args</h3>
-		<SchemaForm class="h-full pt-4" schema={$flowStore.schema} args={$previewArgs} />
+		<h3 class="mt-8">Test args</h3>
+		<SchemaForm class="pt-4" schema={$flowStore.schema} args={$previewArgs} />
 	</DrawerContent>
 </Drawer>

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

@@ -19,7 +19,9 @@
 		faShare,
 		faGlobe,
 		faCodeFork,
-		faClipboard
+		faClipboard,
+		faChevronUp,
+		faChevronDown
 	} from '@fortawesome/free-solid-svg-icons'
 
 	import Tooltip from '$lib/components/Tooltip.svelte'
@@ -36,6 +38,7 @@
 	import RunForm from '$lib/components/RunForm.svelte'
 	import { goto } from '$app/navigation'
 	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
+	import { slide } from 'svelte/transition'
 
 	let userSettings: UserSettings
 
@@ -117,6 +120,15 @@
 		await goto('/run/' + run + '?workspace=' + $workspaceStore)
 	}
 	let scheduleEditor: ScheduleEditor
+
+	let viewWebhookCommand = false
+
+	let args = undefined
+	$: curlCommand = `curl -H 'Content-Type: application/json' -H "Authorization: Bearer $TOKEN" -X POST -d '${JSON.stringify(
+		args
+	)}' ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${
+		flow?.path
+	}`
 </script>
 
 <ScheduleEditor on:update={() => loadSchedule()} bind:this={scheduleEditor} />
@@ -236,7 +248,6 @@
 
 			<div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-6">
 				<div class="col-span-2">
-					<h2 class="mb-2">Preview</h2>
 					<RunForm
 						{loading}
 						autofocus
@@ -245,6 +256,7 @@
 						bind:this={runForm}
 						runnable={flow}
 						runAction={runFlow}
+						bind:args
 					/>
 				</div>
 				{#if !emptyString(flow.description)}
@@ -257,11 +269,9 @@
 				<FlowViewer {flow} noSummary={true} />
 
 				<h2 id="webhook" class="mt-10 text-gray-700 pb-1 mb-3 border-b"
-					>Webhook<Tooltip
-						>To trigger this script with a webhook, do a POST request to the endpoint below. Flows
-						are not public and can only be run by users with at least view rights on them. You will
-						need to pass a bearer token to authentify as a user. You can either pass it as a Bearer
-						token or as query arg `?token=XXX`. <a
+					>Webhook<Tooltip>
+						Pass the input as a json payload, the token as a Bearer token or as query arg
+						`?token=XXX` and pass as header: 'Content-Type: application/json <a
 							href="https://docs.windmill.dev/docs/getting_started/webhooks">See docs</a
 						></Tooltip
 					></h2
@@ -285,6 +295,29 @@
 						<Button size="xs" on:click={userSettings.openDrawer}>Create token</Button>
 					</div>
 				</div>
+
+				<div class="flex flex-col gap-2 mt-2">
+					<div>
+						<Button
+							color="light"
+							size="sm"
+							endIcon={{ icon: viewWebhookCommand ? faChevronUp : faChevronDown }}
+							on:click={() => (viewWebhookCommand = !viewWebhookCommand)}
+						>
+							See example curl command
+						</Button>
+					</div>
+					{#if viewWebhookCommand}
+						<div transition:slide|local class="px-4">
+							<pre class="bg-gray-700 text-gray-100 p-2  font-mono text-sm whitespace-pre-wrap"
+								>{curlCommand} <span
+									on:click={() => copyToClipboard(curlCommand)}
+									class="cursor-pointer ml-2"><Icon data={faClipboard} /></span
+								></pre
+							>
+						</div>
+					{/if}
+				</div>
 				{#if schedule}
 					<div class="mt-10">
 						<h2

frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte

@@ -168,7 +168,7 @@
 	let viewWebhookCommand = false
 
 	let args = undefined
-	$: curlCommand = `curl -H 'Content-Type: application/json' -H 'Authorization: Bearer $TOKEN -X POST -d '${JSON.stringify(
+	$: curlCommand = `curl -H 'Content-Type: application/json' -H "Authorization: Bearer $TOKEN" -X POST -d '${JSON.stringify(
 		args
 	)}' ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/p/${
 		script?.path
@@ -412,10 +412,8 @@
 				<h3 id="webhooks">
 					Webhooks
 					<Tooltip>
-						To trigger this script with a webhook, do a POST request to the endpoints below. Scripts
-						are not public and can only be run by users with at least view rights on them. You will
-						need to pass a bearer token to authentify as a user. You can either pass it as a Bearer
-						token or as query arg `?token=XXX`.
+						Pass the input as a json payload, the token as a Bearer token or as query arg
+						`?token=XXX` and pass as header: 'Content-Type: application/json'
 						<a href="https://docs.windmill.dev/docs/getting_started/webhooks" class="text-blue-500">
 							See docs
 						</a>