windmill-components 1.448.50 → 1.472.2

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -1,20 +1,25 @@
-<script>import { Alert, Button, Tab, Tabs } from './common';
+<script>import { Alert, Button, Tab, Tabs, Badge } from './common';
 import ScriptPicker from './ScriptPicker.svelte';
 import Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
 import { base } from '../base';
 import { enterpriseLicense, workspaceStore } from '../stores';
+import MsTeamsIcon from './icons/MSTeamsIcon.svelte';
 import { emptySchema, emptyString, sendUserToast, tryEvery } from '../utils';
 import { FlowService, JobService, ScriptService, WorkspaceService } from '../gen';
 import { inferArgs } from '../infer';
 import { hubBaseUrlStore } from '../stores';
-import { CheckCircle2, Loader2, RotateCw, XCircle } from 'lucide-svelte';
+import { CheckCircle2, Loader2, RotateCw, XCircle, RefreshCcw } from 'lucide-svelte';
 import { hubPaths } from '../hub';
 const slackRecoveryHandler = hubPaths.slackRecoveryHandler;
 const slackHandlerScriptPath = hubPaths.slackErrorHandler;
 const slackSuccessHandler = hubPaths.slackSuccessHandler;
+const teamsRecoveryHandler = hubPaths.teamsRecoveryHandler;
+const teamsHandlerScriptPath = hubPaths.teamsErrorHandler;
+const teamsSuccessHandler = hubPaths.teamsSuccessHandler;
 export let errorOrRecovery;
 export let isEditable;
-export let slackToggleText = 'Enable';
+export let toggleText = 'Enable';
 export let showScriptHelpText = false;
 export let handlerSelected;
 export let handlerPath;
@@ -24,8 +29,12 @@ export let customScriptTemplate;
 export let customHandlerKind = 'script';
 let customHandlerSchema;
 let slackHandlerSchema;
+let isFetching = false;
+let teams_channels = [];
+let teams_team_name = undefined;
 let workspaceConnectedToSlack = undefined;
-let slackConnectionTestJob;
+let workspaceConnectedToTeams = undefined;
+let connectionTestJob;
 async function loadSlackResources() {
     const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore });
     if (!emptyString(settings.slack_name) && !emptyString(settings.slack_team_id)) {
@@ -35,16 +44,36 @@ async function loadSlackResources() {
         workspaceConnectedToSlack = false;
     }
 }
-async function sendSlackMessage(channel) {
-    let submitted_job = await WorkspaceService.runSlackMessageTestJob({
+async function loadTeamsResources() {
+    isFetching = true;
+    const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore });
+    if (!emptyString(settings.teams_team_name) && !emptyString(settings.teams_team_id)) {
+        workspaceConnectedToTeams = true;
+    }
+    else {
+        workspaceConnectedToTeams = false;
+    }
+    if (workspaceConnectedToTeams) {
+        teams_team_name = settings.teams_team_name;
+        teams_channels = await WorkspaceService.listAvailableTeamsChannels({
+            workspace: $workspaceStore
+        });
+    }
+    isFetching = false;
+}
+async function sendMessage(channel, platform) {
+    const testJobFunction = platform === 'slack'
+        ? WorkspaceService.runSlackMessageTestJob
+        : WorkspaceService.runTeamsMessageTestJob;
+    let submitted_job = await testJobFunction({
         workspace: $workspaceStore,
         requestBody: {
             hub_script_path: handlerPath,
             channel: channel,
-            test_msg: `This is a notification to test the connection between Slack and Windmill workspace '${$workspaceStore}'`
+            test_msg: `This is a notification to test the connection between ${platform} and Windmill workspace '${$workspaceStore}'`
         }
     });
-    slackConnectionTestJob = {
+    connectionTestJob = {
         uuid: submitted_job.job_uuid,
         in_progress: true,
         is_success: false
@@ -53,16 +82,16 @@ async function sendSlackMessage(channel) {
         tryCode: async () => {
             const testResult = await JobService.getCompletedJob({
                 workspace: $workspaceStore,
-                id: slackConnectionTestJob.uuid
+                id: connectionTestJob.uuid
             });
-            slackConnectionTestJob.in_progress = false;
-            slackConnectionTestJob.is_success = testResult.success;
+            connectionTestJob.in_progress = false;
+            connectionTestJob.is_success = testResult.success;
         },
         timeoutCode: async () => {
             try {
                 await JobService.cancelQueuedJob({
                     workspace: $workspaceStore,
-                    id: slackConnectionTestJob.uuid,
+                    id: connectionTestJob.uuid,
                     requestBody: {
                         reason: 'Slack message not sent after 5s'
                     }
@@ -76,6 +105,12 @@ async function sendSlackMessage(channel) {
         timeout: 5000
     });
 }
+async function sendSlackMessage(channel) {
+    await sendMessage(channel, 'slack');
+}
+async function sendTeamsMessage(channel) {
+    await sendMessage(channel, 'teams');
+}
 async function loadHandlerScriptArgs(p, defaultArgs = []) {
     try {
         let schema = emptySchema();
@@ -124,13 +159,49 @@ function isSlackHandler(scriptPath) {
         return scriptPath.startsWith('hub/') && scriptPath.endsWith('/schedule-success-handler-slack');
     }
 }
+function isTeamsHandler(scriptPath) {
+    if (scriptPath === undefined) {
+        return false;
+    }
+    if (errorOrRecovery == 'error') {
+        return (scriptPath.startsWith('hub/') &&
+            scriptPath.endsWith('/workspace-or-schedule-error-handler-teams'));
+    }
+    else if (errorOrRecovery == 'recovery') {
+        return (scriptPath.startsWith('hub/') && scriptPath.endsWith('/schedule-recovery-handler-teams'));
+    }
+    else {
+        return scriptPath.startsWith('hub/') && scriptPath.endsWith('/schedule-success-handler-teams');
+    }
+}
 $: {
     if ($workspaceStore) {
         loadSlackResources();
+        loadTeamsResources();
+    }
+}
+let lastHandlerSelected = undefined;
+let channelCache = {
+    slack: undefined,
+    teams: undefined
+};
+$: {
+    if (lastHandlerSelected !== handlerSelected && lastHandlerSelected !== undefined) {
+        if (lastHandlerSelected === 'teams' || lastHandlerSelected === 'slack') {
+            channelCache[lastHandlerSelected] = handlerExtraArgs['channel'];
+        }
+        if (handlerSelected === 'custom') {
+            handlerExtraArgs['channel'] = '';
+        }
+        else {
+            handlerExtraArgs['channel'] = channelCache[handlerSelected] ?? '';
+        }
     }
+    lastHandlerSelected = handlerSelected;
 }
 $: handlerPath &&
     !isSlackHandler(handlerPath) &&
+    !isTeamsHandler(handlerPath) &&
     loadHandlerScriptArgs(handlerPath, [
         'path',
         'workspace_id',
@@ -169,6 +240,7 @@ $: handlerPath &&
 <div>
 	<Tabs bind:selected={handlerSelected} class="mt-2 mb-4">
 		<Tab value="slack" disabled={!isEditable}>Slack</Tab>
+		<Tab value="teams" disabled={!isEditable}>Teams</Tab>
 		<Tab value="custom" disabled={!isEditable}>
 			Custom
 			<slot name="custom-tab-tooltip" />
@@ -231,7 +303,7 @@ $: handlerPath &&
 		<Toggle
 			disabled={!$enterpriseLicense || !isEditable}
 			checked={isSlackHandler(handlerPath)}
-			options={{ right: slackToggleText }}
+			options={{ right: toggleText }}
 			on:change={async (e) => {
 				if (e.detail && errorOrRecovery === 'error') {
 					handlerPath = slackHandlerScriptPath
@@ -290,11 +362,116 @@ $: handlerPath &&
 				on:click={() => sendSlackMessage(handlerExtraArgs['channel'])}
 				size="xs">Send test message</Button
 			>
-			{#if slackConnectionTestJob !== undefined}
+			{#if connectionTestJob !== undefined}
+				<p class="text-normal text-2xs mt-1 gap-2">
+					{#if connectionTestJob.in_progress}
+						<RotateCw size={14} />
+					{:else if connectionTestJob.is_success}
+						<CheckCircle2 size={14} class="text-green-600" />
+					{:else}
+						<XCircle size={14} class="text-red-700" />
+					{/if}
+					Message sent via Windmill job
+					<a
+						target="_blank"
+						href={`${base}/run/${connectionTestJob.uuid}?workspace=${$workspaceStore}`}
+					>
+						{connectionTestJob.uuid}
+					</a>
+				</p>
+			{/if}
+		{/if}
+	{/if}
+{:else if handlerSelected === 'teams'}
+	<span class="w-full flex mb-3">
+		<Toggle
+			disabled={!$enterpriseLicense || !isEditable}
+			checked={isTeamsHandler(handlerPath)}
+			options={{ right: toggleText }}
+			on:change={async (e) => {
+				if (e.detail && errorOrRecovery === 'error') {
+					handlerPath = teamsHandlerScriptPath
+				} else if (e.detail && errorOrRecovery === 'recovery') {
+					handlerPath = teamsRecoveryHandler
+				} else if (e.detail && errorOrRecovery === 'success') {
+					handlerPath = teamsSuccessHandler
+				} else {
+					handlerPath = undefined
+				}
+			}}
+		/>
+	</span>
+	{#if workspaceConnectedToTeams}
+		<div class="w-2/3 flex flex-row items-center gap-2">
+			<div class="pt-1 flex-shrink-0">
+				<MsTeamsIcon height="24px" width="24px" />
+			</div>
+			<p class="text-sm">Teams Channel</p>
+			<div class="flex-grow">
+				<select class="w-full" bind:value={handlerExtraArgs['channel']}>
+					{#if teams_channels.length === 0}
+						<option value="" disabled selected>Bot not connected to any channel</option>
+					{:else}
+						<option value="" disabled selected>Select Teams channel</option>
+						{#each teams_channels as channel}
+							<option value={channel.channel_id}>
+								{channel.channel_name}
+							</option>
+						{/each}
+					{/if}
+				</select>
+			</div>
+			<div class="flex-shrink-0">
+				<button on:click={loadTeamsResources} class="flex items-center gap-1 mt-2">
+					<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />
+				</button>
+			</div>
+		</div>
+		<div class="flex flex-row gap-2 pb-4">
+			<p class="text-sm">
+				This workspace is connected to Team: <Badge color="blue" size="xs" class="mt-2">{teams_team_name}</Badge>
+			</p>
+			<Tooltip text={teams_team_name}>
+				Each workspace can only be connected to one Microsoft Teams team. You can configure it under <a
+					target="_blank"
+					href="{base}/workspace_settings?tab=teams">workspace settings</a
+				>.
+			</Tooltip>
+		</div>
+	{:else if workspaceConnectedToTeams == undefined}
+		<Loader2 class="animate-spin" size={10} />
+	{/if}
+	{#if $enterpriseLicense && isTeamsHandler(handlerPath)}
+		{#if workspaceConnectedToTeams == false}
+			<Alert type="error" title="Workspace not connected to Teams">
+				<div class="flex flex-row gap-x-1 w-full items-center">
+					<p class="text-clip grow min-w-0">
+						The workspace needs to be connected to Teams to use this feature. You can configure it
+						under <a target="_blank" href="{base}/workspace_settings?tab=teams"
+							>workspace settings</a
+						>.
+					</p>
+					<Button
+						variant="border"
+						color="light"
+						on:click={loadTeamsResources}
+						startIcon={{ icon: RotateCw }}
+					/>
+				</div>
+			</Alert>
+		{:else}
+			<Button
+				disabled={emptyString(handlerExtraArgs['channel'])}
+				btnClasses="w-32 text-center"
+				color="dark"
+				on:click={() => sendTeamsMessage(handlerExtraArgs['channel'] ?? '')}
+				size="xs">Send test message</Button
+			>
+			{#if connectionTestJob !== undefined}
 				<p class="text-normal text-2xs mt-1 gap-2">
-					{#if slackConnectionTestJob.in_progress}
+					{#if connectionTestJob.in_progress}
 						<RotateCw size={14} />
-					{:else if slackConnectionTestJob.is_success}
+					{:else if connectionTestJob.is_success}
 						<CheckCircle2 size={14} class="text-green-600" />
 					{:else}
 						<XCircle size={14} class="text-red-700" />
@@ -302,9 +479,9 @@ $: handlerPath &&
 					Message sent via Windmill job
 					<a
 						target="_blank"
-						href={`${base}/run/${slackConnectionTestJob.uuid}?workspace=${$workspaceStore}`}
+						href={`${base}/run/${connectionTestJob.uuid}?workspace=${$workspaceStore}`}
 					>
-						{slackConnectionTestJob.uuid}
+						{connectionTestJob.uuid}
 					</a>
 				</p>
 			{/if}

package/package/components/ErrorOrRecoveryHandler.svelte.d.ts

@@ -3,9 +3,9 @@ declare const __propDef: {
     props: {
         errorOrRecovery: 'error' | 'recovery' | 'success';
         isEditable: boolean;
-        slackToggleText?: string | undefined;
+        toggleText?: string | undefined;
         showScriptHelpText?: boolean | undefined;
-        handlerSelected: 'custom' | 'slack';
+        handlerSelected: 'custom' | 'slack' | 'teams';
         handlerPath: string | undefined;
         handlerExtraArgs: Record<string, any>;
         customInitialScriptPath: string | undefined;

package/package/components/FlowBuilder.svelte

@@ -16,7 +16,7 @@ import { dfs, getPreviousIds } from './flows/previousResults';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
 import { cleanInputs, emptyFlowModuleState } from './flows/utils';
-import { Calendar, Pen, Save, DiffIcon, MoreVertical, HistoryIcon, FileJson, CornerDownLeft } from 'lucide-svelte';
+import { Calendar, Pen, Save, DiffIcon, HistoryIcon, FileJson, CornerDownLeft } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Awareness from './Awareness.svelte';
 import { getAllModules } from './flows/flowExplorer';
@@ -27,12 +27,10 @@ import { fade } from 'svelte/transition';
 import { loadFlowModuleState, pickScript } from './flows/flowStateUtils';
 import FlowCopilotInputsModal from './copilot/FlowCopilotInputsModal.svelte';
 import FlowBuilderTutorials from './FlowBuilderTutorials.svelte';
+import Dropdown from './DropdownV2.svelte';
 import FlowTutorials from './FlowTutorials.svelte';
 import { ignoredTutorials } from './tutorials/ignoredTutorials';
 import FlowHistory from './flows/FlowHistory.svelte';
-import ButtonDropdown from './common/button/ButtonDropdown.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
-import { twMerge } from 'tailwind-merge';
 import CustomPopover from './CustomPopover.svelte';
 import Summary from './Summary.svelte';
 import FlowYamlEditor from './flows/header/FlowYamlEditor.svelte';
@@ -59,6 +57,12 @@ let deployedBy = undefined; // Author
 let confirmCallback = () => { }; // What happens when user clicks `override` in warning
 let open = false; // Is confirmation modal open
 $: setContext('customUi', customUi);
+export function getInitialAndModifiedValues() {
+    return {
+        savedValue: savedFlow,
+        modifiedValue: $flowStore
+    };
+}
 let onLatest = true;
 async function compareVersions() {
     if (version === undefined) {
@@ -1140,33 +1144,7 @@ let flowPreviewButtons;
 					{/if}
 					<div>
 						{#if moreItems?.length > 0}
-							<ButtonDropdown hasPadding={false}>
-								<svelte:fragment slot="buttonReplacement">
-									<Button nonCaptureEvent size="xs" color="light">
-										<div class="flex flex-row items-center">
-											<MoreVertical size={14} />
-										</div>
-									</Button>
-								</svelte:fragment>
-								<svelte:fragment slot="items">
-									{#each moreItems as item}
-										<MenuItem
-											on:click={item.action}
-											disabled={item.disabled}
-											class={item.disabled ? 'opacity-50' : ''}
-										>
-											<div
-												class={twMerge(
-													'text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-												)}
-											>
-												<svelte:component this={item.icon} size={14} />
-												{item.displayName}
-											</div>
-										</MenuItem>
-									{/each}
-								</svelte:fragment>
-							</ButtonDropdown>
+							<Dropdown items={moreItems} />
 						{/if}
 					</div>
 					{#if customUi?.topBar?.tutorials != false}
@@ -1221,6 +1199,7 @@ let flowPreviewButtons;
 							showCaptureHint.set(true)
 						}}
 						bind:this={flowPreviewButtons}
+						{loading}
 					/>
 					<Button
 						loading={loadingDraft}

package/package/components/FlowBuilder.svelte.d.ts

@@ -5,6 +5,7 @@ import type { FlowState } from './flows/flowState';
 import type DiffDrawer from './DiffDrawer.svelte';
 import type { FlowBuilderWhitelabelCustomUi } from './custom_ui';
 import { type ScheduleTrigger } from './triggers';
+import type { SavedAndModifiedValue } from './common/confirmationModal/unsavedTypes';
 declare const __propDef: {
     props: {
         initialPath?: string | undefined;
@@ -25,6 +26,7 @@ declare const __propDef: {
         savedPrimarySchedule?: ScheduleTrigger | undefined;
         version?: number | undefined;
         setSavedraftCb?: ((cb: () => void) => void) | undefined;
+        getInitialAndModifiedValues?: (() => SavedAndModifiedValue) | undefined;
         setPrimarySchedule?: ((schedule: ScheduleTrigger | undefined | false) => void) | undefined;
         saveDraft?: ((forceSave?: boolean) => Promise<void>) | undefined;
         computeUnlockedSteps?: ((flow: Flow) => {
@@ -53,6 +55,7 @@ export type FlowBuilderProps = typeof __propDef.props;
 export type FlowBuilderEvents = typeof __propDef.events;
 export type FlowBuilderSlots = typeof __propDef.slots;
 export default class FlowBuilder extends SvelteComponent<FlowBuilderProps, FlowBuilderEvents, FlowBuilderSlots> {
+    get getInitialAndModifiedValues(): () => SavedAndModifiedValue;
     get setPrimarySchedule(): (schedule: false | ScheduleTrigger | undefined) => void;
     get saveDraft(): (forceSave?: boolean) => Promise<void>;
     get computeUnlockedSteps(): (flow: Flow) => {

package/package/components/FlowBuilderTutorials.svelte

@@ -1,18 +1,43 @@
-<script>import { BookOpen } from 'lucide-svelte';
-import ButtonDropdown from './common/button/ButtonDropdown.svelte';
+<script>import { BookOpen, CheckCircle, Circle, RefreshCw, CheckCheck } from 'lucide-svelte';
+import Dropdown from './DropdownV2.svelte';
 import Button from './common/button/Button.svelte';
-import MenuItem from './common/menu/MenuItem.svelte';
-import { classNames } from '../utils';
 import { resetAllTodos, skipAllTodos } from '../tutorialUtils';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
-import TutorialItem from './tutorials/TutorialItem.svelte';
 import FlowTutorials from './FlowTutorials.svelte';
+import { tutorialsToDo } from '../stores';
 let targetTutorial = undefined;
 let flowTutorials = undefined;
+async function getTutorialItems() {
+    const tutorials = [
+        { displayName: 'Simple flow tutorials', id: 'action' },
+        { displayName: 'For loops tutorial', id: 'forloop' },
+        { displayName: 'Branch one tutorial', id: 'branchone' },
+        { displayName: 'Branch all tutorial', id: 'branchall' },
+        { displayName: 'Error handler', id: 'error-handler' }
+    ];
+    return [
+        ...tutorials.map((tutorial, index) => ({
+            displayName: tutorial.displayName,
+            action: () => flowTutorials?.runTutorialById(tutorial.id),
+            icon: $tutorialsToDo.includes(index) ? Circle : CheckCircle,
+            iconColor: $tutorialsToDo.includes(index) ? undefined : 'green'
+        })),
+        {
+            displayName: 'Skip tutorials',
+            action: () => skipAllTodos(),
+            icon: CheckCheck
+        },
+        {
+            displayName: 'Reset tutorials',
+            action: () => resetAllTodos(),
+            icon: RefreshCw
+        }
+    ];
+}
 </script>
 
-<button on:pointerdown|stopPropagation>
-	<ButtonDropdown hasPadding={false}>
+{#key $tutorialsToDo}
+	<Dropdown items={getTutorialItems} class="w-fit">
 		<svelte:fragment slot="buttonReplacement">
 			<Button
 				nonCaptureEvent
@@ -23,63 +48,8 @@ let flowTutorials = undefined;
 				startIcon={{ icon: BookOpen }}
 			/>
 		</svelte:fragment>
-		<svelte:fragment slot="items">
-			<TutorialItem
-				on:click={() => flowTutorials?.runTutorialById('action')}
-				label="Simple flow tutorial"
-				index={0}
-			/>
-
-			<TutorialItem
-				on:click={() => flowTutorials?.runTutorialById('forloop')}
-				label="For loops tutorial"
-				index={1}
-			/>
-
-			<TutorialItem
-				on:click={() => flowTutorials?.runTutorialById('branchone')}
-				label="Branch one tutorial"
-				index={2}
-			/>
-
-			<TutorialItem
-				on:click={() => flowTutorials?.runTutorialById('branchall')}
-				label="Branch all tutorial"
-				index={3}
-			/>
-
-			<TutorialItem
-				on:click={() => flowTutorials?.runTutorialById('error-handler')}
-				label="Error handler"
-				index={4}
-			/>
-
-			<div class="border-t border-surface-hover" />
-			<MenuItem
-				on:click={() => {
-					resetAllTodos()
-				}}
-			>
-				<div
-					class={classNames(
-						'text-primary flex flex-row items-center text-left gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-					)}
-				>
-					Reset tutorials
-				</div>
-			</MenuItem>
-			<MenuItem on:click={() => skipAllTodos()}>
-				<div
-					class={classNames(
-						'text-primary flex flex-row items-center text-left gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-					)}
-				>
-					Skip tutorials
-				</div>
-			</MenuItem>
-		</svelte:fragment>
-	</ButtonDropdown>
-</button>
+	</Dropdown>
+{/key}
 
 <FlowTutorials
 	bind:this={flowTutorials}

package/package/components/FlowBuilderTutorials.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;
     events: {
-        pointerdown: PointerEvent;
         reload: any;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowHistoryJobPicker.svelte

@@ -0,0 +1,48 @@
+<script>import { HistoryIcon } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import PopoverV2 from './meltComponents/Popover.svelte';
+import HistoricInputs from './HistoricInputs.svelte';
+import { workspaceStore } from '../stores';
+import { JobService } from '../gen';
+export let path;
+export let selected = undefined;
+const dispatch = createEventDispatcher();
+async function loadInitial() {
+    let jobs = await JobService.listJobs({
+        workspace: $workspaceStore,
+        scriptPathExact: path,
+        jobKinds: ['flow', 'flowpreview'].join(','),
+        page: 1,
+        perPage: 1
+    });
+    if (jobs.length > 0) {
+        dispatch('select', { jobId: jobs[0].id, initial: true });
+    }
+    else {
+        dispatch('nohistory');
+    }
+}
+$: $workspaceStore && loadInitial();
+</script>
+
+<PopoverV2 closeButton={false}>
+	<svelte:fragment slot="trigger">
+		<HistoryIcon size={14} />
+	</svelte:fragment>
+	<svelte:fragment slot="content">
+		<div class="p-2 h-[400px] overflow-hidden w-80 border shadow-sm">
+			<HistoricInputs
+				on:select={(e) => {
+					if (e.detail) {
+						dispatch('select', { jobId: e.detail?.jobId, initial: false })
+					} else {
+						dispatch('unselect')
+					}
+				}}
+				{selected}
+				runnableId={path}
+				runnableType={'FlowPath'}
+			/>
+		</div>
+	</svelte:fragment>
+</PopoverV2>

package/package/components/FlowHistoryJobPicker.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        path: string;
+        selected?: string | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+        unselect: CustomEvent<any>;
+        nohistory: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowHistoryJobPickerProps = typeof __propDef.props;
+export type FlowHistoryJobPickerEvents = typeof __propDef.events;
+export type FlowHistoryJobPickerSlots = typeof __propDef.slots;
+export default class FlowHistoryJobPicker extends SvelteComponent<FlowHistoryJobPickerProps, FlowHistoryJobPickerEvents, FlowHistoryJobPickerSlots> {
+}
+export {};

package/package/components/FlowJobResult.svelte

@@ -22,16 +22,19 @@ export let downloadLogs = true;
 let lastJobId = undefined;
 let drawer = undefined;
 $: jobId != lastJobId && diffJobId();
+let iteration = 0;
+let logOffset = 0;
 async function diffJobId() {
     if (jobId != lastJobId) {
         lastJobId = jobId;
         logs = undefined;
         logOffset = 0;
+        iteration = 0;
         getLogs();
     }
 }
-let logOffset = 0;
 async function getLogs() {
+    iteration += 1;
     if (jobId) {
         const getUpdate = await JobService.getJobUpdates({
             workspace: workspaceId ?? $workspaceStore,
@@ -47,7 +50,7 @@ async function getLogs() {
             if (refreshLog) {
                 getLogs();
             }
-        }, 1000);
+        }, iteration < 10 ? 1000 : iteration < 20 ? 2000 : 5000);
     }
 }
 </script>
@@ -61,7 +64,7 @@ async function getLogs() {
 	class:border={!noBorder}
 	class="grid {!col
 		? 'grid-cols-2'
-		: 'grid-rows-2'} shadow border border-tertiary-inverse grow overflow-hidden"
+		: 'grid-rows-2 max-h-screen'} shadow border border-tertiary-inverse grow overflow-hidden"
 >
 	<div class="bg-surface {col ? '' : 'max-h-80'} p-1 overflow-auto relative">
 		<span class="text-tertiary">Result</span>