fix: improve user resource input

frontend/src/lib/components/LightweightResourcePicker.svelte

@@ -7,9 +7,10 @@
 
 	import DarkModeObserver from './DarkModeObserver.svelte'
 	import { Button, Drawer, DrawerContent } from './common'
-	import { Plus, Loader2 } from 'lucide-svelte'
+	import { Plus, Loader2, Link2Off } from 'lucide-svelte'
 	import type { AppViewerContext } from './apps/types'
 	import { sendUserToast } from '$lib/toast'
+	import path from 'path'
 
 	const dispatch = createEventDispatcher()
 
@@ -30,30 +31,36 @@
 					value: value ?? initialValue,
 					label: value ?? initialValue
 			  }
-			: ''
+			: undefined
 
 	let collection = [valueSelect]
 
+	let loading = true
 	async function loadResources(resourceType: string | undefined) {
-		const nc = (
-			await ResourceService.listResource({
-				workspace: $workspaceStore!,
-				resourceType
-			})
-		).map((x) => ({
-			value: x.path,
-			label: x.path
-		}))
+		loading = true
+		try {
+			const nc = (
+				await ResourceService.listResource({
+					workspace: appViewerContext?.workspace ?? $workspaceStore,
+					resourceType
+				})
+			).map((x) => ({
+				value: x.path,
+				label: x.path
+			}))
 
-		// TODO check if this is needed
-		if (!nc.find((x) => x.value == value) && (initialValue || value)) {
-			nc.push({ value: value ?? initialValue!, label: value ?? initialValue! })
-		}
-		collection = nc
-
-		if (expressOAuthSetup && nc.length > 0) {
-			value = nc[0].value
-			valueSelect = nc[0]
+			// TODO check if this is needed
+			if (!nc.find((x) => x.value == value) && (initialValue || value)) {
+				nc.push({ value: value ?? initialValue!, label: value ?? initialValue! })
+			}
+			collection = nc
+			console.log('collection', collection)
+			if (expressOAuthSetup && nc.length > 0) {
+				value = nc[0].value
+				valueSelect = nc[0]
+			}
+		} finally {
+			loading = false
 		}
 	}
 
@@ -85,6 +92,12 @@
 						sendUserToast(e.detail, true)
 						open = false
 					}}
+					on:refresh={async (e) => {
+						await loadResources(resourceType)
+						value = e.detail
+						valueSelect = { value, label: value }
+						open = false
+					}}
 				/>
 			{/await}
 		{/key}
@@ -107,7 +120,8 @@
 					on:error={(e) => {
 						sendUserToast(e.detail, true)
 					}}
-					on:refresh={(e) => {
+					on:refresh={async (e) => {
+						await loadResources(resourceType)
 						value = e.detail
 						valueSelect = { value, label: value }
 						drawer?.closeDrawer?.()
@@ -127,42 +141,89 @@
 {/if}
 
 <div class="flex flex-col w-full items-start">
-	<div class="flex flex-row gap-x-1 w-full">
-		<Select
-			{disabled}
-			portal={!disablePortal}
-			value={valueSelect}
-			on:change={(e) => {
-				value = e.detail.value
-				valueSelect = e.detail
-			}}
-			on:clear={() => {
-				value = undefined
-				valueSelect = ''
-			}}
-			items={collection}
-			class="text-clip grow min-w-0"
-			placeholder="{resourceType ?? 'any'} resource"
-			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-			containerStyles={darkMode
-				? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-				: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-		/>
-
-		{#if resourceType}
-			<Button
+	<div class="flex flex-row gap-x-1 w-full justify-between items-center">
+		{#if loading}
+			<Loader2 size={12} class="animate-spin" />
+		{:else if expressOAuthSetup && collection.length < 2}
+			{#if collection.length == 0}
+				<div class="text-2xs text-primary pr-2">Connect {resourceType}</div>
+			{:else if collection.length == 1 && value == collection[0]?.value}
+				<div class="text-2xs text-primary pr-2 flex items-center gap-1">
+					{resourceType} <div class="rounded-full w-2 h-2 bg-green-600 animate-pulse" />
+				</div>
+			{:else}
+				<Button
+					color="light"
+					size="sm"
+					on:click={() => {
+						const item = collection[0]
+						if (item) {
+							value = item.value
+							valueSelect = item
+						}
+					}}>Use existing</Button
+				>
+			{/if}
+		{:else}
+			<Select
 				{disabled}
-				color="light"
-				variant="contained"
-				btnClasses="w-8 px-0.5 py-1.5"
-				size="sm"
-				on:click={() => {
-					open = true
-					drawer?.openDrawer?.()
+				portal={!disablePortal}
+				value={valueSelect}
+				on:change={(e) => {
+					value = e.detail.value
+					valueSelect = e.detail
 				}}
-				startIcon={{ icon: Plus }}
-				iconOnly
+				on:clear={() => {
+					value = undefined
+					valueSelect = undefined
+				}}
+				items={collection}
+				class="text-clip grow min-w-0"
+				placeholder="{resourceType ?? 'any'} resource"
+				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+				containerStyles={darkMode
+					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+					: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 			/>
 		{/if}
+		<div class="flex gap-1 items-center">
+			{#if valueSelect && expressOAuthSetup}
+				<Button
+					{disabled}
+					color="light"
+					variant="contained"
+					size="sm"
+					btnClasses="w-8 px-0.5 py-1.5"
+					iconOnly
+					on:click={async () => {
+						if (valueSelect && valueSelect.label) {
+							value = undefined
+							await ResourceService.deleteResource({
+								workspace: appViewerContext?.workspace ?? $workspaceStore,
+								path: valueSelect.label
+							})
+							await loadResources(resourceType)
+							valueSelect = undefined
+						}
+					}}
+					startIcon={{ icon: Link2Off }}
+				/>
+			{/if}
+			{#if resourceType}
+				<Button
+					{disabled}
+					color="light"
+					variant="contained"
+					btnClasses="w-8 px-0.5 py-1.5"
+					size="sm"
+					on:click={() => {
+						open = true
+						drawer?.openDrawer?.()
+					}}
+					startIcon={{ icon: Plus }}
+					iconOnly
+				/>
+			{/if}
+		</div>
 	</div>
 </div>