windmill-components 1.623.2 → 1.655.0

package/package/components/common/table/RowIcon.svelte

@@ -1,23 +1,52 @@
 <script lang="ts">import BarsStaggered from '../../icons/BarsStaggered.svelte';
-import { Boxes, Code2, DollarSign, Folder, LayoutDashboard } from 'lucide-svelte';
-export let kind;
+import KafkaIcon from '../../icons/KafkaIcon.svelte';
+import NatsIcon from '../../icons/NatsIcon.svelte';
+import MqttIcon from '../../icons/MqttIcon.svelte';
+import AwsIcon from '../../icons/AwsIcon.svelte';
+import GoogleCloudIcon from '../../icons/GoogleCloudIcon.svelte';
+import { Boxes, Calendar, Code2, Database, DollarSign, Folder, LayoutDashboard, Mail, Route, Unplug } from 'lucide-svelte';
+let { kind, triggerKind = undefined } = $props();
+// Use triggerKind if kind is 'trigger' and triggerKind is provided
+let effectiveKind = $derived(kind === 'trigger' && triggerKind ? triggerKind : kind);
 </script>
 
-<div class="flex justify-center items-center" title={kind}>
-	{#if kind === 'flow'}
+<div class="flex justify-center items-center" title={effectiveKind}>
+	{#if effectiveKind === 'flow'}
 		<BarsStaggered size={16} class="text-teal-500" />
-	{:else if kind === 'app' || kind === 'raw_app'}
+	{:else if effectiveKind === 'app' || effectiveKind === 'raw_app'}
 		<LayoutDashboard size={16} class="text-orange-500" />
-	{:else if kind === 'script'}
+	{:else if effectiveKind === 'script'}
 		<Code2 size={16} class="text-blue-500" />
-	{:else if kind === 'variable'}
+	{:else if effectiveKind === 'variable'}
 		<DollarSign size={16} class="text-gray-400" />
-	{:else if kind === 'resource'}
+	{:else if effectiveKind === 'resource'}
 		<Boxes size={16} class="text-gray-400" />
-	{:else if kind === 'resource_type'}
-		<div style="width: 16px; height: 16px;" class="bg-gray-100 rounded-full" ></div>
-	{:else if kind === 'folder'}
+	{:else if effectiveKind === 'resource_type'}
+		<div style="width: 16px; height: 16px;" class="bg-gray-100 rounded-full"></div>
+	{:else if effectiveKind === 'folder'}
 		<Folder size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'schedule' || effectiveKind === 'schedules'}
+		<Calendar size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'routes'}
+		<Route size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'websockets'}
+		<Unplug size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'postgres'}
+		<Database size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'kafka'}
+		<KafkaIcon size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'nats'}
+		<NatsIcon size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'mqtt'}
+		<MqttIcon size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'sqs'}
+		<AwsIcon size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'gcp'}
+		<GoogleCloudIcon size={16} />
+	{:else if effectiveKind === 'emails'}
+		<Mail size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'trigger'}
+		<Calendar size={16} class="text-gray-400" />
 	{:else}
 		<div class="w-[16px]"></div>
 	{/if}

package/package/components/common/table/RowIcon.svelte.d.ts

@@ -1,20 +1,8 @@
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    kind: 'script' | 'flow' | 'app' | 'raw_app' | 'resource' | 'variable' | 'resource_type' | 'folder' | 'schedule' | 'trigger' | 'routes' | 'schedules' | 'websockets' | 'postgres' | 'kafka' | 'nats' | 'mqtt' | 'sqs' | 'gcp' | 'emails';
+    /** For 'trigger' kind, specifies the specific trigger type (routes, schedules, etc.) */
+    triggerKind?: string | undefined;
 }
-declare const RowIcon: $$__sveltets_2_IsomorphicComponent<{
-    kind: "script" | "flow" | "app" | "raw_app" | "resource" | "variable" | "resource_type" | "folder";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RowIcon = InstanceType<typeof RowIcon>;
+declare const RowIcon: import("svelte").Component<Props, {}, "">;
+type RowIcon = ReturnType<typeof RowIcon>;
 export default RowIcon;

package/package/components/common/table/ScriptRow.svelte

@@ -21,7 +21,10 @@ import NoMainFuncBadge from '../../NoMainFuncBadge.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { getDeployUiSettings } from '../../home/deploy_ui';
 import { scriptToHubUrl } from '../../../hub';
-let { script, marked, starred, shareModal, moveDrawer, deploymentDrawer, deleteConfirmedCallback = $bindable(), errorHandlerMuted, showCode, depth = 0, menuOpen = $bindable(false) } = $props();
+import { isRuleActive } from '../../../workspaceProtectionRules.svelte';
+import { buildForkEditUrl } from '../../../utils/editInFork';
+import { isCloudHosted } from '../../../cloud';
+let { script, marked, shareModal, moveDrawer, deploymentDrawer, deleteConfirmedCallback = $bindable(), errorHandlerMuted, showCode, depth = 0, menuOpen = $bindable(false), showEditButton = $bindable(true) } = $props();
 const dispatch = createEventDispatcher();
 async function archiveScript(path) {
     await ScriptService.archiveScriptByPath({ workspace: $workspaceStore, path });
@@ -65,13 +68,8 @@ let versionsDrawerOpen = $state(false);
 	{marked}
 	path={script.path}
 	summary={script.summary}
-	{starred}
 	{errorHandlerMuted}
 	workspaceId={$workspaceStore ?? ''}
-	onStarred={(newStarred) => {
-		starred = newStarred
-		dispatch('change')
-	}}
 	canFavorite={!script.draft_only}
 	{depth}
 >
@@ -102,38 +100,39 @@ let versionsDrawerOpen = $state(false);
 	{#snippet actions()}
 		<span class="hidden md:inline-flex gap-x-1">
 			{#if !$userStore?.operator}
-				{#if script.use_codebase}
-					<Badge
-						>bundle<Tooltip
-							>This script is deployed as a bundle and can only be deployed from the CLI for now</Tooltip
-						></Badge
-					>
-				{:else if script.canWrite && !script.archived}
-					<div>
-						<Button
-							aiId={`edit-script-button-${script.summary?.length > 0 ? script.summary : script.path}`}
-							aiDescription={`Edits the script ${script.summary?.length > 0 ? script.summary : script.path}`}
-							variant="subtle"
-							wrapperClasses="w-20"
-							unifiedSize="md"
-							startIcon={{ icon: Pen }}
-							href="{base}/scripts/edit/{script.path}"
+				{#if showEditButton}
+					{#if script.use_codebase}
+						<Badge
+							>bundle<Tooltip
+								>This script is deployed as a bundle and can only be deployed from the CLI for now</Tooltip
+							></Badge
 						>
-							Edit
-						</Button>
-					</div>
-				{:else if !script.draft_only}
+					{:else if script.canWrite && !script.archived}
+						<div>
+							<Button
+								aiId={`edit-script-button-${script.summary?.length > 0 ? script.summary : script.path}`}
+								aiDescription={`Edits the script ${script.summary?.length > 0 ? script.summary : script.path}`}
+								variant="subtle"
+								wrapperClasses="w-20"
+								unifiedSize="md"
+								startIcon={{ icon: Pen }}
+								href="{base}/scripts/edit/{script.path}"
+							>
+								Edit
+							</Button>
+						</div>
+					{/if}
+				{/if}
+				{#if !isCloudHosted() && !isRuleActive('DisableWorkspaceForking') && (!showEditButton || !script.canWrite)}
 					<div>
 						<Button
-							aiId={`fork-script-button-${script.summary ?? script.path}`}
-							aiDescription={`Fork the script ${script.summary ?? script.path}`}
-							variant="subtle"
-							wrapperClasses="w-20"
+							variant={!showEditButton ? 'default' : 'subtle'}
+							wrapperClasses="w-32"
 							unifiedSize="md"
 							startIcon={{ icon: GitFork }}
-							href="{base}/scripts/add?template={script.path}"
+							href={buildForkEditUrl('script', script.path)}
 						>
-							Fork
+							Edit in fork
 						</Button>
 					</div>
 				{/if}
@@ -144,6 +143,7 @@ let versionsDrawerOpen = $state(false);
 			aiDescription={`Open dropdown for script ${script.summary?.length > 0 ? script.summary : script.path} options`}
 			items={async () => {
 				let owner = isOwner(script.path, $userStore, $workspaceStore)
+				const canEdit = script.canWrite && showEditButton
 				if (script.draft_only) {
 					return [
 						{
@@ -168,7 +168,7 @@ let versionsDrawerOpen = $state(false);
 								}
 							},
 							type: dlt,
-							disabled: !script.canWrite
+							disabled: !canEdit
 						}
 					]
 				}
@@ -184,15 +184,22 @@ let versionsDrawerOpen = $state(false);
 						displayName: 'Duplicate/Fork',
 						icon: GitFork,
 						href: `${base}/scripts/add?template=${script.path}`,
+						disabled: !showEditButton,
 						hide: $userStore?.operator
 					},
+					{
+						displayName: 'Edit in workspace fork',
+						icon: GitFork,
+						href: buildForkEditUrl('script', script.path),
+						hide: $userStore?.operator || isCloudHosted() || isRuleActive('DisableWorkspaceForking')
+					},
 					{
 						displayName: 'Move/Rename',
 						icon: FolderOpen,
 						action: () => {
 							moveDrawer.openDrawer(script.path, script.summary, 'script')
 						},
-						disabled: !owner || script.archived,
+						disabled: !owner || script.archived || !canEdit,
 						hide: $userStore?.operator
 					},
 					...(isDeployable('script', script.path, await getDeployUiSettings())
@@ -283,7 +290,7 @@ let versionsDrawerOpen = $state(false);
 								: script.path && archiveScript(script.path)
 						},
 						type: 'delete',
-						disabled: !owner,
+						disabled: !owner || !canEdit,
 						hide: $userStore?.operator
 					},
 
@@ -321,7 +328,7 @@ let versionsDrawerOpen = $state(false);
 										}
 									},
 									type: dlt,
-									disabled: !script.canWrite,
+									disabled: !canEdit,
 									hide: $userStore?.operator
 								}
 							]

package/package/components/common/table/ScriptRow.svelte.d.ts

@@ -8,7 +8,6 @@ interface Props {
         use_codebase: boolean;
     };
     marked: string | undefined;
-    starred: boolean;
     shareModal: ShareModal;
     moveDrawer: MoveDrawer;
     deploymentDrawer: DeployWorkspaceDrawer;
@@ -17,6 +16,7 @@ interface Props {
     showCode: (path: string, summary: string) => void;
     depth?: number;
     menuOpen?: boolean;
+    showEditButton?: boolean;
 }
 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> & {
@@ -35,6 +35,6 @@ declare const ScriptRow: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "deleteConfirmedCallback" | "menuOpen">;
+}, {}, {}, "deleteConfirmedCallback" | "menuOpen" | "showEditButton">;
 type ScriptRow = InstanceType<typeof ScriptRow>;
 export default ScriptRow;

package/package/components/common/table/Table.svelte

@@ -1,8 +1,12 @@
+<script lang="ts">"use strict";
+let { children } = $props();
+</script>
+
 <div class="flex flex-col">
 	<div class="overflow-hidden rounded-md border">
 		<table class="min-w-full divide-y divide-gray-300">
 			<tbody class="divide-y bg-surface">
-				<slot />
+				{@render children?.()}
 			</tbody>
 		</table>
 	</div>

package/package/components/common/table/Table.svelte.d.ts

@@ -1,26 +1,6 @@
-export default Table;
-type Table = SvelteComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Table: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    children?: import('svelte').Snippet;
 }
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/package/components/common/tabs/Tabs.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { setContext } from 'svelte';
+<script lang="ts">import { setContext, untrack } from 'svelte';
 import { writable } from 'svelte/store';
 import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
@@ -15,7 +15,7 @@ function update(value) {
 setContext('Tabs', {
     selected: selectedStore,
     update,
-    hashNavigation
+    hashNavigation: untrack(() => hashNavigation)
 });
 // Sync external prop changes to store (single direction: prop → store)
 $effect(() => {

package/package/components/common/tabs/TabsV2.svelte

@@ -10,7 +10,7 @@ setContext('Tabs', {
         selected = value;
         onTabClick?.(value);
     },
-    hashNavigation
+    hashNavigation: untrack(() => hashNavigation)
 });
 function updateSelected() {
     selectedStore.set(selected);

package/package/components/common/toggleButton-v2/ToggleButton.svelte

@@ -17,7 +17,6 @@ const iconSize = $derived(ButtonType.UnifiedIconSizes[actualSize]);
 <Tooltip
 	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
 	disablePopup={tooltip === undefined}
-	disappearTimeout={0}
 	{documentationLink}
 >
 	{@const __MELTUI_BUILDER_0__ = $item(value)}

package/package/components/common/toggleButton-v2/ToggleButtonGroup.svelte

@@ -22,7 +22,7 @@ $effect(() => {
 });
 const sync = createSync(states);
 $effect(() => {
-    sync.value(selected, (v) => (selected = v));
+    sync.value(selected ?? undefined, (v) => (selected = v));
 });
 </script>
 

package/package/components/common/toggleButton-v2/ToggleButtonGroup.svelte.d.ts

@@ -1,6 +1,6 @@
 interface Props {
     id?: string | null | undefined;
-    selected?: string | string[] | undefined;
+    selected?: string | string[] | null | undefined;
     noWFull?: boolean;
     disabled?: boolean;
     tabListClass?: string;

package/package/components/common/toggleButton-v2/ToggleButtonMore.svelte

@@ -1,9 +1,11 @@
-<script lang="ts">import { twMerge } from 'tailwind-merge';
+<script lang="ts">import { untrack } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 import Popover from '../../Popover.svelte';
 import DropdownV2 from '../../DropdownV2.svelte';
 import ToggleButton from './ToggleButton.svelte';
-let { disabled = false, small = false, id = undefined, item = undefined, selected = $bindable(undefined), togglableItems, btnText, class: className = '' } = $props();
-let items = togglableItems.map((i) => ({
+import Tooltip from '../../meltComponents/Tooltip.svelte';
+let { disabled = false, small = false, id = undefined, item = undefined, selected = $bindable(undefined), togglableItems, btnText, class: className = '', hideSelectedOption = false } = $props();
+let items = untrack(() => togglableItems).map((i) => ({
     displayName: i.label,
     action: () => (selected = i.value),
     tooltip: i.tooltip
@@ -20,7 +22,7 @@ function isAnOptionSelected(selected) {
 	disappearTimeout={0}
 >
 	<div {id} class="flex">
-		{#if isAnOptionSelected(selected)}
+		{#if isAnOptionSelected(selected) && !hideSelectedOption}
 			{@const tooltip = togglableItems.find((i) => i.value === selected)?.tooltip}
 			<ToggleButton
 				{disabled}
@@ -34,7 +36,10 @@ function isAnOptionSelected(selected) {
 			/>
 		{/if}
 		<div class="flex items-center">
-			<DropdownV2 {btnText} enableFlyTransition {items} size={small ? 'sm' : 'md'} />
+			<!-- The tooltip fixes a bug where the other tooltips won't disappear -->
+			<Tooltip disablePopup>
+				<DropdownV2 {btnText} enableFlyTransition {items} size={small ? 'sm' : 'md'} />
+			</Tooltip>
 		</div>
 	</div>
 </Popover>

package/package/components/common/toggleButton-v2/ToggleButtonMore.svelte.d.ts

@@ -12,6 +12,7 @@ interface Props {
     togglableItems: TogglableItem[];
     btnText?: string;
     class?: string;
+    hideSelectedOption?: boolean;
 }
 declare const ToggleButtonMore: import("svelte").Component<Props, {}, "selected">;
 type ToggleButtonMore = ReturnType<typeof ToggleButtonMore>;

package/package/components/copilot/FlowCopilotInputsModal.svelte

@@ -2,8 +2,7 @@
 import { Button, Badge } from '../common';
 import Modal from '../common/modal/Modal.svelte';
 import Portal from '../Portal.svelte';
-export let open = false;
-export let inputs = [];
+let { open = $bindable(false), inputs = [] } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
@@ -23,16 +22,18 @@ const dispatch = createEventDispatcher();
 			{/each}
 		</ul>
 
-		<Button
-			slot="actions"
-			on:click={() => {
-				open = false
-				dispatch('confirmed')
-			}}
-			color="light"
-			size="sm"
-		>
-			<span class="inline-flex gap-2">Add <Badge color="dark-green">Enter</Badge></span>
-		</Button>
+		{#snippet actions()}
+				<Button
+				
+				on:click={() => {
+					open = false
+					dispatch('confirmed')
+				}}
+				color="light"
+				size="sm"
+			>
+				<span class="inline-flex gap-2">Add <Badge color="dark-green">Enter</Badge></span>
+			</Button>
+			{/snippet}
 	</Modal>
 </Portal>

package/package/components/copilot/FlowCopilotInputsModal.svelte.d.ts

@@ -1,3 +1,7 @@
+interface Props {
+    open?: boolean;
+    inputs?: string[];
+}
 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> & {
         $$bindings?: Bindings;
@@ -11,14 +15,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowCopilotInputsModal: $$__sveltets_2_IsomorphicComponent<{
-    open?: boolean;
-    inputs?: string[];
-}, {
+declare const FlowCopilotInputsModal: $$__sveltets_2_IsomorphicComponent<Props, {
     canceled: CustomEvent<any>;
     confirmed: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "open">;
 type FlowCopilotInputsModal = InstanceType<typeof FlowCopilotInputsModal>;
 export default FlowCopilotInputsModal;

package/package/components/copilot/MetadataGen.svelte

@@ -3,7 +3,7 @@ import { isInitialCode } from '../../script_helpers';
 import { Check, Loader2, Wand2 } from 'lucide-svelte';
 import { metadataCompletionEnabled } from '../../stores';
 import { copilotInfo } from '../../aiStore';
-import { onDestroy } from 'svelte';
+import { onDestroy, untrack } from 'svelte';
 import { sendUserToast } from '../../toast';
 import { twMerge } from 'tailwind-merge';
 import autosize from '../../autosize';
@@ -94,7 +94,7 @@ let manualDisabled = $state(false);
 let width = $state(0);
 let genHeight = $state(0);
 let focused = $state(false);
-let config = promptConfigs[promptConfigName];
+let config = promptConfigs[untrack(() => promptConfigName)];
 async function generateContent(automatic = false) {
     abortController = new AbortController();
     loading = true;
@@ -137,10 +137,10 @@ async function generateContent(automatic = false) {
 }
 if ($copilotInfo.enabled &&
     $metadataCompletionEnabled &&
-    generateOnAppear &&
+    untrack(() => generateOnAppear) &&
     !content &&
-    code &&
-    !isInitialCode(code)) {
+    untrack(() => code) &&
+    !isInitialCode(untrack(() => code) ?? '')) {
     setTimeout(() => {
         el?.focus();
     }, 0);