adding a resource is done in inlined-drawer

frontend/src/lib/components/AppConnect.svelte

@@ -48,6 +48,8 @@
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import ApiConnectForm from './ApiConnectForm.svelte'
 
+	export let newPageOAuth = false
+
 	let manual = false
 	let value: string = ''
 	let valueToken: TokenResponse
@@ -87,6 +89,8 @@
 		if (connect) {
 			scopes = connect.scopes
 			extra_params = Object.entries(connect.extra_params ?? {})
+		} else {
+			manual = true
 		}
 		drawer.openDrawer?.()
 	}
@@ -131,7 +135,11 @@
 			if (extra_params.length > 0) {
 				extra_params.forEach(([key, value]) => url.searchParams.append(key, value))
 			}
-			window.location.href = url.toString()
+			if (!newPageOAuth) {
+				window.location.href = url.toString()
+			} else {
+				window.open(url.toString(), '_blank')
+			}
 		} else {
 			let exists = await VariableService.existsVariable({
 				workspace: $workspaceStore!,

frontend/src/lib/components/ResourcePicker.svelte

@@ -6,6 +6,7 @@
 	import Icon from 'svelte-awesome'
 	import { Button } from './common'
 	import Select from 'svelte-select'
+	import AppConnect from './AppConnect.svelte'
 
 	const dispatch = createEventDispatcher()
 	let resources: Resource[] = []
@@ -30,8 +31,11 @@
 		value: x.path,
 		label: `${x.path}${x.description ? ' | ' + x.description : ''}`
 	}))
+	let appConnect: AppConnect
 </script>
 
+<AppConnect newPageOAuth bind:this={appConnect} />
+
 <div class="flex flex-row gap-x-1 w-full">
 	<Select
 		bind:justValue={value}
@@ -39,8 +43,8 @@
 		class="grow"
 		placeholder="Pick a {resourceType} resource"
 	/>
-	<Button variant="border" target="_blank" size="xs" href="/resources?connect_app={resourceType}"
-		><Icon scale={0.8} data={faPlus} /></Button
+	<Button variant="border" size="xs" on:click={() => appConnect?.open?.(resourceType)}>
+		<Icon scale={0.8} data={faPlus} /></Button
 	>
 	<Button
 		variant="border"