From cbd68a944cea74d46776ee2eabfbff52026d374b Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 25 Sep 2023 19:13:05 +0200
Subject: [PATCH] fix: fix resource type picker object reinitialization

---
 frontend/src/lib/components/ArgInput.svelte      |  7 ++++++-
 .../src/lib/components/InputTransformForm.svelte |  9 +++++----
 .../src/lib/components/ModulePreviewForm.svelte  |  9 +++------
 frontend/src/lib/components/SchemaForm.svelte    |  6 ++++--
 .../src/lib/components/TemplateEditor.svelte     |  2 +-
 .../src/lib/components/resourceTypesStore.ts     | 16 ++++++++++++++++
 .../(root)/(logged)/resources/+page.svelte       |  2 ++
 7 files changed, 37 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/lib/components/resourceTypesStore.ts

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 7fccc1c62a..6dd2ed4554 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -114,7 +114,10 @@
 	}
 
 	function evalValueToRaw() {
-		rawValue = inputCat === 'object' ? JSON.stringify(value, null, 2) : undefined
+		rawValue =
+			inputCat === 'object' || inputCat === 'resource-object'
+				? JSON.stringify(value, null, 2)
+				: undefined
 	}
 
 	evalValueToRaw()
@@ -351,6 +354,8 @@
 						</Button>
 					</div>
 				</div>
+			{:else if inputCat == 'resource-object' && resourceTypes == undefined}
+				<span class="text-2xs text-tertiary">Loading resource types...</span>
 			{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))}
 				<ObjectResourceInput {disablePortal} {format} bind:value {showSchemaExplorer} />
 			{:else if inputCat == 'object' || inputCat == 'resource-object'}
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index b72c11d3f5..fbb5393464 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -15,11 +15,11 @@
 
 	import type VariableEditor from './VariableEditor.svelte'
 	import type ItemPicker from './ItemPicker.svelte'
-	import { ResourceService, type InputTransform } from '$lib/gen'
+	import type { InputTransform } from '$lib/gen'
 	import TemplateEditor from './TemplateEditor.svelte'
 	import { setInputCat as computeInputCat, isCodeInjection } from '$lib/utils'
 	import { FunctionSquare, Plug } from 'lucide-svelte'
-	import { workspaceStore } from '$lib/stores'
+	import { getResourceTypes } from './resourceTypesStore'
 
 	export let schema: Schema
 	export let arg: InputTransform | any
@@ -141,8 +141,9 @@
 	let resourceTypes: string[] | undefined = undefined
 
 	async function loadResourceTypes() {
-		resourceTypes = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore! })
+		resourceTypes = await getResourceTypes()
 	}
+
 	loadResourceTypes()
 </script>
 
@@ -263,7 +264,7 @@
 			</span>
 		{/if}
 		{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
-			<div class="mt-2 min-h-[28px] rounded border border-1 border-gray-400">
+			<div class="mt-2 min-h-[28px]">
 				{#if arg}
 					<TemplateEditor
 						bind:this={monacoTemplate}
diff --git a/frontend/src/lib/components/ModulePreviewForm.svelte b/frontend/src/lib/components/ModulePreviewForm.svelte
index 54d6a6a6fe..13c32fa1e3 100644
--- a/frontend/src/lib/components/ModulePreviewForm.svelte
+++ b/frontend/src/lib/components/ModulePreviewForm.svelte
@@ -8,10 +8,10 @@
 	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from './flows/types'
 	import { evalValue } from './flows/utils'
-	import { ResourceService, type FlowModule } from '$lib/gen'
+	import type { FlowModule } from '$lib/gen'
 	import type { PickableProperties } from './flows/previousResults'
 	import type SimpleEditor from './SimpleEditor.svelte'
-	import { workspaceStore } from '$lib/stores'
+	import { getResourceTypes } from './resourceTypesStore'
 
 	export let schema: Schema
 	export let args: Record<string, any> = {}
@@ -62,10 +62,7 @@
 
 	let resourceTypes: string[] | undefined = undefined
 
-	async function loadResourceTypes() {
-		resourceTypes = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore! })
-	}
-	loadResourceTypes()
+	getResourceTypes()
 </script>
 
 <div class="w-full pt-2">
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index d19ef3468b..9d557a0273 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Schema } from '$lib/common'
-	import { ResourceService, VariableService } from '$lib/gen'
+	import { VariableService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { allTrue } from '$lib/utils'
 	import { faPlus } from '@fortawesome/free-solid-svg-icons'
@@ -10,6 +10,7 @@
 	import VariableEditor from './VariableEditor.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
+	import { getResourceTypes } from './resourceTypesStore'
 
 	export let schema: Schema | any
 	export let args: Record<string, any> = {}
@@ -70,8 +71,9 @@
 	let resourceTypes: string[] | undefined = undefined
 
 	async function loadResourceTypes() {
-		resourceTypes = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore! })
+		resourceTypes = await getResourceTypes()
 	}
+
 	loadResourceTypes()
 </script>
 
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index 1265bc47ca..6e66436cca 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -604,7 +604,7 @@
 <div
 	bind:this={divEl}
 	style="height: 18px;"
-	class="{$$props.class ?? ''} template rounded-lg min-h-4 mx-0.5 overflow-clip"
+	class="{$$props.class ?? ''} border template rounded min-h-4 mx-0.5 overflow-clip"
 	bind:clientWidth={width}
 />
 
diff --git a/frontend/src/lib/components/resourceTypesStore.ts b/frontend/src/lib/components/resourceTypesStore.ts
new file mode 100644
index 0000000000..360fc81034
--- /dev/null
+++ b/frontend/src/lib/components/resourceTypesStore.ts
@@ -0,0 +1,16 @@
+import { ResourceService } from "$lib/gen";
+import { workspaceStore } from "$lib/stores";
+import { get, writable } from "svelte/store";
+
+export const resourceTypesStore = writable<string[] | undefined>(undefined)
+
+export async function getResourceTypes() {
+    const rts = get(resourceTypesStore)
+    if (rts) {
+        return rts
+    } else {
+        const nrts = await ResourceService.listResourceTypeNames({ workspace: get(workspaceStore)! })
+        resourceTypesStore.set(nrts)
+        return nrts
+    }
+}
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index 1a99450033..792ea7e0c3 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -15,6 +15,7 @@
 	import Popover from '$lib/components/Popover.svelte'
 	import Required from '$lib/components/Required.svelte'
 	import ResourceEditor from '$lib/components/ResourceEditor.svelte'
+	import { resourceTypesStore } from '$lib/components/resourceTypesStore'
 	import SchemaEditor from '$lib/components/SchemaEditor.svelte'
 	import SchemaViewer from '$lib/components/SchemaViewer.svelte'
 	import SearchItems from '$lib/components/SearchItems.svelte'
@@ -175,6 +176,7 @@
 		resourceTypeDrawer.closeDrawer?.()
 		sendUserToast('Resource type created')
 		loadResourceTypes()
+		$resourceTypesStore = undefined
 	}
 
 	async function updateResourceType(): Promise<void> {