From 4d60be738ee72358a3eaac95cc2f2dd0bd5ca1b8 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 18 Jan 2023 09:38:54 +0100
Subject: [PATCH] UX nits on schedule

---
 frontend/src/lib/components/RunForm.svelte    |  75 ++++++------
 .../(root)/(logged)/schedules/+page.svelte    | 112 +++++++++++-------
 .../scripts/get/[...hash]/+page.svelte        |   5 +-
 3 files changed, 107 insertions(+), 85 deletions(-)

diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index ab644ab8f2..fd91266fe6 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -123,47 +123,50 @@
 	{:else}
 		<div class="text-xs text-gray-600">No schema</div>
 	{/if}
-	{#if viewOptions}
-		<div transition:slide class="mt-6">
-			<h2>Run later</h2>
-			<div class="border rounded-md p-3 pt-4">
-				<div class="flex flex-row items-end">
-					<div class="w-max md:w-2/3 mt-2 mb-1">
-						<label for="run-time" />
-						<input
-							class="inline-block"
-							type="datetime-local"
-							id="run-time"
-							name="run-scheduled-time"
-							bind:value={scheduledForStr}
-							min={getToday().toISOString().slice(0, 16)}
-						/>
-					</div>
+	{#if schedulable}
+		<div class="flex gap-2 items-start flex-wrap justify-between mt-2 md:mt-6 mb-6">
+			<div class="flex flex-col">
+				<div>
 					<Button
-						variant="border"
-						color="blue"
+						color="light"
 						size="sm"
-						btnClasses="mx-2 mb-1"
-						on:click={() => {
-							scheduledForStr = undefined
-						}}
+						endIcon={{ icon: viewOptions ? faChevronUp : faChevronDown }}
+						on:click={() => (viewOptions = !viewOptions)}
 					>
-						Clear
+						Schedule to run later
 					</Button>
 				</div>
+				{#if viewOptions}
+					<div transition:slide class="mt-6">
+						<div class="border rounded-md p-3 pt-4">
+							<div class="flex flex-row items-end">
+								<div class="w-max md:w-2/3 mt-2 mb-1">
+									<label for="run-time" />
+									<input
+										class="inline-block"
+										type="datetime-local"
+										id="run-time"
+										name="run-scheduled-time"
+										bind:value={scheduledForStr}
+										min={getToday().toISOString().slice(0, 16)}
+									/>
+								</div>
+								<Button
+									variant="border"
+									color="blue"
+									size="sm"
+									btnClasses="mx-2 mb-1"
+									on:click={() => {
+										scheduledForStr = undefined
+									}}
+								>
+									Clear
+								</Button>
+							</div>
+						</div>
+					</div>
+				{/if}
 			</div>
-		</div>
-	{/if}
-	{#if schedulable}
-		<div class="flex gap-2 items-center flex-wrap justify-between mt-2 md:mt-6 mb-6">
-			<Button
-				color="light"
-				size="sm"
-				endIcon={{ icon: viewOptions ? faChevronUp : faChevronDown }}
-				on:click={() => (viewOptions = !viewOptions)}
-			>
-				Schedule to run later
-			</Button>
 			{#if runnable?.path?.startsWith(`u/${$userStore?.username}`) != true && (runnable?.path?.split('/')?.length ?? 0) > 2}
 				<div class="flex items-center gap-1">
 					<Toggle
@@ -184,7 +187,7 @@
 					disabled={!isValid}
 					on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}
 				>
-					{scheduledForStr ? 'Schedule run to a later time' : buttonText}
+					{scheduledForStr ? 'Schedule to run later' : buttonText}
 				</Button>
 			</div>
 		</div>
diff --git a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
index 37a5c9a922..4e3e67971e 100644
--- a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
@@ -10,6 +10,7 @@
 	import {
 		faCircle,
 		faEdit,
+		faList,
 		faPlus,
 		faShare,
 		faToggleOff,
@@ -76,7 +77,7 @@
 			<TableCustom>
 				<tr slot="header-row">
 					<th>Schedule</th>
-					<th>Script or Flow</th>
+					<th>Script/Flow</th>
 					<th>schedule</th>
 					<th />
 					<th>off/on</th>
@@ -95,11 +96,14 @@
 								<SharedBadge {canWrite} extraPerms={extra_perms} />
 							</td>
 							<td
-								><div class="inline-flex flex-row gap-x-2 align-middle"
-									><Badge class="text-2xs font-mono ml-2">{is_flow ? 'flow' : 'script'}</Badge><a
-										class="text-sm break-words"
-										href="{is_flow ? '/flows/get' : '/scripts/get'}/{script_path}">{script_path}</a
-									></div
+								><div class="inline-flex flex-row gap-x-2 align-middle w-full"
+									><div class="grow"
+										><a
+											class="text-sm break-words"
+											href="{is_flow ? '/flows/get' : '/scripts/get'}/{script_path}"
+											>{script_path}</a
+										></div
+									><Badge class="text-2xs font-mono">{is_flow ? 'flow' : 'script'}</Badge></div
 								>
 							</td><td><Badge color="blue">{schedule}</Badge></td>
 							<td>
@@ -145,47 +149,63 @@
 								><span class="text-2xs">By {edited_by} <br />the {displayDate(edited_at)}</span></td
 							>
 							<td>
-								<Dropdown
-									placement="bottom-end"
-									dropdownItems={[
-										{
-											displayName: enabled ? 'Disable' : 'Enable',
-											icon: enabled ? faToggleOff : faToggleOn,
-											disabled: !canWrite,
-											action: () => {
-												setScheduleEnabled(path, enabled ? false : true)
+								<div class="inline-flex gap-1">
+									<Button
+										href={`/runs/${path}`}
+										size="xs"
+										startIcon={{ icon: faList }}
+										color="light"
+										variant="border"
+									>
+										Runs
+									</Button>
+									<Dropdown
+										placement="bottom-end"
+										dropdownItems={[
+											{
+												displayName: enabled ? 'Disable' : 'Enable',
+												icon: enabled ? faToggleOff : faToggleOn,
+												disabled: !canWrite,
+												action: () => {
+													setScheduleEnabled(path, enabled ? false : true)
+												}
+											},
+											{
+												displayName: 'Delete',
+												icon: faTrash,
+												disabled: !canWrite,
+												action: async () => {
+													await ScheduleService.deleteSchedule({
+														workspace: $workspaceStore ?? '',
+														path
+													})
+													loadSchedules()
+												}
+											},
+											{
+												displayName: 'Edit',
+												icon: faEdit,
+												disabled: !canWrite,
+												action: () => {
+													scheduleEditor?.openEdit(path, is_flow)
+												}
+											},
+											{
+												displayName: 'View Runs',
+												icon: faList,
+												href: '/runs/' + path
+											},
+											{
+												displayName: canWrite ? 'Share' : 'See Permissions',
+												icon: faShare,
+												action: () => {
+													shareModal.openDrawer(path, 'schedule')
+												}
 											}
-										},
-										{
-											displayName: 'Delete',
-											icon: faTrash,
-											disabled: !canWrite,
-											action: async () => {
-												await ScheduleService.deleteSchedule({
-													workspace: $workspaceStore ?? '',
-													path
-												})
-												loadSchedules()
-											}
-										},
-										{
-											displayName: 'Edit',
-											icon: faEdit,
-											disabled: !canWrite,
-											action: () => {
-												scheduleEditor?.openEdit(path, is_flow)
-											}
-										},
-										{
-											displayName: canWrite ? 'Share' : 'See Permissions',
-											icon: faShare,
-											action: () => {
-												shareModal.openDrawer(path, 'schedule')
-											}
-										}
-									]}
-								/></td
-							>
+										]}
+									/>
+								</div>
+							</td>
 						</tr>
 					{/each}
 				</tbody>
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index 283a6a0716..6d4ed2e0a9 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -347,7 +347,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={runLoading}
 						autofocus
@@ -409,7 +408,7 @@
 				</Tabs>
 			</div>
 
-			<div class="max-w-2xl">
+			<div class="max-w-2xl mt-12">
 				<h3 id="webhooks">
 					Webhooks
 					<Tooltip>
@@ -479,7 +478,7 @@
 					</svelte:fragment>
 				</Tabs>
 			</div>
-			<div>
+			<div class="mt-20">
 				{#if can_write}
 					<h3>Danger zone</h3>
 					<div class="flex gap-2">