connect an app under resource picker

frontend/src/lib/components/AppConnect.svelte

@@ -39,11 +39,12 @@
 
 	let pathError = ''
 
-	export function open() {
+	export function open(rt?: string) {
 		step = 1
 		value = ''
 		resource_type = ''
 		no_back = false
+		resource_type = rt ?? ''
 		modal.openModal()
 	}
 
@@ -154,6 +155,16 @@
 	<div slot="title">Connect an App</div>
 	<div slot="content">
 		{#if step == 1}
+			{#if resource_type && !connects[resource_type] && !connectsManual[resource_type]}
+				<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
+					<p class="font-bold">No app integration for {resource_type}</p>
+					<p>
+						The resource type "{resource_type}" seems to not have an app integration. You can still
+						create this resource manually by closing this modal and pressing: "Add a resource". You
+						can also contribute to windmill and add it as an app integration if relevant.
+					</p>
+				</div>
+			{/if}
 			<PageHeader title="OAuth apps" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) as [key, values]}
@@ -190,7 +201,7 @@
 					}}>Add item &nbsp;<Icon data={faPlus} class="mb-1" /></button
 				><span class="ml-2">{(scopes ?? []).length} item(s)</span>
 			{:else}
-				<p class="italic text-sm">Pick an oauth app and customize the scopes here</p>
+				<p class="italic text-sm">Pick an OAuth app and customize the scopes here</p>
 			{/if}
 			<PageHeader title="API token apps" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">

frontend/src/lib/components/ArgInput.svelte

@@ -122,13 +122,8 @@
 		}
 	}
 
-	export let inputCat: InputCat = computeInputCat(
-		type,
-		format,
-		itemsType?.type,
-		enum_,
-		contentEncoding
-	)
+	export let inputCat: InputCat = 'string'
+	$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding)
 </script>
 
 <div class="flex flex-col w-full">

frontend/src/lib/components/ResourceEditor.svelte

@@ -23,8 +23,7 @@
 	let resourceToEdit: Resource | undefined
 
 	let description: string = ''
-	let DESCRIPTION_PLACEHOLDER = `You can use markdown to style your description.
-A good way to make resources user friendly is to link to a default script for your resource [example](scripts/add?template=f2d1dc8df796d9e8)`
+	let DESCRIPTION_PLACEHOLDER = `You can use markdown to style your description`
 	let selectedResourceType: string | undefined
 	let resourceType: ResourceType
 	let resourceSchema: Schema | undefined
@@ -39,8 +38,7 @@ A good way to make resources user friendly is to link to a default script for yo
 
 	const dispatch = createEventDispatcher()
 
-	export async function initNew() {
-		selectedResourceType = undefined
+	export async function initNew(rt?: string) {
 		step = 1
 		args = {}
 		path = ''
@@ -48,6 +46,7 @@ A good way to make resources user friendly is to link to a default script for yo
 		initialPath = ''
 		resourceSchema = emptySchema()
 		resourceToEdit = undefined
+		selectedResourceType = rt
 		modal.openModal()
 	}
 
@@ -152,7 +151,7 @@ A good way to make resources user friendly is to link to a default script for yo
 					minRows={3}
 				/>
 				<div>
-					<div class="mb-1 font-semibold text-gray-700">
+					<div class="mb-2 font-semibold text-gray-700">
 						Resource type<Required required={true} />
 					</div>
 					<ResourceTypePicker

frontend/src/lib/components/ResourcePicker.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import { type Resource, ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
+	import ResourceEditor from './ResourceEditor.svelte'
 
 	let resources: Resource[] = []
 
 	export let value: string | undefined = undefined
-
 	export let resourceType: string | undefined = undefined
 
+	let resourceEditor: ResourceEditor
+
 	async function loadResources(resourceType: string | undefined) {
 		resources = await ResourceService.listResource({ workspace: $workspaceStore!, resourceType })
 	}
@@ -19,12 +21,25 @@
 	}
 </script>
 
+<ResourceEditor bind:this={resourceEditor} on:refresh={() => loadResources(resourceType)} />
+
 <select class="mt-1" bind:value placeholder="Pick a resource {resourceType}">
 	<option value={undefined} />
 	{#each resources as r}
 		<option value={r.path}>{r.path}{r.description ? ' | ' + r.description : ''}</option>
 	{/each}
 </select>
-<a class="text-xs" target="_blank" href="/resources"
-	>Connect an app/add a resource on resources page</a
->
+<div class="flex flex-row gap-4">
+	<a class="text-xs hover:underline" target="_blank" href="/resources?connect_app={resourceType}"
+		>Connect the app {resourceType} to an account (if available)</a
+	>
+	<button
+		class="text-xs text-blue-500"
+		type="button"
+		on:click={() => {
+			resourceEditor.initNew(resourceType)
+		}}
+	>
+		+ Create a new {resourceType} resource manually
+	</button>
+</div>

frontend/src/routes/resources.svelte

@@ -126,6 +126,9 @@
 		if ($oauthStore && resource_type) {
 			appConnect.openFromOauth(resource_type)
 		}
+		if ($page.url.searchParams.get('connect_app')) {
+			appConnect.open($page.url.searchParams.get('connect_app') ?? undefined)
+		}
 	})
 </script>