From 918f6dbc7c7db570441d213875d18a080361b463 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 18 Aug 2022 13:46:12 +0200
Subject: [PATCH] icon for paths

---
 .../src/lib/components/FlowStatusViewer.svelte     |  5 ++++-
 frontend/src/lib/components/FlowViewer.svelte      |  5 ++++-
 frontend/src/lib/components/IconedPath.svelte      | 14 ++++++++++++++
 frontend/src/lib/components/ModuleStep.svelte      |  5 ++---
 frontend/src/lib/components/flows/FlowInput.svelte |  4 +++-
 .../lib/components/flows/FlowModuleHeader.svelte   |  8 ++------
 frontend/src/lib/utils.ts                          |  7 +++----
 7 files changed, 32 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/lib/components/IconedPath.svelte

diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index 0ff25fff9e..668e4da3dd 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -9,6 +9,7 @@
 	import { workspaceStore } from '$lib/stores'
 	import FlowJobResult from './FlowJobResult.svelte'
 	import JobStatus from './JobStatus.svelte'
+	import IconedPath from './IconedPath.svelte'
 
 	export let job: QueuedJob | CompletedJob
 	export let jobs: (Job | Job[] | undefined)[] = []
@@ -159,8 +160,10 @@
 										Script at path <a
 											target="_blank"
 											href={scriptPathToHref(mod.value.path ?? '')}
-											class="font-medium text-gray-900">{mod.value.path}</a
+											class="font-medium text-gray-900"
 										>
+											<IconedPath path={mod.value.path} />
+										</a>
 									{/if}
 								</p>
 							</div>
diff --git a/frontend/src/lib/components/FlowViewer.svelte b/frontend/src/lib/components/FlowViewer.svelte
index 1ffce47203..cc03ae0934 100644
--- a/frontend/src/lib/components/FlowViewer.svelte
+++ b/frontend/src/lib/components/FlowViewer.svelte
@@ -13,6 +13,7 @@
 	import FieldHeader from './FieldHeader.svelte'
 	import InputTransformsViewer from './InputTransformsViewer.svelte'
 	import SvelteMarkdown from 'svelte-markdown'
+	import IconedPath from './IconedPath.svelte'
 
 	export let flow: {
 		summary: string
@@ -114,8 +115,10 @@
 											Script at path <a
 												target="_blank"
 												href={scriptPathToHref(mod?.value?.path ?? '')}
-												class="font-medium text-gray-900">{mod?.value?.path}</a
+												class="font-medium text-gray-900"
 											>
+												<IconedPath path={mod?.value?.path ?? ''} />
+											</a>
 											{#if mod?.value?.path?.startsWith('hub/')}
 												<div>
 													<button
diff --git a/frontend/src/lib/components/IconedPath.svelte b/frontend/src/lib/components/IconedPath.svelte
new file mode 100644
index 0000000000..f9b2b4523b
--- /dev/null
+++ b/frontend/src/lib/components/IconedPath.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import IconedResourceType from './IconedResourceType.svelte'
+
+	export let path: string
+</script>
+
+{#if path.startsWith('hub/')}
+	<span class="inline-flex flex-row gap-x-2 items-center">
+		<IconedResourceType name={path.split('/')[2]} silent={true} />
+		<span>{path}</span>
+	</span>
+{:else}
+	path
+{/if}
diff --git a/frontend/src/lib/components/ModuleStep.svelte b/frontend/src/lib/components/ModuleStep.svelte
index 85940f2127..062e6797b1 100644
--- a/frontend/src/lib/components/ModuleStep.svelte
+++ b/frontend/src/lib/components/ModuleStep.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Job, RawScript, type Flow, type FlowModule } from '$lib/gen'
-	import { faArrowDown, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 	import Editor from './Editor.svelte'
 	import EditorBar from './EditorBar.svelte'
@@ -24,7 +24,6 @@
 	import { flowStateStore, type FlowModuleSchema, type FlowState } from './flows/flowState'
 	import { stepOpened } from './flows/stepOpenedStore'
 	import { buildExtraLib, objectToTsType, schemaToObject, schemaToTsType } from '$lib/utils'
-	import { rotateRight } from 'svelte-awesome/icons'
 
 	export let indexes: number[]
 	export let mod: FlowModule
@@ -56,7 +55,7 @@
 	}
 
 	function getPickableProperties(flow: Flow, flowState: FlowState): PickableProperties {
-		const flowInputAsObject = schemaToObject(flow.schema, args)
+		const flowInputAsObject = schemaToObject(flow?.schema, args)
 
 		if (indexes.length > 1) {
 			const [parentIndex] = indexes
diff --git a/frontend/src/lib/components/flows/FlowInput.svelte b/frontend/src/lib/components/flows/FlowInput.svelte
index 5dde2c63dd..ecbe26e2ba 100644
--- a/frontend/src/lib/components/flows/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/FlowInput.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { emptySchema } from '$lib/utils'
+
 	import SchemaEditor from '../SchemaEditor.svelte'
 	import { flowStore } from './../flows/flowStore'
 	import CopyFirstStepSchema from './CopyFirstStepSchema.svelte'
@@ -15,7 +17,7 @@
 				on:change={() => {
 					$flowStore = $flowStore
 				}}
-				schema={$flowStore.schema}
+				schema={$flowStore?.schema ?? emptySchema()}
 			/>
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/flows/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/FlowModuleHeader.svelte
index 46a9590f10..ba0c71fd00 100644
--- a/frontend/src/lib/components/flows/FlowModuleHeader.svelte
+++ b/frontend/src/lib/components/flows/FlowModuleHeader.svelte
@@ -15,6 +15,7 @@
 	import { Highlight } from 'svelte-highlight'
 	import python from 'svelte-highlight/languages/python'
 	import typescript from 'svelte-highlight/languages/typescript'
+	import IconedPath from '../IconedPath.svelte'
 	import IconedResourceType from '../IconedResourceType.svelte'
 	import Modal from '../Modal.svelte'
 	import { isEmptyFlowModule } from './flowStateUtils'
@@ -47,12 +48,7 @@
 <div on:click={() => stepOpened.update(() => String(indexes.join('-')))}>
 	<h3 class="text-sm font-bold text-gray-900">
 		{#if 'path' in mod.value && mod.value.path}
-			{#if mod.value.path.startsWith('hub/')}
-				<IconedResourceType name={mod.value.path.split('/')[2]} silent={true} />&nbsp;{mod.value
-					.path}
-			{:else}
-				{mod.value.path}
-			{/if}
+			<IconedPath path={mod.value.path} />
 		{:else if 'language' in mod.value && mod.value.language}
 			Inline {mod.value.language}
 		{:else}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 1dc87da375..7d4dabdd21 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -41,9 +41,8 @@ export function displayDate(dateString: string | undefined): string {
 	if (date.toString() === 'Invalid Date') {
 		return ''
 	} else {
-		return `${date.getFullYear()}/${
-			date.getMonth() + 1
-		}/${date.getDate()} at ${date.toLocaleTimeString()}`
+		return `${date.getFullYear()}/${date.getMonth() + 1
+			}/${date.getDate()} at ${date.toLocaleTimeString()}`
 	}
 }
 
@@ -487,7 +486,7 @@ export async function loadHubScripts() {
 	const scripts = (await ScriptService.listHubScripts()).asks ?? []
 	const processed = scripts
 		.map((x) => ({
-			path: `hub/${x.id}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
+			path: `hub/${x.id}/${x.app}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
 			summary: `${x.summary} (${x.app}) ${x.views} uses`,
 			approved: x.approved,
 			is_trigger: x.is_trigger,