From 99246382eeef3c69b6cfca6c50647bb263d05f7f Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 18 Jan 2023 17:50:30 +0100
Subject: [PATCH] minor UI fixes

---
 .../(logged)/flows/get/[...path]/+page.svelte | 218 ++++++++++--------
 .../(logged)/flows/run/[...path]/+page.svelte |   4 +-
 .../(root)/(logged)/folders/+page.svelte      |   2 +-
 .../scripts/get/[...hash]/+page.svelte        |  81 ++++---
 4 files changed, 178 insertions(+), 127 deletions(-)

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 dcf1bdae41..a99ef34c68 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -39,6 +39,7 @@
 	import { goto } from '$app/navigation'
 	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
 	import { slide } from 'svelte/transition'
+	import MoveDrawer from '$lib/components/MoveDrawer.svelte'
 
 	let userSettings: UserSettings
 
@@ -129,6 +130,9 @@
 	)}' ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${
 		flow?.path
 	}`
+
+	let webhook: HTMLHeadElement
+	let moveDrawer: MoveDrawer
 </script>
 
 <ScheduleEditor on:update={() => loadSchedule()} bind:this={scheduleEditor} />
@@ -140,114 +144,138 @@
 	loading={!flow}
 	layout={[0.75, [2, 0, 2], 2.25, [{ h: 1.5, w: 40 }], 0.2, [{ h: 1, w: 30 }]]}
 />
-{#if flow}
-	<ActionRow applyPageWidth>
-		<svelte:fragment slot="left">
-			<Button
-				target="_blank"
-				href={flowToHubUrl(flow).toString()}
-				variant="border"
-				color="light"
-				size="xs"
-				startIcon={{ icon: faGlobe }}
-			>
-				Publish to Hub
-			</Button>
-			<Button
-				on:click={() => scheduleEditor?.openNew(true, flow?.path ?? '')}
-				variant="border"
-				color="light"
-				size="xs"
-				startIcon={{ icon: faCalendar }}
-			>
-				Schedule
-			</Button>
-			<Button
-				on:click={() => shareModal.openDrawer(flow?.path ?? '', 'flow')}
-				variant="border"
-				color="light"
-				size="xs"
-				startIcon={{ icon: faShare }}
-				disabled={!can_write}
-			>
-				Share
-			</Button>
-		</svelte:fragment>
-		<svelte:fragment slot="right">
-			<Button
-				href="/flows/run/{path}"
-				variant="contained"
-				color="blue"
-				size="md"
-				startIcon={{ icon: faPlay }}
-			>
-				Run
-			</Button>
-			{#if !$userStore?.operator}
-				<Button
-					href="/flows/edit/{path}?nodraft=true"
-					variant="contained"
-					color="blue"
-					size="md"
-					startIcon={{ icon: faEdit }}
-					disabled={!can_write}
-				>
-					Edit
-				</Button>
-				<Button
-					href="/flows/add?template={flow.path}"
-					variant="contained"
-					color="blue"
-					size="md"
-					startIcon={{ icon: faCodeFork }}
-				>
-					Fork
-				</Button>
-			{/if}
-			<Button href="/runs/{flow.path}" color="blue" size="md" startIcon={{ icon: faList }}>
-				View runs
-			</Button>
-		</svelte:fragment>
-	</ActionRow>
-{/if}
+
+<MoveDrawer
+	bind:this={moveDrawer}
+	on:update={async (e) => {
+		await goto('/flows/get/' + e.detail)
+		loadFlow()
+		loadSchedule()
+	}}
+/>
 
 <CenteredPage>
 	{#if flow}
-		<h1 class="break-words py-2 mr-2">
-			{defaultIfEmptyString(flow.summary, flow.path)}
-		</h1>
-		{#if !emptyString(flow.summary)}
-			<h2 class="font-bold pb-4">{flow.path}</h2>
-		{/if}
+		<div class="prose-sm mx-auto mt-6">
+			<div class="flex flex-row w-full justify-between item-center">
+				<h1 class="mb-1 truncate">
+					{defaultIfEmptyString(flow.summary, flow.path)}
+				</h1>
+				<div class="flex flex-row-reverse gap-2 h-full">
+					<Button
+						href="/flows/run/{path}"
+						variant="contained"
+						color="blue"
+						size="md"
+						startIcon={{ icon: faPlay }}
+					>
+						Run
+					</Button>
+					{#if !$userStore?.operator}
+						<Button
+							href="/flows/edit/{path}?nodraft=true"
+							variant="contained"
+							color="blue"
+							size="md"
+							startIcon={{ icon: faEdit }}
+							disabled={!can_write}
+						>
+							Edit
+						</Button>
+						<Button
+							href="/flows/add?template={flow.path}"
+							variant="contained"
+							color="blue"
+							size="md"
+							startIcon={{ icon: faCodeFork }}
+						>
+							Fork
+						</Button>
+					{/if}
+					<Button href="/runs/{flow.path}" color="blue" size="md" startIcon={{ icon: faList }}>
+						View runs
+					</Button>
+				</div>
+			</div>
+			{#if !emptyString(flow.summary)}
+				<span class="text-lg font-semibold">{flow.path}</span>
+			{/if}
+		</div>
 	{/if}
 	<ShareModal bind:this={shareModal} />
 
-	<div class="grid grid-cols-1 gap-6 max-w-7xl pb-6">
+	<div class="grid grid-cols-1 gap-6 max-w-7xl pb-6 mt-2">
 		<Skeleton
 			loading={!flow}
 			layout={[[{ h: 1.5, w: 40 }], 1, [4], 2.25, [{ h: 1.5, w: 30 }], 1, [10]]}
 		/>
 		{#if flow}
-			<p class="text-sm text-gray-600"
-				>Edited {displayDaysAgo(flow.edited_at ?? '')} by {flow.edited_by}
-				<a href="#webhook" class="ml-2">
-					<Badge color="dark-blue">Webhook</Badge>
-				</a>
-				{#if schedule}
-					<a href="#primary-schedule" class="ml-2">
-						<Badge color="dark-blue">Primary schedule</Badge>
-					</a>{/if}</p
-			>
+			<div>
+				<span class="text-sm text-gray-600">
+					Edited {displayDaysAgo(flow.edited_at ?? '')} by {flow.edited_by}
 
-			{#if flow.archived}
-				<div class="bg-red-100 border-l-4 border-red-500 text-orange-700 p-4" role="alert">
-					<p class="font-bold">Archived</p>
-					<p>This flow was archived</p>
+					{#if schedule}
+						<a href="#primary-schedule" class="ml-2">
+							<Badge color="dark-blue">Primary schedule</Badge>
+						</a>{/if}</span
+				>
+
+				{#if flow.archived}
+					<div class="bg-red-100 border-l-4 border-red-500 text-orange-700 p-4" role="alert">
+						<p class="font-bold">Archived</p>
+						<p>This flow was archived</p>
+					</div>
+				{/if}
+
+				<div class="flex gap-2 flex-wrap mt-2">
+					<Button
+						target="_blank"
+						href={flowToHubUrl(flow).toString()}
+						variant="border"
+						color="light"
+						size="xs"
+						startIcon={{ icon: faGlobe }}
+					>
+						Publish to Hub
+					</Button>
+					<Button
+						on:click={() => shareModal.openDrawer(flow?.path ?? '', 'flow')}
+						variant="border"
+						color="light"
+						size="xs"
+						startIcon={{ icon: faShare }}
+						disabled={!can_write}
+					>
+						Share
+					</Button>
+					<Button
+						on:click={() => scheduleEditor?.openNew(true, flow?.path ?? '')}
+						variant="border"
+						color="light"
+						size="xs"
+						startIcon={{ icon: faCalendar }}
+					>
+						Schedule
+					</Button>
+					<Button
+						on:click={() => moveDrawer.openDrawer(flow?.path ?? '', flow?.summary, 'flow')}
+						variant="border"
+						color="light"
+						size="xs"
+						startIcon={{ icon: faEdit }}
+					>
+						Move/Rename
+					</Button>
+					<Button
+						btnClasses="ml-2"
+						variant="border"
+						size="xs"
+						on:click={() => webhook.scrollIntoView()}>Webhook</Button
+					>
 				</div>
-			{/if}
-
+			</div>
 			<div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-6">
-				<div class="col-span-2">
+				<div class="col-span-2 box">
 					<RunForm
 						{loading}
 						autofocus
@@ -268,7 +296,7 @@
 			<div class="mt-4">
 				<FlowViewer {flow} noSummary={true} />
 
-				<h2 id="webhook" class="mt-10 text-gray-700 pb-1 mb-3 border-b"
+				<h2 bind:this={webhook} class="mt-10 text-gray-700 pb-1 mb-3 border-b"
 					>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
diff --git a/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte
index b07083cd49..421c57adc8 100644
--- a/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte
@@ -13,7 +13,7 @@
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import RunForm from '$lib/components/RunForm.svelte'
 	import { Button, Kbd, Skeleton } from '$lib/components/common'
-	import { faPlay, faScroll } from '@fortawesome/free-solid-svg-icons'
+	import { faEye, faPlay, faScroll } from '@fortawesome/free-solid-svg-icons'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
 
 	const path = $page.params.path
@@ -90,7 +90,7 @@
 						<div class="flex flex-row">
 							<div>
 								<Button
-									startIcon={{ icon: faScroll }}
+									startIcon={{ icon: faEye }}
 									disabled={flow == undefined}
 									btnClasses="mr-4"
 									variant="border"
diff --git a/frontend/src/routes/(root)/(logged)/folders/+page.svelte b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
index 9d0b44dbc4..416e8ed6d5 100644
--- a/frontend/src/routes/(root)/(logged)/folders/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
@@ -70,7 +70,7 @@
 <CenteredPage>
 	<PageHeader
 		title="Folders"
-		tooltip="Folder users together to grant roles and homegenous permissions. Same users can be in many folders at the same time."
+		tooltip="Folders allow to group items such as scripts/flows/resources/schedule together and to grant homogenous RBAC permissions to groups and individual users towards them."
 	>
 		<div class="flex flex-row">
 			<input
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 24e7513b79..455002edff 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -53,6 +53,7 @@
 	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
 	import { Loader2 } from 'lucide-svelte'
 	import { slide } from 'svelte/transition'
+	import MoveDrawer from '$lib/components/MoveDrawer.svelte'
 
 	let userSettings: UserSettings
 	let script: Script | undefined
@@ -164,6 +165,7 @@
 		}
 	}
 	let scheduleEditor: ScheduleEditor
+	let webhookElem: HTMLHeadingElement
 
 	let viewWebhookCommand = false
 
@@ -173,8 +175,17 @@
 	)}' ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/p/${
 		script?.path
 	}`
+	let moveDrawer: MoveDrawer
 </script>
 
+<MoveDrawer
+	bind:this={moveDrawer}
+	on:update={async (e) => {
+		await goto('/scripts/get/' + e.detail)
+		loadScript($page.params.hash)
+	}}
+/>
+
 <ScheduleEditor bind:this={scheduleEditor} />
 
 {#if script}
@@ -227,38 +238,35 @@
 				</div>
 			</div>
 
-			<span class="text-lg font-semibold">{script.path}</span>
+			{#if !emptyString(script.summary)}
+				<span class="text-lg font-semibold">{script.path}</span>
+			{/if}
 
-			<div class="flex flex-row gap-x-2 flex-wrap">
-				<p>
+			<div class="flex flex-row gap-x-2 flex-wrap items-center mt-4">
+				<span class="text-sm text-gray-600">
 					Edited {displayDaysAgo(script.created_at || '')} by {script.created_by || 'unknown'}
-				</p>
-				<div class="flex items-center gap-2">
-					<Badge color="dark-gray">
-						{truncateHash(script?.hash ?? '')}
+				</span>
+				<Badge color="dark-gray">
+					{truncateHash(script?.hash ?? '')}
+				</Badge>
+				{#if script?.is_template}
+					<Badge color="blue">Template</Badge>
+				{/if}
+				{#if script && script.kind !== 'script'}
+					<Badge color="blue">
+						{script?.kind}
 					</Badge>
-					<a href="#webhooks">
-						<Badge color="dark-blue">Webhooks</Badge>
-					</a>
-					{#if script?.is_template}
-						<Badge color="blue">Template</Badge>
-					{/if}
-					{#if script && script.kind !== 'script'}
-						<Badge color="blue">
-							{script?.kind}
-						</Badge>
-					{/if}
-					{#if deploymentInProgress}
-						<Badge color="yellow">
-							<Loader2 size={12} class="inline animate-spin mr-1" />
-							Deployment in progress
-						</Badge>
-					{/if}
-					<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
-				</div>
+				{/if}
+				{#if deploymentInProgress}
+					<Badge color="yellow">
+						<Loader2 size={12} class="inline animate-spin mr-1" />
+						Deployment in progress
+					</Badge>
+				{/if}
+				<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
 			</div>
 
-			<div class="flex gap-2 flex-wrap">
+			<div class="flex gap-2 flex-wrap mt-4">
 				<Button
 					disabled={deploymentInProgress}
 					target="_blank"
@@ -297,6 +305,21 @@
 				>
 					Schedule
 				</Button>
+				<Button
+					on:click={() => moveDrawer.openDrawer(script?.path ?? '', script?.summary, 'script')}
+					variant="border"
+					color="light"
+					size="xs"
+					startIcon={{ icon: faEdit }}
+				>
+					Move/Rename
+				</Button>
+				<Button
+					color="dark"
+					variant="border"
+					size="xs"
+					on:click={() => webhookElem.scrollIntoView()}>Webhooks</Button
+				>
 				{#if Array.isArray(script.parent_hashes) && script.parent_hashes.length > 0}
 					<ButtonPopup
 						color="dark"
@@ -346,7 +369,7 @@
 			{/if}
 
 			<div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-6">
-				<div class="col-span-2">
+				<div class="col-span-2 box">
 					<RunForm
 						loading={runLoading}
 						autofocus
@@ -409,7 +432,7 @@
 			</div>
 
 			<div class="max-w-2xl mt-12">
-				<h3 id="webhooks">
+				<h3 bind:this={webhookElem} id="webhooks">
 					Webhooks
 					<Tooltip>
 						Pass the input as a json payload, the token as a Bearer token or as query arg