windmill-components 1.542.4 → 1.550.0

package/package/components/flows/map/InsertModuleInner.svelte

@@ -1,32 +1,25 @@
+<script lang="ts" module>"use strict";
+let refreshCount = $state({ val: 0 });
+</script>
+
 <script lang="ts">import { createEventDispatcher, getContext } from 'svelte';
 import StepGenQuick from '../../copilot/StepGenQuick.svelte';
 import FlowInputsQuick from '../content/FlowInputsQuick.svelte';
 import ToggleHubWorkspaceQuick from '../../ToggleHubWorkspaceQuick.svelte';
 import TopLevelNode from '../pickers/TopLevelNode.svelte';
-// import type { Writable } from 'svelte/store'
+import RefreshButton from '../../common/button/RefreshButton.svelte';
 const dispatch = createEventDispatcher();
 let { stop = false, funcDesc = $bindable(''), disableAi = false, kind = 'script', allowTrigger = true, scriptOnly = false } = $props();
 let customUi = getContext('customUi');
 let selectedKind = $state(kind);
 let preFilter = $state('all');
 let loading = $state(false);
-let small = $state(false);
+let small = $derived(kind === 'preprocessor' || kind === 'failure');
 let width = $state(0);
 let height = $state(0);
 let displayPath = $derived(width > 650 || height > 400);
-$effect(() => {
-    small = kind === 'preprocessor' || kind === 'failure';
-});
 </script>
 
-<!-- <Menu transitionDuration={0} pointerDown bind:show={open} noMinW {placement} let:close> -->
-
-<!-- {floatingConfig}
-floatingClasses="mt-2"
-containerClasses="border rounded-lg shadow-lg  bg-surface"
-noTransition
-shouldUsePortal={true} -->
-
 <div
 	id="flow-editor-insert-module"
 	class="flex flex-col h-[400px] {small
@@ -53,6 +46,7 @@ shouldUsePortal={true} -->
 		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 			<ToggleHubWorkspaceQuick bind:selected={preFilter} />
 		{/if}
+		<RefreshButton {loading} on:click={() => (refreshCount.val += 1)} />
 	</div>
 
 	<div class="flex flex-row grow min-h-0">
@@ -128,13 +122,15 @@ shouldUsePortal={true} -->
 						dispatch('new', { kind: 'branchall' })
 					}}
 				/>
-				<TopLevelNode
-					label="AI Agent"
-					on:select={() => {
-						dispatch('close')
-						dispatch('new', { kind: 'aiagent' })
-					}}
-				/>
+				{#if customUi?.aiAgent != false}
+					<TopLevelNode
+						label="AI Agent"
+						on:select={() => {
+							dispatch('close')
+							dispatch('new', { kind: 'aiagent' })
+						}}
+					/>
+				{/if}
 			</div>
 		{/if}
 
@@ -154,6 +150,7 @@ shouldUsePortal={true} -->
 			{preFilter}
 			{small}
 			{displayPath}
+			refreshCount={refreshCount.val}
 		/>
 	</div>
 </div>

package/package/components/flows/map/MapItem.svelte

@@ -40,7 +40,7 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 			<div
 				class={twMerge(
 					'absolute z-10 right-0 -top-4 center-center text-tertiary text-2xs',
-					editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2' : ''
+					editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2 right-10' : ''
 				)}
 			>
 				{msToSec(duration_ms)}s

package/package/components/flows/pickers/PickHubScriptQuick.svelte

@@ -1,73 +1,65 @@
+<script module lang="ts">"use strict";
+let listHubIntegrationsCached = createCache(({ kind }) => IntegrationService.listHubIntegrations({ kind }), { initial: { kind: 'script', refreshCount: 0 }, invalidateMs: 1000 * 60 });
+let listHubScriptsCached = createCache(async ({ filter, kind, appFilter }) => 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, refreshCount: 0 },
+    invalidateMs: 1000 * 60
+});
+</script>
+
 <script lang="ts">import { createEventDispatcher, untrack } from 'svelte';
 import { Skeleton } from '../../common';
-import { classNames } from '../../../utils';
+import { classNames, createCache } from '../../../utils';
 import { APP_TO_ICON_COMPONENT } from '../../icons';
 import { IntegrationService, ScriptService } from '../../../gen';
 import { Circle } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
+import { usePromise } from '../../../svelte5Utils.svelte';
 let hubNotAvailable = $state(false);
 const dispatch = createEventDispatcher();
-let { kind = 'script', filter = $bindable(''), loading = $bindable(false), selected = undefined, appFilter = undefined, items = $bindable([]), displayPath = false, apps = $bindable([]) } = $props();
-let allApps = [];
+let { kind = 'script', filter = $bindable(''), loading = $bindable(false), selected = undefined, appFilter = undefined, items = $bindable([]), displayPath = false, apps = $bindable([]), refreshCount = 0 } = $props();
+let allApps = $state([]);
+$effect(() => {
+    if (filter.length > 0) {
+        apps = Array.from(new Set(items?.map((x) => x.app) ?? [])).sort();
+    }
+    else {
+        apps = allApps;
+    }
+});
 async function getAllApps(filterKind) {
     try {
         hubNotAvailable = false;
-        allApps = (await IntegrationService.listHubIntegrations({
-            kind: filterKind
-        })).map((x) => x.name);
-        apps = allApps;
+        allApps = (await listHubIntegrationsCached({ kind: filterKind, refreshCount })).map((x) => x.name);
     }
     catch (err) {
         console.error('Hub is not available');
         allApps = [];
-        apps = [];
         hubNotAvailable = true;
     }
 }
-let startTs = 0;
-async function applyFilter(filter, filterKind, appFilter) {
-    try {
-        loading = true;
-        hubNotAvailable = false;
-        const ts = Date.now();
-        startTs = ts;
-        await new Promise((resolved, rejected) => setTimeout(resolved, 200));
-        if (ts < startTs)
+let hubScriptsFilteredPromise = usePromise(() => listHubScriptsCached({ appFilter, filter, kind, refreshCount }), { loadInit: false });
+$effect(() => {
+    ;
+    [filter, kind, appFilter, refreshCount];
+    hubScriptsFilteredPromise.refresh();
+});
+$effect(() => {
+    loading = hubScriptsFilteredPromise.status === 'loading';
+    hubNotAvailable = !!hubScriptsFilteredPromise.error;
+    const scripts = hubScriptsFilteredPromise.value;
+    untrack(() => {
+        if (!scripts)
             return;
-        const scripts = filter.length > 0
-            ? await ScriptService.queryHubScripts({
-                text: `${filter}`,
-                limit: 40,
-                kind: filterKind
-            })
-            : ((await ScriptService.getTopHubScripts({
-                limit: 40,
-                kind: filterKind,
-                app: appFilter
-            })).asks ?? []);
         const mappedItems = scripts.map((x) => ({
             ...x,
             path: `hub/${x.version_id}/${x.app}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
             summary: `${x.summary} (${x.app})`
         }));
-        if (filter.length > 0) {
-            apps = Array.from(new Set(mappedItems?.map((x) => x.app) ?? [])).sort();
-        }
-        else {
-            apps = allApps;
-        }
         items = appFilter ? mappedItems.filter((x) => x.app === appFilter) : mappedItems;
-        if (ts === startTs) {
-            loading = false;
-        }
-        hubNotAvailable = false;
-    }
-    catch (err) {
-        hubNotAvailable = true;
-        console.error('Hub not available');
-        loading = false;
-    }
-}
+    });
+});
 function onKeyDown(e) {
     if (selected != undefined &&
         items &&
@@ -81,13 +73,7 @@ function onKeyDown(e) {
 }
 $effect(() => {
     ;
-    [filter, kind, appFilter];
-    untrack(() => {
-        applyFilter(filter, kind, appFilter);
-    });
-});
-$effect(() => {
-    kind;
+    [kind, refreshCount];
     untrack(() => {
         getAllApps(kind);
     });

package/package/components/flows/pickers/PickHubScriptQuick.svelte.d.ts

@@ -16,6 +16,7 @@ interface Props {
     }[];
     displayPath?: boolean;
     apps?: string[];
+    refreshCount?: number;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/flows/pickers/WorkspaceScriptPickerQuick.svelte

@@ -1,25 +1,36 @@
+<script module lang="ts">"use strict";
+let initialWorkspace = get(workspaceStore);
+let loadItemsCached = createCache(({ workspace, kind, isTemplate }) => workspace
+    ? kind == 'flow'
+        ? FlowService.listFlows({ workspace })
+        : ScriptService.listScripts({ workspace, kinds: kind, isTemplate })
+    : undefined, initialWorkspace
+    ? {
+        initial: {
+            workspace: initialWorkspace,
+            kind: 'script',
+            isTemplate: undefined,
+            refreshCount: 0
+        },
+        invalidateMs: 1000 * 60
+    }
+    : {});
+</script>
+
 <script lang="ts">import { workspaceStore } from '../../../stores';
 import { createEventDispatcher, untrack } from 'svelte';
 import { FlowService, ScriptService } from '../../../gen';
 import SearchItems from '../../SearchItems.svelte';
 import { Skeleton } from '../../common';
-import { emptyString } from '../../../utils';
+import { createCache, emptyString } from '../../../utils';
 import { Code2 } from 'lucide-svelte';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
 import Popover from '../../Popover.svelte';
-let items = $state(undefined);
+import { usePromise } from '../../../svelte5Utils.svelte';
+import { get } from 'svelte/store';
+let items = usePromise(async () => await loadItemsCached({ workspace: $workspaceStore, kind, isTemplate, refreshCount }), { loadInit: false, clearValueOnRefresh: false });
 let filteredItems = $state(undefined);
-async function loadItems() {
-    items =
-        kind == 'flow'
-            ? await FlowService.listFlows({ workspace: $workspaceStore })
-            : await ScriptService.listScripts({
-                workspace: $workspaceStore,
-                kinds: kind,
-                isTemplate
-            });
-}
-let { kind = 'script', isTemplate = undefined, selected = undefined, displayPath = false, filteredWithOwner = $bindable(undefined), filter = '', owners = $bindable([]), ownerFilter = $bindable(undefined) } = $props();
+let { kind = 'script', isTemplate = undefined, selected = undefined, displayPath = false, filteredWithOwner = $bindable(undefined), filter = '', owners = $bindable([]), ownerFilter = $bindable(undefined), refreshCount = 0 } = $props();
 const dispatch = createEventDispatcher();
 let lockHash = false;
 function onKeyDown(e) {
@@ -39,7 +50,8 @@ function onKeyDown(e) {
     }
 }
 $effect(() => {
-    $workspaceStore && kind && untrack(() => loadItems());
+    refreshCount;
+    $workspaceStore && kind && untrack(() => items.refresh());
 });
 $effect(() => {
     if ($workspaceStore) {
@@ -69,7 +81,7 @@ $effect(() => {
 
 <SearchItems
 	{filter}
-	{items}
+	items={items.value}
 	bind:filteredItems
 	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
 />

package/package/components/flows/pickers/WorkspaceScriptPickerQuick.svelte.d.ts

@@ -18,6 +18,7 @@ interface Props {
         kind: 'inline' | 'owner' | 'integrations';
         name: string | undefined;
     } | undefined;
+    refreshCount?: number;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/flows/propPicker/OutputPicker.svelte

@@ -102,6 +102,7 @@ onMount(() => {
 		<div class="flex flex-row items-center justify-center w-full h-full">
 			{#if showInput}
 				<Popover
+					enableFlyTransition
 					floatingConfig={{
 						placement: 'bottom',
 						gutter: 0,
@@ -144,6 +145,7 @@ onMount(() => {
 			{/if}
 
 			<Popover
+				enableFlyTransition
 				floatingConfig={{
 					placement: 'bottom',
 					gutter: 0,

package/package/components/git_sync/DetectionFlow.svelte

@@ -5,10 +5,34 @@ import GitSyncFilterSettings from '../workspaceSettings/GitSyncFilterSettings.sv
 import Toggle from '../Toggle.svelte';
 import { sendUserToast } from '../../toast';
 import { workspaceStore } from '../../stores';
-let { idx } = $props();
+import GitSyncModeDisplay from './GitSyncModeDisplay.svelte';
+let { idx, mode } = $props();
 const gitSyncContext = getGitSyncContext();
 const repo = $derived(gitSyncContext.getRepository(idx));
+let targetBranch = $state('main');
+// Update target branch when repository changes
+$effect(() => {
+    const abortController = new AbortController();
+    if (repo?.git_repo_resource_path) {
+        gitSyncContext.getTargetBranch(repo).then(branch => {
+            if (!abortController.signal.aborted) {
+                targetBranch = branch;
+            }
+        }).catch(error => {
+            if (!abortController.signal.aborted) {
+                console.warn('Failed to get target branch:', error);
+            }
+        });
+    }
+    return () => {
+        abortController.abort();
+    };
+});
 async function handleDetect() {
+    if (!repo) {
+        sendUserToast('Repository not found', true);
+        return;
+    }
     try {
         await gitSyncContext.detectRepository(idx);
     }
@@ -43,24 +67,13 @@ async function handleSaveConnection() {
 }
 </script>
 
+
 {#if repo}
 	<div class="space-y-4">
 		{#if !repo.detectionState || repo.detectionState === 'idle'}
-			<!-- Step 1: Show toggles first, then check button -->
-			<div class="space-y-3">
-				<Toggle
-					disabled={!repo.git_repo_resource_path}
-					bind:checked={repo.use_individual_branch}
-					options={{
-						left: 'Sync mode',
-						leftTooltip: 'Changes will be committed directly to the branch',
-						right: 'Promotion mode',
-						rightTooltip:
-							"Changes will be made to a new branch per deployed object (prefixed with 'wm_deploy/')"
-					}}
-				/>
-
-				{#if repo.use_individual_branch}
+			<!-- Folder grouping option for promotion mode -->
+			{#if mode === 'promotion'}
+				<div class="space-y-3">
 					<Toggle
 						disabled={!repo.git_repo_resource_path}
 						bind:checked={repo.group_by_folder}
@@ -70,8 +83,8 @@ async function handleSaveConnection() {
 								'Instead of creating a branch per object, Windmill will create a branch per folder containing objects being deployed.'
 						}}
 					/>
-				{/if}
-			</div>
+				</div>
+			{/if}
 
 			<!-- Check repo settings button -->
 			<div class="flex justify-start">
@@ -110,19 +123,7 @@ async function handleSaveConnection() {
 				useIndividualBranch={repo.use_individual_branch}
 			/>
 
-			<!-- Display mode settings as prominent text -->
-			<div class="text-base">
-				{#if repo.use_individual_branch}
-					<div
-						><span class="font-bold">Promotion:</span> Creating branches whose promotion target is main</div
-					>
-					{#if repo.group_by_folder}
-						<div class="text-sm text-tertiary mt-1">Grouped by folder</div>
-					{/if}
-				{:else}
-					<div>Sync: <span class="font-bold">Syncing back to branch main</span></div>
-				{/if}
-			</div>
+			<GitSyncModeDisplay {mode} {targetBranch} repository={repo} />
 
 			<!-- Initialize button -->
 			<div class="flex justify-start">
@@ -149,19 +150,7 @@ async function handleSaveConnection() {
 				useIndividualBranch={repo.use_individual_branch}
 			/>
 
-			<!-- Display mode settings as prominent text -->
-			<div class="text-base">
-				{#if repo.use_individual_branch}
-					<div
-						><span class="font-bold">Promotion:</span> Creating branches whose promotion target is main</div
-					>
-					{#if repo.group_by_folder}
-						<div class="text-sm text-tertiary mt-1">Grouped by folder</div>
-					{/if}
-				{:else}
-					<div>Sync: <span class="font-bold">Syncing back to branch main</span></div>
-				{/if}
-			</div>
+			<GitSyncModeDisplay {mode} {targetBranch} repository={repo} />
 
 			<!-- Save connection button -->
 			<div class="flex justify-start">

package/package/components/git_sync/DetectionFlow.svelte.d.ts

@@ -1,5 +1,6 @@
 type $$ComponentProps = {
     idx: number;
+    mode?: 'sync' | 'promotion';
 };
 declare const DetectionFlow: import("svelte").Component<$$ComponentProps, {}, "">;
 type DetectionFlow = ReturnType<typeof DetectionFlow>;

package/package/components/git_sync/GitSyncContext.svelte.d.ts

@@ -12,6 +12,8 @@ export type GitSyncRepository = BackendGitRepositorySettings & {
     detectionJobId?: string;
     detectionJobStatus?: 'running' | 'success' | 'failure';
     _trackedPath?: string;
+    _targetBranch?: string;
+    _detectionTimestamp?: number;
 };
 export type GitSyncTestJob = {
     jobId: string;
@@ -60,7 +62,10 @@ export declare function createGitSyncContext(workspace: string): {
     readonly hasUnsavedConnections: boolean;
     readonly hasWorkspaceLevelSettings: boolean;
     addRepository: () => void;
+    addSyncRepository: () => void;
+    addPromotionRepository: () => void;
     removeRepository: (idx: number) => Promise<void>;
+    removeRepositoryByPath: (resourcePath: string) => Promise<void>;
     getRepository: (idx: number) => GitSyncRepository;
     getValidation: (idx: number) => ValidationState;
     revertRepository: (idx: number) => void;
@@ -76,6 +81,23 @@ export declare function createGitSyncContext(workspace: string): {
     closeSuccessModal: () => void;
     loadSettings: () => Promise<void>;
     saveRepository: (idx: number, savedWithoutInit?: boolean) => Promise<void>;
+    getPrimarySyncRepository: () => {
+        repo: GitSyncRepository;
+        idx: number;
+    } | null;
+    getPrimaryPromotionRepository: () => {
+        repo: GitSyncRepository;
+        idx: number;
+    } | null;
+    getSecondarySyncRepositories: () => {
+        repo: GitSyncRepository;
+        idx: number;
+    }[];
+    getLegacyPromotionRepositories: () => {
+        repo: GitSyncRepository;
+        idx: number;
+    }[];
+    getTargetBranch: (repo: GitSyncRepository) => Promise<string>;
 };
 export type GitSyncContextType = ReturnType<typeof createGitSyncContext>;
 export declare function setGitSyncContext(workspace: string): GitSyncContextType;