From 549b11dcfb39a60acd6d3899fce51b31149f8594 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 18 Oct 2024 20:30:34 +0200
Subject: [PATCH] fix(frontend): add back script lockfile to script details pae

---
 .../details/DetailPageDetailPanel.svelte      |  8 ++--
 .../details/DetailPageLayout.svelte           | 11 ++++-
 .../details/DetailPageTriggerPanel.svelte     | 24 +++++------
 frontend/src/lib/relative_imports.ts          |  2 +-
 .../scripts/get/[...hash]/+page.svelte        | 40 +++++--------------
 5 files changed, 38 insertions(+), 47 deletions(-)

diff --git a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
index a5927c2938da7..4d56fba8f35b3 100644
--- a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
+++ b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
@@ -31,13 +31,12 @@
 			{/if}
 			{#if flow_json}
 				<Tab value="raw">Export</Tab>
+			{:else}
+				<Tab value="script">Script</Tab>
 			{/if}
 			{#if selected == 'flow_step'}
 				<Tab value="flow_step">Step</Tab>
 			{/if}
-			{#if !flow_json && !isOperator}
-				<Tab value="schema">Schema</Tab>
-			{/if}
 
 			<svelte:fragment slot="content">
 				<div class="overflow-hidden" style="height:calc(100% - 32px);">
@@ -47,6 +46,9 @@
 					<TabContent value="schema" class="flex flex-col flex-1 h-full">
 						<slot name="schema" />
 					</TabContent>
+					<TabContent value="script" class="flex flex-col flex-1 h-full">
+						<slot name="script" />
+					</TabContent>
 					<TabContent value="triggers" class="flex flex-col flex-1 h-full pt-2">
 						<DetailPageTriggerPanel bind:triggerSelected>
 							<slot slot="webhooks" name="webhooks" />
diff --git a/frontend/src/lib/components/details/DetailPageLayout.svelte b/frontend/src/lib/components/details/DetailPageLayout.svelte
index 8e9dc119a046f..ec0a5bda16799 100644
--- a/frontend/src/lib/components/details/DetailPageLayout.svelte
+++ b/frontend/src/lib/components/details/DetailPageLayout.svelte
@@ -52,10 +52,9 @@
 							<slot slot="emails" name="emails" />
 							<slot slot="schedules" name="schedules" />
 							<slot slot="cli" name="cli" />
-							<slot slot="details" name="details" />
+							<slot slot="script" name="script" />
 							<slot slot="save_inputs" name="save_inputs" />
 							<slot slot="flow_step" name="flow_step" />
-							<slot slot="schema" name="schema" />
 						</DetailPageDetailPanel>
 					</Pane>
 				</Splitpanes>
@@ -70,6 +69,10 @@
 				{#if !isOperator}
 					<Tab value="triggers">Triggers</Tab>
 				{/if}
+				{#if !flow_json}
+					<Tab value="script">Script</Tab>
+				{/if}
+
 				<svelte:fragment slot="content">
 					<TabContent value="form" class="flex flex-col flex-1 h-full">
 						<slot name="form" />
@@ -82,12 +85,16 @@
 						<DetailPageTriggerPanel bind:triggerSelected={$selectedTriggerStore}>
 							<slot slot="webhooks" name="webhooks" />
 							<slot slot="routes" name="routes" />
+							<slot slot="script" name="script" />
 							<slot slot="websockets" name="websockets" />
 							<slot slot="emails" name="emails" />
 							<slot slot="schedules" name="schedules" />
 							<slot slot="cli" name="cli" />
 						</DetailPageTriggerPanel>
 					</TabContent>
+					<TabContent value="script" class="flex flex-col flex-1 h-full">
+						<slot name="script" />
+					</TabContent>
 				</svelte:fragment>
 			</Tabs>
 		</div>
diff --git a/frontend/src/lib/components/details/DetailPageTriggerPanel.svelte b/frontend/src/lib/components/details/DetailPageTriggerPanel.svelte
index 71824b14d0fce..d09a92ae81d57 100644
--- a/frontend/src/lib/components/details/DetailPageTriggerPanel.svelte
+++ b/frontend/src/lib/components/details/DetailPageTriggerPanel.svelte
@@ -17,38 +17,38 @@
 
 <Tabs bind:selected={triggerSelected}>
 	<Tab value="webhooks">
-		<span class="flex flex-row gap-2 items-center">
-			<Webhook size={14} />
+		<span class="flex flex-row gap-2 items-center text-xs">
+			<Webhook size={12} />
 			Webhooks
 		</span>
 	</Tab>
 	<Tab value="schedules">
-		<span class="flex flex-row gap-2 items-center">
-			<CalendarCheck2 size={14} />
+		<span class="flex flex-row gap-2 items-center text-xs">
+			<CalendarCheck2 size={12} />
 			Schedules
 		</span>
 	</Tab>
 	<Tab value="routes">
-		<span class="flex flex-row gap-2 items-center">
-			<Route size={14} />
+		<span class="flex flex-row gap-2 items-center text-xs">
+			<Route size={12} />
 			HTTP
 		</span>
 	</Tab>
 	<Tab value="websockets">
-		<span class="flex flex-row gap-2 items-center">
-			<Unplug size={14} />
+		<span class="flex flex-row gap-2 items-center text-xs">
+			<Unplug size={12} />
 			Websockets
 		</span>
 	</Tab>
 	<Tab value="emails">
-		<span class="flex flex-row gap-2 items-center">
-			<MailIcon size={14} />
+		<span class="flex flex-row gap-2 items-center text-xs">
+			<MailIcon size={12} />
 			Email
 		</span>
 	</Tab>
 	<Tab value="cli">
-		<span class="flex flex-row gap-2 items-center">
-			<Terminal size={14} />
+		<span class="flex flex-row gap-2 items-center text-xs">
+			<Terminal size={12} />
 			CLI
 		</span>
 	</Tab>
diff --git a/frontend/src/lib/relative_imports.ts b/frontend/src/lib/relative_imports.ts
index 3923a1e648133..fd4b44c9ba98c 100644
--- a/frontend/src/lib/relative_imports.ts
+++ b/frontend/src/lib/relative_imports.ts
@@ -26,5 +26,5 @@ export function approximateFindPythonRelativePath(code: string) {
 
 	// Use match to find all matches in the code
 	const matches = code.match(regex)
-	return [...(matches?.entries() ?? [])] || []
+	return [...(matches?.entries() ?? [])]
 }
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 de4a75fc4ec77..66641c18d324d 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -21,7 +21,6 @@
 	import { enterpriseLicense, hubBaseUrlStore, userStore, workspaceStore } from '$lib/stores'
 	import { isDeployable, ALL_DEPLOYABLE } from '$lib/utils_deployable'
 
-	import SchemaViewer from '$lib/components/SchemaViewer.svelte'
 	import { onDestroy } from 'svelte'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
 	import {
@@ -686,17 +685,6 @@
 					</div>
 				</div>
 			</svelte:fragment>
-			<svelte:fragment slot="schema">
-				<div class="p-1 relative">
-					<button
-						on:click={() => copyToClipboard(JSON.stringify(script?.schema, null, 4))}
-						class="absolute top-2 right-2"
-					>
-						<ClipboardCopy size={14} />
-					</button>
-					<Highlight language={json} code={JSON.stringify(script?.schema, null, 4)} />
-				</div>
-			</svelte:fragment>
 			<svelte:fragment slot="save_inputs">
 				{#if args}
 					<SavedInputs
@@ -753,26 +741,14 @@
 					/>
 				</div>
 			</svelte:fragment>
-			<svelte:fragment slot="details">
+			<svelte:fragment slot="script">
 				<div>
 					<Skeleton {loading} layout={[[20]]} />
 
 					<Tabs selected="code">
 						<Tab value="code" size="xs">Code</Tab>
 						<Tab value="dependencies" size="xs">Lockfile</Tab>
-						<Tab value="arguments" size="xs">
-							<span class="inline-flex items-center gap-1">
-								Inputs
-								<Tooltip>
-									The jsonschema defines the constraints that the payload must respect to be
-									compatible with the input parameters of this script. The UI form is generated
-									automatically from the script jsonschema. See
-									<a href="https://json-schema.org/" class="text-blue-500">
-										jsonschema documentation
-									</a>
-								</Tooltip>
-							</span>
-						</Tab>
+						<Tab value="schema" size="xs">Schema</Tab>
 						<svelte:fragment slot="content">
 							<TabContent value="code">
 								<div class="p-2 w-full overflow-auto">
@@ -808,9 +784,15 @@
 									{/if}
 								</div>
 							</TabContent>
-							<TabContent value="arguments">
-								<div class="p-2">
-									<SchemaViewer schema={script.schema} />
+							<TabContent value="schema">
+								<div class="p-1 relative">
+									<button
+										on:click={() => copyToClipboard(JSON.stringify(script?.schema, null, 4))}
+										class="absolute top-2 right-2"
+									>
+										<ClipboardCopy size={14} />
+									</button>
+									<Highlight language={json} code={JSON.stringify(script?.schema, null, 4)} />
 								</div>
 							</TabContent>
 						</svelte:fragment>