Refresh button in flow picker quick

frontend/src/lib/components/flows/content/FlowInputsQuick.svelte

@@ -38,6 +38,7 @@
 		kind: 'trigger' | 'script' | 'preprocessor' | 'failure' | 'approval'
 		selectedKind?: 'script' | 'flow' | 'approval' | 'trigger' | 'preprocessor' | 'failure'
 		displayPath?: boolean
+		refreshCount?: number
 	}
 
 	let {
@@ -51,7 +52,8 @@
 		small = false,
 		kind,
 		selectedKind = kind,
-		displayPath = false
+		displayPath = false,
+		refreshCount = 0
 	}: Props = $props()
 
 	type HubCompletion = {
@@ -452,9 +454,9 @@
 				on:pickScript
 				on:pickFlow
 				{displayPath}
+				{refreshCount}
 			/>
 		{/if}
-
 		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 			{#if (!selected || selected?.kind === 'integrations') && (preFilter === 'hub' || preFilter === 'all')}
 				{#if !selected && preFilter !== 'hub'}
@@ -475,6 +477,7 @@
 					on:pickScript
 					bind:loading
 					{displayPath}
+					{refreshCount}
 				/>
 			{/if}
 		{/if}

frontend/src/lib/components/flows/map/InsertModuleInner.svelte

@@ -5,6 +5,7 @@
 	import type { FlowBuilderWhitelabelCustomUi } from '$lib/components/custom_ui'
 	import ToggleHubWorkspaceQuick from '$lib/components/ToggleHubWorkspaceQuick.svelte'
 	import TopLevelNode from '../pickers/TopLevelNode.svelte'
+	import RefreshButton from '$lib/components/common/button/RefreshButton.svelte'
 
 	const dispatch = createEventDispatcher()
 	interface Props {
@@ -35,6 +36,8 @@
 	let width = $state(0)
 	let height = $state(0)
 
+	let refreshCount = $state(0)
+
 	let displayPath = $derived(width > 650 || height > 400)
 </script>
 
@@ -64,6 +67,7 @@
 		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 			<ToggleHubWorkspaceQuick bind:selected={preFilter} />
 		{/if}
+		<RefreshButton {loading} on:click={() => (refreshCount += 1)} />
 	</div>
 
 	<div class="flex flex-row grow min-h-0">
@@ -165,6 +169,7 @@
 			{preFilter}
 			{small}
 			{displayPath}
+			{refreshCount}
 		/>
 	</div>
 </div>

frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte

@@ -1,7 +1,8 @@
 <script module lang="ts">
 	let listHubIntegrationsCached = createCache(
-		(params: { kind: HubScriptKind & string }) => IntegrationService.listHubIntegrations(params),
-		{ initial: { kind: 'script' } }
+		({ kind }: { kind: HubScriptKind & string; refreshCount?: number }) =>
+			IntegrationService.listHubIntegrations({ kind }),
+		{ initial: { kind: 'script', refreshCount: 0 } }
 	)
 	let listHubScriptsCached = createCache(
 		async ({
@@ -12,11 +13,12 @@
 			filter: string
 			kind: HubScriptKind & string
 			appFilter: string | undefined
+			refreshCount?: number
 		}) =>
 			filter.length > 0
 				? await ScriptService.queryHubScripts({ text: filter, limit: 40, kind })
 				: ((await ScriptService.getTopHubScripts({ limit: 40, kind, app: appFilter })).asks ?? []),
-		{ initial: { filter: '', kind: 'script', appFilter: undefined } }
+		{ initial: { filter: '', kind: 'script', appFilter: undefined, refreshCount: 0 } }
 	)
 </script>
 
@@ -51,6 +53,7 @@
 		}[]
 		displayPath?: boolean
 		apps?: string[]
+		refreshCount?: number
 	}
 
 	let {
@@ -61,14 +64,17 @@
 		appFilter = undefined,
 		items = $bindable([]),
 		displayPath = false,
-		apps = $bindable([])
+		apps = $bindable([]),
+		refreshCount = 0
 	}: Props = $props()
 	let allApps: string[] = []
 
 	async function getAllApps(filterKind: typeof kind) {
 		try {
 			hubNotAvailable = false
-			allApps = (await listHubIntegrationsCached({ kind: filterKind })).map((x) => x.name)
+			allApps = (await listHubIntegrationsCached({ kind: filterKind, refreshCount })).map(
+				(x) => x.name
+			)
 			apps = allApps
 		} catch (err) {
 			console.error('Hub is not available')
@@ -79,11 +85,11 @@
 	}
 
 	let hubScriptsFilteredPromise = usePromise(
-		() => listHubScriptsCached({ appFilter, filter, kind }),
+		() => listHubScriptsCached({ appFilter, filter, kind, refreshCount }),
 		{ loadInit: false }
 	)
 	$effect(() => {
-		;[filter, kind, appFilter]
+		;[filter, kind, appFilter, refreshCount]
 		hubScriptsFilteredPromise.refresh()
 	})
 	$effect(() => {
@@ -131,7 +137,7 @@
 		}
 	}
 	$effect(() => {
-		kind
+		;[kind, refreshCount]
 		untrack(() => {
 			getAllApps(kind)
 		})

frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	let initialWorkspace = get(workspaceStore)
 	let loadItemsCached = createCache(
 		({
 			workspace,
@@ -8,12 +9,23 @@
 			workspace?: string
 			kind?: string
 			isTemplate?: boolean
+			refreshCount?: number
 		}) =>
 			workspace
 				? kind == 'flow'
 					? FlowService.listFlows({ workspace })
 					: ScriptService.listScripts({ workspace, kinds: kind, isTemplate })
-				: undefined
+				: undefined,
+		initialWorkspace
+			? {
+					initial: {
+						workspace: initialWorkspace,
+						kind: 'script',
+						isTemplate: undefined,
+						refreshCount: 0
+					}
+				}
+			: {}
 	)
 </script>
 
@@ -28,6 +40,7 @@
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import { usePromise } from '$lib/svelte5Utils.svelte'
+	import { get } from 'svelte/store'
 
 	type Item = {
 		path: string
@@ -37,7 +50,8 @@
 	}
 
 	let items = usePromise(
-		async () => await loadItemsCached({ workspace: $workspaceStore!, kind, isTemplate }),
+		async () =>
+			await loadItemsCached({ workspace: $workspaceStore!, kind, isTemplate, refreshCount }),
 		{ loadInit: false }
 	)
 
@@ -54,6 +68,7 @@
 		ownerFilter?:
 			| { kind: 'inline' | 'owner' | 'integrations'; name: string | undefined }
 			| undefined
+		refreshCount?: number
 	}
 
 	let {
@@ -64,7 +79,8 @@
 		filteredWithOwner = $bindable(undefined),
 		filter = '',
 		owners = $bindable([]),
-		ownerFilter = $bindable(undefined)
+		ownerFilter = $bindable(undefined),
+		refreshCount = 0
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -88,6 +104,7 @@
 		}
 	}
 	$effect(() => {
+		refreshCount
 		$workspaceStore && kind && untrack(() => items.refresh())
 	})
 	$effect(() => {