fix(frontend): user resource picker for app use lightweight component

.github/workflows/docker-image.yml

@@ -63,7 +63,6 @@ jobs:
           flavor: |
             latest=false
           tags: |
-            type=ref,event=pr
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
 
@@ -114,7 +113,6 @@ jobs:
           flavor: |
             latest=false
           tags: |
-            type=ref,event=pr
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
 
@@ -177,7 +175,6 @@ jobs:
           flavor: |
             latest=false
           tags: |
-            type=ref,event=pr
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
 
@@ -455,8 +452,6 @@ jobs:
           flavor: |
             latest=false
           tags: |
-            type=ref,event=branch
-            type=ref,event=pr
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
             type=sha,enable=true,priority=100,prefix=,suffix=,format=short
@@ -508,8 +503,6 @@ jobs:
           images: |
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}-ee-reports
           tags: |
-            type=ref,event=branch
-            type=ref,event=pr
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
             type=sha,enable=true,priority=100,prefix=,suffix=,format=short
@@ -594,7 +587,6 @@ jobs:
           flavor: |
             latest=false
           tags: |
-            type=ref,event=pr
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
 
@@ -641,7 +633,6 @@ jobs:
           flavor: |
             latest=false
           tags: |
-            type=ref,event=pr
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
 

frontend/src/lib/components/AppConnectInner.svelte

@@ -89,6 +89,10 @@
 		valueToken = undefined
 		await loadConnects()
 		manual = !connects?.includes(resourceType)
+		if (manual && expressOAuthSetup) {
+			dispatch('error', 'Express OAuth setup is not available for non OAuth resource types')
+			return
+		}
 		if (rt) {
 			if (!manual && expressOAuthSetup) {
 				await getScopesAndParams()

frontend/src/lib/components/LightweightResourcePicker.svelte

@@ -10,6 +10,7 @@
 	import { Button, Drawer, DrawerContent } from './common'
 	import { Plus } from 'lucide-svelte'
 	import type { AppViewerContext } from './apps/types'
+	import { sendUserToast } from '$lib/toast'
 
 	const dispatch = createEventDispatcher()
 
@@ -17,7 +18,11 @@
 	export let value: string | undefined = initialValue
 	export let resourceType: string | undefined = undefined
 	export let disablePortal = false
+	export let expressOAuthSetup = false
+	export let disabled = false
 
+	let open = false
+	let refreshCount = 0
 	const appViewerContext = getContext<AppViewerContext>('AppViewerContext')
 
 	let valueSelect =
@@ -56,40 +61,64 @@
 
 	let drawer: Drawer | undefined = undefined
 
+	export function askNewResource() {
+		refreshCount += 1
+		open = true
+	}
+
 	function processEvent(event: MessageEvent) {
 		if (event.origin !== window.location.origin) {
 			return
 		}
 
+		if (event.data.type === 'error') {
+			sendUserToast(event.data.error, true)
+		}
 		if (event.data.type === 'refresh') {
+			window.removeEventListener('message', processEvent)
 			value = event.data.detail
 			valueSelect = { value, label: value }
 			drawer?.closeDrawer?.()
+			open = false
 		}
 	}
 </script>
 
 <DarkModeObserver bind:darkMode />
 
-<Drawer bind:this={drawer} size="800px">
-	<DrawerContent
-		title="Add a Resource"
-		on:close={drawer.closeDrawer}
-		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
-		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
-	>
-		<iframe
-			title="App connection"
-			class="w-full h-full"
-			src="{base}/embed_connect?resource_type={resourceType}&workspace={appViewerContext?.workspace ??
-				$workspaceStore}"
-		/>
-	</DrawerContent>
-</Drawer>
+{#if expressOAuthSetup}
+	{#if open}
+		{#key refreshCount}
+			<iframe
+				title="App connection"
+				class="w-full h-full hidden"
+				src="{base}/embed_connect?resource_type={resourceType}&workspace={appViewerContext?.workspace ??
+					$workspaceStore}&express=true"
+			/>
+		{/key}
+	{/if}
+{:else}
+	<Drawer bind:this={drawer} size="800px">
+		<DrawerContent
+			title="Add a Resource"
+			on:close={drawer.closeDrawer}
+			tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
+			documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
+		>
+			<iframe
+				title="App connection"
+				class="w-full h-full"
+				src="{base}/embed_connect?resource_type={resourceType}&workspace={appViewerContext?.workspace ??
+					$workspaceStore}&express=false"
+			/>
+		</DrawerContent>
+	</Drawer>
+{/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) => {
@@ -111,14 +140,14 @@
 
 		{#if resourceType}
 			<Button
+				{disabled}
 				color="light"
 				variant="border"
 				size="xs"
 				on:click={() => {
+					open = true
 					window.removeEventListener('message', processEvent)
-					window.addEventListener('message', processEvent, {
-						once: true
-					})
+					window.addEventListener('message', processEvent)
 
 					drawer?.openDrawer?.()
 				}}

frontend/src/lib/components/apps/components/inputs/AppUserResource.svelte

@@ -14,8 +14,8 @@
 	import { components } from '../../editor/component'
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
-	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
 	import { twMerge } from 'tailwind-merge'
+	import LightweightResourcePicker from '$lib/components/LightweightResourcePicker.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -76,7 +76,7 @@
 		}
 	}
 
-	let resourcePicker: ResourcePicker | undefined = undefined
+	let resourcePicker: LightweightResourcePicker | undefined = undefined
 </script>
 
 {#each Object.keys(components['userresourcecomponent'].initialData.configuration) as key (key)}
@@ -105,7 +105,7 @@
 			class="relative w-full {classInput}',
 "
 		>
-			<ResourcePicker
+			<LightweightResourcePicker
 				expressOAuthSetup={resolvedConfig.expressOauthSetup}
 				bind:this={resourcePicker}
 				{value}

frontend/src/routes/(root)/(logged)/+layout.svelte

@@ -82,7 +82,9 @@
 			$workspaceStore = queryWorkspace
 		}
 
-		menuHidden = $page.url.searchParams.get('nomenubar') === 'true'
+		menuHidden =
+			$page.url.searchParams.get('nomenubar') === 'true' ||
+			$page.url.pathname.startsWith('/oauth/callback/')
 	}
 
 	$: updateUserStore($workspaceStore)

frontend/src/routes/(root)/embed_connect/+page.svelte

@@ -18,6 +18,7 @@
 
 	let darkMode: boolean = false
 	const workspace = $page.url.searchParams.get('workspace')
+	const express = $page.url.searchParams.get('express') == 'true'
 
 	if (workspace) {
 		$workspaceStore = workspace
@@ -25,7 +26,7 @@
 
 	onMount(async () => {
 		if (resourceType) {
-			appConnect?.open(resourceType)
+			appConnect?.open(resourceType, express)
 		}
 	})
 </script>
@@ -67,6 +68,9 @@
 		bind:isGoogleSignin
 		bind:disabled
 		bind:manual
+		on:error={(e) => {
+			window?.parent?.postMessage({ type: 'error', error: e.detail }, '*')
+		}}
 		on:refresh={(e) => {
 			window?.parent?.postMessage({ type: 'refresh', detail: e.detail }, '*')
 		}}